From 3731eb32609175216587a881bf62cb9c0167f9bf Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Tue, 19 May 2026 02:59:42 +0530
Subject: [PATCH 01/48] Add roof surface placement support for items

Items (e.g. solar panels) can now be placed on sloped roof surfaces.
The placement system computes euler rotation from the roof surface
normal so items sit flush on the slope instead of going inside.

- Add roofStrategy to placement-strategies with enter/move/click/leave
- Wire roof:enter/move/click/leave events in the placement coordinator
- Add calculateRoofRotation in placement-math using surface normals
- Support full 3D cursor rotation for sloped surfaces
- Items on roofs are parented to the level with world-space rotation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/tools/item/move-tool.tsx   |   6 +-
 .../components/tools/item/placement-math.ts   |  26 ++++
 .../tools/item/placement-strategies.ts        |  88 ++++++++++++
 .../components/tools/item/placement-types.ts  |   5 +-
 .../tools/item/use-placement-coordinator.tsx  | 135 +++++++++++++++++-
 5 files changed, 251 insertions(+), 9 deletions(-)

diff --git a/packages/editor/src/components/tools/item/move-tool.tsx b/packages/editor/src/components/tools/item/move-tool.tsx
index 5b017ed20..eefaa2a79 100644
--- a/packages/editor/src/components/tools/item/move-tool.tsx
+++ b/packages/editor/src/components/tools/item/move-tool.tsx
@@ -40,12 +40,12 @@ function getInitialState(node: {
 }): PlacementState {
   const attachTo = node.asset.attachTo
   if (attachTo === 'wall' || attachTo === 'wall-side') {
-    return { surface: 'wall', wallId: node.parentId, ceilingId: null, surfaceItemId: null }
+    return { surface: 'wall', wallId: node.parentId, ceilingId: null, surfaceItemId: null, roofId: null }
   }
   if (attachTo === 'ceiling') {
-    return { surface: 'ceiling', wallId: null, ceilingId: node.parentId, surfaceItemId: null }
+    return { surface: 'ceiling', wallId: null, ceilingId: node.parentId, surfaceItemId: null, roofId: null }
   }
-  return { surface: 'floor', wallId: null, ceilingId: null, surfaceItemId: null }
+  return { surface: 'floor', wallId: null, ceilingId: null, surfaceItemId: null, roofId: null }
 }
 
 function MoveItemContent({ movingNode }: { movingNode: ItemNode }) {
diff --git a/packages/editor/src/components/tools/item/placement-math.ts b/packages/editor/src/components/tools/item/placement-math.ts
index 49eacf304..112273a41 100644
--- a/packages/editor/src/components/tools/item/placement-math.ts
+++ b/packages/editor/src/components/tools/item/placement-math.ts
@@ -1,4 +1,5 @@
 import { type AssetInput, isObject } from '@pascal-app/core'
+import { Euler, Matrix3, type Matrix4, Quaternion, Vector3 } from 'three'
 import useEditor from '../../../store/use-editor'
 
 function getGridSnapStep(): number {
@@ -118,3 +119,28 @@ export function stripTransient(meta: any): any {
   const { isTransient, ...rest } = meta as Record<string, any>
   return rest
 }
+
+const _up = new Vector3(0, 1, 0)
+const _normal = new Vector3()
+const _quat = new Quaternion()
+const _euler = new Euler()
+
+/**
+ * Compute euler rotation that tilts an item so its local +Y aligns with a
+ * roof surface normal. The normal is in the hit mesh's local space and is
+ * transformed to world space via the mesh's matrixWorld.
+ */
+export function calculateRoofRotation(
+  normal: [number, number, number] | undefined,
+  objectMatrixWorld: Matrix4,
+): [number, number, number] {
+  if (!normal) return [0, 0, 0]
+
+  _normal.set(normal[0], normal[1], normal[2])
+  _normal.applyNormalMatrix(new Matrix3().getNormalMatrix(objectMatrixWorld)).normalize()
+
+  _quat.setFromUnitVectors(_up, _normal)
+  _euler.setFromQuaternion(_quat, 'XYZ')
+
+  return [_euler.x, _euler.y, _euler.z]
+}
diff --git a/packages/editor/src/components/tools/item/placement-strategies.ts b/packages/editor/src/components/tools/item/placement-strategies.ts
index 3e8724081..5563268b8 100644
--- a/packages/editor/src/components/tools/item/placement-strategies.ts
+++ b/packages/editor/src/components/tools/item/placement-strategies.ts
@@ -6,6 +6,7 @@ import type {
   GridEvent,
   ItemEvent,
   ItemNode,
+  RoofEvent,
   WallEvent,
   WallNode,
 } from '@pascal-app/core'
@@ -19,6 +20,7 @@ import { Euler, Matrix3, Quaternion, Vector3 } from 'three'
 import {
   calculateCursorRotation,
   calculateItemRotation,
+  calculateRoofRotation,
   getGridAlignedDimensions,
   getSideFromNormal,
   isValidWallSideFace,
@@ -587,6 +589,87 @@ export const itemSurfaceStrategy = {
   },
 }
 
+// ============================================================================
+// ROOF STRATEGY
+// ============================================================================
+
+export const roofStrategy = {
+  enter(ctx: PlacementContext, event: RoofEvent): TransitionResult | null {
+    if (ctx.asset.attachTo) return null
+    if (!ctx.levelId) return null
+
+    const rotation = calculateRoofRotation(event.normal, event.object.matrixWorld)
+
+    return {
+      stateUpdate: { surface: 'roof', roofId: event.node.id },
+      nodeUpdate: {
+        position: [event.position[0], event.position[1], event.position[2]],
+        parentId: ctx.levelId,
+        rotation,
+      },
+      cursorRotationY: rotation[1],
+      cursorRotation: rotation,
+      gridPosition: [event.position[0], event.position[1], event.position[2]],
+      cursorPosition: [event.position[0], event.position[1], event.position[2]],
+      stopPropagation: true,
+    }
+  },
+
+  move(ctx: PlacementContext, event: RoofEvent): PlacementResult | null {
+    if (ctx.state.surface !== 'roof') return null
+    if (!ctx.draftItem) return null
+
+    const rotation = calculateRoofRotation(event.normal, event.object.matrixWorld)
+
+    return {
+      gridPosition: [event.position[0], event.position[1], event.position[2]],
+      cursorPosition: [event.position[0], event.position[1], event.position[2]],
+      cursorRotationY: rotation[1],
+      cursorRotation: rotation,
+      nodeUpdate: {
+        position: [event.position[0], event.position[1], event.position[2]],
+        rotation,
+      },
+      stopPropagation: true,
+      dirtyNodeId: null,
+    }
+  },
+
+  click(ctx: PlacementContext, _event: RoofEvent): CommitResult | null {
+    if (ctx.state.surface !== 'roof') return null
+    if (!ctx.draftItem) return null
+
+    return {
+      nodeUpdate: {
+        position: [ctx.gridPosition.x, ctx.gridPosition.y, ctx.gridPosition.z],
+        parentId: ctx.levelId,
+        rotation: ctx.draftItem.rotation,
+        metadata: stripTransient(ctx.draftItem.metadata),
+      },
+      stopPropagation: true,
+      dirtyNodeId: null,
+    }
+  },
+
+  leave(ctx: PlacementContext): TransitionResult | null {
+    if (ctx.state.surface !== 'roof') return null
+
+    return {
+      stateUpdate: { surface: 'floor', roofId: null },
+      nodeUpdate: {
+        position: [ctx.gridPosition.x, 0, ctx.gridPosition.z],
+        parentId: ctx.levelId,
+        rotation: [0, ctx.currentCursorRotationY, 0],
+      },
+      cursorRotationY: ctx.currentCursorRotationY,
+      cursorRotation: [0, ctx.currentCursorRotationY, 0],
+      gridPosition: [ctx.gridPosition.x, 0, ctx.gridPosition.z],
+      cursorPosition: [ctx.gridPosition.x, 0, ctx.gridPosition.z],
+      stopPropagation: true,
+    }
+  },
+}
+
 // ============================================================================
 // VALIDATION
 // ============================================================================
@@ -603,6 +686,11 @@ export function checkCanPlace(ctx: PlacementContext, validators: SpatialValidato
     return ctx.state.surfaceItemId !== null
   }
 
+  // Roof: valid if we entered (no spatial validator yet)
+  if (ctx.state.surface === 'roof') {
+    return ctx.state.roofId !== null
+  }
+
   const attachTo = ctx.draftItem.asset.attachTo
 
   const alignedDims = getGridAlignedDimensions(getScaledDimensions(ctx.draftItem), attachTo)
diff --git a/packages/editor/src/components/tools/item/placement-types.ts b/packages/editor/src/components/tools/item/placement-types.ts
index 538286580..69a3d5ee3 100644
--- a/packages/editor/src/components/tools/item/placement-types.ts
+++ b/packages/editor/src/components/tools/item/placement-types.ts
@@ -12,7 +12,7 @@ import type { Vector3 } from 'three'
 // PLACEMENT STATE
 // ============================================================================
 
-export type SurfaceType = 'floor' | 'wall' | 'ceiling' | 'item-surface'
+export type SurfaceType = 'floor' | 'wall' | 'ceiling' | 'item-surface' | 'roof'
 
 /**
  * Tracks which surface the draft item is currently on.
@@ -23,6 +23,7 @@ export interface PlacementState {
   wallId: string | null
   ceilingId: string | null
   surfaceItemId: string | null
+  roofId: string | null
 }
 
 // ============================================================================
@@ -58,6 +59,7 @@ export interface PlacementResult {
   gridPosition: [number, number, number]
   cursorPosition: [number, number, number]
   cursorRotationY: number
+  cursorRotation?: [number, number, number]
   nodeUpdate: Partial<ItemNode> | null
   stopPropagation: boolean
   dirtyNodeId: AnyNode['id'] | null
@@ -72,6 +74,7 @@ export interface TransitionResult {
   gridPosition: [number, number, number]
   cursorPosition: [number, number, number]
   cursorRotationY: number
+  cursorRotation?: [number, number, number]
   stopPropagation: boolean
 }
 
diff --git a/packages/editor/src/components/tools/item/use-placement-coordinator.tsx b/packages/editor/src/components/tools/item/use-placement-coordinator.tsx
index fdafe3635..bac2b78fc 100644
--- a/packages/editor/src/components/tools/item/use-placement-coordinator.tsx
+++ b/packages/editor/src/components/tools/item/use-placement-coordinator.tsx
@@ -7,6 +7,7 @@ import {
   getScaledDimensions,
   type ItemEvent,
   resolveLevelId,
+  type RoofEvent,
   sceneRegistry,
   spatialGridManager,
   useLiveTransforms,
@@ -41,6 +42,7 @@ import {
   checkCanPlace,
   floorStrategy,
   itemSurfaceStrategy,
+  roofStrategy,
   wallStrategy,
 } from './placement-strategies'
 import type { PlacementState, TransitionResult } from './placement-types'
@@ -286,7 +288,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
   const gridPosition = useRef(new Vector3(0, 0, 0))
   const lastRawPos = useRef(new Vector3(0, 0, 0))
   const placementState = useRef<PlacementState>(
-    config.initialState ?? { surface: 'floor', wallId: null, ceilingId: null, surfaceItemId: null },
+    config.initialState ?? { surface: 'floor', wallId: null, ceilingId: null, surfaceItemId: null, roofId: null },
   )
   const shiftFreeRef = useRef(false)
   const previewBoundsSignatureRef = useRef<string | null>(null)
@@ -484,7 +486,11 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
       const c = worldToBuildingLocal(...result.cursorPosition)
       cursorGroupRef.current.position.set(c.x, c.y, c.z)
-      cursorGroupRef.current.rotation.y = result.cursorRotationY
+      if (result.cursorRotation) {
+        cursorGroupRef.current.rotation.set(...result.cursorRotation)
+      } else {
+        cursorGroupRef.current.rotation.set(0, result.cursorRotationY, 0)
+      }
 
       const draft = draftNode.current
       if (draft) {
@@ -498,12 +504,18 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       gridPosition.current.set(...result.gridPosition)
       const c = worldToBuildingLocal(...result.cursorPosition)
       cursorGroupRef.current.position.set(c.x, c.y, c.z)
-      cursorGroupRef.current.rotation.y = result.cursorRotationY
+      if (result.cursorRotation) {
+        cursorGroupRef.current.rotation.set(...result.cursorRotation)
+      } else {
+        cursorGroupRef.current.rotation.set(0, result.cursorRotationY, 0)
+      }
+
+      const initRotation: [number, number, number] = result.cursorRotation ?? [0, result.cursorRotationY, 0]
 
       draftNode.create(
         gridPosition.current,
         asset,
-        [0, result.cursorRotationY, 0],
+        initRotation,
         configRef.current.defaultScale,
       )
 
@@ -1065,6 +1077,109 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       }
     }
 
+    // ---- Roof Segment Handlers ----
+
+    const toRoofLocal = (result: TransitionResult): TransitionResult => {
+      const local = worldToBuildingLocal(...result.cursorPosition)
+      const localPos: [number, number, number] = [local.x, local.y, local.z]
+      return {
+        ...result,
+        gridPosition: localPos,
+        nodeUpdate: { ...result.nodeUpdate, position: localPos },
+      }
+    }
+
+    const onRoofEnter = (event: RoofEvent) => {
+      const result = roofStrategy.enter(getContext(), event)
+      if (!result) return
+
+      event.stopPropagation()
+      const local = toRoofLocal(result)
+      applyTransition(local)
+
+      if (!draftNode.current) {
+        ensureDraft(local)
+      }
+    }
+
+    const onRoofMove = (event: RoofEvent) => {
+      const ctx = getContext()
+
+      if (ctx.state.surface !== 'roof') {
+        const enterResult = roofStrategy.enter(ctx, event)
+        if (!enterResult) return
+
+        event.stopPropagation()
+        const local = toRoofLocal(enterResult)
+        applyTransition(local)
+        if (!draftNode.current) {
+          ensureDraft(local)
+        }
+        return
+      }
+
+      if (!draftNode.current) {
+        const enterResult = roofStrategy.enter(getContext(), event)
+        if (!enterResult) return
+        event.stopPropagation()
+        ensureDraft(toRoofLocal(enterResult))
+        return
+      }
+
+      const result = roofStrategy.move(ctx, event)
+      if (!result) return
+
+      event.stopPropagation()
+
+      const localPos = worldToBuildingLocal(...result.cursorPosition)
+      gridPosition.current.set(localPos.x, localPos.y, localPos.z)
+      cursorGroupRef.current.position.set(localPos.x, localPos.y, localPos.z)
+      if (result.cursorRotation) {
+        cursorGroupRef.current.rotation.set(...result.cursorRotation)
+      } else {
+        cursorGroupRef.current.rotation.y = result.cursorRotationY
+      }
+
+      const draft = draftNode.current
+      if (draft && result.nodeUpdate) {
+        if ('rotation' in result.nodeUpdate)
+          draft.rotation = result.nodeUpdate.rotation as [number, number, number]
+        draft.position = [localPos.x, localPos.y, localPos.z]
+        const mesh = sceneRegistry.nodes.get(draft.id)
+        if (mesh) {
+          mesh.position.set(localPos.x, localPos.y, localPos.z)
+          if (result.cursorRotation) {
+            mesh.rotation.set(...result.cursorRotation)
+          }
+        }
+      }
+
+      revalidate()
+    }
+
+    const onRoofClick = (event: RoofEvent) => {
+      const result = roofStrategy.click(getContext(), event)
+      if (!result) return
+
+      event.stopPropagation()
+      if (draftNode.current) {
+        useLiveTransforms.getState().clear(draftNode.current.id)
+      }
+      draftNode.commit(result.nodeUpdate)
+
+      if (configRef.current.onCommitted()) {
+        revalidate()
+      }
+    }
+
+    const onRoofLeave = (event: RoofEvent) => {
+      const result = roofStrategy.leave(getContext())
+      if (!result) return
+
+      event.stopPropagation()
+      applyTransition(result)
+    }
+
     // ---- Keyboard rotation ----
 
     const ROTATION_STEP = Math.PI / 2
@@ -1239,6 +1354,10 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     emitter.on('ceiling:move', onCeilingMove)
     emitter.on('ceiling:click', onCeilingClick)
     emitter.on('ceiling:leave', onCeilingLeave)
+    emitter.on('roof:enter', onRoofEnter)
+    emitter.on('roof:move', onRoofMove)
+    emitter.on('roof:click', onRoofClick)
+    emitter.on('roof:leave', onRoofLeave)
 
     return () => {
       tearingDown = true
@@ -1263,6 +1382,10 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       emitter.off('ceiling:move', onCeilingMove)
       emitter.off('ceiling:click', onCeilingClick)
       emitter.off('ceiling:leave', onCeilingLeave)
+      emitter.off('roof:enter', onRoofEnter)
+      emitter.off('roof:move', onRoofMove)
+      emitter.off('roof:click', onRoofClick)
+      emitter.off('roof:leave', onRoofLeave)
       emitter.off('tool:cancel', onCancel)
       window.removeEventListener('keydown', onKeyDown)
       window.removeEventListener('keyup', onKeyUp)
@@ -1307,7 +1430,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     }
     mesh.visible = true
 
-    if (placementState.current.surface === 'floor') {
+    if (placementState.current.surface === 'roof') {
+      mesh.position.copy(gridPosition.current)
+    } else if (placementState.current.surface === 'floor') {
       const distance = mesh.position.distanceToSquared(gridPosition.current)
       if (distance > 1) {
         mesh.position.copy(gridPosition.current)

From 7c1e3839c95c184dadb2b9e761b5da0520598f29 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Wed, 20 May 2026 17:21:10 +0530
Subject: [PATCH 02/48] fixed conflict

---
 .../src/components/tools/item/move-tool.tsx   |  69 ----------
 .../tools/item/placement-strategies.ts        |  84 ------------
 .../components/tools/item/placement-types.ts  |   8 --
 .../tools/item/use-placement-coordinator.tsx  | 127 +-----------------
 4 files changed, 1 insertion(+), 287 deletions(-)

diff --git a/packages/editor/src/components/tools/item/move-tool.tsx b/packages/editor/src/components/tools/item/move-tool.tsx
index 2d7f85723..d7c86be96 100644
--- a/packages/editor/src/components/tools/item/move-tool.tsx
+++ b/packages/editor/src/components/tools/item/move-tool.tsx
@@ -15,76 +15,7 @@ import { MoveBuildingContent } from '../building/move-building-tool'
 import { MoveElevatorTool } from '../elevator/move-elevator-tool'
 import { MoveRegistryNodeTool } from '../registry/move-registry-node-tool'
 import { MoveRoofTool } from '../roof/move-roof-tool'
-<<<<<<< HEAD
-import { MoveSlabTool } from '../slab/move-slab-tool'
-import { MoveSpawnTool } from '../spawn/move-spawn-tool'
-import { MoveWallTool } from '../wall/move-wall-tool'
-import { MoveWindowTool } from '../window/move-window-tool'
-import type { PlacementState } from './placement-types'
-import { useDraftNode } from './use-draft-node'
-import { usePlacementCoordinator } from './use-placement-coordinator'
-
-function getInitialState(node: {
-  asset: { attachTo?: string }
-  parentId: string | null
-}): PlacementState {
-  const attachTo = node.asset.attachTo
-  if (attachTo === 'wall' || attachTo === 'wall-side') {
-    return { surface: 'wall', wallId: node.parentId, ceilingId: null, surfaceItemId: null, roofId: null }
-  }
-  if (attachTo === 'ceiling') {
-    return { surface: 'ceiling', wallId: null, ceilingId: node.parentId, surfaceItemId: null, roofId: null }
-  }
-  return { surface: 'floor', wallId: null, ceilingId: null, surfaceItemId: null, roofId: null }
-}
-
-function MoveItemContent({ movingNode }: { movingNode: ItemNode }) {
-  const draftNode = useDraftNode()
-
-  const meta =
-    typeof movingNode.metadata === 'object' && movingNode.metadata !== null
-      ? (movingNode.metadata as Record<string, unknown>)
-      : {}
-  const isNew = !!meta.isNew
-
-  const cursor = usePlacementCoordinator({
-    asset: movingNode.asset,
-    draftNode,
-    // Duplicates start fresh in floor mode; wall/ceiling draft is created lazily by ensureDraft
-    initialState: isNew
-      ? { surface: 'floor', wallId: null, ceilingId: null, surfaceItemId: null }
-      : getInitialState(movingNode),
-    // Preserve the original item's scale so Y-position calculations use the correct height
-    defaultScale: isNew ? movingNode.scale : undefined,
-    initDraft: (gridPosition) => {
-      if (isNew) {
-        // Duplicate: use the same create() path as ItemTool so ghost rendering works correctly.
-        // Floor items get a draft immediately; wall/ceiling items are created lazily on surface entry.
-        gridPosition.copy(new Vector3(...movingNode.position))
-        if (!movingNode.asset.attachTo) {
-          draftNode.create(gridPosition, movingNode.asset, movingNode.rotation, movingNode.scale)
-        }
-      } else {
-        draftNode.adopt(movingNode)
-        gridPosition.copy(new Vector3(...movingNode.position))
-      }
-    },
-    onCommitted: () => {
-      sfxEmitter.emit('sfx:item-place')
-      useEditor.getState().setMovingNode(null)
-      return false
-    },
-    onCancel: () => {
-      draftNode.destroy()
-      useEditor.getState().setMovingNode(null)
-    },
-  })
-
-  return <>{cursor}</>
-}
-=======
 import { getRegistryAffordanceTool } from '../shared/affordance-dispatch'
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
 
 /**
  * MoveTool dispatcher. Routes to (in order):
diff --git a/packages/editor/src/components/tools/item/placement-strategies.ts b/packages/editor/src/components/tools/item/placement-strategies.ts
index fae9694e9..df67ca169 100644
--- a/packages/editor/src/components/tools/item/placement-strategies.ts
+++ b/packages/editor/src/components/tools/item/placement-strategies.ts
@@ -6,12 +6,8 @@ import type {
   GridEvent,
   ItemEvent,
   ItemNode,
-<<<<<<< HEAD
-  RoofEvent,
-=======
   ShelfEvent,
   ShelfNode,
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
   WallEvent,
   WallNode,
 } from '@pascal-app/core'
@@ -596,29 +592,6 @@ export const itemSurfaceStrategy = {
 }
 
 // ============================================================================
-<<<<<<< HEAD
-// ROOF STRATEGY
-// ============================================================================
-
-export const roofStrategy = {
-  enter(ctx: PlacementContext, event: RoofEvent): TransitionResult | null {
-    if (ctx.asset.attachTo) return null
-    if (!ctx.levelId) return null
-
-    const rotation = calculateRoofRotation(event.normal, event.object.matrixWorld)
-
-    return {
-      stateUpdate: { surface: 'roof', roofId: event.node.id },
-      nodeUpdate: {
-        position: [event.position[0], event.position[1], event.position[2]],
-        parentId: ctx.levelId,
-        rotation,
-      },
-      cursorRotationY: rotation[1],
-      cursorRotation: rotation,
-      gridPosition: [event.position[0], event.position[1], event.position[2]],
-      cursorPosition: [event.position[0], event.position[1], event.position[2]],
-=======
 // SHELF SURFACE STRATEGY
 // ============================================================================
 
@@ -703,28 +676,10 @@ export const shelfSurfaceStrategy = {
       cursorRotationY: ctx.currentCursorRotationY,
       gridPosition: [x, rowY, z],
       cursorPosition: [worldSnapped.x, worldSnapped.y, worldSnapped.z],
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
       stopPropagation: true,
     }
   },
 
-<<<<<<< HEAD
-  move(ctx: PlacementContext, event: RoofEvent): PlacementResult | null {
-    if (ctx.state.surface !== 'roof') return null
-    if (!ctx.draftItem) return null
-
-    const rotation = calculateRoofRotation(event.normal, event.object.matrixWorld)
-
-    return {
-      gridPosition: [event.position[0], event.position[1], event.position[2]],
-      cursorPosition: [event.position[0], event.position[1], event.position[2]],
-      cursorRotationY: rotation[1],
-      cursorRotation: rotation,
-      nodeUpdate: {
-        position: [event.position[0], event.position[1], event.position[2]],
-        rotation,
-      },
-=======
   /**
    * Handle shelf:move — re-derive the closest row each tick so the user
    * can slide between rows without leaving the shelf.
@@ -753,17 +708,11 @@ export const shelfSurfaceStrategy = {
       cursorPosition: [worldSnapped.x, worldSnapped.y, worldSnapped.z],
       cursorRotationY: ctx.currentCursorRotationY,
       nodeUpdate: { position: [x, rowY, z] },
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
       stopPropagation: true,
       dirtyNodeId: null,
     }
   },
 
-<<<<<<< HEAD
-  click(ctx: PlacementContext, _event: RoofEvent): CommitResult | null {
-    if (ctx.state.surface !== 'roof') return null
-    if (!ctx.draftItem) return null
-=======
   /**
    * Handle shelf:click — commit placement on the active row.
    */
@@ -771,43 +720,17 @@ export const shelfSurfaceStrategy = {
     if (ctx.state.surface !== 'shelf-surface') return null
     if (!(ctx.draftItem && ctx.state.shelfId)) return null
     if (event.node.id !== ctx.state.shelfId) return null
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
 
     return {
       nodeUpdate: {
         position: [ctx.gridPosition.x, ctx.gridPosition.y, ctx.gridPosition.z],
-<<<<<<< HEAD
-        parentId: ctx.levelId,
-        rotation: ctx.draftItem.rotation,
-=======
         parentId: ctx.state.shelfId,
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
         metadata: stripTransient(ctx.draftItem.metadata),
       },
       stopPropagation: true,
       dirtyNodeId: null,
     }
   },
-<<<<<<< HEAD
-
-  leave(ctx: PlacementContext): TransitionResult | null {
-    if (ctx.state.surface !== 'roof') return null
-
-    return {
-      stateUpdate: { surface: 'floor', roofId: null },
-      nodeUpdate: {
-        position: [ctx.gridPosition.x, 0, ctx.gridPosition.z],
-        parentId: ctx.levelId,
-        rotation: [0, ctx.currentCursorRotationY, 0],
-      },
-      cursorRotationY: ctx.currentCursorRotationY,
-      cursorRotation: [0, ctx.currentCursorRotationY, 0],
-      gridPosition: [ctx.gridPosition.x, 0, ctx.gridPosition.z],
-      cursorPosition: [ctx.gridPosition.x, 0, ctx.gridPosition.z],
-      stopPropagation: true,
-    }
-  },
-=======
 }
 
 /** Same upward-normal heuristic as `isUpwardItemSurfaceHit`, but typed
@@ -816,7 +739,6 @@ export const shelfSurfaceStrategy = {
  *  `event.normal` + `event.object`. */
 function isUpwardShelfSurfaceHit(event: ShelfEvent): boolean {
   return isUpwardItemSurfaceHit(event as unknown as ItemEvent)
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
 }
 
 // ============================================================================
@@ -835,15 +757,9 @@ export function checkCanPlace(ctx: PlacementContext, validators: SpatialValidato
     return ctx.state.surfaceItemId !== null
   }
 
-<<<<<<< HEAD
-  // Roof: valid if we entered (no spatial validator yet)
-  if (ctx.state.surface === 'roof') {
-    return ctx.state.roofId !== null
-=======
   // Shelf surface: same — size check already happened on enter
   if (ctx.state.surface === 'shelf-surface') {
     return ctx.state.shelfId !== null
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
   }
 
   const attachTo = ctx.draftItem.asset.attachTo
diff --git a/packages/editor/src/components/tools/item/placement-types.ts b/packages/editor/src/components/tools/item/placement-types.ts
index 0a593ca75..a3eccc116 100644
--- a/packages/editor/src/components/tools/item/placement-types.ts
+++ b/packages/editor/src/components/tools/item/placement-types.ts
@@ -12,11 +12,7 @@ import type { Vector3 } from 'three'
 // PLACEMENT STATE
 // ============================================================================
 
-<<<<<<< HEAD
-export type SurfaceType = 'floor' | 'wall' | 'ceiling' | 'item-surface' | 'roof'
-=======
 export type SurfaceType = 'floor' | 'wall' | 'ceiling' | 'item-surface' | 'shelf-surface'
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
 
 /**
  * Tracks which surface the draft item is currently on.
@@ -27,9 +23,6 @@ export interface PlacementState {
   wallId: string | null
   ceilingId: string | null
   surfaceItemId: string | null
-<<<<<<< HEAD
-  roofId: string | null
-=======
   /**
    * Active shelf when `surface === 'shelf-surface'`. Items host on the
    * shelf board closest to the cursor's local Y; the row index isn't
@@ -37,7 +30,6 @@ export interface PlacementState {
    * position via `shelfRowSurfaceYs`.
    */
   shelfId: string | null
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
 }
 
 // ============================================================================
diff --git a/packages/editor/src/components/tools/item/use-placement-coordinator.tsx b/packages/editor/src/components/tools/item/use-placement-coordinator.tsx
index 362ddd1dd..b86e426c4 100644
--- a/packages/editor/src/components/tools/item/use-placement-coordinator.tsx
+++ b/packages/editor/src/components/tools/item/use-placement-coordinator.tsx
@@ -7,11 +7,7 @@ import {
   getScaledDimensions,
   type ItemEvent,
   resolveLevelId,
-<<<<<<< HEAD
-  type RoofEvent,
-=======
   type ShelfEvent,
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
   sceneRegistry,
   spatialGridManager,
   useLiveTransforms,
@@ -46,11 +42,7 @@ import {
   checkCanPlace,
   floorStrategy,
   itemSurfaceStrategy,
-<<<<<<< HEAD
-  roofStrategy,
-=======
   shelfSurfaceStrategy,
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
   wallStrategy,
 } from './placement-strategies'
 import type { PlacementState, TransitionResult } from './placement-types'
@@ -296,9 +288,6 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
   const gridPosition = useRef(new Vector3(0, 0, 0))
   const lastRawPos = useRef(new Vector3(0, 0, 0))
   const placementState = useRef<PlacementState>(
-<<<<<<< HEAD
-    config.initialState ?? { surface: 'floor', wallId: null, ceilingId: null, surfaceItemId: null, roofId: null },
-=======
     config.initialState ?? {
       surface: 'floor',
       wallId: null,
@@ -306,7 +295,6 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       surfaceItemId: null,
       shelfId: null,
     },
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
   )
   const shiftFreeRef = useRef(false)
   const previewBoundsSignatureRef = useRef<string | null>(null)
@@ -1206,58 +1194,6 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       }
     }
 
-<<<<<<< HEAD
-    // ---- Roof Segment Handlers ----
-
-    const toRoofLocal = (result: TransitionResult): TransitionResult => {
-      const local = worldToBuildingLocal(...result.cursorPosition)
-      const localPos: [number, number, number] = [local.x, local.y, local.z]
-      return {
-        ...result,
-        gridPosition: localPos,
-        nodeUpdate: { ...result.nodeUpdate, position: localPos },
-      }
-    }
-
-    const onRoofEnter = (event: RoofEvent) => {
-      const result = roofStrategy.enter(getContext(), event)
-      if (!result) return
-
-      event.stopPropagation()
-      const local = toRoofLocal(result)
-      applyTransition(local)
-
-      if (!draftNode.current) {
-        ensureDraft(local)
-      }
-    }
-
-    const onRoofMove = (event: RoofEvent) => {
-      const ctx = getContext()
-
-      if (ctx.state.surface !== 'roof') {
-        const enterResult = roofStrategy.enter(ctx, event)
-        if (!enterResult) return
-
-        event.stopPropagation()
-        const local = toRoofLocal(enterResult)
-        applyTransition(local)
-        if (!draftNode.current) {
-          ensureDraft(local)
-        }
-        return
-      }
-
-      if (!draftNode.current) {
-        const enterResult = roofStrategy.enter(getContext(), event)
-        if (!enterResult) return
-        event.stopPropagation()
-        ensureDraft(toRoofLocal(enterResult))
-        return
-      }
-
-      const result = roofStrategy.move(ctx, event)
-=======
     // ---- Shelf Handlers ----
     //
     // Items can host on shelves the same way they host on tables and
@@ -1299,34 +1235,10 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         return
       }
       const result = shelfSurfaceStrategy.move(ctx, event)
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
       if (!result) return
 
       event.stopPropagation()
 
-<<<<<<< HEAD
-      const localPos = worldToBuildingLocal(...result.cursorPosition)
-      gridPosition.current.set(localPos.x, localPos.y, localPos.z)
-      cursorGroupRef.current.position.set(localPos.x, localPos.y, localPos.z)
-      if (result.cursorRotation) {
-        cursorGroupRef.current.rotation.set(...result.cursorRotation)
-      } else {
-        cursorGroupRef.current.rotation.y = result.cursorRotationY
-      }
-
-      const draft = draftNode.current
-      if (draft && result.nodeUpdate) {
-        if ('rotation' in result.nodeUpdate)
-          draft.rotation = result.nodeUpdate.rotation as [number, number, number]
-        draft.position = [localPos.x, localPos.y, localPos.z]
-        const mesh = sceneRegistry.nodes.get(draft.id)
-        if (mesh) {
-          mesh.position.set(localPos.x, localPos.y, localPos.z)
-          if (result.cursorRotation) {
-            mesh.rotation.set(...result.cursorRotation)
-          }
-        }
-=======
       gridPosition.current.set(...result.gridPosition)
       const ic = worldToBuildingLocal(...result.cursorPosition)
       cursorGroupRef.current.position.set(ic.x, ic.y, ic.z)
@@ -1341,16 +1253,11 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
           position: result.cursorPosition,
           rotation: result.cursorRotationY,
         })
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
       }
 
       revalidate()
     }
 
-<<<<<<< HEAD
-    const onRoofClick = (event: RoofEvent) => {
-      const result = roofStrategy.click(getContext(), event)
-=======
     const onShelfLeave = (event: ShelfEvent) => {
       if (placementState.current.surface !== 'shelf-surface') return
       if (event.node.id !== placementState.current.shelfId) return
@@ -1363,7 +1270,6 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
     const onShelfClick = (event: ShelfEvent) => {
       const result = shelfSurfaceStrategy.click(getContext(), event)
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
       if (!result) return
 
       event.stopPropagation()
@@ -1373,20 +1279,6 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       draftNode.commit(result.nodeUpdate)
 
       if (configRef.current.onCommitted()) {
-<<<<<<< HEAD
-        revalidate()
-      }
-    }
-
-    const onRoofLeave = (event: RoofEvent) => {
-      const result = roofStrategy.leave(getContext())
-      if (!result) return
-
-      event.stopPropagation()
-      applyTransition(result)
-    }
-
-=======
         const enterResult = shelfSurfaceStrategy.enter(getContext(), event)
         if (enterResult) {
           applyTransition(enterResult)
@@ -1396,7 +1288,6 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       }
     }
 
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
     // ---- Keyboard rotation ----
 
     const ROTATION_STEP = Math.PI / 2
@@ -1571,17 +1462,10 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     emitter.on('ceiling:move', onCeilingMove)
     emitter.on('ceiling:click', onCeilingClick)
     emitter.on('ceiling:leave', onCeilingLeave)
-<<<<<<< HEAD
-    emitter.on('roof:enter', onRoofEnter)
-    emitter.on('roof:move', onRoofMove)
-    emitter.on('roof:click', onRoofClick)
-    emitter.on('roof:leave', onRoofLeave)
-=======
     emitter.on('shelf:enter', onShelfEnter)
     emitter.on('shelf:move', onShelfMove)
     emitter.on('shelf:click', onShelfClick)
     emitter.on('shelf:leave', onShelfLeave)
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
 
     return () => {
       tearingDown = true
@@ -1606,17 +1490,10 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       emitter.off('ceiling:move', onCeilingMove)
       emitter.off('ceiling:click', onCeilingClick)
       emitter.off('ceiling:leave', onCeilingLeave)
-<<<<<<< HEAD
-      emitter.off('roof:enter', onRoofEnter)
-      emitter.off('roof:move', onRoofMove)
-      emitter.off('roof:click', onRoofClick)
-      emitter.off('roof:leave', onRoofLeave)
-=======
       emitter.off('shelf:enter', onShelfEnter)
       emitter.off('shelf:move', onShelfMove)
       emitter.off('shelf:click', onShelfClick)
       emitter.off('shelf:leave', onShelfLeave)
->>>>>>> 0bcec8e6ba2a86a9fa9efeee83307491b90dbdf5
       emitter.off('tool:cancel', onCancel)
       window.removeEventListener('keydown', onKeyDown)
       window.removeEventListener('keyup', onKeyUp)
@@ -1667,9 +1544,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     }
     mesh.visible = true
 
-    if (placementState.current.surface === 'roof') {
-      mesh.position.copy(gridPosition.current)
-    } else if (placementState.current.surface === 'floor') {
+    if (placementState.current.surface === 'floor') {
       const distance = mesh.position.distanceToSquared(gridPosition.current)
       if (distance > 1) {
         mesh.position.copy(gridPosition.current)

From 48b7f3ecf7ed135b2d580c32d1068493c33c619c Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Fri, 22 May 2026 16:44:36 +0530
Subject: [PATCH 03/48] wall: 2D floor-plan move, side arrows, drag-to-move
 endpoints

Bundles the in-progress wall editing work on this branch:

- Wall corner endpoint drag in 3D (`floating-action-menu.tsx`,
  `wall/move-endpoint-tool.tsx`): press-and-drag on the floating
  endpoint button or the new 3D corner sphere, release to commit.
  Replaces the prior click-to-arm / click-to-place flow.
- New 2D move side arrows on selected walls via a new
  `move-arrow` floor-plan geometry kind (core type + registry-layer
  renderer + wall floor-plan builder emission), mirroring the 3D
  `WallMoveSideHandles`.
- 2D wall body move: new `wallFloorplanMoveTarget` translates the
  moving wall and cascades shared endpoints onto linked walls so
  L-corners stay connected through the drag.
- `MoveWallTool` cleanup gains an external-commit guard so a 2D
  commit doesn't get clobbered by the 3D mover's cleanup restore.
- HMR-safe `bootstrap.ts` no longer re-registers builtin kinds
  whose registry entry survived the closure reset.
- Misc 2D polish: floor-plan auto-fit measures the painted scene
  via `getBBox`, wall dimension offset bumped, swallow-click guard
  in `handleSelect` so registry-driven selection holds through the
  post-pointerdown re-render.

Floor-plan move-target / move-arrow code still carries diagnostic
console logs for the cascade flow; keeping for debug on this branch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/editor/app/client-bootstrap.tsx          |   9 +-
 apps/editor/app/layout.tsx                    |  10 --
 apps/editor/lib/bootstrap.ts                  |   3 +
 apps/ifc-converter/next-env.d.ts              |   2 +-
 packages/core/src/registry/types.ts           |  13 ++
 .../editor-2d/floorplan-render-context.tsx    |  12 +-
 .../renderers/floorplan-registry-layer.tsx    |  78 ++++++++-
 .../editor/floating-action-menu.tsx           | 135 ++++++++++++++--
 .../src/components/editor/floorplan-panel.tsx | 151 ++++++++++++++++--
 .../editor/wall-move-side-handles.tsx         |  56 ++++---
 packages/nodes/src/wall/definition.ts         |   2 +
 packages/nodes/src/wall/floorplan-move.ts     | 138 ++++++++++++++++
 packages/nodes/src/wall/floorplan.ts          |  30 +++-
 .../nodes/src/wall/move-endpoint-tool.tsx     |  29 ++--
 packages/nodes/src/wall/move-tool.tsx         |  21 ++-
 15 files changed, 611 insertions(+), 78 deletions(-)
 create mode 100644 packages/nodes/src/wall/floorplan-move.ts

diff --git a/apps/editor/app/client-bootstrap.tsx b/apps/editor/app/client-bootstrap.tsx
index cc0bdda3b..610eac4e6 100644
--- a/apps/editor/app/client-bootstrap.tsx
+++ b/apps/editor/app/client-bootstrap.tsx
@@ -9,8 +9,15 @@
 // `loaded` guard inside `../lib/bootstrap` keeps the side effect
 // idempotent under HMR.
 import '../lib/bootstrap'
-import type { ReactNode } from 'react'
+import { type ReactNode, useEffect } from 'react'
 
 export function ClientBootstrap({ children }: { children: ReactNode }) {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'development') return
+    // Loaded here (not via a `<Script>` tag in <head>) to avoid React's
+    // "script inside a React component" hydration warning. The package
+    // is already a direct dep, so we don't need the CDN auto-global.
+    import('react-scan').then(({ scan }) => scan({ enabled: true }))
+  }, [])
   return children
 }
diff --git a/apps/editor/app/layout.tsx b/apps/editor/app/layout.tsx
index 175ba1564..2b06be729 100644
--- a/apps/editor/app/layout.tsx
+++ b/apps/editor/app/layout.tsx
@@ -2,7 +2,6 @@ import { Agentation } from 'agentation'
 import { GeistPixelSquare } from 'geist/font/pixel'
 import { Barlow } from 'next/font/google'
 import localFont from 'next/font/local'
-import Script from 'next/script'
 import { ClientBootstrap } from './client-bootstrap'
 import './globals.css'
 
@@ -32,15 +31,6 @@ export default function RootLayout({
       className={`${geistSans.variable} ${geistMono.variable} ${GeistPixelSquare.variable} ${barlow.variable}`}
       lang="en"
     >
-      <head>
-        {process.env.NODE_ENV === 'development' && (
-          <Script
-            crossOrigin="anonymous"
-            src="//unpkg.com/react-scan/dist/auto.global.js"
-            strategy="beforeInteractive"
-          />
-        )}
-      </head>
       <body className="font-sans">
         <ClientBootstrap>{children}</ClientBootstrap>
         {process.env.NODE_ENV === 'development' && <Agentation />}
diff --git a/apps/editor/lib/bootstrap.ts b/apps/editor/lib/bootstrap.ts
index 5e9b71417..1aacf2cbe 100644
--- a/apps/editor/lib/bootstrap.ts
+++ b/apps/editor/lib/bootstrap.ts
@@ -35,6 +35,9 @@ function loadBuiltinsSync(): void {
   if (builtinsLoaded) return
   builtinsLoaded = true
   for (const def of builtinPlugin.nodes ?? []) {
+    // HMR can re-enter with a fresh module closure while the registry
+    // (in @pascal-app/core) persists — skip kinds already registered.
+    if (nodeRegistry.has(def.kind)) continue
     registerNode(def as AnyNodeDefinition)
   }
 
diff --git a/apps/ifc-converter/next-env.d.ts b/apps/ifc-converter/next-env.d.ts
index 9edff1c7c..c4b7818fb 100644
--- a/apps/ifc-converter/next-env.d.ts
+++ b/apps/ifc-converter/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index 515365e3a..081647c74 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -340,6 +340,19 @@ export type FloorplanGeometry =
       kind: 'move-handle'
       point: FloorplanPoint
     }
+  /**
+   * Directional move handle drawn as an arrow pointing AWAY from the
+   * owning node, rotated by `angle` (radians; 0 = +x). Used by wall to
+   * place two arrows on perpendicular sides at the wall midpoint —
+   * mirrors the 3D `WallMoveSideHandles`. Routes through the same
+   * `onMoveHandlePointerDown` → `setMovingNode` path as `move-handle`.
+   */
+  | {
+      kind: 'move-arrow'
+      point: FloorplanPoint
+      /** Rotation in radians; 0 points along +x in plan coords. */
+      angle: number
+    }
   /**
    * Centered length / distance label. Renders as a small rounded
    * background plate with text, oriented along `angle` (radians). The
diff --git a/packages/editor/src/components/editor-2d/floorplan-render-context.tsx b/packages/editor/src/components/editor-2d/floorplan-render-context.tsx
index 19a1bd85d..1b9c8e56f 100644
--- a/packages/editor/src/components/editor-2d/floorplan-render-context.tsx
+++ b/packages/editor/src/components/editor-2d/floorplan-render-context.tsx
@@ -25,6 +25,13 @@ export type FloorplanRenderContextValue = {
   palette: FloorplanPalette
   /** SVG `<pattern>` id mounted in `<defs>` by the legacy panel for selection hatch fills. */
   hatchPatternId: string
+  /**
+   * Rotation (degrees) applied to the registry layer's parent `<g>` by the
+   * legacy panel — 90° by default, adjusted by building rotation. Renderers
+   * that emit text labels use this to keep their final on-screen orientation
+   * readable instead of mirroring whatever the parent rotation is.
+   */
+  sceneRotationDeg: number
 }
 
 const FloorplanRenderContext = createContext<FloorplanRenderContextValue | null>(null)
@@ -34,10 +41,11 @@ export function FloorplanRenderProvider({
   unitsPerPixel,
   palette,
   hatchPatternId,
+  sceneRotationDeg,
 }: FloorplanRenderContextValue & { children: ReactNode }) {
   const value = useMemo<FloorplanRenderContextValue>(
-    () => ({ unitsPerPixel, palette, hatchPatternId }),
-    [unitsPerPixel, palette, hatchPatternId],
+    () => ({ unitsPerPixel, palette, hatchPatternId, sceneRotationDeg }),
+    [unitsPerPixel, palette, hatchPatternId, sceneRotationDeg],
   )
   return <FloorplanRenderContext.Provider value={value}>{children}</FloorplanRenderContext.Provider>
 }
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
index 661ae1ac2..6dbf631ab 100644
--- a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
@@ -140,6 +140,21 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       if (event.button !== 0) return
       event.stopPropagation()
       setSelection({ selectedIds: [id] })
+      // Setting selection re-renders the entry — the overlay pass mounts
+      // (endpoint handles, etc.), reshuffling DOM under the cursor between
+      // pointerdown and click. If the click target ends up on the SVG
+      // background, `<g floorplan-registry-layer onClick=handleClickStop>`
+      // never sees it, and the SVG's `handleBackgroundClick` clears the
+      // selection we just set. Swallow the next click globally to break
+      // that race; the listener removes itself after firing (or after a
+      // safety timeout if no click follows).
+      const swallowClick = (ev: Event) => {
+        ev.stopPropagation()
+        ev.preventDefault()
+        window.removeEventListener('click', swallowClick, true)
+      }
+      window.addEventListener('click', swallowClick, true)
+      setTimeout(() => window.removeEventListener('click', swallowClick, true), 200)
     },
     [setSelection],
   )
@@ -490,6 +505,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
           setMovingNode(node as never)
         }}
         palette={palette}
+        sceneRotationDeg={renderCtx?.sceneRotationDeg ?? 0}
         unitsPerPixel={unitsPerPixel}
       />
     </g>
@@ -544,6 +560,7 @@ function InteractiveGeometry({
   hoveredHandleId,
   activeDragId,
   nodeId,
+  sceneRotationDeg,
   onHandleHoverChange,
   onHandlePointerDown,
   onMoveHandlePointerDown,
@@ -555,6 +572,7 @@ function InteractiveGeometry({
   hoveredHandleId: string | null
   activeDragId: string | null
   nodeId: AnyNodeId
+  sceneRotationDeg: number
   onHandleHoverChange: (id: string | null) => void
   onHandlePointerDown: (
     affordance: string,
@@ -784,6 +802,49 @@ function InteractiveGeometry({
           </g>
         )
       }
+      case 'move-arrow': {
+        if (!palette) return <></>
+        const moveHandleId = `${nodeId}:move`
+        const isHovered = hoveredHandleId === moveHandleId
+        // Arrow geometry in plan units (meters) — scales with the scene
+        // so it shrinks on zoom-out and grows on zoom-in, matching the
+        // wall it accompanies. Composed of a rectangular shaft + triangular
+        // head, drawn as a single path for a clean fill + stroke outline.
+        const sl = 0.1 // shaft length (shortened body)
+        const hl = 0.12 // head length
+        const sh = 0.04 // shaft half-height
+        const hh = 0.1 // head half-height
+        // Inset the shaft start so the arrow sits a little off the wall
+        // body (matches the 3D `HANDLE_OFFSET`).
+        const bi = 0.03 // base inset
+        const arrowD = `M ${bi},${-sh} L ${bi + sl},${-sh} L ${bi + sl},${-hh} L ${bi + sl + hl},0 L ${bi + sl},${hh} L ${bi + sl},${sh} L ${bi},${sh} Z`
+        // Indigo palette to match the 3D `WallMoveSideHandles` arrows
+        // (`ARROW_COLOR` / `ARROW_HOVER_COLOR`) and the corner-sphere
+        // accent in `floating-action-menu.tsx`.
+        const fill = isHovered ? '#a5b4fc' : '#8381ed'
+        const angleDeg = (g.angle * 180) / Math.PI
+        const scale = isHovered ? 1.12 : 1
+        return (
+          <g
+            key={keyHint}
+            onClick={(e) => e.stopPropagation()}
+            onPointerEnter={() => onHandleHoverChange(moveHandleId)}
+            onPointerLeave={() => onHandleHoverChange(null)}
+            transform={`translate(${g.point[0]} ${g.point[1]}) rotate(${angleDeg}) scale(${scale})`}
+          >
+            <path d={arrowD} fill={fill} pointerEvents="none" />
+            <path
+              d={arrowD}
+              fill="transparent"
+              onPointerDown={(e) =>
+                onMoveHandlePointerDown(e as ReactPointerEvent<SVGGElement>)
+              }
+              pointerEvents="all"
+              style={{ cursor: 'move' }}
+            />
+          </g>
+        )
+      }
       case 'edge-handle': {
         if (!palette) return <></>
         const handleId = makeHandleId(nodeId, g.payload)
@@ -937,11 +998,19 @@ function InteractiveGeometry({
       }
       case 'dimension-label': {
         if (!palette) return <></>
-        // Flip the label upright if it would otherwise be upside-down
-        // (legacy floorplan-panel.tsx does the same — see line ~2548).
+        // Flip the label upright relative to the SCREEN, not the local
+        // coord system. The registry layer's parent `<g>` is rotated by
+        // `sceneRotationDeg` (default 90° in the floor plan), so a label
+        // we draw "upright" in local coords ends up sideways on screen.
+        // Combine local angle + scene rotation, normalise to (-180, 180],
+        // and flip by 180° if it falls outside (-90, 90] — that keeps
+        // text reading left-to-right, top-to-bottom regardless of the
+        // building's orientation.
         let degrees = (g.angle * 180) / Math.PI
-        if (degrees > 90) degrees -= 180
-        else if (degrees <= -90) degrees += 180
+        let screenDegrees = degrees + sceneRotationDeg
+        screenDegrees = ((((screenDegrees + 180) % 360) + 360) % 360) - 180
+        if (screenDegrees > 90) degrees -= 180
+        else if (screenDegrees <= -90) degrees += 180
 
         const padX = unitsPerPixel * 6
         const padY = unitsPerPixel * 3
@@ -1220,6 +1289,7 @@ const OVERLAY_KINDS = new Set<FloorplanGeometry['kind']>([
   'midpoint-handle',
   'edge-handle',
   'move-handle',
+  'move-arrow',
   'dimension',
   'dimension-label',
 ])
diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index 7e21d81af..d41dc7d5f 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -26,8 +26,10 @@ import { useViewer } from '@pascal-app/viewer'
 import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
 import { Move } from 'lucide-react'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import * as THREE from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../lib/constants'
 import { duplicateRoofSubtree } from '../../lib/roof-duplication'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import { duplicateStairSubtree } from '../../lib/stair-duplication'
@@ -72,8 +74,41 @@ export function FloatingActionMenu() {
   const groupRef = useRef<THREE.Group>(null)
   const startEndpointGroupRef = useRef<THREE.Group>(null)
   const endEndpointGroupRef = useRef<THREE.Group>(null)
+  const startCornerSphereRef = useRef<THREE.Group>(null)
+  const endCornerSphereRef = useRef<THREE.Group>(null)
+  const startVerticalRef = useRef<THREE.Mesh>(null)
+  const endVerticalRef = useRef<THREE.Mesh>(null)
   const [altPressed, setAltPressed] = useState(false)
 
+  const cornerSphereMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: '#818cf8',
+        transparent: true,
+        opacity: 0.95,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+  const cornerVerticalMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: '#818cf8',
+        transparent: true,
+        opacity: 0.7,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+  useEffect(() => {
+    return () => {
+      cornerSphereMaterial.dispose()
+      cornerVerticalMaterial.dispose()
+    }
+  }, [cornerSphereMaterial, cornerVerticalMaterial])
+
   // Only show for single selection of specific types
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
 
@@ -179,6 +214,28 @@ export function FloatingActionMenu() {
             endWorld.z,
           )
         }
+
+        if (node.type === 'wall' && !box.isEmpty()) {
+          // Wall mesh origin sits at the top; the floor is the bbox minimum.
+          const wallFloorY = box.min.y
+          // Vertical guide spans the wall height (floor → wall top).
+          const verticalHeight = box.max.y - wallFloorY
+
+          if (startCornerSphereRef.current) {
+            startCornerSphereRef.current.position.set(startWorld.x, wallFloorY, startWorld.z)
+          }
+          if (endCornerSphereRef.current) {
+            endCornerSphereRef.current.position.set(endWorld.x, wallFloorY, endWorld.z)
+          }
+          if (startVerticalRef.current && verticalHeight > 0) {
+            startVerticalRef.current.scale.y = verticalHeight
+            startVerticalRef.current.position.y = verticalHeight / 2
+          }
+          if (endVerticalRef.current && verticalHeight > 0) {
+            endVerticalRef.current.scale.y = verticalHeight
+            endVerticalRef.current.position.y = verticalHeight / 2
+          }
+        }
       }
     }
   })
@@ -232,18 +289,20 @@ export function FloatingActionMenu() {
     [canCurveSelectedWall, node, setCurvingFence, setCurvingWall, setSelection],
   )
   const handleEndpointMove = useCallback(
-    (endpoint: 'start' | 'end', e: React.MouseEvent) => {
+    (endpoint: 'start' | 'end', e: { stopPropagation: () => void }) => {
       e.stopPropagation()
       if (!node) return
       sfxEmitter.emit('sfx:item-pick')
       if (node.type === 'wall') {
+        // Keep the wall selected throughout the drag — the floating menu
+        // already hides via the `movingWallEndpoint` guard.
         setMovingWallEndpoint({ wall: node, endpoint })
-      } else if (node.type === 'fence') {
-        setMovingFenceEndpoint({ fence: node, endpoint })
-      } else {
         return
       }
-      setSelection({ selectedIds: [] })
+      if (node.type === 'fence') {
+        setMovingFenceEndpoint({ fence: node, endpoint })
+        setSelection({ selectedIds: [] })
+      }
     },
     [node, setMovingFenceEndpoint, setMovingWallEndpoint, setSelection],
   )
@@ -494,6 +553,52 @@ export function FloatingActionMenu() {
           />
         </Html>
       </group>
+      {node?.type === 'wall' && (
+        <>
+          <group ref={startCornerSphereRef}>
+            <mesh
+              layers={EDITOR_LAYER}
+              material={cornerSphereMaterial}
+              onPointerDown={(e) => {
+                e.stopPropagation()
+                handleEndpointMove('start', e)
+              }}
+              renderOrder={2}
+            >
+              <sphereGeometry args={[0.14, 20, 16]} />
+            </mesh>
+            <mesh
+              layers={EDITOR_LAYER}
+              material={cornerVerticalMaterial}
+              ref={startVerticalRef}
+              renderOrder={2}
+            >
+              <cylinderGeometry args={[0.008, 0.008, 1, 8]} />
+            </mesh>
+          </group>
+          <group ref={endCornerSphereRef}>
+            <mesh
+              layers={EDITOR_LAYER}
+              material={cornerSphereMaterial}
+              onPointerDown={(e) => {
+                e.stopPropagation()
+                handleEndpointMove('end', e)
+              }}
+              renderOrder={2}
+            >
+              <sphereGeometry args={[0.14, 20, 16]} />
+            </mesh>
+            <mesh
+              layers={EDITOR_LAYER}
+              material={cornerVerticalMaterial}
+              ref={endVerticalRef}
+              renderOrder={2}
+            >
+              <cylinderGeometry args={[0.008, 0.008, 1, 8]} />
+            </mesh>
+          </group>
+        </>
+      )}
       {(node?.type === 'wall' || node?.type === 'fence') && (
         <>
           <group ref={startEndpointGroupRef}>
@@ -509,8 +614,13 @@ export function FloatingActionMenu() {
                     ? 'border-amber-500/80 bg-amber-500/15 text-amber-100 hover:bg-amber-500/20 hover:text-white'
                     : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
                 }`}
-                onClick={(e) => handleEndpointMove('start', e)}
-                onPointerDown={(e) => e.stopPropagation()}
+                onClick={
+                  node.type === 'fence' ? (e) => handleEndpointMove('start', e) : undefined
+                }
+                onPointerDown={(e) => {
+                  e.stopPropagation()
+                  if (node.type === 'wall') handleEndpointMove('start', e)
+                }}
                 title={
                   node.type === 'wall'
                     ? 'Move wall start (Alt to detach)'
@@ -535,8 +645,13 @@ export function FloatingActionMenu() {
                     ? 'border-amber-500/80 bg-amber-500/15 text-amber-100 hover:bg-amber-500/20 hover:text-white'
                     : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
                 }`}
-                onClick={(e) => handleEndpointMove('end', e)}
-                onPointerDown={(e) => e.stopPropagation()}
+                onClick={
+                  node.type === 'fence' ? (e) => handleEndpointMove('end', e) : undefined
+                }
+                onPointerDown={(e) => {
+                  e.stopPropagation()
+                  if (node.type === 'wall') handleEndpointMove('end', e)
+                }}
                 title={
                   node.type === 'wall'
                     ? 'Move wall end (Alt to detach)'
diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index fc1cd50c7..448560272 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -53,6 +53,7 @@ import {
   type PointerEvent as ReactPointerEvent,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -3875,6 +3876,7 @@ export function FloorplanPanel() {
   const viewportHostRef = useRef<HTMLDivElement>(null)
   const svgRef = useRef<SVGSVGElement>(null)
   const floorplanSceneRef = useRef<SVGGElement>(null)
+  const floorplanContentRef = useRef<SVGGElement>(null)
   const panStateRef = useRef<PanState | null>(null)
   const guideInteractionRef = useRef<GuideInteractionState | null>(null)
   const guideTransformDraftRef = useRef<GuideTransformDraft | null>(null)
@@ -3904,6 +3906,11 @@ export function FloorplanPanel() {
   const selectedItem = useEditor((state) => state.selectedItem)
 
   const setFloorplanHovered = useEditor((state) => state.setFloorplanHovered)
+  // Panel is permanently mounted and toggled via `display: none` in
+  // editor/index.tsx — subscribing here lets us re-fit the viewport when
+  // 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 selectedReferenceId = useEditor((state) => state.selectedReferenceId)
   const setSelectedReferenceId = useEditor((state) => state.setSelectedReferenceId)
   const setMode = useEditor((state) => state.setMode)
@@ -4080,6 +4087,17 @@ export function FloorplanPanel() {
   const [isPanelReady, setIsPanelReady] = useState(false)
   const [surfaceSize, setSurfaceSize] = useState({ width: 1, height: 1 })
   const [viewport, setViewport] = useState<FloorplanViewport | null>(null)
+  // Tight bbox of the painted floor-plan scene (the rotation `<g>`'s
+  // children), read via SVG `getBBox()` after each render. The legacy
+  // polygon arrays (`wallPolygons`, `displaySlabPolygons`, etc.) are now
+  // empty stubs because rendering moved to the registry layer, so
+  // measuring the DOM is how `fittedViewport` learns where content lives.
+  const [measuredSceneBBox, setMeasuredSceneBBox] = useState<{
+    x: number
+    y: number
+    width: number
+    height: number
+  } | null>(null)
 
   useEffect(() => {
     if (structureLayer === 'zones' && floorplanSelectionTool === 'marquee') {
@@ -4920,7 +4938,11 @@ export function FloorplanPanel() {
   const svgAspectRatio = surfaceSize.width / surfaceSize.height || 1
 
   const fittedViewport = useMemo(() => {
-    const allPoints = [
+    // Collect bounds from the legacy polygon arrays first. Most are empty
+    // stubs (rendering moved to the registry layer), but we still honor
+    // anything that does emit points so the fit is correct during the
+    // brief window before `measuredSceneBBox` is populated.
+    const legacyPoints = [
       ...(visibleSitePolygon ? visibleSitePolygon.polygon : []),
       ...displayCeilingPolygons.flatMap((entry) => entry.polygon),
       ...displaySlabPolygons.flatMap((entry) => entry.polygon),
@@ -4935,27 +4957,46 @@ export function FloorplanPanel() {
       ...wallPolygons.flatMap((entry) => entry.polygon),
     ]
 
-    if (allPoints.length === 0) {
-      return {
-        centerX: 0,
-        centerY: 0,
-        width: Math.max(FALLBACK_VIEW_SIZE, FALLBACK_VIEW_SIZE * svgAspectRatio),
-      }
-    }
-
     let minX = Number.POSITIVE_INFINITY
     let maxX = Number.NEGATIVE_INFINITY
     let minY = Number.POSITIVE_INFINITY
     let maxY = Number.NEGATIVE_INFINITY
 
-    for (const point of allPoints) {
-      const svgPoint = toSvgPoint(point)
+    for (const point of legacyPoints) {
+      const svgPoint = rotateSvgPoint(toSvgPoint(point), floorplanSceneRotationDeg)
       minX = Math.min(minX, svgPoint.x)
       maxX = Math.max(maxX, svgPoint.x)
       minY = Math.min(minY, svgPoint.y)
       maxY = Math.max(maxY, svgPoint.y)
     }
 
+    // Fold in the DOM-measured bbox of the registry-driven scene. `getBBox`
+    // returns coords in the rotation group's pre-transform space, so we
+    // rotate the four corners to land in viewBox coords before bbox'ing.
+    if (measuredSceneBBox && measuredSceneBBox.width >= 0 && measuredSceneBBox.height >= 0) {
+      const { x, y, width: w, height: h } = measuredSceneBBox
+      const corners = [
+        rotateSvgPoint({ x, y }, floorplanSceneRotationDeg),
+        rotateSvgPoint({ x: x + w, y }, floorplanSceneRotationDeg),
+        rotateSvgPoint({ x, y: y + h }, floorplanSceneRotationDeg),
+        rotateSvgPoint({ x: x + w, y: y + h }, floorplanSceneRotationDeg),
+      ]
+      for (const corner of corners) {
+        minX = Math.min(minX, corner.x)
+        maxX = Math.max(maxX, corner.x)
+        minY = Math.min(minY, corner.y)
+        maxY = Math.max(maxY, corner.y)
+      }
+    }
+
+    if (!Number.isFinite(minX) || !Number.isFinite(minY)) {
+      return {
+        centerX: 0,
+        centerY: 0,
+        width: Math.max(FALLBACK_VIEW_SIZE, FALLBACK_VIEW_SIZE * svgAspectRatio),
+      }
+    }
+
     const rawWidth = maxX - minX
     const rawHeight = maxY - minY
     const paddedWidth = rawWidth + FLOORPLAN_PADDING * 2
@@ -4976,13 +5017,52 @@ export function FloorplanPanel() {
     floorplanFenceEntries,
     floorplanItemEntries,
     floorplanRoofEntries,
+    floorplanSceneRotationDeg,
     floorplanStairEntries,
+    measuredSceneBBox,
     svgAspectRatio,
     visibleSitePolygon,
     visibleZonePolygons,
     wallPolygons,
   ])
 
+  // Measure the painted floor-plan scene after each render. `getBBox()`
+  // gives us the tight bounds of whatever the registry layer emitted,
+  // even for kinds whose legacy entry arrays are empty stubs. Bail out
+  // when nothing has painted (empty group throws in some browsers).
+  // We measure the content-only sub-group (not the full scene group) to
+  // exclude the grid layer, whose extent tracks the viewBox and would
+  // otherwise create a measure→fit→measure update loop.
+  useLayoutEffect(() => {
+    const el = floorplanContentRef.current
+    if (!el) return
+    let bbox: { x: number; y: number; width: number; height: number }
+    try {
+      const measured = el.getBBox()
+      bbox = {
+        x: measured.x,
+        y: measured.y,
+        width: measured.width,
+        height: measured.height,
+      }
+    } catch {
+      return
+    }
+    if (bbox.width <= 0 && bbox.height <= 0) return
+    setMeasuredSceneBBox((prev) => {
+      if (
+        prev &&
+        prev.x === bbox.x &&
+        prev.y === bbox.y &&
+        prev.width === bbox.width &&
+        prev.height === bbox.height
+      ) {
+        return prev
+      }
+      return bbox
+    })
+  })
+
   useEffect(() => {
     const host = viewportHostRef.current
     if (!host) {
@@ -5030,6 +5110,19 @@ export function FloorplanPanel() {
     }
   }, [])
 
+  // Reset to auto-fit each time the 2D editor re-opens. The panel stays
+  // mounted across close/open (hidden via `display: none`), so without
+  // this the user's last pan/zoom — and any stale `measuredSceneBBox`
+  // captured before they closed it — would survive and the reopened
+  // editor would show the same off-screen viewport instead of fitting
+  // to the current scene.
+  useEffect(() => {
+    if (!isFloorplanOpen) return
+    hasUserAdjustedViewportRef.current = false
+    setViewport(null)
+    setMeasuredSceneBBox(null)
+  }, [isFloorplanOpen])
+
   useEffect(() => {
     const levelChanged = previousLevelIdRef.current !== (levelId ?? null)
 
@@ -5864,10 +5957,16 @@ export function FloorplanPanel() {
         return
       }
 
-      const svgPoint = getSvgPointFromClientPoint(clientX, clientY)
-      if (!svgPoint) {
+      // `getSvgPointFromClientPoint` resolves to the rotation group's
+      // local coords (pre-rotation). The viewBox lives in the outer
+      // SVG space (post-rotation), so apply the scene rotation here
+      // before using the point as a zoom anchor — otherwise a rotated
+      // scene zooms around the wrong location instead of the cursor.
+      const localPoint = getSvgPointFromClientPoint(clientX, clientY)
+      if (!localPoint) {
         return
       }
+      const svgPoint = rotateSvgPoint(localPoint, floorplanSceneRotationDeg)
 
       const currentViewport = viewport ?? fittedViewport
       const currentViewBox = viewBox
@@ -5889,6 +5988,7 @@ export function FloorplanPanel() {
     },
     [
       fittedViewport,
+      floorplanSceneRotationDeg,
       getSvgPointFromClientPoint,
       maxViewportWidth,
       minViewportWidth,
@@ -7245,8 +7345,19 @@ export function FloorplanPanel() {
         return
       }
 
-      createWallOnCurrentLevel(draftStart, point)
-      clearDraft()
+      const createdWall = createWallOnCurrentLevel(draftStart, point)
+      if (!createdWall) {
+        clearDraft()
+        return
+      }
+      // Continuous drafting: next wall starts where this one ended,
+      // matching the 3D wall tool (`packages/nodes/src/wall/tool.tsx`).
+      // Escape / double-click / tool switch still exits via the
+      // existing handlers.
+      const nextStart: WallPlanPoint = [createdWall.end[0], createdWall.end[1]]
+      setDraftStart(nextStart)
+      setDraftEnd(nextStart)
+      setCursorPoint(nextStart)
     },
     [clearDraft, draftStart],
   )
@@ -8542,9 +8653,17 @@ export function FloorplanPanel() {
               <FloorplanRenderProvider
                 hatchPatternId={wallSelectionHatchId}
                 palette={floorplanRegistryPalette}
+                sceneRotationDeg={floorplanSceneRotationDeg}
                 unitsPerPixel={floorplanUnitsPerPixel}
               >
-                <FloorplanRegistryLayer />
+                {/* Wrapped in a measured `<g>` so `fittedViewport` can
+                    fit to just the painted node geometry — measuring the
+                    whole rotation group would include the grid layer,
+                    whose extent is derived from the current viewBox and
+                    would create a measure→fit→measure loop. */}
+                <g ref={floorplanContentRef}>
+                  <FloorplanRegistryLayer />
+                </g>
               </FloorplanRenderProvider>
               {/* Cursor-driven placement ghost for movingNode when the
                   active kind is registry-driven. Renders via a portal
diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
index 83ac1db17..8019db2fa 100644
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -16,6 +16,7 @@ import { createPortal, type ThreeEvent, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useState } from 'react'
 import {
   BufferGeometry,
+  Color,
   ConeGeometry,
   CylinderGeometry,
   DoubleSide,
@@ -23,6 +24,7 @@ import {
   type Object3D,
   OrthographicCamera,
 } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
 
@@ -164,12 +166,28 @@ function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
 function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMoveHandle }) {
   const [isHovered, setIsHovered] = useState(false)
   const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const arrowMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        depthTest: true,
+        depthWrite: true,
+        transparent: false,
+        opacity: 1,
+      }),
+    [],
+  )
   const { camera } = useThree()
 
   const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
 
   const scale = (isHovered ? 1.12 : 1) * zoom
 
+  useEffect(() => {
+    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [arrowMaterial, isHovered])
+
   useEffect(() => {
     return () => {
       if (document.body.style.cursor === 'grab' || document.body.style.cursor === 'grabbing') {
@@ -179,10 +197,10 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
   }, [])
 
   useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
 
   const activateWallMove = (event: ThreeEvent<PointerEvent>) => {
     event.stopPropagation()
-    event.nativeEvent.preventDefault()
     document.body.style.cursor = 'grabbing'
 
     sfxEmitter.emit('sfx:item-pick')
@@ -198,6 +216,7 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
     <group position={handle.position} rotation={[0, handle.rotationY, 0]} scale={scale}>
       <mesh
         frustumCulled={false}
+        material={arrowMaterial}
         onPointerDown={activateWallMove}
         onPointerEnter={(event) => {
           event.stopPropagation()
@@ -214,14 +233,6 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
         renderOrder={1002}
       >
         <primitive attach="geometry" object={arrowGeometry} />
-        <meshBasicMaterial
-          color={isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR}
-          depthTest
-          depthWrite
-          opacity={1}
-          side={DoubleSide}
-          transparent={false}
-        />
       </mesh>
     </group>
   )
@@ -230,11 +241,27 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
 function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: WallMoveHandle }) {
   const [isHovered, setIsHovered] = useState(false)
   const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const arrowMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        depthTest: true,
+        depthWrite: true,
+        transparent: false,
+        opacity: 1,
+      }),
+    [],
+  )
   const { camera } = useThree()
 
   const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
   const scale = (isHovered ? 1.12 : 1) * zoom
 
+  useEffect(() => {
+    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [arrowMaterial, isHovered])
+
   useEffect(() => {
     return () => {
       if (document.body.style.cursor === 'grab' || document.body.style.cursor === 'grabbing') {
@@ -244,10 +271,10 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
   }, [])
 
   useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
 
   const activateFenceMove = (event: ThreeEvent<PointerEvent>) => {
     event.stopPropagation()
-    event.nativeEvent.preventDefault()
     document.body.style.cursor = 'grabbing'
 
     sfxEmitter.emit('sfx:item-pick')
@@ -263,6 +290,7 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
     <group position={handle.position} rotation={[0, handle.rotationY, 0]} scale={scale}>
       <mesh
         frustumCulled={false}
+        material={arrowMaterial}
         onPointerDown={activateFenceMove}
         onPointerEnter={(event) => {
           event.stopPropagation()
@@ -279,14 +307,6 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
         renderOrder={1002}
       >
         <primitive attach="geometry" object={arrowGeometry} />
-        <meshBasicMaterial
-          color={isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR}
-          depthTest
-          depthWrite
-          opacity={1}
-          side={DoubleSide}
-          transparent={false}
-        />
       </mesh>
     </group>
   )
diff --git a/packages/nodes/src/wall/definition.ts b/packages/nodes/src/wall/definition.ts
index 1e1a76195..4cba3fad0 100644
--- a/packages/nodes/src/wall/definition.ts
+++ b/packages/nodes/src/wall/definition.ts
@@ -1,6 +1,7 @@
 import type { NodeDefinition } from '@pascal-app/core'
 import { buildWallFloorplan } from './floorplan'
 import { wallCurveAffordance, wallMoveEndpointAffordance } from './floorplan-affordances'
+import { wallFloorplanMoveTarget } from './floorplan-move'
 import { wallParametrics } from './parametrics'
 import { WallNode } from './schema'
 
@@ -91,6 +92,7 @@ export const wallDefinition: NodeDefinition<typeof WallNode> = {
     'move-endpoint': wallMoveEndpointAffordance,
     curve: wallCurveAffordance,
   },
+  floorplanMoveTarget: wallFloorplanMoveTarget,
 
   toolHints: [
     { key: 'Left click', label: 'Set wall start / end' },
diff --git a/packages/nodes/src/wall/floorplan-move.ts b/packages/nodes/src/wall/floorplan-move.ts
new file mode 100644
index 000000000..faa6dcff4
--- /dev/null
+++ b/packages/nodes/src/wall/floorplan-move.ts
@@ -0,0 +1,138 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type FloorplanMoveTarget,
+  type FloorplanMoveTargetSession,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
+import { snapPointToGrid, type WallPlanPoint } from '@pascal-app/editor'
+
+const GRID_STEP = 0.5
+const POINT_EPSILON = 1e-6
+
+function samePoint(a: readonly [number, number], b: readonly [number, number]) {
+  return Math.abs(a[0] - b[0]) <= POINT_EPSILON && Math.abs(a[1] - b[1]) <= POINT_EPSILON
+}
+
+type LinkedWallSnapshot = {
+  id: AnyNodeId
+  start: [number, number]
+  end: [number, number]
+}
+
+/**
+ * 2D floor-plan move handler for wall — translates the wall by the
+ * cursor delta and cascades shared endpoints onto linked walls so
+ * connected corners stay connected. Linked walls' non-shared endpoint
+ * stays put; their shared endpoint follows the moving wall, so their
+ * length stretches/shrinks naturally.
+ *
+ * Writes both the moving wall and the cascaded linked walls to the
+ * scene each `apply` tick — this runs AFTER `MoveWallTool`'s own
+ * grid-event preview (the event handlers fire synchronously and the
+ * overlay's pointermove fires after), so the cascade here is the
+ * last-writer-wins state. `MoveWallTool`'s cleanup has an
+ * external-commit guard that prevents it from reverting on unmount.
+ */
+export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node, nodes }) => {
+  const wallId = node.id as AnyNodeId
+  const originalStart: [number, number] = [node.start[0], node.start[1]]
+  const originalEnd: [number, number] = [node.end[0], node.end[1]]
+
+  // Walls sharing an endpoint with the moving wall (same level only).
+  const linkedSnapshots: LinkedWallSnapshot[] = []
+  for (const sibling of Object.values(nodes)) {
+    if (!sibling || (sibling as AnyNode).type !== 'wall') continue
+    const w = sibling as WallNode
+    if (w.id === node.id) continue
+    if (w.parentId !== node.parentId) continue
+    if (
+      samePoint(w.start, originalStart) ||
+      samePoint(w.start, originalEnd) ||
+      samePoint(w.end, originalStart) ||
+      samePoint(w.end, originalEnd)
+    ) {
+      linkedSnapshots.push({
+        id: w.id as AnyNodeId,
+        start: [w.start[0], w.start[1]],
+        end: [w.end[0], w.end[1]],
+      })
+    }
+  }
+
+  let anchor: [number, number] | null = null
+  let lastDelta: [number, number] = [0, 0]
+
+  // biome-ignore lint/suspicious/noConsole: temp diagnostic
+  console.log('[wall-move-2d] setup', {
+    wallId,
+    originalStart,
+    originalEnd,
+    linkedCount: linkedSnapshots.length,
+    linked: linkedSnapshots.map((s) => ({ id: s.id, start: s.start, end: s.end })),
+  })
+
+  const session: FloorplanMoveTargetSession = {
+    affectedIds: [wallId, ...linkedSnapshots.map((s) => s.id)],
+    apply({ planPoint, modifiers }) {
+      const snapped: WallPlanPoint = modifiers.shiftKey
+        ? ([planPoint[0], planPoint[1]] as WallPlanPoint)
+        : snapPointToGrid([planPoint[0], planPoint[1]] as WallPlanPoint, GRID_STEP)
+      if (!anchor) {
+        anchor = [snapped[0], snapped[1]]
+        return
+      }
+      const dx = snapped[0] - anchor[0]
+      const dz = snapped[1] - anchor[1]
+      if (dx === lastDelta[0] && dz === lastDelta[1]) return
+      lastDelta = [dx, dz]
+
+      const nextStart: [number, number] = [originalStart[0] + dx, originalStart[1] + dz]
+      const nextEnd: [number, number] = [originalEnd[0] + dx, originalEnd[1] + dz]
+
+      // Cascade: each linked wall's endpoint that coincided with one
+      // of the moving wall's original endpoints follows that endpoint
+      // to its new position. The non-shared endpoint stays put.
+      const cascadeEndpoint = (point: [number, number]): [number, number] => {
+        if (samePoint(point, originalStart)) return nextStart
+        if (samePoint(point, originalEnd)) return nextEnd
+        return point
+      }
+      const linkedUpdates = linkedSnapshots.map((snap) => ({
+        id: snap.id,
+        data: {
+          start: cascadeEndpoint(snap.start),
+          end: cascadeEndpoint(snap.end),
+        },
+      }))
+
+      useScene.getState().updateNodes([
+        { id: wallId, data: { start: nextStart, end: nextEnd } },
+        ...linkedUpdates,
+      ])
+      useScene.getState().markDirty(wallId)
+      for (const upd of linkedUpdates) {
+        useScene.getState().markDirty(upd.id)
+      }
+    },
+    canCommit() {
+      const live = useScene.getState().nodes[wallId] as WallNode | undefined
+      if (!live || live.type !== 'wall') return false
+      const [dx, dz] = lastDelta
+      // biome-ignore lint/suspicious/noConsole: temp diagnostic
+      console.log('[wall-move-2d] canCommit', {
+        wallId,
+        delta: lastDelta,
+        liveStart: live.start,
+        liveEnd: live.end,
+        linkedNow: linkedSnapshots.map((s) => {
+          const n = useScene.getState().nodes[s.id] as WallNode | undefined
+          return { id: s.id, start: n?.start, end: n?.end }
+        }),
+      })
+      return dx !== 0 || dz !== 0
+    },
+  }
+  return session
+}
diff --git a/packages/nodes/src/wall/floorplan.ts b/packages/nodes/src/wall/floorplan.ts
index 0401c0eff..b67999c2a 100644
--- a/packages/nodes/src/wall/floorplan.ts
+++ b/packages/nodes/src/wall/floorplan.ts
@@ -138,6 +138,34 @@ export function buildWallFloorplan(node: WallNode, ctx: GeometryContext): Floorp
       payload: { wallId: node.id, endpoint: 'end' as const },
     })
 
+    // Side move arrows — two directional arrows at the wall midpoint,
+    // pointing outward perpendicular to the wall. Mirrors the 3D
+    // `WallMoveSideHandles` arrows so users can grab the wall body
+    // from the floor plan. PointerDown on either arrow activates
+    // `wallFloorplanMoveTarget` via the registry-layer dispatcher.
+    {
+      const dx = node.end[0] - node.start[0]
+      const dz = node.end[1] - node.start[1]
+      const wallLength = Math.hypot(dx, dz)
+      if (wallLength > 1e-6) {
+        const midX = (node.start[0] + node.end[0]) / 2
+        const midZ = (node.start[1] + node.end[1]) / 2
+        const nx = -dz / wallLength
+        const nz = dx / wallLength
+        const offset = floorplanWallThickness(node) / 2 + 0.05
+        children.push({
+          kind: 'move-arrow',
+          point: [midX + nx * offset, midZ + nz * offset],
+          angle: Math.atan2(nz, nx),
+        })
+        children.push({
+          kind: 'move-arrow',
+          point: [midX - nx * offset, midZ - nz * offset],
+          angle: Math.atan2(-nz, -nx),
+        })
+      }
+    }
+
     // Curve sagitta handle — teal dot at the wall midpoint that
     // controls `curveOffset`. Hidden when the wall hosts a door /
     // window / wall-attached item: bending the wall would tear those
@@ -191,7 +219,7 @@ export function buildWallFloorplan(node: WallNode, ctx: GeometryContext): Floorp
           start: [node.start[0], node.start[1]],
           end: [node.end[0], node.end[1]],
           offsetNormal: [nx * facingAway, nz * facingAway],
-          offsetDistance: 0.42,
+          offsetDistance: 0.75,
           extensionOvershoot: 0.12,
           text: formatLengthMetric(length),
         })
diff --git a/packages/nodes/src/wall/move-endpoint-tool.tsx b/packages/nodes/src/wall/move-endpoint-tool.tsx
index bc5183cfc..09228ebc9 100644
--- a/packages/nodes/src/wall/move-endpoint-tool.tsx
+++ b/packages/nodes/src/wall/move-endpoint-tool.tsx
@@ -27,14 +27,12 @@ import { Html } from '@react-three/drei'
 import { useCallback, useEffect, useRef, useState } from 'react'
 
 /**
- * Phase 5 Stage D — wall endpoint move tool (kind-owned).
+ * Wall endpoint move tool (kind-owned).
  *
- * 1:1 port of the legacy `MoveWallEndpointTool` (426 LoC, the largest
- * single tool in wall/). Same drag pipeline (snap → preview → apply
- * with linked-wall corner cascade), same Alt-detach modifier, same
- * angle label between the dragged segment and any neighbour sharing
- * the endpoint, same single-undo dance on commit, same activation
- * grace window.
+ * Press-drag-release: the endpoint handle's pointerdown activates this
+ * tool; cursor movement updates the preview (snap → linked-wall cascade
+ * → Alt-detach); pointerup commits if the endpoint actually moved, else
+ * dismisses without committing.
  *
  * Mounted via `def.affordanceTools['move-endpoint']` from
  * `wall/definition.ts`. Editor state trigger is
@@ -160,7 +158,7 @@ function getLinkedWallUpdates(
 }
 
 export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({ target }) => {
-  const activatedAtRef = useRef<number>(Date.now())
+  const hasDraggedRef = useRef(false)
   const previousGridPosRef = useRef<WallPlanPoint | null>(null)
   const shiftPressedRef = useRef(false)
   const altPressedRef = useRef(false)
@@ -280,13 +278,17 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
         triggerSFX('sfx:grid-snap')
       }
       previousGridPosRef.current = snappedPoint
+      hasDraggedRef.current = true
 
       applyPreview(snappedPoint, event.nativeEvent.altKey)
     }
 
-    const onGridClick = (event: GridEvent) => {
-      if (Date.now() - activatedAtRef.current < 150) {
-        event.nativeEvent?.stopPropagation?.()
+    const onPointerUp = () => {
+      // Press-release without drag: dismiss the tool without committing.
+      if (!hasDraggedRef.current) {
+        useViewer.getState().setSelection({ selectedIds: [nodeId] })
+        setAngleLabel(null)
+        exitMoveMode()
         return
       }
 
@@ -325,7 +327,6 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
       setAngleLabel(null)
       exitMoveMode()
-      event.nativeEvent?.stopPropagation?.()
     }
 
     const onCancel = () => {
@@ -367,8 +368,8 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
     }
 
     emitter.on('grid:move', onGridMove)
-    emitter.on('grid:click', onGridClick)
     emitter.on('tool:cancel', onCancel)
+    window.addEventListener('pointerup', onPointerUp)
     window.addEventListener('keydown', onKeyDown)
     window.addEventListener('keyup', onKeyUp)
     window.addEventListener('blur', onWindowBlur)
@@ -379,8 +380,8 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
       }
       resumeSceneHistory(useScene)
       emitter.off('grid:move', onGridMove)
-      emitter.off('grid:click', onGridClick)
       emitter.off('tool:cancel', onCancel)
+      window.removeEventListener('pointerup', onPointerUp)
       window.removeEventListener('keydown', onKeyDown)
       window.removeEventListener('keyup', onKeyUp)
       window.removeEventListener('blur', onWindowBlur)
diff --git a/packages/nodes/src/wall/move-tool.tsx b/packages/nodes/src/wall/move-tool.tsx
index 02624e9a2..80de5859e 100644
--- a/packages/nodes/src/wall/move-tool.tsx
+++ b/packages/nodes/src/wall/move-tool.tsx
@@ -808,7 +808,26 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
 
     return () => {
       if (shouldRestoreOnCleanup) {
-        restoreOriginal()
+        const live = useScene.getState().nodes[nodeId] as WallNode | undefined
+        const externallyCommitted =
+          !!live &&
+          live.type === 'wall' &&
+          (!samePoint(live.start, originalStartRef.current) ||
+            !samePoint(live.end, originalEndRef.current))
+        // biome-ignore lint/suspicious/noConsole: temp diagnostic
+        console.log('[wall-move-3d] cleanup', {
+          nodeId,
+          originalStart: originalStartRef.current,
+          originalEnd: originalEndRef.current,
+          liveStart: live?.start,
+          liveEnd: live?.end,
+          externallyCommitted,
+          willRestore: !externallyCommitted,
+          linkedCount: linkedOriginalsRef.current.length,
+        })
+        if (!externallyCommitted) {
+          restoreOriginal()
+        }
       }
       shiftPressedRef.current = false
       resumeSceneHistory(useScene)

From e10294a938b6d0492337c3ba827182d92866067d Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sat, 23 May 2026 00:36:38 +0530
Subject: [PATCH 04/48] wall: 2D floor-plan move adopts 3D junction planner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

2D wall drag now produces the same scene topology as 3D — linked corners
cascade per `planWallMoveJunctions`, off-axis branches stay rectilinear
with a bridge wall inserted between the original and new corner, and
same-direction consumed walls collapse and delete. Previously the 2D
handler did a naive endpoint-stretch cascade with no bridges or
collapses, so dragging an L-corner in 2D vs 3D yielded different scenes.

`FloorplanMoveTargetSession` gains an optional `commit` hook. The
default overlay path snapshots affected nodes and writes a diff back on
release — fine for kinds whose commit is a pure position update, but
insufficient when commit needs to also create or delete nodes. When
`commit` is present, the overlay reverts to baseline, resumes history,
and delegates the atomic write; one Ctrl-Z rolls back the entire
operation including bridge creates and collapsed deletes.

Shared helpers (`planWallMoveJunctions` plan → updates, linked-wall
snapshots, bridge synthesis) lifted to a new `packages/nodes/src/wall/
move-shared.ts` so both the 3D `MoveWallTool` and the 2D
`wallFloorplanMoveTarget` import them. Net -163 LoC after dedup.

Auto-slab live preview and ghost bridge previews mid-drag — visible in
3D today — remain 3D-only; 2D surfaces them at commit time through the
normal scene reactions. Tracked as follow-up.

Also drops three `// temp diagnostic` console.log blocks left over from
the prior wall-move branch (2D setup, 2D canCommit, 3D cleanup).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/core/src/index.ts                    |   3 +
 packages/core/src/registry/types.ts           |  17 +
 packages/core/src/systems/wall/wall-move.ts   |  82 +++++
 .../floorplan-registry-move-overlay.tsx       |  17 +
 packages/nodes/src/wall/floorplan-move.ts     | 260 ++++++++++-----
 packages/nodes/src/wall/move-shared.ts        | 231 +++++++++++++
 packages/nodes/src/wall/move-tool.tsx         | 315 ++----------------
 7 files changed, 541 insertions(+), 384 deletions(-)
 create mode 100644 packages/nodes/src/wall/move-shared.ts

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index c3cad9ae8..a1811c378 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -161,11 +161,14 @@ export {
 } from './systems/wall/wall-mitering'
 export {
   constrainWallMoveDeltaToAxis,
+  getLinkedWallUpdates,
   getPerpendicularWallMoveAxis,
+  getPlannedLinkedWallUpdates,
   planWallMoveJunctions,
   type WallMoveAxis,
   type WallMoveBridgePlan,
   type WallMoveJunctionPlan,
+  type WallMoveLinkedWallTargetPlan,
   type WallPlanPoint,
 } from './systems/wall/wall-move'
 export type { SceneGraph } from './utils/clone-scene-graph'
diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index 081647c74..d7161a4a2 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -505,6 +505,23 @@ export type FloorplanMoveTargetSession = {
    * area, overlap detected, ...).
    */
   canCommit(): boolean
+  /**
+   * Optional atomic-commit hook. The default overlay path snapshots
+   * each affected node before drag and writes a diff back on commit —
+   * fine for kinds whose commit is a pure position update, but
+   * insufficient when commit needs to also create or delete nodes
+   * (e.g. wall move emits bridge wall creates + collapsed wall deletes
+   * via `planWallMoveJunctions`).
+   *
+   * When present, the overlay reverts to the pre-drag baseline,
+   * resumes history, and calls `commit()` instead of the default
+   * `updateNodes(finalUpdates)`. The session is responsible for the
+   * full final write (typically `applyNodeChanges`) plus any
+   * post-commit selection / metadata. The overlay still emits the
+   * standard place SFX and clears `movingNode` after `commit()`
+   * returns.
+   */
+  commit?(): void
 }
 
 export type FloorplanMoveTarget<N> = (args: {
diff --git a/packages/core/src/systems/wall/wall-move.ts b/packages/core/src/systems/wall/wall-move.ts
index 15fffd9d9..0197de2e9 100644
--- a/packages/core/src/systems/wall/wall-move.ts
+++ b/packages/core/src/systems/wall/wall-move.ts
@@ -101,6 +101,88 @@ function getMoveWallRelation(
   return normalizedDot >= 0 ? 'same-direction' : 'opposite-direction'
 }
 
+/**
+ * Apply a junction plan to a list of linked walls, producing the per-wall
+ * endpoint updates. Mirrors the 3D `MoveWallTool`'s drag-preview behavior
+ * so the 2D move handler can drive the same scene topology.
+ *
+ * `linkedWallTargetPlans` take precedence over `linkedWallsToMove` — when
+ * the planner emits a target plan for a same-direction-consumed wall the
+ * matchPoint/targetPoint pair encodes the pivot, not the original ↔ next
+ * endpoint mapping.
+ */
+export function getLinkedWallUpdates<TWall extends Pick<WallNode, 'id' | 'start' | 'end'>>(
+  linkedWalls: Array<{
+    wall: TWall
+    matchPoint?: WallPlanPoint
+    targetPoint?: WallPlanPoint
+  }>,
+  originalStart: WallPlanPoint,
+  originalEnd: WallPlanPoint,
+  nextStart: WallPlanPoint,
+  nextEnd: WallPlanPoint,
+): Array<{ id: TWall['id']; start: WallPlanPoint; end: WallPlanPoint }> {
+  return linkedWalls.map(({ wall, matchPoint, targetPoint }) => {
+    if (matchPoint && targetPoint) {
+      return {
+        id: wall.id,
+        start: pointsEqual(wall.start, matchPoint) ? targetPoint : wall.start,
+        end: pointsEqual(wall.end, matchPoint) ? targetPoint : wall.end,
+      }
+    }
+
+    const targetStart = targetPoint ?? nextStart
+    const targetEnd = targetPoint ?? nextEnd
+
+    return {
+      id: wall.id,
+      start: pointsEqual(wall.start, originalStart)
+        ? targetStart
+        : pointsEqual(wall.start, originalEnd)
+          ? targetEnd
+          : wall.start,
+      end: pointsEqual(wall.end, originalStart)
+        ? targetStart
+        : pointsEqual(wall.end, originalEnd)
+          ? targetEnd
+          : wall.end,
+    }
+  })
+}
+
+export function getPlannedLinkedWallUpdates<TWall extends Pick<WallNode, 'id' | 'start' | 'end'>>(
+  plan: WallMoveJunctionPlan<TWall>,
+  originalStart: WallPlanPoint,
+  originalEnd: WallPlanPoint,
+  nextStart: WallPlanPoint,
+  nextEnd: WallPlanPoint,
+): Array<{ id: TWall['id']; start: WallPlanPoint; end: WallPlanPoint }> {
+  const movePlans = new Map<
+    TWall['id'],
+    { wall: TWall; matchPoint?: WallPlanPoint; targetPoint?: WallPlanPoint }
+  >()
+
+  for (const wall of plan.linkedWallsToMove) {
+    movePlans.set(wall.id, { wall })
+  }
+
+  for (const targetPlan of plan.linkedWallTargetPlans) {
+    movePlans.set(targetPlan.wall.id, {
+      wall: targetPlan.wall,
+      matchPoint: targetPlan.originalPoint,
+      targetPoint: targetPlan.targetPoint,
+    })
+  }
+
+  return getLinkedWallUpdates(
+    Array.from(movePlans.values()),
+    originalStart,
+    originalEnd,
+    nextStart,
+    nextEnd,
+  )
+}
+
 export function planWallMoveJunctions<TWall extends Pick<WallNode, 'id' | 'start' | 'end'>>(
   linkedWalls: TWall[],
   originalStart: WallPlanPoint,
diff --git a/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx b/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx
index 29e71cb64..d60159ee5 100644
--- a/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx
+++ b/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx
@@ -140,6 +140,23 @@ export function FloorplanRegistryMoveOverlay() {
 
       const commitFinalStateOrRevert = () => {
         const commitValid = session.canCommit()
+
+        // Sessions with a `commit` hook own their atomic write (e.g.
+        // wall move emits creates + deletes + updates via the junction
+        // planner). For those we still do Phase 1 (revert to baseline)
+        // and Phase 2's resume — but Phase 2's write is delegated, and
+        // we skip the snapshot-diff finalUpdates path.
+        if (commitValid && session.commit) {
+          useScene.getState().updateNodes(snapshotsToUpdates(snapshots))
+          if (historyPaused) {
+            resumeSceneHistory(useScene)
+            historyPaused = false
+          }
+          session.commit()
+          sfxEmitter.emit('sfx:item-place')
+          return
+        }
+
         const sceneState = useScene.getState().nodes
         const finalUpdates: Array<{ id: AnyNodeId; data: Record<string, unknown> }> = []
         for (const snap of snapshots) {
diff --git a/packages/nodes/src/wall/floorplan-move.ts b/packages/nodes/src/wall/floorplan-move.ts
index faa6dcff4..44687d40c 100644
--- a/packages/nodes/src/wall/floorplan-move.ts
+++ b/packages/nodes/src/wall/floorplan-move.ts
@@ -3,136 +3,214 @@ import {
   type AnyNodeId,
   type FloorplanMoveTarget,
   type FloorplanMoveTargetSession,
+  getPlannedLinkedWallUpdates,
+  planWallMoveJunctions,
   useScene,
   type WallNode,
+  type WallPlanPoint,
 } from '@pascal-app/core'
-import { snapPointToGrid, type WallPlanPoint } from '@pascal-app/editor'
+import { isWallLongEnough, snapPointToGrid } from '@pascal-app/editor'
+import { useViewer } from '@pascal-app/viewer'
+import {
+  buildBridgeWallCreates,
+  getLinkedWallSnapshots,
+  getWallsAfterUpdates,
+  type LinkedWallSnapshot,
+  stripWallIsNewMetadata,
+} from './move-shared'
 
 const GRID_STEP = 0.5
-const POINT_EPSILON = 1e-6
-
-function samePoint(a: readonly [number, number], b: readonly [number, number]) {
-  return Math.abs(a[0] - b[0]) <= POINT_EPSILON && Math.abs(a[1] - b[1]) <= POINT_EPSILON
-}
-
-type LinkedWallSnapshot = {
-  id: AnyNodeId
-  start: [number, number]
-  end: [number, number]
-}
 
 /**
- * 2D floor-plan move handler for wall — translates the wall by the
- * cursor delta and cascades shared endpoints onto linked walls so
- * connected corners stay connected. Linked walls' non-shared endpoint
- * stays put; their shared endpoint follows the moving wall, so their
- * length stretches/shrinks naturally.
+ * 2D floor-plan move handler for wall.
  *
- * Writes both the moving wall and the cascaded linked walls to the
- * scene each `apply` tick — this runs AFTER `MoveWallTool`'s own
- * grid-event preview (the event handlers fire synchronously and the
- * overlay's pointermove fires after), so the cascade here is the
- * last-writer-wins state. `MoveWallTool`'s cleanup has an
- * external-commit guard that prevents it from reverting on unmount.
+ * Mirrors the 3D `MoveWallTool` junction-plan behavior so dragging a
+ * wall in the floor plan produces the same scene topology as dragging
+ * it in 3D: linked corners cascade, same-direction collapsed walls
+ * delete, off-axis branches stay rectilinear with a new bridge wall
+ * inserted between the original and new corner.
+ *
+ * Tick (`apply`) — writes only updates while history is paused. Bridge
+ * creates and wall deletes are deferred to commit so the live preview
+ * doesn't churn the scene graph with create / delete on every cursor
+ * move.
+ *
+ * Commit (`commit`) — runs after the overlay reverts to baseline and
+ * resumes history. Recomputes the plan at the final cursor position
+ * and emits one atomic `applyNodeChanges` covering the moved walls,
+ * the bridge wall creates, and the collapsed wall deletes — so a
+ * single Ctrl-Z rolls the entire operation back.
+ *
+ * Auto-slab live preview and ghost bridge SVG previews — visible in
+ * the 3D tool — are deliberately deferred. Slab polygons re-derive on
+ * commit through the normal scene reactions; bridges appear at commit
+ * time. Follow-up work to surface them mid-drag is tracked separately.
  */
-export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node, nodes }) => {
+export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node }) => {
   const wallId = node.id as AnyNodeId
-  const originalStart: [number, number] = [node.start[0], node.start[1]]
-  const originalEnd: [number, number] = [node.end[0], node.end[1]]
-
-  // Walls sharing an endpoint with the moving wall (same level only).
-  const linkedSnapshots: LinkedWallSnapshot[] = []
-  for (const sibling of Object.values(nodes)) {
-    if (!sibling || (sibling as AnyNode).type !== 'wall') continue
-    const w = sibling as WallNode
-    if (w.id === node.id) continue
-    if (w.parentId !== node.parentId) continue
-    if (
-      samePoint(w.start, originalStart) ||
-      samePoint(w.start, originalEnd) ||
-      samePoint(w.end, originalStart) ||
-      samePoint(w.end, originalEnd)
-    ) {
-      linkedSnapshots.push({
-        id: w.id as AnyNodeId,
-        start: [w.start[0], w.start[1]],
-        end: [w.end[0], w.end[1]],
-      })
-    }
-  }
+  const originalStart: WallPlanPoint = [node.start[0], node.start[1]]
+  const originalEnd: WallPlanPoint = [node.end[0], node.end[1]]
+  const isNew = !!(node.metadata as { isNew?: unknown } | null)?.isNew
 
-  let anchor: [number, number] | null = null
-  let lastDelta: [number, number] = [0, 0]
+  const linkedOriginals: LinkedWallSnapshot[] = isNew
+    ? []
+    : getLinkedWallSnapshots({
+        wallId: node.id,
+        wallParentId: node.parentId ?? null,
+        originalStart,
+        originalEnd,
+      })
 
-  // biome-ignore lint/suspicious/noConsole: temp diagnostic
-  console.log('[wall-move-2d] setup', {
-    wallId,
-    originalStart,
-    originalEnd,
-    linkedCount: linkedSnapshots.length,
-    linked: linkedSnapshots.map((s) => ({ id: s.id, start: s.start, end: s.end })),
-  })
+  let anchor: WallPlanPoint | null = null
+  let lastDelta: WallPlanPoint = [0, 0]
+  let lastNextStart: WallPlanPoint = originalStart
+  let lastNextEnd: WallPlanPoint = originalEnd
 
   const session: FloorplanMoveTargetSession = {
-    affectedIds: [wallId, ...linkedSnapshots.map((s) => s.id)],
+    affectedIds: [wallId, ...linkedOriginals.map((w) => w.id as AnyNodeId)],
+
     apply({ planPoint, modifiers }) {
       const snapped: WallPlanPoint = modifiers.shiftKey
-        ? ([planPoint[0], planPoint[1]] as WallPlanPoint)
+        ? [planPoint[0], planPoint[1]]
         : snapPointToGrid([planPoint[0], planPoint[1]] as WallPlanPoint, GRID_STEP)
+
       if (!anchor) {
         anchor = [snapped[0], snapped[1]]
         return
       }
+
       const dx = snapped[0] - anchor[0]
       const dz = snapped[1] - anchor[1]
       if (dx === lastDelta[0] && dz === lastDelta[1]) return
       lastDelta = [dx, dz]
 
-      const nextStart: [number, number] = [originalStart[0] + dx, originalStart[1] + dz]
-      const nextEnd: [number, number] = [originalEnd[0] + dx, originalEnd[1] + dz]
+      const nextStart: WallPlanPoint = [originalStart[0] + dx, originalStart[1] + dz]
+      const nextEnd: WallPlanPoint = [originalEnd[0] + dx, originalEnd[1] + dz]
+      lastNextStart = nextStart
+      lastNextEnd = nextEnd
 
-      // Cascade: each linked wall's endpoint that coincided with one
-      // of the moving wall's original endpoints follows that endpoint
-      // to its new position. The non-shared endpoint stays put.
-      const cascadeEndpoint = (point: [number, number]): [number, number] => {
-        if (samePoint(point, originalStart)) return nextStart
-        if (samePoint(point, originalEnd)) return nextEnd
-        return point
-      }
-      const linkedUpdates = linkedSnapshots.map((snap) => ({
-        id: snap.id,
-        data: {
-          start: cascadeEndpoint(snap.start),
-          end: cascadeEndpoint(snap.end),
-        },
-      }))
-
-      useScene.getState().updateNodes([
+      const plan = planWallMoveJunctions(
+        linkedOriginals,
+        originalStart,
+        originalEnd,
+        nextStart,
+        nextEnd,
+      )
+      const plannedUpdates = getPlannedLinkedWallUpdates(
+        plan,
+        originalStart,
+        originalEnd,
+        nextStart,
+        nextEnd,
+      )
+      const plannedById = new Map(plannedUpdates.map((entry) => [entry.id, entry]))
+
+      // Walls in the plan that would collapse to ≈zero-length get held
+      // at their pre-drag positions during the live preview — actually
+      // deleting them is deferred to commit so a single drag tick
+      // doesn't churn the scene graph with create / delete pairs.
+      const collapsedIds = new Set([
+        ...plannedUpdates
+          .filter((entry) => !isWallLongEnough(entry.start, entry.end))
+          .map((entry) => entry.id),
+        ...plan.wallsToDelete.map((wall) => wall.id),
+      ])
+
+      const linkedUpdates = linkedOriginals.map((wall) => {
+        if (collapsedIds.has(wall.id)) {
+          return { id: wall.id as AnyNodeId, data: { start: wall.start, end: wall.end } }
+        }
+        const planned = plannedById.get(wall.id)
+        if (planned) {
+          return { id: wall.id as AnyNodeId, data: { start: planned.start, end: planned.end } }
+        }
+        return { id: wall.id as AnyNodeId, data: { start: wall.start, end: wall.end } }
+      })
+
+      const sceneState = useScene.getState()
+      sceneState.updateNodes([
         { id: wallId, data: { start: nextStart, end: nextEnd } },
         ...linkedUpdates,
       ])
-      useScene.getState().markDirty(wallId)
+      sceneState.markDirty(wallId)
       for (const upd of linkedUpdates) {
-        useScene.getState().markDirty(upd.id)
+        sceneState.markDirty(upd.id)
       }
     },
+
     canCommit() {
       const live = useScene.getState().nodes[wallId] as WallNode | undefined
       if (!live || live.type !== 'wall') return false
       const [dx, dz] = lastDelta
-      // biome-ignore lint/suspicious/noConsole: temp diagnostic
-      console.log('[wall-move-2d] canCommit', {
-        wallId,
-        delta: lastDelta,
-        liveStart: live.start,
-        liveEnd: live.end,
-        linkedNow: linkedSnapshots.map((s) => {
-          const n = useScene.getState().nodes[s.id] as WallNode | undefined
-          return { id: s.id, start: n?.start, end: n?.end }
-        }),
-      })
       return dx !== 0 || dz !== 0
     },
+
+    commit() {
+      const sceneState = useScene.getState()
+      const liveWall = sceneState.nodes[wallId] as WallNode | undefined
+      if (!liveWall || liveWall.type !== 'wall') return
+
+      const plan = planWallMoveJunctions(
+        linkedOriginals,
+        originalStart,
+        originalEnd,
+        lastNextStart,
+        lastNextEnd,
+      )
+      const linkedWallUpdates = getPlannedLinkedWallUpdates(
+        plan,
+        originalStart,
+        originalEnd,
+        lastNextStart,
+        lastNextEnd,
+      )
+      const collapsedLinkedWallIds = new Set([
+        ...linkedWallUpdates
+          .filter((entry) => !isWallLongEnough(entry.start, entry.end))
+          .map((entry) => entry.id as AnyNodeId),
+        ...plan.wallsToDelete.map((wall) => wall.id as AnyNodeId),
+      ])
+
+      const movingWallUpdate = {
+        id: wallId,
+        data: isNew
+          ? {
+              start: lastNextStart,
+              end: lastNextEnd,
+              metadata: stripWallIsNewMetadata(node.metadata),
+            }
+          : { start: lastNextStart, end: lastNextEnd },
+      }
+
+      const commitUpdates: Array<{ id: AnyNodeId; data: Partial<WallNode> }> = [
+        movingWallUpdate,
+        ...linkedWallUpdates
+          .filter((entry) => !collapsedLinkedWallIds.has(entry.id as AnyNodeId))
+          .map((entry) => ({
+            id: entry.id as AnyNodeId,
+            data: { start: entry.start, end: entry.end } as Partial<WallNode>,
+          })),
+      ]
+
+      const existingWalls = getWallsAfterUpdates(sceneState.nodes, commitUpdates).filter(
+        (wall) => !collapsedLinkedWallIds.has(wall.id as AnyNodeId),
+      )
+      const bridgeCreates = buildBridgeWallCreates({
+        bridgePlans: plan.bridgePlans,
+        nextStart: lastNextStart,
+        nextEnd: lastNextEnd,
+        existingWalls,
+        wallCount: Object.values(sceneState.nodes).filter((entry) => entry?.type === 'wall').length,
+      })
+
+      sceneState.applyNodeChanges({
+        update: commitUpdates as Array<{ id: AnyNodeId; data: Partial<AnyNode> }>,
+        create: bridgeCreates,
+        delete: Array.from(collapsedLinkedWallIds),
+      })
+
+      useViewer.getState().setSelection({ selectedIds: [wallId] })
+    },
   }
   return session
 }
diff --git a/packages/nodes/src/wall/move-shared.ts b/packages/nodes/src/wall/move-shared.ts
new file mode 100644
index 000000000..337d88658
--- /dev/null
+++ b/packages/nodes/src/wall/move-shared.ts
@@ -0,0 +1,231 @@
+import {
+  type AnyNodeId,
+  DEFAULT_WALL_HEIGHT,
+  getMaterialPresetByRef,
+  resolveMaterial,
+  useScene,
+  type WallMoveBridgePlan,
+  type WallNode,
+  type WallPlanPoint,
+  WallNode as WallSchema,
+} from '@pascal-app/core'
+import { isWallLongEnough } from '@pascal-app/editor'
+
+/**
+ * Pure helpers shared by the 3D `MoveWallTool` and the 2D
+ * `wallFloorplanMoveTarget`. Lives in `packages/nodes` because the
+ * bridge / ghost helpers depend on `WallSchema.parse` and material
+ * preset resolution; kept React-free so both call sites can import
+ * cleanly.
+ */
+
+const POINT_EPSILON = 1e-6
+
+export function samePoint(a: WallPlanPoint, b: WallPlanPoint) {
+  return Math.abs(a[0] - b[0]) <= POINT_EPSILON && Math.abs(a[1] - b[1]) <= POINT_EPSILON
+}
+
+function pointKey(point: WallPlanPoint) {
+  return `${point[0]}:${point[1]}`
+}
+
+export function stripWallIsNewMetadata(meta: WallNode['metadata']): WallNode['metadata'] {
+  if (!meta || typeof meta !== 'object' || Array.isArray(meta)) {
+    return meta
+  }
+
+  const nextMeta = { ...(meta as Record<string, unknown>) } as Record<string, unknown>
+  delete nextMeta.isNew
+  return nextMeta as WallNode['metadata']
+}
+
+export type LinkedWallSnapshot = WallNode
+
+/**
+ * Walls in the same level that share an endpoint with the moving wall,
+ * plus walls one hop further out that share an endpoint with a
+ * directly-linked wall — needed so the junction planner can resolve
+ * pivot-point context when a same-direction wall is consumed.
+ */
+export function getLinkedWallSnapshots(args: {
+  wallId: WallNode['id']
+  wallParentId: string | null
+  originalStart: WallPlanPoint
+  originalEnd: WallPlanPoint
+}): LinkedWallSnapshot[] {
+  const { wallId, wallParentId, originalStart, originalEnd } = args
+  const { nodes } = useScene.getState()
+  const walls = Object.values(nodes).filter(
+    (node): node is WallNode =>
+      node?.type === 'wall' && node.id !== wallId && (node.parentId ?? null) === wallParentId,
+  )
+  const directlyLinkedWalls = walls.filter(
+    (wall) =>
+      samePoint(wall.start, originalStart) ||
+      samePoint(wall.start, originalEnd) ||
+      samePoint(wall.end, originalStart) ||
+      samePoint(wall.end, originalEnd),
+  )
+  const contextPoints = new Set([pointKey(originalStart), pointKey(originalEnd)])
+
+  for (const wall of directlyLinkedWalls) {
+    contextPoints.add(pointKey(wall.start))
+    contextPoints.add(pointKey(wall.end))
+  }
+
+  const snapshots: LinkedWallSnapshot[] = []
+  const seenWallIds = new Set<WallNode['id']>()
+
+  for (const node of walls) {
+    if (!contextPoints.has(pointKey(node.start)) && !contextPoints.has(pointKey(node.end))) {
+      continue
+    }
+
+    if (seenWallIds.has(node.id)) {
+      continue
+    }
+    seenWallIds.add(node.id)
+
+    snapshots.push({
+      ...node,
+      start: [...node.start] as [number, number],
+      end: [...node.end] as [number, number],
+      children: [...(node.children ?? [])],
+    })
+  }
+
+  return snapshots
+}
+
+function wallSegmentExists(
+  walls: Array<Pick<WallNode, 'start' | 'end'>>,
+  start: WallPlanPoint,
+  end: WallPlanPoint,
+) {
+  return walls.some(
+    (wall) =>
+      (samePoint(wall.start, start) && samePoint(wall.end, end)) ||
+      (samePoint(wall.start, end) && samePoint(wall.end, start)),
+  )
+}
+
+export function getWallGhostColor(wall: WallNode) {
+  const presetColor =
+    getMaterialPresetByRef(wall.materialPreset)?.mapProperties.color ??
+    getMaterialPresetByRef(wall.interiorMaterialPreset)?.mapProperties.color ??
+    getMaterialPresetByRef(wall.exteriorMaterialPreset)?.mapProperties.color
+
+  if (presetColor) {
+    return presetColor
+  }
+
+  return resolveMaterial(wall.material ?? wall.interiorMaterial ?? wall.exteriorMaterial).color
+}
+
+export function getWallsAfterUpdates(
+  nodes: ReturnType<typeof useScene.getState>['nodes'],
+  updates: Array<{ id: AnyNodeId; data: Partial<WallNode> }>,
+): WallNode[] {
+  const updateById = new Map(updates.map((update) => [update.id, update.data]))
+
+  return Object.values(nodes)
+    .filter((node): node is WallNode => node?.type === 'wall')
+    .map((wall) => {
+      const update = updateById.get(wall.id as AnyNodeId)
+      return update ? ({ ...wall, ...update } as WallNode) : wall
+    })
+}
+
+export function buildBridgeWallCreates(args: {
+  bridgePlans: Array<WallMoveBridgePlan<LinkedWallSnapshot>>
+  nextStart: WallPlanPoint
+  nextEnd: WallPlanPoint
+  existingWalls: WallNode[]
+  wallCount: number
+}): Array<{ node: WallNode; parentId?: AnyNodeId }> {
+  const { bridgePlans, nextStart, nextEnd, existingWalls, wallCount } = args
+  const wallsForDuplicateCheck = [...existingWalls]
+  const creates: Array<{ node: WallNode; parentId?: AnyNodeId }> = []
+
+  for (const plan of bridgePlans) {
+    const nextPoint = plan.movedEndpoint === 'start' ? nextStart : nextEnd
+
+    if (!isWallLongEnough(plan.originalPoint, nextPoint)) {
+      continue
+    }
+
+    if (wallSegmentExists(wallsForDuplicateCheck, plan.originalPoint, nextPoint)) {
+      continue
+    }
+
+    const { id: _id, parentId: _parentId, children: _children, ...sourceWall } = plan.wall
+    const bridgeWall = WallSchema.parse({
+      ...sourceWall,
+      name: `Wall ${wallCount + creates.length + 1}`,
+      start: plan.originalPoint,
+      end: nextPoint,
+      children: [],
+      metadata: stripWallIsNewMetadata(plan.wall.metadata),
+    })
+
+    creates.push({
+      node: bridgeWall,
+      parentId: (plan.wall.parentId ?? undefined) as AnyNodeId | undefined,
+    })
+    wallsForDuplicateCheck.push(bridgeWall)
+  }
+
+  return creates
+}
+
+export type GhostWallPreview = {
+  id: string
+  start: WallPlanPoint
+  end: WallPlanPoint
+  color: string
+  height: number
+}
+
+export function buildBridgeWallPreviews(args: {
+  bridgePlans: Array<WallMoveBridgePlan<LinkedWallSnapshot>>
+  nextStart: WallPlanPoint
+  nextEnd: WallPlanPoint
+  existingWalls: WallNode[]
+}): Array<{ ghost: GhostWallPreview; wall: WallNode }> {
+  const { bridgePlans, nextStart, nextEnd, existingWalls } = args
+  const wallsForDuplicateCheck: Array<Pick<WallNode, 'start' | 'end'>> = [...existingWalls]
+  const previews: Array<{ ghost: GhostWallPreview; wall: WallNode }> = []
+
+  for (const plan of bridgePlans) {
+    const nextPoint = plan.movedEndpoint === 'start' ? nextStart : nextEnd
+
+    if (!isWallLongEnough(plan.originalPoint, nextPoint)) {
+      continue
+    }
+
+    if (wallSegmentExists(wallsForDuplicateCheck, plan.originalPoint, nextPoint)) {
+      continue
+    }
+
+    const { id: _id, children: _children, ...sourceWall } = plan.wall
+    const wall = WallSchema.parse({
+      ...sourceWall,
+      name: 'Wall Preview',
+      start: plan.originalPoint,
+      end: nextPoint,
+      children: [],
+      metadata: stripWallIsNewMetadata(plan.wall.metadata),
+    })
+    const ghost: GhostWallPreview = {
+      id: `${plan.wall.id}:${plan.movedEndpoint}:${previews.length}`,
+      start: [...plan.originalPoint] as WallPlanPoint,
+      end: [...nextPoint] as WallPlanPoint,
+      color: getWallGhostColor(plan.wall),
+      height: plan.wall.height ?? DEFAULT_WALL_HEIGHT,
+    }
+    previews.push({ ghost, wall })
+    wallsForDuplicateCheck.push(wall)
+  }
+
+  return previews
+}
diff --git a/packages/nodes/src/wall/move-tool.tsx b/packages/nodes/src/wall/move-tool.tsx
index 80de5859e..a1ee10c11 100644
--- a/packages/nodes/src/wall/move-tool.tsx
+++ b/packages/nodes/src/wall/move-tool.tsx
@@ -3,24 +3,20 @@
 import {
   type AnyNodeId,
   constrainWallMoveDeltaToAxis,
-  DEFAULT_WALL_HEIGHT,
   detectSpacesForLevel,
   emitter,
   type GridEvent,
-  getMaterialPresetByRef,
   getPerpendicularWallMoveAxis,
+  getPlannedLinkedWallUpdates,
   pauseSceneHistory,
   planAutoSlabsForLevel,
   planWallMoveJunctions,
-  resolveMaterial,
   resumeSceneHistory,
   type SlabNode,
   useScene,
   type WallMoveAxis,
-  type WallMoveBridgePlan,
   type WallMoveJunctionPlan,
   type WallNode,
-  WallNode as WallSchema,
 } from '@pascal-app/core'
 import {
   CursorSphere,
@@ -35,6 +31,16 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { BufferGeometry, DoubleSide, Float32BufferAttribute } from 'three'
+import {
+  buildBridgeWallCreates,
+  buildBridgeWallPreviews,
+  type GhostWallPreview,
+  getLinkedWallSnapshots,
+  getWallsAfterUpdates,
+  type LinkedWallSnapshot,
+  samePoint,
+  stripWallIsNewMetadata,
+} from './move-shared'
 
 /**
  * Phase 5 Stage D — wall whole-move tool (kind-owned).
@@ -65,195 +71,6 @@ function rotateVector([x, z]: [number, number], angle: number): [number, number]
   return [x * cos - z * sin, x * sin + z * cos]
 }
 
-function samePoint(a: [number, number], b: [number, number]) {
-  return a[0] === b[0] && a[1] === b[1]
-}
-
-function pointKey(point: [number, number]) {
-  return `${point[0]}:${point[1]}`
-}
-
-function stripWallIsNewMetadata(meta: WallNode['metadata']): WallNode['metadata'] {
-  if (!meta || typeof meta !== 'object' || Array.isArray(meta)) {
-    return meta
-  }
-
-  const nextMeta = { ...(meta as Record<string, unknown>) } as Record<string, unknown>
-  delete nextMeta.isNew
-  return nextMeta as WallNode['metadata']
-}
-
-type LinkedWallSnapshot = WallNode
-
-type GhostWallPreview = {
-  id: string
-  start: [number, number]
-  end: [number, number]
-  color: string
-  height: number
-}
-
-function getLinkedWallSnapshots(args: {
-  wallId: WallNode['id']
-  wallParentId: string | null
-  originalStart: [number, number]
-  originalEnd: [number, number]
-}) {
-  const { wallId, wallParentId, originalStart, originalEnd } = args
-  const { nodes } = useScene.getState()
-  const walls = Object.values(nodes).filter(
-    (node): node is WallNode =>
-      node?.type === 'wall' && node.id !== wallId && (node.parentId ?? null) === wallParentId,
-  )
-  const directlyLinkedWalls = walls.filter(
-    (wall) =>
-      samePoint(wall.start, originalStart) ||
-      samePoint(wall.start, originalEnd) ||
-      samePoint(wall.end, originalStart) ||
-      samePoint(wall.end, originalEnd),
-  )
-  const contextPoints = new Set([pointKey(originalStart), pointKey(originalEnd)])
-
-  for (const wall of directlyLinkedWalls) {
-    contextPoints.add(pointKey(wall.start))
-    contextPoints.add(pointKey(wall.end))
-  }
-
-  const snapshots: LinkedWallSnapshot[] = []
-  const seenWallIds = new Set<WallNode['id']>()
-
-  for (const node of walls) {
-    if (!contextPoints.has(pointKey(node.start)) && !contextPoints.has(pointKey(node.end))) {
-      continue
-    }
-
-    if (seenWallIds.has(node.id)) {
-      continue
-    }
-    seenWallIds.add(node.id)
-
-    snapshots.push({
-      ...node,
-      start: [...node.start] as [number, number],
-      end: [...node.end] as [number, number],
-      children: [...(node.children ?? [])],
-    })
-  }
-
-  return snapshots
-}
-
-function getLinkedWallUpdates(
-  linkedWalls: Array<{
-    wall: LinkedWallSnapshot
-    matchPoint?: [number, number]
-    targetPoint?: [number, number]
-  }>,
-  originalStart: [number, number],
-  originalEnd: [number, number],
-  nextStart: [number, number],
-  nextEnd: [number, number],
-) {
-  return linkedWalls.map(({ wall, matchPoint, targetPoint }) => {
-    if (matchPoint && targetPoint) {
-      return {
-        id: wall.id,
-        start: samePoint(wall.start, matchPoint) ? targetPoint : wall.start,
-        end: samePoint(wall.end, matchPoint) ? targetPoint : wall.end,
-      }
-    }
-
-    const targetStart = targetPoint ?? nextStart
-    const targetEnd = targetPoint ?? nextEnd
-
-    return {
-      id: wall.id,
-      start: samePoint(wall.start, originalStart)
-        ? targetStart
-        : samePoint(wall.start, originalEnd)
-          ? targetEnd
-          : wall.start,
-      end: samePoint(wall.end, originalStart)
-        ? targetStart
-        : samePoint(wall.end, originalEnd)
-          ? targetEnd
-          : wall.end,
-    }
-  })
-}
-
-function getPlannedLinkedWallUpdates(
-  plan: WallMoveJunctionPlan<LinkedWallSnapshot>,
-  originalStart: [number, number],
-  originalEnd: [number, number],
-  nextStart: [number, number],
-  nextEnd: [number, number],
-) {
-  const movePlans = new Map<
-    WallNode['id'],
-    { wall: LinkedWallSnapshot; matchPoint?: [number, number]; targetPoint?: [number, number] }
-  >()
-
-  for (const wall of plan.linkedWallsToMove) {
-    movePlans.set(wall.id, { wall })
-  }
-
-  for (const targetPlan of plan.linkedWallTargetPlans) {
-    movePlans.set(targetPlan.wall.id, {
-      wall: targetPlan.wall,
-      matchPoint: targetPlan.originalPoint,
-      targetPoint: targetPlan.targetPoint,
-    })
-  }
-
-  return getLinkedWallUpdates(
-    Array.from(movePlans.values()),
-    originalStart,
-    originalEnd,
-    nextStart,
-    nextEnd,
-  )
-}
-
-function wallSegmentExists(
-  walls: Array<Pick<WallNode, 'start' | 'end'>>,
-  start: [number, number],
-  end: [number, number],
-) {
-  return walls.some(
-    (wall) =>
-      (samePoint(wall.start, start) && samePoint(wall.end, end)) ||
-      (samePoint(wall.start, end) && samePoint(wall.end, start)),
-  )
-}
-
-function getWallGhostColor(wall: WallNode) {
-  const presetColor =
-    getMaterialPresetByRef(wall.materialPreset)?.mapProperties.color ??
-    getMaterialPresetByRef(wall.interiorMaterialPreset)?.mapProperties.color ??
-    getMaterialPresetByRef(wall.exteriorMaterialPreset)?.mapProperties.color
-
-  if (presetColor) {
-    return presetColor
-  }
-
-  return resolveMaterial(wall.material ?? wall.interiorMaterial ?? wall.exteriorMaterial).color
-}
-
-function getWallsAfterUpdates(
-  nodes: ReturnType<typeof useScene.getState>['nodes'],
-  updates: Array<{ id: AnyNodeId; data: Partial<WallNode> }>,
-) {
-  const updateById = new Map(updates.map((update) => [update.id, update.data]))
-
-  return Object.values(nodes)
-    .filter((node): node is WallNode => node?.type === 'wall')
-    .map((wall) => {
-      const update = updateById.get(wall.id as AnyNodeId)
-      return update ? ({ ...wall, ...update } as WallNode) : wall
-    })
-}
-
 function cloneSlabSnapshot(slab: SlabNode): SlabNode {
   return {
     ...slab,
@@ -277,92 +94,6 @@ function getLevelAutoSlabSnapshots(levelId: string) {
   return getLevelAutoSlabs(levelId, useScene.getState().nodes).map(cloneSlabSnapshot)
 }
 
-function buildBridgeWallCreates(args: {
-  bridgePlans: Array<WallMoveBridgePlan<LinkedWallSnapshot>>
-  nextStart: [number, number]
-  nextEnd: [number, number]
-  existingWalls: WallNode[]
-  wallCount: number
-}): Array<{ node: WallNode; parentId?: AnyNodeId }> {
-  const { bridgePlans, nextStart, nextEnd, existingWalls, wallCount } = args
-  const wallsForDuplicateCheck = [...existingWalls]
-  const creates: Array<{ node: WallNode; parentId?: AnyNodeId }> = []
-
-  for (const plan of bridgePlans) {
-    const nextPoint = plan.movedEndpoint === 'start' ? nextStart : nextEnd
-
-    if (!isWallLongEnough(plan.originalPoint, nextPoint)) {
-      continue
-    }
-
-    if (wallSegmentExists(wallsForDuplicateCheck, plan.originalPoint, nextPoint)) {
-      continue
-    }
-
-    const { id: _id, parentId: _parentId, children: _children, ...sourceWall } = plan.wall
-    const bridgeWall = WallSchema.parse({
-      ...sourceWall,
-      name: `Wall ${wallCount + creates.length + 1}`,
-      start: plan.originalPoint,
-      end: nextPoint,
-      children: [],
-      metadata: stripWallIsNewMetadata(plan.wall.metadata),
-    })
-
-    creates.push({
-      node: bridgeWall,
-      parentId: (plan.wall.parentId ?? undefined) as AnyNodeId | undefined,
-    })
-    wallsForDuplicateCheck.push(bridgeWall)
-  }
-
-  return creates
-}
-
-function buildBridgeWallPreviews(args: {
-  bridgePlans: Array<WallMoveBridgePlan<LinkedWallSnapshot>>
-  nextStart: [number, number]
-  nextEnd: [number, number]
-  existingWalls: WallNode[]
-}): Array<{ ghost: GhostWallPreview; wall: WallNode }> {
-  const { bridgePlans, nextStart, nextEnd, existingWalls } = args
-  const wallsForDuplicateCheck: Array<Pick<WallNode, 'start' | 'end'>> = [...existingWalls]
-  const previews: Array<{ ghost: GhostWallPreview; wall: WallNode }> = []
-
-  for (const plan of bridgePlans) {
-    const nextPoint = plan.movedEndpoint === 'start' ? nextStart : nextEnd
-
-    if (!isWallLongEnough(plan.originalPoint, nextPoint)) {
-      continue
-    }
-
-    if (wallSegmentExists(wallsForDuplicateCheck, plan.originalPoint, nextPoint)) {
-      continue
-    }
-
-    const { id: _id, children: _children, ...sourceWall } = plan.wall
-    const wall = WallSchema.parse({
-      ...sourceWall,
-      name: 'Wall Preview',
-      start: plan.originalPoint,
-      end: nextPoint,
-      children: [],
-      metadata: stripWallIsNewMetadata(plan.wall.metadata),
-    })
-    const ghost = {
-      id: `${plan.wall.id}:${plan.movedEndpoint}:${previews.length}`,
-      start: [...plan.originalPoint] as [number, number],
-      end: [...nextPoint] as [number, number],
-      color: getWallGhostColor(plan.wall),
-      height: plan.wall.height ?? DEFAULT_WALL_HEIGHT,
-    }
-    previews.push({ ghost, wall })
-    wallsForDuplicateCheck.push(wall)
-  }
-
-  return previews
-}
-
 function setPreviewGeometryAttributes(
   geometry: BufferGeometry,
   positions: number[],
@@ -405,8 +136,17 @@ function GhostWallPreviewMesh({ preview }: { preview: GhostWallPreview }) {
 
   return (
     <group position={[preview.start[0], 0.02, preview.start[1]]} rotation={[0, angle, 0]}>
-      <mesh frustumCulled={false} layers={EDITOR_LAYER} renderOrder={2}>
-        <primitive attach="geometry" object={geometry} />
+      <mesh
+        // Pass geometry as a prop so the mesh never renders with R3F's
+        // default empty `BufferGeometry`. With `frustumCulled={false}`,
+        // the `<primitive attach="geometry">` path emits one frame of
+        // `Draw(0, 1, 0, 0)` against an empty buffer and WebGPU flags it
+        // (see wall-move-side-handles.tsx).
+        frustumCulled={false}
+        geometry={geometry}
+        layers={EDITOR_LAYER}
+        renderOrder={2}
+      >
         <meshBasicMaterial
           color={preview.color}
           depthTest={false}
@@ -814,17 +554,6 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
           live.type === 'wall' &&
           (!samePoint(live.start, originalStartRef.current) ||
             !samePoint(live.end, originalEndRef.current))
-        // biome-ignore lint/suspicious/noConsole: temp diagnostic
-        console.log('[wall-move-3d] cleanup', {
-          nodeId,
-          originalStart: originalStartRef.current,
-          originalEnd: originalEndRef.current,
-          liveStart: live?.start,
-          liveEnd: live?.end,
-          externallyCommitted,
-          willRestore: !externallyCommitted,
-          linkedCount: linkedOriginalsRef.current.length,
-        })
         if (!externallyCommitted) {
           restoreOriginal()
         }

From 3376bc9e15cb5c2d57aa7acea21f521fb7dbbee6 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sat, 23 May 2026 00:39:54 +0530
Subject: [PATCH 05/48] door/window: R flips side, E toggles open/close
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

R previously toggled the open/closed state of operable doors and
operable windows. It now flips the opening's side (front ↔ back,
rotation += π) for both — same gesture as flipping a furniture item
that knows about handedness.

The open/close toggle moved to E, which was unbound for doors and
windows before. T is now a no-op on doors and windows so it doesn't
free-rotate a wall-bound node by π/4 (which made no architectural
sense).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/editor/src/hooks/use-keyboard.ts | 86 ++++++++++++++---------
 1 file changed, 52 insertions(+), 34 deletions(-)

diff --git a/packages/editor/src/hooks/use-keyboard.ts b/packages/editor/src/hooks/use-keyboard.ts
index e7f9146f8..33047b884 100644
--- a/packages/editor/src/hooks/use-keyboard.ts
+++ b/packages/editor/src/hooks/use-keyboard.ts
@@ -1,14 +1,14 @@
 import { type AnyNodeId, emitter, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect } from 'react'
-import { closeDoorOpenState, toggleDoorOpenState } from '../lib/door-interaction'
+import { toggleDoorOpenState } from '../lib/door-interaction'
 import { runRedo, runUndo } from '../lib/history'
 import {
   copySelectedNodesToEditorClipboard,
   pasteEditorClipboardToLevel,
 } from '../lib/scene-clipboard'
 import { sfxEmitter } from '../lib/sfx-bus'
-import { closeWindowOpenState, toggleWindowOpenState } from '../lib/window-interaction'
+import { toggleWindowOpenState } from '../lib/window-interaction'
 import useEditor from '../store/use-editor'
 
 // Tools call this in their onCancel handler when they have an active mid-action to cancel,
@@ -173,29 +173,33 @@ export const useKeyboard = ({
         }
       } else if ((e.key === 'r' || e.key === 'R') && !isVersionPreviewMode) {
         // Rotate selected node clockwise if it supports rotation (items, roofs, etc.)
-        // Operable doors/windows use R to toggle their open/closed state.
+        // Doors use R to flip side (front ↔ back, rotation += π); their
+        // open/close toggle lives on E. Windows still use R to toggle
+        // their open/closed state.
         const selectedNodeIds = useViewer.getState().selection.selectedIds as AnyNodeId[]
         if (selectedNodeIds.length === 1) {
           const node = useScene.getState().nodes[selectedNodeIds[0]!]
           if (node?.type === 'door') {
             e.preventDefault()
-            if (node.openingKind !== 'opening') {
-              toggleDoorOpenState(node.id)
-              sfxEmitter.emit('sfx:item-rotate')
+            useScene.getState().updateNode(node.id, {
+              side: node.side === 'front' ? 'back' : 'front',
+              rotation: [node.rotation[0], node.rotation[1] + Math.PI, node.rotation[2]],
+            })
+            if (node.parentId) {
+              useScene.getState().dirtyNodes.add(node.parentId as AnyNodeId)
             }
-          } else if (
-            node?.type === 'window' &&
-            node.openingKind !== 'opening' &&
-            (node.windowType === 'sliding' ||
-              node.windowType === 'casement' ||
-              node.windowType === 'awning' ||
-              node.windowType === 'hopper' ||
-              node.windowType === 'single-hung' ||
-              node.windowType === 'double-hung' ||
-              node.windowType === 'louvered')
-          ) {
+            sfxEmitter.emit('sfx:item-rotate')
+          } else if (node?.type === 'window') {
+            // Windows: R flips side (front ↔ back, rotation += π). Open/
+            // close toggle for operable windows lives on E.
             e.preventDefault()
-            toggleWindowOpenState(node.id)
+            useScene.getState().updateNode(node.id, {
+              side: node.side === 'front' ? 'back' : 'front',
+              rotation: [node.rotation[0], node.rotation[1] + Math.PI, node.rotation[2]],
+            })
+            if (node.parentId) {
+              useScene.getState().dirtyNodes.add(node.parentId as AnyNodeId)
+            }
             sfxEmitter.emit('sfx:item-rotate')
           } else if (node && 'rotation' in node) {
             e.preventDefault()
@@ -218,11 +222,37 @@ export const useKeyboard = ({
         if (selectedNodeIds.length === 1) {
           const node = useScene.getState().nodes[selectedNodeIds[0]!]
           if (node?.type === 'door') {
+            // Door's open/close moved to E; T is a no-op for doors so
+            // it doesn't free-rotate a wall-bound node by π/4.
+            e.preventDefault()
+          } else if (node?.type === 'window') {
+            // Window's open/close moved to E; T is a no-op so it doesn't
+            // free-rotate a wall-bound node by π/4.
             e.preventDefault()
-            if (node.openingKind !== 'opening') {
-              closeDoorOpenState(node.id)
-              sfxEmitter.emit('sfx:item-rotate')
+          } else if (node && 'rotation' in node) {
+            e.preventDefault()
+            const ROTATION_STEP = Math.PI / 4
+
+            if (typeof node.rotation === 'number') {
+              useScene.getState().updateNode(node.id, { rotation: node.rotation - ROTATION_STEP })
+            } else if (Array.isArray(node.rotation)) {
+              useScene.getState().updateNode(node.id, {
+                rotation: [node.rotation[0], node.rotation[1] - ROTATION_STEP, node.rotation[2]],
+              })
             }
+            sfxEmitter.emit('sfx:item-rotate')
+          }
+        }
+      } else if ((e.key === 'e' || e.key === 'E') && !isVersionPreviewMode) {
+        // Toggle door / operable-window open/closed state. Moved off R,
+        // which now flips the opening (side + π rotation).
+        const selectedNodeIds = useViewer.getState().selection.selectedIds as AnyNodeId[]
+        if (selectedNodeIds.length === 1) {
+          const node = useScene.getState().nodes[selectedNodeIds[0]!]
+          if (node?.type === 'door' && node.openingKind !== 'opening') {
+            e.preventDefault()
+            toggleDoorOpenState(node.id)
+            sfxEmitter.emit('sfx:item-rotate')
           } else if (
             node?.type === 'window' &&
             node.openingKind !== 'opening' &&
@@ -235,19 +265,7 @@ export const useKeyboard = ({
               node.windowType === 'louvered')
           ) {
             e.preventDefault()
-            closeWindowOpenState(node.id)
-            sfxEmitter.emit('sfx:item-rotate')
-          } else if (node && 'rotation' in node) {
-            e.preventDefault()
-            const ROTATION_STEP = Math.PI / 4
-
-            if (typeof node.rotation === 'number') {
-              useScene.getState().updateNode(node.id, { rotation: node.rotation - ROTATION_STEP })
-            } else if (Array.isArray(node.rotation)) {
-              useScene.getState().updateNode(node.id, {
-                rotation: [node.rotation[0], node.rotation[1] - ROTATION_STEP, node.rotation[2]],
-              })
-            }
+            toggleWindowOpenState(node.id)
             sfxEmitter.emit('sfx:item-rotate')
           }
         }

From c7d8edf7d5933d9072d8a876d8142defbf62dc06 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sat, 23 May 2026 00:40:00 +0530
Subject: [PATCH 06/48] door/window: keep 2D plan in sync during placement drag
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

While drafting a door or window across the same host wall, the tool
was bypassing the scene store and mutating the Three.js mesh
directly. That kept 3D snappy but left the 2D floor plan reading the
last committed position — drafts froze in place on the 2D side during
a same-wall drag.

Route same-wall moves back through \`updateNode\` so 2D and 3D both
re-render from a single source. The reparent path (cross-wall drag)
still uses \`updateNode\` with \`parentId\` and \`wallId\` — we only
avoid forwarding those fields when the wall hasn't changed so the
host wall's \`children\` array doesn't churn each tick and trigger a
WebGPU "Vertex buffer slot 0 ... was not set" warning from the
briefly re-rendered placeholder geometry.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/nodes/src/door/tool.tsx   | 27 ++++++++++++++++-----------
 packages/nodes/src/window/tool.tsx | 27 ++++++++++++++++-----------
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/packages/nodes/src/door/tool.tsx b/packages/nodes/src/door/tool.tsx
index 69c0ce871..85cb6431f 100644
--- a/packages/nodes/src/door/tool.tsx
+++ b/packages/nodes/src/door/tool.tsx
@@ -154,8 +154,22 @@ const DoorTool: React.FC = () => {
       const { clampedX, clampedY } = clampToWall(event.node, localX, width, height)
 
       if (draftRef.current) {
-        if (event.node.id !== draftRef.current.parentId) {
-          // Wall changed without enter/leave: must updateNode to reparent
+        // Update the scene store on every move so the 2D floor plan
+        // stays in sync (it re-renders from `node.position`). Only
+        // forward `parentId` / `wallId` when the wall actually changed
+        // — otherwise the reparent path churns the host wall's
+        // `children` array every tick, which re-renders the wall and
+        // briefly draws its 0-vertex placeholder geometry (WebGPU then
+        // flags "Vertex buffer slot 0 ... was not set").
+        const isSameWall = event.node.id === draftRef.current.parentId
+        if (isSameWall) {
+          useScene.getState().updateNode(draftRef.current.id, {
+            position: [clampedX, clampedY, 0],
+            rotation: [0, itemRotation, 0],
+            side,
+          })
+          markWallDirty(event.node.id)
+        } else {
           useScene.getState().updateNode(draftRef.current.id, {
             position: [clampedX, clampedY, 0],
             rotation: [0, itemRotation, 0],
@@ -163,15 +177,6 @@ const DoorTool: React.FC = () => {
             parentId: event.node.id,
             wallId: event.node.id,
           })
-        } else {
-          // Same wall: update Three.js mesh directly to avoid store churn
-          const draftMesh = sceneRegistry.nodes.get(draftRef.current.id as AnyNodeId)
-          if (draftMesh) {
-            draftMesh.position.set(clampedX, clampedY, 0)
-            draftMesh.rotation.set(0, itemRotation, 0)
-            draftMesh.updateMatrixWorld(true)
-          }
-          markWallDirty(event.node.id)
         }
       }
 
diff --git a/packages/nodes/src/window/tool.tsx b/packages/nodes/src/window/tool.tsx
index be3263979..c0b7b5285 100644
--- a/packages/nodes/src/window/tool.tsx
+++ b/packages/nodes/src/window/tool.tsx
@@ -162,8 +162,22 @@ const WindowTool: React.FC = () => {
       const { clampedX, clampedY } = clampToWall(event.node, localX, localY, width, height)
 
       if (draftRef.current) {
-        if (event.node.id !== draftRef.current.parentId) {
-          // Wall changed without enter/leave: must updateNode to reparent
+        // Update the scene store on every move so the 2D floor plan
+        // stays in sync (it re-renders from `node.position`). Only
+        // forward `parentId` / `wallId` when the wall actually changed
+        // — otherwise the reparent path churns the host wall's
+        // `children` array every tick, which re-renders the wall and
+        // briefly draws its 0-vertex placeholder geometry (WebGPU then
+        // flags "Vertex buffer slot 0 ... was not set").
+        const isSameWall = event.node.id === draftRef.current.parentId
+        if (isSameWall) {
+          useScene.getState().updateNode(draftRef.current.id, {
+            position: [clampedX, clampedY, 0],
+            rotation: [0, itemRotation, 0],
+            side,
+          })
+          markWallDirty(event.node.id)
+        } else {
           useScene.getState().updateNode(draftRef.current.id, {
             position: [clampedX, clampedY, 0],
             rotation: [0, itemRotation, 0],
@@ -171,15 +185,6 @@ const WindowTool: React.FC = () => {
             parentId: event.node.id,
             wallId: event.node.id,
           })
-        } else {
-          // Same wall: update Three.js mesh directly to avoid store churn
-          const draftMesh = sceneRegistry.nodes.get(draftRef.current.id as AnyNodeId)
-          if (draftMesh) {
-            draftMesh.position.set(clampedX, clampedY, 0)
-            draftMesh.rotation.set(0, itemRotation, 0)
-            draftMesh.updateMatrixWorld(true)
-          }
-          markWallDirty(event.node.id)
         }
       }
 

From 1d872d87398a157d2c92be380214a7f023cc0945 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sat, 23 May 2026 00:40:08 +0530
Subject: [PATCH 07/48] floor-plan: live wall-draft measurement + opening
 placement event order
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two changes to the floor-plan panel:

  1. Length + angle labels render alongside the wall draft in 2D,
     matching the 3D \`WallTool\` feedback. Length sits at the segment
     midpoint with a plate that flips when its on-screen orientation
     would read upside-down; angle arcs anchor at each endpoint that
     meets an existing wall and label the deviation from that wall's
     direction.

  2. The pointer-move handler ran the registry catch-all
     (\`isFloorplanGridInteractionActive\`) before the opening-placement
     branch. Door and window are registered kinds, so during their
     build mode the catch-all emitted \`grid:move\` and returned —
     starving the \`wall:enter\` / \`wall:move\` events the placement
     tools listen for. Reorder so opening placement runs first; the
     wall-build skip in the catch-all is preserved.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/editor/floorplan-panel.tsx | 280 +++++++++++++++++-
 1 file changed, 267 insertions(+), 13 deletions(-)

diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index 448560272..d27416772 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -97,6 +97,12 @@ import {
   DEFAULT_STAIR_THICKNESS,
   DEFAULT_STAIR_WIDTH,
 } from '../tools/stair/stair-defaults'
+import {
+  formatAngleRadians,
+  getAngleArcToSegmentReference,
+  getAngleToSegmentReference,
+  getSegmentAngleReferenceAtPoint,
+} from '../tools/shared/segment-angle'
 import {
   createWallOnCurrentLevel,
   isWallLongEnough,
@@ -2026,6 +2032,167 @@ 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]
 }
@@ -4846,6 +5013,74 @@ export function FloorplanPanel() {
     // Keep the live draft preview cheap; full level-wide mitering here runs on every mouse move.
     return getWallPlanFootprint(draftWall, EMPTY_WALL_MITER_DATA)
   }, [draftEnd, draftStart, levelId])
+  // Live length + angle feedback for the wall draft — parity with the 3D
+  // `WallTool` (`packages/nodes/src/wall/tool.tsx`), ported to 2D plan
+  // space. Length renders at the segment midpoint; angle arcs sit at
+  // each endpoint that meets an existing wall.
+  const draftWallMeasurement = useMemo(() => {
+    if (!(isWallBuildActive && draftStart && draftEnd && isWallLongEnough(draftStart, draftEnd))) {
+      return null
+    }
+
+    const dx = draftEnd[0] - draftStart[0]
+    const dy = draftEnd[1] - draftStart[1]
+    const length = Math.hypot(dx, dy)
+
+    const draftFromStart: WallPlanPoint = [dx, dy]
+    const draftFromEnd: WallPlanPoint = [-dx, -dy]
+    const endpoints = [
+      { id: 'start', point: draftStart, draftVector: draftFromStart },
+      { id: 'end', point: draftEnd, draftVector: draftFromEnd },
+    ] as const
+
+    type AngleLabel = {
+      id: string
+      label: string
+      center: WallPlanPoint
+      radius: number
+      startAngle: number
+      endAngle: number
+      midAngle: number
+    }
+
+    const angleLabels: AngleLabel[] = []
+    for (const endpoint of endpoints) {
+      const connectedWall = walls.find((wall) =>
+        Boolean(getSegmentAngleReferenceAtPoint(endpoint.point, wall)),
+      )
+      if (!connectedWall) continue
+      const ref = getSegmentAngleReferenceAtPoint(endpoint.point, connectedWall)
+      if (!ref) continue
+
+      const angle = getAngleToSegmentReference(endpoint.draftVector, ref)
+      if (angle === null) continue
+      const arc = getAngleArcToSegmentReference(endpoint.draftVector, ref)
+      if (!arc || arc.angle < 0.01) continue
+
+      const refLen = Math.hypot(ref.vector[0], ref.vector[1])
+      const radius = Math.max(0.32, Math.min(0.72, Math.min(length, refLen) * 0.28))
+
+      angleLabels.push({
+        id: endpoint.id,
+        label: formatAngleRadians(angle),
+        center: endpoint.point,
+        radius,
+        startAngle: arc.startAngle,
+        endAngle: arc.endAngle,
+        midAngle: arc.midAngle,
+      })
+    }
+
+    return {
+      lengthLabel: formatMeasurement(length, unit),
+      midpoint: [
+        (draftStart[0] + draftEnd[0]) / 2,
+        (draftStart[1] + draftEnd[1]) / 2,
+      ] as WallPlanPoint,
+      direction: [dx / length, dy / length] as WallPlanPoint,
+      angleLabels,
+    }
+  }, [draftEnd, draftStart, isWallBuildActive, unit, walls])
   const draftPolygonPoints = useMemo(() => {
     if (isRoofBuildActive && roofDraftStart && roofDraftEnd) {
       const minX = Math.min(roofDraftStart[0], roofDraftEnd[0])
@@ -7073,19 +7308,14 @@ export function FloorplanPanel() {
         return
       }
 
-      // Wall build also needs to run before the catch-all — see the
-      // wall branch in `handleBackgroundPlacementClick` for the same
-      // restructuring. The wall branch lives further below in this
-      // handler (`if (!isWallBuildActive) ... setDraftEnd(...)`); the
-      // grid emit is inlined there.
-      if (!isWallBuildActive && isFloorplanGridInteractionActive) {
-        const snappedPoint = emitFloorplanGridEvent('move', planPoint, event)
-        setCursorPoint((previousPoint) =>
-          previousPoint && pointsEqual(previousPoint, snappedPoint) ? previousPoint : snappedPoint,
-        )
-        return
-      }
-
+      // Opening placement (door / window build, plus door / window move)
+      // must run before the registry catch-all: door & window are
+      // registered kinds, so `isRegistryToolBuildActive` is true during
+      // their build mode and the catch-all would otherwise emit
+      // `grid:move` and return — never emitting the `wall:enter` /
+      // `wall:move` events the door / window placement tools listen for.
+      // Same reason `handleBackgroundPlacementClick` runs its opening
+      // branch before its grid catch-all.
       if (isOpeningPlacementActive) {
         const closest = findClosestWallPoint(planPoint, walls, {
           canUseWall: (wall) => !isCurvedWall(wall),
@@ -7120,6 +7350,19 @@ export function FloorplanPanel() {
         return
       }
 
+      // Registry-driven catch-all for kinds without bespoke 2D handling
+      // (shelf, etc.). Must run AFTER the opening branch above (door /
+      // window are also registered kinds, but need wall events — see
+      // comment there). Wall build skips this so its own branch below
+      // updates local `draftEnd` state alongside the registry tool.
+      if (!isWallBuildActive && isFloorplanGridInteractionActive) {
+        const snappedPoint = emitFloorplanGridEvent('move', planPoint, event)
+        setCursorPoint((previousPoint) =>
+          previousPoint && pointsEqual(previousPoint, snappedPoint) ? previousPoint : snappedPoint,
+        )
+        return
+      }
+
       if (isMarqueeSelectionToolActive) {
         setCursorPoint((previousPoint) => {
           const snappedPoint = getSnappedFloorplanPoint(planPoint)
@@ -8714,6 +8957,17 @@ export function FloorplanPanel() {
                 unitsPerPixel={floorplanUnitsPerPixel}
               />
 
+              {draftWallMeasurement && (
+                <FloorplanDraftWallMeasurement
+                  labelBackground={theme === 'dark' ? '#0f172a' : '#ffffff'}
+                  labelText={theme === 'dark' ? '#e2e8f0' : '#171717'}
+                  measurement={draftWallMeasurement}
+                  measurementStroke={palette.measurementStroke}
+                  sceneRotationDeg={floorplanSceneRotationDeg}
+                  unitsPerPixel={floorplanUnitsPerPixel}
+                />
+              )}
+
               {/* Wall / fence endpoint, wall curve, slab / ceiling /
                   zone vertex+midpoint+edge handles are all driven by the
                   registry's `def.floorplanAffordances` and rendered as

From c3c94bd8cfbae78764a48581e54421232bb4a8e7 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sat, 23 May 2026 00:40:15 +0530
Subject: [PATCH 08/48] wall: pass geometry as prop on move arrow handles

R3F's \`<primitive attach="geometry">\` path emits a \`Draw(0, 1, 0, 0)\`
on the first frame because the host \`<mesh>\` briefly renders with the
default empty \`BufferGeometry\` before the primitive child attaches.
Combined with \`frustumCulled={false}\`, WebGPU flagged "Vertex buffer
slot 0 ... was not set" every time a wall or fence was selected and
the move arrows mounted.

Pass \`arrowGeometry\` as a prop on the \`<mesh>\` so it's never
mounted with the default placeholder. Same fix applied to both the
wall and fence move-arrow handles.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../editor/wall-move-side-handles.tsx           | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
index 8019db2fa..d619b9fdb 100644
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -215,7 +215,13 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
   return (
     <group position={handle.position} rotation={[0, handle.rotationY, 0]} scale={scale}>
       <mesh
+        // Pass geometry as a prop (not `<primitive attach="geometry">`)
+        // so the mesh is never rendered with R3F's default empty
+        // `BufferGeometry`. Combined with `frustumCulled={false}`, the
+        // primitive-attach path emits a `Draw(0, 1, 0, 0)` on the first
+        // frame and WebGPU flags "Vertex buffer slot 0 ... was not set".
         frustumCulled={false}
+        geometry={arrowGeometry}
         material={arrowMaterial}
         onPointerDown={activateWallMove}
         onPointerEnter={(event) => {
@@ -231,9 +237,7 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
           }
         }}
         renderOrder={1002}
-      >
-        <primitive attach="geometry" object={arrowGeometry} />
-      </mesh>
+      />
     </group>
   )
 }
@@ -289,7 +293,10 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
   return (
     <group position={handle.position} rotation={[0, handle.rotationY, 0]} scale={scale}>
       <mesh
+        // Pass geometry as a prop — see WallMoveArrowHandle for the
+        // WebGPU "Vertex buffer slot 0 ... was not set" rationale.
         frustumCulled={false}
+        geometry={arrowGeometry}
         material={arrowMaterial}
         onPointerDown={activateFenceMove}
         onPointerEnter={(event) => {
@@ -305,9 +312,7 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
           }
         }}
         renderOrder={1002}
-      >
-        <primitive attach="geometry" object={arrowGeometry} />
-      </mesh>
+      />
     </group>
   )
 }

From 21caac84e4d40efbde8bdcf58dc21335e5375724 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sat, 23 May 2026 00:40:22 +0530
Subject: [PATCH 09/48] ifc-converter: regenerate next-env.d.ts after Next
 route path move

Next.js moved the generated routes typings from
\`./.next/dev/types/routes.d.ts\` to \`./.next/types/routes.d.ts\` in
the current version pinned by the workspace. Regenerated via
\`next typegen\` so the project compiles against the right path.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/ifc-converter/next-env.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ifc-converter/next-env.d.ts b/apps/ifc-converter/next-env.d.ts
index c4b7818fb..9edff1c7c 100644
--- a/apps/ifc-converter/next-env.d.ts
+++ b/apps/ifc-converter/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

From 4382fb51adc9cfe10ad54c41bde319cbd0c27a36 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sat, 23 May 2026 01:47:59 +0530
Subject: [PATCH 10/48] move: track which view finalised so split-view cleanups
 don't race
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In split view, both the 2D move overlay and the 3D move tool mount
for the same \`movingNode\` and each captures its own pre-drag
snapshot. When one side finalises (commit or Esc), the other side
unmounts because \`setMovingNode(null)\` propagates — and its effect
cleanup had to *guess* whether the live scene was already-committed
state (skip restore) or its own drag's uncommitted state (revert).

Both cleanups did this via the same heuristic: diff snapshot fields
against current scene state. Cheap, but it conflates "the other side
committed" with "the user's apply() actually changed something" —
and fails outright if a commit happens to land on the same numeric
values as the snapshot.

Replace the heuristic with an explicit \`movingNodeOrigin\` state
field: '2d' | '3d' | null. The finalising side sets its origin
before \`setMovingNode(null)\` runs; the other side's cleanup reads
it. \`movingNodeOrigin\` is preserved across \`setMovingNode(null)\`
(so it's still observable when the cleanup fires) and reset the
next time a non-null \`setMovingNode\` starts a fresh drag.

Wired on the wall move-tool (3D) and \`FloorplanRegistryMoveOverlay\`
(2D) — the two real call sites today. Other 3D move tools can adopt
the same flag incrementally as their own split-view races surface.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../floorplan-registry-move-overlay.tsx       | 63 +++++++++----------
 packages/editor/src/store/use-editor.tsx      | 32 +++++++++-
 packages/nodes/src/wall/move-tool.tsx         | 24 ++++---
 3 files changed, 76 insertions(+), 43 deletions(-)

diff --git a/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx b/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx
index d60159ee5..da4a6a2bf 100644
--- a/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx
+++ b/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx
@@ -41,6 +41,7 @@ const GRID_STEP = 0.5
 export function FloorplanRegistryMoveOverlay() {
   const movingNode = useEditor((s) => s.movingNode)
   const setMovingNode = useEditor((s) => s.setMovingNode)
+  const setMovingNodeOrigin = useEditor((s) => s.setMovingNodeOrigin)
 
   const def = movingNode ? nodeRegistry.get(movingNode.type) : null
   const isActive = !!movingNode && !!def?.floorplan
@@ -141,6 +142,13 @@ export function FloorplanRegistryMoveOverlay() {
       const commitFinalStateOrRevert = () => {
         const commitValid = session.canCommit()
 
+        // Claim ownership of the drag teardown so the 3D move tool's
+        // unmount-time cleanup skips its restore-from-snapshot — see
+        // `movingNodeOrigin` in `use-editor.tsx`. Set here (before any
+        // `setMovingNode(null)`) so that by the time the 3D effect's
+        // cleanup runs the origin is observable in the store.
+        setMovingNodeOrigin('2d')
+
         // Sessions with a `commit` hook own their atomic write (e.g.
         // wall move emits creates + deletes + updates via the junction
         // planner). For those we still do Phase 1 (revert to baseline)
@@ -280,6 +288,10 @@ export function FloorplanRegistryMoveOverlay() {
 
       const onKey = (event: KeyboardEvent) => {
         if (event.key !== 'Escape') return
+        // 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.
+        setMovingNodeOrigin('2d')
         // Revert untracked, then resume — no history entry.
         useScene.getState().updateNodes(snapshotsToUpdates(snapshots))
         if (historyPaused) {
@@ -305,43 +317,26 @@ export function FloorplanRegistryMoveOverlay() {
         window.removeEventListener('pointermove', onMove)
         window.removeEventListener('pointerup', onPointerUp)
         window.removeEventListener('keydown', onKey)
-        // Unmount cleanup. Two scenarios when `historyPaused === true`:
-        //
-        //  - User did at least one 2D apply (`hasMovedSinceStart`) but
-        //    never committed — likely a mid-drag unmount. Revert the
-        //    untracked writes so we don't leak partial state.
-        //  - No 2D apply happened. The legacy `MoveItemContent` (3D
-        //    mover) may have committed via `draftNode.commit` just
-        //    before this unmount; clobbering that with a blind revert
-        //    is the bug — both the rotation and position issues. Skip
-        //    the revert and just resume history.
+        // 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.
         //
-        // Additionally, in split view the user may have brushed the
-        // cursor over the floor plan (setting `hasMovedSinceStart`)
-        // and then committed via a 3D mover. The 3D commit writes the
-        // new state to `scene` directly, so by the time this cleanup
-        // runs `snapshots` no longer matches scene state. Reverting
-        // here would stomp the 3D commit. Detect the case by
-        // comparing snapshot fields to current scene state — if they
-        // already differ, an external committer has finalised, leave
-        // it alone.
+        // If `movingNodeOrigin === '3d'`, a 3D move tool finalised
+        // while our overlay was still mounted (split view); the live
+        // scene IS the committed state and reverting would stomp it.
+        // Otherwise (origin is `null` or `'2d'`) we own the teardown
+        // and revert any untracked apply() writes back to baseline.
         //
-        // Normal 2D commit / Escape paths set `historyPaused = false`
-        // inside `commitFinalStateOrRevert` / `onKey`, so this branch
-        // is skipped there.
+        // The two prior scenarios this block guarded against:
+        //   - mid-drag unmount with apply() writes still present
+        //   - 3D mover committing via `draftNode.commit` just before
+        //     our unmount
+        // are now distinguished by the origin flag — no scene-state
+        // diff heuristic required.
         if (historyPaused) {
           if (hasMovedSinceStart) {
-            const currentNodes = useScene.getState().nodes
-            const externallyCommitted = snapshots.some((snap) => {
-              const current = currentNodes[snap.id]
-              if (!current) return false
-              for (const [key, before] of Object.entries(snap.data)) {
-                const after = (current as unknown as Record<string, unknown>)[key]
-                if (!deepEqual(before, after)) return true
-              }
-              return false
-            })
-            if (!externallyCommitted) {
+            const finalisedBy3D = useEditor.getState().movingNodeOrigin === '3d'
+            if (!finalisedBy3D) {
               useScene.getState().updateNodes(snapshotsToUpdates(snapshots))
             }
           }
@@ -427,7 +422,7 @@ export function FloorplanRegistryMoveOverlay() {
       window.removeEventListener('keydown', onKey)
       entry.removeAttribute('transform')
     }
-  }, [isActive, movingNode, setMovingNode, hasMoveTarget, def])
+  }, [isActive, movingNode, setMovingNode, setMovingNodeOrigin, hasMoveTarget, def])
 
   return null
 }
diff --git a/packages/editor/src/store/use-editor.tsx b/packages/editor/src/store/use-editor.tsx
index ef6631e61..a0a8b2491 100644
--- a/packages/editor/src/store/use-editor.tsx
+++ b/packages/editor/src/store/use-editor.tsx
@@ -188,6 +188,25 @@ type EditorState = {
       | BuildingNode
       | null,
   ) => void
+  /**
+   * Which view (2D floor plan or 3D viewer) most recently completed
+   * the active move — set by the committing or cancelling side just
+   * before clearing `movingNode`. Lets the *other* side's effect
+   * cleanup skip its own restore-from-snapshot when the drag was
+   * already finalised elsewhere (split view mounts both the 2D
+   * overlay and the 3D move tool for the same `movingNode`).
+   *
+   * Reset to null when the next non-null `setMovingNode` starts a
+   * fresh drag (so stale values from the previous drag don't poison
+   * cleanups). Preserved across `setMovingNode(null)` so the
+   * non-owning side's cleanup — which fires after the clear
+   * propagates — can still read who finalised. Null while a drag
+   * is in progress means "no side has claimed it yet" — both
+   * cleanups then restore to their pre-drag snapshot, which is the
+   * same baseline, so the result is idempotent.
+   */
+  movingNodeOrigin: '2d' | '3d' | null
+  setMovingNodeOrigin: (origin: '2d' | '3d' | null) => void
   movingWallEndpoint: MovingWallEndpoint | null
   setMovingWallEndpoint: (value: MovingWallEndpoint | null) => void
   movingFenceEndpoint: MovingFenceEndpoint | null
@@ -597,7 +616,18 @@ const useEditor = create<EditorState>()(
         | StairSegmentNode
         | BuildingNode
         | null,
-      setMovingNode: (node) => set({ movingNode: node }),
+      setMovingNode: (node) =>
+        set(
+          node === null
+            ? // Preserve `movingNodeOrigin` across the clear so the
+              // non-owning side's effect cleanup — which fires after
+              // `setMovingNode(null)` propagates — can still read who
+              // finalised. The next non-null `setMovingNode` resets it.
+              { movingNode: null }
+            : { movingNode: node, movingNodeOrigin: null },
+        ),
+      movingNodeOrigin: null as '2d' | '3d' | null,
+      setMovingNodeOrigin: (origin) => set({ movingNodeOrigin: origin }),
       movingWallEndpoint: null,
       setMovingWallEndpoint: (value) => set({ movingWallEndpoint: value }),
       movingFenceEndpoint: null,
diff --git a/packages/nodes/src/wall/move-tool.tsx b/packages/nodes/src/wall/move-tool.tsx
index a1ee10c11..8a471c78d 100644
--- a/packages/nodes/src/wall/move-tool.tsx
+++ b/packages/nodes/src/wall/move-tool.tsx
@@ -38,7 +38,6 @@ import {
   getLinkedWallSnapshots,
   getWallsAfterUpdates,
   type LinkedWallSnapshot,
-  samePoint,
   stripWallIsNewMetadata,
 } from './move-shared'
 
@@ -486,6 +485,11 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
 
       pauseSceneHistory(useScene)
 
+      // Claim teardown ownership so the 2D overlay's cleanup skips its
+      // own revert when split-view has both mounted — see
+      // `movingNodeOrigin` in `use-editor.tsx`.
+      useEditor.getState().setMovingNodeOrigin('3d')
+
       triggerSFX('sfx:item-place')
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
       exitMoveMode()
@@ -537,6 +541,9 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
       resumeSceneHistory(useScene)
       markToolCancelConsumed()
+      // Claim teardown ownership so the 2D overlay doesn't redundantly
+      // revert the same baseline on its own cleanup.
+      useEditor.getState().setMovingNodeOrigin('3d')
       exitMoveMode()
     }
 
@@ -548,13 +555,14 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
 
     return () => {
       if (shouldRestoreOnCleanup) {
-        const live = useScene.getState().nodes[nodeId] as WallNode | undefined
-        const externallyCommitted =
-          !!live &&
-          live.type === 'wall' &&
-          (!samePoint(live.start, originalStartRef.current) ||
-            !samePoint(live.end, originalEndRef.current))
-        if (!externallyCommitted) {
+        // `shouldRestoreOnCleanup` is only true if neither `onGridClick`
+        // nor `onCancel` ran in this tool — i.e., the unmount came from
+        // outside (typically the 2D overlay finalising in split view).
+        // The origin flag tells us whether the 2D side committed (skip
+        // restore — its write is the live state) or the unmount has no
+        // claimed owner (restore to baseline).
+        const finalisedBy2D = useEditor.getState().movingNodeOrigin === '2d'
+        if (!finalisedBy2D) {
           restoreOriginal()
         }
       }

From 36358da6c716cdf6ad64cfd4fe09611e12149f08 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sat, 23 May 2026 02:56:36 +0530
Subject: [PATCH 11/48] wall: 2D drag publishes to useLiveNodeOverrides,
 zustand only on commit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Side-arrow / corner-dot / curve-handle drags in the 2D floor plan now
publish `{ start, end, curveOffset }` to `useLiveNodeOverrides` each
tick instead of writing to `useScene`. WallSystem, the 2D registry
layer, and the wall sidebar all merge the overrides in when reading
endpoints, so the visual + slider preview tracks the cursor while
zustand stays at the pre-drag values until pointer-up. Commit writes
one tracked `applyNodeChanges` (junction-aware) and clears the
overrides; Esc / pointercancel / mid-drag unmount also clear them.

Also bundles the in-progress branch work this depends on:
 - FloorplanAffordanceSession gains optional `commit?()` mirror of the
   move-target hook; the dispatcher reverts → resumes → calls it
   when present (vs. its default snapshot-diff dance).
 - Selected wall body is now pointer-events-inert (polygon
   `pointerEvents: 'none'` + hit-line skipped) so only the arrows /
   endpoint dots / curve dot start a drag.
 - Move button removed from the 2D floating action menu and the wall
   sidebar inspector for walls — redundant with the side-arrows.
 - `useWallMoveGhosts` store + `FloorplanWallMoveGhostLayer` for the
   dashed bridge previews painted mid-drag.
 - WebGPU "Vertex buffer slot 0 ... was not set" fixes on grid +
   guide renderer + wall draft preview by passing geometry as a
   prop (same pattern as wall-move-side-handles).
 - Floor-plan wall-tool fallback: when the 3D wall tool's
   `grid:click` already committed the wall, treat
   `createWallOnCurrentLevel` returning null as "the 3D side handled
   it" and chain the next draft segment instead of clearing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/core/src/registry/types.ts           |  48 +++++++-
 .../floorplan-registry-action-menu.tsx        |  10 +-
 .../floorplan-registry-move-overlay.tsx       |  38 +++++--
 .../floorplan-wall-move-ghost-layer.tsx       |  47 ++++++++
 .../renderers/floorplan-geometry-renderer.tsx |   2 +
 .../renderers/floorplan-registry-layer.tsx    |  95 ++++++++++++++--
 .../src/components/editor/floorplan-panel.tsx |  51 ++++++---
 .../editor/src/components/editor/grid.tsx     |  19 +++-
 packages/editor/src/index.tsx                 |   2 +
 .../editor/src/store/use-wall-move-ghosts.ts  |  36 ++++++
 packages/nodes/src/guide/renderer.tsx         |  30 +++--
 .../nodes/src/wall/floorplan-affordances.ts   |  79 +++++++++++---
 packages/nodes/src/wall/floorplan-move.ts     | 103 +++++++++++++++---
 packages/nodes/src/wall/floorplan.ts          |  29 +++--
 packages/nodes/src/wall/panel.tsx             |  42 ++++---
 packages/nodes/src/wall/tool.tsx              |  14 ++-
 .../viewer/src/systems/wall/wall-system.tsx   |  36 +++++-
 17 files changed, 563 insertions(+), 118 deletions(-)
 create mode 100644 packages/editor/src/components/editor-2d/floorplan-wall-move-ghost-layer.tsx
 create mode 100644 packages/editor/src/store/use-wall-move-ghosts.ts

diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index 5629e73c5..fcc150e3f 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -146,6 +146,16 @@ export type FloorplanStyle = {
   strokeLinejoin?: 'miter' | 'round' | 'bevel'
   strokeOpacity?: number
   fillOpacity?: number
+  /**
+   * SVG `pointer-events`. Default (undefined) lets the renderer pick its
+   * normal behaviour — `visiblePainted` for filled shapes, `stroke` for
+   * line / hit-line. Set `'none'` to make a primitive completely
+   * passthrough — useful for chrome that should be visible but never
+   * trigger selection or drag (e.g. a wall's body once it's already
+   * selected, where only the side-arrows / corner handles should grab
+   * the pointer).
+   */
+  pointerEvents?: 'none' | 'auto' | 'all' | 'stroke' | 'fill' | 'visible' | 'visiblePainted'
 }
 
 // ─── ToolHint ────────────────────────────────────────────────────────
@@ -272,6 +282,12 @@ export type FloorplanGeometry =
       /** Stroke width in screen pixels — converted to plan units by the dispatcher. */
       strokeWidthPx: number
       cursor?: string
+      /**
+       * Override the default `pointer-events="stroke"`. Use `'none'` when
+       * a kind wants to keep the line painted (for hit-debugging or layout
+       * stability) but route grabs through other affordances instead.
+       */
+      pointerEvents?: 'none' | 'stroke' | 'auto'
     }
   /**
    * Endpoint manipulation handle — the 5-circle stack from the legacy
@@ -431,20 +447,40 @@ export type FloorplanAffordanceSession = {
   /** Node IDs the drag may mutate. Used by the dispatcher for the snapshot. */
   affectedIds: AnyNodeId[]
   /**
-   * Run a single drag tick. Implementations call `scene.updateNodes` to
-   * preview the next position. Snap logic, linked-node cascade, and
-   * angle locking live here.
+   * Run a single drag tick. Two patterns are supported:
+   *  - **Scene-write preview**: implementation calls `scene.updateNodes`
+   *    each tick; the dispatcher captures a pre-drag snapshot and runs
+   *    a single-undo dance on commit (revert → resume → re-apply diff).
+   *    Suitable for affordances whose commit is a pure diff of the
+   *    affected fields.
+   *  - **Live-override preview**: implementation publishes per-frame
+   *    overrides to `useLiveNodeOverrides` (or another preview store);
+   *    `useScene` stays untouched during the drag. The session must
+   *    also expose `commit()` below, since there's no scene diff for
+   *    the dispatcher to write back.
+   *
+   * Snap logic, linked-node cascade, and angle locking live here.
    */
   apply(args: {
     planPoint: FloorplanAffordancePoint
     modifiers: FloorplanAffordanceModifiers
   }): void
   /**
-   * Called on pointer-up. Return `true` if the scene's current state
-   * should be committed; `false` reverts to the snapshot (e.g. wall too
-   * short, vertex collapsed onto neighbour).
+   * Called on pointer-up. Return `true` if the drag should commit;
+   * `false` reverts to the snapshot (e.g. wall too short, vertex
+   * collapsed onto neighbour).
    */
   canCommit(): boolean
+  /**
+   * Optional atomic-commit hook — mirror of the same field on
+   * `FloorplanMoveTargetSession`. When present, the dispatcher
+   * reverts to the pre-drag baseline (no-op if `apply()` never wrote
+   * to scene), resumes history, then calls `commit()` instead of
+   * re-applying a diff. The session owns the full final write
+   * (typically `applyNodeChanges` or `updateNodes`) plus clearing any
+   * live overrides it published in `apply()`.
+   */
+  commit?(): void
 }
 
 export type FloorplanAffordance<N> = {
diff --git a/packages/editor/src/components/editor-2d/floorplan-registry-action-menu.tsx b/packages/editor/src/components/editor-2d/floorplan-registry-action-menu.tsx
index 988fb2a58..318fa66ea 100644
--- a/packages/editor/src/components/editor-2d/floorplan-registry-action-menu.tsx
+++ b/packages/editor/src/components/editor-2d/floorplan-registry-action-menu.tsx
@@ -29,6 +29,8 @@ import { NodeActionMenu } from '../editor/node-action-menu'
  *    `capabilities.movable`, `def.floorplanMoveTarget`, OR
  *    `def.affordanceTools.move` (slab / ceiling). The
  *    `<FloorplanRegistryMoveOverlay>` / dispatcher picks the right path.
+ *    Walls are excluded — their move is reached via the side-arrow
+ *    handles emitted from `def.floorplan`, not via a menu button.
  *  - Add hole (slab + ceiling only): inserts a small default-square
  *    hole at the polygon centroid via `updateNode`. Mirrors the legacy
  *    `handleAddHole` in `floating-action-menu.tsx`.
@@ -87,8 +89,14 @@ export function FloorplanRegistryActionMenu() {
   //   - `def.affordanceTools.move` (kind-owned 3D mover — slab / ceiling)
   // From the menu's perspective all three are "this kind can move from
   // the floor plan." The `MoveTool` dispatcher resolves the right path.
+  //
+  // Walls opt out: they expose move via the side-arrow handles emitted
+  // from `def.floorplan` (see `buildWallFloorplan`), so a menu button
+  // would be a redundant second entry point — and lets the user start a
+  // body-follow drag from anywhere, which we don't want for walls.
   const canMove =
-    !!def.capabilities.movable || !!def.floorplanMoveTarget || !!def.affordanceTools?.move
+    node.type !== 'wall' &&
+    (!!def.capabilities.movable || !!def.floorplanMoveTarget || !!def.affordanceTools?.move)
   const canDuplicate = def.capabilities.duplicable !== false
   const canDelete = def.capabilities.deletable !== false
   const canAddHole = node.type === 'slab' || node.type === 'ceiling'
diff --git a/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx b/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx
index da4a6a2bf..26f298474 100644
--- a/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx
+++ b/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx
@@ -8,6 +8,7 @@ import {
   pauseSceneHistory,
   resumeSceneHistory,
   snapPointToGrid,
+  useLiveNodeOverrides,
   useLiveTransforms,
   useScene,
 } from '@pascal-app/core'
@@ -15,6 +16,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { useEffect } from 'react'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
+import { useWallMoveGhosts } from '../../store/use-wall-move-ghosts'
 
 const GRID_STEP = 0.5
 
@@ -298,12 +300,17 @@ export function FloorplanRegistryMoveOverlay() {
           resumeSceneHistory(useScene)
           historyPaused = false
         }
-        // Clear any live-transform previews the session wrote (slab /
-        // ceiling 2D move stages a translation delta in
-        // `useLiveTransforms`; without this clear, escape leaves the
-        // 2D layer rendering the polygon at the cancelled delta).
+        // Clear any live previews the session wrote. Slab / ceiling
+        // 2D move stages a translation delta in `useLiveTransforms`;
+        // wall move publishes `{ start, end, ... }` to
+        // `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) {
-          useLiveTransforms.getState().clear(id)
+          liveTransforms.clear(id)
+          liveOverrides.clear(id)
         }
         // Restore selection cleared by the action menu's Move click.
         useViewer.getState().setSelection({ selectedIds: snapshots.map((s) => s.id) })
@@ -342,14 +349,23 @@ export function FloorplanRegistryMoveOverlay() {
           }
           resumeSceneHistory(useScene)
         }
-        // Belt-and-suspenders: clear any live-transform previews on
-        // abnormal unmount paths too. Slab / ceiling sessions write
-        // `useLiveTransforms` to drive the smooth drag visual; in pure
-        // 2D view the 3D `MoveSlabTool` cleanup isn't there to clear
-        // it for us.
+        // Belt-and-suspenders: clear any live previews on abnormal
+        // unmount paths too. Slab / ceiling sessions write to
+        // `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) {
-          useLiveTransforms.getState().clear(id)
+          liveTransforms.clear(id)
+          liveOverrides.clear(id)
         }
+        // Same belt-and-suspenders pattern for the wall bridge ghost
+        // previews — clear unconditionally so Esc / mid-drag unmount /
+        // 3D-takeover paths all end up with no stale ghosts left over.
+        // The wall session's `commit()` already clears them on the
+        // happy path; this just covers the rest.
+        useWallMoveGhosts.getState().clear()
       }
     }
 
diff --git a/packages/editor/src/components/editor-2d/floorplan-wall-move-ghost-layer.tsx b/packages/editor/src/components/editor-2d/floorplan-wall-move-ghost-layer.tsx
new file mode 100644
index 000000000..3e4d4255a
--- /dev/null
+++ b/packages/editor/src/components/editor-2d/floorplan-wall-move-ghost-layer.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { memo } from 'react'
+import { useWallMoveGhosts } from '../../store/use-wall-move-ghosts'
+
+/**
+ * Renders translucent dashed previews of bridge walls that the wall
+ * junction planner will insert on commit. Mirrors the 3D
+ * `GhostWallPreviewMesh` so 2D and 3D show the same intent mid-drag.
+ *
+ * Subscribes to `useWallMoveGhosts.bridges`; writes happen inside
+ * `wallFloorplanMoveTarget.apply` (cleared on `commit` and by the move
+ * overlay's unmount cleanup as a safety net).
+ */
+export const FloorplanWallMoveGhostLayer = memo(function FloorplanWallMoveGhostLayer() {
+  const bridges = useWallMoveGhosts((s) => s.bridges)
+
+  if (bridges.length === 0) return null
+
+  return (
+    <g pointerEvents="none">
+      {bridges.map((bridge) => {
+        // Draw the bridge as a thick stroke at the wall's plan-space
+        // thickness — same convention as the actual wall renderer.
+        // Dashes scale with thickness so they read consistently no
+        // matter the wall size or viewport zoom (no `non-scaling-stroke`
+        // here; we want the line to be N meters thick, not N pixels).
+        const dash = bridge.thickness * 1.4
+        const gap = bridge.thickness * 0.9
+        return (
+          <line
+            key={bridge.id}
+            opacity={0.45}
+            stroke={bridge.color}
+            strokeDasharray={`${dash} ${gap}`}
+            strokeLinecap="butt"
+            strokeWidth={bridge.thickness}
+            x1={bridge.start[0]}
+            x2={bridge.end[0]}
+            y1={bridge.start[1]}
+            y2={bridge.end[1]}
+          />
+        )
+      })}
+    </g>
+  )
+})
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx
index 890f5eaae..b3b203931 100644
--- a/packages/editor/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx
@@ -46,6 +46,7 @@ function styleAttrs(g: FloorplanGeometry & { kind: Exclude<FloorplanGeometry['ki
     strokeOpacity?: number
     opacity?: number
     vectorEffect?: 'non-scaling-stroke'
+    pointerEvents?: string
   }
   return {
     fill: s.fill ?? 'none',
@@ -58,6 +59,7 @@ function styleAttrs(g: FloorplanGeometry & { kind: Exclude<FloorplanGeometry['ki
     strokeOpacity: s.strokeOpacity,
     opacity: s.opacity,
     vectorEffect: s.vectorEffect,
+    pointerEvents: s.pointerEvents,
   }
 }
 
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
index 6dbf631ab..11fa832e0 100644
--- a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
@@ -247,7 +247,29 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
             }
           }
         }
-        const ctx = buildContext(effectiveNode, nodes, {
+        // Wall live-overrides: the 2D drag handlers publish
+        // `{ start, end, curveOffset }` to `useLiveNodeOverrides` so
+        // the visual preview tracks the cursor without writing to
+        // zustand. The wall builder reads `ctx.siblings` for miter
+        // joins, so we also merge overrides into other walls in the
+        // same level via a per-builder `nodes` view below.
+        if (node.type === 'wall') {
+          const wallOverride = liveOverrides.get(id)
+          if (wallOverride && Object.keys(wallOverride).length > 0) {
+            effectiveNode = { ...node, ...wallOverride } as AnyNode
+          }
+        }
+        // For walls, expose an override-merged copy of `nodes` so
+        // `buildContext`'s sibling list (and the linked-wall miter
+        // calculation it feeds) reflects the live cursor positions.
+        // For every other kind we hand the raw `nodes` through —
+        // override-merging an entire scene per tick would be wasteful
+        // when only walls care about sibling state.
+        const contextNodes =
+          node.type === 'wall' && liveOverrides.size > 0
+            ? mergeWallOverridesIntoNodes(nodes, liveOverrides)
+            : nodes
+        const ctx = buildContext(effectiveNode, contextNodes, {
           selected,
           highlighted,
           hovered,
@@ -284,6 +306,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
     levelId,
     nodes,
     liveTransforms,
+    liveOverrides,
     selectedIdSet,
     highlightedIdSet,
     hoveredId,
@@ -377,6 +400,25 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
 
       const commitValid = drag.session.canCommit()
 
+      // Sessions with a `commit` hook own their atomic write (e.g.
+      // affordances that publish to `useLiveNodeOverrides` during
+      // `apply()` and never touch scene mid-drag). Mirrors the move
+      // overlay's `session.commit` path — revert untracked (no-op when
+      // the session never wrote to scene), resume history, then let
+      // the session do the tracked write.
+      if (commitValid && drag.session.commit) {
+        useScene.getState().updateNodes(snapshotsToUpdates(drag.snapshots))
+        if (drag.historyPaused) {
+          resumeSceneHistory(useScene)
+          drag.historyPaused = false
+        }
+        drag.session.commit()
+        sfxEmitter.emit('sfx:structure-build')
+        dragRef.current = null
+        setActiveDragId(null)
+        return
+      }
+
       // Capture the final state BEFORE the revert so we know what to
       // re-apply post-resume.
       const sceneNodes = useScene.getState().nodes
@@ -410,12 +452,16 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
         sfxEmitter.emit('sfx:structure-build')
       } else {
         // Either no net change or canCommit() rejected — revert and
-        // resume without committing.
+        // resume without committing. Also clear any live overrides
+        // the session published (no-op when the session writes to
+        // scene directly).
         useScene.getState().updateNodes(snapshotsToUpdates(drag.snapshots))
         if (drag.historyPaused) {
           resumeSceneHistory(useScene)
           drag.historyPaused = false
         }
+        const overrides = useLiveNodeOverrides.getState()
+        for (const id of drag.session.affectedIds) overrides.clear(id)
       }
 
       dragRef.current = null
@@ -432,6 +478,12 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
         resumeSceneHistory(useScene)
         drag.historyPaused = false
       }
+      // Drop any live overrides the session may have published. No-op
+      // for affordances whose `apply()` writes straight to scene; the
+      // override-routed sessions (wall endpoint, wall curve) rely on
+      // this to revert cleanly.
+      const overrides = useLiveNodeOverrides.getState()
+      for (const id of drag.session.affectedIds) overrides.clear(id)
 
       dragRef.current = null
       setActiveDragId(null)
@@ -445,13 +497,17 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       window.removeEventListener('pointerup', onPointerUp)
       window.removeEventListener('pointercancel', onPointerCancel)
       // Component unmounted mid-drag — restore the baseline and unpause
-      // history so we don't leak a paused store across mounts.
+      // history so we don't leak a paused store across mounts. Also
+      // drop any live overrides the session published so the next
+      // mount doesn't render at the cancelled position.
       const drag = dragRef.current
       if (drag) {
         useScene.getState().updateNodes(snapshotsToUpdates(drag.snapshots))
         if (drag.historyPaused) {
           resumeSceneHistory(useScene)
         }
+        const overrides = useLiveNodeOverrides.getState()
+        for (const id of drag.session.affectedIds) overrides.clear(id)
         dragRef.current = null
       }
     }
@@ -609,7 +665,7 @@ function InteractiveGeometry({
         return (
           <line
             key={keyHint}
-            pointerEvents="stroke"
+            pointerEvents={g.pointerEvents ?? 'stroke'}
             stroke="transparent"
             strokeLinecap="round"
             strokeWidth={g.strokeWidthPx * unitsPerPixel}
@@ -836,9 +892,7 @@ function InteractiveGeometry({
             <path
               d={arrowD}
               fill="transparent"
-              onPointerDown={(e) =>
-                onMoveHandlePointerDown(e as ReactPointerEvent<SVGGElement>)
-              }
+              onPointerDown={(e) => onMoveHandlePointerDown(e as ReactPointerEvent<SVGGElement>)}
               pointerEvents="all"
               style={{ cursor: 'move' }}
             />
@@ -1200,6 +1254,33 @@ function InteractiveGeometry({
 
 // ── Helpers ──────────────────────────────────────────────────────────
 
+/**
+ * Returns a copy of `nodes` where any wall with a live override has
+ * `{ start, end, curveOffset, ... }` merged in. Used by the wall
+ * branch of the registry builder so `ctx.siblings` (which feeds
+ * `calculateLevelMiters`) reflects the live cursor positions during a
+ * 2D drag, not the pre-drag scene state.
+ *
+ * Only wall entries are touched; every other node is shared by
+ * reference. The allocation cost is one shallow object per overridden
+ * wall — the override map is small (the moved wall + its linked
+ * neighbours), so this is cheap.
+ */
+function mergeWallOverridesIntoNodes(
+  nodes: Record<string, AnyNode>,
+  overrides: Map<string, Record<string, unknown>>,
+): Record<string, AnyNode> {
+  if (overrides.size === 0) return nodes
+  const out: Record<string, AnyNode> = { ...nodes }
+  for (const [id, override] of overrides) {
+    const existing = out[id]
+    if (!existing || existing.type !== 'wall') continue
+    if (Object.keys(override).length === 0) continue
+    out[id] = { ...existing, ...override } as AnyNode
+  }
+  return out
+}
+
 function buildContext(
   node: AnyNode,
   nodes: Record<string, AnyNode>,
diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index d27416772..bfc2dc86b 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -81,6 +81,7 @@ import {
   type FloorplanRenderContextValue,
   FloorplanRenderProvider,
 } from '../editor-2d/floorplan-render-context'
+import { FloorplanWallMoveGhostLayer } from '../editor-2d/floorplan-wall-move-ghost-layer'
 import { FloorplanDraftLayer } from '../editor-2d/renderers/floorplan-draft-layer'
 import { FloorplanMarqueeLayer } from '../editor-2d/renderers/floorplan-marquee-layer'
 import { FloorplanRegistryLayer } from '../editor-2d/renderers/floorplan-registry-layer'
@@ -88,6 +89,12 @@ import { FloorplanStairLayer } from '../editor-2d/renderers/floorplan-stair-laye
 import { buildSvgPolylinePath, formatPolygonPath, getArcPlanPoint } from '../editor-2d/svg-paths'
 import { snapFenceDraftPoint } from '../tools/fence/fence-drafting'
 import { snapToHalf } from '../tools/item/placement-math'
+import {
+  formatAngleRadians,
+  getAngleArcToSegmentReference,
+  getAngleToSegmentReference,
+  getSegmentAngleReferenceAtPoint,
+} from '../tools/shared/segment-angle'
 import {
   DEFAULT_STAIR_ATTACHMENT_SIDE,
   DEFAULT_STAIR_FILL_TO_FLOOR,
@@ -97,12 +104,6 @@ import {
   DEFAULT_STAIR_THICKNESS,
   DEFAULT_STAIR_WIDTH,
 } from '../tools/stair/stair-defaults'
-import {
-  formatAngleRadians,
-  getAngleArcToSegmentReference,
-  getAngleToSegmentReference,
-  getSegmentAngleReferenceAtPoint,
-} from '../tools/shared/segment-angle'
 import {
   createWallOnCurrentLevel,
   isWallLongEnough,
@@ -2073,7 +2074,8 @@ function FloorplanDraftWallMeasurement({
   // 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
+  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
@@ -7588,21 +7590,30 @@ export function FloorplanPanel() {
         return
       }
 
+      // The 3D wall tool's `grid:click` listener
+      // (`packages/nodes/src/wall/tool.tsx`) owns the wall-create
+      // call. `emitFloorplanGridEvent('click', …)` in
+      // `useFloorplanBackgroundPlacement` fires it synchronously
+      // just before this callback runs, so by the time we get here
+      // the wall already exists in the scene.
+      //
+      // We still attempt the create as a fallback in case the 3D
+      // tool isn't mounted (unusual — both views are always
+      // mounted today, but defensive). When the wall already
+      // exists `createWallOnCurrentLevel` returns null via its
+      // duplicate-detection branch; we treat that as "the 3D side
+      // committed" and chain the draft state forward instead of
+      // clearing it (the previous behaviour caused the 2nd-segment
+      // draft to silently break after click 2).
       const createdWall = createWallOnCurrentLevel(draftStart, point)
-      if (!createdWall) {
-        clearDraft()
-        return
-      }
-      // Continuous drafting: next wall starts where this one ended,
-      // matching the 3D wall tool (`packages/nodes/src/wall/tool.tsx`).
-      // Escape / double-click / tool switch still exits via the
-      // existing handlers.
-      const nextStart: WallPlanPoint = [createdWall.end[0], createdWall.end[1]]
+      const nextStart: WallPlanPoint = createdWall
+        ? [createdWall.end[0], createdWall.end[1]]
+        : point
       setDraftStart(nextStart)
       setDraftEnd(nextStart)
       setCursorPoint(nextStart)
     },
-    [clearDraft, draftStart],
+    [draftStart],
   )
   const { getFloorplanHitIdAtPoint, getFloorplanSelectionIdsInBounds } = useFloorplanHitTesting({
     ceilingPolygons: displayCeilingPolygons,
@@ -8906,6 +8917,12 @@ export function FloorplanPanel() {
                     would create a measure→fit→measure loop. */}
                 <g ref={floorplanContentRef}>
                   <FloorplanRegistryLayer />
+                  {/* Bridge-wall ghost previews painted on top of the
+                      registry layer (drag-time only); cleared by the
+                      wall move's `commit()` so real bridges replace
+                      them without a frame of overlap. See
+                      `floorplan-wall-move-ghost-layer.tsx`. */}
+                  <FloorplanWallMoveGhostLayer />
                 </g>
               </FloorplanRenderProvider>
               {/* Cursor-driven placement ghost for movingNode when the
diff --git a/packages/editor/src/components/editor/grid.tsx b/packages/editor/src/components/editor/grid.tsx
index f39ccf7e9..b1776eb49 100644
--- a/packages/editor/src/components/editor/grid.tsx
+++ b/packages/editor/src/components/editor/grid.tsx
@@ -4,7 +4,7 @@ import { emitter, type GridEvent, sceneRegistry } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useFrame } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { MathUtils, type Mesh, Vector2 } from 'three'
+import { MathUtils, type Mesh, PlaneGeometry, Vector2 } from 'three'
 import { color, float, fract, fwidth, mix, positionLocal, uniform } from 'three/tsl'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { useGridEvents } from '../../hooks/use-grid-events'
@@ -147,15 +147,26 @@ export const Grid = ({
 
   const showGrid = useViewer((state) => state.showGrid)
 
+  // Pass the geometry as a prop instead of a JSX child so the mesh
+  // is never reconciled with R3F's empty placeholder `BufferGeometry`.
+  // Combined with the grid's `MeshBasicNodeMaterial`, the child-attach
+  // path can submit a `Draw(0, 1, 0, 0)` on the first frame before
+  // `<planeGeometry>` attaches — which WebGPU flags as "Vertex buffer
+  // slot 0 ... was not set" (see `wall-move-side-handles.tsx`).
+  const geometry = useMemo(
+    () => new PlaneGeometry(fadeDistance * 2, fadeDistance * 2),
+    [fadeDistance],
+  )
+  useEffect(() => () => geometry.dispose(), [geometry])
+
   return (
     <mesh
+      geometry={geometry}
       layers={EDITOR_LAYER}
       material={material}
       ref={gridRef}
       rotation-x={-Math.PI / 2}
       visible={showGrid}
-    >
-      <planeGeometry args={[fadeDistance * 2, fadeDistance * 2]} />
-    </mesh>
+    />
   )
 }
diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx
index 43054b723..facf4aece 100644
--- a/packages/editor/src/index.tsx
+++ b/packages/editor/src/index.tsx
@@ -152,6 +152,7 @@ export {
   type FloorplanStairArrowEntry,
   type FloorplanStairEntry,
   type FloorplanStairSegmentEntry,
+  getFloorplanWallThickness,
 } from './lib/floorplan'
 export {
   buildRoofSurfaceMaterialPatch,
@@ -186,3 +187,4 @@ export {
   usePaletteViewRegistry,
 } from './store/use-palette-view-registry'
 export { useUploadStore } from './store/use-upload'
+export { useWallMoveGhosts, type WallMoveGhostBridge } from './store/use-wall-move-ghosts'
diff --git a/packages/editor/src/store/use-wall-move-ghosts.ts b/packages/editor/src/store/use-wall-move-ghosts.ts
new file mode 100644
index 000000000..09f93f76c
--- /dev/null
+++ b/packages/editor/src/store/use-wall-move-ghosts.ts
@@ -0,0 +1,36 @@
+import { create } from 'zustand'
+
+/**
+ * Ephemeral preview state for wall move's bridge walls.
+ *
+ * When the user drags a wall whose corner neighbours are off-axis to
+ * the move direction, the junction planner emits a `bridgePlan` for
+ * each — a new wall that would be inserted between the original and
+ * new corner on commit. The 3D `MoveWallTool` already renders these
+ * as translucent ghost meshes mid-drag; the 2D `wallFloorplanMoveTarget`
+ * writes here so the floor-plan SVG layer can render the same hint.
+ *
+ * Writer: `packages/nodes/src/wall/floorplan-move.ts` (on each `apply`,
+ * cleared on `commit` and by the move overlay's cleanup).
+ * Reader: `packages/editor/src/components/editor-2d/floorplan-wall-move-ghost-layer.tsx`.
+ */
+export type WallMoveGhostBridge = {
+  id: string
+  start: [number, number]
+  end: [number, number]
+  /** Plan-space thickness already passed through `getFloorplanWallThickness`. */
+  thickness: number
+  color: string
+}
+
+type WallMoveGhostsState = {
+  bridges: WallMoveGhostBridge[]
+  setBridges: (bridges: WallMoveGhostBridge[]) => void
+  clear: () => void
+}
+
+export const useWallMoveGhosts = create<WallMoveGhostsState>((set) => ({
+  bridges: [],
+  setBridges: (bridges) => set({ bridges }),
+  clear: () => set({ bridges: [] }),
+}))
diff --git a/packages/nodes/src/guide/renderer.tsx b/packages/nodes/src/guide/renderer.tsx
index 23c32b55e..b950bd12a 100644
--- a/packages/nodes/src/guide/renderer.tsx
+++ b/packages/nodes/src/guide/renderer.tsx
@@ -3,8 +3,8 @@
 import { type GuideNode, useRegistry } from '@pascal-app/core'
 import { useAssetUrl, useViewer } from '@pascal-app/viewer'
 import { useLoader } from '@react-three/fiber'
-import { Suspense, useMemo, useRef } from 'react'
-import { DoubleSide, type Group, type Texture, TextureLoader } from 'three'
+import { Suspense, useEffect, useMemo, useRef } from 'react'
+import { DoubleSide, type Group, PlaneGeometry, type Texture, TextureLoader } from 'three'
 import { float, texture } from 'three/tsl'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 
@@ -34,7 +34,13 @@ export const GuideRenderer = ({ node }: { node: GuideNode }) => {
 const GuidePlane = ({ url, scale, opacity }: { url: string; scale: number; opacity: number }) => {
   const tex = useLoader(TextureLoader, url) as Texture
 
-  const { width, height, material } = useMemo(() => {
+  // Pass the geometry as a prop. JSX-child `<planeGeometry>` plus
+  // `frustumCulled={false}` lets the mesh submit a first-frame draw
+  // with R3F's empty placeholder BufferGeometry before the child
+  // attaches — WebGPU then flags "Vertex buffer slot 0 required by
+  // [RenderPipeline renderPipeline_MeshBasicNodeMaterial_NNNN] was
+  // not set." Same fix as wall-move-side-handles.tsx / grid.tsx.
+  const { geometry, material } = useMemo(() => {
     const img = tex.image as HTMLImageElement | ImageBitmap
     const w = img.width || 1
     const h = img.height || 1
@@ -54,18 +60,28 @@ const GuidePlane = ({ url, scale, opacity }: { url: string; scale: number; opaci
       depthWrite: false,
     })
 
-    return { width: planeWidth, height: planeHeight, material: mat }
+    const geom = new PlaneGeometry(planeWidth, planeHeight)
+    geom.boundingBox = null
+    geom.boundingSphere = null
+
+    return { geometry: geom, material: mat }
   }, [tex, scale, opacity])
+  useEffect(
+    () => () => {
+      geometry.dispose()
+      material.dispose()
+    },
+    [geometry, material],
+  )
 
   return (
     <mesh
       frustumCulled={false}
+      geometry={geometry}
       material={material}
       raycast={() => {}}
       rotation={[-Math.PI / 2, 0, 0]}
-    >
-      <planeGeometry args={[width, height]} boundingBox={null} boundingSphere={null} />
-    </mesh>
+    />
   )
 }
 
diff --git a/packages/nodes/src/wall/floorplan-affordances.ts b/packages/nodes/src/wall/floorplan-affordances.ts
index 50811609b..de92a3ae6 100644
--- a/packages/nodes/src/wall/floorplan-affordances.ts
+++ b/packages/nodes/src/wall/floorplan-affordances.ts
@@ -6,6 +6,7 @@ import {
   getMaxWallCurveOffset,
   getWallChordFrame,
   normalizeWallCurveOffset,
+  useLiveNodeOverrides,
   useScene,
   type WallNode,
 } from '@pascal-app/core'
@@ -29,9 +30,13 @@ import {
  *      ("linked walls").
  *   2. On each tick: snap the moving point (grid → linked-wall → angle),
  *      compute primary endpoints, and cascade matching corners onto the
- *      linked walls. Apply via `useScene.updateNodes` — the registry
- *      dispatcher pauses / resumes history around this.
- *   3. Commit if the resulting wall is still long enough (legacy guard).
+ *      linked walls. Publish to `useLiveNodeOverrides` — `WallSystem`,
+ *      the 2D floor-plan layer, and the sidebar panel all merge the
+ *      overrides in when reading endpoints, so `useScene` never sees a
+ *      mid-drag write.
+ *   3. On pointer-up: the dispatcher invokes `commit()`, which writes
+ *      the final state to scene in one tracked update and clears the
+ *      overrides. `canCommit` still guards against collapsed walls.
  *
  * Alt-detach (drop linked walls) and SHIFT-free-place (skip angle snap)
  * are wired via the standard modifier flags on the session.
@@ -96,6 +101,8 @@ export const wallCurveAffordance: FloorplanAffordance<WallNode> = {
     // pointer projection along its normal changes.
     const chord = getWallChordFrame(node)
     const maxOffset = getMaxWallCurveOffset(node)
+    const wallId = node.id as AnyNodeId
+    let lastCurveOffset = node.curveOffset ?? 0
 
     return {
       affectedIds: [node.id],
@@ -121,14 +128,27 @@ export const wallCurveAffordance: FloorplanAffordance<WallNode> = {
           node,
           Math.max(-maxOffset, Math.min(maxOffset, snappedOffset)),
         )
+        lastCurveOffset = nextCurveOffset
 
-        useScene.getState().updateNodes([{ id: node.id, data: { curveOffset: nextCurveOffset } }])
+        // Publish the curve preview as a live override so renderers see
+        // it without zustand churn. Mark the wall dirty so `WallSystem`
+        // rebuilds the geometry next frame using the override-merged
+        // node.
+        useLiveNodeOverrides.getState().set(wallId, { curveOffset: nextCurveOffset })
+        useScene.getState().markDirty(wallId)
       },
       canCommit() {
         // Curve drag is always commit-eligible — the offset is already
         // clamped + normalized so we never end up in an invalid state.
         return true
       },
+      commit() {
+        // Atomic, tracked write of the final curve offset, then drop
+        // the override so the scene state is the single source of
+        // truth again.
+        useScene.getState().updateNodes([{ id: wallId, data: { curveOffset: lastCurveOffset } }])
+        useLiveNodeOverrides.getState().clear(wallId)
+      },
     }
   },
 }
@@ -143,12 +163,20 @@ export const wallMoveEndpointAffordance: FloorplanAffordance<WallNode> = {
     const linkedWalls = collectLinkedWalls(nodes, node.id, originalStart, originalEnd)
     const affectedIds: AnyNodeId[] = [node.id, ...linkedWalls.map((w) => w.id)]
 
+    // Remember the latest preview so `commit()` can write it tracked.
+    let lastPrimaryStart: WallPlanPoint = originalStart
+    let lastPrimaryEnd: WallPlanPoint = originalEnd
+    let lastLinkedUpdates: Array<{ id: AnyNodeId; start: WallPlanPoint; end: WallPlanPoint }> = []
+
     return {
       affectedIds,
       apply({ planPoint, modifiers }) {
         // Re-collect walls every tick so the snap pipeline sees fresh
         // positions (matters when the user releases + re-grabs without
-        // unmounting the layer).
+        // unmounting the layer). Snap reads from scene — which holds
+        // the pre-drag positions throughout — so the linked-wall snap
+        // targets stay anchored to where corners *were*, exactly like
+        // the legacy flow.
         const sceneNodes = useScene.getState().nodes
         const walls = collectLevelWalls(sceneNodes, node.id)
         const snapped = snapWallDraftPoint({
@@ -180,21 +208,42 @@ export const wallMoveEndpointAffordance: FloorplanAffordance<WallNode> = {
                   : w.end,
             }))
 
+        lastPrimaryStart = primaryStart
+        lastPrimaryEnd = primaryEnd
+        lastLinkedUpdates = linkedUpdates
+
+        // Publish overrides instead of writing to scene. WallSystem +
+        // 2D layer + sidebar panel merge these in. Marking dirty
+        // wakes the system's `useFrame` rebuild pass.
+        const overrides = useLiveNodeOverrides.getState()
+        const sceneState = useScene.getState()
+        overrides.set(node.id as AnyNodeId, { start: primaryStart, end: primaryEnd })
+        sceneState.markDirty(node.id as AnyNodeId)
+        for (const upd of linkedUpdates) {
+          overrides.set(upd.id, { start: upd.start, end: upd.end })
+          sceneState.markDirty(upd.id)
+        }
+      },
+      canCommit() {
+        // The dragged wall must still be long enough at the preview
+        // length — checked against `lastPrimary*`, not scene, because
+        // scene holds baseline values until commit().
+        return isWallLongEnough(lastPrimaryStart, lastPrimaryEnd)
+      },
+      commit() {
+        // Atomic tracked write of the final endpoints, then drop the
+        // overrides so the scene state is the single source of truth
+        // again.
         useScene.getState().updateNodes([
-          { id: node.id, data: { start: primaryStart, end: primaryEnd } },
-          ...linkedUpdates.map((u) => ({
+          { id: node.id, data: { start: lastPrimaryStart, end: lastPrimaryEnd } },
+          ...lastLinkedUpdates.map((u) => ({
             id: u.id,
             data: { start: u.start, end: u.end },
           })),
         ])
-      },
-      canCommit() {
-        const finalWall = useScene.getState().nodes[node.id] as WallNode | undefined
-        return (
-          !!finalWall &&
-          finalWall.type === 'wall' &&
-          isWallLongEnough(finalWall.start, finalWall.end)
-        )
+        const overrides = useLiveNodeOverrides.getState()
+        overrides.clear(node.id as AnyNodeId)
+        for (const upd of lastLinkedUpdates) overrides.clear(upd.id)
       },
     }
   },
diff --git a/packages/nodes/src/wall/floorplan-move.ts b/packages/nodes/src/wall/floorplan-move.ts
index 44687d40c..d1969e73a 100644
--- a/packages/nodes/src/wall/floorplan-move.ts
+++ b/packages/nodes/src/wall/floorplan-move.ts
@@ -5,14 +5,22 @@ import {
   type FloorplanMoveTargetSession,
   getPlannedLinkedWallUpdates,
   planWallMoveJunctions,
+  useLiveNodeOverrides,
   useScene,
   type WallNode,
   type WallPlanPoint,
 } from '@pascal-app/core'
-import { isWallLongEnough, snapPointToGrid } from '@pascal-app/editor'
+import {
+  getFloorplanWallThickness,
+  isWallLongEnough,
+  snapPointToGrid,
+  useWallMoveGhosts,
+  type WallMoveGhostBridge,
+} from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
 import {
   buildBridgeWallCreates,
+  buildBridgeWallPreviews,
   getLinkedWallSnapshots,
   getWallsAfterUpdates,
   type LinkedWallSnapshot,
@@ -30,16 +38,20 @@ const GRID_STEP = 0.5
  * delete, off-axis branches stay rectilinear with a new bridge wall
  * inserted between the original and new corner.
  *
- * Tick (`apply`) — writes only updates while history is paused. Bridge
- * creates and wall deletes are deferred to commit so the live preview
- * doesn't churn the scene graph with create / delete on every cursor
- * move.
+ * Tick (`apply`) — publishes per-frame `{ start, end }` overrides to
+ * `useLiveNodeOverrides` for the moved wall + every linked wall.
+ * `useScene` stays at the pre-drag values throughout the drag; the
+ * `WallSystem` and the 2D floor-plan layer fold the overrides in when
+ * reading endpoints, so the visual preview updates without churning
+ * zustand. Bridge creates and wall deletes are still deferred to
+ * commit so the live preview doesn't churn the scene graph either.
  *
- * Commit (`commit`) — runs after the overlay reverts to baseline and
- * resumes history. Recomputes the plan at the final cursor position
+ * Commit (`commit`) — recomputes the plan at the final cursor position
  * and emits one atomic `applyNodeChanges` covering the moved walls,
  * the bridge wall creates, and the collapsed wall deletes — so a
- * single Ctrl-Z rolls the entire operation back.
+ * single Ctrl-Z rolls the entire operation back. Clears the live
+ * overrides after the write lands so the system reads from the new
+ * committed scene state.
  *
  * Auto-slab live preview and ghost bridge SVG previews — visible in
  * the 3D tool — are deliberately deferred. Slab polygons re-derive on
@@ -118,20 +130,57 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
 
       const linkedUpdates = linkedOriginals.map((wall) => {
         if (collapsedIds.has(wall.id)) {
-          return { id: wall.id as AnyNodeId, data: { start: wall.start, end: wall.end } }
+          return { id: wall.id as AnyNodeId, start: wall.start, end: wall.end }
         }
         const planned = plannedById.get(wall.id)
         if (planned) {
-          return { id: wall.id as AnyNodeId, data: { start: planned.start, end: planned.end } }
+          return { id: wall.id as AnyNodeId, start: planned.start, end: planned.end }
         }
-        return { id: wall.id as AnyNodeId, data: { start: wall.start, end: wall.end } }
+        return { id: wall.id as AnyNodeId, start: wall.start, end: wall.end }
       })
 
-      const sceneState = useScene.getState()
-      sceneState.updateNodes([
+      // Publish endpoint overrides instead of writing to `useScene`.
+      // `WallSystem` + the 2D layer + the sidebar panel all consult
+      // `useLiveNodeOverrides` first, so the visual + numeric preview
+      // updates each frame while zustand stays at the pre-drag values
+      // until the user commits.
+      const overrides = useLiveNodeOverrides.getState()
+      overrides.set(wallId, { start: nextStart, end: nextEnd })
+      for (const upd of linkedUpdates) {
+        overrides.set(upd.id, { start: upd.start, end: upd.end })
+      }
+
+      // Surface bridge-wall previews so the floor-plan SVG layer can
+      // render dashed outlines of what `commit()` will insert. Mirrors
+      // the 3D `MoveWallTool`'s `ghostWallPreviews` mesh layer. The
+      // `existingWalls` snapshot needs the post-drag layout so duplicate
+      // detection works; we synthesise it from scene state + the
+      // overrides we just published (zustand is still on baseline).
+      const previewSceneWalls = getWallsAfterUpdates(useScene.getState().nodes, [
         { id: wallId, data: { start: nextStart, end: nextEnd } },
-        ...linkedUpdates,
-      ])
+        ...linkedUpdates.map((u) => ({ id: u.id, data: { start: u.start, end: u.end } })),
+      ]).filter((wall) => !collapsedIds.has(wall.id))
+      const bridgePreviews = buildBridgeWallPreviews({
+        bridgePlans: plan.bridgePlans,
+        nextStart,
+        nextEnd,
+        existingWalls: previewSceneWalls,
+      })
+      const ghostBridges: WallMoveGhostBridge[] = bridgePreviews.map(({ ghost, wall }) => ({
+        id: ghost.id,
+        start: ghost.start,
+        end: ghost.end,
+        color: ghost.color,
+        thickness: getFloorplanWallThickness(wall),
+      }))
+      useWallMoveGhosts.getState().setBridges(ghostBridges)
+
+      // `WallSystem` only runs its rebuild pass when `dirtyNodes` is
+      // non-empty. We're not writing to scene any more, but we still
+      // need the system to pick up the live override changes — so
+      // mark dirty here. The rebuild reads the effective endpoints
+      // (override-merged) so the mesh follows the cursor.
+      const sceneState = useScene.getState()
       sceneState.markDirty(wallId)
       for (const upd of linkedUpdates) {
         sceneState.markDirty(upd.id)
@@ -148,7 +197,13 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
     commit() {
       const sceneState = useScene.getState()
       const liveWall = sceneState.nodes[wallId] as WallNode | undefined
-      if (!liveWall || liveWall.type !== 'wall') return
+      if (!liveWall || liveWall.type !== 'wall') {
+        // Bail without leaving stale overrides behind.
+        const overrides = useLiveNodeOverrides.getState()
+        overrides.clear(wallId)
+        for (const wall of linkedOriginals) overrides.clear(wall.id as AnyNodeId)
+        return
+      }
 
       const plan = planWallMoveJunctions(
         linkedOriginals,
@@ -209,6 +264,22 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
         delete: Array.from(collapsedLinkedWallIds),
       })
 
+      // Drop the live overrides now that the committed scene state
+      // matches them — leaving them around would keep the system
+      // double-merging the same values and would shadow any genuine
+      // post-commit edits to start/end. Cleared synchronously so the
+      // next frame reads the new scene state directly.
+      const overrides = useLiveNodeOverrides.getState()
+      overrides.clear(wallId)
+      for (const wall of linkedOriginals) overrides.clear(wall.id as AnyNodeId)
+
+      // Swap ghosts → real walls: the bridges we just created render
+      // through the registry layer, so the dashed previews aren't
+      // needed any more. Clearing here (instead of waiting for the
+      // overlay's unmount cleanup) avoids a one-frame flash where
+      // both ghosts and real bridges paint at the new position.
+      useWallMoveGhosts.getState().clear()
+
       useViewer.getState().setSelection({ selectedIds: [wallId] })
     },
   }
diff --git a/packages/nodes/src/wall/floorplan.ts b/packages/nodes/src/wall/floorplan.ts
index b67999c2a..5f3c2b5c8 100644
--- a/packages/nodes/src/wall/floorplan.ts
+++ b/packages/nodes/src/wall/floorplan.ts
@@ -95,6 +95,11 @@ export function buildWallFloorplan(node: WallNode, ctx: GeometryContext): Floorp
       stroke,
       strokeWidth: showSelectedChrome ? 0.03 : 0.02,
       opacity: 0.92,
+      // Once the wall is selected, the body itself stops grabbing the
+      // pointer — only the side-arrows and endpoint handles should
+      // start a drag. The polygon stays painted so the selected wall is
+      // still visible; it just doesn't catch clicks any more.
+      pointerEvents: isSelected ? 'none' : undefined,
     },
   ]
 
@@ -110,16 +115,20 @@ export function buildWallFloorplan(node: WallNode, ctx: GeometryContext): Floorp
   }
 
   // Hit-line on the centerline. Stroke width is in screen pixels so it
-  // stays clickable at any zoom.
-  children.push({
-    kind: 'hit-line',
-    x1: node.start[0],
-    y1: node.start[1],
-    x2: node.end[0],
-    y2: node.end[1],
-    strokeWidthPx: 18,
-    cursor: 'pointer',
-  })
+  // stays clickable at any zoom. Skipped while selected — the user has
+  // the side-arrows / endpoint handles by then, and leaving the hit-line
+  // live would re-introduce a "click-and-drag the wall body" path.
+  if (!isSelected) {
+    children.push({
+      kind: 'hit-line',
+      x1: node.start[0],
+      y1: node.start[1],
+      x2: node.end[0],
+      y2: node.end[1],
+      strokeWidthPx: 18,
+      cursor: 'pointer',
+    })
+  }
 
   // Endpoint handles only when the user has actively selected this wall.
   if (isSelected) {
diff --git a/packages/nodes/src/wall/panel.tsx b/packages/nodes/src/wall/panel.tsx
index bfd05d6e0..cf5927aa6 100644
--- a/packages/nodes/src/wall/panel.tsx
+++ b/packages/nodes/src/wall/panel.tsx
@@ -7,6 +7,7 @@ import {
   getMaxWallCurveOffset,
   getWallCurveLength,
   normalizeWallCurveOffset,
+  useLiveNodeOverrides,
   useScene,
   type WallNode,
 } from '@pascal-app/core'
@@ -20,19 +21,32 @@ import {
   useEditor,
 } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
-import { Move, Spline } from 'lucide-react'
-import { useCallback, useRef } from 'react'
+import { Spline } from 'lucide-react'
+import { useCallback, useMemo, useRef } from 'react'
 
 export default function WallPanel() {
   const selectedId = useViewer((s) => s.selection.selectedIds[0])
   const setSelection = useViewer((s) => s.setSelection)
-  const setMovingNode = useEditor((s) => s.setMovingNode)
   const setCurvingWall = useEditor((s) => s.setCurvingWall)
 
-  const node = useScene((s) =>
+  const sceneNode = useScene((s) =>
     selectedId ? (s.nodes[selectedId as AnyNode['id']] as WallNode | undefined) : undefined,
   )
 
+  // Live override published by the 2D drag handlers (side-arrows /
+  // corner dots / curve handle). Merged on top of the scene node so
+  // the sliders read the live `start` / `end` / `curveOffset` during
+  // a drag without zustand being touched until commit.
+  const liveOverride = useLiveNodeOverrides((s) =>
+    selectedId ? s.get(selectedId as AnyNodeId) : undefined,
+  )
+
+  const node = useMemo<WallNode | undefined>(() => {
+    if (!sceneNode) return undefined
+    if (!liveOverride || Object.keys(liveOverride).length === 0) return sceneNode
+    return { ...sceneNode, ...liveOverride } as WallNode
+  }, [sceneNode, liveOverride])
+
   // Boolean selector — re-renders only when this specific wall's child
   // composition crosses the "has a door/window/wall-item" threshold.
   const hasWallChildrenBlockingCurve = useScene((s) => {
@@ -94,13 +108,6 @@ export default function WallPanel() {
     setSelection({ selectedIds: [] })
   }, [setSelection])
 
-  const handleMove = useCallback(() => {
-    if (!node) return
-    triggerSFX('sfx:item-pick')
-    setMovingNode(node)
-    setSelection({ selectedIds: [] })
-  }, [node, setMovingNode, setSelection])
-
   const handleCurve = useCallback(() => {
     if (!node) return
     triggerSFX('sfx:item-pick')
@@ -171,18 +178,17 @@ export default function WallPanel() {
         )}
       </PanelSection>
 
-      <PanelSection title="Actions">
-        <ActionGroup>
-          <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
-          {!hasWallChildrenBlockingCurve && (
+      {!hasWallChildrenBlockingCurve && (
+        <PanelSection title="Actions">
+          <ActionGroup>
             <ActionButton
               icon={<Spline className="h-3.5 w-3.5" />}
               label="Curve"
               onClick={handleCurve}
             />
-          )}
-        </ActionGroup>
-      </PanelSection>
+          </ActionGroup>
+        </PanelSection>
+      )}
     </PanelWrapper>
   )
 }
diff --git a/packages/nodes/src/wall/tool.tsx b/packages/nodes/src/wall/tool.tsx
index d9cd7285f..b01fd6f68 100644
--- a/packages/nodes/src/wall/tool.tsx
+++ b/packages/nodes/src/wall/tool.tsx
@@ -459,7 +459,13 @@ export const WallTool: React.FC = () => {
         startingPoint.current.set(snappedStart[0], event.localPosition[1], snappedStart[1])
         endingPoint.current.copy(startingPoint.current)
         buildingState.current = 1
-        wallPreviewRef.current.visible = true
+        // Visibility is owned by `updateWallPreview` — it flips
+        // `mesh.visible` based on segment length. Setting it here
+        // (before any geometry data has been written) draws the
+        // mesh's empty `<shapeGeometry/>` placeholder, which WebGPU
+        // flags as "Vertex buffer slot 0 ... was not set" on the
+        // first frame after click. Leaving it false until the next
+        // `onGridMove` writes a real BoxGeometry skips that frame.
         setDraftMeasurement(null)
       } else if (buildingState.current === 1) {
         const snappedEnd = snapWallDraftPoint({
@@ -483,6 +489,12 @@ export const WallTool: React.FC = () => {
         endingPoint.current.copy(startingPoint.current)
         cursorRef.current?.position.copy(startingPoint.current)
         buildingState.current = 1
+        // Hide the preview until the next `onGridMove` writes the
+        // new segment's geometry. Without this the prior segment's
+        // BoxGeometry stays visible for a frame on top of the
+        // freshly-committed real wall, producing a brief
+        // double-paint at the new wall's position.
+        wallPreviewRef.current.visible = false
         setDraftMeasurement(null)
       }
     }
diff --git a/packages/viewer/src/systems/wall/wall-system.tsx b/packages/viewer/src/systems/wall/wall-system.tsx
index 8a8001dc3..2f5167ffb 100644
--- a/packages/viewer/src/systems/wall/wall-system.tsx
+++ b/packages/viewer/src/systems/wall/wall-system.tsx
@@ -16,6 +16,7 @@ import {
   resolveLevelId,
   sceneRegistry,
   spatialGridManager,
+  useLiveNodeOverrides,
   useScene,
   type WallMiterData,
   type WallNode,
@@ -332,6 +333,13 @@ const pendingAdjacentByLevel = new Map<string, Set<string>>()
 export const WallSystem = () => {
   const dirtyNodes = useScene((state) => state.dirtyNodes)
   const clearDirty = useScene((state) => state.clearDirty)
+  // Subscribe so override-only changes (no scene write) still re-run
+  // this component, which lets the gate below pick up the latest
+  // `dirtyNodes` set from the same render pass that received the
+  // override-publishing `markDirty` call. Without this, very fast
+  // drags could land an override and a markDirty in the same React
+  // tick and the next `useFrame` would still see the stale closure.
+  useLiveNodeOverrides((s) => s.overrides)
 
   useFrame(() => {
     const hasDirty = dirtyNodes.size > 0
@@ -418,7 +426,22 @@ export const WallSystem = () => {
 }
 
 /**
- * Gets all walls that belong to a level
+ * Merge any live override for a wall into the scene record. Lets the
+ * 2D move handler publish `{ start, end, curveOffset }` to
+ * `useLiveNodeOverrides` and have the geometry / miter pipeline use
+ * those values without zustand churn during the drag. When no
+ * override is set, the wall is returned unchanged.
+ */
+function getEffectiveWall(wall: WallNode): WallNode {
+  const override = useLiveNodeOverrides.getState().get(wall.id)
+  if (!override || Object.keys(override).length === 0) return wall
+  return { ...wall, ...override } as WallNode
+}
+
+/**
+ * Gets all walls that belong to a level, with any live overrides
+ * merged in so miters compute against the cursor-driven positions
+ * (not the pre-drag scene state).
  */
 function getLevelWalls(levelId: string): WallNode[] {
   const { nodes } = useScene.getState()
@@ -430,7 +453,7 @@ function getLevelWalls(levelId: string): WallNode[] {
   for (const childId of level.children) {
     const child = nodes[childId]
     if (child?.type === 'wall') {
-      walls.push(child as WallNode)
+      walls.push(getEffectiveWall(child as WallNode))
     }
   }
 
@@ -438,12 +461,15 @@ function getLevelWalls(levelId: string): WallNode[] {
 }
 
 /**
- * Updates the geometry for a single wall
+ * Updates the geometry for a single wall. Reads the effective node
+ * (override-merged) so a 2D drag visibly moves the 3D mesh without
+ * having touched `useScene` mid-drag.
  */
 function updateWallGeometry(wallId: string, miterData: WallMiterData) {
   const nodes = useScene.getState().nodes
-  const node = nodes[wallId as WallNode['id']]
-  if (!node || node.type !== 'wall') return
+  const sceneNode = nodes[wallId as WallNode['id']]
+  if (!sceneNode || sceneNode.type !== 'wall') return
+  const node = getEffectiveWall(sceneNode as WallNode)
 
   const mesh = sceneRegistry.nodes.get(wallId) as THREE.Mesh
   if (!mesh) return

From f68d0d9268fab2fb65ee002a4feaaf626b265c5c Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sat, 23 May 2026 15:58:07 +0530
Subject: [PATCH 12/48] =?UTF-8?q?wall:=20new=20in-world=20selection=20UI?=
 =?UTF-8?q?=20=E2=80=94=20side=20arrows,=20height=20handle,=20corner=20pic?=
 =?UTF-8?q?kers,=20ground=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

3D affordances for a selected wall, replacing the HTML floating pill:

  - side move arrows: thinner chevron+shaft silhouette (extruded, beveled);
    press-hold-drag-release commits on pointerup (MoveWallTool no longer
    uses grid:click)
  - height arrow above the wall midpoint, drags vertically against a
    camera-facing plane and updates wall.height live; new resizingWallHeight
    state gates camera orbit; commit plays sfx:item-place
  - corner picker per endpoint: billboarded hex disc at floor + dashed
    vertical leader cylinder; pointerdown routes to the existing
    movingWallEndpoint flow (works for 2D and 3D)
  - ground action menu (curve / duplicate / delete): three Lucide SVGs
    rendered as canvas-textured planes lying flat on the floor, anchored
    one wall thickness + clearance outside the camera-facing face; one
    rigid container moves them as a unit (auto-flips sides + rotates with
    the wall, on curved walls uses the t=0.5 curve frame)
  - floating action menu hidden for walls (replaced by the above)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/ifc-converter/next-env.d.ts              |   2 +-
 packages/core/src/registry/types.ts           |   8 +
 .../core/src/store/use-live-node-overrides.ts |  14 +
 .../renderers/floorplan-geometry-renderer.tsx |   2 +
 .../renderers/floorplan-registry-layer.tsx    |  13 +-
 .../editor/custom-camera-controls.tsx         |   8 +-
 .../editor/floating-action-menu.tsx           | 203 +-----
 .../editor/wall-move-side-handles.tsx         | 615 ++++++++++++++++--
 packages/editor/src/store/use-editor.tsx      |   4 +
 packages/nodes/src/wall/floorplan-move.ts     |  56 +-
 packages/nodes/src/wall/floorplan.ts          |  11 +-
 packages/nodes/src/wall/move-tool.tsx         |  40 +-
 12 files changed, 721 insertions(+), 255 deletions(-)

diff --git a/apps/ifc-converter/next-env.d.ts b/apps/ifc-converter/next-env.d.ts
index 9edff1c7c..c4b7818fb 100644
--- a/apps/ifc-converter/next-env.d.ts
+++ b/apps/ifc-converter/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index fcc150e3f..c69a74ca0 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -156,6 +156,14 @@ export type FloorplanStyle = {
    * the pointer).
    */
   pointerEvents?: 'none' | 'auto' | 'all' | 'stroke' | 'fill' | 'visible' | 'visiblePainted'
+  /**
+   * CSS `cursor` for the rendered primitive. Defaults to inheriting the
+   * registry entry wrapper's `cursor: 'pointer'`. Override to neutralise
+   * a hover affordance — e.g. a selected wall body that catches the
+   * pointer (to block fall-through to the slab below) but should not
+   * advertise itself as a drag target.
+   */
+  cursor?: string
 }
 
 // ─── ToolHint ────────────────────────────────────────────────────────
diff --git a/packages/core/src/store/use-live-node-overrides.ts b/packages/core/src/store/use-live-node-overrides.ts
index 04f952727..5a4ac8128 100644
--- a/packages/core/src/store/use-live-node-overrides.ts
+++ b/packages/core/src/store/use-live-node-overrides.ts
@@ -5,6 +5,7 @@ export type LiveNodeOverrides = Record<string, unknown>
 type LiveNodeOverrideState = {
   overrides: Map<string, LiveNodeOverrides>
   set(nodeId: string, values: LiveNodeOverrides): void
+  setMany(entries: ReadonlyArray<readonly [string, LiveNodeOverrides]>): void
   get(nodeId: string): LiveNodeOverrides | undefined
   clear(nodeId: string): void
   clearAll(): void
@@ -18,6 +19,19 @@ const useLiveNodeOverrides = create<LiveNodeOverrideState>((set, get) => ({
       next.set(nodeId, { ...(next.get(nodeId) ?? {}), ...values })
       return { overrides: next }
     }),
+  // Batch update — one Map clone + one zustand notification regardless
+  // of entry count, so a drag publishing to N linked walls re-renders
+  // subscribers (WallSystem, FloorplanRegistryLayer) once per tick
+  // instead of N+1 times.
+  setMany: (entries) =>
+    set((state) => {
+      if (entries.length === 0) return state
+      const next = new Map(state.overrides)
+      for (const [nodeId, values] of entries) {
+        next.set(nodeId, { ...(next.get(nodeId) ?? {}), ...values })
+      }
+      return { overrides: next }
+    }),
   get: (nodeId) => get().overrides.get(nodeId),
   clear: (nodeId) =>
     set((state) => {
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx
index b3b203931..07bdb7230 100644
--- a/packages/editor/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx
@@ -47,6 +47,7 @@ function styleAttrs(g: FloorplanGeometry & { kind: Exclude<FloorplanGeometry['ki
     opacity?: number
     vectorEffect?: 'non-scaling-stroke'
     pointerEvents?: string
+    cursor?: string
   }
   return {
     fill: s.fill ?? 'none',
@@ -60,6 +61,7 @@ function styleAttrs(g: FloorplanGeometry & { kind: Exclude<FloorplanGeometry['ki
     opacity: s.opacity,
     vectorEffect: s.vectorEffect,
     pointerEvents: s.pointerEvents,
+    style: s.cursor ? { cursor: s.cursor } : undefined,
   }
 }
 
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
index 11fa832e0..60237b381 100644
--- a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
@@ -879,21 +879,24 @@ function InteractiveGeometry({
         // accent in `floating-action-menu.tsx`.
         const fill = isHovered ? '#a5b4fc' : '#8381ed'
         const angleDeg = (g.angle * 180) / Math.PI
-        const scale = isHovered ? 1.12 : 1
+        // No hover-grow: a scaling transform would enlarge the hit area
+        // too, letting clicks just outside the visible arrow still start
+        // a drag. Hover feedback is colour-only so the click region
+        // always matches the painted arrow shape exactly.
         return (
           <g
             key={keyHint}
             onClick={(e) => e.stopPropagation()}
-            onPointerEnter={() => onHandleHoverChange(moveHandleId)}
-            onPointerLeave={() => onHandleHoverChange(null)}
-            transform={`translate(${g.point[0]} ${g.point[1]}) rotate(${angleDeg}) scale(${scale})`}
+            transform={`translate(${g.point[0]} ${g.point[1]}) rotate(${angleDeg})`}
           >
             <path d={arrowD} fill={fill} pointerEvents="none" />
             <path
               d={arrowD}
               fill="transparent"
               onPointerDown={(e) => onMoveHandlePointerDown(e as ReactPointerEvent<SVGGElement>)}
-              pointerEvents="all"
+              onPointerEnter={() => onHandleHoverChange(moveHandleId)}
+              onPointerLeave={() => onHandleHoverChange(null)}
+              pointerEvents="fill"
               style={{ cursor: 'move' }}
             />
           </g>
diff --git a/packages/editor/src/components/editor/custom-camera-controls.tsx b/packages/editor/src/components/editor/custom-camera-controls.tsx
index 5050ee4a0..95b5beab5 100644
--- a/packages/editor/src/components/editor/custom-camera-controls.tsx
+++ b/packages/editor/src/components/editor/custom-camera-controls.tsx
@@ -138,9 +138,15 @@ export const CustomCameraControls = () => {
   const movingNode = useEditor((s) => s.movingNode)
   const movingWallEndpoint = useEditor((s) => s.movingWallEndpoint)
   const movingFenceEndpoint = useEditor((s) => s.movingFenceEndpoint)
+  const resizingWallHeight = useEditor((s) => s.resizingWallHeight)
   const isBoxSelectActive = mode === 'select' && selectionTool === 'marquee'
   const isInteracting = Boolean(
-    tool || movingNode || movingWallEndpoint || movingFenceEndpoint || isBoxSelectActive,
+    tool ||
+      movingNode ||
+      movingWallEndpoint ||
+      movingFenceEndpoint ||
+      resizingWallHeight ||
+      isBoxSelectActive,
   )
   const touches = useMemo(() => {
     const twoFingerAction =
diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index d58670403..10df97cac 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -26,10 +26,8 @@ import { useViewer } from '@pascal-app/viewer'
 import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
 import { Move } from 'lucide-react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import * as THREE from 'three'
-import { MeshBasicNodeMaterial } from 'three/webgpu'
-import { EDITOR_LAYER } from '../../lib/constants'
 import { duplicateRoofSubtree } from '../../lib/roof-duplication'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import { duplicateStairSubtree } from '../../lib/stair-duplication'
@@ -64,7 +62,6 @@ export function FloatingActionMenu() {
   const movingFenceEndpoint = useEditor((s) => s.movingFenceEndpoint)
   const curvingFence = useEditor((s) => s.curvingFence)
   const setMovingNode = useEditor((s) => s.setMovingNode)
-  const setMovingWallEndpoint = useEditor((s) => s.setMovingWallEndpoint)
   const setMovingFenceEndpoint = useEditor((s) => s.setMovingFenceEndpoint)
   const setCurvingWall = useEditor((s) => s.setCurvingWall)
   const setCurvingFence = useEditor((s) => s.setCurvingFence)
@@ -74,41 +71,8 @@ export function FloatingActionMenu() {
   const groupRef = useRef<THREE.Group>(null)
   const startEndpointGroupRef = useRef<THREE.Group>(null)
   const endEndpointGroupRef = useRef<THREE.Group>(null)
-  const startCornerSphereRef = useRef<THREE.Group>(null)
-  const endCornerSphereRef = useRef<THREE.Group>(null)
-  const startVerticalRef = useRef<THREE.Mesh>(null)
-  const endVerticalRef = useRef<THREE.Mesh>(null)
   const [altPressed, setAltPressed] = useState(false)
 
-  const cornerSphereMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: '#818cf8',
-        transparent: true,
-        opacity: 0.95,
-        depthTest: false,
-        depthWrite: false,
-      }),
-    [],
-  )
-  const cornerVerticalMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: '#818cf8',
-        transparent: true,
-        opacity: 0.7,
-        depthTest: false,
-        depthWrite: false,
-      }),
-    [],
-  )
-  useEffect(() => {
-    return () => {
-      cornerSphereMaterial.dispose()
-      cornerVerticalMaterial.dispose()
-    }
-  }, [cornerSphereMaterial, cornerVerticalMaterial])
-
   // Only show for single selection of specific types
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
 
@@ -176,29 +140,22 @@ export function FloatingActionMenu() {
       const box = new THREE.Box3().setFromObject(obj)
       if (!box.isEmpty()) {
         const center = box.getCenter(new THREE.Vector3())
-        // Position above the object, with extra offset for walls/slabs to avoid covering measurement labels
+        // Position above the object. Walls get extra clearance so the menu
+        // sits above the height-resize arrow; slabs/ceilings clear their
+        // measurement labels.
         const isStructural = node && [...DELETE_ONLY_TYPES, ...HOLE_TYPES].includes(node.type)
-        const yOffset = isStructural ? 0.8 : 0.3
+        const isWall = node?.type === 'wall'
+        const yOffset = isWall ? 1 : isStructural ? 0.8 : 0.3
         groupRef.current.position.set(center.x, box.max.y + yOffset, center.z)
       }
 
-      if (node?.type === 'wall' || node?.type === 'fence') {
-        const segment = node as WallNode | FenceNode
+      if (node?.type === 'fence') {
+        const segment = node as FenceNode
         const endpointYOffset = 0.35
-        const startWorld =
-          node.type === 'wall'
-            ? obj.localToWorld(new THREE.Vector3(0, 0, 0))
-            : obj.localToWorld(new THREE.Vector3(segment.start[0], 0, segment.start[1]))
-        const endWorld =
-          node.type === 'wall'
-            ? obj.localToWorld(
-                new THREE.Vector3(
-                  Math.hypot(segment.end[0] - segment.start[0], segment.end[1] - segment.start[1]),
-                  0,
-                  0,
-                ),
-              )
-            : obj.localToWorld(new THREE.Vector3(segment.end[0], 0, segment.end[1]))
+        const startWorld = obj.localToWorld(
+          new THREE.Vector3(segment.start[0], 0, segment.start[1]),
+        )
+        const endWorld = obj.localToWorld(new THREE.Vector3(segment.end[0], 0, segment.end[1]))
 
         if (startEndpointGroupRef.current) {
           startEndpointGroupRef.current.position.set(
@@ -214,28 +171,6 @@ export function FloatingActionMenu() {
             endWorld.z,
           )
         }
-
-        if (node.type === 'wall' && !box.isEmpty()) {
-          // Wall mesh origin sits at the top; the floor is the bbox minimum.
-          const wallFloorY = box.min.y
-          // Vertical guide spans the wall height (floor → wall top).
-          const verticalHeight = box.max.y - wallFloorY
-
-          if (startCornerSphereRef.current) {
-            startCornerSphereRef.current.position.set(startWorld.x, wallFloorY, startWorld.z)
-          }
-          if (endCornerSphereRef.current) {
-            endCornerSphereRef.current.position.set(endWorld.x, wallFloorY, endWorld.z)
-          }
-          if (startVerticalRef.current && verticalHeight > 0) {
-            startVerticalRef.current.scale.y = verticalHeight
-            startVerticalRef.current.position.y = verticalHeight / 2
-          }
-          if (endVerticalRef.current && verticalHeight > 0) {
-            endVerticalRef.current.scale.y = verticalHeight
-            endVerticalRef.current.position.y = verticalHeight / 2
-          }
-        }
       }
     }
   })
@@ -291,20 +226,12 @@ export function FloatingActionMenu() {
   const handleEndpointMove = useCallback(
     (endpoint: 'start' | 'end', e: { stopPropagation: () => void }) => {
       e.stopPropagation()
-      if (!node) return
+      if (!node || node.type !== 'fence') return
       sfxEmitter.emit('sfx:item-pick')
-      if (node.type === 'wall') {
-        // Keep the wall selected throughout the drag — the floating menu
-        // already hides via the `movingWallEndpoint` guard.
-        setMovingWallEndpoint({ wall: node, endpoint })
-        return
-      }
-      if (node.type === 'fence') {
-        setMovingFenceEndpoint({ fence: node, endpoint })
-        setSelection({ selectedIds: [] })
-      }
+      setMovingFenceEndpoint({ fence: node, endpoint })
+      setSelection({ selectedIds: [] })
     },
-    [node, setMovingFenceEndpoint, setMovingWallEndpoint, setSelection],
+    [node, setMovingFenceEndpoint, setSelection],
   )
 
   const handleDuplicate = useCallback(
@@ -522,6 +449,11 @@ export function FloatingActionMenu() {
   )
     return null
 
+  // Walls now expose their actions through the in-world ground menu
+  // (`WallGroundActionMenu` in `wall-move-side-handles.tsx`). Skip the
+  // HTML floating menu for them so we don't render duplicate UI.
+  if (node?.type === 'wall') return null
+
   return (
     <group>
       <group ref={groupRef}>
@@ -535,11 +467,7 @@ export function FloatingActionMenu() {
         >
           <NodeActionMenu
             onAddHole={node && HOLE_TYPES.includes(node.type) ? handleAddHole : undefined}
-            onCurve={
-              node?.type === 'fence' || (node?.type === 'wall' && canCurveSelectedWall)
-                ? handleCurve
-                : undefined
-            }
+            onCurve={node?.type === 'fence' ? handleCurve : undefined}
             onDelete={handleDelete}
             onDuplicate={
               node &&
@@ -550,10 +478,7 @@ export function FloatingActionMenu() {
                 : undefined
             }
             onMove={
-              node &&
-              node.type !== 'wall' &&
-              node.type !== 'fence' &&
-              !DELETE_ONLY_TYPES.includes(node.type)
+              node && node.type !== 'fence' && !DELETE_ONLY_TYPES.includes(node.type)
                 ? handleMove
                 : undefined
             }
@@ -562,53 +487,7 @@ export function FloatingActionMenu() {
           />
         </Html>
       </group>
-      {node?.type === 'wall' && (
-        <>
-          <group ref={startCornerSphereRef}>
-            <mesh
-              layers={EDITOR_LAYER}
-              material={cornerSphereMaterial}
-              onPointerDown={(e) => {
-                e.stopPropagation()
-                handleEndpointMove('start', e)
-              }}
-              renderOrder={2}
-            >
-              <sphereGeometry args={[0.14, 20, 16]} />
-            </mesh>
-            <mesh
-              layers={EDITOR_LAYER}
-              material={cornerVerticalMaterial}
-              ref={startVerticalRef}
-              renderOrder={2}
-            >
-              <cylinderGeometry args={[0.008, 0.008, 1, 8]} />
-            </mesh>
-          </group>
-          <group ref={endCornerSphereRef}>
-            <mesh
-              layers={EDITOR_LAYER}
-              material={cornerSphereMaterial}
-              onPointerDown={(e) => {
-                e.stopPropagation()
-                handleEndpointMove('end', e)
-              }}
-              renderOrder={2}
-            >
-              <sphereGeometry args={[0.14, 20, 16]} />
-            </mesh>
-            <mesh
-              layers={EDITOR_LAYER}
-              material={cornerVerticalMaterial}
-              ref={endVerticalRef}
-              renderOrder={2}
-            >
-              <cylinderGeometry args={[0.008, 0.008, 1, 8]} />
-            </mesh>
-          </group>
-        </>
-      )}
-      {(node?.type === 'wall' || node?.type === 'fence') && (
+      {node?.type === 'fence' && (
         <>
           <group ref={startEndpointGroupRef}>
             <Html
@@ -617,24 +496,15 @@ export function FloatingActionMenu() {
               zIndexRange={[100, 0]}
             >
               <button
-                aria-label={node.type === 'wall' ? 'Move wall start' : 'Move fence start'}
+                aria-label="Move fence start"
                 className={`pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full border bg-background/95 shadow-lg backdrop-blur-md transition-colors ${
                   altPressed
                     ? 'border-amber-500/80 bg-amber-500/15 text-amber-100 hover:bg-amber-500/20 hover:text-white'
                     : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
                 }`}
-                onClick={
-                  node.type === 'fence' ? (e) => handleEndpointMove('start', e) : undefined
-                }
-                onPointerDown={(e) => {
-                  e.stopPropagation()
-                  if (node.type === 'wall') handleEndpointMove('start', e)
-                }}
-                title={
-                  node.type === 'wall'
-                    ? 'Move wall start (Alt to detach)'
-                    : 'Move fence start (Alt to detach)'
-                }
+                onClick={(e) => handleEndpointMove('start', e)}
+                onPointerDown={(e) => e.stopPropagation()}
+                title="Move fence start (Alt to detach)"
                 type="button"
               >
                 <Move className="h-4 w-4" />
@@ -648,24 +518,15 @@ export function FloatingActionMenu() {
               zIndexRange={[100, 0]}
             >
               <button
-                aria-label={node.type === 'wall' ? 'Move wall end' : 'Move fence end'}
+                aria-label="Move fence end"
                 className={`pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full border bg-background/95 shadow-lg backdrop-blur-md transition-colors ${
                   altPressed
                     ? 'border-amber-500/80 bg-amber-500/15 text-amber-100 hover:bg-amber-500/20 hover:text-white'
                     : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
                 }`}
-                onClick={
-                  node.type === 'fence' ? (e) => handleEndpointMove('end', e) : undefined
-                }
-                onPointerDown={(e) => {
-                  e.stopPropagation()
-                  if (node.type === 'wall') handleEndpointMove('end', e)
-                }}
-                title={
-                  node.type === 'wall'
-                    ? 'Move wall end (Alt to detach)'
-                    : 'Move fence end (Alt to detach)'
-                }
+                onClick={(e) => handleEndpointMove('end', e)}
+                onPointerDown={(e) => e.stopPropagation()}
+                title="Move fence end (Alt to detach)"
                 type="button"
               >
                 <Move className="h-4 w-4" />
diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
index d619b9fdb..28fc4a086 100644
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -9,21 +9,28 @@ import {
   isCurvedWall,
   sceneRegistry,
   useScene,
-  type WallNode,
+  WallNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { createPortal, type ThreeEvent, useThree } from '@react-three/fiber'
-import { useEffect, useMemo, useState } from 'react'
+import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   BufferGeometry,
+  CanvasTexture,
   Color,
-  ConeGeometry,
   CylinderGeometry,
   DoubleSide,
-  Float32BufferAttribute,
+  ExtrudeGeometry,
+  type Group,
   type Object3D,
   OrthographicCamera,
+  Plane,
+  Shape,
+  SRGBColorSpace,
+  Vector2,
+  Vector3,
 } from 'three'
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
@@ -32,8 +39,18 @@ const HANDLE_OFFSET = 0.42
 const HANDLE_MIN_OFFSET = 0.5
 const HANDLE_MIN_HEIGHT = 0.62
 const HANDLE_TOP_INSET = 0.08
+const HEIGHT_HANDLE_OFFSET = 0.4
+const MIN_WALL_HEIGHT = 0.5
 const ARROW_COLOR = '#8381ed'
 const ARROW_HOVER_COLOR = '#a5b4fc'
+const CORNER_HEX_RADIUS = 0.16
+const CORNER_DASH_SIZE = 0.1
+const CORNER_GAP_SIZE = 0.07
+const CORNER_DASH_THICKNESS = 0.006
+const CORNER_FLOOR_OFFSET = 0.01
+const GROUND_MENU_FACE_CLEARANCE = 0.85
+const GROUND_MENU_SPACING = 0.6
+const GROUND_ICON_LIFT = 0.015
 
 type WallMoveHandle = {
   key: string
@@ -42,40 +59,34 @@ type WallMoveHandle = {
 }
 
 function createArrowHandleGeometry() {
-  const shaft = new CylinderGeometry(0.04, 0.064, 0.25, 36)
-  const head = new ConeGeometry(0.13, 0.3, 48)
-  shaft.rotateZ(-Math.PI / 2)
-  shaft.translate(-0.085, 0, 0)
-  head.rotateZ(-Math.PI / 2)
-  head.translate(0.17, 0, 0)
-
-  const positions: number[] = []
-  const normals: number[] = []
-  const uvs: number[] = []
-
-  for (const sourceGeometry of [shaft, head]) {
-    const geometry = sourceGeometry.index ? sourceGeometry.toNonIndexed() : sourceGeometry
-    const position = geometry.getAttribute('position')
-    const normal = geometry.getAttribute('normal')
-    const uv = geometry.getAttribute('uv')
-
-    for (let index = 0; index < position.count; index += 1) {
-      positions.push(position.getX(index), position.getY(index), position.getZ(index))
-      normals.push(normal.getX(index), normal.getY(index), normal.getZ(index))
-      uvs.push(uv?.getX(index) ?? 0, uv?.getY(index) ?? 0)
-    }
-
-    if (geometry !== sourceGeometry) {
-      geometry.dispose()
-    }
-    sourceGeometry.dispose()
-  }
+  // Classic arrow silhouette — chevron head + rectangular shaft — extruded
+  // slightly so the handle reads as a 3D plate but stays visually light.
+  const shape = new Shape()
+  shape.moveTo(0.22, 0)
+  shape.lineTo(-0.04, 0.12)
+  shape.lineTo(-0.04, 0.035)
+  shape.lineTo(-0.2, 0.035)
+  shape.lineTo(-0.2, -0.035)
+  shape.lineTo(-0.04, -0.035)
+  shape.lineTo(-0.04, -0.12)
+  shape.lineTo(0.22, 0)
+
+  const geometry = new ExtrudeGeometry(shape, {
+    depth: 0.08,
+    bevelEnabled: true,
+    bevelThickness: 0.035,
+    bevelSize: 0.03,
+    bevelOffset: 0,
+    bevelSegments: 10,
+    curveSegments: 16,
+    steps: 1,
+  })
 
-  const geometry = new BufferGeometry()
-  geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
-  geometry.setAttribute('normal', new Float32BufferAttribute(normals, 3))
-  geometry.setAttribute('uv', new Float32BufferAttribute(uvs, 2))
-  geometry.setAttribute('uv2', new Float32BufferAttribute([...uvs], 2))
+  // Centre the extruded plate around y=0 and re-orient it so the depth
+  // axis points up: the chevron lies flat in the XZ plane, tip along +X,
+  // wings spread across ±Z.
+  geometry.translate(0, 0, -0.04)
+  geometry.rotateX(-Math.PI / 2)
   geometry.computeVertexNormals()
   geometry.computeBoundingSphere()
   return geometry
@@ -158,11 +169,539 @@ function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
       {handles.map((handle) => (
         <WallMoveArrowHandle handle={handle} key={handle.key} wall={wall} />
       ))}
+      <WallHeightArrowHandle wall={wall} />
+      <WallCornerLeaderHandle endpoint="start" wall={wall} />
+      <WallCornerLeaderHandle endpoint="end" wall={wall} />
+      <WallGroundActionMenuV2 wall={wall} />
     </group>,
     levelObject,
   )
 }
 
+function WallGroundActionMenuV2({ wall }: { wall: WallNode }) {
+  // Subscribe to children so the curve icon hides/shows reactively when
+  // doors / windows / wall-attached items get added or removed.
+  const canCurve = useScene((state) => {
+    return !(wall.children ?? []).some((childId) => {
+      const child = state.nodes[childId as AnyNodeId]
+      if (!child) return false
+      if (child.type === 'door' || child.type === 'window') return true
+      if (child.type === 'item') {
+        const attachTo = (child as { asset?: { attachTo?: string } }).asset?.attachTo
+        return attachTo === 'wall' || attachTo === 'wall-side'
+      }
+      return false
+    })
+  })
+
+  const menuGroupRef = useRef<Group>(null)
+
+  // For curved walls the chord midpoint is off the centerline, so using
+  // it would make the two faces unequal distances from the wall surface.
+  // Sampling the curve frame at t=0.5 gives a midpoint on the centerline
+  // plus a true perpendicular normal — flipping along that normal keeps
+  // the menu the same distance from the wall on either side.
+  const frame = isCurvedWall(wall) ? getWallCurveFrameAt(wall, 0.5) : null
+  const segLength = Math.hypot(wall.end[0] - wall.start[0], wall.end[1] - wall.start[1])
+
+  let midX: number
+  let midZ: number
+  let dirX: number
+  let dirZ: number
+  let normalX: number
+  let normalZ: number
+
+  if (frame) {
+    midX = frame.point.x
+    midZ = frame.point.y
+    normalX = frame.normal.x
+    normalZ = frame.normal.y
+    dirX = frame.normal.y
+    dirZ = -frame.normal.x
+  } else {
+    midX = (wall.start[0] + wall.end[0]) / 2
+    midZ = (wall.start[1] + wall.end[1]) / 2
+    const dx = wall.end[0] - wall.start[0]
+    const dz = wall.end[1] - wall.start[1]
+    dirX = segLength < 1e-6 ? 1 : dx / segLength
+    dirZ = segLength < 1e-6 ? 0 : dz / segLength
+    normalX = -dirZ
+    normalZ = dirX
+  }
+
+  // Offset from the wall *face* (centerline + half-thickness), so the menu
+  // always sits clearly outside the wall mesh — matches the side handle
+  // pattern.
+  const offset = getWallThickness(wall) / 2 + GROUND_MENU_FACE_CLEARANCE
+
+  // One per-frame update for the whole menu — sets the position + rotation
+  // of the container group only. Every icon is a static child inside the
+  // group, so the entire menu moves as a single unit.
+  useFrame((state) => {
+    if (!menuGroupRef.current) return
+    const dot =
+      (state.camera.position.x - midX) * normalX + (state.camera.position.z - midZ) * normalZ
+    const side = dot >= 0 ? 1 : -1
+    menuGroupRef.current.position.set(
+      midX + normalX * offset * side,
+      GROUND_ICON_LIFT,
+      midZ + normalZ * offset * side,
+    )
+    menuGroupRef.current.rotation.y = Math.atan2(-side * dirZ, side * dirX)
+  })
+
+  if (segLength < 1e-6) return null
+
+  const items: Array<'curve' | 'duplicate' | 'delete'> = []
+  if (canCurve) items.push('curve')
+  items.push('duplicate')
+  items.push('delete')
+  const centerIndex = (items.length - 1) / 2
+
+  return (
+    <group ref={menuGroupRef}>
+      {items.map((kind, index) => (
+        <WallGroundActionIconV2
+          key={kind}
+          kind={kind}
+          offsetIndex={index - centerIndex}
+          wall={wall}
+        />
+      ))}
+    </group>
+  )
+}
+
+function WallGroundActionIconV2({
+  wall,
+  kind,
+  offsetIndex,
+}: {
+  wall: WallNode
+  kind: 'curve' | 'duplicate' | 'delete'
+  offsetIndex: number
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.2 : 1) * zoom
+
+  const texture = useMemo(() => getIconTexture(kind), [kind])
+  const material = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        map: texture,
+        side: DoubleSide,
+        // `alphaTest` discards the transparent background pixels of the
+        // SVG icon outright. Without it the WebGPU node-material pipeline
+        // alpha-blends the plane as a translucent square, which is what
+        // shows up when the wall sits between the camera and the icon
+        // (because `depthTest: false` keeps the plane drawing over the
+        // wall).
+        alphaTest: 0.4,
+        transparent: true,
+        opacity: 1,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [texture],
+  )
+  useEffect(() => {
+    material.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [material, isHovered])
+  useEffect(() => () => material.dispose(), [material])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'pointer') {
+        document.body.style.cursor = ''
+      }
+    }
+  }, [])
+
+  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    sfxEmitter.emit('sfx:item-pick')
+    document.body.style.cursor = ''
+    setIsHovered(false)
+
+    if (kind === 'curve') {
+      useViewer.getState().setSelection({ selectedIds: [] })
+      useEditor.getState().setCurvingWall(wall)
+      return
+    }
+    if (kind === 'delete') {
+      sfxEmitter.emit('sfx:structure-delete')
+      useViewer.getState().setSelection({ selectedIds: [] })
+      useScene.getState().deleteNode(wall.id as AnyNodeId)
+      return
+    }
+    // duplicate
+    useScene.temporal.getState().pause()
+    const input = structuredClone(wall) as Record<string, unknown>
+    delete input.id
+    const existingMetadata =
+      input.metadata && typeof input.metadata === 'object' && !Array.isArray(input.metadata)
+        ? (input.metadata as Record<string, unknown>)
+        : {}
+    input.metadata = { ...existingMetadata, isNew: true }
+    try {
+      const dup = WallNode.parse(input)
+      useScene.getState().createNode(dup, dup.parentId as AnyNodeId)
+      useEditor.getState().setMovingNode(dup)
+    } catch (err) {
+      console.error('Failed to duplicate wall', err)
+      useScene.temporal.getState().resume()
+    }
+    useViewer.getState().setSelection({ selectedIds: [] })
+  }
+
+  return (
+    <group
+      onPointerDown={onPointerDown}
+      onPointerEnter={(event) => {
+        event.stopPropagation()
+        setIsHovered(true)
+        document.body.style.cursor = 'pointer'
+      }}
+      onPointerLeave={(event) => {
+        event.stopPropagation()
+        setIsHovered(false)
+        if (document.body.style.cursor === 'pointer') {
+          document.body.style.cursor = ''
+        }
+      }}
+      position={[offsetIndex * GROUND_MENU_SPACING, 0, 0]}
+      scale={scale}
+    >
+      <mesh material={material} renderOrder={1004} rotation={[-Math.PI / 2, 0, 0]}>
+        <planeGeometry args={[0.36, 0.36]} />
+      </mesh>
+    </group>
+  )
+}
+
+// Lucide icon paths — match the Spline / Copy / Trash2 icons the HTML
+// floating menu uses. Stroke is white so material.color can tint them.
+const ICON_SVGS: Record<'curve' | 'duplicate' | 'delete', string> = {
+  curve: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="19" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><path d="M5 17A12 12 0 0 1 17 5"/></svg>`,
+  duplicate: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
+  delete: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
+}
+
+const ICON_TEXTURE_CACHE = new Map<string, CanvasTexture>()
+const ICON_TEXTURE_SIZE = 128
+
+function getIconTexture(kind: 'curve' | 'duplicate' | 'delete'): CanvasTexture {
+  const cached = ICON_TEXTURE_CACHE.get(kind)
+  if (cached) return cached
+
+  const canvas = document.createElement('canvas')
+  canvas.width = ICON_TEXTURE_SIZE
+  canvas.height = ICON_TEXTURE_SIZE
+  const texture = new CanvasTexture(canvas)
+  texture.colorSpace = SRGBColorSpace
+  ICON_TEXTURE_CACHE.set(kind, texture)
+
+  const img = new Image()
+  img.onload = () => {
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+    ctx.clearRect(0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
+    ctx.drawImage(img, 0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
+    texture.needsUpdate = true
+  }
+  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(ICON_SVGS[kind])}`
+
+  return texture
+}
+
+function buildDashedVerticalGeometry(height: number) {
+  // Build each dash as a thin cylinder section so thickness is
+  // controllable — native `lineSegments` lock to 1px on WebGL/WebGPU.
+  const dashes: BufferGeometry[] = []
+  let y = 0
+  while (y < height) {
+    const end = Math.min(y + CORNER_DASH_SIZE, height)
+    const length = end - y
+    const cylinder = new CylinderGeometry(CORNER_DASH_THICKNESS, CORNER_DASH_THICKNESS, length, 8)
+    cylinder.translate(0, y + length / 2, 0)
+    dashes.push(cylinder)
+    y = end + CORNER_GAP_SIZE
+  }
+  const merged = mergeGeometries(dashes, false) ?? new BufferGeometry()
+  for (const dash of dashes) dash.dispose()
+  return merged
+}
+
+function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint: 'start' | 'end' }) {
+  const [isHovered, setIsHovered] = useState(false)
+  const { camera } = useThree()
+  const billboardRef = useRef<Group>(null)
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.25 : 1) * zoom
+
+  const corner = endpoint === 'start' ? wall.start : wall.end
+  const x = corner[0]
+  const z = corner[1]
+  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+
+  const dashedGeometry = useMemo(() => buildDashedVerticalGeometry(wallHeight), [wallHeight])
+  useEffect(() => () => dashedGeometry.dispose(), [dashedGeometry])
+
+  // Node materials matched to the rest of the file — mixing plain
+  // `meshBasicMaterial` with WebGPU node materials trips
+  // "Color target has no corresponding fragment stage output".
+  const dashMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        transparent: true,
+        opacity: 0.85,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+  const hexMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        transparent: true,
+        opacity: 0.95,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+  const ringMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        transparent: true,
+        opacity: 1,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+
+  useEffect(() => {
+    const next = isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR
+    dashMaterial.color.set(next)
+    hexMaterial.color.set(next)
+    ringMaterial.color.set(next)
+  }, [dashMaterial, hexMaterial, ringMaterial, isHovered])
+
+  useEffect(() => () => dashMaterial.dispose(), [dashMaterial])
+  useEffect(() => () => hexMaterial.dispose(), [hexMaterial])
+  useEffect(() => () => ringMaterial.dispose(), [ringMaterial])
+
+  // Billboard the hex disc to the camera so the picker is always
+  // recognisable regardless of viewing angle. Assumes the parent level
+  // has no rotation, which is the standard case.
+  useFrame(() => {
+    if (billboardRef.current) {
+      billboardRef.current.quaternion.copy(camera.quaternion)
+    }
+  })
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'grab' || document.body.style.cursor === 'grabbing') {
+        document.body.style.cursor = ''
+      }
+    }
+  }, [])
+
+  const activateEndpointMove = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    sfxEmitter.emit('sfx:item-pick')
+    document.body.style.cursor = 'grabbing'
+    useEditor.getState().setMovingWallEndpoint({ wall, endpoint })
+  }
+
+  return (
+    <>
+      <mesh
+        frustumCulled={false}
+        geometry={dashedGeometry}
+        material={dashMaterial}
+        position={[x, 0, z]}
+        renderOrder={1001}
+      />
+      <group position={[x, CORNER_FLOOR_OFFSET, z]} ref={billboardRef} scale={scale}>
+        <mesh
+          material={hexMaterial}
+          onPointerDown={activateEndpointMove}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setIsHovered(true)
+            document.body.style.cursor = 'grab'
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setIsHovered(false)
+            if (document.body.style.cursor === 'grab') {
+              document.body.style.cursor = ''
+            }
+          }}
+          renderOrder={1003}
+        >
+          <circleGeometry args={[CORNER_HEX_RADIUS, 6]} />
+        </mesh>
+        <mesh material={ringMaterial} renderOrder={1002}>
+          <ringGeometry args={[CORNER_HEX_RADIUS, CORNER_HEX_RADIUS * 1.18, 6]} />
+        </mesh>
+      </group>
+    </>
+  )
+}
+
+function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
+  const [isHovered, setIsHovered] = useState(false)
+  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const arrowMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        depthTest: true,
+        depthWrite: true,
+        transparent: false,
+        opacity: 1,
+      }),
+    [],
+  )
+  const { camera, raycaster, gl } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.12 : 1) * zoom
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [arrowMaterial, isHovered])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'ns-resize') {
+        document.body.style.cursor = ''
+      }
+      dragCleanupRef.current?.()
+    }
+  }, [])
+
+  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
+
+  const midX = (wall.start[0] + wall.end[0]) / 2
+  const midZ = (wall.start[1] + wall.end[1]) / 2
+  const dx = wall.end[0] - wall.start[0]
+  const dz = wall.end[1] - wall.start[1]
+  const wallAngle = Math.atan2(-dz, dx)
+  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+  const handleY = wallHeight + HEIGHT_HANDLE_OFFSET
+
+  const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    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.
+    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 setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hit = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hit)) return
+
+    const initialHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+    const initialY = hit.y
+    const wallId = wall.id as AnyNodeId
+
+    document.body.style.cursor = 'ns-resize'
+    sfxEmitter.emit('sfx:item-pick')
+    useEditor.getState().setResizingWallHeight(wall)
+    useScene.temporal.getState().pause()
+
+    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))
+      useScene.getState().updateNode(wallId, { height: newHeight })
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === 'ns-resize') {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useEditor.getState().setResizingWallHeight(null)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+
+    dragCleanupRef.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  return (
+    <group position={[midX, handleY, midZ]} rotation={[0, wallAngle, 0]}>
+      <group rotation={[0, Math.PI / 2, Math.PI / 2]} scale={scale}>
+        <mesh
+          // Geometry-as-prop + frustumCulled={false} — see WallMoveArrowHandle.
+          frustumCulled={false}
+          geometry={arrowGeometry}
+          material={arrowMaterial}
+          onPointerDown={activateHeightResize}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setIsHovered(true)
+            document.body.style.cursor = 'ns-resize'
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setIsHovered(false)
+            if (document.body.style.cursor === 'ns-resize') {
+              document.body.style.cursor = ''
+            }
+          }}
+          renderOrder={1002}
+        />
+      </group>
+    </group>
+  )
+}
+
 function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMoveHandle }) {
   const [isHovered, setIsHovered] = useState(false)
   const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
diff --git a/packages/editor/src/store/use-editor.tsx b/packages/editor/src/store/use-editor.tsx
index a0a8b2491..73814186e 100644
--- a/packages/editor/src/store/use-editor.tsx
+++ b/packages/editor/src/store/use-editor.tsx
@@ -211,6 +211,8 @@ type EditorState = {
   setMovingWallEndpoint: (value: MovingWallEndpoint | null) => void
   movingFenceEndpoint: MovingFenceEndpoint | null
   setMovingFenceEndpoint: (value: MovingFenceEndpoint | null) => void
+  resizingWallHeight: WallNode | null
+  setResizingWallHeight: (wall: WallNode | null) => void
   curvingWall: WallNode | null
   setCurvingWall: (wall: WallNode | null) => void
   curvingFence: FenceNode | null
@@ -632,6 +634,8 @@ const useEditor = create<EditorState>()(
       setMovingWallEndpoint: (value) => set({ movingWallEndpoint: value }),
       movingFenceEndpoint: null,
       setMovingFenceEndpoint: (value) => set({ movingFenceEndpoint: value }),
+      resizingWallHeight: null,
+      setResizingWallHeight: (wall) => set({ resizingWallHeight: wall }),
       curvingWall: null,
       setCurvingWall: (wall) => set({ curvingWall: wall }),
       curvingFence: null,
diff --git a/packages/nodes/src/wall/floorplan-move.ts b/packages/nodes/src/wall/floorplan-move.ts
index d1969e73a..5f3e18b97 100644
--- a/packages/nodes/src/wall/floorplan-move.ts
+++ b/packages/nodes/src/wall/floorplan-move.ts
@@ -12,6 +12,7 @@ import {
 } from '@pascal-app/core'
 import {
   getFloorplanWallThickness,
+  getWallGridStep,
   isWallLongEnough,
   snapPointToGrid,
   useWallMoveGhosts,
@@ -27,8 +28,6 @@ import {
   stripWallIsNewMetadata,
 } from './move-shared'
 
-const GRID_STEP = 0.5
-
 /**
  * 2D floor-plan move handler for wall.
  *
@@ -73,7 +72,13 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
         originalEnd,
       })
 
-  let anchor: WallPlanPoint | null = null
+  // Raw (un-snapped) cursor at drag start. Using the raw anchor lets the
+  // wall start respond to every sub-step cursor movement: the resulting
+  // wall position is rounded to absolute grid each tick, so the wall
+  // lands on grid lines (instead of the previous "delta from snapped
+  // anchor" path, which kept the wall at its original off-grid offset
+  // and introduced a half-step dead-zone before the first jump).
+  let rawAnchor: WallPlanPoint | null = null
   let lastDelta: WallPlanPoint = [0, 0]
   let lastNextStart: WallPlanPoint = originalStart
   let lastNextEnd: WallPlanPoint = originalEnd
@@ -82,21 +87,32 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
     affectedIds: [wallId, ...linkedOriginals.map((w) => w.id as AnyNodeId)],
 
     apply({ planPoint, modifiers }) {
-      const snapped: WallPlanPoint = modifiers.shiftKey
-        ? [planPoint[0], planPoint[1]]
-        : snapPointToGrid([planPoint[0], planPoint[1]] as WallPlanPoint, GRID_STEP)
-
-      if (!anchor) {
-        anchor = [snapped[0], snapped[1]]
+      if (!rawAnchor) {
+        rawAnchor = [planPoint[0], planPoint[1]]
         return
       }
 
-      const dx = snapped[0] - anchor[0]
-      const dz = snapped[1] - anchor[1]
+      const rawDx = planPoint[0] - rawAnchor[0]
+      const rawDz = planPoint[1] - rawAnchor[1]
+
+      // Snap the wall's start to the absolute grid (not the cursor
+      // delta) so the wall actually lines up with grid lines, and the
+      // wall jumps to a new grid position the moment the cursor crosses
+      // the midpoint between two grid lines — no "half-step before
+      // anything happens" lag.
+      const step = getWallGridStep()
+      const nextStart: WallPlanPoint = modifiers.shiftKey
+        ? [originalStart[0] + rawDx, originalStart[1] + rawDz]
+        : snapPointToGrid(
+            [originalStart[0] + rawDx, originalStart[1] + rawDz] as WallPlanPoint,
+            step,
+          )
+
+      const dx = nextStart[0] - originalStart[0]
+      const dz = nextStart[1] - originalStart[1]
       if (dx === lastDelta[0] && dz === lastDelta[1]) return
       lastDelta = [dx, dz]
 
-      const nextStart: WallPlanPoint = [originalStart[0] + dx, originalStart[1] + dz]
       const nextEnd: WallPlanPoint = [originalEnd[0] + dx, originalEnd[1] + dz]
       lastNextStart = nextStart
       lastNextEnd = nextEnd
@@ -143,12 +159,16 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
       // `WallSystem` + the 2D layer + the sidebar panel all consult
       // `useLiveNodeOverrides` first, so the visual + numeric preview
       // updates each frame while zustand stays at the pre-drag values
-      // until the user commits.
-      const overrides = useLiveNodeOverrides.getState()
-      overrides.set(wallId, { start: nextStart, end: nextEnd })
-      for (const upd of linkedUpdates) {
-        overrides.set(upd.id, { start: upd.start, end: upd.end })
-      }
+      // until the user commits. Batched into a single zustand
+      // notification — otherwise each per-wall `.set` would re-render
+      // every override subscriber once per linked wall per tick.
+      useLiveNodeOverrides.getState().setMany([
+        [wallId, { start: nextStart, end: nextEnd }],
+        ...linkedUpdates.map(
+          (upd) =>
+            [upd.id, { start: upd.start, end: upd.end }] as [string, Record<string, unknown>],
+        ),
+      ])
 
       // Surface bridge-wall previews so the floor-plan SVG layer can
       // render dashed outlines of what `commit()` will insert. Mirrors
diff --git a/packages/nodes/src/wall/floorplan.ts b/packages/nodes/src/wall/floorplan.ts
index 5f3c2b5c8..ff31f0089 100644
--- a/packages/nodes/src/wall/floorplan.ts
+++ b/packages/nodes/src/wall/floorplan.ts
@@ -95,11 +95,12 @@ export function buildWallFloorplan(node: WallNode, ctx: GeometryContext): Floorp
       stroke,
       strokeWidth: showSelectedChrome ? 0.03 : 0.02,
       opacity: 0.92,
-      // Once the wall is selected, the body itself stops grabbing the
-      // pointer — only the side-arrows and endpoint handles should
-      // start a drag. The polygon stays painted so the selected wall is
-      // still visible; it just doesn't catch clicks any more.
-      pointerEvents: isSelected ? 'none' : undefined,
+      // Once the wall is selected, the body keeps catching the pointer
+      // so the cursor stays neutral (no drag/pointer affordance from
+      // the slab below leaking through), but only the side-arrows and
+      // endpoint handles should start a drag — the wrapper g's click
+      // handler is a no-op re-select for the already-selected wall.
+      cursor: isSelected ? 'default' : undefined,
     },
   ]
 
diff --git a/packages/nodes/src/wall/move-tool.tsx b/packages/nodes/src/wall/move-tool.tsx
index 8a471c78d..8d74de8a5 100644
--- a/packages/nodes/src/wall/move-tool.tsx
+++ b/packages/nodes/src/wall/move-tool.tsx
@@ -165,7 +165,7 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
       ? (node.metadata as Record<string, unknown>)
       : {}
   const isNew = !!meta.isNew
-  const activatedAtRef = useRef<number>(Date.now())
+  const hasDraggedRef = useRef(false)
   const previousGridPosRef = useRef<[number, number] | null>(null)
   const originalStartRef = useRef<[number, number]>([...node.start] as [number, number])
   const originalEndRef = useRef<[number, number]>([...node.end] as [number, number])
@@ -410,15 +410,11 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
 
       const nextCenter: [number, number] = [originalCenter[0] + deltaX, originalCenter[1] + deltaZ]
       const nextWall = buildWallFromCenter(nextCenter)
+      hasDraggedRef.current = true
       applyPreview(nextWall.start, nextWall.end)
     }
 
-    const onGridClick = (event: GridEvent) => {
-      if (Date.now() - activatedAtRef.current < 150) {
-        event.nativeEvent?.stopPropagation?.()
-        return
-      }
-
+    const commitPreview = () => {
       const preview = previewRef.current ?? { start: originalStart, end: originalEnd }
 
       shouldRestoreOnCleanup = false
@@ -493,7 +489,19 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
       triggerSFX('sfx:item-place')
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
       exitMoveMode()
-      event.nativeEvent?.stopPropagation?.()
+    }
+
+    const onPointerUp = () => {
+      // Press-release without drag: dismiss the tool without committing.
+      // This is the same UX as MoveWallEndpointTool / WallHeightArrowHandle
+      // — pointer-down on the affordance starts the move, drag updates the
+      // preview, release commits if the cursor actually moved.
+      if (!hasDraggedRef.current) {
+        useViewer.getState().setSelection({ selectedIds: [nodeId] })
+        exitMoveMode()
+        return
+      }
+      commitPreview()
     }
 
     const onKeyDown = (event: KeyboardEvent) => {
@@ -548,19 +556,19 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
     }
 
     emitter.on('grid:move', onGridMove)
-    emitter.on('grid:click', onGridClick)
     emitter.on('tool:cancel', onCancel)
+    window.addEventListener('pointerup', onPointerUp)
     window.addEventListener('keydown', onKeyDown)
     window.addEventListener('keyup', onKeyUp)
 
     return () => {
       if (shouldRestoreOnCleanup) {
-        // `shouldRestoreOnCleanup` is only true if neither `onGridClick`
-        // nor `onCancel` ran in this tool — i.e., the unmount came from
-        // outside (typically the 2D overlay finalising in split view).
-        // The origin flag tells us whether the 2D side committed (skip
-        // restore — its write is the live state) or the unmount has no
-        // claimed owner (restore to baseline).
+        // `shouldRestoreOnCleanup` is only true if neither `onPointerUp`
+        // (commit branch) nor `onCancel` ran — i.e., the unmount came
+        // from outside (typically the 2D overlay finalising in split
+        // view). The origin flag tells us whether the 2D side committed
+        // (skip restore — its write is the live state) or the unmount
+        // has no claimed owner (restore to baseline).
         const finalisedBy2D = useEditor.getState().movingNodeOrigin === '2d'
         if (!finalisedBy2D) {
           restoreOriginal()
@@ -569,8 +577,8 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
       shiftPressedRef.current = false
       resumeSceneHistory(useScene)
       emitter.off('grid:move', onGridMove)
-      emitter.off('grid:click', onGridClick)
       emitter.off('tool:cancel', onCancel)
+      window.removeEventListener('pointerup', onPointerUp)
       window.removeEventListener('keydown', onKeyDown)
       window.removeEventListener('keyup', onKeyUp)
     }

From bc08187a8d8a3fe08088decc6515ec8691235657 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sat, 23 May 2026 16:14:58 +0530
Subject: [PATCH 13/48] wall: smooth ground-menu side-flip with hysteresis +
 lerp
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The three floor icons appeared to "move one at a time" when orbiting:
binary side decision flickered on grazing orbits, and the 180° rotation
flip swapped curve/delete across each other while duplicate (offset 0)
stayed put. Now lerps position+rotation toward target with a hysteresis
dead-zone, so the menu swings around the wall as one unit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../editor/wall-move-side-handles.tsx         | 158 ++++++++++++------
 1 file changed, 107 insertions(+), 51 deletions(-)

diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
index 28fc4a086..1f067cc6f 100644
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -51,6 +51,16 @@ const CORNER_FLOOR_OFFSET = 0.01
 const GROUND_MENU_FACE_CLEARANCE = 0.85
 const GROUND_MENU_SPACING = 0.6
 const GROUND_ICON_LIFT = 0.015
+// Dead-zone width (world units) around the wall plane before the menu
+// commits to the opposite face. Prevents per-frame flicker when the
+// camera orbits along the wall plane and floating-point jitter pushes
+// the camera-to-wall projection across zero.
+const GROUND_MENU_SIDE_HYSTERESIS = 0.1
+// Per-second lerp factor for position + rotation. Picked so a side-flip
+// finishes in ~250 ms — fast enough to feel responsive, slow enough that
+// the eye reads it as the three icons swinging around the wall together
+// instead of three separate teleports.
+const GROUND_MENU_LERP_RATE = 14
 
 type WallMoveHandle = {
   key: string
@@ -195,61 +205,107 @@ function WallGroundActionMenuV2({ wall }: { wall: WallNode }) {
   })
 
   const menuGroupRef = useRef<Group>(null)
+  const sideRef = useRef<number>(1)
+  const initializedForWallIdRef = useRef<string | null>(null)
+
+  // Per-frame transform update — geometry, side decision, and target pose
+  // are all (re)computed inside useFrame instead of being captured from
+  // render closures, so the menu tracks the wall through edit paths that
+  // bypass React (e.g. mid-drag `useLiveNodeOverrides` writes), and the
+  // side decision can carry frame-to-frame hysteresis.
+  useFrame((state, dt) => {
+    const menu = menuGroupRef.current
+    if (!menu) return
+
+    // Curved walls: chord midpoint is off the centerline, so we sample
+    // the curve frame at t=0.5 to get a true centerline midpoint + a
+    // perpendicular normal — keeps the menu equidistant on either face.
+    const curveFrame = isCurvedWall(wall) ? getWallCurveFrameAt(wall, 0.5) : null
+    let midX: number
+    let midZ: number
+    let dirX: number
+    let dirZ: number
+    let normalX: number
+    let normalZ: number
+
+    if (curveFrame) {
+      midX = curveFrame.point.x
+      midZ = curveFrame.point.y
+      normalX = curveFrame.normal.x
+      normalZ = curveFrame.normal.y
+      dirX = curveFrame.normal.y
+      dirZ = -curveFrame.normal.x
+    } else {
+      const dx = wall.end[0] - wall.start[0]
+      const dz = wall.end[1] - wall.start[1]
+      const len = Math.hypot(dx, dz)
+      if (len < 1e-6) return
+      midX = (wall.start[0] + wall.end[0]) / 2
+      midZ = (wall.start[1] + wall.end[1]) / 2
+      dirX = dx / len
+      dirZ = dz / len
+      normalX = -dirZ
+      normalZ = dirX
+    }
 
-  // For curved walls the chord midpoint is off the centerline, so using
-  // it would make the two faces unequal distances from the wall surface.
-  // Sampling the curve frame at t=0.5 gives a midpoint on the centerline
-  // plus a true perpendicular normal — flipping along that normal keeps
-  // the menu the same distance from the wall on either side.
-  const frame = isCurvedWall(wall) ? getWallCurveFrameAt(wall, 0.5) : null
-  const segLength = Math.hypot(wall.end[0] - wall.start[0], wall.end[1] - wall.start[1])
-
-  let midX: number
-  let midZ: number
-  let dirX: number
-  let dirZ: number
-  let normalX: number
-  let normalZ: number
-
-  if (frame) {
-    midX = frame.point.x
-    midZ = frame.point.y
-    normalX = frame.normal.x
-    normalZ = frame.normal.y
-    dirX = frame.normal.y
-    dirZ = -frame.normal.x
-  } else {
-    midX = (wall.start[0] + wall.end[0]) / 2
-    midZ = (wall.start[1] + wall.end[1]) / 2
-    const dx = wall.end[0] - wall.start[0]
-    const dz = wall.end[1] - wall.start[1]
-    dirX = segLength < 1e-6 ? 1 : dx / segLength
-    dirZ = segLength < 1e-6 ? 0 : dz / segLength
-    normalX = -dirZ
-    normalZ = dirX
-  }
+    // Offset from the wall *face* (centerline + half-thickness), so the
+    // menu always sits clearly outside the wall mesh.
+    const offset = getWallThickness(wall) / 2 + GROUND_MENU_FACE_CLEARANCE
+
+    const projection =
+      (state.camera.position.x - midX) * normalX +
+      (state.camera.position.z - midZ) * normalZ
+
+    const isFreshWall = initializedForWallIdRef.current !== wall.id
+
+    // Hysteresis: only flip when the camera is clearly past the wall
+    // plane. The previous binary `projection >= 0 ? 1 : -1` flickered
+    // on grazing orbits and the resulting per-frame 180° flip is what
+    // visually fanned the three icons across each other — the outer
+    // two (curve, delete) crossed while the centre one (duplicate,
+    // offsetIndex 0) barely moved, reading as "icons move one at a time."
+    const currentSide = sideRef.current
+    let nextSide: number
+    if (isFreshWall) {
+      nextSide = projection >= 0 ? 1 : -1
+    } else if (currentSide >= 0 && projection < -GROUND_MENU_SIDE_HYSTERESIS) {
+      nextSide = -1
+    } else if (currentSide < 0 && projection > GROUND_MENU_SIDE_HYSTERESIS) {
+      nextSide = 1
+    } else {
+      nextSide = currentSide
+    }
+    sideRef.current = nextSide
+
+    const targetX = midX + normalX * offset * nextSide
+    const targetZ = midZ + normalZ * offset * nextSide
+    const targetRot = Math.atan2(-nextSide * dirZ, nextSide * dirX)
+
+    if (isFreshWall) {
+      // First frame for this wall — snap so the menu doesn't slide in
+      // from the previous wall's pose (or the default origin).
+      menu.position.set(targetX, GROUND_ICON_LIFT, targetZ)
+      menu.rotation.y = targetRot
+      initializedForWallIdRef.current = wall.id
+      return
+    }
 
-  // Offset from the wall *face* (centerline + half-thickness), so the menu
-  // always sits clearly outside the wall mesh — matches the side handle
-  // pattern.
-  const offset = getWallThickness(wall) / 2 + GROUND_MENU_FACE_CLEARANCE
-
-  // One per-frame update for the whole menu — sets the position + rotation
-  // of the container group only. Every icon is a static child inside the
-  // group, so the entire menu moves as a single unit.
-  useFrame((state) => {
-    if (!menuGroupRef.current) return
-    const dot =
-      (state.camera.position.x - midX) * normalX + (state.camera.position.z - midZ) * normalZ
-    const side = dot >= 0 ? 1 : -1
-    menuGroupRef.current.position.set(
-      midX + normalX * offset * side,
-      GROUND_ICON_LIFT,
-      midZ + normalZ * offset * side,
-    )
-    menuGroupRef.current.rotation.y = Math.atan2(-side * dirZ, side * dirX)
+    const t = 1 - Math.exp(-dt * GROUND_MENU_LERP_RATE)
+    menu.position.x += (targetX - menu.position.x) * t
+    menu.position.z += (targetZ - menu.position.z) * t
+    menu.position.y = GROUND_ICON_LIFT
+
+    // Shortest angular path — a ~180° side-flip target must rotate the
+    // short way around, otherwise the menu unwinds the long way and the
+    // icons trace an even more dramatic arc.
+    let rotDelta = targetRot - menu.rotation.y
+    while (rotDelta > Math.PI) rotDelta -= 2 * Math.PI
+    while (rotDelta < -Math.PI) rotDelta += 2 * Math.PI
+    menu.rotation.y += rotDelta * t
   })
 
+  // Don't render an empty menu shell for degenerate walls.
+  const segLength = Math.hypot(wall.end[0] - wall.start[0], wall.end[1] - wall.start[1])
   if (segLength < 1e-6) return null
 
   const items: Array<'curve' | 'duplicate' | 'delete'> = []

From 12facb6fb903a148c021458b477167a008638084 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sat, 23 May 2026 16:17:13 +0530
Subject: [PATCH 14/48] wall: raise ground-action menu to 10 cm so icons clear
 floor textures

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../editor/src/components/editor/wall-move-side-handles.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
index 1f067cc6f..ddbc4d9b9 100644
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -50,7 +50,7 @@ const CORNER_DASH_THICKNESS = 0.006
 const CORNER_FLOOR_OFFSET = 0.01
 const GROUND_MENU_FACE_CLEARANCE = 0.85
 const GROUND_MENU_SPACING = 0.6
-const GROUND_ICON_LIFT = 0.015
+const GROUND_ICON_LIFT = 0.1
 // Dead-zone width (world units) around the wall plane before the menu
 // commits to the opposite face. Prevents per-frame flicker when the
 // camera orbits along the wall plane and floating-point jitter pushes

From 6024d52b5e012047b271b11343fcf1d56e44f1a6 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sat, 23 May 2026 23:03:40 +0530
Subject: [PATCH 15/48] wall: anchor 2D action menu and 3D height arrow at
 curve apex

2D menu centres on getWallMidpointHandlePoint and stays horizontal 32 px
above the wall; 3D height arrow uses getWallCurveFrameAt(0.5) so the
apex+tangent match the side handles on curved walls.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../floorplan-registry-action-menu.tsx        | 50 ++++++++++++++++---
 .../editor/wall-move-side-handles.tsx         | 15 ++++--
 2 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/packages/editor/src/components/editor-2d/floorplan-registry-action-menu.tsx b/packages/editor/src/components/editor-2d/floorplan-registry-action-menu.tsx
index 318fa66ea..4f1fce5ee 100644
--- a/packages/editor/src/components/editor-2d/floorplan-registry-action-menu.tsx
+++ b/packages/editor/src/components/editor-2d/floorplan-registry-action-menu.tsx
@@ -4,9 +4,12 @@ import {
   type AnyNode,
   type AnyNodeId,
   type CeilingNode,
+  getWallMidpointHandlePoint,
   nodeRegistry,
   type SlabNode,
+  useLiveNodeOverrides,
   useScene,
+  type WallNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useState } from 'react'
@@ -54,6 +57,7 @@ export function FloorplanRegistryActionMenu() {
   const def = selectedKind ? nodeRegistry.get(selectedKind) : null
   const isRegistryKind = !!def
   const isVisible = isRegistryKind && !movingNode
+  const isWall = selectedKind === 'wall'
 
   useEffect(() => {
     if (!(isVisible && selectedId)) {
@@ -62,21 +66,53 @@ export function FloorplanRegistryActionMenu() {
     }
     let raf = 0
     const tick = () => {
-      const el = document.querySelector(
-        `[data-floorplan-scene] [data-node-id="${selectedId}"]`,
+      raf = requestAnimationFrame(tick)
+      const sceneEl = document.querySelector('[data-floorplan-scene]') as SVGGElement | null
+      const svgEl = sceneEl?.ownerSVGElement ?? null
+      const ctm = sceneEl?.getScreenCTM() ?? null
+      if (!(sceneEl && svgEl && ctm)) {
+        setPosition(null)
+        return
+      }
+
+      // Walls: anchor at the wall midpoint in screen space so the menu
+      // sits over the centre of the wall (not the top of its screen-axis
+      // bounding box). Menu itself stays horizontal. Read live overrides
+      // too so the anchor tracks the wall during side-arrow / endpoint
+      // drags. For curved walls `getWallMidpointHandlePoint` returns the
+      // apex point on the arc at t=0.5, matching what the renderer draws.
+      if (isWall) {
+        const sceneNode = useScene.getState().nodes[selectedId] as WallNode | undefined
+        if (!sceneNode) {
+          setPosition(null)
+          return
+        }
+        const overrides = useLiveNodeOverrides.getState().get(selectedId) as
+          | Partial<WallNode>
+          | undefined
+        const wall = (overrides ? { ...sceneNode, ...overrides } : sceneNode) as WallNode
+        const planMid = getWallMidpointHandlePoint(wall)
+        const midPt = svgEl.createSVGPoint()
+        midPt.x = planMid.x
+        midPt.y = planMid.y
+        const midScreen = midPt.matrixTransform(ctm)
+        setPosition({ left: midScreen.x, top: midScreen.y })
+        return
+      }
+
+      const el = sceneEl.querySelector(
+        `[data-node-id="${selectedId}"]`,
       ) as SVGGElement | null
       if (el) {
         const rect = el.getBoundingClientRect()
-        // Position centered horizontally, ~12px above the bounding box.
-        setPosition({ left: rect.left + rect.width / 2, top: rect.top - 12 })
+        setPosition({ left: rect.left + rect.width / 2, top: rect.top })
       } else {
         setPosition(null)
       }
-      raf = requestAnimationFrame(tick)
     }
     raf = requestAnimationFrame(tick)
     return () => cancelAnimationFrame(raf)
-  }, [isVisible, selectedId])
+  }, [isVisible, selectedId, isWall])
 
   if (!(isVisible && selectedId && position && def)) return null
 
@@ -180,7 +216,7 @@ export function FloorplanRegistryActionMenu() {
       style={{
         left: position.left,
         top: position.top,
-        transform: 'translate(-50%, -100%)',
+        transform: 'translate(-50%, calc(-100% - 32px))',
       }}
     >
       <NodeActionMenu
diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
index ddbc4d9b9..f1834c8b9 100644
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -653,11 +653,16 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
   useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
   useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
 
-  const midX = (wall.start[0] + wall.end[0]) / 2
-  const midZ = (wall.start[1] + wall.end[1]) / 2
-  const dx = wall.end[0] - wall.start[0]
-  const dz = wall.end[1] - wall.start[1]
-  const wallAngle = Math.atan2(-dz, dx)
+  // Sit on the visual centre of the wall — for curved walls that's the
+  // arc apex at t=0.5, not the chord midpoint. Use the curve tangent for
+  // the yaw so the arrow's local frame matches the wall direction at the
+  // apex, consistent with `getWallMoveHandles`.
+  const curveFrame = isCurvedWall(wall) ? getWallCurveFrameAt(wall, 0.5) : null
+  const midX = curveFrame ? curveFrame.point.x : (wall.start[0] + wall.end[0]) / 2
+  const midZ = curveFrame ? curveFrame.point.y : (wall.start[1] + wall.end[1]) / 2
+  const dirX = curveFrame ? curveFrame.tangent.x : wall.end[0] - wall.start[0]
+  const dirZ = curveFrame ? curveFrame.tangent.y : wall.end[1] - wall.start[1]
+  const wallAngle = Math.atan2(-dirZ, dirX)
   const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
   const handleY = wallHeight + HEIGHT_HANDLE_OFFSET
 

From 5bd2a126c8e6315e8f8ace883131f78d337b9823 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sun, 24 May 2026 00:11:11 +0530
Subject: [PATCH 16/48] =?UTF-8?q?door:=20in-world=20selection=20UI=20?=
 =?UTF-8?q?=E2=80=94=20side=20width=20arrows,=20height=20arrow,=20ground?=
 =?UTF-8?q?=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Side arrows resize width anchored at the opposite edge; top arrow drags
height anchored at the floor. Ground menu mirrors the wall pattern with
move + duplicate + delete icons that flip to the camera side. Handles
portal into the level (not the wall mesh) and wrap in a per-frame
transform mirror so wall hover outline doesn't pick them up.

New viewer flag handleDragging gates node pointer events during in-world
drags; pointerup also swallows the follow-up synthetic click so the
PointerMissedHandler doesn't deselect the active item on commit. Wall
height arrow, wall move arrow, and fence move arrow all opt in.

Scale chevron arrows down to 65 % across wall + door so the family reads
as one. Panel type grids (door, window, column, skylight) get matched
breathing room (px-3 py-2.5, gap-2) so labels stop hugging the borders.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../editor/custom-camera-controls.tsx         |   4 +
 .../components/editor/door-side-handles.tsx   | 800 ++++++++++++++++++
 .../editor/floating-action-menu.tsx           |   2 +
 .../editor/src/components/editor/index.tsx    |   2 +
 .../editor/wall-move-side-handles.tsx         |  47 +-
 packages/editor/src/store/use-editor.tsx      |   8 +
 packages/nodes/src/column/panel.tsx           |   4 +-
 packages/nodes/src/door/panel.tsx             |   6 +-
 packages/nodes/src/skylight/panel.tsx         |   4 +-
 packages/nodes/src/window/panel.tsx           |   4 +-
 .../components/viewer/selection-manager.tsx   |   3 +-
 packages/viewer/src/hooks/use-node-events.ts  |  24 +-
 packages/viewer/src/store/use-viewer.ts       |  13 +
 13 files changed, 893 insertions(+), 28 deletions(-)
 create mode 100644 packages/editor/src/components/editor/door-side-handles.tsx

diff --git a/packages/editor/src/components/editor/custom-camera-controls.tsx b/packages/editor/src/components/editor/custom-camera-controls.tsx
index 95b5beab5..5051d1eac 100644
--- a/packages/editor/src/components/editor/custom-camera-controls.tsx
+++ b/packages/editor/src/components/editor/custom-camera-controls.tsx
@@ -139,6 +139,8 @@ export const CustomCameraControls = () => {
   const movingWallEndpoint = useEditor((s) => s.movingWallEndpoint)
   const movingFenceEndpoint = useEditor((s) => s.movingFenceEndpoint)
   const resizingWallHeight = useEditor((s) => s.resizingWallHeight)
+  const resizingDoorHeight = useEditor((s) => s.resizingDoorHeight)
+  const resizingDoorWidth = useEditor((s) => s.resizingDoorWidth)
   const isBoxSelectActive = mode === 'select' && selectionTool === 'marquee'
   const isInteracting = Boolean(
     tool ||
@@ -146,6 +148,8 @@ export const CustomCameraControls = () => {
       movingWallEndpoint ||
       movingFenceEndpoint ||
       resizingWallHeight ||
+      resizingDoorHeight ||
+      resizingDoorWidth ||
       isBoxSelectActive,
   )
   const touches = useMemo(() => {
diff --git a/packages/editor/src/components/editor/door-side-handles.tsx b/packages/editor/src/components/editor/door-side-handles.tsx
new file mode 100644
index 000000000..ab57ca722
--- /dev/null
+++ b/packages/editor/src/components/editor/door-side-handles.tsx
@@ -0,0 +1,800 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  DoorNode,
+  sceneRegistry,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  CanvasTexture,
+  Color,
+  DoubleSide,
+  ExtrudeGeometry,
+  type Group,
+  type Object3D,
+  OrthographicCamera,
+  Plane,
+  Shape,
+  SRGBColorSpace,
+  Vector2,
+  Vector3,
+} from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { sfxEmitter } from '../../lib/sfx-bus'
+import useEditor from '../../store/use-editor'
+
+const SIDE_HANDLE_OFFSET = 0.24
+const HEIGHT_HANDLE_OFFSET = 0.24
+// Arrows are sized for walls by default; doors are smaller features, so we
+// scale the rendered chevron down to about two-thirds.
+const ARROW_SCALE = 0.65
+const MIN_DOOR_HEIGHT = 0.5
+const MIN_DOOR_WIDTH = 0.3
+const ARROW_COLOR = '#8381ed'
+const ARROW_HOVER_COLOR = '#a5b4fc'
+const GROUND_MENU_FACE_CLEARANCE = 0.5
+const GROUND_MENU_SPACING = 0.32
+const GROUND_ICON_SIZE = 0.22
+const GROUND_ICON_LIFT = 0.1
+// Same hysteresis + lerp values as the wall ground menu so the door menu
+// reads as part of the same UI family when both are on screen.
+const GROUND_MENU_SIDE_HYSTERESIS = 0.1
+const GROUND_MENU_LERP_RATE = 14
+
+// Pre-empt the synthetic `click` the browser fires immediately after a
+// drag's pointerup. Registered at window-level capture so it runs before
+// the canvas-level PointerMissedHandler — whose "click on empty space ⇒
+// deselect" rule would otherwise eat the door selection at the end of a
+// handle drag. `once: true` makes the listener self-detach; the setTimeout
+// is a failsafe in case no click ever follows.
+function swallowNextClick() {
+  const swallow = (clickEvent: Event) => {
+    clickEvent.stopPropagation()
+    clickEvent.preventDefault()
+  }
+  window.addEventListener('click', swallow, { capture: true, once: true })
+  setTimeout(() => {
+    window.removeEventListener('click', swallow, { capture: true })
+  }, 300)
+}
+
+function createArrowHandleGeometry() {
+  // Same chevron+shaft silhouette used for wall handles, kept local so the
+  // two files stay independent.
+  const shape = new Shape()
+  shape.moveTo(0.22, 0)
+  shape.lineTo(-0.04, 0.12)
+  shape.lineTo(-0.04, 0.035)
+  shape.lineTo(-0.2, 0.035)
+  shape.lineTo(-0.2, -0.035)
+  shape.lineTo(-0.04, -0.035)
+  shape.lineTo(-0.04, -0.12)
+  shape.lineTo(0.22, 0)
+
+  const geometry = new ExtrudeGeometry(shape, {
+    depth: 0.08,
+    bevelEnabled: true,
+    bevelThickness: 0.035,
+    bevelSize: 0.03,
+    bevelOffset: 0,
+    bevelSegments: 10,
+    curveSegments: 16,
+    steps: 1,
+  })
+  geometry.translate(0, 0, -0.04)
+  geometry.rotateX(-Math.PI / 2)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
+
+export function DoorSideHandles() {
+  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 selectedId = selectedIds.length === 1 ? selectedIds[0] : null
+  const selectedDoor = useScene((state) => {
+    const node = selectedId ? state.nodes[selectedId as AnyNodeId] : null
+    return node?.type === 'door' ? node : null
+  })
+
+  const shouldRender =
+    Boolean(selectedDoor) && !isFloorplanHovered && mode !== 'delete' && !movingNode
+
+  if (!shouldRender || !selectedDoor) return null
+  return <DoorSideHandlesForDoor door={selectedDoor} />
+}
+
+function DoorSideHandlesForDoor({ door }: { door: DoorNode }) {
+  // Portal into the LEVEL (the wall's parent), not the wall itself. The
+  // selection/hover outline pass traverses descendants of the hovered
+  // object — if handles were children of the wall mesh they'd get outlined
+  // whenever the wall is hovered. A wrapper group below mirrors the wall's
+  // pose each frame so the handles still ride along with the wall.
+  const wallParentId = useScene((state) => {
+    const wallNode = door.parentId
+      ? (state.nodes[door.parentId as AnyNodeId] as WallNode | undefined)
+      : undefined
+    return wallNode?.parentId ?? null
+  })
+
+  const [wallObject, setWallObject] = useState<Object3D | null>(() =>
+    door.parentId ? (sceneRegistry.nodes.get(door.parentId) ?? null) : null,
+  )
+  const [levelObject, setLevelObject] = useState<Object3D | null>(() =>
+    wallParentId ? (sceneRegistry.nodes.get(wallParentId as AnyNodeId) ?? null) : null,
+  )
+
+  useEffect(() => {
+    let frameId = 0
+    const resolve = () => {
+      const nextWall = door.parentId ? (sceneRegistry.nodes.get(door.parentId) ?? null) : null
+      const nextLevel = wallParentId
+        ? (sceneRegistry.nodes.get(wallParentId as AnyNodeId) ?? null)
+        : null
+      setWallObject((current) => (current === nextWall ? current : nextWall))
+      setLevelObject((current) => (current === nextLevel ? current : nextLevel))
+      if (!nextWall || !nextLevel) frameId = window.requestAnimationFrame(resolve)
+    }
+    resolve()
+    return () => {
+      if (frameId) window.cancelAnimationFrame(frameId)
+    }
+  }, [door.parentId, wallParentId])
+
+  const wrapperRef = useRef<Group>(null)
+
+  // Copy the wall mesh's pose into the wrapper every frame. WallSystem
+  // imperatively writes position/rotation outside React, so a React-side
+  // reactive read would lag during edits.
+  useFrame(() => {
+    const wrapper = wrapperRef.current
+    if (!wrapper || !wallObject) return
+    wrapper.position.copy(wallObject.position)
+    wrapper.quaternion.copy(wallObject.quaternion)
+  })
+
+  if (!levelObject || !wallObject) return null
+
+  const rotation: [number, number, number] =
+    typeof door.rotation === 'number'
+      ? [0, door.rotation, 0]
+      : (door.rotation ?? [0, 0, 0])
+
+  return createPortal(
+    <group ref={wrapperRef}>
+      <group position={door.position} rotation={rotation}>
+        <DoorSideArrow door={door} side="left" wallObject={wallObject} />
+        <DoorSideArrow door={door} side="right" wallObject={wallObject} />
+        <DoorHeightArrowHandle door={door} wallObject={wallObject} />
+      </group>
+      <DoorGroundActionMenu door={door} wallObject={wallObject} />
+    </group>,
+    levelObject,
+  )
+}
+
+function DoorSideArrow({
+  door,
+  side,
+  wallObject,
+}: {
+  door: DoorNode
+  side: 'left' | 'right'
+  wallObject: Object3D
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const arrowMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true,
+        opacity: 1,
+      }),
+    [],
+  )
+  const { camera, raycaster, gl } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [arrowMaterial, isHovered])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'ew-resize') {
+        document.body.style.cursor = ''
+      }
+      dragCleanupRef.current?.()
+    }
+  }, [])
+
+  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
+
+  const activateWidthResize = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+
+    // Door center in world space. The raycast plane is vertical, normal
+    // pointed at the camera through the door — same setup as the height
+    // arrow, but here we read the pointer's wall-local X to derive width
+    // rather than Y to derive height.
+    wallObject.updateMatrixWorld()
+    const centerWorld = new Vector3(door.position[0], door.position[1], door.position[2])
+    centerWorld.applyMatrix4(wallObject.matrixWorld)
+
+    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
+    if (planeNormal.lengthSq() === 0) return
+    planeNormal.normalize()
+    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
+
+    const ndc = new Vector2()
+    const setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hitWorld = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
+    const hitLocal = wallObject.worldToLocal(hitWorld.clone())
+
+    const initialWidth = door.width
+    const initialPositionX = door.position[0]
+    const initialPositionZ = door.position[2]
+    const rotY =
+      typeof door.rotation === 'number'
+        ? door.rotation
+        : (door.rotation?.[1] ?? 0)
+    // Door-local +X expressed in wall-local: rotating (1,0,0) by rotY around Y.
+    const armX = Math.cos(rotY)
+    const armZ = -Math.sin(rotY)
+    // sign === +1 grows the door from the door-local right edge (left edge
+    // anchored), sign === -1 grows from the left edge (right edge anchored).
+    const sign = side === 'right' ? 1 : -1
+    const initialPointerX = hitLocal.x
+    const initialPointerZ = hitLocal.z
+
+    const wallNode = door.wallId
+      ? (useScene.getState().nodes[door.wallId as AnyNodeId] as WallNode | undefined)
+      : undefined
+    const wallLength = wallNode
+      ? Math.hypot(
+          wallNode.end[0] - wallNode.start[0],
+          wallNode.end[1] - wallNode.start[1],
+        )
+      : Number.POSITIVE_INFINITY
+
+    // The anchor (opposite edge) stays fixed in wall-local space. Its
+    // wall-local X position determines how much room is left for the door
+    // to grow without spilling off the wall.
+    const anchorWallX = initialPositionX - sign * (initialWidth / 2) * armX
+    const headroomRight = Math.max(0, wallLength - anchorWallX)
+    const headroomLeft = Math.max(0, anchorWallX)
+    // For typical axis-aligned doors (|armX| === 1), `sign * armX` is ±1
+    // and the grow direction in wall-local X matches the visible direction.
+    // Fall back to the larger headroom for non-axis-aligned cases.
+    const growDir = sign * armX
+    const headroomAlongArm =
+      growDir > 0 ? headroomRight : growDir < 0 ? headroomLeft : Math.max(headroomLeft, headroomRight)
+    const maxWidth = Math.max(MIN_DOOR_WIDTH, headroomAlongArm)
+
+    document.body.style.cursor = 'ew-resize'
+    sfxEmitter.emit('sfx:item-pick')
+    useEditor.getState().setResizingDoorWidth(door)
+    // Suppress R3F node pointer events until pointerup completes; without
+    // this, the pointerup at the end of the drag synthesizes a click on
+    // whatever wall/mesh is under the cursor and re-selects it.
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    const doorId = door.id as AnyNodeId
+
+    const onMove = (e: PointerEvent) => {
+      setNDC(e.clientX, e.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const intersectionWorld = new Vector3()
+      if (!raycaster.ray.intersectPlane(plane, intersectionWorld)) return
+      const intersectionLocal = wallObject.worldToLocal(intersectionWorld.clone())
+      const dx = intersectionLocal.x - initialPointerX
+      const dz = intersectionLocal.z - initialPointerZ
+      // Project pointer delta onto door-local +X (in wall-local), then sign
+      // it so dragging the arrow outward always grows the door.
+      const armDelta = dx * armX + dz * armZ
+      const widthDelta = sign * armDelta
+      const newWidth = Math.min(maxWidth, Math.max(MIN_DOOR_WIDTH, initialWidth + widthDelta))
+      const half = (newWidth - initialWidth) / 2
+      const newPositionX = initialPositionX + sign * half * armX
+      const newPositionZ = initialPositionZ + sign * half * armZ
+      useScene.getState().updateNode(doorId, {
+        width: newWidth,
+        position: [newPositionX, door.position[1], newPositionZ],
+      })
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === 'ew-resize') {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useEditor.getState().setResizingDoorWidth(null)
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      // Swallow the synthetic `click` the browser fires right after this
+      // pointerup. PointerMissedHandler would otherwise treat it as an
+      // empty-canvas click and deselect the door. A window-level capture
+      // listener pre-empts the canvas listener before it can run.
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+
+    dragCleanupRef.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  const direction = side === 'right' ? 1 : -1
+  const x = direction * (door.width / 2 + SIDE_HANDLE_OFFSET)
+  const rotationY = side === 'right' ? 0 : Math.PI
+
+  return (
+    <group position={[x, 0, 0]} rotation={[0, rotationY, 0]} scale={scale}>
+      <mesh
+        // Same WebGPU "Vertex buffer slot 0" workaround as WallMoveArrowHandle:
+        // pass geometry as a prop + disable frustum culling.
+        frustumCulled={false}
+        geometry={arrowGeometry}
+        material={arrowMaterial}
+        onPointerDown={activateWidthResize}
+        onPointerEnter={(event) => {
+          event.stopPropagation()
+          setIsHovered(true)
+          document.body.style.cursor = 'ew-resize'
+        }}
+        onPointerLeave={(event) => {
+          event.stopPropagation()
+          setIsHovered(false)
+          if (document.body.style.cursor === 'ew-resize') {
+            document.body.style.cursor = ''
+          }
+        }}
+        renderOrder={1010}
+      />
+    </group>
+  )
+}
+
+function DoorHeightArrowHandle({
+  door,
+  wallObject,
+}: {
+  door: DoorNode
+  wallObject: Object3D
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const arrowMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true,
+        opacity: 1,
+      }),
+    [],
+  )
+  const { camera, raycaster, gl } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [arrowMaterial, isHovered])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'ns-resize') {
+        document.body.style.cursor = ''
+      }
+      dragCleanupRef.current?.()
+    }
+  }, [])
+
+  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
+
+  const handleY = door.height / 2 + HEIGHT_HANDLE_OFFSET
+
+  const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+
+    // Door center in world space. Wall mesh only rotates around Y, so a
+    // vertical raycast plane through that point maps pointer Y to door Y
+    // 1:1 — no extra wall-rotation bookkeeping needed.
+    wallObject.updateMatrixWorld()
+    const centerWorld = new Vector3(door.position[0], door.position[1], door.position[2])
+    centerWorld.applyMatrix4(wallObject.matrixWorld)
+
+    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
+    if (planeNormal.lengthSq() === 0) return
+    planeNormal.normalize()
+    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
+
+    const ndc = new Vector2()
+    const setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hit = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hit)) return
+
+    const initialHeight = door.height
+    const initialPositionY = door.position[1]
+    // Bottom of the door in wall-local Y. Most doors sit on the floor
+    // (bottom = 0), but lifted openings preserve their bottom by anchoring
+    // the resize there.
+    const bottomLocalY = initialPositionY - initialHeight / 2
+    const initialPointerY = hit.y
+    const doorId = door.id as AnyNodeId
+    const wallNode = door.wallId
+      ? (useScene.getState().nodes[door.wallId as AnyNodeId] as WallNode | undefined)
+      : undefined
+    const maxHeightCap = wallNode?.height ?? Number.POSITIVE_INFINITY
+    const maxHeight = Math.max(MIN_DOOR_HEIGHT, maxHeightCap - bottomLocalY)
+
+    document.body.style.cursor = 'ns-resize'
+    sfxEmitter.emit('sfx:item-pick')
+    useEditor.getState().setResizingDoorHeight(door)
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    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 delta = intersection.y - initialPointerY
+      const newHeight = Math.min(
+        maxHeight,
+        Math.max(MIN_DOOR_HEIGHT, initialHeight + delta),
+      )
+      const newPositionY = bottomLocalY + newHeight / 2
+      useScene.getState().updateNode(doorId, {
+        height: newHeight,
+        position: [door.position[0], newPositionY, door.position[2]],
+      })
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === 'ns-resize') {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useEditor.getState().setResizingDoorHeight(null)
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+
+    dragCleanupRef.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  return (
+    <group position={[0, handleY, 0]}>
+      <group rotation={[0, Math.PI / 2, Math.PI / 2]} scale={scale}>
+        <mesh
+          frustumCulled={false}
+          geometry={arrowGeometry}
+          material={arrowMaterial}
+          onPointerDown={activateHeightResize}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setIsHovered(true)
+            document.body.style.cursor = 'ns-resize'
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setIsHovered(false)
+            if (document.body.style.cursor === 'ns-resize') {
+              document.body.style.cursor = ''
+            }
+          }}
+          renderOrder={1010}
+        />
+      </group>
+    </group>
+  )
+}
+
+function DoorGroundActionMenu({ door, wallObject }: { door: DoorNode; wallObject: Object3D }) {
+  const menuGroupRef = useRef<Group>(null)
+  const sideRef = useRef<number>(1)
+  const initializedForDoorIdRef = useRef<string | null>(null)
+  const cameraLocalScratch = useMemo(() => new Vector3(), [])
+
+  const rotationY =
+    typeof door.rotation === 'number'
+      ? door.rotation
+      : (door.rotation?.[1] ?? 0)
+
+  // Per-frame transform so the menu tracks live overrides written by drag
+  // tools (height resize, side-arrow move) without going through React.
+  useFrame((state, dt) => {
+    const menu = menuGroupRef.current
+    if (!menu) return
+
+    // Door's outward-face normal in wall-local space. The door geometry's
+    // +Z axis is its "front"; rotating it by `rotation.y` around Y maps
+    // door-local +Z to (sin(rotY), 0, cos(rotY)) in wall-local space.
+    const normalX = Math.sin(rotationY)
+    const normalZ = Math.cos(rotationY)
+    const doorX = door.position[0]
+    const doorZ = door.position[2]
+
+    // Camera in wall-local coords so the projection math stays consistent
+    // even when the wall is rotated arbitrarily relative to world axes.
+    wallObject.updateMatrixWorld()
+    cameraLocalScratch.copy(state.camera.position)
+    wallObject.worldToLocal(cameraLocalScratch)
+
+    const projection =
+      (cameraLocalScratch.x - doorX) * normalX +
+      (cameraLocalScratch.z - doorZ) * normalZ
+
+    const isFreshDoor = initializedForDoorIdRef.current !== door.id
+    const currentSide = sideRef.current
+    let nextSide: number
+    if (isFreshDoor) {
+      nextSide = projection >= 0 ? 1 : -1
+    } else if (currentSide >= 0 && projection < -GROUND_MENU_SIDE_HYSTERESIS) {
+      nextSide = -1
+    } else if (currentSide < 0 && projection > GROUND_MENU_SIDE_HYSTERESIS) {
+      nextSide = 1
+    } else {
+      nextSide = currentSide
+    }
+    sideRef.current = nextSide
+
+    const offset = door.frameDepth / 2 + GROUND_MENU_FACE_CLEARANCE
+    const targetX = doorX + normalX * offset * nextSide
+    const targetZ = doorZ + normalZ * offset * nextSide
+    // Floor in wall-local Y. For floor-resting doors `position[1] - height/2`
+    // equals 0; lifted openings keep their bottom for free.
+    const floorY = door.position[1] - door.height / 2 + GROUND_ICON_LIFT
+
+    // Tangent along the door (perpendicular to its normal). Same
+    // `atan2(-side*dirZ, side*dirX)` shape the wall menu uses so the icon
+    // plates lie flat in a row on whichever side of the wall the camera is on.
+    // +π so the icon row's "up" matches the camera-facing convention used
+    // for door menus (flipped relative to the wall pattern).
+    const dirX = -normalZ
+    const dirZ = normalX
+    const targetRot = Math.atan2(-nextSide * dirZ, nextSide * dirX) + Math.PI
+
+    if (isFreshDoor) {
+      menu.position.set(targetX, floorY, targetZ)
+      menu.rotation.y = targetRot
+      initializedForDoorIdRef.current = door.id
+      return
+    }
+
+    const t = 1 - Math.exp(-dt * GROUND_MENU_LERP_RATE)
+    menu.position.x += (targetX - menu.position.x) * t
+    menu.position.z += (targetZ - menu.position.z) * t
+    menu.position.y = floorY
+
+    let rotDelta = targetRot - menu.rotation.y
+    while (rotDelta > Math.PI) rotDelta -= 2 * Math.PI
+    while (rotDelta < -Math.PI) rotDelta += 2 * Math.PI
+    menu.rotation.y += rotDelta * t
+  })
+
+  const items: Array<'move' | 'duplicate' | 'delete'> = ['move', 'duplicate', 'delete']
+  const centerIndex = (items.length - 1) / 2
+
+  return (
+    <group ref={menuGroupRef}>
+      {items.map((kind, index) => (
+        <DoorGroundActionIcon
+          door={door}
+          key={kind}
+          kind={kind}
+          offsetIndex={index - centerIndex}
+        />
+      ))}
+    </group>
+  )
+}
+
+function DoorGroundActionIcon({
+  door,
+  kind,
+  offsetIndex,
+}: {
+  door: DoorNode
+  kind: 'move' | 'duplicate' | 'delete'
+  offsetIndex: number
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.2 : 1) * zoom
+
+  const texture = useMemo(() => getIconTexture(kind), [kind])
+  const material = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        map: texture,
+        side: DoubleSide,
+        // alphaTest discards the SVG's transparent background so the icon
+        // doesn't ghost behind the door when depthTest is off.
+        alphaTest: 0.4,
+        transparent: true,
+        opacity: 1,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [texture],
+  )
+
+  useEffect(() => {
+    material.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [material, isHovered])
+  useEffect(() => () => material.dispose(), [material])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'pointer') {
+        document.body.style.cursor = ''
+      }
+    }
+  }, [])
+
+  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    sfxEmitter.emit('sfx:item-pick')
+    document.body.style.cursor = ''
+    setIsHovered(false)
+
+    if (kind === 'move') {
+      // Keep the door selected so it stays the active item when the move
+      // commits; the `!movingNode` guard on the handles hides them during
+      // the drag itself.
+      useEditor.getState().setMovingNode(door)
+      return
+    }
+
+    if (kind === 'delete') {
+      sfxEmitter.emit('sfx:structure-delete')
+      useViewer.getState().setSelection({ selectedIds: [] })
+      useScene.getState().deleteNode(door.id as AnyNodeId)
+      return
+    }
+
+    // duplicate — clone the door, tag as new, parent under the same wall,
+    // hand it to the move tool, and re-point selection at the duplicate so
+    // it becomes the active item once placed.
+    useScene.temporal.getState().pause()
+    const input = structuredClone(door) as Record<string, unknown>
+    delete input.id
+    const existingMetadata =
+      input.metadata && typeof input.metadata === 'object' && !Array.isArray(input.metadata)
+        ? (input.metadata as Record<string, unknown>)
+        : {}
+    input.metadata = { ...existingMetadata, isNew: true }
+    try {
+      const dup = DoorNode.parse(input)
+      useScene.getState().createNode(dup, dup.parentId as AnyNodeId)
+      useEditor.getState().setMovingNode(dup)
+      useViewer.getState().setSelection({ selectedIds: [dup.id] })
+    } catch (err) {
+      console.error('Failed to duplicate door', err)
+      useScene.temporal.getState().resume()
+    }
+  }
+
+  return (
+    <group
+      onPointerDown={onPointerDown}
+      onPointerEnter={(event) => {
+        event.stopPropagation()
+        setIsHovered(true)
+        document.body.style.cursor = 'pointer'
+      }}
+      onPointerLeave={(event) => {
+        event.stopPropagation()
+        setIsHovered(false)
+        if (document.body.style.cursor === 'pointer') {
+          document.body.style.cursor = ''
+        }
+      }}
+      position={[offsetIndex * GROUND_MENU_SPACING, 0, 0]}
+      scale={scale}
+    >
+      <mesh material={material} renderOrder={1010} rotation={[-Math.PI / 2, 0, 0]}>
+        <planeGeometry args={[GROUND_ICON_SIZE, GROUND_ICON_SIZE]} />
+      </mesh>
+    </group>
+  )
+}
+
+// Lucide Move + Copy + Trash2 — matches the icons the HTML floating menu
+// uses, so the in-world version reads as the same action without retraining.
+const ICON_SVGS: Record<'move' | 'duplicate' | 'delete', string> = {
+  move: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 9l-3 3 3 3"/><path d="M9 5l3-3 3 3"/><path d="M15 19l-3 3-3-3"/><path d="M19 9l3 3-3 3"/><path d="M2 12h20"/><path d="M12 2v20"/></svg>`,
+  duplicate: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
+  delete: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
+}
+
+const ICON_TEXTURE_CACHE = new Map<string, CanvasTexture>()
+const ICON_TEXTURE_SIZE = 128
+
+function getIconTexture(kind: 'move' | 'duplicate' | 'delete'): CanvasTexture {
+  const cached = ICON_TEXTURE_CACHE.get(kind)
+  if (cached) return cached
+
+  const canvas = document.createElement('canvas')
+  canvas.width = ICON_TEXTURE_SIZE
+  canvas.height = ICON_TEXTURE_SIZE
+  const texture = new CanvasTexture(canvas)
+  texture.colorSpace = SRGBColorSpace
+  ICON_TEXTURE_CACHE.set(kind, texture)
+
+  const img = new Image()
+  img.onload = () => {
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+    ctx.clearRect(0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
+    ctx.drawImage(img, 0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
+    texture.needsUpdate = true
+  }
+  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(ICON_SVGS[kind])}`
+
+  return texture
+}
diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index 10df97cac..4d5c42ff8 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -453,6 +453,8 @@ export function FloatingActionMenu() {
   // (`WallGroundActionMenu` in `wall-move-side-handles.tsx`). Skip the
   // HTML floating menu for them so we don't render duplicate UI.
   if (node?.type === 'wall') return null
+  // Doors use the in-world `DoorGroundActionMenu` for the same reason.
+  if (node?.type === 'door') return null
 
   return (
     <group>
diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index f03cfa96f..52c5be060 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -54,6 +54,7 @@ import { SettingsPanel, type SettingsPanelProps } from '../ui/sidebar/panels/set
 import { SitePanel, type SitePanelProps } from '../ui/sidebar/panels/site-panel'
 import type { SidebarTab } from '../ui/sidebar/tab-bar'
 import { CustomCameraControls } from './custom-camera-controls'
+import { DoorSideHandles } from './door-side-handles'
 import { EditorLayoutV2 } from './editor-layout-v2'
 import { ExportManager } from './export-manager'
 import { FirstPersonControls, FirstPersonOverlay } from './first-person-controls'
@@ -588,6 +589,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       {!isFirstPersonMode && <SelectionManager />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <BoxSelectTool />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <WallMoveSideHandles />}
+      {!(isVersionPreviewMode || isFirstPersonMode) && <DoorSideHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingActionMenu />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingBuildingActionMenu />}
       {!isFirstPersonMode && <WallMeasurementLabel />}
diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
index f1834c8b9..ae319b276 100644
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -35,21 +35,25 @@ import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
 
-const HANDLE_OFFSET = 0.42
-const HANDLE_MIN_OFFSET = 0.5
-const HANDLE_MIN_HEIGHT = 0.62
+const HANDLE_OFFSET = 0.27
+const HANDLE_MIN_OFFSET = 0.33
+const HANDLE_MIN_HEIGHT = 0.4
 const HANDLE_TOP_INSET = 0.08
-const HEIGHT_HANDLE_OFFSET = 0.4
+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_DASH_SIZE = 0.1
 const CORNER_GAP_SIZE = 0.07
 const CORNER_DASH_THICKNESS = 0.006
 const CORNER_FLOOR_OFFSET = 0.01
 const GROUND_MENU_FACE_CLEARANCE = 0.85
-const GROUND_MENU_SPACING = 0.6
+const GROUND_MENU_SPACING = 0.32
+const GROUND_ICON_SIZE = 0.22
 const GROUND_ICON_LIFT = 0.1
 // Dead-zone width (world units) around the wall plane before the menu
 // commits to the opposite face. Prevents per-frame flicker when the
@@ -68,6 +72,20 @@ type WallMoveHandle = {
   rotationY: number
 }
 
+// Pre-empt the synthetic `click` the browser fires immediately after a
+// drag's pointerup. Without this, PointerMissedHandler treats the click
+// as "missed" and deselects the wall when the height arrow drag commits.
+function swallowNextClick() {
+  const swallow = (clickEvent: Event) => {
+    clickEvent.stopPropagation()
+    clickEvent.preventDefault()
+  }
+  window.addEventListener('click', swallow, { capture: true, once: true })
+  setTimeout(() => {
+    window.removeEventListener('click', swallow, { capture: true })
+  }, 300)
+}
+
 function createArrowHandleGeometry() {
   // Classic arrow silhouette — chevron head + rectangular shaft — extruded
   // slightly so the handle reads as a 3D plate but stays visually light.
@@ -432,7 +450,7 @@ function WallGroundActionIconV2({
       scale={scale}
     >
       <mesh material={material} renderOrder={1004} rotation={[-Math.PI / 2, 0, 0]}>
-        <planeGeometry args={[0.36, 0.36]} />
+        <planeGeometry args={[GROUND_ICON_SIZE, GROUND_ICON_SIZE]} />
       </mesh>
     </group>
   )
@@ -634,7 +652,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
   )
   const { camera, raycaster, gl } = useThree()
   const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.12 : 1) * zoom
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
   const dragCleanupRef = useRef<(() => void) | null>(null)
 
   useEffect(() => {
@@ -701,6 +719,10 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
     document.body.style.cursor = 'ns-resize'
     sfxEmitter.emit('sfx:item-pick')
     useEditor.getState().setResizingWallHeight(wall)
+    // 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.
+    useViewer.getState().setHandleDragging(true)
     useScene.temporal.getState().pause()
 
     const onMove = (e: PointerEvent) => {
@@ -721,9 +743,11 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       }
       useScene.temporal.getState().resume()
       useEditor.getState().setResizingWallHeight(null)
+      useViewer.getState().setHandleDragging(false)
       dragCleanupRef.current = null
     }
     const onUp = () => {
+      swallowNextClick()
       sfxEmitter.emit('sfx:item-place')
       cleanup()
     }
@@ -782,7 +806,7 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
 
   const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
 
-  const scale = (isHovered ? 1.12 : 1) * zoom
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
 
   useEffect(() => {
     arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
@@ -809,7 +833,8 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
     useEditor.getState().setMovingFenceEndpoint(null)
     useEditor.getState().setCurvingWall(null)
     useEditor.getState().setCurvingFence(null)
-    useViewer.getState().setSelection({ selectedIds: [] })
+    // Keep the wall selected so it stays the active item once the move
+    // commits; the `!movingNode` guard on the handles hides them mid-drag.
   }
 
   return (
@@ -860,7 +885,7 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
   const { camera } = useThree()
 
   const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.12 : 1) * zoom
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
 
   useEffect(() => {
     arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
@@ -887,7 +912,7 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
     useEditor.getState().setMovingFenceEndpoint(null)
     useEditor.getState().setCurvingWall(null)
     useEditor.getState().setCurvingFence(null)
-    useViewer.getState().setSelection({ selectedIds: [] })
+    // Keep the fence selected so it stays active once the move commits.
   }
 
   return (
diff --git a/packages/editor/src/store/use-editor.tsx b/packages/editor/src/store/use-editor.tsx
index 73814186e..1e328d057 100644
--- a/packages/editor/src/store/use-editor.tsx
+++ b/packages/editor/src/store/use-editor.tsx
@@ -213,6 +213,10 @@ type EditorState = {
   setMovingFenceEndpoint: (value: MovingFenceEndpoint | null) => void
   resizingWallHeight: WallNode | null
   setResizingWallHeight: (wall: WallNode | null) => void
+  resizingDoorHeight: DoorNode | null
+  setResizingDoorHeight: (door: DoorNode | null) => void
+  resizingDoorWidth: DoorNode | null
+  setResizingDoorWidth: (door: DoorNode | null) => void
   curvingWall: WallNode | null
   setCurvingWall: (wall: WallNode | null) => void
   curvingFence: FenceNode | null
@@ -636,6 +640,10 @@ const useEditor = create<EditorState>()(
       setMovingFenceEndpoint: (value) => set({ movingFenceEndpoint: value }),
       resizingWallHeight: null,
       setResizingWallHeight: (wall) => set({ resizingWallHeight: wall }),
+      resizingDoorHeight: null,
+      setResizingDoorHeight: (door) => set({ resizingDoorHeight: door }),
+      resizingDoorWidth: null,
+      setResizingDoorWidth: (door) => set({ resizingDoorWidth: door }),
       curvingWall: null,
       setCurvingWall: (wall) => set({ curvingWall: wall }),
       curvingFence: null,
diff --git a/packages/nodes/src/column/panel.tsx b/packages/nodes/src/column/panel.tsx
index b32ca4e07..60afe470d 100644
--- a/packages/nodes/src/column/panel.tsx
+++ b/packages/nodes/src/column/panel.tsx
@@ -260,13 +260,13 @@ export default function ColumnPanel() {
       </PanelSection>
 
       <PanelSection title="Shape">
-        <div className="grid grid-cols-2 gap-1.5 px-1 pt-1">
+        <div className="grid grid-cols-2 gap-2 px-1 pt-1">
           {SUPPORT_STYLE_OPTIONS.map((option) => {
             const isSelected = supportStyle === option.value
             return (
               <button
                 className={cn(
-                  'flex min-h-12 items-center rounded-lg border px-2.5 text-left text-xs transition-colors',
+                  'flex min-h-12 items-center rounded-lg border px-3 py-2.5 text-left text-xs transition-colors',
                   isSelected
                     ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
                     : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
diff --git a/packages/nodes/src/door/panel.tsx b/packages/nodes/src/door/panel.tsx
index 7636636ce..57966d4ef 100644
--- a/packages/nodes/src/door/panel.tsx
+++ b/packages/nodes/src/door/panel.tsx
@@ -650,13 +650,13 @@ export default function DoorPanel() {
           />
         </div>
         {!isOpening && (
-          <div className="grid grid-cols-2 gap-1.5 px-1 pt-1">
+          <div className="grid grid-cols-2 gap-2 px-1 pt-1">
             {(isGarageDoor ? garageDoorTypeOptions : doorTypeOptions).map((option) => {
               const isSelected = doorType === option.value
               return (
                 <button
                   className={cn(
-                    'flex min-h-12 items-center gap-2 rounded-lg border px-2.5 text-left text-xs transition-colors',
+                    'flex min-h-12 items-center gap-2.5 rounded-lg border px-3 py-2.5 text-left text-xs transition-colors',
                     isSelected
                       ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
                       : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
@@ -668,7 +668,7 @@ export default function DoorPanel() {
                   onClick={() => handleUpdate(getDoorTypeUpdates(option.value))}
                   type="button"
                 >
-                  <DoorOpen className="h-3.5 w-3.5 shrink-0" />
+                  <DoorOpen className="h-4 w-4 shrink-0" />
                   <span className="truncate font-medium">{option.label}</span>
                 </button>
               )
diff --git a/packages/nodes/src/skylight/panel.tsx b/packages/nodes/src/skylight/panel.tsx
index 24a9301f1..255c12b13 100644
--- a/packages/nodes/src/skylight/panel.tsx
+++ b/packages/nodes/src/skylight/panel.tsx
@@ -265,13 +265,13 @@ export default function SkylightPanel() {
       width={300}
     >
       <PanelSection title="Type">
-        <div className="grid grid-cols-2 gap-1.5 px-1 pt-1">
+        <div className="grid grid-cols-2 gap-2 px-1 pt-1">
           {SKYLIGHT_TYPE_ORDER.map((skylightType) => {
             const isSelected = activeSkylightType === skylightType
             return (
               <button
                 className={cn(
-                  'flex min-h-12 items-center gap-2 rounded-lg border px-2.5 py-2 text-left text-xs transition-colors',
+                  'flex min-h-12 items-center gap-2.5 rounded-lg border px-3 py-2.5 text-left text-xs transition-colors',
                   isSelected
                     ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
                     : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
diff --git a/packages/nodes/src/window/panel.tsx b/packages/nodes/src/window/panel.tsx
index 2c4fcfb3a..21e911952 100644
--- a/packages/nodes/src/window/panel.tsx
+++ b/packages/nodes/src/window/panel.tsx
@@ -495,13 +495,13 @@ export default function WindowPanel() {
 
       {showWindowTypeSection && (
         <PanelSection title="Window Type">
-          <div className="grid grid-cols-2 gap-1.5 px-1 pt-1">
+          <div className="grid grid-cols-2 gap-2 px-1 pt-1">
             {windowTypeOptions.map((option) => {
               const isSelected = displayedWindowType === option.value
               return (
                 <button
                   className={cn(
-                    'flex min-h-12 items-center rounded-lg border px-2.5 text-left text-xs transition-colors',
+                    'flex min-h-12 items-center rounded-lg border px-3 py-2.5 text-left text-xs transition-colors',
                     isSelected
                       ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
                       : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
diff --git a/packages/viewer/src/components/viewer/selection-manager.tsx b/packages/viewer/src/components/viewer/selection-manager.tsx
index 874d6c2c4..7ae36303f 100644
--- a/packages/viewer/src/components/viewer/selection-manager.tsx
+++ b/packages/viewer/src/components/viewer/selection-manager.tsx
@@ -398,7 +398,8 @@ const PointerMissedHandler = ({
   useEffect(() => {
     const handleClick = (event: MouseEvent) => {
       // Only handle left clicks
-      if (useViewer.getState().cameraDragging) return
+      const viewerState = useViewer.getState()
+      if (viewerState.cameraDragging || viewerState.handleDragging) return
       if (event.button !== 0) return
 
       // Use requestAnimationFrame to check after R3F event handlers
diff --git a/packages/viewer/src/hooks/use-node-events.ts b/packages/viewer/src/hooks/use-node-events.ts
index ea43e4442..ed1cdf556 100644
--- a/packages/viewer/src/hooks/use-node-events.ts
+++ b/packages/viewer/src/hooks/use-node-events.ts
@@ -36,14 +36,24 @@ export function useNodeEvents<K extends AnyNodeType>(node: NodeByKind<K>, type:
     emitter.emit(eventKey, payload as never)
   }
 
+  // Suppress node pointer events while an interaction drag is in
+  // progress. `cameraDragging` covers orbit/pan/dolly; `handleDragging`
+  // covers in-world handle drags (height arrow, width arrow, etc.).
+  // Without this, the synthesized click on pointerup would reroute
+  // selection to whatever mesh the cursor lands on at release.
+  const isInteractionActive = () => {
+    const s = useViewer.getState()
+    return s.cameraDragging || s.handleDragging
+  }
+
   return {
     onPointerDown: (e: ThreeEvent<PointerEvent>) => {
-      if (useViewer.getState().cameraDragging) return
+      if (isInteractionActive()) return
       if (e.button !== 0) return
       emit('pointerdown', e)
     },
     onPointerUp: (e: ThreeEvent<PointerEvent>) => {
-      if (useViewer.getState().cameraDragging) return
+      if (isInteractionActive()) return
       if (e.button !== 0) return
       emit('pointerup', e)
       // Synthesize a click event on pointer up to be more forgiving than R3F's default onClick
@@ -55,23 +65,23 @@ export function useNodeEvents<K extends AnyNodeType>(node: NodeByKind<K>, type:
       // This prevents double-clicks from firing twice.
     },
     onPointerEnter: (e: ThreeEvent<PointerEvent>) => {
-      if (useViewer.getState().cameraDragging) return
+      if (isInteractionActive()) return
       emit('enter', e)
     },
     onPointerLeave: (e: ThreeEvent<PointerEvent>) => {
-      if (useViewer.getState().cameraDragging) return
+      if (isInteractionActive()) return
       emit('leave', e)
     },
     onPointerMove: (e: ThreeEvent<PointerEvent>) => {
-      if (useViewer.getState().cameraDragging) return
+      if (isInteractionActive()) return
       emit('move', e)
     },
     onDoubleClick: (e: ThreeEvent<PointerEvent>) => {
-      if (useViewer.getState().cameraDragging) return
+      if (isInteractionActive()) return
       emit('double-click', e)
     },
     onContextMenu: (e: ThreeEvent<PointerEvent>) => {
-      if (useViewer.getState().cameraDragging) return
+      if (isInteractionActive()) return
       emit('context-menu', e)
     },
   }
diff --git a/packages/viewer/src/store/use-viewer.ts b/packages/viewer/src/store/use-viewer.ts
index 00649a633..843154fb4 100644
--- a/packages/viewer/src/store/use-viewer.ts
+++ b/packages/viewer/src/store/use-viewer.ts
@@ -76,6 +76,17 @@ type ViewerState = {
 
   cameraDragging: boolean
   setCameraDragging: (dragging: boolean) => void
+
+  /**
+   * True while an in-world handle drag is in progress (height arrow,
+   * width arrow, etc.). Suppresses node pointer event routing so the
+   * synthetic click on pointerup doesn't reroute selection to whatever
+   * mesh the cursor lands on at release. Conceptually a sibling of
+   * `cameraDragging` — both mean "user is dragging; don't treat the next
+   * pointerup as a click on the scene."
+   */
+  handleDragging: boolean
+  setHandleDragging: (dragging: boolean) => void
 }
 
 const useViewer = create<ViewerState>()(
@@ -203,6 +214,8 @@ const useViewer = create<ViewerState>()(
 
       cameraDragging: false,
       setCameraDragging: (dragging) => set({ cameraDragging: dragging }),
+      handleDragging: false,
+      setHandleDragging: (dragging) => set({ handleDragging: dragging }),
     }),
     {
       name: 'viewer-preferences',

From be87821542d2a06d9381e6c9b113c3d7673802f9 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sun, 24 May 2026 00:46:59 +0530
Subject: [PATCH 17/48] door: 2D width arrows + world-relative move dot,
 deterministic commits
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Side-arrow width drag in the 2D floor plan: doors now emit two width
arrows at the wall-tangent edges when selected, routed through a new
`resize-width` affordance that anchors at the opposite edge, clamps to
wall bounds, and previews per-tick via scene writes so both the floor
plan and the 3D viewer track the drag in real time.

`move-arrow` kind gains optional `affordance` + `payload` so the same
chevron primitive can route to either the move flow (walls) or an
arbitrary affordance (door width-resize) without forking the renderer.

Move-dot for the door is now world-anchored — it scales with zoom in
place of the previous screen-constant size, matching the rest of the
door's chrome.

Both `doorWidthAffordance.commit()` and `doorFloorplanMoveTarget.commit()`
own their atomic final write so the dispatchers take the deterministic
revert → resume → commit path. The diff path was silently reverting
when the post-apply state happened to match the snapshot.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/core/src/registry/types.ts           |  10 ++
 .../renderers/floorplan-registry-layer.tsx    |  61 +++++----
 packages/nodes/src/door/definition.ts         |   8 ++
 .../nodes/src/door/floorplan-affordances.ts   | 125 ++++++++++++++++++
 packages/nodes/src/door/floorplan-move.ts     |  44 +++++-
 packages/nodes/src/door/floorplan.ts          |  23 ++++
 6 files changed, 241 insertions(+), 30 deletions(-)
 create mode 100644 packages/nodes/src/door/floorplan-affordances.ts

diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index c69a74ca0..207160ef8 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -377,6 +377,16 @@ export type FloorplanGeometry =
       point: FloorplanPoint
       /** Rotation in radians; 0 points along +x in plan coords. */
       angle: number
+      /**
+       * Optional affordance routing. When set, pointer-down on the arrow
+       * starts a `def.floorplanAffordances?.[affordance]` session with the
+       * given `payload` (same dispatch path as `edge-handle`) instead of
+       * the default `setMovingNode` flow. Used by doors for the in-plane
+       * width-resize handles that visually mirror the move arrow shape but
+       * drive a different mutation.
+       */
+      affordance?: string
+      payload?: unknown
     }
   /**
    * Centered length / distance label. Renders as a small rounded
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
index 60237b381..d900a9b55 100644
--- a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
@@ -779,15 +779,19 @@ function InteractiveGeometry({
         if (!palette) return <></>
         const moveHandleId = `${nodeId}:move`
         const isHovered = hoveredHandleId === moveHandleId
-        // Move dots are visually bigger than endpoint handles — the
-        // legacy prod render uses ~13px outer / ~6px dot. Endpoint
-        // handles top out at 8/9px because there are usually two per
-        // wall + linked walls + curve handle nearby; the move dot is
-        // a singleton centerpiece so it can afford the extra weight.
-        const baseRadiusPx = 13
-        const hoverRadiusPx = 15
-        const outerRadius = (isHovered ? hoverRadiusPx : baseRadiusPx) * unitsPerPixel
-        const dotRadius = 6 * unitsPerPixel
+        // World-relative sizing: the move dot is anchored to the door,
+        // not to the screen, so it grows when the user zooms in and
+        // shrinks when they zoom out — same scaling rule as the door
+        // footprint itself. Sizes are tuned for a ~0.9 m door at default
+        // zoom; the ratios match the legacy 13/15/6/16/7/18 px stack.
+        const baseRadius = 0.1
+        const hoverRadius = 0.115
+        const outerRadius = isHovered ? hoverRadius : baseRadius
+        const dotRadius = 0.045
+        const fillStroke = 0.005
+        const glowStroke = 0.12
+        const ringStroke = 0.055
+        const hitStroke = 0.14
         // Same 5-circle stack as the orange endpoint dot — hover glow +
         // hover ring + filled outer + inner dot + transparent hit. On
         // pointer-down, the layer calls `setMovingNode(node)`, which
@@ -808,9 +812,8 @@ function InteractiveGeometry({
               r={outerRadius}
               stroke={palette.endpointHandleHoverStroke}
               strokeOpacity={0.16}
-              strokeWidth={ENDPOINT_HOVER_GLOW_STROKE_WIDTH_PX * unitsPerPixel}
+              strokeWidth={glowStroke}
               style={{ opacity: isHovered ? 1 : 0, transition: HOVER_TRANSITION }}
-              vectorEffect="non-scaling-stroke"
             />
             <circle
               cx={g.point[0]}
@@ -820,9 +823,8 @@ function InteractiveGeometry({
               r={outerRadius}
               stroke={palette.endpointHandleHoverStroke}
               strokeOpacity={0.52}
-              strokeWidth={ENDPOINT_HOVER_RING_STROKE_WIDTH_PX * unitsPerPixel}
+              strokeWidth={ringStroke}
               style={{ opacity: isHovered ? 1 : 0, transition: HOVER_TRANSITION }}
-              vectorEffect="non-scaling-stroke"
             />
             <circle
               cx={g.point[0]}
@@ -832,8 +834,7 @@ function InteractiveGeometry({
               pointerEvents="none"
               r={outerRadius}
               stroke={palette.endpointHandleStroke}
-              strokeWidth="0.05"
-              vectorEffect="non-scaling-stroke"
+              strokeWidth={fillStroke}
             />
             <circle
               cx={g.point[0]}
@@ -841,7 +842,6 @@ function InteractiveGeometry({
               fill={palette.endpointHandleStroke}
               pointerEvents="none"
               r={dotRadius}
-              vectorEffect="non-scaling-stroke"
             />
             <circle
               cx={g.point[0]}
@@ -851,17 +851,19 @@ function InteractiveGeometry({
               pointerEvents="all"
               r={outerRadius}
               stroke="transparent"
-              strokeWidth={ENDPOINT_HIT_STROKE_WIDTH_PX * unitsPerPixel}
+              strokeWidth={hitStroke}
               style={{ cursor: 'move' }}
-              vectorEffect="non-scaling-stroke"
             />
           </g>
         )
       }
       case 'move-arrow': {
         if (!palette) return <></>
-        const moveHandleId = `${nodeId}:move`
-        const isHovered = hoveredHandleId === moveHandleId
+        // Affordance-routed arrows (door width-resize) get a per-payload
+        // handle id so each side can hover independently; default
+        // (move-flow) arrows share the node's :move id like the dot.
+        const handleId = g.affordance ? makeHandleId(nodeId, g.payload) : `${nodeId}:move`
+        const isHovered = hoveredHandleId === handleId
         // Arrow geometry in plan units (meters) — scales with the scene
         // so it shrinks on zoom-out and grows on zoom-in, matching the
         // wall it accompanies. Composed of a rectangular shaft + triangular
@@ -879,6 +881,9 @@ function InteractiveGeometry({
         // accent in `floating-action-menu.tsx`.
         const fill = isHovered ? '#a5b4fc' : '#8381ed'
         const angleDeg = (g.angle * 180) / Math.PI
+        const cursor = g.affordance ? 'ew-resize' : 'move'
+        const affordance = g.affordance
+        const payload = g.payload
         // No hover-grow: a scaling transform would enlarge the hit area
         // too, letting clicks just outside the visible arrow still start
         // a drag. Hover feedback is colour-only so the click region
@@ -893,11 +898,21 @@ function InteractiveGeometry({
             <path
               d={arrowD}
               fill="transparent"
-              onPointerDown={(e) => onMoveHandlePointerDown(e as ReactPointerEvent<SVGGElement>)}
-              onPointerEnter={() => onHandleHoverChange(moveHandleId)}
+              onPointerDown={(e) => {
+                if (affordance) {
+                  onHandlePointerDown(
+                    affordance,
+                    payload,
+                    e as ReactPointerEvent<SVGGElement>,
+                  )
+                } else {
+                  onMoveHandlePointerDown(e as ReactPointerEvent<SVGGElement>)
+                }
+              }}
+              onPointerEnter={() => onHandleHoverChange(handleId)}
               onPointerLeave={() => onHandleHoverChange(null)}
               pointerEvents="fill"
-              style={{ cursor: 'move' }}
+              style={{ cursor }}
             />
           </g>
         )
diff --git a/packages/nodes/src/door/definition.ts b/packages/nodes/src/door/definition.ts
index 49595e52f..4c952951c 100644
--- a/packages/nodes/src/door/definition.ts
+++ b/packages/nodes/src/door/definition.ts
@@ -1,4 +1,5 @@
 import type { NodeDefinition } from '@pascal-app/core'
+import { doorWidthAffordance } from './floorplan-affordances'
 import { buildDoorFloorplan } from './floorplan'
 import { doorFloorplanMoveTarget } from './floorplan-move'
 import { doorParametrics } from './parametrics'
@@ -77,6 +78,13 @@ export const doorDefinition: NodeDefinition<typeof DoorNode> = {
   // local-X to 0.5m, clamps inside wall bounds.
   floorplanMoveTarget: doorFloorplanMoveTarget,
 
+  // 2D drag affordances. `resize-width` drives the door's two side
+  // arrows — pointer-down on either arrow starts an anchored width drag
+  // (opposite edge stays fixed, clamped to wall bounds).
+  floorplanAffordances: {
+    'resize-width': doorWidthAffordance,
+  },
+
   toolHints: [
     { key: 'Left click', label: 'Place door on wall' },
     { key: 'Esc', label: 'Cancel' },
diff --git a/packages/nodes/src/door/floorplan-affordances.ts b/packages/nodes/src/door/floorplan-affordances.ts
new file mode 100644
index 000000000..d2e3e9a62
--- /dev/null
+++ b/packages/nodes/src/door/floorplan-affordances.ts
@@ -0,0 +1,125 @@
+import {
+  type AnyNodeId,
+  type DoorNode,
+  type FloorplanAffordance,
+  type FloorplanAffordanceSession,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
+
+const MIN_DOOR_WIDTH = 0.3
+
+type DoorWidthPayload = { side: 'start' | 'end' }
+
+/**
+ * 2D drag affordance for the door's width side-arrows. Sister to the 3D
+ * `DoorSideArrow` width drag in `packages/editor/src/components/editor/
+ * door-side-handles.tsx` — both anchor at the opposite door edge and clamp
+ * to wall bounds.
+ *
+ * Payload encodes which edge the user grabbed:
+ *   - `'start'`: arrow at the door edge closer to `wall.start`. The
+ *     opposite edge (toward `wall.end`) stays fixed.
+ *   - `'end'`: arrow at the edge closer to `wall.end`. The wall-start
+ *     edge stays fixed.
+ *
+ * Uses the scene-write preview pattern (writes directly to `useScene`
+ * each tick): the registry layer's `effectiveNode` only merges live
+ * overrides for walls, so an override-based preview wouldn't show on
+ * doors. The dispatcher snapshots / pauses history at start, so per-tick
+ * scene writes still collapse to one undoable entry on commit.
+ */
+export const doorWidthAffordance: FloorplanAffordance<DoorNode> = {
+  start({ node, payload, nodes, initialPlanPoint }): FloorplanAffordanceSession {
+    const { side } = payload as DoorWidthPayload
+    const doorId = node.id as AnyNodeId
+    const wall = node.wallId ? (nodes[node.wallId as AnyNodeId] as WallNode | undefined) : undefined
+
+    const initialWidth = node.width
+    const initialDoorX = node.position[0]
+    const initialDoorY = node.position[1]
+    const initialDoorZ = node.position[2]
+
+    // Anchor (wall-local X) is the door edge OPPOSITE to the dragged
+    // side. Grow direction along the wall: +1 for 'end' (drag outward
+    // toward wall.end), -1 for 'start' (drag outward toward wall.start).
+    const growDir = side === 'end' ? 1 : -1
+    const anchorX =
+      side === 'end' ? initialDoorX - initialWidth / 2 : initialDoorX + initialWidth / 2
+
+    // Wall axis (level-local) for projecting pointer movement to a
+    // wall-local X delta.
+    const wallStart: readonly [number, number] = wall ? wall.start : [0, 0]
+    const wallEnd: readonly [number, number] = wall ? wall.end : [1, 0]
+    const dx = wallEnd[0] - wallStart[0]
+    const dz = wallEnd[1] - wallStart[1]
+    const wallLength = Math.hypot(dx, dz) || 1
+    const dirX = dx / wallLength
+    const dirZ = dz / wallLength
+
+    // Max width keeps the dragged edge inside the wall span. With the
+    // anchor fixed, the moving edge is `anchorX ± width`, so the largest
+    // legal width is the headroom on the grow side.
+    const maxWidth = growDir > 0 ? wallLength - anchorX : anchorX
+
+    const projectToWallLocalX = (planPoint: readonly [number, number]) => {
+      return (planPoint[0] - wallStart[0]) * dirX + (planPoint[1] - wallStart[1]) * dirZ
+    }
+
+    // Initial pointer in wall-local X — anchored to where the user
+    // actually pressed, so any subtle offset between the arrow's visual
+    // origin and the click point doesn't pre-bias the width delta.
+    const initialPointerLocalX = projectToWallLocalX(initialPlanPoint)
+
+    let lastWidth = initialWidth
+    let lastDoorX = initialDoorX
+
+    return {
+      affectedIds: [node.id],
+      apply({ planPoint }) {
+        const currentLocalX = projectToWallLocalX(planPoint)
+        const delta = (currentLocalX - initialPointerLocalX) * growDir
+        const newWidth = Math.min(
+          Math.max(MIN_DOOR_WIDTH, initialWidth + delta),
+          Math.max(MIN_DOOR_WIDTH, maxWidth),
+        )
+        const newDoorX = anchorX + growDir * (newWidth / 2)
+        lastWidth = newWidth
+        lastDoorX = newDoorX
+        // Scene-write preview so the 2D plan + 3D viewer both pick up
+        // the change immediately. The dispatcher paused history at
+        // session start, so per-tick writes don't pollute undo.
+        useScene.getState().updateNodes([
+          {
+            id: doorId,
+            data: {
+              width: newWidth,
+              position: [newDoorX, initialDoorY, initialDoorZ],
+            },
+          },
+        ])
+      },
+      canCommit() {
+        // Width is always clamped to >= MIN_DOOR_WIDTH inside apply, so
+        // any committed state is legal.
+        return true
+      },
+      commit() {
+        // Atomic, tracked final write. Owning the commit ourselves
+        // bypasses the dispatcher's diff path (which only re-applies
+        // fields that differ from the pre-drag snapshot — if the user
+        // drags back to the original size by accident, the diff is empty
+        // and the door would otherwise revert to its starting state).
+        useScene.getState().updateNodes([
+          {
+            id: doorId,
+            data: {
+              width: lastWidth,
+              position: [lastDoorX, initialDoorY, initialDoorZ],
+            },
+          },
+        ])
+      },
+    }
+  },
+}
diff --git a/packages/nodes/src/door/floorplan-move.ts b/packages/nodes/src/door/floorplan-move.ts
index d95ab68b9..93b3102f7 100644
--- a/packages/nodes/src/door/floorplan-move.ts
+++ b/packages/nodes/src/door/floorplan-move.ts
@@ -37,6 +37,17 @@ export const doorFloorplanMoveTarget: FloorplanMoveTarget<DoorNode> = ({ node })
     return wall ? (wall.parentId as AnyNodeId | null) : null
   })()
 
+  // Track the last successful placement so `commit()` can write it
+  // atomically — see the comment on `commit` below for why we don't
+  // rely on the dispatcher's diff path.
+  let lastValid: {
+    position: [number, number, number]
+    rotation: [number, number, number]
+    side: DoorNode['side']
+    parentId: string
+    wallId: string
+  } | null = null
+
   const session: FloorplanMoveTargetSession = {
     affectedIds: [node.id as AnyNodeId],
     apply({ planPoint, modifiers }) {
@@ -48,6 +59,14 @@ export const doorFloorplanMoveTarget: FloorplanMoveTarget<DoorNode> = ({ node })
       const snappedLocalX = modifiers.shiftKey ? hit.localX : snapToHalf(hit.localX)
       const { clampedX, clampedY } = clampToWall(hit.wall, snappedLocalX, node.width, node.height)
 
+      lastValid = {
+        position: [clampedX, clampedY, 0],
+        rotation: [0, hit.itemRotation, 0],
+        side: hit.side,
+        parentId: hit.wall.id,
+        wallId: hit.wall.id,
+      }
+
       // Build the updates atomically — position + rotation + side +
       // parentId + wallId in a single scene write. The current door's
       // parent might be a different wall; re-anchoring requires moving
@@ -56,13 +75,7 @@ export const doorFloorplanMoveTarget: FloorplanMoveTarget<DoorNode> = ({ node })
       useScene.getState().updateNodes([
         {
           id: node.id as AnyNodeId,
-          data: {
-            position: [clampedX, clampedY, 0],
-            rotation: [0, hit.itemRotation, 0],
-            side: hit.side,
-            parentId: hit.wall.id,
-            wallId: hit.wall.id,
-          },
+          data: lastValid,
         },
       ])
     },
@@ -81,6 +94,23 @@ export const doorFloorplanMoveTarget: FloorplanMoveTarget<DoorNode> = ({ node })
       )
       return !overlapping
     },
+    commit() {
+      // Own the atomic write so the overlay takes the deterministic
+      // commit-path (revert → resume → session.commit()). The dispatcher's
+      // diff path would otherwise re-derive the final state by comparing
+      // the post-apply scene to the snapshot — that works most of the
+      // time, but produces an empty diff (and silent revert) when the
+      // committed move happens to land on the same `parentId` AND has
+      // been re-applied with identical data. Owning commit removes that
+      // foot-gun without forcing the dispatcher to track per-key writes.
+      if (!lastValid) return
+      useScene.getState().updateNodes([
+        {
+          id: node.id as AnyNodeId,
+          data: lastValid,
+        },
+      ])
+    },
   }
 
   return session
diff --git a/packages/nodes/src/door/floorplan.ts b/packages/nodes/src/door/floorplan.ts
index 94fa2131d..61ac13e32 100644
--- a/packages/nodes/src/door/floorplan.ts
+++ b/packages/nodes/src/door/floorplan.ts
@@ -183,6 +183,29 @@ export function buildDoorFloorplan(node: DoorNode, ctx: GeometryContext): Floorp
       kind: 'move-handle',
       point: [cx, cz],
     })
+
+    // Width-resize arrows at each side of the door (along the wall
+    // direction). Pointer-down on either routes through the door's
+    // `resize-width` affordance — anchored at the opposite edge, clamped
+    // to wall bounds. Mirrors the 3D `DoorSideArrow` width drag.
+    const startEdgeX = cx - dirX * halfWidth
+    const startEdgeZ = cz - dirZ * halfWidth
+    const endEdgeX = cx + dirX * halfWidth
+    const endEdgeZ = cz + dirZ * halfWidth
+    children.push({
+      kind: 'move-arrow',
+      point: [startEdgeX, startEdgeZ],
+      angle: Math.atan2(-dirZ, -dirX),
+      affordance: 'resize-width',
+      payload: { side: 'start' },
+    })
+    children.push({
+      kind: 'move-arrow',
+      point: [endEdgeX, endEdgeZ],
+      angle: Math.atan2(dirZ, dirX),
+      affordance: 'resize-width',
+      payload: { side: 'end' },
+    })
   }
 
   // Placement-measurement dimensions — distances to adjacent openings

From 4994675c2804d2c639db8470473c82264b7111eb Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sun, 24 May 2026 01:09:37 +0530
Subject: [PATCH 18/48] window: in-world selection UI, 2D width arrows,
 deterministic commits
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bring window 3D + 2D selection chrome to parity with door. Selecting a
window in 3D now emits two side width arrows, top + bottom height arrows
(top anchors at the sill, bottom anchors at the lintel and clamps to the
wall floor), and an in-world action menu that rides just below the bottom
arrow's tip so the column moves with the sill.

2D plan adds two `resize-width` arrows at the start / end edges, routed
through the new `windowWidthAffordance` — same anchored-edge + wall-bounds
clamp + per-tick scene-write preview the door uses.

`windowFloorplanMoveTarget.commit()` is now self-owned: `apply()` snapshots
the last valid placement and `commit()` re-applies it, so the dispatcher
takes the deterministic revert → resume → commit path instead of the diff
path that silently reverts when the post-apply state happens to match
the snapshot. Mirrors the door fix.

The HTML floating-action-menu skips windows now that the in-world ground
menu owns those actions.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../editor/floating-action-menu.tsx           |   2 +
 .../editor/src/components/editor/index.tsx    |   2 +
 .../components/editor/window-side-handles.tsx | 787 ++++++++++++++++++
 packages/editor/src/store/use-editor.tsx      |   8 +
 packages/nodes/src/window/definition.ts       |   9 +
 .../nodes/src/window/floorplan-affordances.ts | 105 +++
 packages/nodes/src/window/floorplan-move.ts   |  42 +-
 packages/nodes/src/window/floorplan.ts        |  24 +
 8 files changed, 972 insertions(+), 7 deletions(-)
 create mode 100644 packages/editor/src/components/editor/window-side-handles.tsx
 create mode 100644 packages/nodes/src/window/floorplan-affordances.ts

diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index 4d5c42ff8..6efb09044 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -455,6 +455,8 @@ export function FloatingActionMenu() {
   if (node?.type === 'wall') return null
   // Doors use the in-world `DoorGroundActionMenu` for the same reason.
   if (node?.type === 'door') return null
+  // Windows use the in-world `WindowGroundActionMenu`.
+  if (node?.type === 'window') return null
 
   return (
     <group>
diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index 52c5be060..bbba01a1d 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -69,6 +69,7 @@ import { SnapshotCaptureOverlay } from './snapshot-capture-overlay'
 import { type SnapshotCameraData, ThumbnailGenerator } from './thumbnail-generator'
 import { WallMeasurementLabel } from './wall-measurement-label'
 import { WallMoveSideHandles } from './wall-move-side-handles'
+import { WindowSideHandles } from './window-side-handles'
 
 const CAMERA_CONTROLS_HINT_DISMISSED_STORAGE_KEY = 'editor-camera-controls-hint-dismissed:v1'
 const DELETE_CURSOR_BADGE_COLOR = '#ef4444'
@@ -590,6 +591,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       {!(isVersionPreviewMode || isFirstPersonMode) && <BoxSelectTool />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <WallMoveSideHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <DoorSideHandles />}
+      {!(isVersionPreviewMode || isFirstPersonMode) && <WindowSideHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingActionMenu />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingBuildingActionMenu />}
       {!isFirstPersonMode && <WallMeasurementLabel />}
diff --git a/packages/editor/src/components/editor/window-side-handles.tsx b/packages/editor/src/components/editor/window-side-handles.tsx
new file mode 100644
index 000000000..0f6d6fb6c
--- /dev/null
+++ b/packages/editor/src/components/editor/window-side-handles.tsx
@@ -0,0 +1,787 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  sceneRegistry,
+  useScene,
+  type WallNode,
+  WindowNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  CanvasTexture,
+  Color,
+  DoubleSide,
+  ExtrudeGeometry,
+  type Group,
+  type Object3D,
+  OrthographicCamera,
+  Plane,
+  Shape,
+  SRGBColorSpace,
+  Vector2,
+  Vector3,
+} from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { sfxEmitter } from '../../lib/sfx-bus'
+import useEditor from '../../store/use-editor'
+
+const SIDE_HANDLE_OFFSET = 0.24
+const HEIGHT_HANDLE_OFFSET = 0.24
+// Match the door arrow scale so the in-world chrome reads as one family.
+const ARROW_SCALE = 0.65
+const MIN_WINDOW_HEIGHT = 0.3
+const MIN_WINDOW_WIDTH = 0.3
+const ARROW_COLOR = '#8381ed'
+const ARROW_HOVER_COLOR = '#a5b4fc'
+const GROUND_MENU_FACE_CLEARANCE = 0.5
+const GROUND_MENU_SPACING = 0.32
+const GROUND_ICON_SIZE = 0.22
+const GROUND_MENU_SIDE_HYSTERESIS = 0.1
+const GROUND_MENU_LERP_RATE = 14
+// Length the chevron tip extends past the arrow's local origin in shape
+// space (matches the `0.22` X coordinate of the tip in `createArrowHandleGeometry`).
+const ARROW_TIP_EXTENT = 0.22 * ARROW_SCALE
+// Small wall-local gap between the bottom arrow's tip and the action menu.
+const MENU_BELOW_ARROW_GAP = 0.06
+
+// Mirror of door-side-handles `swallowNextClick`: pre-empt the synthetic
+// `click` the browser fires immediately after a drag's pointerup, so the
+// canvas-level PointerMissedHandler doesn't see "click on empty space" and
+// deselect the window the user just resized.
+function swallowNextClick() {
+  const swallow = (clickEvent: Event) => {
+    clickEvent.stopPropagation()
+    clickEvent.preventDefault()
+  }
+  window.addEventListener('click', swallow, { capture: true, once: true })
+  setTimeout(() => {
+    window.removeEventListener('click', swallow, { capture: true })
+  }, 300)
+}
+
+function createArrowHandleGeometry() {
+  // Same chevron+shaft silhouette used for wall and door handles, kept
+  // local so each handle file stays independent.
+  const shape = new Shape()
+  shape.moveTo(0.22, 0)
+  shape.lineTo(-0.04, 0.12)
+  shape.lineTo(-0.04, 0.035)
+  shape.lineTo(-0.2, 0.035)
+  shape.lineTo(-0.2, -0.035)
+  shape.lineTo(-0.04, -0.035)
+  shape.lineTo(-0.04, -0.12)
+  shape.lineTo(0.22, 0)
+
+  const geometry = new ExtrudeGeometry(shape, {
+    depth: 0.08,
+    bevelEnabled: true,
+    bevelThickness: 0.035,
+    bevelSize: 0.03,
+    bevelOffset: 0,
+    bevelSegments: 10,
+    curveSegments: 16,
+    steps: 1,
+  })
+  geometry.translate(0, 0, -0.04)
+  geometry.rotateX(-Math.PI / 2)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
+
+export function WindowSideHandles() {
+  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 selectedId = selectedIds.length === 1 ? selectedIds[0] : null
+  const selectedWindow = useScene((state) => {
+    const node = selectedId ? state.nodes[selectedId as AnyNodeId] : null
+    return node?.type === 'window' ? node : null
+  })
+
+  const shouldRender =
+    Boolean(selectedWindow) && !isFloorplanHovered && mode !== 'delete' && !movingNode
+
+  if (!shouldRender || !selectedWindow) return null
+  return <WindowSideHandlesForWindow windowNode={selectedWindow} />
+}
+
+function WindowSideHandlesForWindow({ windowNode }: { windowNode: WindowNode }) {
+  // Same portal-into-the-level pattern as DoorSideHandles: parenting handles
+  // under the wall mesh would make them part of the selection/hover outline
+  // pass. A wrapper group below mirrors the wall's pose each frame.
+  const wallParentId = useScene((state) => {
+    const wallNode = windowNode.parentId
+      ? (state.nodes[windowNode.parentId as AnyNodeId] as WallNode | undefined)
+      : undefined
+    return wallNode?.parentId ?? null
+  })
+
+  const [wallObject, setWallObject] = useState<Object3D | null>(() =>
+    windowNode.parentId ? (sceneRegistry.nodes.get(windowNode.parentId) ?? null) : null,
+  )
+  const [levelObject, setLevelObject] = useState<Object3D | null>(() =>
+    wallParentId ? (sceneRegistry.nodes.get(wallParentId as AnyNodeId) ?? null) : null,
+  )
+
+  useEffect(() => {
+    let frameId = 0
+    const resolve = () => {
+      const nextWall = windowNode.parentId
+        ? (sceneRegistry.nodes.get(windowNode.parentId) ?? null)
+        : null
+      const nextLevel = wallParentId
+        ? (sceneRegistry.nodes.get(wallParentId as AnyNodeId) ?? null)
+        : null
+      setWallObject((current) => (current === nextWall ? current : nextWall))
+      setLevelObject((current) => (current === nextLevel ? current : nextLevel))
+      if (!nextWall || !nextLevel) frameId = window.requestAnimationFrame(resolve)
+    }
+    resolve()
+    return () => {
+      if (frameId) window.cancelAnimationFrame(frameId)
+    }
+  }, [windowNode.parentId, wallParentId])
+
+  const wrapperRef = useRef<Group>(null)
+
+  useFrame(() => {
+    const wrapper = wrapperRef.current
+    if (!wrapper || !wallObject) return
+    wrapper.position.copy(wallObject.position)
+    wrapper.quaternion.copy(wallObject.quaternion)
+  })
+
+  if (!levelObject || !wallObject) return null
+
+  const rotation: [number, number, number] =
+    typeof windowNode.rotation === 'number'
+      ? [0, windowNode.rotation, 0]
+      : (windowNode.rotation ?? [0, 0, 0])
+
+  return createPortal(
+    <group ref={wrapperRef}>
+      <group position={windowNode.position} rotation={rotation}>
+        <WindowSideArrow side="left" wallObject={wallObject} windowNode={windowNode} />
+        <WindowSideArrow side="right" wallObject={wallObject} windowNode={windowNode} />
+        <WindowHeightArrowHandle edge="top" wallObject={wallObject} windowNode={windowNode} />
+        <WindowHeightArrowHandle edge="bottom" wallObject={wallObject} windowNode={windowNode} />
+      </group>
+      <WindowGroundActionMenu wallObject={wallObject} windowNode={windowNode} />
+    </group>,
+    levelObject,
+  )
+}
+
+function WindowSideArrow({
+  side,
+  wallObject,
+  windowNode,
+}: {
+  side: 'left' | 'right'
+  wallObject: Object3D
+  windowNode: WindowNode
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const arrowMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true,
+        opacity: 1,
+      }),
+    [],
+  )
+  const { camera, raycaster, gl } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [arrowMaterial, isHovered])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'ew-resize') {
+        document.body.style.cursor = ''
+      }
+      dragCleanupRef.current?.()
+    }
+  }, [])
+
+  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
+
+  const activateWidthResize = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+
+    // Window center in world space. Raycast plane is vertical through the
+    // window, normal pointed at the camera — same setup as the height
+    // arrow but we read the pointer's wall-local X to derive width.
+    wallObject.updateMatrixWorld()
+    const centerWorld = new Vector3(
+      windowNode.position[0],
+      windowNode.position[1],
+      windowNode.position[2],
+    )
+    centerWorld.applyMatrix4(wallObject.matrixWorld)
+
+    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
+    if (planeNormal.lengthSq() === 0) return
+    planeNormal.normalize()
+    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
+
+    const ndc = new Vector2()
+    const setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hitWorld = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
+    const hitLocal = wallObject.worldToLocal(hitWorld.clone())
+
+    const initialWidth = windowNode.width
+    const initialPositionX = windowNode.position[0]
+    const initialPositionZ = windowNode.position[2]
+    const rotY =
+      typeof windowNode.rotation === 'number'
+        ? windowNode.rotation
+        : (windowNode.rotation?.[1] ?? 0)
+    // Window-local +X expressed in wall-local: rotating (1,0,0) by rotY around Y.
+    const armX = Math.cos(rotY)
+    const armZ = -Math.sin(rotY)
+    // sign === +1 grows the window from the window-local right edge (left
+    // edge anchored), sign === -1 grows from the left edge (right edge
+    // anchored).
+    const sign = side === 'right' ? 1 : -1
+    const initialPointerX = hitLocal.x
+    const initialPointerZ = hitLocal.z
+
+    const wallNode = windowNode.wallId
+      ? (useScene.getState().nodes[windowNode.wallId as AnyNodeId] as WallNode | undefined)
+      : undefined
+    const wallLength = wallNode
+      ? Math.hypot(wallNode.end[0] - wallNode.start[0], wallNode.end[1] - wallNode.start[1])
+      : Number.POSITIVE_INFINITY
+
+    const anchorWallX = initialPositionX - sign * (initialWidth / 2) * armX
+    const headroomRight = Math.max(0, wallLength - anchorWallX)
+    const headroomLeft = Math.max(0, anchorWallX)
+    const growDir = sign * armX
+    const headroomAlongArm =
+      growDir > 0
+        ? headroomRight
+        : growDir < 0
+          ? headroomLeft
+          : Math.max(headroomLeft, headroomRight)
+    const maxWidth = Math.max(MIN_WINDOW_WIDTH, headroomAlongArm)
+
+    document.body.style.cursor = 'ew-resize'
+    sfxEmitter.emit('sfx:item-pick')
+    useEditor.getState().setResizingWindowWidth(windowNode)
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    const windowId = windowNode.id as AnyNodeId
+
+    const onMove = (e: PointerEvent) => {
+      setNDC(e.clientX, e.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const intersectionWorld = new Vector3()
+      if (!raycaster.ray.intersectPlane(plane, intersectionWorld)) return
+      const intersectionLocal = wallObject.worldToLocal(intersectionWorld.clone())
+      const dx = intersectionLocal.x - initialPointerX
+      const dz = intersectionLocal.z - initialPointerZ
+      const armDelta = dx * armX + dz * armZ
+      const widthDelta = sign * armDelta
+      const newWidth = Math.min(maxWidth, Math.max(MIN_WINDOW_WIDTH, initialWidth + widthDelta))
+      const half = (newWidth - initialWidth) / 2
+      const newPositionX = initialPositionX + sign * half * armX
+      const newPositionZ = initialPositionZ + sign * half * armZ
+      useScene.getState().updateNode(windowId, {
+        width: newWidth,
+        position: [newPositionX, windowNode.position[1], newPositionZ],
+      })
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === 'ew-resize') {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useEditor.getState().setResizingWindowWidth(null)
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+
+    dragCleanupRef.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  const direction = side === 'right' ? 1 : -1
+  const x = direction * (windowNode.width / 2 + SIDE_HANDLE_OFFSET)
+  const rotationY = side === 'right' ? 0 : Math.PI
+
+  return (
+    <group position={[x, 0, 0]} rotation={[0, rotationY, 0]} scale={scale}>
+      <mesh
+        frustumCulled={false}
+        geometry={arrowGeometry}
+        material={arrowMaterial}
+        onPointerDown={activateWidthResize}
+        onPointerEnter={(event) => {
+          event.stopPropagation()
+          setIsHovered(true)
+          document.body.style.cursor = 'ew-resize'
+        }}
+        onPointerLeave={(event) => {
+          event.stopPropagation()
+          setIsHovered(false)
+          if (document.body.style.cursor === 'ew-resize') {
+            document.body.style.cursor = ''
+          }
+        }}
+        renderOrder={1010}
+      />
+    </group>
+  )
+}
+
+function WindowHeightArrowHandle({
+  edge,
+  wallObject,
+  windowNode,
+}: {
+  edge: 'top' | 'bottom'
+  wallObject: Object3D
+  windowNode: WindowNode
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const arrowMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true,
+        opacity: 1,
+      }),
+    [],
+  )
+  const { camera, raycaster, gl } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [arrowMaterial, isHovered])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'ns-resize') {
+        document.body.style.cursor = ''
+      }
+      dragCleanupRef.current?.()
+    }
+  }, [])
+
+  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
+
+  const edgeSign = edge === 'top' ? 1 : -1
+  const handleY = edgeSign * (windowNode.height / 2 + HEIGHT_HANDLE_OFFSET)
+  // Top arrow points up via the door-style [0, π/2, π/2]; flipping the Z
+  // roll sends the chevron tip to -Y for the bottom arrow.
+  const arrowInnerRotation: [number, number, number] =
+    edge === 'top' ? [0, Math.PI / 2, Math.PI / 2] : [0, Math.PI / 2, -Math.PI / 2]
+
+  const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+
+    wallObject.updateMatrixWorld()
+    const centerWorld = new Vector3(
+      windowNode.position[0],
+      windowNode.position[1],
+      windowNode.position[2],
+    )
+    centerWorld.applyMatrix4(wallObject.matrixWorld)
+
+    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
+    if (planeNormal.lengthSq() === 0) return
+    planeNormal.normalize()
+    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
+
+    const ndc = new Vector2()
+    const setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hit = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hit)) return
+
+    const initialHeight = windowNode.height
+    const initialPositionY = windowNode.position[1]
+    // Anchor the OPPOSITE edge in wall-local Y so only the dragged edge
+    // moves. Top arrow → bottom edge stays; bottom arrow → top edge stays.
+    const bottomLocalY = initialPositionY - initialHeight / 2
+    const topLocalY = initialPositionY + initialHeight / 2
+    const anchorY = edge === 'top' ? bottomLocalY : topLocalY
+    const initialPointerY = hit.y
+    const windowId = windowNode.id as AnyNodeId
+    const wallNode = windowNode.wallId
+      ? (useScene.getState().nodes[windowNode.wallId as AnyNodeId] as WallNode | undefined)
+      : undefined
+    const maxHeightCap = wallNode?.height ?? Number.POSITIVE_INFINITY
+    // Top arrow grows upward → wall headroom above the bottom anchor.
+    // Bottom arrow grows downward → all of the top anchor's wall-local Y
+    // is available (the wall floor at Y=0 is the absolute clamp).
+    const maxHeight =
+      edge === 'top'
+        ? Math.max(MIN_WINDOW_HEIGHT, maxHeightCap - bottomLocalY)
+        : Math.max(MIN_WINDOW_HEIGHT, topLocalY)
+
+    document.body.style.cursor = 'ns-resize'
+    sfxEmitter.emit('sfx:item-pick')
+    useEditor.getState().setResizingWindowHeight(windowNode)
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    const onMove = (e: PointerEvent) => {
+      setNDC(e.clientX, e.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const intersection = new Vector3()
+      if (!raycaster.ray.intersectPlane(plane, intersection)) return
+      // Dragging the top arrow up grows height; dragging the bottom arrow
+      // down also grows height — so flip the pointer delta sign for the
+      // bottom arrow.
+      const delta = (intersection.y - initialPointerY) * edgeSign
+      const newHeight = Math.min(maxHeight, Math.max(MIN_WINDOW_HEIGHT, initialHeight + delta))
+      const newPositionY = edge === 'top' ? anchorY + newHeight / 2 : anchorY - newHeight / 2
+      useScene.getState().updateNode(windowId, {
+        height: newHeight,
+        position: [windowNode.position[0], newPositionY, windowNode.position[2]],
+      })
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === 'ns-resize') {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useEditor.getState().setResizingWindowHeight(null)
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+
+    dragCleanupRef.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  return (
+    <group position={[0, handleY, 0]}>
+      <group rotation={arrowInnerRotation} scale={scale}>
+        <mesh
+          frustumCulled={false}
+          geometry={arrowGeometry}
+          material={arrowMaterial}
+          onPointerDown={activateHeightResize}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setIsHovered(true)
+            document.body.style.cursor = 'ns-resize'
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setIsHovered(false)
+            if (document.body.style.cursor === 'ns-resize') {
+              document.body.style.cursor = ''
+            }
+          }}
+          renderOrder={1010}
+        />
+      </group>
+    </group>
+  )
+}
+
+function WindowGroundActionMenu({
+  wallObject,
+  windowNode,
+}: {
+  wallObject: Object3D
+  windowNode: WindowNode
+}) {
+  const menuGroupRef = useRef<Group>(null)
+  const sideRef = useRef<number>(1)
+  const initializedForWindowIdRef = useRef<string | null>(null)
+  const cameraLocalScratch = useMemo(() => new Vector3(), [])
+
+  const rotationY =
+    typeof windowNode.rotation === 'number' ? windowNode.rotation : (windowNode.rotation?.[1] ?? 0)
+
+  useFrame((state, dt) => {
+    const menu = menuGroupRef.current
+    if (!menu) return
+
+    const normalX = Math.sin(rotationY)
+    const normalZ = Math.cos(rotationY)
+    const windowX = windowNode.position[0]
+    const windowZ = windowNode.position[2]
+
+    wallObject.updateMatrixWorld()
+    cameraLocalScratch.copy(state.camera.position)
+    wallObject.worldToLocal(cameraLocalScratch)
+
+    const projection =
+      (cameraLocalScratch.x - windowX) * normalX + (cameraLocalScratch.z - windowZ) * normalZ
+
+    const isFreshWindow = initializedForWindowIdRef.current !== windowNode.id
+    const currentSide = sideRef.current
+    let nextSide: number
+    if (isFreshWindow) {
+      nextSide = projection >= 0 ? 1 : -1
+    } else if (currentSide >= 0 && projection < -GROUND_MENU_SIDE_HYSTERESIS) {
+      nextSide = -1
+    } else if (currentSide < 0 && projection > GROUND_MENU_SIDE_HYSTERESIS) {
+      nextSide = 1
+    } else {
+      nextSide = currentSide
+    }
+    sideRef.current = nextSide
+
+    const offset = windowNode.frameDepth / 2 + GROUND_MENU_FACE_CLEARANCE
+    const targetX = windowX + normalX * offset * nextSide
+    const targetZ = windowZ + normalZ * offset * nextSide
+    // Sit the menu just past the bottom arrow's tip so they read as one
+    // stacked column. Arrow base = `windowBottom - HEIGHT_HANDLE_OFFSET`,
+    // chevron tip extends ARROW_TIP_EXTENT further in -Y.
+    const menuY =
+      windowNode.position[1] -
+      windowNode.height / 2 -
+      HEIGHT_HANDLE_OFFSET -
+      ARROW_TIP_EXTENT -
+      MENU_BELOW_ARROW_GAP
+
+    const dirX = -normalZ
+    const dirZ = normalX
+    const targetRot = Math.atan2(-nextSide * dirZ, nextSide * dirX) + Math.PI
+
+    if (isFreshWindow) {
+      menu.position.set(targetX, menuY, targetZ)
+      menu.rotation.y = targetRot
+      initializedForWindowIdRef.current = windowNode.id
+      return
+    }
+
+    const t = 1 - Math.exp(-dt * GROUND_MENU_LERP_RATE)
+    menu.position.x += (targetX - menu.position.x) * t
+    menu.position.z += (targetZ - menu.position.z) * t
+    menu.position.y = menuY
+
+    let rotDelta = targetRot - menu.rotation.y
+    while (rotDelta > Math.PI) rotDelta -= 2 * Math.PI
+    while (rotDelta < -Math.PI) rotDelta += 2 * Math.PI
+    menu.rotation.y += rotDelta * t
+  })
+
+  const items: Array<'move' | 'duplicate' | 'delete'> = ['move', 'duplicate', 'delete']
+  const centerIndex = (items.length - 1) / 2
+
+  return (
+    <group ref={menuGroupRef}>
+      {items.map((kind, index) => (
+        <WindowGroundActionIcon
+          key={kind}
+          kind={kind}
+          offsetIndex={index - centerIndex}
+          windowNode={windowNode}
+        />
+      ))}
+    </group>
+  )
+}
+
+function WindowGroundActionIcon({
+  kind,
+  offsetIndex,
+  windowNode,
+}: {
+  kind: 'move' | 'duplicate' | 'delete'
+  offsetIndex: number
+  windowNode: WindowNode
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.2 : 1) * zoom
+
+  const texture = useMemo(() => getIconTexture(kind), [kind])
+  const material = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        map: texture,
+        side: DoubleSide,
+        alphaTest: 0.4,
+        transparent: true,
+        opacity: 1,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [texture],
+  )
+
+  useEffect(() => {
+    material.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [material, isHovered])
+  useEffect(() => () => material.dispose(), [material])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'pointer') {
+        document.body.style.cursor = ''
+      }
+    }
+  }, [])
+
+  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    sfxEmitter.emit('sfx:item-pick')
+    document.body.style.cursor = ''
+    setIsHovered(false)
+
+    if (kind === 'move') {
+      useEditor.getState().setMovingNode(windowNode)
+      return
+    }
+
+    if (kind === 'delete') {
+      sfxEmitter.emit('sfx:structure-delete')
+      useViewer.getState().setSelection({ selectedIds: [] })
+      useScene.getState().deleteNode(windowNode.id as AnyNodeId)
+      return
+    }
+
+    useScene.temporal.getState().pause()
+    const input = structuredClone(windowNode) as Record<string, unknown>
+    delete input.id
+    const existingMetadata =
+      input.metadata && typeof input.metadata === 'object' && !Array.isArray(input.metadata)
+        ? (input.metadata as Record<string, unknown>)
+        : {}
+    input.metadata = { ...existingMetadata, isNew: true }
+    try {
+      const dup = WindowNode.parse(input)
+      useScene.getState().createNode(dup, dup.parentId as AnyNodeId)
+      useEditor.getState().setMovingNode(dup)
+      useViewer.getState().setSelection({ selectedIds: [dup.id] })
+    } catch (err) {
+      console.error('Failed to duplicate window', err)
+      useScene.temporal.getState().resume()
+    }
+  }
+
+  return (
+    <group
+      onPointerDown={onPointerDown}
+      onPointerEnter={(event) => {
+        event.stopPropagation()
+        setIsHovered(true)
+        document.body.style.cursor = 'pointer'
+      }}
+      onPointerLeave={(event) => {
+        event.stopPropagation()
+        setIsHovered(false)
+        if (document.body.style.cursor === 'pointer') {
+          document.body.style.cursor = ''
+        }
+      }}
+      position={[offsetIndex * GROUND_MENU_SPACING, 0, 0]}
+      scale={scale}
+    >
+      <mesh material={material} renderOrder={1010} rotation={[-Math.PI / 2, 0, 0]}>
+        <planeGeometry args={[GROUND_ICON_SIZE, GROUND_ICON_SIZE]} />
+      </mesh>
+    </group>
+  )
+}
+
+const ICON_SVGS: Record<'move' | 'duplicate' | 'delete', string> = {
+  move: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 9l-3 3 3 3"/><path d="M9 5l3-3 3 3"/><path d="M15 19l-3 3-3-3"/><path d="M19 9l3 3-3 3"/><path d="M2 12h20"/><path d="M12 2v20"/></svg>`,
+  duplicate: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
+  delete: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
+}
+
+const ICON_TEXTURE_CACHE = new Map<string, CanvasTexture>()
+const ICON_TEXTURE_SIZE = 128
+
+function getIconTexture(kind: 'move' | 'duplicate' | 'delete'): CanvasTexture {
+  const cached = ICON_TEXTURE_CACHE.get(kind)
+  if (cached) return cached
+
+  const canvas = document.createElement('canvas')
+  canvas.width = ICON_TEXTURE_SIZE
+  canvas.height = ICON_TEXTURE_SIZE
+  const texture = new CanvasTexture(canvas)
+  texture.colorSpace = SRGBColorSpace
+  ICON_TEXTURE_CACHE.set(kind, texture)
+
+  const img = new Image()
+  img.onload = () => {
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+    ctx.clearRect(0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
+    ctx.drawImage(img, 0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
+    texture.needsUpdate = true
+  }
+  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(ICON_SVGS[kind])}`
+
+  return texture
+}
diff --git a/packages/editor/src/store/use-editor.tsx b/packages/editor/src/store/use-editor.tsx
index 1e328d057..565fd831c 100644
--- a/packages/editor/src/store/use-editor.tsx
+++ b/packages/editor/src/store/use-editor.tsx
@@ -217,6 +217,10 @@ type EditorState = {
   setResizingDoorHeight: (door: DoorNode | null) => void
   resizingDoorWidth: DoorNode | null
   setResizingDoorWidth: (door: DoorNode | null) => void
+  resizingWindowHeight: WindowNode | null
+  setResizingWindowHeight: (window: WindowNode | null) => void
+  resizingWindowWidth: WindowNode | null
+  setResizingWindowWidth: (window: WindowNode | null) => void
   curvingWall: WallNode | null
   setCurvingWall: (wall: WallNode | null) => void
   curvingFence: FenceNode | null
@@ -644,6 +648,10 @@ const useEditor = create<EditorState>()(
       setResizingDoorHeight: (door) => set({ resizingDoorHeight: door }),
       resizingDoorWidth: null,
       setResizingDoorWidth: (door) => set({ resizingDoorWidth: door }),
+      resizingWindowHeight: null,
+      setResizingWindowHeight: (windowNode) => set({ resizingWindowHeight: windowNode }),
+      resizingWindowWidth: null,
+      setResizingWindowWidth: (windowNode) => set({ resizingWindowWidth: windowNode }),
       curvingWall: null,
       setCurvingWall: (wall) => set({ curvingWall: wall }),
       curvingFence: null,
diff --git a/packages/nodes/src/window/definition.ts b/packages/nodes/src/window/definition.ts
index 5d9d6aa2e..f220805db 100644
--- a/packages/nodes/src/window/definition.ts
+++ b/packages/nodes/src/window/definition.ts
@@ -1,5 +1,6 @@
 import type { NodeDefinition } from '@pascal-app/core'
 import { buildWindowFloorplan } from './floorplan'
+import { windowWidthAffordance } from './floorplan-affordances'
 import { windowFloorplanMoveTarget } from './floorplan-move'
 import { windowParametrics } from './parametrics'
 import { WindowNode } from './schema'
@@ -57,6 +58,14 @@ export const windowDefinition: NodeDefinition<typeof WindowNode> = {
   // 2D move-on-floorplan handler — same shape as door.
   floorplanMoveTarget: windowFloorplanMoveTarget,
 
+  // 2D drag affordances. `resize-width` drives the window's two side
+  // arrows — pointer-down on either arrow starts an anchored width drag
+  // (opposite edge stays fixed, clamped to wall bounds). Mirrors the
+  // door wiring.
+  floorplanAffordances: {
+    'resize-width': windowWidthAffordance,
+  },
+
   toolHints: [
     { key: 'Left click', label: 'Place window on wall' },
     { key: 'Esc', label: 'Cancel' },
diff --git a/packages/nodes/src/window/floorplan-affordances.ts b/packages/nodes/src/window/floorplan-affordances.ts
new file mode 100644
index 000000000..dd5ded4b4
--- /dev/null
+++ b/packages/nodes/src/window/floorplan-affordances.ts
@@ -0,0 +1,105 @@
+import {
+  type AnyNodeId,
+  type FloorplanAffordance,
+  type FloorplanAffordanceSession,
+  useScene,
+  type WallNode,
+  type WindowNode,
+} from '@pascal-app/core'
+
+const MIN_WINDOW_WIDTH = 0.3
+
+type WindowWidthPayload = { side: 'start' | 'end' }
+
+/**
+ * 2D drag affordance for the window's width side-arrows. Sister to the 3D
+ * `WindowSideArrow` width drag in `packages/editor/src/components/editor/
+ * window-side-handles.tsx` — both anchor at the opposite window edge and
+ * clamp to wall bounds. Mirrors `doorWidthAffordance` 1:1 with the door
+ * type swapped for the window type.
+ *
+ * Payload encodes which edge the user grabbed:
+ *   - `'start'`: arrow at the window edge closer to `wall.start`. The
+ *     opposite edge (toward `wall.end`) stays fixed.
+ *   - `'end'`: arrow at the edge closer to `wall.end`. The wall-start
+ *     edge stays fixed.
+ *
+ * Uses the scene-write preview pattern (writes directly to `useScene`
+ * each tick): the registry layer's `effectiveNode` only merges live
+ * overrides for walls, so an override-based preview wouldn't show on
+ * windows. The dispatcher snapshots / pauses history at start, so
+ * per-tick scene writes still collapse to one undoable entry on commit.
+ */
+export const windowWidthAffordance: FloorplanAffordance<WindowNode> = {
+  start({ node, payload, nodes, initialPlanPoint }): FloorplanAffordanceSession {
+    const { side } = payload as WindowWidthPayload
+    const windowId = node.id as AnyNodeId
+    const wall = node.wallId ? (nodes[node.wallId as AnyNodeId] as WallNode | undefined) : undefined
+
+    const initialWidth = node.width
+    const initialWindowX = node.position[0]
+    const initialWindowY = node.position[1]
+    const initialWindowZ = node.position[2]
+
+    const growDir = side === 'end' ? 1 : -1
+    const anchorX =
+      side === 'end' ? initialWindowX - initialWidth / 2 : initialWindowX + initialWidth / 2
+
+    const wallStart: readonly [number, number] = wall ? wall.start : [0, 0]
+    const wallEnd: readonly [number, number] = wall ? wall.end : [1, 0]
+    const dx = wallEnd[0] - wallStart[0]
+    const dz = wallEnd[1] - wallStart[1]
+    const wallLength = Math.hypot(dx, dz) || 1
+    const dirX = dx / wallLength
+    const dirZ = dz / wallLength
+
+    const maxWidth = growDir > 0 ? wallLength - anchorX : anchorX
+
+    const projectToWallLocalX = (planPoint: readonly [number, number]) => {
+      return (planPoint[0] - wallStart[0]) * dirX + (planPoint[1] - wallStart[1]) * dirZ
+    }
+
+    const initialPointerLocalX = projectToWallLocalX(initialPlanPoint)
+
+    let lastWidth = initialWidth
+    let lastWindowX = initialWindowX
+
+    return {
+      affectedIds: [node.id],
+      apply({ planPoint }) {
+        const currentLocalX = projectToWallLocalX(planPoint)
+        const delta = (currentLocalX - initialPointerLocalX) * growDir
+        const newWidth = Math.min(
+          Math.max(MIN_WINDOW_WIDTH, initialWidth + delta),
+          Math.max(MIN_WINDOW_WIDTH, maxWidth),
+        )
+        const newWindowX = anchorX + growDir * (newWidth / 2)
+        lastWidth = newWidth
+        lastWindowX = newWindowX
+        useScene.getState().updateNodes([
+          {
+            id: windowId,
+            data: {
+              width: newWidth,
+              position: [newWindowX, initialWindowY, initialWindowZ],
+            },
+          },
+        ])
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene.getState().updateNodes([
+          {
+            id: windowId,
+            data: {
+              width: lastWidth,
+              position: [lastWindowX, initialWindowY, initialWindowZ],
+            },
+          },
+        ])
+      },
+    }
+  },
+}
diff --git a/packages/nodes/src/window/floorplan-move.ts b/packages/nodes/src/window/floorplan-move.ts
index 896609016..cdd91eb89 100644
--- a/packages/nodes/src/window/floorplan-move.ts
+++ b/packages/nodes/src/window/floorplan-move.ts
@@ -32,6 +32,16 @@ export const windowFloorplanMoveTarget: FloorplanMoveTarget<WindowNode> = ({ nod
   // the window had when the move started.
   const startLocalY = node.position[1]
 
+  // Track the last successful placement so `commit()` can write it
+  // atomically — same deterministic-commit fix as `doorFloorplanMoveTarget`.
+  let lastValid: {
+    position: [number, number, number]
+    rotation: [number, number, number]
+    side: WindowNode['side']
+    parentId: string
+    wallId: string
+  } | null = null
+
   const session: FloorplanMoveTargetSession = {
     affectedIds: [node.id as AnyNodeId],
     apply({ planPoint, modifiers }) {
@@ -48,16 +58,18 @@ export const windowFloorplanMoveTarget: FloorplanMoveTarget<WindowNode> = ({ nod
         node.height,
       )
 
+      lastValid = {
+        position: [clampedX, clampedY, 0],
+        rotation: [0, hit.itemRotation, 0],
+        side: hit.side,
+        parentId: hit.wall.id,
+        wallId: hit.wall.id,
+      }
+
       useScene.getState().updateNodes([
         {
           id: node.id as AnyNodeId,
-          data: {
-            position: [clampedX, clampedY, 0],
-            rotation: [0, hit.itemRotation, 0],
-            side: hit.side,
-            parentId: hit.wall.id,
-            wallId: hit.wall.id,
-          },
+          data: lastValid,
         },
       ])
     },
@@ -74,6 +86,22 @@ export const windowFloorplanMoveTarget: FloorplanMoveTarget<WindowNode> = ({ nod
       )
       return !overlapping
     },
+    commit() {
+      // Own the atomic write so the overlay takes the deterministic
+      // commit-path (revert → resume → session.commit()). The dispatcher's
+      // diff path would otherwise re-derive the final state by comparing
+      // the post-apply scene to the snapshot — that works most of the
+      // time but produces an empty diff (and silent revert) when the
+      // committed move lands on the same `parentId` with identical data.
+      // See `doorFloorplanMoveTarget.commit` for the original fix.
+      if (!lastValid) return
+      useScene.getState().updateNodes([
+        {
+          id: node.id as AnyNodeId,
+          data: lastValid,
+        },
+      ])
+    },
   }
 
   return session
diff --git a/packages/nodes/src/window/floorplan.ts b/packages/nodes/src/window/floorplan.ts
index d95ffaade..7468d2bf2 100644
--- a/packages/nodes/src/window/floorplan.ts
+++ b/packages/nodes/src/window/floorplan.ts
@@ -135,6 +135,30 @@ export function buildWindowFloorplan(
       kind: 'move-handle',
       point: [cx, cz],
     })
+
+    // Width-resize arrows at each side of the window (along the wall
+    // direction). Pointer-down on either routes through the window's
+    // `resize-width` affordance — anchored at the opposite edge, clamped
+    // to wall bounds. Mirrors the 3D `WindowSideArrow` width drag and the
+    // door's 2D pattern.
+    const startEdgeX = cx - dirX * halfWidth
+    const startEdgeZ = cz - dirZ * halfWidth
+    const endEdgeX = cx + dirX * halfWidth
+    const endEdgeZ = cz + dirZ * halfWidth
+    children.push({
+      kind: 'move-arrow',
+      point: [startEdgeX, startEdgeZ],
+      angle: Math.atan2(-dirZ, -dirX),
+      affordance: 'resize-width',
+      payload: { side: 'start' },
+    })
+    children.push({
+      kind: 'move-arrow',
+      point: [endEdgeX, endEdgeZ],
+      angle: Math.atan2(dirZ, dirX),
+      affordance: 'resize-width',
+      payload: { side: 'end' },
+    })
   }
 
   // Placement-measurement dimensions when actively moving — same

From 4744d920c901dfcf5be754f79acf392ee014a61f Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Sun, 24 May 2026 01:50:30 +0530
Subject: [PATCH 19/48] =?UTF-8?q?stair:=20in-world=20selection=20UI=20?=
 =?UTF-8?q?=E2=80=94=20side/length/height=20arrows,=20ground=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bring stair-segment selection chrome to parity with wall / door / window.
Selecting a stair segment in 3D now emits two side width arrows (each
slides the opposite edge anchor under the user), a length arrow at the
back face that extends the run, and — for stair-type segments — a height
arrow on top. A ground action menu (duplicate / delete) sits beside the
segment and flips sides as the camera orbits, with hysteresis + lerp so
it doesn't dither.

The handles portal into the stair's PARENT object (level / building / scene
root) rather than the stair group itself: StairRenderer attaches
`useNodeEvents` to the stair group, so any descendant pointer-over would
bubble up and set `hoveredId = stairId`, which then makes the post-processing
outline traverse the entire stair group and stroke our icons. Mirrors the
door fix. A two-layer transform mirror (`stairPoseRef` + `segmentPoseRef`)
keeps the handles aligned with the chained per-segment pose that
StairSystem writes imperatively each frame.

Duplicate forces `attachmentSide: 'front'` on the clone so it continues the
chain end cleanly instead of inheriting the original's side and U-turning.

New `resizingStairSegment{Width,Length,Height}` editor state lets
`CustomCameraControls` suppress orbit/zoom while an arrow is dragging,
matching the wall/door/window handle pattern.

The HTML floating-action-menu skips stair-segments now that the in-world
ground menu owns those actions.

Stair-segment panel swaps its bespoke fill-to-floor toggle for the shared
`ToggleControl` so it looks like the other panels and groups with the
thickness slider under one `space-y-3` block.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../editor/custom-camera-controls.tsx         |   6 +
 .../editor/floating-action-menu.tsx           |   2 +
 .../editor/src/components/editor/index.tsx    |   2 +
 .../editor/stair-segment-handles.tsx          | 868 ++++++++++++++++++
 packages/editor/src/store/use-editor.tsx      |  12 +
 packages/nodes/src/stair-segment/panel.tsx    |  44 +-
 6 files changed, 908 insertions(+), 26 deletions(-)
 create mode 100644 packages/editor/src/components/editor/stair-segment-handles.tsx

diff --git a/packages/editor/src/components/editor/custom-camera-controls.tsx b/packages/editor/src/components/editor/custom-camera-controls.tsx
index 5051d1eac..1bb931683 100644
--- a/packages/editor/src/components/editor/custom-camera-controls.tsx
+++ b/packages/editor/src/components/editor/custom-camera-controls.tsx
@@ -141,6 +141,9 @@ export const CustomCameraControls = () => {
   const resizingWallHeight = useEditor((s) => s.resizingWallHeight)
   const resizingDoorHeight = useEditor((s) => s.resizingDoorHeight)
   const resizingDoorWidth = useEditor((s) => s.resizingDoorWidth)
+  const resizingStairSegmentWidth = useEditor((s) => s.resizingStairSegmentWidth)
+  const resizingStairSegmentLength = useEditor((s) => s.resizingStairSegmentLength)
+  const resizingStairSegmentHeight = useEditor((s) => s.resizingStairSegmentHeight)
   const isBoxSelectActive = mode === 'select' && selectionTool === 'marquee'
   const isInteracting = Boolean(
     tool ||
@@ -150,6 +153,9 @@ export const CustomCameraControls = () => {
       resizingWallHeight ||
       resizingDoorHeight ||
       resizingDoorWidth ||
+      resizingStairSegmentWidth ||
+      resizingStairSegmentLength ||
+      resizingStairSegmentHeight ||
       isBoxSelectActive,
   )
   const touches = useMemo(() => {
diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index 6efb09044..294ed3165 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -457,6 +457,8 @@ export function FloatingActionMenu() {
   if (node?.type === 'door') return null
   // Windows use the in-world `WindowGroundActionMenu`.
   if (node?.type === 'window') return null
+  // Stair segments use the in-world `StairSegmentGroundActionMenu`.
+  if (node?.type === 'stair-segment') return null
 
   return (
     <group>
diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index bbba01a1d..c40fded16 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -66,6 +66,7 @@ import { PresetThumbnailGenerator } from './preset-thumbnail-generator'
 import { SelectionManager } from './selection-manager'
 import { SiteEdgeLabels } from './site-edge-labels'
 import { SnapshotCaptureOverlay } from './snapshot-capture-overlay'
+import { StairSegmentHandles } from './stair-segment-handles'
 import { type SnapshotCameraData, ThumbnailGenerator } from './thumbnail-generator'
 import { WallMeasurementLabel } from './wall-measurement-label'
 import { WallMoveSideHandles } from './wall-move-side-handles'
@@ -592,6 +593,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       {!(isVersionPreviewMode || isFirstPersonMode) && <WallMoveSideHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <DoorSideHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <WindowSideHandles />}
+      {!(isVersionPreviewMode || isFirstPersonMode) && <StairSegmentHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingActionMenu />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingBuildingActionMenu />}
       {!isFirstPersonMode && <WallMeasurementLabel />}
diff --git a/packages/editor/src/components/editor/stair-segment-handles.tsx b/packages/editor/src/components/editor/stair-segment-handles.tsx
new file mode 100644
index 000000000..101097050
--- /dev/null
+++ b/packages/editor/src/components/editor/stair-segment-handles.tsx
@@ -0,0 +1,868 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  type StairNode,
+  type StairSegmentNode,
+  StairSegmentNode as StairSegmentSchema,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  CanvasTexture,
+  Color,
+  DoubleSide,
+  ExtrudeGeometry,
+  type Group,
+  type Mesh,
+  type Object3D,
+  OrthographicCamera,
+  Plane,
+  Shape,
+  SRGBColorSpace,
+  Vector2,
+  Vector3,
+} from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { sfxEmitter } from '../../lib/sfx-bus'
+import useEditor from '../../store/use-editor'
+
+const SIDE_HANDLE_OFFSET = 0.24
+const LENGTH_HANDLE_OFFSET = 0.24
+const HEIGHT_HANDLE_OFFSET = 0.24
+const ARROW_SCALE = 0.65
+const MIN_SEGMENT_WIDTH = 0.4
+const MIN_SEGMENT_LENGTH = 0.4
+const MIN_SEGMENT_HEIGHT = 0.1
+const ARROW_COLOR = '#8381ed'
+const ARROW_HOVER_COLOR = '#a5b4fc'
+const GROUND_MENU_SIDE_CLEARANCE = 0.68
+const GROUND_MENU_SPACING = 0.32
+const GROUND_ICON_SIZE = 0.22
+const GROUND_MENU_SIDE_HYSTERESIS = 0.1
+const GROUND_MENU_LERP_RATE = 14
+
+// Synthetic `click` after a drag's pointerup would deselect the segment via
+// the canvas-level PointerMissedHandler. Mirrors the window/door handles.
+function swallowNextClick() {
+  const swallow = (clickEvent: Event) => {
+    clickEvent.stopPropagation()
+    clickEvent.preventDefault()
+  }
+  window.addEventListener('click', swallow, { capture: true, once: true })
+  setTimeout(() => {
+    window.removeEventListener('click', swallow, { capture: true })
+  }, 300)
+}
+
+function createArrowHandleGeometry() {
+  const shape = new Shape()
+  shape.moveTo(0.22, 0)
+  shape.lineTo(-0.04, 0.12)
+  shape.lineTo(-0.04, 0.035)
+  shape.lineTo(-0.2, 0.035)
+  shape.lineTo(-0.2, -0.035)
+  shape.lineTo(-0.04, -0.035)
+  shape.lineTo(-0.04, -0.12)
+  shape.lineTo(0.22, 0)
+
+  const geometry = new ExtrudeGeometry(shape, {
+    depth: 0.08,
+    bevelEnabled: true,
+    bevelThickness: 0.035,
+    bevelSize: 0.03,
+    bevelOffset: 0,
+    bevelSegments: 10,
+    curveSegments: 16,
+    steps: 1,
+  })
+  geometry.translate(0, 0, -0.04)
+  geometry.rotateX(-Math.PI / 2)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
+
+export function StairSegmentHandles() {
+  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 selectedId = selectedIds.length === 1 ? selectedIds[0] : null
+  const selectedSegment = useScene((state) => {
+    const node = selectedId ? state.nodes[selectedId as AnyNodeId] : null
+    return node?.type === 'stair-segment' ? node : null
+  })
+
+  const shouldRender =
+    Boolean(selectedSegment) && !isFloorplanHovered && mode !== 'delete' && !movingNode
+
+  if (!shouldRender || !selectedSegment) return null
+  return <StairSegmentHandlesForSegment segmentNode={selectedSegment} />
+}
+
+function StairSegmentHandlesForSegment({ segmentNode }: { segmentNode: StairSegmentNode }) {
+  // Portal into the stair's PARENT (level / building / scene root), not the
+  // stair group itself: StairRenderer attaches useNodeEvents handlers on the
+  // stair group, so hovering anything inside the group bubbles up and sets
+  // `hoveredId = stairId`. The post-processing outline then traces every
+  // descendant of the stair group — which would include our icons. Mirrors
+  // the door fix (handles live under the level, not the wall).
+  const stairId = segmentNode.parentId
+  const stairParentId = useScene((state) => {
+    const stair = stairId ? (state.nodes[stairId as AnyNodeId] as StairNode | undefined) : undefined
+    return stair?.parentId ?? null
+  })
+
+  const [stairObject, setStairObject] = useState<Object3D | null>(() =>
+    stairId ? (sceneRegistry.nodes.get(stairId as AnyNodeId) ?? null) : null,
+  )
+  const [segmentObject, setSegmentObject] = useState<Mesh | null>(
+    () => (sceneRegistry.nodes.get(segmentNode.id as AnyNodeId) as Mesh | undefined) ?? null,
+  )
+  const [parentObject, setParentObject] = useState<Object3D | null>(() =>
+    stairParentId ? (sceneRegistry.nodes.get(stairParentId as AnyNodeId) ?? null) : null,
+  )
+
+  useEffect(() => {
+    let frameId = 0
+    const resolve = () => {
+      const nextStair = stairId ? (sceneRegistry.nodes.get(stairId as AnyNodeId) ?? null) : null
+      const nextSegment =
+        (sceneRegistry.nodes.get(segmentNode.id as AnyNodeId) as Mesh | undefined) ?? null
+      const nextParent = stairParentId
+        ? (sceneRegistry.nodes.get(stairParentId as AnyNodeId) ?? null)
+        : null
+      setStairObject((current) => (current === nextStair ? current : nextStair))
+      setSegmentObject((current) => (current === nextSegment ? current : nextSegment))
+      setParentObject((current) => (current === nextParent ? current : nextParent))
+      if (!(nextStair && nextSegment && nextParent)) {
+        frameId = window.requestAnimationFrame(resolve)
+      }
+    }
+    resolve()
+    return () => {
+      if (frameId) window.cancelAnimationFrame(frameId)
+    }
+  }, [stairId, segmentNode.id, stairParentId])
+
+  const stairPoseRef = useRef<Group>(null)
+  const segmentPoseRef = useRef<Group>(null)
+
+  useFrame(() => {
+    const stairPose = stairPoseRef.current
+    const segmentPose = segmentPoseRef.current
+    if (!(stairPose && segmentPose && stairObject && segmentObject)) return
+    // Two-layer transform mirror so the handles ride along even when nothing
+    // in React triggers a re-render: StairSystem writes the stair group's
+    // pose AND the per-segment chained pose imperatively each frame.
+    stairPose.position.copy(stairObject.position)
+    stairPose.quaternion.copy(stairObject.quaternion)
+    segmentPose.position.copy(segmentObject.position)
+    segmentPose.quaternion.copy(segmentObject.quaternion)
+  })
+
+  if (!(stairObject && segmentObject && parentObject)) return null
+
+  return createPortal(
+    <group ref={stairPoseRef}>
+      <group ref={segmentPoseRef}>
+        <StairSegmentSideArrow side="left" segmentNode={segmentNode} stairObject={stairObject} />
+        <StairSegmentSideArrow side="right" segmentNode={segmentNode} stairObject={stairObject} />
+        <StairSegmentLengthArrow segmentNode={segmentNode} stairObject={stairObject} />
+        {segmentNode.segmentType === 'stair' ? (
+          <StairSegmentHeightArrow segmentNode={segmentNode} stairObject={stairObject} />
+        ) : null}
+        <StairSegmentGroundActionMenu segmentNode={segmentNode} segmentObject={segmentObject} />
+      </group>
+    </group>,
+    parentObject,
+  )
+}
+
+// Shared arrow material/geometry/scale boilerplate hoisted into one hook so
+// each arrow variant only carries its drag logic.
+function useArrowVisuals(cursor: 'ew-resize' | 'ns-resize') {
+  const [isHovered, setIsHovered] = useState(false)
+  const geometry = useMemo(() => createArrowHandleGeometry(), [])
+  const material = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true,
+        opacity: 1,
+      }),
+    [],
+  )
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
+
+  useEffect(() => {
+    material.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [material, isHovered])
+
+  useEffect(() => () => geometry.dispose(), [geometry])
+  useEffect(() => () => material.dispose(), [material])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === cursor) {
+        document.body.style.cursor = ''
+      }
+    }
+  }, [cursor])
+
+  return { geometry, material, scale, isHovered, setIsHovered }
+}
+
+function StairSegmentSideArrow({
+  side,
+  segmentNode,
+  stairObject,
+}: {
+  side: 'left' | 'right'
+  segmentNode: StairSegmentNode
+  stairObject: Object3D
+}) {
+  const { geometry, material, scale, setIsHovered } = useArrowVisuals('ew-resize')
+  const { camera, raycaster, gl } = useThree()
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.()
+    }
+  }, [])
+
+  const activateWidthResize = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+
+    stairObject.updateMatrixWorld()
+    // The segment's local origin is at its back-bottom-center inside the
+    // stair group. Center the raycast plane on the segment's mid-body so
+    // the picked depth matches what the user sees.
+    const segmentRot = segmentNode.rotation
+    const segmentLocalX = new Vector3(Math.cos(segmentRot), 0, -Math.sin(segmentRot))
+    const segmentLocalZ = new Vector3(Math.sin(segmentRot), 0, Math.cos(segmentRot))
+    const centerStair = new Vector3()
+      .copy(new Vector3(...segmentNode.position))
+      .addScaledVector(segmentLocalZ, segmentNode.length / 2)
+      .add(new Vector3(0, segmentNode.height / 2, 0))
+    const centerWorld = centerStair.clone().applyMatrix4(stairObject.matrixWorld)
+
+    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
+    if (planeNormal.lengthSq() === 0) return
+    planeNormal.normalize()
+    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
+
+    const ndc = new Vector2()
+    const setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hitWorld = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
+    const hitStair = stairObject.worldToLocal(hitWorld.clone())
+
+    const initialWidth = segmentNode.width
+    const initialPositionX = segmentNode.position[0]
+    const initialPositionZ = segmentNode.position[2]
+    // sign === +1: right arrow grows from the segment's left edge anchor.
+    // sign === -1: left arrow grows from the right edge anchor.
+    const sign = side === 'right' ? 1 : -1
+    const initialPointerX = hitStair.x
+    const initialPointerZ = hitStair.z
+    const armX = segmentLocalX.x
+    const armZ = segmentLocalX.z
+    const segmentId = segmentNode.id as AnyNodeId
+
+    document.body.style.cursor = 'ew-resize'
+    sfxEmitter.emit('sfx:item-pick')
+    useEditor.getState().setResizingStairSegmentWidth(segmentNode)
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    const onMove = (e: PointerEvent) => {
+      setNDC(e.clientX, e.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const hit = new Vector3()
+      if (!raycaster.ray.intersectPlane(plane, hit)) return
+      const hitLocal = stairObject.worldToLocal(hit.clone())
+      const dx = hitLocal.x - initialPointerX
+      const dz = hitLocal.z - initialPointerZ
+      const armDelta = dx * armX + dz * armZ
+      const widthDelta = sign * armDelta
+      const newWidth = Math.max(MIN_SEGMENT_WIDTH, initialWidth + widthDelta)
+      // Slide the centerline so the opposite edge stays put under the user.
+      const half = (newWidth - initialWidth) / 2
+      const newPositionX = initialPositionX + sign * half * armX
+      const newPositionZ = initialPositionZ + sign * half * armZ
+      useScene.getState().updateNode(segmentId, {
+        width: newWidth,
+        position: [newPositionX, segmentNode.position[1], newPositionZ],
+      })
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === 'ew-resize') {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useEditor.getState().setResizingStairSegmentWidth(null)
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+
+    dragCleanupRef.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  const direction = side === 'right' ? 1 : -1
+  const x = direction * (segmentNode.width / 2 + SIDE_HANDLE_OFFSET)
+  // Centerline of the segment body: vertically at half height, lengthwise
+  // at half run.
+  const y = segmentNode.height / 2
+  const z = segmentNode.length / 2
+  const rotationY = side === 'right' ? 0 : Math.PI
+
+  return (
+    <group position={[x, y, z]} rotation={[0, rotationY, 0]} scale={scale}>
+      <mesh
+        frustumCulled={false}
+        geometry={geometry}
+        material={material}
+        onPointerDown={activateWidthResize}
+        onPointerEnter={(event) => {
+          event.stopPropagation()
+          setIsHovered(true)
+          document.body.style.cursor = 'ew-resize'
+        }}
+        onPointerLeave={(event) => {
+          event.stopPropagation()
+          setIsHovered(false)
+          if (document.body.style.cursor === 'ew-resize') {
+            document.body.style.cursor = ''
+          }
+        }}
+        renderOrder={1010}
+      />
+    </group>
+  )
+}
+
+function StairSegmentLengthArrow({
+  segmentNode,
+  stairObject,
+}: {
+  segmentNode: StairSegmentNode
+  stairObject: Object3D
+}) {
+  const { geometry, material, scale, setIsHovered } = useArrowVisuals('ew-resize')
+  const { camera, raycaster, gl } = useThree()
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.()
+    }
+  }, [])
+
+  const activateLengthResize = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+
+    stairObject.updateMatrixWorld()
+    const segmentRot = segmentNode.rotation
+    const segmentLocalZ = new Vector3(Math.sin(segmentRot), 0, Math.cos(segmentRot))
+    const centerStair = new Vector3()
+      .copy(new Vector3(...segmentNode.position))
+      .addScaledVector(segmentLocalZ, segmentNode.length / 2)
+      .add(new Vector3(0, segmentNode.height / 2, 0))
+    const centerWorld = centerStair.clone().applyMatrix4(stairObject.matrixWorld)
+
+    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
+    if (planeNormal.lengthSq() === 0) return
+    planeNormal.normalize()
+    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
+
+    const ndc = new Vector2()
+    const setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hitWorld = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
+    const hitStair = stairObject.worldToLocal(hitWorld.clone())
+
+    const initialLength = segmentNode.length
+    const initialPointerX = hitStair.x
+    const initialPointerZ = hitStair.z
+    const armX = segmentLocalZ.x
+    const armZ = segmentLocalZ.z
+    const segmentId = segmentNode.id as AnyNodeId
+
+    document.body.style.cursor = 'ew-resize'
+    sfxEmitter.emit('sfx:item-pick')
+    useEditor.getState().setResizingStairSegmentLength(segmentNode)
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    const onMove = (e: PointerEvent) => {
+      setNDC(e.clientX, e.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const hit = new Vector3()
+      if (!raycaster.ray.intersectPlane(plane, hit)) return
+      const hitLocal = stairObject.worldToLocal(hit.clone())
+      const dx = hitLocal.x - initialPointerX
+      const dz = hitLocal.z - initialPointerZ
+      // Project the pointer delta onto the segment's run direction. The
+      // segment's local origin (Z=0 face) stays anchored, so the run
+      // simply extends/contracts toward the back.
+      const lengthDelta = dx * armX + dz * armZ
+      const newLength = Math.max(MIN_SEGMENT_LENGTH, initialLength + lengthDelta)
+      useScene.getState().updateNode(segmentId, { length: newLength })
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === 'ew-resize') {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useEditor.getState().setResizingStairSegmentLength(null)
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+
+    dragCleanupRef.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  // Anchor at the back face (Z = length) of the segment, halfway up the
+  // body. Arrow geometry's chevron tip is at local +X, so rotate -π/2
+  // around Y to swing it toward +Z (outward from the segment).
+  const z = segmentNode.length + LENGTH_HANDLE_OFFSET
+  const y = segmentNode.height / 2
+
+  return (
+    <group position={[0, y, z]} rotation={[0, -Math.PI / 2, 0]} scale={scale}>
+      <mesh
+        frustumCulled={false}
+        geometry={geometry}
+        material={material}
+        onPointerDown={activateLengthResize}
+        onPointerEnter={(event) => {
+          event.stopPropagation()
+          setIsHovered(true)
+          document.body.style.cursor = 'ew-resize'
+        }}
+        onPointerLeave={(event) => {
+          event.stopPropagation()
+          setIsHovered(false)
+          if (document.body.style.cursor === 'ew-resize') {
+            document.body.style.cursor = ''
+          }
+        }}
+        renderOrder={1010}
+      />
+    </group>
+  )
+}
+
+function StairSegmentHeightArrow({
+  segmentNode,
+  stairObject,
+}: {
+  segmentNode: StairSegmentNode
+  stairObject: Object3D
+}) {
+  const { geometry, material, scale, setIsHovered } = useArrowVisuals('ns-resize')
+  const { camera, raycaster, gl } = useThree()
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.()
+    }
+  }, [])
+
+  const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+
+    stairObject.updateMatrixWorld()
+    const segmentRot = segmentNode.rotation
+    const segmentLocalZ = new Vector3(Math.sin(segmentRot), 0, Math.cos(segmentRot))
+    const centerStair = new Vector3()
+      .copy(new Vector3(...segmentNode.position))
+      .addScaledVector(segmentLocalZ, segmentNode.length / 2)
+      .add(new Vector3(0, segmentNode.height / 2, 0))
+    const centerWorld = centerStair.clone().applyMatrix4(stairObject.matrixWorld)
+
+    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
+    if (planeNormal.lengthSq() === 0) return
+    planeNormal.normalize()
+    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
+
+    const ndc = new Vector2()
+    const setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hitWorld = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
+
+    const initialHeight = segmentNode.height
+    const initialPointerY = hitWorld.y
+    const segmentId = segmentNode.id as AnyNodeId
+
+    document.body.style.cursor = 'ns-resize'
+    sfxEmitter.emit('sfx:item-pick')
+    useEditor.getState().setResizingStairSegmentHeight(segmentNode)
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    const onMove = (e: PointerEvent) => {
+      setNDC(e.clientX, e.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const hit = new Vector3()
+      if (!raycaster.ray.intersectPlane(plane, hit)) return
+      // Bottom of the segment stays at local Y = 0; only the top moves.
+      // Y is unaffected by the stair group's rotation (rotation is around
+      // Y), so world Y delta == local Y delta.
+      const delta = hit.y - initialPointerY
+      const newHeight = Math.max(MIN_SEGMENT_HEIGHT, initialHeight + delta)
+      useScene.getState().updateNode(segmentId, { height: newHeight })
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === 'ns-resize') {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useEditor.getState().setResizingStairSegmentHeight(null)
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+
+    dragCleanupRef.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  // Sit above the top of the segment, centered along width and length.
+  const y = segmentNode.height + HEIGHT_HANDLE_OFFSET
+  const z = segmentNode.length / 2
+
+  return (
+    <group position={[0, y, z]}>
+      <group rotation={[0, Math.PI / 2, Math.PI / 2]} scale={scale}>
+        <mesh
+          frustumCulled={false}
+          geometry={geometry}
+          material={material}
+          onPointerDown={activateHeightResize}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setIsHovered(true)
+            document.body.style.cursor = 'ns-resize'
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setIsHovered(false)
+            if (document.body.style.cursor === 'ns-resize') {
+              document.body.style.cursor = ''
+            }
+          }}
+          renderOrder={1010}
+        />
+      </group>
+    </group>
+  )
+}
+
+function StairSegmentGroundActionMenu({
+  segmentNode,
+  segmentObject,
+}: {
+  segmentNode: StairSegmentNode
+  segmentObject: Mesh
+}) {
+  const menuGroupRef = useRef<Group>(null)
+  const sideRef = useRef<number>(1)
+  const initializedForSegmentIdRef = useRef<string | null>(null)
+  const cameraLocalScratch = useMemo(() => new Vector3(), [])
+
+  useFrame((state, dt) => {
+    const menu = menuGroupRef.current
+    if (!menu) return
+
+    // Work in segment-local space: the wrapper this menu lives under already
+    // applies the segment's chained transform, so a flat +X axis is the
+    // segment's width-axis side and +Z is the run direction.
+    segmentObject.updateMatrixWorld()
+    cameraLocalScratch.copy(state.camera.position)
+    segmentObject.worldToLocal(cameraLocalScratch)
+
+    const projection = cameraLocalScratch.x
+
+    const isFresh = initializedForSegmentIdRef.current !== segmentNode.id
+    const currentSide = sideRef.current
+    let nextSide: number
+    if (isFresh) {
+      nextSide = projection >= 0 ? 1 : -1
+    } else if (currentSide >= 0 && projection < -GROUND_MENU_SIDE_HYSTERESIS) {
+      nextSide = -1
+    } else if (currentSide < 0 && projection > GROUND_MENU_SIDE_HYSTERESIS) {
+      nextSide = 1
+    } else {
+      nextSide = currentSide
+    }
+    sideRef.current = nextSide
+
+    const offset = segmentNode.width / 2 + GROUND_MENU_SIDE_CLEARANCE
+    const targetX = nextSide * offset
+    const targetZ = segmentNode.length / 2
+    // Stays glued to the segment's base — for chained segments this is the
+    // top of the previous segment, not the absolute slab. That's what the
+    // user expects: the menu rides with the segment as the chain shifts.
+    const targetY = 0
+    // Rotate the menu so its local +X (where icons fan out) aligns with the
+    // segment's run (+Z): rotY = -π/2 for +X side, +π/2 for -X side.
+    const targetRot = nextSide >= 0 ? -Math.PI / 2 : Math.PI / 2
+
+    if (isFresh) {
+      menu.position.set(targetX, targetY, targetZ)
+      menu.rotation.y = targetRot
+      initializedForSegmentIdRef.current = segmentNode.id
+      return
+    }
+
+    const t = 1 - Math.exp(-dt * GROUND_MENU_LERP_RATE)
+    menu.position.x += (targetX - menu.position.x) * t
+    menu.position.z += (targetZ - menu.position.z) * t
+    menu.position.y = targetY
+
+    let rotDelta = targetRot - menu.rotation.y
+    while (rotDelta > Math.PI) rotDelta -= 2 * Math.PI
+    while (rotDelta < -Math.PI) rotDelta += 2 * Math.PI
+    menu.rotation.y += rotDelta * t
+  })
+
+  const items: Array<'duplicate' | 'delete'> = ['duplicate', 'delete']
+  const centerIndex = (items.length - 1) / 2
+
+  return (
+    <group ref={menuGroupRef}>
+      {/* Inner 180° flip so the icons read upright from the camera's side
+          after the outer menu's camera-facing Y rotation. */}
+      <group rotation={[0, Math.PI, 0]}>
+        {items.map((kind, index) => (
+          <StairSegmentGroundActionIcon
+            key={kind}
+            kind={kind}
+            offsetIndex={index - centerIndex}
+            segmentNode={segmentNode}
+          />
+        ))}
+      </group>
+    </group>
+  )
+}
+
+function StairSegmentGroundActionIcon({
+  kind,
+  offsetIndex,
+  segmentNode,
+}: {
+  kind: 'duplicate' | 'delete'
+  offsetIndex: number
+  segmentNode: StairSegmentNode
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.2 : 1) * zoom
+
+  const texture = useMemo(() => getIconTexture(kind), [kind])
+  const material = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        map: texture,
+        side: DoubleSide,
+        alphaTest: 0.4,
+        transparent: true,
+        opacity: 1,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [texture],
+  )
+
+  useEffect(() => {
+    material.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [material, isHovered])
+  useEffect(() => () => material.dispose(), [material])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'pointer') {
+        document.body.style.cursor = ''
+      }
+    }
+  }, [])
+
+  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    sfxEmitter.emit('sfx:item-pick')
+    document.body.style.cursor = ''
+    setIsHovered(false)
+
+    if (kind === 'delete') {
+      sfxEmitter.emit('sfx:structure-delete')
+      useViewer.getState().setSelection({ selectedIds: [] })
+      useScene.getState().deleteNode(segmentNode.id as AnyNodeId)
+      return
+    }
+
+    // Duplicate: createNodesAction appends to the parent's children, so the
+    // clone lands at the END of the chain. Force `attachmentSide: 'front'`
+    // so it cleanly continues from whatever segment is currently last —
+    // copying the original's side could turn it into a U-turn relative to
+    // the new chain end, which is almost never what the user wants.
+    const input = structuredClone(segmentNode) as Record<string, unknown>
+    delete input.id
+    input.attachmentSide = 'front'
+    const existingMetadata =
+      input.metadata && typeof input.metadata === 'object' && !Array.isArray(input.metadata)
+        ? (input.metadata as Record<string, unknown>)
+        : {}
+    input.metadata = { ...existingMetadata, isNew: true }
+    try {
+      const dup = StairSegmentSchema.parse(input)
+      useScene.getState().createNode(dup, dup.parentId as AnyNodeId)
+      useViewer.getState().setSelection({ selectedIds: [dup.id] })
+    } catch (err) {
+      console.error('Failed to duplicate stair segment', err)
+    }
+  }
+
+  return (
+    <group position={[offsetIndex * GROUND_MENU_SPACING, 0, 0]} scale={scale}>
+      <mesh
+        material={material}
+        // Handlers on the mesh itself (not the outer group) so each icon
+        // owns its own raycast target. With `depthTest: false` the icons
+        // can show up in multiple intersection lists at a glancing camera
+        // angle; gating on `intersections[0]?.object === event.object`
+        // makes sure only the truly front-most icon takes the hover.
+        onPointerDown={onPointerDown}
+        onPointerOut={(event) => {
+          event.stopPropagation()
+          setIsHovered(false)
+          if (document.body.style.cursor === 'pointer') {
+            document.body.style.cursor = ''
+          }
+        }}
+        onPointerOver={(event) => {
+          event.stopPropagation()
+          if (event.intersections[0]?.object !== event.object) return
+          setIsHovered(true)
+          document.body.style.cursor = 'pointer'
+        }}
+        renderOrder={1010}
+        rotation={[-Math.PI / 2, 0, 0]}
+      >
+        <planeGeometry args={[GROUND_ICON_SIZE, GROUND_ICON_SIZE]} />
+      </mesh>
+    </group>
+  )
+}
+
+const ICON_SVGS: Record<'duplicate' | 'delete', string> = {
+  duplicate: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
+  delete: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
+}
+
+const ICON_TEXTURE_CACHE = new Map<string, CanvasTexture>()
+const ICON_TEXTURE_SIZE = 128
+
+function getIconTexture(kind: 'duplicate' | 'delete'): CanvasTexture {
+  const cached = ICON_TEXTURE_CACHE.get(kind)
+  if (cached) return cached
+
+  const canvas = document.createElement('canvas')
+  canvas.width = ICON_TEXTURE_SIZE
+  canvas.height = ICON_TEXTURE_SIZE
+  const texture = new CanvasTexture(canvas)
+  texture.colorSpace = SRGBColorSpace
+  ICON_TEXTURE_CACHE.set(kind, texture)
+
+  const img = new Image()
+  img.onload = () => {
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+    ctx.clearRect(0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
+    ctx.drawImage(img, 0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
+    texture.needsUpdate = true
+  }
+  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(ICON_SVGS[kind])}`
+
+  return texture
+}
diff --git a/packages/editor/src/store/use-editor.tsx b/packages/editor/src/store/use-editor.tsx
index 565fd831c..6e2b294fc 100644
--- a/packages/editor/src/store/use-editor.tsx
+++ b/packages/editor/src/store/use-editor.tsx
@@ -221,6 +221,12 @@ type EditorState = {
   setResizingWindowHeight: (window: WindowNode | null) => void
   resizingWindowWidth: WindowNode | null
   setResizingWindowWidth: (window: WindowNode | null) => void
+  resizingStairSegmentWidth: StairSegmentNode | null
+  setResizingStairSegmentWidth: (segment: StairSegmentNode | null) => void
+  resizingStairSegmentLength: StairSegmentNode | null
+  setResizingStairSegmentLength: (segment: StairSegmentNode | null) => void
+  resizingStairSegmentHeight: StairSegmentNode | null
+  setResizingStairSegmentHeight: (segment: StairSegmentNode | null) => void
   curvingWall: WallNode | null
   setCurvingWall: (wall: WallNode | null) => void
   curvingFence: FenceNode | null
@@ -652,6 +658,12 @@ const useEditor = create<EditorState>()(
       setResizingWindowHeight: (windowNode) => set({ resizingWindowHeight: windowNode }),
       resizingWindowWidth: null,
       setResizingWindowWidth: (windowNode) => set({ resizingWindowWidth: windowNode }),
+      resizingStairSegmentWidth: null,
+      setResizingStairSegmentWidth: (segment) => set({ resizingStairSegmentWidth: segment }),
+      resizingStairSegmentLength: null,
+      setResizingStairSegmentLength: (segment) => set({ resizingStairSegmentLength: segment }),
+      resizingStairSegmentHeight: null,
+      setResizingStairSegmentHeight: (segment) => set({ resizingStairSegmentHeight: segment }),
       curvingWall: null,
       setCurvingWall: (wall) => set({ curvingWall: wall }),
       curvingFence: null,
diff --git a/packages/nodes/src/stair-segment/panel.tsx b/packages/nodes/src/stair-segment/panel.tsx
index 3dc79d5b8..792675519 100644
--- a/packages/nodes/src/stair-segment/panel.tsx
+++ b/packages/nodes/src/stair-segment/panel.tsx
@@ -16,6 +16,7 @@ import {
   PanelWrapper,
   SegmentedControl,
   SliderControl,
+  ToggleControl,
   triggerSFX,
   useEditor,
 } from '@pascal-app/editor'
@@ -204,34 +205,25 @@ export default function StairSegmentPanel() {
       </PanelSection>
 
       <PanelSection title="Structure">
-        <div className="flex items-center justify-between px-1 py-1">
-          <span className="text-muted-foreground text-xs">Fill to floor</span>
-          <button
-            className={`relative h-5 w-10 rounded-full transition-colors ${
-              node.fillToFloor ? 'bg-blue-500' : 'bg-[#3e3e3e]'
-            }`}
-            onClick={() => handleUpdate({ fillToFloor: !node.fillToFloor })}
-            type="button"
-          >
-            <div
-              className={`absolute top-1 h-3 w-3 rounded-full bg-white transition-transform ${
-                node.fillToFloor ? 'left-6' : 'left-1'
-              }`}
+        <div className="space-y-3">
+          <ToggleControl
+            checked={node.fillToFloor}
+            label="Fill to floor"
+            onChange={(checked) => handleUpdate({ fillToFloor: checked })}
+          />
+          {!node.fillToFloor && (
+            <SliderControl
+              label="Thickness"
+              max={1}
+              min={0.05}
+              onChange={(v) => handleUpdate({ thickness: v })}
+              precision={2}
+              step={0.05}
+              unit="m"
+              value={Math.round((node.thickness ?? 0.25) * 100) / 100}
             />
-          </button>
+          )}
         </div>
-        {!node.fillToFloor && (
-          <SliderControl
-            label="Thickness"
-            max={1}
-            min={0.05}
-            onChange={(v) => handleUpdate({ thickness: v })}
-            precision={2}
-            step={0.05}
-            unit="m"
-            value={Math.round((node.thickness ?? 0.25) * 100) / 100}
-          />
-        )}
       </PanelSection>
 
       <PanelSection title="Position">

From 44344bffbfde43ea68eee7ffd9c536cd720ea912 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Mon, 25 May 2026 12:24:57 +0530
Subject: [PATCH 20/48] stair: 2D move-revert fix, parent ground menu,
 curved/spiral in-world arrows

- Route stair 2D moves through `floorplanMoveTarget` and honor
  `movingNodeOrigin === '2d'` in `MoveRoofTool` cleanup so the 3D
  tool's restore-from-snapshot no longer stomps the 2D commit.
- Parent stair selection shows an in-world ground action menu
  (move / duplicate / delete) anchored beside the stair; the
  screen-space floating menu is suppressed for `type === 'stair'`
  to match door / window / segment.
- Curved & spiral stairs gain in-world resize arrows: rise (centered
  on the pillar for spirals), width, inner radius, and two sweep
  handles (one per arc end) clustered beside the width arrow.
- Camera controls pause during curved-stair drags.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../editor/custom-camera-controls.tsx         |    8 +
 .../editor/floating-action-menu.tsx           |    2 +
 .../editor/src/components/editor/index.tsx    |    3 +-
 .../editor/stair-segment-handles.tsx          | 1179 +++++++++++++++--
 .../components/tools/roof/move-roof-tool.tsx  |   11 +-
 packages/editor/src/store/use-editor.tsx      |   16 +
 packages/nodes/src/stair/definition.ts        |    2 +
 packages/nodes/src/stair/floorplan-move.ts    |   72 +
 8 files changed, 1217 insertions(+), 76 deletions(-)
 create mode 100644 packages/nodes/src/stair/floorplan-move.ts

diff --git a/packages/editor/src/components/editor/custom-camera-controls.tsx b/packages/editor/src/components/editor/custom-camera-controls.tsx
index 1bb931683..b00a0d295 100644
--- a/packages/editor/src/components/editor/custom-camera-controls.tsx
+++ b/packages/editor/src/components/editor/custom-camera-controls.tsx
@@ -144,6 +144,10 @@ export const CustomCameraControls = () => {
   const resizingStairSegmentWidth = useEditor((s) => s.resizingStairSegmentWidth)
   const resizingStairSegmentLength = useEditor((s) => s.resizingStairSegmentLength)
   const resizingStairSegmentHeight = useEditor((s) => s.resizingStairSegmentHeight)
+  const resizingCurvedStairRise = useEditor((s) => s.resizingCurvedStairRise)
+  const resizingCurvedStairWidth = useEditor((s) => s.resizingCurvedStairWidth)
+  const resizingCurvedStairInnerRadius = useEditor((s) => s.resizingCurvedStairInnerRadius)
+  const resizingCurvedStairSweep = useEditor((s) => s.resizingCurvedStairSweep)
   const isBoxSelectActive = mode === 'select' && selectionTool === 'marquee'
   const isInteracting = Boolean(
     tool ||
@@ -156,6 +160,10 @@ export const CustomCameraControls = () => {
       resizingStairSegmentWidth ||
       resizingStairSegmentLength ||
       resizingStairSegmentHeight ||
+      resizingCurvedStairRise ||
+      resizingCurvedStairWidth ||
+      resizingCurvedStairInnerRadius ||
+      resizingCurvedStairSweep ||
       isBoxSelectActive,
   )
   const touches = useMemo(() => {
diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index 294ed3165..0c5c96f05 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -459,6 +459,8 @@ export function FloatingActionMenu() {
   if (node?.type === 'window') return null
   // Stair segments use the in-world `StairSegmentGroundActionMenu`.
   if (node?.type === 'stair-segment') return null
+  // Parent stairs use the in-world `StairGroundActionMenu`.
+  if (node?.type === 'stair') return null
 
   return (
     <group>
diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index c40fded16..e876c131d 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -66,7 +66,7 @@ import { PresetThumbnailGenerator } from './preset-thumbnail-generator'
 import { SelectionManager } from './selection-manager'
 import { SiteEdgeLabels } from './site-edge-labels'
 import { SnapshotCaptureOverlay } from './snapshot-capture-overlay'
-import { StairSegmentHandles } from './stair-segment-handles'
+import { StairHandles, StairSegmentHandles } from './stair-segment-handles'
 import { type SnapshotCameraData, ThumbnailGenerator } from './thumbnail-generator'
 import { WallMeasurementLabel } from './wall-measurement-label'
 import { WallMoveSideHandles } from './wall-move-side-handles'
@@ -594,6 +594,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       {!(isVersionPreviewMode || isFirstPersonMode) && <DoorSideHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <WindowSideHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <StairSegmentHandles />}
+      {!(isVersionPreviewMode || isFirstPersonMode) && <StairHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingActionMenu />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingBuildingActionMenu />}
       {!isFirstPersonMode && <WallMeasurementLabel />}
diff --git a/packages/editor/src/components/editor/stair-segment-handles.tsx b/packages/editor/src/components/editor/stair-segment-handles.tsx
index 101097050..e163f2c5d 100644
--- a/packages/editor/src/components/editor/stair-segment-handles.tsx
+++ b/packages/editor/src/components/editor/stair-segment-handles.tsx
@@ -21,6 +21,7 @@ import {
   type Object3D,
   OrthographicCamera,
   Plane,
+  RingGeometry,
   Shape,
   SRGBColorSpace,
   Vector2,
@@ -28,6 +29,7 @@ import {
 } from 'three'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { sfxEmitter } from '../../lib/sfx-bus'
+import { duplicateStairSubtree } from '../../lib/stair-duplication'
 import useEditor from '../../store/use-editor'
 
 const SIDE_HANDLE_OFFSET = 0.24
@@ -171,11 +173,19 @@ function StairSegmentHandlesForSegment({ segmentNode }: { segmentNode: StairSegm
   return createPortal(
     <group ref={stairPoseRef}>
       <group ref={segmentPoseRef}>
-        <StairSegmentSideArrow side="left" segmentNode={segmentNode} stairObject={stairObject} />
-        <StairSegmentSideArrow side="right" segmentNode={segmentNode} stairObject={stairObject} />
-        <StairSegmentLengthArrow segmentNode={segmentNode} stairObject={stairObject} />
+        <StairSegmentSideArrow
+          segmentNode={segmentNode}
+          segmentObject={segmentObject}
+          side="left"
+        />
+        <StairSegmentSideArrow
+          segmentNode={segmentNode}
+          segmentObject={segmentObject}
+          side="right"
+        />
+        <StairSegmentLengthArrow segmentNode={segmentNode} segmentObject={segmentObject} />
         {segmentNode.segmentType === 'stair' ? (
-          <StairSegmentHeightArrow segmentNode={segmentNode} stairObject={stairObject} />
+          <StairSegmentHeightArrow segmentNode={segmentNode} segmentObject={segmentObject} />
         ) : null}
         <StairSegmentGroundActionMenu segmentNode={segmentNode} segmentObject={segmentObject} />
       </group>
@@ -226,11 +236,11 @@ function useArrowVisuals(cursor: 'ew-resize' | 'ns-resize') {
 function StairSegmentSideArrow({
   side,
   segmentNode,
-  stairObject,
+  segmentObject,
 }: {
   side: 'left' | 'right'
   segmentNode: StairSegmentNode
-  stairObject: Object3D
+  segmentObject: Mesh
 }) {
   const { geometry, material, scale, setIsHovered } = useArrowVisuals('ew-resize')
   const { camera, raycaster, gl } = useThree()
@@ -245,18 +255,15 @@ function StairSegmentSideArrow({
   const activateWidthResize = (event: ThreeEvent<PointerEvent>) => {
     event.stopPropagation()
 
-    stairObject.updateMatrixWorld()
-    // The segment's local origin is at its back-bottom-center inside the
-    // stair group. Center the raycast plane on the segment's mid-body so
-    // the picked depth matches what the user sees.
-    const segmentRot = segmentNode.rotation
-    const segmentLocalX = new Vector3(Math.cos(segmentRot), 0, -Math.sin(segmentRot))
-    const segmentLocalZ = new Vector3(Math.sin(segmentRot), 0, Math.cos(segmentRot))
-    const centerStair = new Vector3()
-      .copy(new Vector3(...segmentNode.position))
-      .addScaledVector(segmentLocalZ, segmentNode.length / 2)
-      .add(new Vector3(0, segmentNode.height / 2, 0))
-    const centerWorld = centerStair.clone().applyMatrix4(stairObject.matrixWorld)
+    // Work in the SEGMENT's own local frame, not the stair group's. The
+    // chain (`syncSegmentMeshTransforms`) writes the segment mesh's
+    // rotation/position imperatively each frame based on prior siblings'
+    // `attachmentSide`; the node's own `rotation`/`position` are stale for
+    // anything past the first segment. `segmentObject.worldToLocal` is the
+    // only correct projection.
+    segmentObject.updateMatrixWorld()
+    const centerSegment = new Vector3(0, segmentNode.height / 2, segmentNode.length / 2)
+    const centerWorld = centerSegment.clone().applyMatrix4(segmentObject.matrixWorld)
 
     const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
     if (planeNormal.lengthSq() === 0) return
@@ -276,18 +283,14 @@ function StairSegmentSideArrow({
     raycaster.setFromCamera(ndc, camera)
     const hitWorld = new Vector3()
     if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
-    const hitStair = stairObject.worldToLocal(hitWorld.clone())
+    const hitLocal = segmentObject.worldToLocal(hitWorld.clone())
 
     const initialWidth = segmentNode.width
-    const initialPositionX = segmentNode.position[0]
-    const initialPositionZ = segmentNode.position[2]
-    // sign === +1: right arrow grows from the segment's left edge anchor.
-    // sign === -1: left arrow grows from the right edge anchor.
+    // Segment-local +X is always the width axis, regardless of chain
+    // rotation. Right arrow's pointer-delta-in-+X is the width grow signal;
+    // left arrow's pointer-delta-in-+X is negated.
     const sign = side === 'right' ? 1 : -1
-    const initialPointerX = hitStair.x
-    const initialPointerZ = hitStair.z
-    const armX = segmentLocalX.x
-    const armZ = segmentLocalX.z
+    const initialPointerX = hitLocal.x
     const segmentId = segmentNode.id as AnyNodeId
 
     document.body.style.cursor = 'ew-resize'
@@ -301,20 +304,14 @@ function StairSegmentSideArrow({
       raycaster.setFromCamera(ndc, camera)
       const hit = new Vector3()
       if (!raycaster.ray.intersectPlane(plane, hit)) return
-      const hitLocal = stairObject.worldToLocal(hit.clone())
-      const dx = hitLocal.x - initialPointerX
-      const dz = hitLocal.z - initialPointerZ
-      const armDelta = dx * armX + dz * armZ
-      const widthDelta = sign * armDelta
+      const hitLocal = segmentObject.worldToLocal(hit.clone())
+      // Width grows symmetrically around the chain centerline — the chain
+      // owns segment.position so we can't anchor the opposite edge by
+      // writing back to it (the next frame's `syncSegmentMeshTransforms`
+      // would clobber the write).
+      const widthDelta = sign * (hitLocal.x - initialPointerX)
       const newWidth = Math.max(MIN_SEGMENT_WIDTH, initialWidth + widthDelta)
-      // Slide the centerline so the opposite edge stays put under the user.
-      const half = (newWidth - initialWidth) / 2
-      const newPositionX = initialPositionX + sign * half * armX
-      const newPositionZ = initialPositionZ + sign * half * armZ
-      useScene.getState().updateNode(segmentId, {
-        width: newWidth,
-        position: [newPositionX, segmentNode.position[1], newPositionZ],
-      })
+      useScene.getState().updateNode(segmentId, { width: newWidth })
     }
 
     const cleanup = () => {
@@ -377,10 +374,10 @@ function StairSegmentSideArrow({
 
 function StairSegmentLengthArrow({
   segmentNode,
-  stairObject,
+  segmentObject,
 }: {
   segmentNode: StairSegmentNode
-  stairObject: Object3D
+  segmentObject: Mesh
 }) {
   const { geometry, material, scale, setIsHovered } = useArrowVisuals('ew-resize')
   const { camera, raycaster, gl } = useThree()
@@ -395,14 +392,11 @@ function StairSegmentLengthArrow({
   const activateLengthResize = (event: ThreeEvent<PointerEvent>) => {
     event.stopPropagation()
 
-    stairObject.updateMatrixWorld()
-    const segmentRot = segmentNode.rotation
-    const segmentLocalZ = new Vector3(Math.sin(segmentRot), 0, Math.cos(segmentRot))
-    const centerStair = new Vector3()
-      .copy(new Vector3(...segmentNode.position))
-      .addScaledVector(segmentLocalZ, segmentNode.length / 2)
-      .add(new Vector3(0, segmentNode.height / 2, 0))
-    const centerWorld = centerStair.clone().applyMatrix4(stairObject.matrixWorld)
+    // Segment-local frame for the same chained-rotation reason the side
+    // arrows use it — see comment in StairSegmentSideArrow.
+    segmentObject.updateMatrixWorld()
+    const centerSegment = new Vector3(0, segmentNode.height / 2, segmentNode.length / 2)
+    const centerWorld = centerSegment.clone().applyMatrix4(segmentObject.matrixWorld)
 
     const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
     if (planeNormal.lengthSq() === 0) return
@@ -422,13 +416,10 @@ function StairSegmentLengthArrow({
     raycaster.setFromCamera(ndc, camera)
     const hitWorld = new Vector3()
     if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
-    const hitStair = stairObject.worldToLocal(hitWorld.clone())
+    const hitLocal = segmentObject.worldToLocal(hitWorld.clone())
 
     const initialLength = segmentNode.length
-    const initialPointerX = hitStair.x
-    const initialPointerZ = hitStair.z
-    const armX = segmentLocalZ.x
-    const armZ = segmentLocalZ.z
+    const initialPointerZ = hitLocal.z
     const segmentId = segmentNode.id as AnyNodeId
 
     document.body.style.cursor = 'ew-resize'
@@ -442,13 +433,11 @@ function StairSegmentLengthArrow({
       raycaster.setFromCamera(ndc, camera)
       const hit = new Vector3()
       if (!raycaster.ray.intersectPlane(plane, hit)) return
-      const hitLocal = stairObject.worldToLocal(hit.clone())
-      const dx = hitLocal.x - initialPointerX
-      const dz = hitLocal.z - initialPointerZ
-      // Project the pointer delta onto the segment's run direction. The
-      // segment's local origin (Z=0 face) stays anchored, so the run
-      // simply extends/contracts toward the back.
-      const lengthDelta = dx * armX + dz * armZ
+      const hitLocal = segmentObject.worldToLocal(hit.clone())
+      // Segment-local +Z is the run direction. The segment's back-face
+      // (Z=0) is the chain anchor, so the run simply extends/contracts
+      // toward the back as the pointer's +Z component grows.
+      const lengthDelta = hitLocal.z - initialPointerZ
       const newLength = Math.max(MIN_SEGMENT_LENGTH, initialLength + lengthDelta)
       useScene.getState().updateNode(segmentId, { length: newLength })
     }
@@ -511,10 +500,10 @@ function StairSegmentLengthArrow({
 
 function StairSegmentHeightArrow({
   segmentNode,
-  stairObject,
+  segmentObject,
 }: {
   segmentNode: StairSegmentNode
-  stairObject: Object3D
+  segmentObject: Mesh
 }) {
   const { geometry, material, scale, setIsHovered } = useArrowVisuals('ns-resize')
   const { camera, raycaster, gl } = useThree()
@@ -529,14 +518,12 @@ function StairSegmentHeightArrow({
   const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
     event.stopPropagation()
 
-    stairObject.updateMatrixWorld()
-    const segmentRot = segmentNode.rotation
-    const segmentLocalZ = new Vector3(Math.sin(segmentRot), 0, Math.cos(segmentRot))
-    const centerStair = new Vector3()
-      .copy(new Vector3(...segmentNode.position))
-      .addScaledVector(segmentLocalZ, segmentNode.length / 2)
-      .add(new Vector3(0, segmentNode.height / 2, 0))
-    const centerWorld = centerStair.clone().applyMatrix4(stairObject.matrixWorld)
+    // Segment-local frame anchor for the raycast plane — Y math itself is
+    // rotation-invariant, but the plane center needs to be at the actual
+    // mesh position (the chain owns it, not segmentNode.position).
+    segmentObject.updateMatrixWorld()
+    const centerSegment = new Vector3(0, segmentNode.height / 2, segmentNode.length / 2)
+    const centerWorld = centerSegment.clone().applyMatrix4(segmentObject.matrixWorld)
 
     const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
     if (planeNormal.lengthSq() === 0) return
@@ -835,15 +822,16 @@ function StairSegmentGroundActionIcon({
   )
 }
 
-const ICON_SVGS: Record<'duplicate' | 'delete', string> = {
+const ICON_SVGS: Record<'duplicate' | 'delete' | 'move', string> = {
   duplicate: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
   delete: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
+  move: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 9 2 12 5 15"/><polyline points="9 5 12 2 15 5"/><polyline points="15 19 12 22 9 19"/><polyline points="19 9 22 12 19 15"/><line x1="2" x2="22" y1="12" y2="12"/><line x1="12" x2="12" y1="2" y2="22"/></svg>`,
 }
 
 const ICON_TEXTURE_CACHE = new Map<string, CanvasTexture>()
 const ICON_TEXTURE_SIZE = 128
 
-function getIconTexture(kind: 'duplicate' | 'delete'): CanvasTexture {
+function getIconTexture(kind: 'duplicate' | 'delete' | 'move'): CanvasTexture {
   const cached = ICON_TEXTURE_CACHE.get(kind)
   if (cached) return cached
 
@@ -866,3 +854,1046 @@ function getIconTexture(kind: 'duplicate' | 'delete'): CanvasTexture {
 
   return texture
 }
+
+// ───────────────────────────────────────────────────────────────────────
+// Parent-stair handles — ground-anchored action menu for the whole stair
+// (move / duplicate / delete). Mirrors the per-segment ground menu above
+// so a selected stair shows in-world chrome instead of the screen-space
+// `<FloatingActionMenu>`.
+// ───────────────────────────────────────────────────────────────────────
+
+export function StairHandles() {
+  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 selectedId = selectedIds.length === 1 ? selectedIds[0] : null
+  const selectedStair = useScene((state) => {
+    const node = selectedId ? state.nodes[selectedId as AnyNodeId] : null
+    return node?.type === 'stair' ? node : null
+  })
+
+  const shouldRender =
+    Boolean(selectedStair) && !isFloorplanHovered && mode !== 'delete' && !movingNode
+
+  if (!shouldRender || !selectedStair) return null
+  return <StairHandlesForStair stairNode={selectedStair} />
+}
+
+function StairHandlesForStair({ stairNode }: { stairNode: StairNode }) {
+  // Same portal-into-parent trick as `StairSegmentHandlesForSegment`: the
+  // stair group has `useNodeEvents` handlers, so anything rendered inside
+  // it bubbles up and would be traced by the outline post-process.
+  const stairParentId = stairNode.parentId
+
+  const [stairObject, setStairObject] = useState<Object3D | null>(
+    () => sceneRegistry.nodes.get(stairNode.id as AnyNodeId) ?? null,
+  )
+  const [parentObject, setParentObject] = useState<Object3D | null>(() =>
+    stairParentId ? (sceneRegistry.nodes.get(stairParentId as AnyNodeId) ?? null) : null,
+  )
+
+  useEffect(() => {
+    let frameId = 0
+    const resolve = () => {
+      const nextStair = sceneRegistry.nodes.get(stairNode.id as AnyNodeId) ?? null
+      const nextParent = stairParentId
+        ? (sceneRegistry.nodes.get(stairParentId as AnyNodeId) ?? null)
+        : null
+      setStairObject((current) => (current === nextStair ? current : nextStair))
+      setParentObject((current) => (current === nextParent ? current : nextParent))
+      if (!(nextStair && nextParent)) {
+        frameId = window.requestAnimationFrame(resolve)
+      }
+    }
+    resolve()
+    return () => {
+      if (frameId) window.cancelAnimationFrame(frameId)
+    }
+  }, [stairNode.id, stairParentId])
+
+  const stairPoseRef = useRef<Group>(null)
+
+  useFrame(() => {
+    const stairPose = stairPoseRef.current
+    if (!(stairPose && stairObject)) return
+    // Mirror the stair group's pose so the menu rides along when the stair
+    // is moved imperatively (e.g. mid-drag from `MoveRoofTool`).
+    stairPose.position.copy(stairObject.position)
+    stairPose.quaternion.copy(stairObject.quaternion)
+  })
+
+  if (!(stairObject && parentObject)) return null
+
+  const isCurvedOrSpiral = stairNode.stairType === 'curved' || stairNode.stairType === 'spiral'
+
+  return createPortal(
+    <group ref={stairPoseRef}>
+      {isCurvedOrSpiral ? (
+        <>
+          <CurvedStairRiseArrow stairNode={stairNode} stairObject={stairObject} />
+          <CurvedStairWidthArrow stairNode={stairNode} stairObject={stairObject} />
+          <CurvedStairInnerRadiusArrow stairNode={stairNode} stairObject={stairObject} />
+          <CurvedStairSweepArrow end="start" stairNode={stairNode} stairObject={stairObject} />
+          <CurvedStairSweepArrow end="end" stairNode={stairNode} stairObject={stairObject} />
+        </>
+      ) : null}
+      <StairGroundActionMenu stairNode={stairNode} stairObject={stairObject} />
+    </group>,
+    parentObject,
+  )
+}
+
+// Sum the visible straight-segment lengths to find the chain centerline.
+// Curved / spiral stairs have no segment chain — fall back to 0 so the menu
+// lands at the stair's root anchor.
+function useStairChainLength(stairNode: StairNode): number {
+  return useScene((state) => {
+    if ((stairNode.stairType ?? 'straight') !== 'straight') return 0
+    let total = 0
+    for (const childId of stairNode.children ?? []) {
+      const child = state.nodes[childId as AnyNodeId]
+      if (child?.type !== 'stair-segment') continue
+      if (child.visible === false) continue
+      total += child.length ?? 0
+    }
+    return total
+  })
+}
+
+function StairGroundActionMenu({
+  stairNode,
+  stairObject,
+}: {
+  stairNode: StairNode
+  stairObject: Object3D
+}) {
+  const menuGroupRef = useRef<Group>(null)
+  const sideRef = useRef<number>(1)
+  const initializedForStairIdRef = useRef<string | null>(null)
+  const cameraLocalScratch = useMemo(() => new Vector3(), [])
+
+  const chainLength = useStairChainLength(stairNode)
+
+  useFrame((state, dt) => {
+    const menu = menuGroupRef.current
+    if (!menu) return
+
+    // Work in stair-local space: the wrapper this menu lives under already
+    // applies the stair's world transform, so +X is the stair's width axis
+    // and +Z is the run direction.
+    stairObject.updateMatrixWorld()
+    cameraLocalScratch.copy(state.camera.position)
+    stairObject.worldToLocal(cameraLocalScratch)
+
+    const stairType = stairNode.stairType ?? 'straight'
+    const isArc = stairType === 'curved' || stairType === 'spiral'
+
+    // For arc stairs the footprint is a disc; the "side" projection should
+    // come from the camera vector that's the longest local axis so the menu
+    // doesn't end up biased to +X just because the arc happens to face it.
+    const projection = isArc
+      ? // Larger absolute axis decides the side, signed by that axis's value.
+        Math.abs(cameraLocalScratch.x) >= Math.abs(cameraLocalScratch.z)
+        ? cameraLocalScratch.x
+        : cameraLocalScratch.z
+      : cameraLocalScratch.x
+
+    const isFresh = initializedForStairIdRef.current !== stairNode.id
+    const currentSide = sideRef.current
+    let nextSide: number
+    if (isFresh) {
+      nextSide = projection >= 0 ? 1 : -1
+    } else if (currentSide >= 0 && projection < -GROUND_MENU_SIDE_HYSTERESIS) {
+      nextSide = -1
+    } else if (currentSide < 0 && projection > GROUND_MENU_SIDE_HYSTERESIS) {
+      nextSide = 1
+    } else {
+      nextSide = currentSide
+    }
+    sideRef.current = nextSide
+
+    // Straight stairs: side offset along +X by half-width; menu sits at the
+    // chain centerline along +Z.
+    // Curved / spiral stairs: footprint is an annular disc centered at the
+    // stair root with outer radius `innerRadius + width`. Place the menu
+    // just outside that disc, on whichever cardinal side faces the camera.
+    let targetX: number
+    let targetZ: number
+    let targetRot: number
+    if (isArc) {
+      const innerRadius = Math.max(
+        stairType === 'spiral' ? 0.05 : 0.2,
+        stairNode.innerRadius ?? (stairType === 'spiral' ? 0.2 : 0.9),
+      )
+      const outerRadius = innerRadius + Math.max(stairNode.width ?? 1, 0.4)
+      const radial = outerRadius + GROUND_MENU_SIDE_CLEARANCE
+      // Which local axis the menu sits on: pick whichever the camera leans
+      // toward most. Side sign (±1) flips it to the camera-facing half.
+      const cameraOnX = Math.abs(cameraLocalScratch.x) >= Math.abs(cameraLocalScratch.z)
+      targetX = cameraOnX ? nextSide * radial : 0
+      targetZ = cameraOnX ? 0 : nextSide * radial
+      // Icons fan out along the menu's local +X and the icon texture's "top"
+      // (after the plane's -π/2 X-rotation + the inner 180° Y-flip) points
+      // along the menu's local +Z. The outer Y rotation has to land that +Z
+      // direction AWAY from the camera so icons read upright; otherwise the
+      // texture appears upside-down (icons facing inward toward the stair).
+      // For the ±Z cardinal sides that means π / 0, not 0 / π.
+      targetRot = cameraOnX
+        ? nextSide >= 0
+          ? -Math.PI / 2
+          : Math.PI / 2
+        : nextSide >= 0
+          ? Math.PI
+          : 0
+    } else {
+      const offset = stairNode.width / 2 + GROUND_MENU_SIDE_CLEARANCE
+      targetX = nextSide * offset
+      // Centerline of the chain along the run.
+      targetZ = chainLength / 2
+      targetRot = nextSide >= 0 ? -Math.PI / 2 : Math.PI / 2
+    }
+    const targetY = 0
+
+    if (isFresh) {
+      menu.position.set(targetX, targetY, targetZ)
+      menu.rotation.y = targetRot
+      initializedForStairIdRef.current = stairNode.id
+      return
+    }
+
+    const t = 1 - Math.exp(-dt * GROUND_MENU_LERP_RATE)
+    menu.position.x += (targetX - menu.position.x) * t
+    menu.position.z += (targetZ - menu.position.z) * t
+    menu.position.y = targetY
+
+    let rotDelta = targetRot - menu.rotation.y
+    while (rotDelta > Math.PI) rotDelta -= 2 * Math.PI
+    while (rotDelta < -Math.PI) rotDelta += 2 * Math.PI
+    menu.rotation.y += rotDelta * t
+  })
+
+  const items: Array<'move' | 'duplicate' | 'delete'> = ['move', 'duplicate', 'delete']
+  const centerIndex = (items.length - 1) / 2
+
+  return (
+    <group ref={menuGroupRef}>
+      {/* Inner 180° flip so icons read upright from the camera side after the
+          outer menu's camera-facing Y rotation. */}
+      <group rotation={[0, Math.PI, 0]}>
+        {items.map((kind, index) => (
+          <StairGroundActionIcon
+            key={kind}
+            kind={kind}
+            offsetIndex={index - centerIndex}
+            stairNode={stairNode}
+          />
+        ))}
+      </group>
+    </group>
+  )
+}
+
+function StairGroundActionIcon({
+  kind,
+  offsetIndex,
+  stairNode,
+}: {
+  kind: 'move' | 'duplicate' | 'delete'
+  offsetIndex: number
+  stairNode: StairNode
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.2 : 1) * zoom
+
+  const texture = useMemo(() => getIconTexture(kind), [kind])
+  const material = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        map: texture,
+        side: DoubleSide,
+        alphaTest: 0.4,
+        transparent: true,
+        opacity: 1,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [texture],
+  )
+
+  useEffect(() => {
+    material.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [material, isHovered])
+  useEffect(() => () => material.dispose(), [material])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'pointer') {
+        document.body.style.cursor = ''
+      }
+    }
+  }, [])
+
+  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    sfxEmitter.emit('sfx:item-pick')
+    document.body.style.cursor = ''
+    setIsHovered(false)
+
+    if (kind === 'move') {
+      // Hand the stair to the move tool the same way the floating menu does:
+      // clear selection so selection-gated UI unmounts during the drag,
+      // then set `movingNode`. `MoveRoofTool` picks it up.
+      useViewer.getState().setSelection({ selectedIds: [] })
+      useEditor.getState().setMovingNode(stairNode)
+      return
+    }
+
+    if (kind === 'delete') {
+      sfxEmitter.emit('sfx:structure-delete')
+      useViewer.getState().setSelection({ selectedIds: [] })
+      useScene.getState().deleteNode(stairNode.id as AnyNodeId)
+      return
+    }
+
+    // Duplicate: `duplicateStairSubtree` clones the stair + all its segments
+    // and hands the duplicate to move mode (offset by +1,+1 inside).
+    try {
+      duplicateStairSubtree(stairNode.id as AnyNodeId, { mode: 'move' })
+    } catch (err) {
+      console.error('Failed to duplicate stair', err)
+    }
+  }
+
+  return (
+    <group position={[offsetIndex * GROUND_MENU_SPACING, 0, 0]} scale={scale}>
+      <mesh
+        material={material}
+        onPointerDown={onPointerDown}
+        onPointerOut={(event) => {
+          event.stopPropagation()
+          setIsHovered(false)
+          if (document.body.style.cursor === 'pointer') {
+            document.body.style.cursor = ''
+          }
+        }}
+        onPointerOver={(event) => {
+          event.stopPropagation()
+          if (event.intersections[0]?.object !== event.object) return
+          setIsHovered(true)
+          document.body.style.cursor = 'pointer'
+        }}
+        renderOrder={1010}
+        rotation={[-Math.PI / 2, 0, 0]}
+      >
+        <planeGeometry args={[GROUND_ICON_SIZE, GROUND_ICON_SIZE]} />
+      </mesh>
+    </group>
+  )
+}
+
+// ───────────────────────────────────────────────────────────────────────
+// Curved / spiral stair arrows — three handles that map to the stair-level
+// parametric params (totalRise, width, innerRadius). Curved stairs have no
+// `stair-segment` children, so the segment arrows above don't apply.
+// ───────────────────────────────────────────────────────────────────────
+
+const CURVED_RISE_OFFSET = 0.35
+const CURVED_RADIAL_OFFSET = 0.16
+// Width arrow sits a bit further out than the inner radius arrow — pulls the
+// handle clear of the curved stair's outer body so it doesn't read as part of
+// the geometry. The companion ring hugs the outer edge with its own smaller
+// padding so it visually traces the stair's outer perimeter.
+const CURVED_WIDTH_HANDLE_OFFSET = 0.5
+const CURVED_OUTER_RING_OFFSET = 0.2
+const CURVED_INNER_RING_OFFSET = 0.2
+const MIN_CURVED_RISE = 0.3
+const MIN_CURVED_WIDTH = 0.4
+// Match the renderer floors so dragging can't push past what the geometry
+// will actually accept (`renderer.tsx` clamps innerRadius this way).
+const MIN_CURVED_INNER_RADIUS_SPIRAL = 0.05
+const MIN_CURVED_INNER_RADIUS_CURVED = 0.2
+// Sweep arrows: two handles, one per arc end, anchored on the outer rim at
+// midAngle = 0 — same axis as the width arrow but on a closer radial step
+// so the width arrow sits visibly further out than the sweep cluster. ±Z
+// offset keeps the chevrons from stacking: +Z is the END handle (grows
+// the +sweep/2 edge), -Z is the START handle.
+const CURVED_SWEEP_RADIAL_OFFSET = 0.3
+const CURVED_SWEEP_LATERAL_OFFSET = 0.24
+// Sweep clamps. Min is one short step's worth so the stair doesn't collapse
+// past visibility; max stops a hair shy of a full turn so the start / end
+// edges don't fight for the same pixel.
+const MIN_CURVED_SWEEP = Math.PI / 12
+const MAX_CURVED_SWEEP = Math.PI * 2 - 0.05
+
+type CurvedStairGeometry = {
+  isSpiral: boolean
+  stepCount: number
+  totalRise: number
+  innerRadius: number
+  outerRadius: number
+  width: number
+  sweepAngle: number
+  stepSweep: number
+  midRadius: number
+  topAngle: number
+  minInnerRadius: number
+}
+
+function readCurvedStairGeometry(stairNode: StairNode): CurvedStairGeometry {
+  const isSpiral = stairNode.stairType === 'spiral'
+  const stepCount = Math.max(2, Math.round(stairNode.stepCount ?? 10))
+  const totalRise = Math.max(stairNode.totalRise ?? 2.5, 0.1)
+  const width = Math.max(stairNode.width ?? 1, MIN_CURVED_WIDTH)
+  const minInnerRadius = isSpiral ? MIN_CURVED_INNER_RADIUS_SPIRAL : MIN_CURVED_INNER_RADIUS_CURVED
+  const innerRadius = Math.max(minInnerRadius, stairNode.innerRadius ?? 0.9)
+  const outerRadius = innerRadius + width
+  const sweepAngle = stairNode.sweepAngle ?? (isSpiral ? Math.PI * 2 : Math.PI / 2)
+  const stepSweep = sweepAngle / stepCount
+  return {
+    isSpiral,
+    stepCount,
+    totalRise,
+    innerRadius,
+    outerRadius,
+    width,
+    sweepAngle,
+    stepSweep,
+    midRadius: (innerRadius + outerRadius) / 2,
+    topAngle: sweepAngle / 2 - stepSweep / 2,
+    minInnerRadius,
+  }
+}
+
+function CurvedStairRiseArrow({
+  stairNode,
+  stairObject,
+}: {
+  stairNode: StairNode
+  stairObject: Object3D
+}) {
+  const { geometry, material, scale, setIsHovered } = useArrowVisuals('ns-resize')
+  const { camera, raycaster, gl } = useThree()
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.()
+    }
+  }, [])
+
+  const activateRiseResize = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    stairObject.updateMatrixWorld()
+
+    const geom = readCurvedStairGeometry(stairNode)
+    // Spiral stairs anchor over the central pillar (local origin) so the
+    // rise arrow rides the column. Curved stairs anchor over the upper
+    // step's midline, where the user expects the "top of the run" to be.
+    const anchorLocal = geom.isSpiral
+      ? new Vector3(0, geom.totalRise, 0)
+      : new Vector3(
+          geom.midRadius * Math.cos(geom.topAngle),
+          geom.totalRise,
+          geom.midRadius * Math.sin(geom.topAngle),
+        )
+    const anchorWorld = anchorLocal.clone().applyMatrix4(stairObject.matrixWorld)
+
+    const planeNormal = new Vector3().subVectors(camera.position, anchorWorld).setY(0)
+    if (planeNormal.lengthSq() === 0) return
+    planeNormal.normalize()
+    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, anchorWorld)
+
+    const ndc = new Vector2()
+    const setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hitWorld = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
+
+    const initialRise = geom.totalRise
+    const initialPointerY = hitWorld.y
+    const stairId = stairNode.id as AnyNodeId
+
+    document.body.style.cursor = 'ns-resize'
+    sfxEmitter.emit('sfx:item-pick')
+    useEditor.getState().setResizingCurvedStairRise(stairNode)
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    const onMove = (e: PointerEvent) => {
+      setNDC(e.clientX, e.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const hit = new Vector3()
+      if (!raycaster.ray.intersectPlane(plane, hit)) return
+      // Y is unaffected by the stair group's rotation (rotation is Y-axis
+      // only), so world Y delta == local Y delta.
+      const delta = hit.y - initialPointerY
+      const newRise = Math.max(MIN_CURVED_RISE, initialRise + delta)
+      useScene.getState().updateNode(stairId, { totalRise: newRise })
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === 'ns-resize') {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useEditor.getState().setResizingCurvedStairRise(null)
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+
+    dragCleanupRef.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  const geom = readCurvedStairGeometry(stairNode)
+  // Spiral: sit over the central pillar so the arrow tracks the column.
+  // Curved: sit over the upper step's midline (the visual "top" of the run).
+  const x = geom.isSpiral ? 0 : geom.midRadius * Math.cos(geom.topAngle)
+  const z = geom.isSpiral ? 0 : geom.midRadius * Math.sin(geom.topAngle)
+  const y = geom.totalRise + CURVED_RISE_OFFSET
+
+  return (
+    <group position={[x, y, z]}>
+      <group rotation={[0, Math.PI / 2, Math.PI / 2]} scale={scale}>
+        <mesh
+          frustumCulled={false}
+          geometry={geometry}
+          material={material}
+          onPointerDown={activateRiseResize}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setIsHovered(true)
+            document.body.style.cursor = 'ns-resize'
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setIsHovered(false)
+            if (document.body.style.cursor === 'ns-resize') {
+              document.body.style.cursor = ''
+            }
+          }}
+          renderOrder={1010}
+        />
+      </group>
+    </group>
+  )
+}
+
+function CurvedStairWidthArrow({
+  stairNode,
+  stairObject,
+}: {
+  stairNode: StairNode
+  stairObject: Object3D
+}) {
+  const { geometry, material, scale, isHovered, setIsHovered } = useArrowVisuals('ew-resize')
+  const isResizingWidth = useEditor((state) => state.resizingCurvedStairWidth?.id === stairNode.id)
+  const { camera, raycaster, gl } = useThree()
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.()
+    }
+  }, [])
+
+  const activateWidthResize = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    stairObject.updateMatrixWorld()
+
+    const geom = readCurvedStairGeometry(stairNode)
+    // midAngle = 0 puts the radial axis along stair-local +X.
+    const anchorLocal = new Vector3(geom.outerRadius, geom.totalRise / 2, 0)
+    const anchorWorld = anchorLocal.clone().applyMatrix4(stairObject.matrixWorld)
+
+    const planeNormal = new Vector3().subVectors(camera.position, anchorWorld).setY(0)
+    if (planeNormal.lengthSq() === 0) return
+    planeNormal.normalize()
+    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, anchorWorld)
+
+    const ndc = new Vector2()
+    const setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hitWorld = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
+    const hitLocal = stairObject.worldToLocal(hitWorld.clone())
+
+    const initialWidth = geom.width
+    const initialPointerX = hitLocal.x
+    const stairId = stairNode.id as AnyNodeId
+
+    document.body.style.cursor = 'ew-resize'
+    sfxEmitter.emit('sfx:item-pick')
+    useEditor.getState().setResizingCurvedStairWidth(stairNode)
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    const onMove = (e: PointerEvent) => {
+      setNDC(e.clientX, e.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const hit = new Vector3()
+      if (!raycaster.ray.intersectPlane(plane, hit)) return
+      const hitLocal = stairObject.worldToLocal(hit.clone())
+      // At midAngle = 0 the radial axis is +X, so the outward pointer delta
+      // is simply the X delta in stair-local space.
+      const widthDelta = hitLocal.x - initialPointerX
+      const newWidth = Math.max(MIN_CURVED_WIDTH, initialWidth + widthDelta)
+      useScene.getState().updateNode(stairId, { width: newWidth })
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === 'ew-resize') {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useEditor.getState().setResizingCurvedStairWidth(null)
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+
+    dragCleanupRef.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  const geom = readCurvedStairGeometry(stairNode)
+  const x = geom.outerRadius + CURVED_WIDTH_HANDLE_OFFSET
+  const y = geom.totalRise / 2
+  const showOuterRing = isHovered || isResizingWidth
+
+  return (
+    <>
+      {showOuterRing ? (
+        // Ring hugs the outer edge — sits just outside the stair body so it
+        // traces the perimeter, independent of where the arrow handle floats.
+        <CurvedStairRing radius={geom.outerRadius + CURVED_OUTER_RING_OFFSET} y={y} />
+      ) : null}
+      <group position={[x, y, 0]} scale={scale}>
+        <mesh
+          frustumCulled={false}
+          geometry={geometry}
+          material={material}
+          onPointerDown={activateWidthResize}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setIsHovered(true)
+            document.body.style.cursor = 'ew-resize'
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setIsHovered(false)
+            if (document.body.style.cursor === 'ew-resize') {
+              document.body.style.cursor = ''
+            }
+          }}
+          renderOrder={1010}
+        />
+      </group>
+    </>
+  )
+}
+
+// Thin ring drawn at a given stair-local radius, floating at the companion
+// arrow's height so the two read as one connected guide. Uses the arrow's
+// color so the handle and its guide ring feel like a single piece of chrome.
+function CurvedStairRing({ radius, y }: { radius: number; y: number }) {
+  const ringGeom = useMemo(() => {
+    const inner = Math.max(radius - 0.015, 0.001)
+    const outer = radius + 0.015
+    return new RingGeometry(inner, outer, 96)
+  }, [radius])
+
+  const ringMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        transparent: true,
+        opacity: 0.95,
+        depthTest: false,
+      }),
+    [],
+  )
+
+  useEffect(() => () => ringGeom.dispose(), [ringGeom])
+  useEffect(() => () => ringMaterial.dispose(), [ringMaterial])
+
+  return (
+    <mesh
+      geometry={ringGeom}
+      material={ringMaterial}
+      position={[0, y, 0]}
+      renderOrder={1009}
+      rotation={[-Math.PI / 2, 0, 0]}
+    />
+  )
+}
+
+function CurvedStairInnerRadiusArrow({
+  stairNode,
+  stairObject,
+}: {
+  stairNode: StairNode
+  stairObject: Object3D
+}) {
+  const { geometry, material, scale, isHovered, setIsHovered } = useArrowVisuals('ew-resize')
+  const isResizingInner = useEditor(
+    (state) => state.resizingCurvedStairInnerRadius?.id === stairNode.id,
+  )
+  const { camera, raycaster, gl } = useThree()
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.()
+    }
+  }, [])
+
+  const activateInnerRadiusResize = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    stairObject.updateMatrixWorld()
+
+    const geom = readCurvedStairGeometry(stairNode)
+    const anchorLocal = new Vector3(geom.innerRadius, geom.totalRise / 2, 0)
+    const anchorWorld = anchorLocal.clone().applyMatrix4(stairObject.matrixWorld)
+
+    const planeNormal = new Vector3().subVectors(camera.position, anchorWorld).setY(0)
+    if (planeNormal.lengthSq() === 0) return
+    planeNormal.normalize()
+    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, anchorWorld)
+
+    const ndc = new Vector2()
+    const setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hitWorld = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
+    const hitLocal = stairObject.worldToLocal(hitWorld.clone())
+
+    const initialInnerRadius = geom.innerRadius
+    const initialOuterRadius = geom.outerRadius
+    const initialPointerX = hitLocal.x
+    const minInnerRadius = geom.minInnerRadius
+    const maxInnerRadius = initialOuterRadius - MIN_CURVED_WIDTH
+    const stairId = stairNode.id as AnyNodeId
+
+    document.body.style.cursor = 'ew-resize'
+    sfxEmitter.emit('sfx:item-pick')
+    useEditor.getState().setResizingCurvedStairInnerRadius(stairNode)
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    const onMove = (e: PointerEvent) => {
+      setNDC(e.clientX, e.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const hit = new Vector3()
+      if (!raycaster.ray.intersectPlane(plane, hit)) return
+      const hitLocal = stairObject.worldToLocal(hit.clone())
+      // +X pointer delta = inner edge moving outward = innerRadius grows.
+      const innerDelta = hitLocal.x - initialPointerX
+      const newInnerRadius = Math.min(
+        maxInnerRadius,
+        Math.max(minInnerRadius, initialInnerRadius + innerDelta),
+      )
+      // Keep the outer edge pinned in place — width absorbs the change so the
+      // outer rim doesn't shift with the inner one.
+      const newWidth = initialOuterRadius - newInnerRadius
+      useScene.getState().updateNode(stairId, {
+        innerRadius: newInnerRadius,
+        width: newWidth,
+      })
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === 'ew-resize') {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useEditor.getState().setResizingCurvedStairInnerRadius(null)
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+
+    dragCleanupRef.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  const geom = readCurvedStairGeometry(stairNode)
+  const x = geom.innerRadius - CURVED_RADIAL_OFFSET
+  const y = geom.totalRise / 2
+  const showInnerRing = isHovered || isResizingInner
+  // Pull the ring inward from the inner edge by its own offset — clamped so a
+  // tiny inner radius (e.g. spiral default 0.05) doesn't push the ring through
+  // the center.
+  const innerRingRadius = Math.max(geom.innerRadius - CURVED_INNER_RING_OFFSET, 0.05)
+
+  return (
+    <>
+      {showInnerRing ? <CurvedStairRing radius={innerRingRadius} y={y} /> : null}
+      <group position={[x, y, 0]} rotation={[0, Math.PI, 0]} scale={scale}>
+        <mesh
+          frustumCulled={false}
+          geometry={geometry}
+          material={material}
+          onPointerDown={activateInnerRadiusResize}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setIsHovered(true)
+            document.body.style.cursor = 'ew-resize'
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setIsHovered(false)
+            if (document.body.style.cursor === 'ew-resize') {
+              document.body.style.cursor = ''
+            }
+          }}
+          renderOrder={1010}
+        />
+      </group>
+    </>
+  )
+}
+
+// Sweep arrows — one tangent handle per arc end, so each side of the sweep
+// can be extended / retracted independently. The opposite edge is held
+// world-fixed by nudging `stairNode.rotation` by half the applied delta:
+//   - END handle:   sweep += Δ, rotation += Δ/2   (start edge stays put)
+//   - START handle: sweep -= Δ, rotation -= Δ/2   (end edge stays put,
+//                                                  because rotation shifts
+//                                                  the midpoint *with* the
+//                                                  moving start)
+// where Δ is the world angular delta of the cursor from drag-start. Working
+// in world space (not stair-local) sidesteps the moving-frame problem —
+// updating `rotation` mid-drag rotates the local frame, but the cursor's
+// world position doesn't shift under the user's mouse.
+function CurvedStairSweepArrow({
+  end,
+  stairNode,
+  stairObject,
+}: {
+  end: 'start' | 'end'
+  stairNode: StairNode
+  stairObject: Object3D
+}) {
+  const { geometry, material, scale, setIsHovered } = useArrowVisuals('ew-resize')
+  const { camera, raycaster, gl } = useThree()
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.()
+    }
+  }, [])
+
+  const activateSweepResize = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    stairObject.updateMatrixWorld()
+
+    const geom = readCurvedStairGeometry(stairNode)
+    const initialSweep = geom.sweepAngle
+    const initialRotation = stairNode.rotation as number
+    const sweepSign = Math.sign(initialSweep) || 1
+
+    // Drag plane = horizontal slab at the arrow's Y. The cursor's projection
+    // onto this plane gives a stable world-space (X,Z) point we can convert
+    // into an angle around the stair's center.
+    const centerWorld = new Vector3()
+    stairObject.getWorldPosition(centerWorld)
+    const planeY = centerWorld.y + geom.totalRise / 2
+    const plane = new Plane(new Vector3(0, 1, 0), -planeY)
+
+    const ndc = new Vector2()
+    const setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hitWorld = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
+
+    const initialPointerAngle = Math.atan2(hitWorld.z - centerWorld.z, hitWorld.x - centerWorld.x)
+
+    const stairId = stairNode.id as AnyNodeId
+
+    document.body.style.cursor = 'ew-resize'
+    sfxEmitter.emit('sfx:item-pick')
+    useEditor.getState().setResizingCurvedStairSweep(stairNode)
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    const onMove = (e: PointerEvent) => {
+      setNDC(e.clientX, e.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const hit = new Vector3()
+      if (!raycaster.ray.intersectPlane(plane, hit)) return
+
+      const currentPointerAngle = Math.atan2(hit.z - centerWorld.z, hit.x - centerWorld.x)
+      // Normalize the angular delta to [-π, π] so a drag that crosses the
+      // ±π wrap-around point doesn't flip sign mid-gesture.
+      let delta = currentPointerAngle - initialPointerAngle
+      while (delta > Math.PI) delta -= 2 * Math.PI
+      while (delta < -Math.PI) delta += 2 * Math.PI
+
+      // END handle: cursor angle delta == change in the end edge's world
+      // angle → sweep += Δ. START handle: same delta, but it's the start
+      // edge moving, so sweep shrinks by Δ.
+      const sweepDelta = end === 'end' ? delta : -delta
+      const targetSweep = initialSweep + sweepDelta
+      // Clamp magnitude; preserve original winding sign.
+      const clampedAbs = Math.min(
+        MAX_CURVED_SWEEP,
+        Math.max(MIN_CURVED_SWEEP, Math.abs(targetSweep)),
+      )
+      const newSweep = sweepSign * clampedAbs
+      const appliedSweepDelta = newSweep - initialSweep
+      // Three.js R_y(rot) maps stair-local angle θ to world angle (θ − rot).
+      // So the world position of an edge is (local_angle − rotation). To make
+      // the *grabbed* edge follow the cursor while the *other* edge stays
+      // world-fixed:
+      //   END  fixed-start:  Δ_world_start = −ΔS/2 − ΔR = 0 → ΔR = −ΔS/2
+      //   START fixed-end:   Δ_world_end   = +ΔS/2 − ΔR = 0 → ΔR = +ΔS/2
+      // The previous +/-ΔS/2 mapping had both signs flipped — the cursor
+      // ended up controlling the opposite edge.
+      const rotationShift = end === 'end' ? -appliedSweepDelta / 2 : appliedSweepDelta / 2
+      const newRotation = initialRotation + rotationShift
+
+      useScene.getState().updateNode(stairId, {
+        sweepAngle: newSweep,
+        rotation: newRotation,
+      })
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === 'ew-resize') {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useEditor.getState().setResizingCurvedStairSweep(null)
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+
+    dragCleanupRef.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  // Both handles cluster beside the width arrow at the +X rim anchor
+  // (midAngle = 0). END sits on the +Z side of the anchor, START on -Z, so
+  // the spatial layout matches: drag END toward +Z (CCW) to grow, drag
+  // START toward -Z (CW) to grow. sweepSign flips the side assignment for
+  // CW-wound stairs so the spatial mapping holds either way.
+  const geom = readCurvedStairGeometry(stairNode)
+  const sweepSign = Math.sign(geom.sweepAngle) || 1
+  const x = geom.outerRadius + CURVED_SWEEP_RADIAL_OFFSET
+  const z =
+    end === 'end'
+      ? sweepSign * CURVED_SWEEP_LATERAL_OFFSET
+      : -sweepSign * CURVED_SWEEP_LATERAL_OFFSET
+  const y = geom.totalRise / 2
+  // At anchor midAngle = 0 the CCW tangent is world +Z; three.js R_y(-π/2)
+  // maps local +X (chevron tip) → +Z. END handle points +Z (grow CCW),
+  // START handle points -Z (grow CW). sweepSign flips both for CW-wound
+  // stairs so each chevron still points in its own grow direction.
+  const rotationY = end === 'end' ? -sweepSign * (Math.PI / 2) : sweepSign * (Math.PI / 2)
+
+  return (
+    <group position={[x, y, z]} rotation={[0, rotationY, 0]} scale={scale}>
+      <mesh
+        frustumCulled={false}
+        geometry={geometry}
+        material={material}
+        onPointerDown={activateSweepResize}
+        onPointerEnter={(event) => {
+          event.stopPropagation()
+          setIsHovered(true)
+          document.body.style.cursor = 'ew-resize'
+        }}
+        onPointerLeave={(event) => {
+          event.stopPropagation()
+          setIsHovered(false)
+          if (document.body.style.cursor === 'ew-resize') {
+            document.body.style.cursor = ''
+          }
+        }}
+        renderOrder={1010}
+      />
+    </group>
+  )
+}
diff --git a/packages/editor/src/components/tools/roof/move-roof-tool.tsx b/packages/editor/src/components/tools/roof/move-roof-tool.tsx
index e29f7c011..be05f382a 100644
--- a/packages/editor/src/components/tools/roof/move-roof-tool.tsx
+++ b/packages/editor/src/components/tools/roof/move-roof-tool.tsx
@@ -341,7 +341,16 @@ export const MoveRoofTool: React.FC<{
       // Clear ephemeral live transform
       useLiveTransforms.getState().clear(movingNode.id)
 
-      if (!(wasCommitted || wasCancelled || isNew)) {
+      // Skip restore when the 2D floor-plan overlay claimed teardown
+      // ownership — same contract `FloorplanRegistryMoveOverlay` uses to
+      // decide whether to revert its own apply() writes. Without this,
+      // a stair / roof move committed in the floor plan unmounts this
+      // tool with `wasCommitted === false` (this tool's own grid-click
+      // never fired), and the restore below stomps the just-committed
+      // position back to the snapshot.
+      const finalisedBy2D = useEditor.getState().movingNodeOrigin === '2d'
+
+      if (!(wasCommitted || wasCancelled || isNew || finalisedBy2D)) {
         useScene.getState().updateNode(movingNode.id, {
           position: original.position,
           rotation: original.rotation,
diff --git a/packages/editor/src/store/use-editor.tsx b/packages/editor/src/store/use-editor.tsx
index 6e2b294fc..40ebbfd9f 100644
--- a/packages/editor/src/store/use-editor.tsx
+++ b/packages/editor/src/store/use-editor.tsx
@@ -227,6 +227,14 @@ type EditorState = {
   setResizingStairSegmentLength: (segment: StairSegmentNode | null) => void
   resizingStairSegmentHeight: StairSegmentNode | null
   setResizingStairSegmentHeight: (segment: StairSegmentNode | null) => void
+  resizingCurvedStairRise: StairNode | null
+  setResizingCurvedStairRise: (stair: StairNode | null) => void
+  resizingCurvedStairWidth: StairNode | null
+  setResizingCurvedStairWidth: (stair: StairNode | null) => void
+  resizingCurvedStairInnerRadius: StairNode | null
+  setResizingCurvedStairInnerRadius: (stair: StairNode | null) => void
+  resizingCurvedStairSweep: StairNode | null
+  setResizingCurvedStairSweep: (stair: StairNode | null) => void
   curvingWall: WallNode | null
   setCurvingWall: (wall: WallNode | null) => void
   curvingFence: FenceNode | null
@@ -664,6 +672,14 @@ const useEditor = create<EditorState>()(
       setResizingStairSegmentLength: (segment) => set({ resizingStairSegmentLength: segment }),
       resizingStairSegmentHeight: null,
       setResizingStairSegmentHeight: (segment) => set({ resizingStairSegmentHeight: segment }),
+      resizingCurvedStairRise: null,
+      setResizingCurvedStairRise: (stair) => set({ resizingCurvedStairRise: stair }),
+      resizingCurvedStairWidth: null,
+      setResizingCurvedStairWidth: (stair) => set({ resizingCurvedStairWidth: stair }),
+      resizingCurvedStairInnerRadius: null,
+      setResizingCurvedStairInnerRadius: (stair) => set({ resizingCurvedStairInnerRadius: stair }),
+      resizingCurvedStairSweep: null,
+      setResizingCurvedStairSweep: (stair) => set({ resizingCurvedStairSweep: stair }),
       curvingWall: null,
       setCurvingWall: (wall) => set({ curvingWall: wall }),
       curvingFence: null,
diff --git a/packages/nodes/src/stair/definition.ts b/packages/nodes/src/stair/definition.ts
index c692914cd..c85344f79 100644
--- a/packages/nodes/src/stair/definition.ts
+++ b/packages/nodes/src/stair/definition.ts
@@ -1,5 +1,6 @@
 import { type NodeDefinition, StairNode as StairNodeSchema } from '@pascal-app/core'
 import { buildStairFloorplan } from './floorplan'
+import { stairFloorplanMoveTarget } from './floorplan-move'
 import { stairParametrics } from './parametrics'
 import { StairNode } from './schema'
 
@@ -43,6 +44,7 @@ export const stairDefinition: NodeDefinition<typeof StairNode> = {
   // compute their own polygon in isolation. See
   // `nodes/src/stair/floorplan.ts` for the emitter.
   floorplan: buildStairFloorplan,
+  floorplanMoveTarget: stairFloorplanMoveTarget,
 
   presentation: {
     label: 'Stair',
diff --git a/packages/nodes/src/stair/floorplan-move.ts b/packages/nodes/src/stair/floorplan-move.ts
new file mode 100644
index 000000000..ce6ee9188
--- /dev/null
+++ b/packages/nodes/src/stair/floorplan-move.ts
@@ -0,0 +1,72 @@
+import {
+  type AnyNodeId,
+  type FloorplanMoveTarget,
+  type FloorplanMoveTargetSession,
+  type StairNode,
+  snapPointToGrid,
+  useScene,
+} from '@pascal-app/core'
+
+/**
+ * 2D floor-plan move handler for stair — kicks in when the user clicks
+ * "Move" on the stair action menu and the floor-plan view is active.
+ * Stairs are free-floating on the slab (no wall anchor), so the apply
+ * logic is just: pointer in plan space → snap to 0.5 m grid (Shift
+ * bypasses) → write `position` via `useScene.updateNodes`.
+ *
+ * Routing through `floorplanMoveTarget` (instead of the overlay's
+ * generic Path 2 translate) fixes two latent bugs the generic path
+ * has for stair:
+ *
+ *   1. Path 2's `onPointerUp` bails when `event.target.closest(
+ *      '[data-floorplan-scene]')` fails — which happens when the
+ *      pointer-up lands on empty grid background (the SVG `<g>` only
+ *      covers painted entries, so `target` resolves to the parent
+ *      `<svg>` with no `[data-floorplan-scene]` ancestor). Path 1
+ *      uses the overlay's bounding-rect check, which accepts any
+ *      pointer inside the SVG viewport.
+ *   2. Path 2 commits via a single `updateNode` call that has no
+ *      "self-owned commit" hook, so the overlay's diff path can
+ *      silently revert when the final state matches the snapshot.
+ *      The `commit()` below mirrors door's pattern: take ownership
+ *      of the atomic write so the deterministic
+ *      revert → resume → `session.commit()` path runs.
+ */
+export const stairFloorplanMoveTarget: FloorplanMoveTarget<StairNode> = ({ node }) => {
+  // Y stays put — stair's elevation is set by its parent level, not by
+  // the 2D plan drag. Snapshot at start so apply() doesn't need to read
+  // it from a possibly-mutated scene each tick.
+  const startY = node.position[1]
+
+  // Track the last successful placement so `commit()` can write it
+  // atomically — see the comment on `commit` below.
+  let lastValid: { position: [number, number, number] } | null = null
+
+  const session: FloorplanMoveTargetSession = {
+    affectedIds: [node.id as AnyNodeId],
+    apply({ planPoint, modifiers }) {
+      const [sx, sz] = modifiers.shiftKey ? planPoint : snapPointToGrid(planPoint, 0.5)
+      lastValid = { position: [sx, startY, sz] }
+      useScene.getState().updateNodes([{ id: node.id as AnyNodeId, data: lastValid }])
+    },
+    canCommit() {
+      // No overlap / placement rules for stairs in 2D — any pointer-up
+      // position commits. Mirrors the 3D move tool which also lets
+      // stairs land anywhere on the slab.
+      return true
+    },
+    commit() {
+      // Own the atomic write so the overlay takes the deterministic
+      // commit-path (revert → resume → session.commit()). The dispatcher's
+      // diff path would otherwise re-derive the final state by comparing
+      // the post-apply scene to the snapshot — which produces an empty
+      // diff (and silent revert) when the committed move happens to have
+      // identical key/value pairs to the snapshot. Owning commit removes
+      // that foot-gun. Same pattern door / window use.
+      if (!lastValid) return
+      useScene.getState().updateNodes([{ id: node.id as AnyNodeId, data: lastValid }])
+    },
+  }
+
+  return session
+}

From f0a0c3deb09baab5e5f50877e56c93ce8f7fbff4 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Mon, 25 May 2026 13:19:04 +0530
Subject: [PATCH 21/48] editor: reuse measurement-bar geometry; fix two
 post-merge dangling refs

MeasurementBar was building a fresh BoxGeometry per render for every wall
measurement bar, which the WebGPU backend flagged ("Vertex buffer slot N
... was not set") when walls moved. Hoist a unit cube and scale it instead.

Two refs left dangling after the main-branch merge resolved its conflicts
on GitHub:

- floorplan-panel.tsx referenced a `theme` variable that no longer
  exists; the file already derives `isDark` from `getSceneTheme(state.
  sceneTheme).appearance === 'dark'` higher up. Use that.
- grid.tsx applied `EDITOR_LAYER` but only imports `GRID_LAYER` (the new
  dedicated grid layer). Use the imported one.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../editor/src/components/editor/floorplan-panel.tsx     | 4 ++--
 packages/editor/src/components/editor/grid.tsx           | 2 +-
 .../src/components/editor/wall-measurement-label.tsx     | 9 ++++++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index 220c0e8e5..18d4847fd 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -8976,8 +8976,8 @@ export function FloorplanPanel() {
 
               {draftWallMeasurement && (
                 <FloorplanDraftWallMeasurement
-                  labelBackground={theme === 'dark' ? '#0f172a' : '#ffffff'}
-                  labelText={theme === 'dark' ? '#e2e8f0' : '#171717'}
+                  labelBackground={isDark ? '#0f172a' : '#ffffff'}
+                  labelText={isDark ? '#e2e8f0' : '#171717'}
                   measurement={draftWallMeasurement}
                   measurementStroke={palette.measurementStroke}
                   sceneRotationDeg={floorplanSceneRotationDeg}
diff --git a/packages/editor/src/components/editor/grid.tsx b/packages/editor/src/components/editor/grid.tsx
index c2ae0e831..8ac51ec3a 100644
--- a/packages/editor/src/components/editor/grid.tsx
+++ b/packages/editor/src/components/editor/grid.tsx
@@ -161,7 +161,7 @@ export const Grid = ({
   return (
     <mesh
       geometry={geometry}
-      layers={EDITOR_LAYER}
+      layers={GRID_LAYER}
       material={material}
       ref={gridRef}
       rotation-x={-Math.PI / 2}
diff --git a/packages/editor/src/components/editor/wall-measurement-label.tsx b/packages/editor/src/components/editor/wall-measurement-label.tsx
index 71bc1284f..a0bf98cd3 100644
--- a/packages/editor/src/components/editor/wall-measurement-label.tsx
+++ b/packages/editor/src/components/editor/wall-measurement-label.tsx
@@ -32,6 +32,12 @@ const HEIGHT_TICK_HALF_LENGTH = 0.14
 const HEIGHT_GUIDE_OUTSIDE_OFFSET = 0.16
 
 const BAR_AXIS = new THREE.Vector3(0, 1, 0)
+// Shared unit cube — each MeasurementBar scales it to BAR_THICKNESS × length
+// × BAR_THICKNESS instead of constructing a fresh BoxGeometry every frame.
+// Per-frame `<boxGeometry args={[..., length, ...]}/>` triggers R3F to
+// rebuild the geometry whenever the wall moves, and the WebGPU backend
+// flags the in-flight buffer churn as "Vertex buffer slot N ... was not set".
+const SHARED_BAR_GEOMETRY = new THREE.BoxGeometry(1, 1, 1)
 
 type Vec3 = [number, number, number]
 
@@ -447,11 +453,12 @@ function MeasurementBar({ start, end, color }: { start: Vec3; end: Vec3; color:
 
   return (
     <mesh
+      geometry={SHARED_BAR_GEOMETRY}
       position={[segment.position.x, segment.position.y, segment.position.z]}
       quaternion={segment.quaternion}
       renderOrder={1000}
+      scale={[BAR_THICKNESS, segment.length, BAR_THICKNESS]}
     >
-      <boxGeometry args={[BAR_THICKNESS, segment.length, BAR_THICKNESS]} />
       <meshBasicMaterial
         color={color}
         depthTest={false}

From 8ec41a0f84ad8c4e3ddbe4935a286a01f4f33954 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Mon, 25 May 2026 15:42:55 +0530
Subject: [PATCH 22/48] editor: pin building bbox center to cursor during move
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The floating drag button anchors at the building's bbox center, but the
move tool was teleporting the building's origin to the cursor — so the
moment a drag started the building jumped by `bbox_center - origin`.

Capture the local-space offset from origin to bbox center at mount and
apply it on every grid move, grid click, and R/T rotation, so the bbox
center stays pinned to the cursor through the whole drag. Also seed the
cursor sphere at the bbox center instead of the origin.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../tools/building/move-building-tool.tsx     | 42 +++++++++++++++++--
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/components/tools/building/move-building-tool.tsx b/packages/editor/src/components/tools/building/move-building-tool.tsx
index 8925119b5..d8fb9c445 100644
--- a/packages/editor/src/components/tools/building/move-building-tool.tsx
+++ b/packages/editor/src/components/tools/building/move-building-tool.tsx
@@ -15,6 +15,8 @@ import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { CursorSphere } from '../shared/cursor-sphere'
 
+const Y_AXIS = new THREE.Vector3(0, 1, 0)
+
 export function MoveBuildingContent({ node }: { node: BuildingNode }) {
   const previousGridPosRef = useRef<[number, number] | null>(null)
 
@@ -28,9 +30,27 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) {
   const originalRotationRef = useRef<number>(node.rotation[1] ?? 0)
   const pendingRotationRef = useRef<number>(node.rotation[1] ?? 0)
 
+  // Local-space offset from the building's origin to its bbox center. The
+  // floating drag button anchors at the bbox center, so we pin that point to
+  // the cursor during the drag — otherwise the raw origin (often nowhere near
+  // the visual center) would snap to the cursor and the building would jump.
+  const centerOffsetLocalRef = useRef<THREE.Vector3>(new THREE.Vector3())
+
   const [cursorWorldPos, setCursorWorldPos] = useState<[number, number, number]>(() => {
     const obj = sceneRegistry.nodes.get(node.id)
     if (obj) {
+      const box = new THREE.Box3().setFromObject(obj)
+      if (!box.isEmpty()) {
+        const center = box.getCenter(new THREE.Vector3())
+        const originWorld = new THREE.Vector3()
+        obj.getWorldPosition(originWorld)
+        const originalRotation = node.rotation[1] ?? 0
+        centerOffsetLocalRef.current = center
+          .clone()
+          .sub(originWorld)
+          .applyAxisAngle(Y_AXIS, -originalRotation)
+        return [center.x, 0, center.z]
+      }
       const pos = new THREE.Vector3()
       obj.getWorldPosition(pos)
       return [pos.x, pos.y, pos.z]
@@ -45,6 +65,9 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) {
   useEffect(() => {
     const nodeId = nodeIdRef.current
     const originalPosition = originalPositionRef.current
+    const offsetWork = new THREE.Vector3()
+    const offsetAt = (rotationY: number) =>
+      offsetWork.copy(centerOffsetLocalRef.current).applyAxisAngle(Y_AXIS, rotationY)
 
     useScene.temporal.getState().pause()
 
@@ -66,7 +89,16 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) {
         pendingRotationRef.current += rotationDelta
 
         const mesh = sceneRegistry.nodes.get(nodeId)
-        if (mesh) mesh.rotation.y = pendingRotationRef.current
+        if (mesh) {
+          mesh.rotation.y = pendingRotationRef.current
+          // Keep the bbox center pinned to the cursor through rotation.
+          if (previousGridPosRef.current) {
+            const [gridX, gridZ] = previousGridPosRef.current
+            const off = offsetAt(pendingRotationRef.current)
+            mesh.position.x = gridX - off.x
+            mesh.position.z = gridZ - off.z
+          }
+        }
       }
     }
 
@@ -87,8 +119,9 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) {
       // Directly update the Three.js group — no store update during drag
       const mesh = sceneRegistry.nodes.get(nodeId)
       if (mesh) {
-        mesh.position.x = gridX
-        mesh.position.z = gridZ
+        const off = offsetAt(pendingRotationRef.current)
+        mesh.position.x = gridX - off.x
+        mesh.position.z = gridZ - off.z
       }
     }
 
@@ -98,9 +131,10 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) {
 
       wasCommitted = true
 
+      const off = offsetAt(pendingRotationRef.current)
       useScene.temporal.getState().resume()
       useScene.getState().updateNode(nodeId, {
-        position: [gridX, originalPosition[1], gridZ],
+        position: [gridX - off.x, originalPosition[1], gridZ - off.z],
         rotation: [0, pendingRotationRef.current, 0],
       })
       useScene.temporal.getState().pause()

From cc2be42d52d550ba7d995ce300771a07cab60608 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Mon, 25 May 2026 15:43:07 +0530
Subject: [PATCH 23/48] stair: 2D resize affordances + dispose curved/spiral
 geometry on swap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Floorplan view: emit `move-arrow` children alongside the existing chrome,
mirroring the in-world arrows on selected stairs:
  - straight: per-segment side (left/right width) and front (length)
  - curved & spiral: width, inner-radius, and two sweep-end arrows
Hidden during placement so they don't fight the cursor follow.

Stroke widths on curved/spiral chrome converted to screen pixels (paired
with `non-scaling-stroke`); the old world-metre values rendered as
sub-pixel at every zoom. First step line is now also emphasised on
curved stairs to match legacy chrome. Skip the straight-only
direction-arrow polyline for curved/spiral — the arc-aligned arrow above
already conveys "up" and `buildFloorplanStairArrow` produces a malformed
polyline once the chain is wrapped around an arc.

Renderer: extract `SpiralColumnMesh` and `SpiralStepSupportMesh` and add
the same prop-+-dispose pattern used by `CurvedStepMesh` /
guide/renderer.tsx. Without disposing the prior BufferGeometry on each
resize tick, WebGPU keeps a stale pipeline reference and flags
"Vertex buffer slot 0 ... was not set" mid-drag on Lambert.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/nodes/src/stair/definition.ts        |  25 ++
 .../nodes/src/stair/floorplan-affordances.ts  | 271 ++++++++++++++++++
 packages/nodes/src/stair/floorplan.ts         | 152 +++++++++-
 packages/nodes/src/stair/renderer.tsx         | 144 +++++++---
 4 files changed, 549 insertions(+), 43 deletions(-)
 create mode 100644 packages/nodes/src/stair/floorplan-affordances.ts

diff --git a/packages/nodes/src/stair/definition.ts b/packages/nodes/src/stair/definition.ts
index d9fcc38fd..c95b14804 100644
--- a/packages/nodes/src/stair/definition.ts
+++ b/packages/nodes/src/stair/definition.ts
@@ -1,4 +1,11 @@
 import { type NodeDefinition, StairNode as StairNodeSchema } from '@pascal-app/core'
+import {
+  curvedStairInnerRadiusAffordance,
+  curvedStairSweepAffordance,
+  curvedStairWidthAffordance,
+  segmentLengthAffordance,
+  segmentWidthAffordance,
+} from './floorplan-affordances'
 import { buildStairFloorplan } from './floorplan'
 import { stairFloorplanMoveTarget } from './floorplan-move'
 import { stairParametrics } from './parametrics'
@@ -47,6 +54,24 @@ export const stairDefinition: NodeDefinition<typeof StairNode> = {
   floorplan: buildStairFloorplan,
   floorplanMoveTarget: stairFloorplanMoveTarget,
 
+  // 2D drag affordances mirror the 3D in-world arrows on selected stairs:
+  //   - `segment-width` / `segment-length` drive per-segment side & length
+  //     arrows on straight stairs (sister to `StairSegmentSideArrow` /
+  //     `StairSegmentLengthArrow` in stair-segment-handles.tsx).
+  //   - `curved-width` / `curved-inner-radius` / `curved-sweep` drive the
+  //     parent-stair arrows for curved & spiral kinds (sister to
+  //     `CurvedStairWidthArrow` / `CurvedStairInnerRadiusArrow` /
+  //     `CurvedStairSweepArrow`).
+  // Height / rise arrows from the 3D set don't translate — no vertical axis
+  // in the plan view.
+  floorplanAffordances: {
+    'segment-width': segmentWidthAffordance,
+    'segment-length': segmentLengthAffordance,
+    'curved-width': curvedStairWidthAffordance,
+    'curved-inner-radius': curvedStairInnerRadiusAffordance,
+    'curved-sweep': curvedStairSweepAffordance,
+  },
+
   presentation: {
     label: 'Stair',
     description:
diff --git a/packages/nodes/src/stair/floorplan-affordances.ts b/packages/nodes/src/stair/floorplan-affordances.ts
new file mode 100644
index 000000000..ddeb559a6
--- /dev/null
+++ b/packages/nodes/src/stair/floorplan-affordances.ts
@@ -0,0 +1,271 @@
+import {
+  type AnyNodeId,
+  type FloorplanAffordance,
+  type FloorplanAffordanceSession,
+  type StairNode,
+  type StairSegmentNode,
+  useScene,
+} from '@pascal-app/core'
+
+// Minimums + max sweep mirror the 3D handles in
+// `packages/editor/src/components/editor/stair-segment-handles.tsx` so a 2D
+// drag can't push a stair past what the 3D drag would allow.
+const MIN_SEGMENT_WIDTH = 0.4
+const MIN_SEGMENT_LENGTH = 0.4
+const MIN_CURVED_WIDTH = 0.4
+const MIN_CURVED_INNER_RADIUS_SPIRAL = 0.05
+const MIN_CURVED_INNER_RADIUS_CURVED = 0.2
+const MIN_CURVED_SWEEP = Math.PI / 12
+const MAX_CURVED_SWEEP = Math.PI * 2 - 0.05
+
+type SegmentWidthPayload = {
+  segmentId: string
+  side: 'left' | 'right'
+  axisX: readonly [number, number]
+}
+
+type SegmentLengthPayload = {
+  segmentId: string
+  axisZ: readonly [number, number]
+}
+
+type CurvedSweepPayload = {
+  end: 'start' | 'end'
+}
+
+function noopSession(): FloorplanAffordanceSession {
+  return {
+    affectedIds: [],
+    apply() {},
+    canCommit() {
+      return false
+    },
+  }
+}
+
+/**
+ * Straight-stair segment side arrow → segment `width`. Sister to the 3D
+ * `StairSegmentSideArrow` width drag (~line 235 of stair-segment-handles.tsx).
+ * Width grows symmetrically around the segment centerline — the chain
+ * rebuilds from the segment's `width` field, no opposite-edge anchor write
+ * required. `axisX` is the segment-local +X axis in plan coords, captured
+ * at emit-time so the projection stays valid through the drag.
+ */
+export const segmentWidthAffordance: FloorplanAffordance<StairNode> = {
+  start({ payload, nodes, initialPlanPoint }) {
+    const { segmentId, side, axisX } = payload as SegmentWidthPayload
+    const segmentNodeId = segmentId as AnyNodeId
+    const segment = nodes[segmentNodeId] as StairSegmentNode | undefined
+    if (!segment || segment.type !== 'stair-segment') return noopSession()
+
+    const initialWidth = segment.width
+    const sign = side === 'right' ? 1 : -1
+    const ax = axisX[0]
+    const ay = axisX[1]
+    const initialProj = initialPlanPoint[0] * ax + initialPlanPoint[1] * ay
+    let lastWidth = initialWidth
+
+    return {
+      affectedIds: [segmentNodeId],
+      apply({ planPoint }) {
+        const currentProj = planPoint[0] * ax + planPoint[1] * ay
+        const delta = sign * (currentProj - initialProj)
+        const newWidth = Math.max(MIN_SEGMENT_WIDTH, initialWidth + delta)
+        lastWidth = newWidth
+        useScene.getState().updateNode(segmentNodeId, { width: newWidth })
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene.getState().updateNode(segmentNodeId, { width: lastWidth })
+      },
+    }
+  },
+}
+
+/**
+ * Straight-stair segment length arrow → segment `length`. Sister to the 3D
+ * `StairSegmentLengthArrow` drag. The chain anchors each segment's back
+ * face, so length simply extends/contracts the front. `axisZ` is the
+ * segment-local +Z (run) direction in plan coords.
+ */
+export const segmentLengthAffordance: FloorplanAffordance<StairNode> = {
+  start({ payload, nodes, initialPlanPoint }) {
+    const { segmentId, axisZ } = payload as SegmentLengthPayload
+    const segmentNodeId = segmentId as AnyNodeId
+    const segment = nodes[segmentNodeId] as StairSegmentNode | undefined
+    if (!segment || segment.type !== 'stair-segment') return noopSession()
+
+    const initialLength = segment.length
+    const az = axisZ[0]
+    const ay = axisZ[1]
+    const initialProj = initialPlanPoint[0] * az + initialPlanPoint[1] * ay
+    let lastLength = initialLength
+
+    return {
+      affectedIds: [segmentNodeId],
+      apply({ planPoint }) {
+        const currentProj = planPoint[0] * az + planPoint[1] * ay
+        const delta = currentProj - initialProj
+        const newLength = Math.max(MIN_SEGMENT_LENGTH, initialLength + delta)
+        lastLength = newLength
+        useScene.getState().updateNode(segmentNodeId, { length: newLength })
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene.getState().updateNode(segmentNodeId, { length: lastLength })
+      },
+    }
+  },
+}
+
+/**
+ * Curved / spiral width arrow → stair `width`. Drag radially outward grows
+ * the body, anchored at the inner radius (matches the 3D
+ * `CurvedStairWidthArrow`). The sweep bisector matches the existing
+ * floor-plan emitter (`sectorStartAngle = -rotation - sweep/2`, bisector
+ * = -rotation).
+ */
+export const curvedStairWidthAffordance: FloorplanAffordance<StairNode> = {
+  start({ node, initialPlanPoint }) {
+    const stairId = node.id as AnyNodeId
+    const initialWidth = Math.max(node.width ?? 1, MIN_CURVED_WIDTH)
+    const midAngle = -node.rotation
+    const cx = node.position[0]
+    const cz = node.position[2]
+    const radialX = Math.cos(midAngle)
+    const radialZ = Math.sin(midAngle)
+    const initialRadial =
+      (initialPlanPoint[0] - cx) * radialX + (initialPlanPoint[1] - cz) * radialZ
+    let lastWidth = initialWidth
+
+    return {
+      affectedIds: [stairId],
+      apply({ planPoint }) {
+        const currentRadial = (planPoint[0] - cx) * radialX + (planPoint[1] - cz) * radialZ
+        const newWidth = Math.max(
+          MIN_CURVED_WIDTH,
+          initialWidth + (currentRadial - initialRadial),
+        )
+        lastWidth = newWidth
+        useScene.getState().updateNode(stairId, { width: newWidth })
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene.getState().updateNode(stairId, { width: lastWidth })
+      },
+    }
+  },
+}
+
+/**
+ * Curved / spiral inner-radius arrow → stair `innerRadius` + `width`. Keeps
+ * the outer edge pinned (width absorbs the radial delta) so dragging only
+ * shifts the inner rim, matching the 3D `CurvedStairInnerRadiusArrow`.
+ */
+export const curvedStairInnerRadiusAffordance: FloorplanAffordance<StairNode> = {
+  start({ node, initialPlanPoint }) {
+    const stairId = node.id as AnyNodeId
+    const isSpiral = node.stairType === 'spiral'
+    const minInnerRadius = isSpiral ? MIN_CURVED_INNER_RADIUS_SPIRAL : MIN_CURVED_INNER_RADIUS_CURVED
+    const initialInnerRadius = Math.max(minInnerRadius, node.innerRadius ?? 0.9)
+    const initialWidth = Math.max(node.width ?? 1, MIN_CURVED_WIDTH)
+    const initialOuterRadius = initialInnerRadius + initialWidth
+    const maxInnerRadius = initialOuterRadius - MIN_CURVED_WIDTH
+
+    const midAngle = -node.rotation
+    const cx = node.position[0]
+    const cz = node.position[2]
+    const radialX = Math.cos(midAngle)
+    const radialZ = Math.sin(midAngle)
+    const initialRadial =
+      (initialPlanPoint[0] - cx) * radialX + (initialPlanPoint[1] - cz) * radialZ
+    let lastInner = initialInnerRadius
+    let lastWidth = initialWidth
+
+    return {
+      affectedIds: [stairId],
+      apply({ planPoint }) {
+        const currentRadial = (planPoint[0] - cx) * radialX + (planPoint[1] - cz) * radialZ
+        const innerDelta = currentRadial - initialRadial
+        const newInner = Math.min(
+          maxInnerRadius,
+          Math.max(minInnerRadius, initialInnerRadius + innerDelta),
+        )
+        const newWidth = initialOuterRadius - newInner
+        lastInner = newInner
+        lastWidth = newWidth
+        useScene.getState().updateNode(stairId, { innerRadius: newInner, width: newWidth })
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene.getState().updateNode(stairId, { innerRadius: lastInner, width: lastWidth })
+      },
+    }
+  },
+}
+
+/**
+ * Curved / spiral sweep arrows → stair `sweepAngle` + `rotation`. Anchors
+ * the opposite edge world-fixed by nudging `rotation` by half the applied
+ * sweep delta — mirror of the 3D `CurvedStairSweepArrow`. Sign math derives
+ * from the floorplan convention `sectorStartAngle = -rotation - sweep/2`:
+ *
+ *   END handle  (sweep += Δ, fix start): ΔR = -Δ/2
+ *   START handle (sweep -= Δ, fix end):  ΔR = +Δ/2
+ */
+export const curvedStairSweepAffordance: FloorplanAffordance<StairNode> = {
+  start({ node, payload, initialPlanPoint }) {
+    const { end } = payload as CurvedSweepPayload
+    const stairId = node.id as AnyNodeId
+    const initialSweep =
+      node.sweepAngle ?? (node.stairType === 'spiral' ? Math.PI * 2 : Math.PI / 2)
+    const sweepSign = Math.sign(initialSweep) || 1
+    const initialRotation = node.rotation
+    const cx = node.position[0]
+    const cz = node.position[2]
+    const initialAngle = Math.atan2(initialPlanPoint[1] - cz, initialPlanPoint[0] - cx)
+    let lastSweep = initialSweep
+    let lastRotation = initialRotation
+
+    return {
+      affectedIds: [stairId],
+      apply({ planPoint }) {
+        const currentAngle = Math.atan2(planPoint[1] - cz, planPoint[0] - cx)
+        let delta = currentAngle - initialAngle
+        // Wrap to [-π, π] so a drag crossing ±π doesn't flip sign mid-gesture.
+        while (delta > Math.PI) delta -= 2 * Math.PI
+        while (delta < -Math.PI) delta += 2 * Math.PI
+
+        const sweepDelta = end === 'end' ? delta : -delta
+        const targetSweep = initialSweep + sweepDelta
+        const clampedAbs = Math.min(
+          MAX_CURVED_SWEEP,
+          Math.max(MIN_CURVED_SWEEP, Math.abs(targetSweep)),
+        )
+        const newSweep = sweepSign * clampedAbs
+        const appliedDelta = newSweep - initialSweep
+        const rotationShift = end === 'end' ? -appliedDelta / 2 : appliedDelta / 2
+        const newRotation = initialRotation + rotationShift
+        lastSweep = newSweep
+        lastRotation = newRotation
+        useScene.getState().updateNode(stairId, { sweepAngle: newSweep, rotation: newRotation })
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene
+          .getState()
+          .updateNode(stairId, { sweepAngle: lastSweep, rotation: lastRotation })
+      },
+    }
+  },
+}
diff --git a/packages/nodes/src/stair/floorplan.ts b/packages/nodes/src/stair/floorplan.ts
index 60b800a40..a407e0a6c 100644
--- a/packages/nodes/src/stair/floorplan.ts
+++ b/packages/nodes/src/stair/floorplan.ts
@@ -107,6 +107,62 @@ export function buildStairFloorplan(
           opacity: showSelectedChrome ? 0.88 : 0.6,
         })
       }
+
+      // Per-segment side + length resize arrows. Mirror of the 3D
+      // `StairSegmentSideArrow` / `StairSegmentLengthArrow` handles
+      // (~lines 235 / 375 of stair-segment-handles.tsx).
+      // Skip when the stair is being placed — placement-mode arrows would
+      // compete with the cursor follow.
+      if (isSelected && !view?.moving) {
+        const poly = segmentEntry.polygon
+        // Polygon corners (from `getFloorplanStairSegmentPolygon`):
+        //   0 back-left   1 back-right
+        //   3 front-left  2 front-right
+        const c0 = poly[0]
+        const c1 = poly[1]
+        const c2 = poly[2]
+        const c3 = poly[3]
+        if (c0 && c1 && c2 && c3) {
+          const width = segmentEntry.segment.width || 1
+          const length = segmentEntry.segment.length || 1
+          // Segment-local +X (width axis) and +Z (run axis) in plan coords,
+          // captured here so the affordance handler can project pointer
+          // deltas without re-walking the stair chain.
+          const axisX: readonly [number, number] = [
+            (c1.x - c0.x) / width,
+            (c1.y - c0.y) / width,
+          ]
+          const axisZ: readonly [number, number] = [
+            (c3.x - c0.x) / length,
+            (c3.y - c0.y) / length,
+          ]
+          const rightMid: [number, number] = [(c1.x + c2.x) / 2, (c1.y + c2.y) / 2]
+          const leftMid: [number, number] = [(c0.x + c3.x) / 2, (c0.y + c3.y) / 2]
+          const frontMid: [number, number] = [(c2.x + c3.x) / 2, (c2.y + c3.y) / 2]
+          const segmentId = segmentEntry.segment.id
+          children.push({
+            kind: 'move-arrow',
+            point: rightMid,
+            angle: Math.atan2(axisX[1], axisX[0]),
+            affordance: 'segment-width',
+            payload: { segmentId, side: 'right', axisX },
+          })
+          children.push({
+            kind: 'move-arrow',
+            point: leftMid,
+            angle: Math.atan2(-axisX[1], -axisX[0]),
+            affordance: 'segment-width',
+            payload: { segmentId, side: 'left', axisX },
+          })
+          children.push({
+            kind: 'move-arrow',
+            point: frontMid,
+            angle: Math.atan2(axisZ[1], axisZ[0]),
+            affordance: 'segment-length',
+            payload: { segmentId, axisZ },
+          })
+        }
+      }
     }
   } else {
     // Curved / spiral — full arc-band chrome. Mirrors the legacy
@@ -125,6 +181,13 @@ export function buildStairFloorplan(
     const outerRadius = innerRadius + stair.width
     const centerlineRadius = innerRadius + stair.width / 2
 
+    // Stroke widths are screen pixels (paired with `vectorEffect:
+    // 'non-scaling-stroke'` below). World-metre values like 0.02 would
+    // render as sub-pixel — invisible at every zoom. Matches the legacy
+    // `<FloorplanStairLayer>` curved/spiral branches.
+    const outerArcWidth = showSelectedChrome ? 2 : 1.4
+    const innerArcWidth = showSelectedChrome ? 1.7 : 1.2
+
     // 1. Annular sector — the filled shaft footprint.
     children.push({
       kind: 'path',
@@ -147,7 +210,7 @@ export function buildStairFloorplan(
       d: buildSvgArcPath(stairCenter, outerRadius, sectorStartAngle, visualSectorEndAngle),
       fill: 'none',
       stroke: stairStroke,
-      strokeWidth: showSelectedChrome ? 0.026 : 0.022,
+      strokeWidth: outerArcWidth,
       vectorEffect: 'non-scaling-stroke',
     })
     children.push({
@@ -155,7 +218,7 @@ export function buildStairFloorplan(
       d: buildSvgArcPath(stairCenter, innerRadius, sectorStartAngle, visualSectorEndAngle),
       fill: 'none',
       stroke: stairStroke,
-      strokeWidth: showSelectedChrome ? 0.022 : 0.018,
+      strokeWidth: innerArcWidth,
       vectorEffect: 'non-scaling-stroke',
     })
 
@@ -171,14 +234,29 @@ export function buildStairFloorplan(
       const inner = getArcPlanPoint(stairCenter, innerRadius, angle)
       const outer = getArcPlanPoint(stairCenter, outerRadius, angle)
       const isLast = index === stepCount
+      const isFirst = index === 0
+      // Curved: regular stroke everywhere, but both the starting and the
+      // ending step lines are bolded (matches the legacy
+      // `<FloorplanStairLayer>` curved branch).
+      // Spiral: only the last step is accented + bolded; intermediate
+      // steps past `dashedFromIndex` are dashed.
+      const isEmphasised = stairType === 'spiral' ? isLast : isFirst || isLast
+      const stepWidth =
+        stairType === 'spiral'
+          ? isEmphasised
+            ? 1.8
+            : 1.15
+          : isEmphasised
+            ? 1.5
+            : 1.1
       children.push({
         kind: 'line',
         x1: inner.x,
         y1: inner.y,
         x2: outer.x,
         y2: outer.y,
-        stroke: isLast ? stairAccent : stairStroke,
-        strokeWidth: isLast ? 0.026 : 0.018,
+        stroke: stairType === 'spiral' && isLast ? stairAccent : stairStroke,
+        strokeWidth: stepWidth,
         strokeDasharray: index >= dashedFromIndex && !isLast ? '0.1 0.08' : undefined,
         vectorEffect: 'non-scaling-stroke',
       })
@@ -199,7 +277,7 @@ export function buildStairFloorplan(
         fill: 'none',
         stroke: stairAccent,
         strokeDasharray: '0.08 0.11',
-        strokeWidth: 0.018,
+        strokeWidth: 1.1,
         vectorEffect: 'non-scaling-stroke',
       })
     }
@@ -214,7 +292,7 @@ export function buildStairFloorplan(
         r: Math.max(innerRadius * 0.18, 0.06),
         fill,
         stroke: stairAccent,
-        strokeWidth: 0.018,
+        strokeWidth: 1.2,
         vectorEffect: 'non-scaling-stroke',
       })
     }
@@ -231,12 +309,70 @@ export function buildStairFloorplan(
       fill: stairAccent,
       stroke: 'none',
     })
+
+    // 7. Resize arrows — mirror of the 3D `CurvedStairWidthArrow`,
+    //    `CurvedStairInnerRadiusArrow`, and two `CurvedStairSweepArrow`s.
+    //    Hidden during placement (`view?.moving`) so they don't fight the
+    //    cursor follow.
+    if (isSelected && !view?.moving) {
+      const midAngle = (sectorStartAngle + sectorEndAngle) / 2
+      const sweepSign = Math.sign(normalizedSweepAngle) || 1
+      // Width arrow — radially outward at the sweep bisector, on the outer rim.
+      const widthAnchor = getArcPlanPoint(stairCenter, outerRadius, midAngle)
+      children.push({
+        kind: 'move-arrow',
+        point: [widthAnchor.x, widthAnchor.y],
+        angle: midAngle,
+        affordance: 'curved-width',
+        payload: { kind: 'width' },
+      })
+
+      // Inner-radius arrow — just inside the inner edge, chevron pointing
+      // toward the centre. Skip for very tight spirals where there's no
+      // room (chevron would tunnel through the central column).
+      if (innerRadius > 0.18) {
+        const innerArrowRadius = Math.max(innerRadius - 0.04, innerRadius * 0.45)
+        const innerAnchor = getArcPlanPoint(stairCenter, innerArrowRadius, midAngle)
+        children.push({
+          kind: 'move-arrow',
+          point: [innerAnchor.x, innerAnchor.y],
+          angle: midAngle + Math.PI,
+          affordance: 'curved-inner-radius',
+          payload: { kind: 'inner-radius' },
+        })
+      }
+
+      // Sweep arrows — anchored at the actual sweep ends on the outer rim,
+      // chevrons pointing tangentially in the grow direction. (3D clusters
+      // them next to the width arrow because the camera-facing rim is
+      // easier to grab; in plan we have the whole arc visible, so the
+      // ends are the natural placement.)
+      const sweepEndAnchor = getArcPlanPoint(stairCenter, outerRadius, sectorEndAngle)
+      children.push({
+        kind: 'move-arrow',
+        point: [sweepEndAnchor.x, sweepEndAnchor.y],
+        angle: sectorEndAngle + sweepSign * (Math.PI / 2),
+        affordance: 'curved-sweep',
+        payload: { end: 'end' },
+      })
+      const sweepStartAnchor = getArcPlanPoint(stairCenter, outerRadius, sectorStartAngle)
+      children.push({
+        kind: 'move-arrow',
+        point: [sweepStartAnchor.x, sweepStartAnchor.y],
+        angle: sectorStartAngle - sweepSign * (Math.PI / 2),
+        affordance: 'curved-sweep',
+        payload: { end: 'start' },
+      })
+    }
   }
 
   // Direction arrow — emitted by `buildFloorplanStairEntry` as a polyline
   // (the spine) plus a polygon (the head). Tells the user which way
-  // "up" is at a glance.
-  if (entry.arrow) {
+  // "up" is at a glance. Skip for curved / spiral: those already draw
+  // their own arc-aligned arrow above; `buildFloorplanStairArrow` traces
+  // the stair-segment chain in straight space and produces a malformed
+  // polyline once the chain is laid around an arc.
+  if (stairType === 'straight' && entry.arrow) {
     if (entry.arrow.polyline.length >= 2) {
       children.push({
         kind: 'polyline',
diff --git a/packages/nodes/src/stair/renderer.tsx b/packages/nodes/src/stair/renderer.tsx
index d5ff13a0c..904be2bb3 100644
--- a/packages/nodes/src/stair/renderer.tsx
+++ b/packages/nodes/src/stair/renderer.tsx
@@ -464,17 +464,11 @@ function CurvedStairBody({
   return (
     <group name={isSpiral ? 'spiral-stair' : 'curved-stair'}>
       {isSpiral && (stair.showCenterColumn ?? true) ? (
-        <mesh
-          castShadow
+        <SpiralColumnMesh
+          height={spiralColumnHeight}
           material={sideMaterial}
-          name="stair-side"
-          position={[0, spiralColumnHeight / 2, 0]}
-          receiveShadow
-        >
-          <cylinderGeometry
-            args={[spiralColumnRadius, spiralColumnRadius, spiralColumnHeight, 10]}
-          />
-        </mesh>
+          radius={spiralColumnRadius}
+        />
       ) : null}
       {Array.from({ length: stepCount }).map((_, index) => {
         const currentHeight = stepHeight * (index + 1)
@@ -498,32 +492,13 @@ function CurvedStairBody({
             position-y={stepY}
           >
             {isSpiral && (stair.showStepSupports ?? true) ? (
-              <mesh
-                castShadow
+              <SpiralStepSupportMesh
+                innerRadius={innerRadius}
                 material={sideMaterial}
-                name="stair-side"
-                position={[
-                  Math.cos(midAngle) *
-                    (spiralColumnRadius +
-                      Math.max(0.04, innerRadius - spiralColumnRadius + 0.04) / 2 -
-                      0.02),
-                  Math.max(thickness * 0.55, 0.025) / 2,
-                  Math.sin(midAngle) *
-                    (spiralColumnRadius +
-                      Math.max(0.04, innerRadius - spiralColumnRadius + 0.04) / 2 -
-                      0.02),
-                ]}
-                receiveShadow
-                rotation-y={-midAngle}
-              >
-                <boxGeometry
-                  args={[
-                    Math.max(0.04, innerRadius - spiralColumnRadius + 0.04),
-                    Math.max(thickness * 0.55, 0.025),
-                    Math.max(0.04, Math.min(0.12, Math.max(thickness * 0.55, 0.025) * 1.5)),
-                  ]}
-                />
-              </mesh>
+                midAngle={midAngle}
+                spiralColumnRadius={spiralColumnRadius}
+                thickness={thickness}
+              />
             ) : null}
             <CurvedStepMesh
               endAngle={endAngle}
@@ -585,11 +560,110 @@ function CurvedStepMesh({
     [endAngle, innerRadius, outerRadius, startAngle, stepHeight, thickness],
   )
 
+  // Dispose the prior BufferGeometry as soon as a new one supersedes it.
+  // Resize drags (in 2D or 3D) rebuild this geometry every pointer move;
+  // without explicit disposal, WebGPU keeps a stale pipeline reference to
+  // the old vertex buffer and flags "Vertex buffer slot 0 required by
+  // [RenderPipeline ...MeshLambertNodeMaterial...] was not set" on the
+  // submit after the swap. Same mitigation as guide/renderer.tsx.
+  useEffect(
+    () => () => {
+      geometry.dispose()
+    },
+    [geometry],
+  )
+
   return (
     <mesh castShadow geometry={geometry} material={material} position-y={positionY} receiveShadow />
   )
 }
 
+/**
+ * Spiral center column. The cylinder is rebuilt whenever
+ * `spiralColumnRadius` changes — i.e. on every tick of an inner-radius
+ * drag. We pass the geometry as a prop (avoiding R3F's empty-placeholder
+ * frame from inline JSX) and dispose the prior one on swap, matching the
+ * pattern in guide/renderer.tsx. Without this WebGPU flags
+ * "Vertex buffer slot 0 ... was not set" on Lambert mid-resize.
+ */
+function SpiralColumnMesh({
+  radius,
+  height,
+  material,
+}: {
+  radius: number
+  height: number
+  material: THREE.Material | THREE.Material[]
+}) {
+  const geometry = useMemo(
+    () => new THREE.CylinderGeometry(radius, radius, height, 10),
+    [radius, height],
+  )
+  useEffect(
+    () => () => {
+      geometry.dispose()
+    },
+    [geometry],
+  )
+  return (
+    <mesh
+      castShadow
+      geometry={geometry}
+      material={material}
+      name="stair-side"
+      position={[0, height / 2, 0]}
+      receiveShadow
+    />
+  )
+}
+
+/**
+ * Spiral step support — the small box wedged between the column and the
+ * inner rim of each step. Same prop-+-dispose pattern as
+ * `SpiralColumnMesh`: the box dimensions change every inner-radius tick
+ * (`innerRadius - spiralColumnRadius`), so inline-JSX geometry would
+ * trigger the Lambert vertex-buffer error.
+ */
+function SpiralStepSupportMesh({
+  innerRadius,
+  spiralColumnRadius,
+  midAngle,
+  thickness,
+  material,
+}: {
+  innerRadius: number
+  spiralColumnRadius: number
+  midAngle: number
+  thickness: number
+  material: THREE.Material | THREE.Material[]
+}) {
+  const sizeX = Math.max(0.04, innerRadius - spiralColumnRadius + 0.04)
+  const sizeY = Math.max(thickness * 0.55, 0.025)
+  const sizeZ = Math.max(0.04, Math.min(0.12, sizeY * 1.5))
+  const geometry = useMemo(
+    () => new THREE.BoxGeometry(sizeX, sizeY, sizeZ),
+    [sizeX, sizeY, sizeZ],
+  )
+  useEffect(
+    () => () => {
+      geometry.dispose()
+    },
+    [geometry],
+  )
+  const radial = spiralColumnRadius + sizeX / 2 - 0.02
+  return (
+    <mesh
+      castShadow
+      geometry={geometry}
+      material={material}
+      name="stair-side"
+      position={[Math.cos(midAngle) * radial, sizeY / 2, Math.sin(midAngle) * radial]}
+      receiveShadow
+      rotation-y={-midAngle}
+    />
+  )
+}
+
 function buildCurvedStepGeometry(
   innerRadius: number,
   outerRadius: number,

From cbb997093e66dfa86c8aa3f53ad900784ca125ad Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Mon, 25 May 2026 23:37:33 +0530
Subject: [PATCH 24/48] editor: revert in-world ground menus to HTML floating;
 align grid to building
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wall/door/window/stair/stair-segment selection menus return to the
  shared HTML floating menu; remove the in-world ground icons, SVG
  textures, hysteresis/lerp constants, and unused imports across
  wall/door/window/stair-segment handle files.
- Drop Move from the floating menu (the in-world side arrows cover it);
  delete the now-unused handleMove.
- Floating menu scales with camera zoom (ortho.zoom or 1/distance),
  clamped at MIN 0.5 / MAX 1 so zoom-in keeps the default pixel size
  and zoom-out shrinks to a readable floor.
- Per-type y-offsets tuned: wall 0.5, opening 0.6, landing 0.5,
  flight 0.75, parent stair 0.2, structural 0.4, default 0.05.
- Align wall/fence arrow materials with the door/window pattern
  (depthTest/depthWrite false, transparent: true) so they render on
  top of geometry consistently.
- Grid cellSize now follows `gridSnapStep` via a small `SnapAwareGrid`
  wrapper, and the grid mesh anchors its world XZ to the active
  building's mesh — snapped wall endpoints (in building-local coords)
  now fall on visible grid lines instead of mid-cell.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/editor/door-side-handles.tsx   | 260 +--------
 .../editor/floating-action-menu.tsx           | 133 ++---
 .../editor/src/components/editor/grid.tsx     |  30 +-
 .../editor/src/components/editor/index.tsx    |  14 +-
 .../editor/stair-segment-handles.tsx          | 494 ------------------
 .../editor/wall-move-side-handles.tsx         | 322 +-----------
 .../components/editor/window-side-handles.tsx | 249 +--------
 7 files changed, 114 insertions(+), 1388 deletions(-)

diff --git a/packages/editor/src/components/editor/door-side-handles.tsx b/packages/editor/src/components/editor/door-side-handles.tsx
index ab57ca722..e0c3c83d0 100644
--- a/packages/editor/src/components/editor/door-side-handles.tsx
+++ b/packages/editor/src/components/editor/door-side-handles.tsx
@@ -2,7 +2,7 @@
 
 import {
   type AnyNodeId,
-  DoorNode,
+  type DoorNode,
   sceneRegistry,
   useScene,
   type WallNode,
@@ -11,7 +11,6 @@ import { useViewer } from '@pascal-app/viewer'
 import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
-  CanvasTexture,
   Color,
   DoubleSide,
   ExtrudeGeometry,
@@ -20,7 +19,6 @@ import {
   OrthographicCamera,
   Plane,
   Shape,
-  SRGBColorSpace,
   Vector2,
   Vector3,
 } from 'three'
@@ -37,14 +35,6 @@ const MIN_DOOR_HEIGHT = 0.5
 const MIN_DOOR_WIDTH = 0.3
 const ARROW_COLOR = '#8381ed'
 const ARROW_HOVER_COLOR = '#a5b4fc'
-const GROUND_MENU_FACE_CLEARANCE = 0.5
-const GROUND_MENU_SPACING = 0.32
-const GROUND_ICON_SIZE = 0.22
-const GROUND_ICON_LIFT = 0.1
-// Same hysteresis + lerp values as the wall ground menu so the door menu
-// reads as part of the same UI family when both are on screen.
-const GROUND_MENU_SIDE_HYSTERESIS = 0.1
-const GROUND_MENU_LERP_RATE = 14
 
 // Pre-empt the synthetic `click` the browser fires immediately after a
 // drag's pointerup. Registered at window-level capture so it runs before
@@ -175,7 +165,6 @@ function DoorSideHandlesForDoor({ door }: { door: DoorNode }) {
         <DoorSideArrow door={door} side="right" wallObject={wallObject} />
         <DoorHeightArrowHandle door={door} wallObject={wallObject} />
       </group>
-      <DoorGroundActionMenu door={door} wallObject={wallObject} />
     </group>,
     levelObject,
   )
@@ -551,250 +540,3 @@ function DoorHeightArrowHandle({
   )
 }
 
-function DoorGroundActionMenu({ door, wallObject }: { door: DoorNode; wallObject: Object3D }) {
-  const menuGroupRef = useRef<Group>(null)
-  const sideRef = useRef<number>(1)
-  const initializedForDoorIdRef = useRef<string | null>(null)
-  const cameraLocalScratch = useMemo(() => new Vector3(), [])
-
-  const rotationY =
-    typeof door.rotation === 'number'
-      ? door.rotation
-      : (door.rotation?.[1] ?? 0)
-
-  // Per-frame transform so the menu tracks live overrides written by drag
-  // tools (height resize, side-arrow move) without going through React.
-  useFrame((state, dt) => {
-    const menu = menuGroupRef.current
-    if (!menu) return
-
-    // Door's outward-face normal in wall-local space. The door geometry's
-    // +Z axis is its "front"; rotating it by `rotation.y` around Y maps
-    // door-local +Z to (sin(rotY), 0, cos(rotY)) in wall-local space.
-    const normalX = Math.sin(rotationY)
-    const normalZ = Math.cos(rotationY)
-    const doorX = door.position[0]
-    const doorZ = door.position[2]
-
-    // Camera in wall-local coords so the projection math stays consistent
-    // even when the wall is rotated arbitrarily relative to world axes.
-    wallObject.updateMatrixWorld()
-    cameraLocalScratch.copy(state.camera.position)
-    wallObject.worldToLocal(cameraLocalScratch)
-
-    const projection =
-      (cameraLocalScratch.x - doorX) * normalX +
-      (cameraLocalScratch.z - doorZ) * normalZ
-
-    const isFreshDoor = initializedForDoorIdRef.current !== door.id
-    const currentSide = sideRef.current
-    let nextSide: number
-    if (isFreshDoor) {
-      nextSide = projection >= 0 ? 1 : -1
-    } else if (currentSide >= 0 && projection < -GROUND_MENU_SIDE_HYSTERESIS) {
-      nextSide = -1
-    } else if (currentSide < 0 && projection > GROUND_MENU_SIDE_HYSTERESIS) {
-      nextSide = 1
-    } else {
-      nextSide = currentSide
-    }
-    sideRef.current = nextSide
-
-    const offset = door.frameDepth / 2 + GROUND_MENU_FACE_CLEARANCE
-    const targetX = doorX + normalX * offset * nextSide
-    const targetZ = doorZ + normalZ * offset * nextSide
-    // Floor in wall-local Y. For floor-resting doors `position[1] - height/2`
-    // equals 0; lifted openings keep their bottom for free.
-    const floorY = door.position[1] - door.height / 2 + GROUND_ICON_LIFT
-
-    // Tangent along the door (perpendicular to its normal). Same
-    // `atan2(-side*dirZ, side*dirX)` shape the wall menu uses so the icon
-    // plates lie flat in a row on whichever side of the wall the camera is on.
-    // +π so the icon row's "up" matches the camera-facing convention used
-    // for door menus (flipped relative to the wall pattern).
-    const dirX = -normalZ
-    const dirZ = normalX
-    const targetRot = Math.atan2(-nextSide * dirZ, nextSide * dirX) + Math.PI
-
-    if (isFreshDoor) {
-      menu.position.set(targetX, floorY, targetZ)
-      menu.rotation.y = targetRot
-      initializedForDoorIdRef.current = door.id
-      return
-    }
-
-    const t = 1 - Math.exp(-dt * GROUND_MENU_LERP_RATE)
-    menu.position.x += (targetX - menu.position.x) * t
-    menu.position.z += (targetZ - menu.position.z) * t
-    menu.position.y = floorY
-
-    let rotDelta = targetRot - menu.rotation.y
-    while (rotDelta > Math.PI) rotDelta -= 2 * Math.PI
-    while (rotDelta < -Math.PI) rotDelta += 2 * Math.PI
-    menu.rotation.y += rotDelta * t
-  })
-
-  const items: Array<'move' | 'duplicate' | 'delete'> = ['move', 'duplicate', 'delete']
-  const centerIndex = (items.length - 1) / 2
-
-  return (
-    <group ref={menuGroupRef}>
-      {items.map((kind, index) => (
-        <DoorGroundActionIcon
-          door={door}
-          key={kind}
-          kind={kind}
-          offsetIndex={index - centerIndex}
-        />
-      ))}
-    </group>
-  )
-}
-
-function DoorGroundActionIcon({
-  door,
-  kind,
-  offsetIndex,
-}: {
-  door: DoorNode
-  kind: 'move' | 'duplicate' | 'delete'
-  offsetIndex: number
-}) {
-  const [isHovered, setIsHovered] = useState(false)
-  const { camera } = useThree()
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.2 : 1) * zoom
-
-  const texture = useMemo(() => getIconTexture(kind), [kind])
-  const material = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        map: texture,
-        side: DoubleSide,
-        // alphaTest discards the SVG's transparent background so the icon
-        // doesn't ghost behind the door when depthTest is off.
-        alphaTest: 0.4,
-        transparent: true,
-        opacity: 1,
-        depthTest: false,
-        depthWrite: false,
-      }),
-    [texture],
-  )
-
-  useEffect(() => {
-    material.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [material, isHovered])
-  useEffect(() => () => material.dispose(), [material])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'pointer') {
-        document.body.style.cursor = ''
-      }
-    }
-  }, [])
-
-  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-    sfxEmitter.emit('sfx:item-pick')
-    document.body.style.cursor = ''
-    setIsHovered(false)
-
-    if (kind === 'move') {
-      // Keep the door selected so it stays the active item when the move
-      // commits; the `!movingNode` guard on the handles hides them during
-      // the drag itself.
-      useEditor.getState().setMovingNode(door)
-      return
-    }
-
-    if (kind === 'delete') {
-      sfxEmitter.emit('sfx:structure-delete')
-      useViewer.getState().setSelection({ selectedIds: [] })
-      useScene.getState().deleteNode(door.id as AnyNodeId)
-      return
-    }
-
-    // duplicate — clone the door, tag as new, parent under the same wall,
-    // hand it to the move tool, and re-point selection at the duplicate so
-    // it becomes the active item once placed.
-    useScene.temporal.getState().pause()
-    const input = structuredClone(door) as Record<string, unknown>
-    delete input.id
-    const existingMetadata =
-      input.metadata && typeof input.metadata === 'object' && !Array.isArray(input.metadata)
-        ? (input.metadata as Record<string, unknown>)
-        : {}
-    input.metadata = { ...existingMetadata, isNew: true }
-    try {
-      const dup = DoorNode.parse(input)
-      useScene.getState().createNode(dup, dup.parentId as AnyNodeId)
-      useEditor.getState().setMovingNode(dup)
-      useViewer.getState().setSelection({ selectedIds: [dup.id] })
-    } catch (err) {
-      console.error('Failed to duplicate door', err)
-      useScene.temporal.getState().resume()
-    }
-  }
-
-  return (
-    <group
-      onPointerDown={onPointerDown}
-      onPointerEnter={(event) => {
-        event.stopPropagation()
-        setIsHovered(true)
-        document.body.style.cursor = 'pointer'
-      }}
-      onPointerLeave={(event) => {
-        event.stopPropagation()
-        setIsHovered(false)
-        if (document.body.style.cursor === 'pointer') {
-          document.body.style.cursor = ''
-        }
-      }}
-      position={[offsetIndex * GROUND_MENU_SPACING, 0, 0]}
-      scale={scale}
-    >
-      <mesh material={material} renderOrder={1010} rotation={[-Math.PI / 2, 0, 0]}>
-        <planeGeometry args={[GROUND_ICON_SIZE, GROUND_ICON_SIZE]} />
-      </mesh>
-    </group>
-  )
-}
-
-// Lucide Move + Copy + Trash2 — matches the icons the HTML floating menu
-// uses, so the in-world version reads as the same action without retraining.
-const ICON_SVGS: Record<'move' | 'duplicate' | 'delete', string> = {
-  move: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 9l-3 3 3 3"/><path d="M9 5l3-3 3 3"/><path d="M15 19l-3 3-3-3"/><path d="M19 9l3 3-3 3"/><path d="M2 12h20"/><path d="M12 2v20"/></svg>`,
-  duplicate: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
-  delete: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
-}
-
-const ICON_TEXTURE_CACHE = new Map<string, CanvasTexture>()
-const ICON_TEXTURE_SIZE = 128
-
-function getIconTexture(kind: 'move' | 'duplicate' | 'delete'): CanvasTexture {
-  const cached = ICON_TEXTURE_CACHE.get(kind)
-  if (cached) return cached
-
-  const canvas = document.createElement('canvas')
-  canvas.width = ICON_TEXTURE_SIZE
-  canvas.height = ICON_TEXTURE_SIZE
-  const texture = new CanvasTexture(canvas)
-  texture.colorSpace = SRGBColorSpace
-  ICON_TEXTURE_CACHE.set(kind, texture)
-
-  const img = new Image()
-  img.onload = () => {
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
-    ctx.clearRect(0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
-    ctx.drawImage(img, 0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
-    texture.needsUpdate = true
-  }
-  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(ICON_SVGS[kind])}`
-
-  return texture
-}
diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index 0c5c96f05..1449b1c36 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -53,6 +53,17 @@ const ALLOWED_TYPES = [
 const DELETE_ONLY_TYPES: string[] = []
 const HOLE_TYPES = ['slab', 'ceiling']
 
+// Menu scales with camera zoom so it feels anchored to the object, but is
+// clamped on both ends so it stays readable when zoomed way out and doesn't
+// dominate the screen when zoomed in close. Reference values are picked so
+// scale = 1 lands near the editor's default framing.
+const MIN_MENU_SCALE = 0.5
+// Cap at 1 so zooming in doesn't grow the menu past its default pixel size —
+// only zoom-out shrinks it (down to MIN_MENU_SCALE).
+const MAX_MENU_SCALE = 1
+const REF_ORTHO_ZOOM = 20
+const REF_CAMERA_DISTANCE = 12
+
 export function FloatingActionMenu() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const updateNode = useScene((s) => s.updateNode)
@@ -71,6 +82,7 @@ export function FloatingActionMenu() {
   const groupRef = useRef<THREE.Group>(null)
   const startEndpointGroupRef = useRef<THREE.Group>(null)
   const endEndpointGroupRef = useRef<THREE.Group>(null)
+  const menuScaleRef = useRef<HTMLDivElement>(null)
   const [altPressed, setAltPressed] = useState(false)
 
   // Only show for single selection of specific types
@@ -131,9 +143,23 @@ export function FloatingActionMenu() {
     }
   }, [])
 
-  useFrame(() => {
+  useFrame((state) => {
     if (!(selectedId && isValidType && groupRef.current)) return
 
+    // Scale the HTML menu with camera zoom (ortho) or inverse distance
+    // (perspective) so it feels anchored to the world, clamped on both ends
+    // so it stays readable at extreme zoom-out and doesn't fill the screen
+    // when zoomed in close.
+    if (menuScaleRef.current) {
+      const raw =
+        state.camera instanceof THREE.OrthographicCamera
+          ? state.camera.zoom / REF_ORTHO_ZOOM
+          : REF_CAMERA_DISTANCE /
+            Math.max(state.camera.position.distanceTo(groupRef.current.position), 0.001)
+      const scale = Math.min(MAX_MENU_SCALE, Math.max(MIN_MENU_SCALE, raw))
+      menuScaleRef.current.style.transform = `scale(${scale})`
+    }
+
     const obj = sceneRegistry.nodes.get(selectedId)
     if (obj) {
       // Calculate bounding box in world space
@@ -145,7 +171,25 @@ export function FloatingActionMenu() {
         // measurement labels.
         const isStructural = node && [...DELETE_ONLY_TYPES, ...HOLE_TYPES].includes(node.type)
         const isWall = node?.type === 'wall'
-        const yOffset = isWall ? 1 : isStructural ? 0.8 : 0.3
+        const isOpening = node?.type === 'door' || node?.type === 'window'
+        const isLandingSegment =
+          node?.type === 'stair-segment' && node.segmentType === 'landing'
+        const isFlightSegment =
+          node?.type === 'stair-segment' && node.segmentType === 'stair'
+        const isParentStair = node?.type === 'stair'
+        const yOffset = isWall
+          ? 0.5
+          : isOpening
+            ? 0.6
+            : isLandingSegment
+              ? 0.5
+              : isFlightSegment
+                ? 0.75
+                : isParentStair
+                  ? 0.2
+                  : isStructural
+                    ? 0.4
+                    : 0.05
         groupRef.current.position.set(center.x, box.max.y + yOffset, center.z)
       }
 
@@ -175,37 +219,6 @@ export function FloatingActionMenu() {
     }
   })
 
-  const handleMove = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation()
-      if (!node) return
-      sfxEmitter.emit('sfx:item-pick')
-      if (
-        node.type === 'item' ||
-        node.type === 'window' ||
-        node.type === 'door' ||
-        node.type === 'elevator' ||
-        node.type === 'wall' ||
-        node.type === 'fence' ||
-        node.type === 'column' ||
-        node.type === 'slab' ||
-        node.type === 'ceiling' ||
-        node.type === 'spawn' ||
-        node.type === 'roof' ||
-        node.type === 'roof-segment' ||
-        node.type === 'stair' ||
-        node.type === 'stair-segment' ||
-        // Registry-driven kinds default to movable; MoveTool dispatches them
-        // to MoveRegistryNodeTool. Phase 4 reads `capabilities.movable` to
-        // gate this instead of the unconditional OR.
-        isRegistrySelectable(node.type)
-      ) {
-        setMovingNode(node as any)
-      }
-      setSelection({ selectedIds: [] })
-    },
-    [node, setMovingNode, setSelection],
-  )
   const handleCurve = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
@@ -449,19 +462,6 @@ export function FloatingActionMenu() {
   )
     return null
 
-  // Walls now expose their actions through the in-world ground menu
-  // (`WallGroundActionMenu` in `wall-move-side-handles.tsx`). Skip the
-  // HTML floating menu for them so we don't render duplicate UI.
-  if (node?.type === 'wall') return null
-  // Doors use the in-world `DoorGroundActionMenu` for the same reason.
-  if (node?.type === 'door') return null
-  // Windows use the in-world `WindowGroundActionMenu`.
-  if (node?.type === 'window') return null
-  // Stair segments use the in-world `StairSegmentGroundActionMenu`.
-  if (node?.type === 'stair-segment') return null
-  // Parent stairs use the in-world `StairGroundActionMenu`.
-  if (node?.type === 'stair') return null
-
   return (
     <group>
       <group ref={groupRef}>
@@ -473,26 +473,27 @@ export function FloatingActionMenu() {
           }}
           zIndexRange={[100, 0]}
         >
-          <NodeActionMenu
-            onAddHole={node && HOLE_TYPES.includes(node.type) ? handleAddHole : undefined}
-            onCurve={node?.type === 'fence' ? handleCurve : undefined}
-            onDelete={handleDelete}
-            onDuplicate={
-              node &&
-              node.type !== 'spawn' &&
-              !DELETE_ONLY_TYPES.includes(node.type) &&
-              !HOLE_TYPES.includes(node.type)
-                ? handleDuplicate
-                : undefined
-            }
-            onMove={
-              node && node.type !== 'fence' && !DELETE_ONLY_TYPES.includes(node.type)
-                ? handleMove
-                : undefined
-            }
-            onPointerDown={(e) => e.stopPropagation()}
-            onPointerUp={(e) => e.stopPropagation()}
-          />
+          <div ref={menuScaleRef} style={{ transformOrigin: 'center center' }}>
+            <NodeActionMenu
+              onAddHole={node && HOLE_TYPES.includes(node.type) ? handleAddHole : undefined}
+              onCurve={
+                node?.type === 'fence' || (node?.type === 'wall' && canCurveSelectedWall)
+                  ? handleCurve
+                  : undefined
+              }
+              onDelete={handleDelete}
+              onDuplicate={
+                node &&
+                node.type !== 'spawn' &&
+                !DELETE_ONLY_TYPES.includes(node.type) &&
+                !HOLE_TYPES.includes(node.type)
+                  ? handleDuplicate
+                  : undefined
+              }
+              onPointerDown={(e) => e.stopPropagation()}
+              onPointerUp={(e) => e.stopPropagation()}
+            />
+          </div>
         </Html>
       </group>
       {node?.type === 'fence' && (
diff --git a/packages/editor/src/components/editor/grid.tsx b/packages/editor/src/components/editor/grid.tsx
index 8ac51ec3a..7b05e7452 100644
--- a/packages/editor/src/components/editor/grid.tsx
+++ b/packages/editor/src/components/editor/grid.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import { emitter, type GridEvent, sceneRegistry } from '@pascal-app/core'
+import { type AnyNodeId, emitter, type GridEvent, sceneRegistry } from '@pascal-app/core'
 import { GRID_LAYER, getSceneTheme, useViewer } from '@pascal-app/viewer'
 import { useFrame } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { MathUtils, type Mesh, PlaneGeometry, Vector2 } from 'three'
+import { MathUtils, type Mesh, PlaneGeometry, Vector2, Vector3 } from 'three'
 import { color, float, fract, fwidth, mix, positionLocal, uniform } from 'three/tsl'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { useGridEvents } from '../../hooks/use-grid-events'
@@ -130,16 +130,34 @@ export const Grid = ({
     }
   }, [])
 
+  const worldPosScratch = useMemo(() => new Vector3(), [])
   useFrame((_, delta) => {
-    const currentLevelId = useViewer.getState().selection.levelId
+    const { levelId, buildingId } = useViewer.getState().selection
+    // Align the grid's XZ origin to the active building so its visible cell
+    // lines pass through building-local snap points (walls snap in
+    // building-local coords; a building placed at world (0.25, 0.25) would
+    // otherwise leave snapped wall endpoints stranded between grid lines).
+    let targetX = 0
+    let targetZ = 0
+    if (buildingId) {
+      const buildingMesh = sceneRegistry.nodes.get(buildingId as AnyNodeId)
+      if (buildingMesh) {
+        buildingMesh.getWorldPosition(worldPosScratch)
+        targetX = worldPosScratch.x
+        targetZ = worldPosScratch.z
+      }
+    }
     let targetY = 0
-    if (currentLevelId) {
-      const levelMesh = sceneRegistry.nodes.get(currentLevelId)
+    if (levelId) {
+      const levelMesh = sceneRegistry.nodes.get(levelId)
       if (levelMesh) {
         targetY = levelMesh.position.y
       }
     }
-    const newY = MathUtils.lerp(gridRef.current.position.y, targetY, 12 * delta)
+    const t = 12 * delta
+    gridRef.current.position.x = MathUtils.lerp(gridRef.current.position.x, targetX, t)
+    gridRef.current.position.z = MathUtils.lerp(gridRef.current.position.z, targetZ, t)
+    const newY = MathUtils.lerp(gridRef.current.position.y, targetY, t)
     gridRef.current.position.y = newY
     setGridY(newY)
   })
diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index d8c9377a5..3dda700ba 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -574,6 +574,16 @@ function PaintCursorBadge({
   )
 }
 
+// Subscribes to `gridSnapStep` so the visible grid cell size matches whatever
+// the wall draft tool snaps to — otherwise the cursor lands between visible
+// grid lines when the user picks a finer snap (0.25 / 0.1 / 0.05).
+function SnapAwareGrid() {
+  const gridSnapStep = useEditor((s) => s.gridSnapStep)
+  return (
+    <Grid cellColor="#aaa" cellSize={gridSnapStep} fadeDistance={500} sectionColor="#ccc" />
+  )
+}
+
 // ── Viewer scene content: memoized so <Viewer> doesn't re-render on mode/viewMode changes ──
 
 const ViewerSceneContent = memo(function ViewerSceneContent({
@@ -605,9 +615,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       <CeilingSelectionAffordanceSystem />
       <RoofEditSystem />
       <StairEditSystem />
-      {!(isLoading || isFirstPersonMode) && (
-        <Grid cellColor="#aaa" fadeDistance={500} sectionColor="#ccc" />
-      )}
+      {!(isLoading || isFirstPersonMode) && <SnapAwareGrid />}
       {!(isLoading || isVersionPreviewMode || isFirstPersonMode) && <ToolManager />}
       {isFirstPersonMode && <FirstPersonControls />}
       <CustomCameraControls />
diff --git a/packages/editor/src/components/editor/stair-segment-handles.tsx b/packages/editor/src/components/editor/stair-segment-handles.tsx
index e163f2c5d..20c299b9a 100644
--- a/packages/editor/src/components/editor/stair-segment-handles.tsx
+++ b/packages/editor/src/components/editor/stair-segment-handles.tsx
@@ -4,7 +4,6 @@ import {
   type AnyNodeId,
   type StairNode,
   type StairSegmentNode,
-  StairSegmentNode as StairSegmentSchema,
   sceneRegistry,
   useScene,
 } from '@pascal-app/core'
@@ -12,7 +11,6 @@ import { useViewer } from '@pascal-app/viewer'
 import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
-  CanvasTexture,
   Color,
   DoubleSide,
   ExtrudeGeometry,
@@ -23,13 +21,11 @@ import {
   Plane,
   RingGeometry,
   Shape,
-  SRGBColorSpace,
   Vector2,
   Vector3,
 } from 'three'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { sfxEmitter } from '../../lib/sfx-bus'
-import { duplicateStairSubtree } from '../../lib/stair-duplication'
 import useEditor from '../../store/use-editor'
 
 const SIDE_HANDLE_OFFSET = 0.24
@@ -41,11 +37,6 @@ const MIN_SEGMENT_LENGTH = 0.4
 const MIN_SEGMENT_HEIGHT = 0.1
 const ARROW_COLOR = '#8381ed'
 const ARROW_HOVER_COLOR = '#a5b4fc'
-const GROUND_MENU_SIDE_CLEARANCE = 0.68
-const GROUND_MENU_SPACING = 0.32
-const GROUND_ICON_SIZE = 0.22
-const GROUND_MENU_SIDE_HYSTERESIS = 0.1
-const GROUND_MENU_LERP_RATE = 14
 
 // Synthetic `click` after a drag's pointerup would deselect the segment via
 // the canvas-level PointerMissedHandler. Mirrors the window/door handles.
@@ -187,7 +178,6 @@ function StairSegmentHandlesForSegment({ segmentNode }: { segmentNode: StairSegm
         {segmentNode.segmentType === 'stair' ? (
           <StairSegmentHeightArrow segmentNode={segmentNode} segmentObject={segmentObject} />
         ) : null}
-        <StairSegmentGroundActionMenu segmentNode={segmentNode} segmentObject={segmentObject} />
       </group>
     </group>,
     parentObject,
@@ -623,238 +613,6 @@ function StairSegmentHeightArrow({
   )
 }
 
-function StairSegmentGroundActionMenu({
-  segmentNode,
-  segmentObject,
-}: {
-  segmentNode: StairSegmentNode
-  segmentObject: Mesh
-}) {
-  const menuGroupRef = useRef<Group>(null)
-  const sideRef = useRef<number>(1)
-  const initializedForSegmentIdRef = useRef<string | null>(null)
-  const cameraLocalScratch = useMemo(() => new Vector3(), [])
-
-  useFrame((state, dt) => {
-    const menu = menuGroupRef.current
-    if (!menu) return
-
-    // Work in segment-local space: the wrapper this menu lives under already
-    // applies the segment's chained transform, so a flat +X axis is the
-    // segment's width-axis side and +Z is the run direction.
-    segmentObject.updateMatrixWorld()
-    cameraLocalScratch.copy(state.camera.position)
-    segmentObject.worldToLocal(cameraLocalScratch)
-
-    const projection = cameraLocalScratch.x
-
-    const isFresh = initializedForSegmentIdRef.current !== segmentNode.id
-    const currentSide = sideRef.current
-    let nextSide: number
-    if (isFresh) {
-      nextSide = projection >= 0 ? 1 : -1
-    } else if (currentSide >= 0 && projection < -GROUND_MENU_SIDE_HYSTERESIS) {
-      nextSide = -1
-    } else if (currentSide < 0 && projection > GROUND_MENU_SIDE_HYSTERESIS) {
-      nextSide = 1
-    } else {
-      nextSide = currentSide
-    }
-    sideRef.current = nextSide
-
-    const offset = segmentNode.width / 2 + GROUND_MENU_SIDE_CLEARANCE
-    const targetX = nextSide * offset
-    const targetZ = segmentNode.length / 2
-    // Stays glued to the segment's base — for chained segments this is the
-    // top of the previous segment, not the absolute slab. That's what the
-    // user expects: the menu rides with the segment as the chain shifts.
-    const targetY = 0
-    // Rotate the menu so its local +X (where icons fan out) aligns with the
-    // segment's run (+Z): rotY = -π/2 for +X side, +π/2 for -X side.
-    const targetRot = nextSide >= 0 ? -Math.PI / 2 : Math.PI / 2
-
-    if (isFresh) {
-      menu.position.set(targetX, targetY, targetZ)
-      menu.rotation.y = targetRot
-      initializedForSegmentIdRef.current = segmentNode.id
-      return
-    }
-
-    const t = 1 - Math.exp(-dt * GROUND_MENU_LERP_RATE)
-    menu.position.x += (targetX - menu.position.x) * t
-    menu.position.z += (targetZ - menu.position.z) * t
-    menu.position.y = targetY
-
-    let rotDelta = targetRot - menu.rotation.y
-    while (rotDelta > Math.PI) rotDelta -= 2 * Math.PI
-    while (rotDelta < -Math.PI) rotDelta += 2 * Math.PI
-    menu.rotation.y += rotDelta * t
-  })
-
-  const items: Array<'duplicate' | 'delete'> = ['duplicate', 'delete']
-  const centerIndex = (items.length - 1) / 2
-
-  return (
-    <group ref={menuGroupRef}>
-      {/* Inner 180° flip so the icons read upright from the camera's side
-          after the outer menu's camera-facing Y rotation. */}
-      <group rotation={[0, Math.PI, 0]}>
-        {items.map((kind, index) => (
-          <StairSegmentGroundActionIcon
-            key={kind}
-            kind={kind}
-            offsetIndex={index - centerIndex}
-            segmentNode={segmentNode}
-          />
-        ))}
-      </group>
-    </group>
-  )
-}
-
-function StairSegmentGroundActionIcon({
-  kind,
-  offsetIndex,
-  segmentNode,
-}: {
-  kind: 'duplicate' | 'delete'
-  offsetIndex: number
-  segmentNode: StairSegmentNode
-}) {
-  const [isHovered, setIsHovered] = useState(false)
-  const { camera } = useThree()
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.2 : 1) * zoom
-
-  const texture = useMemo(() => getIconTexture(kind), [kind])
-  const material = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        map: texture,
-        side: DoubleSide,
-        alphaTest: 0.4,
-        transparent: true,
-        opacity: 1,
-        depthTest: false,
-        depthWrite: false,
-      }),
-    [texture],
-  )
-
-  useEffect(() => {
-    material.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [material, isHovered])
-  useEffect(() => () => material.dispose(), [material])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'pointer') {
-        document.body.style.cursor = ''
-      }
-    }
-  }, [])
-
-  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-    sfxEmitter.emit('sfx:item-pick')
-    document.body.style.cursor = ''
-    setIsHovered(false)
-
-    if (kind === 'delete') {
-      sfxEmitter.emit('sfx:structure-delete')
-      useViewer.getState().setSelection({ selectedIds: [] })
-      useScene.getState().deleteNode(segmentNode.id as AnyNodeId)
-      return
-    }
-
-    // Duplicate: createNodesAction appends to the parent's children, so the
-    // clone lands at the END of the chain. Force `attachmentSide: 'front'`
-    // so it cleanly continues from whatever segment is currently last —
-    // copying the original's side could turn it into a U-turn relative to
-    // the new chain end, which is almost never what the user wants.
-    const input = structuredClone(segmentNode) as Record<string, unknown>
-    delete input.id
-    input.attachmentSide = 'front'
-    const existingMetadata =
-      input.metadata && typeof input.metadata === 'object' && !Array.isArray(input.metadata)
-        ? (input.metadata as Record<string, unknown>)
-        : {}
-    input.metadata = { ...existingMetadata, isNew: true }
-    try {
-      const dup = StairSegmentSchema.parse(input)
-      useScene.getState().createNode(dup, dup.parentId as AnyNodeId)
-      useViewer.getState().setSelection({ selectedIds: [dup.id] })
-    } catch (err) {
-      console.error('Failed to duplicate stair segment', err)
-    }
-  }
-
-  return (
-    <group position={[offsetIndex * GROUND_MENU_SPACING, 0, 0]} scale={scale}>
-      <mesh
-        material={material}
-        // Handlers on the mesh itself (not the outer group) so each icon
-        // owns its own raycast target. With `depthTest: false` the icons
-        // can show up in multiple intersection lists at a glancing camera
-        // angle; gating on `intersections[0]?.object === event.object`
-        // makes sure only the truly front-most icon takes the hover.
-        onPointerDown={onPointerDown}
-        onPointerOut={(event) => {
-          event.stopPropagation()
-          setIsHovered(false)
-          if (document.body.style.cursor === 'pointer') {
-            document.body.style.cursor = ''
-          }
-        }}
-        onPointerOver={(event) => {
-          event.stopPropagation()
-          if (event.intersections[0]?.object !== event.object) return
-          setIsHovered(true)
-          document.body.style.cursor = 'pointer'
-        }}
-        renderOrder={1010}
-        rotation={[-Math.PI / 2, 0, 0]}
-      >
-        <planeGeometry args={[GROUND_ICON_SIZE, GROUND_ICON_SIZE]} />
-      </mesh>
-    </group>
-  )
-}
-
-const ICON_SVGS: Record<'duplicate' | 'delete' | 'move', string> = {
-  duplicate: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
-  delete: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
-  move: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 9 2 12 5 15"/><polyline points="9 5 12 2 15 5"/><polyline points="15 19 12 22 9 19"/><polyline points="19 9 22 12 19 15"/><line x1="2" x2="22" y1="12" y2="12"/><line x1="12" x2="12" y1="2" y2="22"/></svg>`,
-}
-
-const ICON_TEXTURE_CACHE = new Map<string, CanvasTexture>()
-const ICON_TEXTURE_SIZE = 128
-
-function getIconTexture(kind: 'duplicate' | 'delete' | 'move'): CanvasTexture {
-  const cached = ICON_TEXTURE_CACHE.get(kind)
-  if (cached) return cached
-
-  const canvas = document.createElement('canvas')
-  canvas.width = ICON_TEXTURE_SIZE
-  canvas.height = ICON_TEXTURE_SIZE
-  const texture = new CanvasTexture(canvas)
-  texture.colorSpace = SRGBColorSpace
-  ICON_TEXTURE_CACHE.set(kind, texture)
-
-  const img = new Image()
-  img.onload = () => {
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
-    ctx.clearRect(0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
-    ctx.drawImage(img, 0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
-    texture.needsUpdate = true
-  }
-  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(ICON_SVGS[kind])}`
-
-  return texture
-}
-
 // ───────────────────────────────────────────────────────────────────────
 // Parent-stair handles — ground-anchored action menu for the whole stair
 // (move / duplicate / delete). Mirrors the per-segment ground menu above
@@ -939,263 +697,11 @@ function StairHandlesForStair({ stairNode }: { stairNode: StairNode }) {
           <CurvedStairSweepArrow end="end" stairNode={stairNode} stairObject={stairObject} />
         </>
       ) : null}
-      <StairGroundActionMenu stairNode={stairNode} stairObject={stairObject} />
     </group>,
     parentObject,
   )
 }
 
-// Sum the visible straight-segment lengths to find the chain centerline.
-// Curved / spiral stairs have no segment chain — fall back to 0 so the menu
-// lands at the stair's root anchor.
-function useStairChainLength(stairNode: StairNode): number {
-  return useScene((state) => {
-    if ((stairNode.stairType ?? 'straight') !== 'straight') return 0
-    let total = 0
-    for (const childId of stairNode.children ?? []) {
-      const child = state.nodes[childId as AnyNodeId]
-      if (child?.type !== 'stair-segment') continue
-      if (child.visible === false) continue
-      total += child.length ?? 0
-    }
-    return total
-  })
-}
-
-function StairGroundActionMenu({
-  stairNode,
-  stairObject,
-}: {
-  stairNode: StairNode
-  stairObject: Object3D
-}) {
-  const menuGroupRef = useRef<Group>(null)
-  const sideRef = useRef<number>(1)
-  const initializedForStairIdRef = useRef<string | null>(null)
-  const cameraLocalScratch = useMemo(() => new Vector3(), [])
-
-  const chainLength = useStairChainLength(stairNode)
-
-  useFrame((state, dt) => {
-    const menu = menuGroupRef.current
-    if (!menu) return
-
-    // Work in stair-local space: the wrapper this menu lives under already
-    // applies the stair's world transform, so +X is the stair's width axis
-    // and +Z is the run direction.
-    stairObject.updateMatrixWorld()
-    cameraLocalScratch.copy(state.camera.position)
-    stairObject.worldToLocal(cameraLocalScratch)
-
-    const stairType = stairNode.stairType ?? 'straight'
-    const isArc = stairType === 'curved' || stairType === 'spiral'
-
-    // For arc stairs the footprint is a disc; the "side" projection should
-    // come from the camera vector that's the longest local axis so the menu
-    // doesn't end up biased to +X just because the arc happens to face it.
-    const projection = isArc
-      ? // Larger absolute axis decides the side, signed by that axis's value.
-        Math.abs(cameraLocalScratch.x) >= Math.abs(cameraLocalScratch.z)
-        ? cameraLocalScratch.x
-        : cameraLocalScratch.z
-      : cameraLocalScratch.x
-
-    const isFresh = initializedForStairIdRef.current !== stairNode.id
-    const currentSide = sideRef.current
-    let nextSide: number
-    if (isFresh) {
-      nextSide = projection >= 0 ? 1 : -1
-    } else if (currentSide >= 0 && projection < -GROUND_MENU_SIDE_HYSTERESIS) {
-      nextSide = -1
-    } else if (currentSide < 0 && projection > GROUND_MENU_SIDE_HYSTERESIS) {
-      nextSide = 1
-    } else {
-      nextSide = currentSide
-    }
-    sideRef.current = nextSide
-
-    // Straight stairs: side offset along +X by half-width; menu sits at the
-    // chain centerline along +Z.
-    // Curved / spiral stairs: footprint is an annular disc centered at the
-    // stair root with outer radius `innerRadius + width`. Place the menu
-    // just outside that disc, on whichever cardinal side faces the camera.
-    let targetX: number
-    let targetZ: number
-    let targetRot: number
-    if (isArc) {
-      const innerRadius = Math.max(
-        stairType === 'spiral' ? 0.05 : 0.2,
-        stairNode.innerRadius ?? (stairType === 'spiral' ? 0.2 : 0.9),
-      )
-      const outerRadius = innerRadius + Math.max(stairNode.width ?? 1, 0.4)
-      const radial = outerRadius + GROUND_MENU_SIDE_CLEARANCE
-      // Which local axis the menu sits on: pick whichever the camera leans
-      // toward most. Side sign (±1) flips it to the camera-facing half.
-      const cameraOnX = Math.abs(cameraLocalScratch.x) >= Math.abs(cameraLocalScratch.z)
-      targetX = cameraOnX ? nextSide * radial : 0
-      targetZ = cameraOnX ? 0 : nextSide * radial
-      // Icons fan out along the menu's local +X and the icon texture's "top"
-      // (after the plane's -π/2 X-rotation + the inner 180° Y-flip) points
-      // along the menu's local +Z. The outer Y rotation has to land that +Z
-      // direction AWAY from the camera so icons read upright; otherwise the
-      // texture appears upside-down (icons facing inward toward the stair).
-      // For the ±Z cardinal sides that means π / 0, not 0 / π.
-      targetRot = cameraOnX
-        ? nextSide >= 0
-          ? -Math.PI / 2
-          : Math.PI / 2
-        : nextSide >= 0
-          ? Math.PI
-          : 0
-    } else {
-      const offset = stairNode.width / 2 + GROUND_MENU_SIDE_CLEARANCE
-      targetX = nextSide * offset
-      // Centerline of the chain along the run.
-      targetZ = chainLength / 2
-      targetRot = nextSide >= 0 ? -Math.PI / 2 : Math.PI / 2
-    }
-    const targetY = 0
-
-    if (isFresh) {
-      menu.position.set(targetX, targetY, targetZ)
-      menu.rotation.y = targetRot
-      initializedForStairIdRef.current = stairNode.id
-      return
-    }
-
-    const t = 1 - Math.exp(-dt * GROUND_MENU_LERP_RATE)
-    menu.position.x += (targetX - menu.position.x) * t
-    menu.position.z += (targetZ - menu.position.z) * t
-    menu.position.y = targetY
-
-    let rotDelta = targetRot - menu.rotation.y
-    while (rotDelta > Math.PI) rotDelta -= 2 * Math.PI
-    while (rotDelta < -Math.PI) rotDelta += 2 * Math.PI
-    menu.rotation.y += rotDelta * t
-  })
-
-  const items: Array<'move' | 'duplicate' | 'delete'> = ['move', 'duplicate', 'delete']
-  const centerIndex = (items.length - 1) / 2
-
-  return (
-    <group ref={menuGroupRef}>
-      {/* Inner 180° flip so icons read upright from the camera side after the
-          outer menu's camera-facing Y rotation. */}
-      <group rotation={[0, Math.PI, 0]}>
-        {items.map((kind, index) => (
-          <StairGroundActionIcon
-            key={kind}
-            kind={kind}
-            offsetIndex={index - centerIndex}
-            stairNode={stairNode}
-          />
-        ))}
-      </group>
-    </group>
-  )
-}
-
-function StairGroundActionIcon({
-  kind,
-  offsetIndex,
-  stairNode,
-}: {
-  kind: 'move' | 'duplicate' | 'delete'
-  offsetIndex: number
-  stairNode: StairNode
-}) {
-  const [isHovered, setIsHovered] = useState(false)
-  const { camera } = useThree()
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.2 : 1) * zoom
-
-  const texture = useMemo(() => getIconTexture(kind), [kind])
-  const material = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        map: texture,
-        side: DoubleSide,
-        alphaTest: 0.4,
-        transparent: true,
-        opacity: 1,
-        depthTest: false,
-        depthWrite: false,
-      }),
-    [texture],
-  )
-
-  useEffect(() => {
-    material.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [material, isHovered])
-  useEffect(() => () => material.dispose(), [material])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'pointer') {
-        document.body.style.cursor = ''
-      }
-    }
-  }, [])
-
-  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-    sfxEmitter.emit('sfx:item-pick')
-    document.body.style.cursor = ''
-    setIsHovered(false)
-
-    if (kind === 'move') {
-      // Hand the stair to the move tool the same way the floating menu does:
-      // clear selection so selection-gated UI unmounts during the drag,
-      // then set `movingNode`. `MoveRoofTool` picks it up.
-      useViewer.getState().setSelection({ selectedIds: [] })
-      useEditor.getState().setMovingNode(stairNode)
-      return
-    }
-
-    if (kind === 'delete') {
-      sfxEmitter.emit('sfx:structure-delete')
-      useViewer.getState().setSelection({ selectedIds: [] })
-      useScene.getState().deleteNode(stairNode.id as AnyNodeId)
-      return
-    }
-
-    // Duplicate: `duplicateStairSubtree` clones the stair + all its segments
-    // and hands the duplicate to move mode (offset by +1,+1 inside).
-    try {
-      duplicateStairSubtree(stairNode.id as AnyNodeId, { mode: 'move' })
-    } catch (err) {
-      console.error('Failed to duplicate stair', err)
-    }
-  }
-
-  return (
-    <group position={[offsetIndex * GROUND_MENU_SPACING, 0, 0]} scale={scale}>
-      <mesh
-        material={material}
-        onPointerDown={onPointerDown}
-        onPointerOut={(event) => {
-          event.stopPropagation()
-          setIsHovered(false)
-          if (document.body.style.cursor === 'pointer') {
-            document.body.style.cursor = ''
-          }
-        }}
-        onPointerOver={(event) => {
-          event.stopPropagation()
-          if (event.intersections[0]?.object !== event.object) return
-          setIsHovered(true)
-          document.body.style.cursor = 'pointer'
-        }}
-        renderOrder={1010}
-        rotation={[-Math.PI / 2, 0, 0]}
-      >
-        <planeGeometry args={[GROUND_ICON_SIZE, GROUND_ICON_SIZE]} />
-      </mesh>
-    </group>
-  )
-}
-
 // ───────────────────────────────────────────────────────────────────────
 // Curved / spiral stair arrows — three handles that map to the stair-level
 // parametric params (totalRise, width, innerRadius). Curved stairs have no
diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
index ae8aee074..4d3a71bfb 100644
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -9,14 +9,13 @@ import {
   isCurvedWall,
   sceneRegistry,
   useScene,
-  WallNode,
+  type WallNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   BufferGeometry,
-  CanvasTexture,
   Color,
   CylinderGeometry,
   DoubleSide,
@@ -26,7 +25,6 @@ import {
   OrthographicCamera,
   Plane,
   Shape,
-  SRGBColorSpace,
   Vector2,
   Vector3,
 } from 'three'
@@ -51,20 +49,6 @@ const CORNER_DASH_SIZE = 0.1
 const CORNER_GAP_SIZE = 0.07
 const CORNER_DASH_THICKNESS = 0.006
 const CORNER_FLOOR_OFFSET = 0.01
-const GROUND_MENU_FACE_CLEARANCE = 0.85
-const GROUND_MENU_SPACING = 0.32
-const GROUND_ICON_SIZE = 0.22
-const GROUND_ICON_LIFT = 0.1
-// Dead-zone width (world units) around the wall plane before the menu
-// commits to the opposite face. Prevents per-frame flicker when the
-// camera orbits along the wall plane and floating-point jitter pushes
-// the camera-to-wall projection across zero.
-const GROUND_MENU_SIDE_HYSTERESIS = 0.1
-// Per-second lerp factor for position + rotation. Picked so a side-flip
-// finishes in ~250 ms — fast enough to feel responsive, slow enough that
-// the eye reads it as the three icons swinging around the wall together
-// instead of three separate teleports.
-const GROUND_MENU_LERP_RATE = 14
 
 type WallMoveHandle = {
   key: string
@@ -200,297 +184,11 @@ function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
       <WallHeightArrowHandle wall={wall} />
       <WallCornerLeaderHandle endpoint="start" wall={wall} />
       <WallCornerLeaderHandle endpoint="end" wall={wall} />
-      <WallGroundActionMenuV2 wall={wall} />
     </group>,
     levelObject,
   )
 }
 
-function WallGroundActionMenuV2({ wall }: { wall: WallNode }) {
-  // Subscribe to children so the curve icon hides/shows reactively when
-  // doors / windows / wall-attached items get added or removed.
-  const canCurve = useScene((state) => {
-    return !(wall.children ?? []).some((childId) => {
-      const child = state.nodes[childId as AnyNodeId]
-      if (!child) return false
-      if (child.type === 'door' || child.type === 'window') return true
-      if (child.type === 'item') {
-        const attachTo = (child as { asset?: { attachTo?: string } }).asset?.attachTo
-        return attachTo === 'wall' || attachTo === 'wall-side'
-      }
-      return false
-    })
-  })
-
-  const menuGroupRef = useRef<Group>(null)
-  const sideRef = useRef<number>(1)
-  const initializedForWallIdRef = useRef<string | null>(null)
-
-  // Per-frame transform update — geometry, side decision, and target pose
-  // are all (re)computed inside useFrame instead of being captured from
-  // render closures, so the menu tracks the wall through edit paths that
-  // bypass React (e.g. mid-drag `useLiveNodeOverrides` writes), and the
-  // side decision can carry frame-to-frame hysteresis.
-  useFrame((state, dt) => {
-    const menu = menuGroupRef.current
-    if (!menu) return
-
-    // Curved walls: chord midpoint is off the centerline, so we sample
-    // the curve frame at t=0.5 to get a true centerline midpoint + a
-    // perpendicular normal — keeps the menu equidistant on either face.
-    const curveFrame = isCurvedWall(wall) ? getWallCurveFrameAt(wall, 0.5) : null
-    let midX: number
-    let midZ: number
-    let dirX: number
-    let dirZ: number
-    let normalX: number
-    let normalZ: number
-
-    if (curveFrame) {
-      midX = curveFrame.point.x
-      midZ = curveFrame.point.y
-      normalX = curveFrame.normal.x
-      normalZ = curveFrame.normal.y
-      dirX = curveFrame.normal.y
-      dirZ = -curveFrame.normal.x
-    } else {
-      const dx = wall.end[0] - wall.start[0]
-      const dz = wall.end[1] - wall.start[1]
-      const len = Math.hypot(dx, dz)
-      if (len < 1e-6) return
-      midX = (wall.start[0] + wall.end[0]) / 2
-      midZ = (wall.start[1] + wall.end[1]) / 2
-      dirX = dx / len
-      dirZ = dz / len
-      normalX = -dirZ
-      normalZ = dirX
-    }
-
-    // Offset from the wall *face* (centerline + half-thickness), so the
-    // menu always sits clearly outside the wall mesh.
-    const offset = getWallThickness(wall) / 2 + GROUND_MENU_FACE_CLEARANCE
-
-    const projection =
-      (state.camera.position.x - midX) * normalX +
-      (state.camera.position.z - midZ) * normalZ
-
-    const isFreshWall = initializedForWallIdRef.current !== wall.id
-
-    // Hysteresis: only flip when the camera is clearly past the wall
-    // plane. The previous binary `projection >= 0 ? 1 : -1` flickered
-    // on grazing orbits and the resulting per-frame 180° flip is what
-    // visually fanned the three icons across each other — the outer
-    // two (curve, delete) crossed while the centre one (duplicate,
-    // offsetIndex 0) barely moved, reading as "icons move one at a time."
-    const currentSide = sideRef.current
-    let nextSide: number
-    if (isFreshWall) {
-      nextSide = projection >= 0 ? 1 : -1
-    } else if (currentSide >= 0 && projection < -GROUND_MENU_SIDE_HYSTERESIS) {
-      nextSide = -1
-    } else if (currentSide < 0 && projection > GROUND_MENU_SIDE_HYSTERESIS) {
-      nextSide = 1
-    } else {
-      nextSide = currentSide
-    }
-    sideRef.current = nextSide
-
-    const targetX = midX + normalX * offset * nextSide
-    const targetZ = midZ + normalZ * offset * nextSide
-    const targetRot = Math.atan2(-nextSide * dirZ, nextSide * dirX)
-
-    if (isFreshWall) {
-      // First frame for this wall — snap so the menu doesn't slide in
-      // from the previous wall's pose (or the default origin).
-      menu.position.set(targetX, GROUND_ICON_LIFT, targetZ)
-      menu.rotation.y = targetRot
-      initializedForWallIdRef.current = wall.id
-      return
-    }
-
-    const t = 1 - Math.exp(-dt * GROUND_MENU_LERP_RATE)
-    menu.position.x += (targetX - menu.position.x) * t
-    menu.position.z += (targetZ - menu.position.z) * t
-    menu.position.y = GROUND_ICON_LIFT
-
-    // Shortest angular path — a ~180° side-flip target must rotate the
-    // short way around, otherwise the menu unwinds the long way and the
-    // icons trace an even more dramatic arc.
-    let rotDelta = targetRot - menu.rotation.y
-    while (rotDelta > Math.PI) rotDelta -= 2 * Math.PI
-    while (rotDelta < -Math.PI) rotDelta += 2 * Math.PI
-    menu.rotation.y += rotDelta * t
-  })
-
-  // Don't render an empty menu shell for degenerate walls.
-  const segLength = Math.hypot(wall.end[0] - wall.start[0], wall.end[1] - wall.start[1])
-  if (segLength < 1e-6) return null
-
-  const items: Array<'curve' | 'duplicate' | 'delete'> = []
-  if (canCurve) items.push('curve')
-  items.push('duplicate')
-  items.push('delete')
-  const centerIndex = (items.length - 1) / 2
-
-  return (
-    <group ref={menuGroupRef}>
-      {items.map((kind, index) => (
-        <WallGroundActionIconV2
-          key={kind}
-          kind={kind}
-          offsetIndex={index - centerIndex}
-          wall={wall}
-        />
-      ))}
-    </group>
-  )
-}
-
-function WallGroundActionIconV2({
-  wall,
-  kind,
-  offsetIndex,
-}: {
-  wall: WallNode
-  kind: 'curve' | 'duplicate' | 'delete'
-  offsetIndex: number
-}) {
-  const [isHovered, setIsHovered] = useState(false)
-  const { camera } = useThree()
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.2 : 1) * zoom
-
-  const texture = useMemo(() => getIconTexture(kind), [kind])
-  const material = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        map: texture,
-        side: DoubleSide,
-        // `alphaTest` discards the transparent background pixels of the
-        // SVG icon outright. Without it the WebGPU node-material pipeline
-        // alpha-blends the plane as a translucent square, which is what
-        // shows up when the wall sits between the camera and the icon
-        // (because `depthTest: false` keeps the plane drawing over the
-        // wall).
-        alphaTest: 0.4,
-        transparent: true,
-        opacity: 1,
-        depthTest: false,
-        depthWrite: false,
-      }),
-    [texture],
-  )
-  useEffect(() => {
-    material.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [material, isHovered])
-  useEffect(() => () => material.dispose(), [material])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'pointer') {
-        document.body.style.cursor = ''
-      }
-    }
-  }, [])
-
-  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-    sfxEmitter.emit('sfx:item-pick')
-    document.body.style.cursor = ''
-    setIsHovered(false)
-
-    if (kind === 'curve') {
-      useViewer.getState().setSelection({ selectedIds: [] })
-      useEditor.getState().setCurvingWall(wall)
-      return
-    }
-    if (kind === 'delete') {
-      sfxEmitter.emit('sfx:structure-delete')
-      useViewer.getState().setSelection({ selectedIds: [] })
-      useScene.getState().deleteNode(wall.id as AnyNodeId)
-      return
-    }
-    // duplicate
-    useScene.temporal.getState().pause()
-    const input = structuredClone(wall) as Record<string, unknown>
-    delete input.id
-    const existingMetadata =
-      input.metadata && typeof input.metadata === 'object' && !Array.isArray(input.metadata)
-        ? (input.metadata as Record<string, unknown>)
-        : {}
-    input.metadata = { ...existingMetadata, isNew: true }
-    try {
-      const dup = WallNode.parse(input)
-      useScene.getState().createNode(dup, dup.parentId as AnyNodeId)
-      useEditor.getState().setMovingNode(dup)
-    } catch (err) {
-      console.error('Failed to duplicate wall', err)
-      useScene.temporal.getState().resume()
-    }
-    useViewer.getState().setSelection({ selectedIds: [] })
-  }
-
-  return (
-    <group
-      onPointerDown={onPointerDown}
-      onPointerEnter={(event) => {
-        event.stopPropagation()
-        setIsHovered(true)
-        document.body.style.cursor = 'pointer'
-      }}
-      onPointerLeave={(event) => {
-        event.stopPropagation()
-        setIsHovered(false)
-        if (document.body.style.cursor === 'pointer') {
-          document.body.style.cursor = ''
-        }
-      }}
-      position={[offsetIndex * GROUND_MENU_SPACING, 0, 0]}
-      scale={scale}
-    >
-      <mesh material={material} renderOrder={1004} rotation={[-Math.PI / 2, 0, 0]}>
-        <planeGeometry args={[GROUND_ICON_SIZE, GROUND_ICON_SIZE]} />
-      </mesh>
-    </group>
-  )
-}
-
-// Lucide icon paths — match the Spline / Copy / Trash2 icons the HTML
-// floating menu uses. Stroke is white so material.color can tint them.
-const ICON_SVGS: Record<'curve' | 'duplicate' | 'delete', string> = {
-  curve: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="19" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><path d="M5 17A12 12 0 0 1 17 5"/></svg>`,
-  duplicate: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
-  delete: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
-}
-
-const ICON_TEXTURE_CACHE = new Map<string, CanvasTexture>()
-const ICON_TEXTURE_SIZE = 128
-
-function getIconTexture(kind: 'curve' | 'duplicate' | 'delete'): CanvasTexture {
-  const cached = ICON_TEXTURE_CACHE.get(kind)
-  if (cached) return cached
-
-  const canvas = document.createElement('canvas')
-  canvas.width = ICON_TEXTURE_SIZE
-  canvas.height = ICON_TEXTURE_SIZE
-  const texture = new CanvasTexture(canvas)
-  texture.colorSpace = SRGBColorSpace
-  ICON_TEXTURE_CACHE.set(kind, texture)
-
-  const img = new Image()
-  img.onload = () => {
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
-    ctx.clearRect(0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
-    ctx.drawImage(img, 0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
-    texture.needsUpdate = true
-  }
-  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(ICON_SVGS[kind])}`
-
-  return texture
-}
-
 function buildDashedVerticalGeometry(height: number) {
   // Build each dash as a thin cylinder section so thickness is
   // controllable — native `lineSegments` lock to 1px on WebGL/WebGPU.
@@ -643,9 +341,9 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       new MeshBasicNodeMaterial({
         color: new Color(ARROW_COLOR),
         side: DoubleSide,
-        depthTest: true,
-        depthWrite: true,
-        transparent: false,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true,
         opacity: 1,
       }),
     [],
@@ -795,9 +493,9 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
       new MeshBasicNodeMaterial({
         color: new Color(ARROW_COLOR),
         side: DoubleSide,
-        depthTest: true,
-        depthWrite: true,
-        transparent: false,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true,
         opacity: 1,
       }),
     [],
@@ -875,9 +573,9 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
       new MeshBasicNodeMaterial({
         color: new Color(ARROW_COLOR),
         side: DoubleSide,
-        depthTest: true,
-        depthWrite: true,
-        transparent: false,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true,
         opacity: 1,
       }),
     [],
diff --git a/packages/editor/src/components/editor/window-side-handles.tsx b/packages/editor/src/components/editor/window-side-handles.tsx
index 0f6d6fb6c..cc79a1dc1 100644
--- a/packages/editor/src/components/editor/window-side-handles.tsx
+++ b/packages/editor/src/components/editor/window-side-handles.tsx
@@ -5,13 +5,12 @@ import {
   sceneRegistry,
   useScene,
   type WallNode,
-  WindowNode,
+  type WindowNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
-  CanvasTexture,
   Color,
   DoubleSide,
   ExtrudeGeometry,
@@ -20,7 +19,6 @@ import {
   OrthographicCamera,
   Plane,
   Shape,
-  SRGBColorSpace,
   Vector2,
   Vector3,
 } from 'three'
@@ -36,16 +34,6 @@ const MIN_WINDOW_HEIGHT = 0.3
 const MIN_WINDOW_WIDTH = 0.3
 const ARROW_COLOR = '#8381ed'
 const ARROW_HOVER_COLOR = '#a5b4fc'
-const GROUND_MENU_FACE_CLEARANCE = 0.5
-const GROUND_MENU_SPACING = 0.32
-const GROUND_ICON_SIZE = 0.22
-const GROUND_MENU_SIDE_HYSTERESIS = 0.1
-const GROUND_MENU_LERP_RATE = 14
-// Length the chevron tip extends past the arrow's local origin in shape
-// space (matches the `0.22` X coordinate of the tip in `createArrowHandleGeometry`).
-const ARROW_TIP_EXTENT = 0.22 * ARROW_SCALE
-// Small wall-local gap between the bottom arrow's tip and the action menu.
-const MENU_BELOW_ARROW_GAP = 0.06
 
 // Mirror of door-side-handles `swallowNextClick`: pre-empt the synthetic
 // `click` the browser fires immediately after a drag's pointerup, so the
@@ -172,7 +160,6 @@ function WindowSideHandlesForWindow({ windowNode }: { windowNode: WindowNode })
         <WindowHeightArrowHandle edge="top" wallObject={wallObject} windowNode={windowNode} />
         <WindowHeightArrowHandle edge="bottom" wallObject={wallObject} windowNode={windowNode} />
       </group>
-      <WindowGroundActionMenu wallObject={wallObject} windowNode={windowNode} />
     </group>,
     levelObject,
   )
@@ -551,237 +538,3 @@ function WindowHeightArrowHandle({
   )
 }
 
-function WindowGroundActionMenu({
-  wallObject,
-  windowNode,
-}: {
-  wallObject: Object3D
-  windowNode: WindowNode
-}) {
-  const menuGroupRef = useRef<Group>(null)
-  const sideRef = useRef<number>(1)
-  const initializedForWindowIdRef = useRef<string | null>(null)
-  const cameraLocalScratch = useMemo(() => new Vector3(), [])
-
-  const rotationY =
-    typeof windowNode.rotation === 'number' ? windowNode.rotation : (windowNode.rotation?.[1] ?? 0)
-
-  useFrame((state, dt) => {
-    const menu = menuGroupRef.current
-    if (!menu) return
-
-    const normalX = Math.sin(rotationY)
-    const normalZ = Math.cos(rotationY)
-    const windowX = windowNode.position[0]
-    const windowZ = windowNode.position[2]
-
-    wallObject.updateMatrixWorld()
-    cameraLocalScratch.copy(state.camera.position)
-    wallObject.worldToLocal(cameraLocalScratch)
-
-    const projection =
-      (cameraLocalScratch.x - windowX) * normalX + (cameraLocalScratch.z - windowZ) * normalZ
-
-    const isFreshWindow = initializedForWindowIdRef.current !== windowNode.id
-    const currentSide = sideRef.current
-    let nextSide: number
-    if (isFreshWindow) {
-      nextSide = projection >= 0 ? 1 : -1
-    } else if (currentSide >= 0 && projection < -GROUND_MENU_SIDE_HYSTERESIS) {
-      nextSide = -1
-    } else if (currentSide < 0 && projection > GROUND_MENU_SIDE_HYSTERESIS) {
-      nextSide = 1
-    } else {
-      nextSide = currentSide
-    }
-    sideRef.current = nextSide
-
-    const offset = windowNode.frameDepth / 2 + GROUND_MENU_FACE_CLEARANCE
-    const targetX = windowX + normalX * offset * nextSide
-    const targetZ = windowZ + normalZ * offset * nextSide
-    // Sit the menu just past the bottom arrow's tip so they read as one
-    // stacked column. Arrow base = `windowBottom - HEIGHT_HANDLE_OFFSET`,
-    // chevron tip extends ARROW_TIP_EXTENT further in -Y.
-    const menuY =
-      windowNode.position[1] -
-      windowNode.height / 2 -
-      HEIGHT_HANDLE_OFFSET -
-      ARROW_TIP_EXTENT -
-      MENU_BELOW_ARROW_GAP
-
-    const dirX = -normalZ
-    const dirZ = normalX
-    const targetRot = Math.atan2(-nextSide * dirZ, nextSide * dirX) + Math.PI
-
-    if (isFreshWindow) {
-      menu.position.set(targetX, menuY, targetZ)
-      menu.rotation.y = targetRot
-      initializedForWindowIdRef.current = windowNode.id
-      return
-    }
-
-    const t = 1 - Math.exp(-dt * GROUND_MENU_LERP_RATE)
-    menu.position.x += (targetX - menu.position.x) * t
-    menu.position.z += (targetZ - menu.position.z) * t
-    menu.position.y = menuY
-
-    let rotDelta = targetRot - menu.rotation.y
-    while (rotDelta > Math.PI) rotDelta -= 2 * Math.PI
-    while (rotDelta < -Math.PI) rotDelta += 2 * Math.PI
-    menu.rotation.y += rotDelta * t
-  })
-
-  const items: Array<'move' | 'duplicate' | 'delete'> = ['move', 'duplicate', 'delete']
-  const centerIndex = (items.length - 1) / 2
-
-  return (
-    <group ref={menuGroupRef}>
-      {items.map((kind, index) => (
-        <WindowGroundActionIcon
-          key={kind}
-          kind={kind}
-          offsetIndex={index - centerIndex}
-          windowNode={windowNode}
-        />
-      ))}
-    </group>
-  )
-}
-
-function WindowGroundActionIcon({
-  kind,
-  offsetIndex,
-  windowNode,
-}: {
-  kind: 'move' | 'duplicate' | 'delete'
-  offsetIndex: number
-  windowNode: WindowNode
-}) {
-  const [isHovered, setIsHovered] = useState(false)
-  const { camera } = useThree()
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.2 : 1) * zoom
-
-  const texture = useMemo(() => getIconTexture(kind), [kind])
-  const material = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        map: texture,
-        side: DoubleSide,
-        alphaTest: 0.4,
-        transparent: true,
-        opacity: 1,
-        depthTest: false,
-        depthWrite: false,
-      }),
-    [texture],
-  )
-
-  useEffect(() => {
-    material.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [material, isHovered])
-  useEffect(() => () => material.dispose(), [material])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'pointer') {
-        document.body.style.cursor = ''
-      }
-    }
-  }, [])
-
-  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-    sfxEmitter.emit('sfx:item-pick')
-    document.body.style.cursor = ''
-    setIsHovered(false)
-
-    if (kind === 'move') {
-      useEditor.getState().setMovingNode(windowNode)
-      return
-    }
-
-    if (kind === 'delete') {
-      sfxEmitter.emit('sfx:structure-delete')
-      useViewer.getState().setSelection({ selectedIds: [] })
-      useScene.getState().deleteNode(windowNode.id as AnyNodeId)
-      return
-    }
-
-    useScene.temporal.getState().pause()
-    const input = structuredClone(windowNode) as Record<string, unknown>
-    delete input.id
-    const existingMetadata =
-      input.metadata && typeof input.metadata === 'object' && !Array.isArray(input.metadata)
-        ? (input.metadata as Record<string, unknown>)
-        : {}
-    input.metadata = { ...existingMetadata, isNew: true }
-    try {
-      const dup = WindowNode.parse(input)
-      useScene.getState().createNode(dup, dup.parentId as AnyNodeId)
-      useEditor.getState().setMovingNode(dup)
-      useViewer.getState().setSelection({ selectedIds: [dup.id] })
-    } catch (err) {
-      console.error('Failed to duplicate window', err)
-      useScene.temporal.getState().resume()
-    }
-  }
-
-  return (
-    <group
-      onPointerDown={onPointerDown}
-      onPointerEnter={(event) => {
-        event.stopPropagation()
-        setIsHovered(true)
-        document.body.style.cursor = 'pointer'
-      }}
-      onPointerLeave={(event) => {
-        event.stopPropagation()
-        setIsHovered(false)
-        if (document.body.style.cursor === 'pointer') {
-          document.body.style.cursor = ''
-        }
-      }}
-      position={[offsetIndex * GROUND_MENU_SPACING, 0, 0]}
-      scale={scale}
-    >
-      <mesh material={material} renderOrder={1010} rotation={[-Math.PI / 2, 0, 0]}>
-        <planeGeometry args={[GROUND_ICON_SIZE, GROUND_ICON_SIZE]} />
-      </mesh>
-    </group>
-  )
-}
-
-const ICON_SVGS: Record<'move' | 'duplicate' | 'delete', string> = {
-  move: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 9l-3 3 3 3"/><path d="M9 5l3-3 3 3"/><path d="M15 19l-3 3-3-3"/><path d="M19 9l3 3-3 3"/><path d="M2 12h20"/><path d="M12 2v20"/></svg>`,
-  duplicate: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
-  delete: `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
-}
-
-const ICON_TEXTURE_CACHE = new Map<string, CanvasTexture>()
-const ICON_TEXTURE_SIZE = 128
-
-function getIconTexture(kind: 'move' | 'duplicate' | 'delete'): CanvasTexture {
-  const cached = ICON_TEXTURE_CACHE.get(kind)
-  if (cached) return cached
-
-  const canvas = document.createElement('canvas')
-  canvas.width = ICON_TEXTURE_SIZE
-  canvas.height = ICON_TEXTURE_SIZE
-  const texture = new CanvasTexture(canvas)
-  texture.colorSpace = SRGBColorSpace
-  ICON_TEXTURE_CACHE.set(kind, texture)
-
-  const img = new Image()
-  img.onload = () => {
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
-    ctx.clearRect(0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
-    ctx.drawImage(img, 0, 0, ICON_TEXTURE_SIZE, ICON_TEXTURE_SIZE)
-    texture.needsUpdate = true
-  }
-  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(ICON_SVGS[kind])}`
-
-  return texture
-}

From 7cfad5379c5c4b162a3ad54a66a1f03ab17a53cd Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Tue, 26 May 2026 00:25:27 +0530
Subject: [PATCH 25/48] handles: registry-driven in-world resize arrows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a `handles?: HandleDescriptor[] | (node) => HandleDescriptor[]`
field to `NodeDefinition` so each kind declares its in-world resize
affordances as pure data instead of shipping a bespoke React component.

- New `packages/core/src/registry/handles.ts` exposes a discriminated
  union: `linear-resize` (axis + center/min/max anchor), `radial-resize`
  (1:1 outward growth), plus stubs for `arc-resize` and `endpoint-move`
  for follow-up migrations.
- New `packages/editor/src/components/editor/node-arrow-handles.tsx`
  reads `def.handles`, mounts arrows with shared drag plumbing (raycast
  plane, NDC, pointer listeners, SFX, history pause, handle-dragging
  guard). Portal modes: `'parent'` (column-like, single wrapper rides
  self pose) and `'grandparent'` (door/window-like, outer wrapper rides
  parent pose + inner group rides self pose so handles escape the
  parent's selection-outline traversal). `apply` receives the
  node-at-drag-start so edge-anchored resizes (door width re-centers
  position) compute their fixed anchor from pre-drag state.
- Migrate column, door, window, stair-segment. Old per-kind handle
  files (`column-side-handles.tsx`, `door-side-handles.tsx`,
  `window-side-handles.tsx`) removed; `stair-segment-handles.tsx`
  retains `StairHandles` (parent stair curved/spiral arrows) pending
  the `arc-resize` migration.
- Column: height + crossSection-aware footprint (radius / uniform
  width=depth / independent width+depth / brace width+depth for
  non-vertical supports).
- Door / window: edge-anchored width (left + right) with wall-length
  max bound; bottom-anchored height (door) / top + bottom edges
  (window).
- Stair-segment: width (chain auto-centers), length anchored at chain
  start, height for step flights only (landings skip it).

Wall and parent-stair curved/spiral arrows stay on legacy components
for now — they need `endpoint-move` + `arc-resize` descriptor variants
and rotated-axis projection, which are their own focused sessions.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/core/src/registry/handles.ts         | 147 +++++
 packages/core/src/registry/index.ts           |  13 +
 packages/core/src/registry/types.ts           |  19 +
 .../components/editor/door-side-handles.tsx   | 542 ------------------
 .../editor/floating-action-menu.tsx           |  63 +-
 .../editor/src/components/editor/index.tsx    |   9 +-
 .../components/editor/node-arrow-handles.tsx  | 448 +++++++++++++++
 .../components/editor/window-side-handles.tsx | 540 -----------------
 packages/nodes/src/column/definition.ts       | 131 +++++
 packages/nodes/src/door/definition.ts         | 101 +++-
 .../nodes/src/stair-segment/definition.ts     |  90 ++-
 packages/nodes/src/window/definition.ts       | 108 +++-
 12 files changed, 1095 insertions(+), 1116 deletions(-)
 create mode 100644 packages/core/src/registry/handles.ts
 delete mode 100644 packages/editor/src/components/editor/door-side-handles.tsx
 create mode 100644 packages/editor/src/components/editor/node-arrow-handles.tsx
 delete mode 100644 packages/editor/src/components/editor/window-side-handles.tsx

diff --git a/packages/core/src/registry/handles.ts b/packages/core/src/registry/handles.ts
new file mode 100644
index 000000000..1b62c7eb4
--- /dev/null
+++ b/packages/core/src/registry/handles.ts
@@ -0,0 +1,147 @@
+// In-world resize / move arrow descriptors. Each `NodeDefinition` may
+// declare a `handles` list (or a `(node) => list` function for shape-
+// dependent affordances). The editor mounts a single generic component
+// that reads these descriptors and renders the arrows / drag logic — no
+// per-kind handles file needed.
+//
+// Pure data + small per-descriptor callbacks: no Three.js, React, or
+// editor imports here so this stays in core. The descriptors are
+// evaluated by the editor at drag time (`apply` etc.) so the callbacks
+// run in the editor's context — they see the live node and the scene
+// API but otherwise do not import 3D libraries.
+//
+// Layered intentionally:
+//   - axis-resize    : symmetric scaling around center (column W/D, height)
+//   - edge-resize    : anchored on one edge, the other follows the pointer
+//                      (door width: drag right edge, left edge stays)
+//   - vertical-resize: linear-resize specialised for world-Y (height arrow
+//                      anchored at bottom; window top-edge anchored at
+//                      bottom; window bottom-edge anchored at top)
+//   - radial-resize  : 1:1 outward growth of a radial field (column radius)
+//   - arc-resize     : curved/spiral stair sweep / inner-radius / rise
+//   - endpoint-move  : wall / fence endpoint drag (snapping is bespoke,
+//                      so it delegates to a kind-supplied callback)
+
+import type { SceneApi } from './types'
+
+export type HandlePortal = 'self' | 'parent' | 'grandparent'
+
+export type HandleAxis = 'x' | 'y' | 'z'
+
+export type HandleAnchor = 'center' | 'min' | 'max'
+
+/** 3D position + rotation of the arrow in its portal target's local space. */
+export type HandlePlacement<N> = {
+  position: (node: N) => readonly [number, number, number]
+  /** Optional Y rotation (radians). Defaults to 0. */
+  rotationY?: (node: N) => number
+}
+
+export type Cursor = 'ew-resize' | 'ns-resize' | 'move'
+
+/**
+ * Linear resize along a single local axis. Covers width / depth / height
+ * arrows whose visible behaviour is "drag the +axis edge, the dimension
+ * grows."
+ *
+ * `anchor` controls which side stays fixed:
+ *   - 'center' : symmetric — both edges move ±delta (column width/depth).
+ *   - 'min'    : the -axis edge is fixed; drag the +axis edge by `delta`
+ *                grows the value by `delta` (column height with origin at
+ *                base; door height with bottom anchored).
+ *   - 'max'    : the +axis edge is fixed; drag the -axis edge.
+ *
+ * `apply(node, newValue)` returns the partial patch. Use it to write
+ * sibling fields too (e.g. door 'max' anchor re-centers `position[0]`).
+ */
+export type LinearResizeHandle<N> = {
+  kind: 'linear-resize'
+  /** Local axis. The arrow's chevron points along +axis. */
+  axis: HandleAxis
+  anchor: HandleAnchor
+  currentValue: (node: N) => number
+  apply: (node: N, newValue: number, sceneApi: SceneApi) => Partial<N>
+  min?: number | ((node: N, sceneApi: SceneApi) => number)
+  max?: number | ((node: N, sceneApi: SceneApi) => number)
+  placement: HandlePlacement<N>
+  /**
+   * Defaults to 'self' (arrow lives in the selected node's own mesh).
+   * 'parent' uses the parent mesh — used by doors/windows whose handles
+   * need to ride the wall's rotation.
+   */
+  portal?: HandlePortal
+  cursor?: Cursor
+}
+
+/**
+ * 1:1 outward growth — dragging the arrow outward by `delta` grows the
+ * value by `delta` (the visible edge follows the pointer). Use for radii
+ * and other fields where the conceptual model is "the +axis edge IS the
+ * thing being moved" rather than "the size IS being scaled."
+ */
+export type RadialResizeHandle<N> = {
+  kind: 'radial-resize'
+  axis: HandleAxis
+  currentValue: (node: N) => number
+  apply: (node: N, newValue: number, sceneApi: SceneApi) => Partial<N>
+  min?: number | ((node: N, sceneApi: SceneApi) => number)
+  max?: number | ((node: N, sceneApi: SceneApi) => number)
+  placement: HandlePlacement<N>
+  portal?: HandlePortal
+}
+
+/**
+ * Curved / spiral stair arrows. The drag plane is computed in polar
+ * coordinates around the node's local origin so the descriptor only
+ * needs to declare which polar component changes:
+ *   - 'angular' : sweep — pointer arc-length maps to angle delta
+ *   - 'radial'  : inner radius / width — radial distance maps 1:1
+ *   - 'vertical': rise — pointer Y maps 1:1 to height delta
+ *
+ * `end` distinguishes the start / end sweep handles on curved stairs.
+ */
+export type ArcResizeHandle<N> = {
+  kind: 'arc-resize'
+  axis: 'angular' | 'radial' | 'vertical'
+  end?: 'start' | 'end'
+  currentValue: (node: N) => number
+  apply: (node: N, newValue: number, sceneApi: SceneApi) => Partial<N>
+  min?: number | ((node: N, sceneApi: SceneApi) => number)
+  max?: number | ((node: N, sceneApi: SceneApi) => number)
+  placement: HandlePlacement<N>
+  portal?: HandlePortal
+}
+
+/**
+ * Wall / fence endpoint drag. Snapping and adjacency belong to the kind,
+ * so the descriptor declares the placement and hands the world-space
+ * pointer position back to `apply`. The kind can splice walls, snap to
+ * a grid, merge with a neighbour, etc., and returns the partial patch.
+ */
+export type EndpointMoveHandle<N> = {
+  kind: 'endpoint-move'
+  endpoint: 'start' | 'end'
+  placement: HandlePlacement<N>
+  /** Called with the world-space hit on the ground plane. */
+  apply: (
+    node: N,
+    worldPoint: readonly [number, number, number],
+    sceneApi: SceneApi,
+  ) => Partial<N>
+  portal?: HandlePortal
+}
+
+// Default to `any` so type-erased renderers can hold `HandleDescriptor[]`
+// without each variant's contravariant `currentValue: (node: N) => ...`
+// callback fighting the union widening. Per-kind defs supply a real N.
+export type HandleDescriptor<N = any> =
+  | LinearResizeHandle<N>
+  | RadialResizeHandle<N>
+  | ArcResizeHandle<N>
+  | EndpointMoveHandle<N>
+
+/**
+ * Static array, or a function for shape-dependent cases (column
+ * crossSection / supportStyle, stair-segment segmentType, etc.).
+ */
+export type HandleList<N> = HandleDescriptor<N>[] | ((node: N) => HandleDescriptor<N>[])
diff --git a/packages/core/src/registry/index.ts b/packages/core/src/registry/index.ts
index e71b3b347..9463e8566 100644
--- a/packages/core/src/registry/index.ts
+++ b/packages/core/src/registry/index.ts
@@ -15,6 +15,19 @@ export {
   collectDescendants,
   type SpatialQuery,
 } from './relations-resolver'
+export type {
+  ArcResizeHandle,
+  Cursor,
+  EndpointMoveHandle,
+  HandleAnchor,
+  HandleAxis,
+  HandleDescriptor,
+  HandleList,
+  HandlePlacement,
+  HandlePortal,
+  LinearResizeHandle,
+  RadialResizeHandle,
+} from './handles'
 export { createSceneApi, type SceneStoreLike } from './scene-api'
 export type {
   Affordance,
diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index 0a3dfb2b4..c5a50686f 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -3,6 +3,7 @@ import type { BufferGeometry, Object3D } from 'three'
 import type { ZodObject, z } from 'zod'
 import type { MaterialSchema } from '../schema/material'
 import type { AnyNode, AnyNodeId } from '../schema/types'
+import type { HandleList } from './handles'
 
 // ─── GeometryContext ─────────────────────────────────────────────────
 //
@@ -763,6 +764,24 @@ export type NodeDefinition<S extends ZodObject<any>> = {
    * capability too).
    */
   keyboardActions?: KeyboardActions
+
+  /**
+   * In-world resize / move arrows shown when this kind is selected.
+   *
+   * Pure descriptors — no React, no Three.js. The editor's generic
+   * `<NodeArrowHandles>` reads this list and mounts the matching arrow
+   * components with shared drag plumbing, replacing per-kind
+   * `<XxxSideHandles>` files for the common cases.
+   *
+   * Static array, or a function for shape-dependent affordances
+   * (column `crossSection` / `supportStyle`, stair-segment `segmentType`,
+   * curved-vs-straight stairs). See `./handles.ts` for the variant union.
+   *
+   * Bespoke chrome that doesn't fit the descriptor model (wall corner
+   * leader dashes, fence curving, items with `attachTo`) stays as a
+   * custom React component mounted alongside.
+   */
+  handles?: HandleList<z.infer<S>>
 }
 
 export type NodeCategory = 'site' | 'structure' | 'furnish' | 'analysis' | 'utility'
diff --git a/packages/editor/src/components/editor/door-side-handles.tsx b/packages/editor/src/components/editor/door-side-handles.tsx
deleted file mode 100644
index e0c3c83d0..000000000
--- a/packages/editor/src/components/editor/door-side-handles.tsx
+++ /dev/null
@@ -1,542 +0,0 @@
-'use client'
-
-import {
-  type AnyNodeId,
-  type DoorNode,
-  sceneRegistry,
-  useScene,
-  type WallNode,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import {
-  Color,
-  DoubleSide,
-  ExtrudeGeometry,
-  type Group,
-  type Object3D,
-  OrthographicCamera,
-  Plane,
-  Shape,
-  Vector2,
-  Vector3,
-} from 'three'
-import { MeshBasicNodeMaterial } from 'three/webgpu'
-import { sfxEmitter } from '../../lib/sfx-bus'
-import useEditor from '../../store/use-editor'
-
-const SIDE_HANDLE_OFFSET = 0.24
-const HEIGHT_HANDLE_OFFSET = 0.24
-// Arrows are sized for walls by default; doors are smaller features, so we
-// scale the rendered chevron down to about two-thirds.
-const ARROW_SCALE = 0.65
-const MIN_DOOR_HEIGHT = 0.5
-const MIN_DOOR_WIDTH = 0.3
-const ARROW_COLOR = '#8381ed'
-const ARROW_HOVER_COLOR = '#a5b4fc'
-
-// Pre-empt the synthetic `click` the browser fires immediately after a
-// drag's pointerup. Registered at window-level capture so it runs before
-// the canvas-level PointerMissedHandler — whose "click on empty space ⇒
-// deselect" rule would otherwise eat the door selection at the end of a
-// handle drag. `once: true` makes the listener self-detach; the setTimeout
-// is a failsafe in case no click ever follows.
-function swallowNextClick() {
-  const swallow = (clickEvent: Event) => {
-    clickEvent.stopPropagation()
-    clickEvent.preventDefault()
-  }
-  window.addEventListener('click', swallow, { capture: true, once: true })
-  setTimeout(() => {
-    window.removeEventListener('click', swallow, { capture: true })
-  }, 300)
-}
-
-function createArrowHandleGeometry() {
-  // Same chevron+shaft silhouette used for wall handles, kept local so the
-  // two files stay independent.
-  const shape = new Shape()
-  shape.moveTo(0.22, 0)
-  shape.lineTo(-0.04, 0.12)
-  shape.lineTo(-0.04, 0.035)
-  shape.lineTo(-0.2, 0.035)
-  shape.lineTo(-0.2, -0.035)
-  shape.lineTo(-0.04, -0.035)
-  shape.lineTo(-0.04, -0.12)
-  shape.lineTo(0.22, 0)
-
-  const geometry = new ExtrudeGeometry(shape, {
-    depth: 0.08,
-    bevelEnabled: true,
-    bevelThickness: 0.035,
-    bevelSize: 0.03,
-    bevelOffset: 0,
-    bevelSegments: 10,
-    curveSegments: 16,
-    steps: 1,
-  })
-  geometry.translate(0, 0, -0.04)
-  geometry.rotateX(-Math.PI / 2)
-  geometry.computeVertexNormals()
-  geometry.computeBoundingSphere()
-  return geometry
-}
-
-export function DoorSideHandles() {
-  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 selectedId = selectedIds.length === 1 ? selectedIds[0] : null
-  const selectedDoor = useScene((state) => {
-    const node = selectedId ? state.nodes[selectedId as AnyNodeId] : null
-    return node?.type === 'door' ? node : null
-  })
-
-  const shouldRender =
-    Boolean(selectedDoor) && !isFloorplanHovered && mode !== 'delete' && !movingNode
-
-  if (!shouldRender || !selectedDoor) return null
-  return <DoorSideHandlesForDoor door={selectedDoor} />
-}
-
-function DoorSideHandlesForDoor({ door }: { door: DoorNode }) {
-  // Portal into the LEVEL (the wall's parent), not the wall itself. The
-  // selection/hover outline pass traverses descendants of the hovered
-  // object — if handles were children of the wall mesh they'd get outlined
-  // whenever the wall is hovered. A wrapper group below mirrors the wall's
-  // pose each frame so the handles still ride along with the wall.
-  const wallParentId = useScene((state) => {
-    const wallNode = door.parentId
-      ? (state.nodes[door.parentId as AnyNodeId] as WallNode | undefined)
-      : undefined
-    return wallNode?.parentId ?? null
-  })
-
-  const [wallObject, setWallObject] = useState<Object3D | null>(() =>
-    door.parentId ? (sceneRegistry.nodes.get(door.parentId) ?? null) : null,
-  )
-  const [levelObject, setLevelObject] = useState<Object3D | null>(() =>
-    wallParentId ? (sceneRegistry.nodes.get(wallParentId as AnyNodeId) ?? null) : null,
-  )
-
-  useEffect(() => {
-    let frameId = 0
-    const resolve = () => {
-      const nextWall = door.parentId ? (sceneRegistry.nodes.get(door.parentId) ?? null) : null
-      const nextLevel = wallParentId
-        ? (sceneRegistry.nodes.get(wallParentId as AnyNodeId) ?? null)
-        : null
-      setWallObject((current) => (current === nextWall ? current : nextWall))
-      setLevelObject((current) => (current === nextLevel ? current : nextLevel))
-      if (!nextWall || !nextLevel) frameId = window.requestAnimationFrame(resolve)
-    }
-    resolve()
-    return () => {
-      if (frameId) window.cancelAnimationFrame(frameId)
-    }
-  }, [door.parentId, wallParentId])
-
-  const wrapperRef = useRef<Group>(null)
-
-  // Copy the wall mesh's pose into the wrapper every frame. WallSystem
-  // imperatively writes position/rotation outside React, so a React-side
-  // reactive read would lag during edits.
-  useFrame(() => {
-    const wrapper = wrapperRef.current
-    if (!wrapper || !wallObject) return
-    wrapper.position.copy(wallObject.position)
-    wrapper.quaternion.copy(wallObject.quaternion)
-  })
-
-  if (!levelObject || !wallObject) return null
-
-  const rotation: [number, number, number] =
-    typeof door.rotation === 'number'
-      ? [0, door.rotation, 0]
-      : (door.rotation ?? [0, 0, 0])
-
-  return createPortal(
-    <group ref={wrapperRef}>
-      <group position={door.position} rotation={rotation}>
-        <DoorSideArrow door={door} side="left" wallObject={wallObject} />
-        <DoorSideArrow door={door} side="right" wallObject={wallObject} />
-        <DoorHeightArrowHandle door={door} wallObject={wallObject} />
-      </group>
-    </group>,
-    levelObject,
-  )
-}
-
-function DoorSideArrow({
-  door,
-  side,
-  wallObject,
-}: {
-  door: DoorNode
-  side: 'left' | 'right'
-  wallObject: Object3D
-}) {
-  const [isHovered, setIsHovered] = useState(false)
-  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
-  const arrowMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        depthTest: false,
-        depthWrite: false,
-        transparent: true,
-        opacity: 1,
-      }),
-    [],
-  )
-  const { camera, raycaster, gl } = useThree()
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
-  const dragCleanupRef = useRef<(() => void) | null>(null)
-
-  useEffect(() => {
-    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [arrowMaterial, isHovered])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'ew-resize') {
-        document.body.style.cursor = ''
-      }
-      dragCleanupRef.current?.()
-    }
-  }, [])
-
-  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
-  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
-
-  const activateWidthResize = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-
-    // Door center in world space. The raycast plane is vertical, normal
-    // pointed at the camera through the door — same setup as the height
-    // arrow, but here we read the pointer's wall-local X to derive width
-    // rather than Y to derive height.
-    wallObject.updateMatrixWorld()
-    const centerWorld = new Vector3(door.position[0], door.position[1], door.position[2])
-    centerWorld.applyMatrix4(wallObject.matrixWorld)
-
-    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
-    if (planeNormal.lengthSq() === 0) return
-    planeNormal.normalize()
-    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
-
-    const ndc = new Vector2()
-    const setNDC = (clientX: number, clientY: number) => {
-      const rect = gl.domElement.getBoundingClientRect()
-      ndc.set(
-        ((clientX - rect.left) / rect.width) * 2 - 1,
-        -((clientY - rect.top) / rect.height) * 2 + 1,
-      )
-    }
-
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hitWorld = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
-    const hitLocal = wallObject.worldToLocal(hitWorld.clone())
-
-    const initialWidth = door.width
-    const initialPositionX = door.position[0]
-    const initialPositionZ = door.position[2]
-    const rotY =
-      typeof door.rotation === 'number'
-        ? door.rotation
-        : (door.rotation?.[1] ?? 0)
-    // Door-local +X expressed in wall-local: rotating (1,0,0) by rotY around Y.
-    const armX = Math.cos(rotY)
-    const armZ = -Math.sin(rotY)
-    // sign === +1 grows the door from the door-local right edge (left edge
-    // anchored), sign === -1 grows from the left edge (right edge anchored).
-    const sign = side === 'right' ? 1 : -1
-    const initialPointerX = hitLocal.x
-    const initialPointerZ = hitLocal.z
-
-    const wallNode = door.wallId
-      ? (useScene.getState().nodes[door.wallId as AnyNodeId] as WallNode | undefined)
-      : undefined
-    const wallLength = wallNode
-      ? Math.hypot(
-          wallNode.end[0] - wallNode.start[0],
-          wallNode.end[1] - wallNode.start[1],
-        )
-      : Number.POSITIVE_INFINITY
-
-    // The anchor (opposite edge) stays fixed in wall-local space. Its
-    // wall-local X position determines how much room is left for the door
-    // to grow without spilling off the wall.
-    const anchorWallX = initialPositionX - sign * (initialWidth / 2) * armX
-    const headroomRight = Math.max(0, wallLength - anchorWallX)
-    const headroomLeft = Math.max(0, anchorWallX)
-    // For typical axis-aligned doors (|armX| === 1), `sign * armX` is ±1
-    // and the grow direction in wall-local X matches the visible direction.
-    // Fall back to the larger headroom for non-axis-aligned cases.
-    const growDir = sign * armX
-    const headroomAlongArm =
-      growDir > 0 ? headroomRight : growDir < 0 ? headroomLeft : Math.max(headroomLeft, headroomRight)
-    const maxWidth = Math.max(MIN_DOOR_WIDTH, headroomAlongArm)
-
-    document.body.style.cursor = 'ew-resize'
-    sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setResizingDoorWidth(door)
-    // Suppress R3F node pointer events until pointerup completes; without
-    // this, the pointerup at the end of the drag synthesizes a click on
-    // whatever wall/mesh is under the cursor and re-selects it.
-    useViewer.getState().setHandleDragging(true)
-    useScene.temporal.getState().pause()
-
-    const doorId = door.id as AnyNodeId
-
-    const onMove = (e: PointerEvent) => {
-      setNDC(e.clientX, e.clientY)
-      raycaster.setFromCamera(ndc, camera)
-      const intersectionWorld = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, intersectionWorld)) return
-      const intersectionLocal = wallObject.worldToLocal(intersectionWorld.clone())
-      const dx = intersectionLocal.x - initialPointerX
-      const dz = intersectionLocal.z - initialPointerZ
-      // Project pointer delta onto door-local +X (in wall-local), then sign
-      // it so dragging the arrow outward always grows the door.
-      const armDelta = dx * armX + dz * armZ
-      const widthDelta = sign * armDelta
-      const newWidth = Math.min(maxWidth, Math.max(MIN_DOOR_WIDTH, initialWidth + widthDelta))
-      const half = (newWidth - initialWidth) / 2
-      const newPositionX = initialPositionX + sign * half * armX
-      const newPositionZ = initialPositionZ + sign * half * armZ
-      useScene.getState().updateNode(doorId, {
-        width: newWidth,
-        position: [newPositionX, door.position[1], newPositionZ],
-      })
-    }
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      window.removeEventListener('pointercancel', onCancel)
-      if (document.body.style.cursor === 'ew-resize') {
-        document.body.style.cursor = ''
-      }
-      useScene.temporal.getState().resume()
-      useEditor.getState().setResizingDoorWidth(null)
-      useViewer.getState().setHandleDragging(false)
-      dragCleanupRef.current = null
-    }
-    const onUp = () => {
-      // Swallow the synthetic `click` the browser fires right after this
-      // pointerup. PointerMissedHandler would otherwise treat it as an
-      // empty-canvas click and deselect the door. A window-level capture
-      // listener pre-empts the canvas listener before it can run.
-      swallowNextClick()
-      sfxEmitter.emit('sfx:item-place')
-      cleanup()
-    }
-    const onCancel = () => cleanup()
-
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
-  }
-
-  const direction = side === 'right' ? 1 : -1
-  const x = direction * (door.width / 2 + SIDE_HANDLE_OFFSET)
-  const rotationY = side === 'right' ? 0 : Math.PI
-
-  return (
-    <group position={[x, 0, 0]} rotation={[0, rotationY, 0]} scale={scale}>
-      <mesh
-        // Same WebGPU "Vertex buffer slot 0" workaround as WallMoveArrowHandle:
-        // pass geometry as a prop + disable frustum culling.
-        frustumCulled={false}
-        geometry={arrowGeometry}
-        material={arrowMaterial}
-        onPointerDown={activateWidthResize}
-        onPointerEnter={(event) => {
-          event.stopPropagation()
-          setIsHovered(true)
-          document.body.style.cursor = 'ew-resize'
-        }}
-        onPointerLeave={(event) => {
-          event.stopPropagation()
-          setIsHovered(false)
-          if (document.body.style.cursor === 'ew-resize') {
-            document.body.style.cursor = ''
-          }
-        }}
-        renderOrder={1010}
-      />
-    </group>
-  )
-}
-
-function DoorHeightArrowHandle({
-  door,
-  wallObject,
-}: {
-  door: DoorNode
-  wallObject: Object3D
-}) {
-  const [isHovered, setIsHovered] = useState(false)
-  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
-  const arrowMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        depthTest: false,
-        depthWrite: false,
-        transparent: true,
-        opacity: 1,
-      }),
-    [],
-  )
-  const { camera, raycaster, gl } = useThree()
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
-  const dragCleanupRef = useRef<(() => void) | null>(null)
-
-  useEffect(() => {
-    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [arrowMaterial, isHovered])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'ns-resize') {
-        document.body.style.cursor = ''
-      }
-      dragCleanupRef.current?.()
-    }
-  }, [])
-
-  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
-  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
-
-  const handleY = door.height / 2 + HEIGHT_HANDLE_OFFSET
-
-  const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-
-    // Door center in world space. Wall mesh only rotates around Y, so a
-    // vertical raycast plane through that point maps pointer Y to door Y
-    // 1:1 — no extra wall-rotation bookkeeping needed.
-    wallObject.updateMatrixWorld()
-    const centerWorld = new Vector3(door.position[0], door.position[1], door.position[2])
-    centerWorld.applyMatrix4(wallObject.matrixWorld)
-
-    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
-    if (planeNormal.lengthSq() === 0) return
-    planeNormal.normalize()
-    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
-
-    const ndc = new Vector2()
-    const setNDC = (clientX: number, clientY: number) => {
-      const rect = gl.domElement.getBoundingClientRect()
-      ndc.set(
-        ((clientX - rect.left) / rect.width) * 2 - 1,
-        -((clientY - rect.top) / rect.height) * 2 + 1,
-      )
-    }
-
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hit = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hit)) return
-
-    const initialHeight = door.height
-    const initialPositionY = door.position[1]
-    // Bottom of the door in wall-local Y. Most doors sit on the floor
-    // (bottom = 0), but lifted openings preserve their bottom by anchoring
-    // the resize there.
-    const bottomLocalY = initialPositionY - initialHeight / 2
-    const initialPointerY = hit.y
-    const doorId = door.id as AnyNodeId
-    const wallNode = door.wallId
-      ? (useScene.getState().nodes[door.wallId as AnyNodeId] as WallNode | undefined)
-      : undefined
-    const maxHeightCap = wallNode?.height ?? Number.POSITIVE_INFINITY
-    const maxHeight = Math.max(MIN_DOOR_HEIGHT, maxHeightCap - bottomLocalY)
-
-    document.body.style.cursor = 'ns-resize'
-    sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setResizingDoorHeight(door)
-    useViewer.getState().setHandleDragging(true)
-    useScene.temporal.getState().pause()
-
-    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 delta = intersection.y - initialPointerY
-      const newHeight = Math.min(
-        maxHeight,
-        Math.max(MIN_DOOR_HEIGHT, initialHeight + delta),
-      )
-      const newPositionY = bottomLocalY + newHeight / 2
-      useScene.getState().updateNode(doorId, {
-        height: newHeight,
-        position: [door.position[0], newPositionY, door.position[2]],
-      })
-    }
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      window.removeEventListener('pointercancel', onCancel)
-      if (document.body.style.cursor === 'ns-resize') {
-        document.body.style.cursor = ''
-      }
-      useScene.temporal.getState().resume()
-      useEditor.getState().setResizingDoorHeight(null)
-      useViewer.getState().setHandleDragging(false)
-      dragCleanupRef.current = null
-    }
-    const onUp = () => {
-      swallowNextClick()
-      sfxEmitter.emit('sfx:item-place')
-      cleanup()
-    }
-    const onCancel = () => cleanup()
-
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
-  }
-
-  return (
-    <group position={[0, handleY, 0]}>
-      <group rotation={[0, Math.PI / 2, Math.PI / 2]} scale={scale}>
-        <mesh
-          frustumCulled={false}
-          geometry={arrowGeometry}
-          material={arrowMaterial}
-          onPointerDown={activateHeightResize}
-          onPointerEnter={(event) => {
-            event.stopPropagation()
-            setIsHovered(true)
-            document.body.style.cursor = 'ns-resize'
-          }}
-          onPointerLeave={(event) => {
-            event.stopPropagation()
-            setIsHovered(false)
-            if (document.body.style.cursor === 'ns-resize') {
-              document.body.style.cursor = ''
-            }
-          }}
-          renderOrder={1010}
-        />
-      </group>
-    </group>
-  )
-}
-
diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index 1449b1c36..90ac81bf2 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -64,6 +64,30 @@ const MAX_MENU_SCALE = 1
 const REF_ORTHO_ZOOM = 20
 const REF_CAMERA_DISTANCE = 12
 
+// World-space Y distance from a node's bbox top to the floating menu anchor.
+// Per-type because in-world chrome above the node (height-resize arrows,
+// measurement labels) varies in vertical reach.
+const MENU_Y_OFFSET_DEFAULT = 0.3
+const MENU_Y_OFFSETS: Record<string, number> = {
+  wall: 0.5,
+  door: 0.6,
+  window: 0.6,
+  column: 0.6,
+  stair: 0.2,
+  'stair-flight': 0.75,
+  'stair-landing': 0.5,
+  slab: 0.4,
+  ceiling: 0.4,
+}
+
+function getMenuYOffset(node: AnyNode | null): number {
+  if (!node) return MENU_Y_OFFSET_DEFAULT
+  if (node.type === 'stair-segment') {
+    return MENU_Y_OFFSETS[`stair-${node.segmentType}`] ?? MENU_Y_OFFSET_DEFAULT
+  }
+  return MENU_Y_OFFSETS[node.type] ?? MENU_Y_OFFSET_DEFAULT
+}
+
 export function FloatingActionMenu() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const updateNode = useScene((s) => s.updateNode)
@@ -166,31 +190,9 @@ export function FloatingActionMenu() {
       const box = new THREE.Box3().setFromObject(obj)
       if (!box.isEmpty()) {
         const center = box.getCenter(new THREE.Vector3())
-        // Position above the object. Walls get extra clearance so the menu
-        // sits above the height-resize arrow; slabs/ceilings clear their
-        // measurement labels.
-        const isStructural = node && [...DELETE_ONLY_TYPES, ...HOLE_TYPES].includes(node.type)
-        const isWall = node?.type === 'wall'
-        const isOpening = node?.type === 'door' || node?.type === 'window'
-        const isLandingSegment =
-          node?.type === 'stair-segment' && node.segmentType === 'landing'
-        const isFlightSegment =
-          node?.type === 'stair-segment' && node.segmentType === 'stair'
-        const isParentStair = node?.type === 'stair'
-        const yOffset = isWall
-          ? 0.5
-          : isOpening
-            ? 0.6
-            : isLandingSegment
-              ? 0.5
-              : isFlightSegment
-                ? 0.75
-                : isParentStair
-                  ? 0.2
-                  : isStructural
-                    ? 0.4
-                    : 0.05
-        groupRef.current.position.set(center.x, box.max.y + yOffset, center.z)
+        // Position above the object. Per-type offsets clear each kind's
+        // in-world chrome (height-resize arrows, measurement labels).
+        groupRef.current.position.set(center.x, box.max.y + getMenuYOffset(node), center.z)
       }
 
       if (node?.type === 'fence') {
@@ -236,6 +238,16 @@ export function FloatingActionMenu() {
     },
     [canCurveSelectedWall, node, setCurvingFence, setCurvingWall, setSelection],
   )
+  const handleMove = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (!node) return
+      sfxEmitter.emit('sfx:item-pick')
+      setMovingNode(node as any)
+      setSelection({ selectedIds: [] })
+    },
+    [node, setMovingNode, setSelection],
+  )
   const handleEndpointMove = useCallback(
     (endpoint: 'start' | 'end', e: { stopPropagation: () => void }) => {
       e.stopPropagation()
@@ -481,6 +493,7 @@ export function FloatingActionMenu() {
                   ? handleCurve
                   : undefined
               }
+              onMove={node?.type === 'column' ? handleMove : undefined}
               onDelete={handleDelete}
               onDuplicate={
                 node &&
diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index 3dda700ba..527d96c21 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -54,7 +54,6 @@ import { SettingsPanel, type SettingsPanelProps } from '../ui/sidebar/panels/set
 import { SitePanel, type SitePanelProps } from '../ui/sidebar/panels/site-panel'
 import type { SidebarTab } from '../ui/sidebar/tab-bar'
 import { CustomCameraControls } from './custom-camera-controls'
-import { DoorSideHandles } from './door-side-handles'
 import { EditorLayoutV2 } from './editor-layout-v2'
 import { ExportManager } from './export-manager'
 import { FirstPersonControls, FirstPersonOverlay } from './first-person-controls'
@@ -63,14 +62,14 @@ import { FloatingBuildingActionMenu } from './floating-building-action-menu'
 import { FloorplanPanel } from './floorplan-panel'
 import { Grid } from './grid'
 import { PresetThumbnailGenerator } from './preset-thumbnail-generator'
+import { NodeArrowHandles } from './node-arrow-handles'
 import { SelectionManager } from './selection-manager'
 import { SiteEdgeLabels } from './site-edge-labels'
 import { SnapshotCaptureOverlay } from './snapshot-capture-overlay'
-import { StairHandles, StairSegmentHandles } from './stair-segment-handles'
+import { StairHandles } from './stair-segment-handles'
 import { type SnapshotCameraData, ThumbnailGenerator } from './thumbnail-generator'
 import { WallMeasurementLabel } from './wall-measurement-label'
 import { WallMoveSideHandles } from './wall-move-side-handles'
-import { WindowSideHandles } from './window-side-handles'
 
 const CAMERA_CONTROLS_HINT_DISMISSED_STORAGE_KEY = 'editor-camera-controls-hint-dismissed:v1'
 const DELETE_CURSOR_BADGE_COLOR = '#ef4444'
@@ -602,9 +601,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       {!isFirstPersonMode && <SelectionManager />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <BoxSelectTool />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <WallMoveSideHandles />}
-      {!(isVersionPreviewMode || isFirstPersonMode) && <DoorSideHandles />}
-      {!(isVersionPreviewMode || isFirstPersonMode) && <WindowSideHandles />}
-      {!(isVersionPreviewMode || isFirstPersonMode) && <StairSegmentHandles />}
+      {!(isVersionPreviewMode || isFirstPersonMode) && <NodeArrowHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <StairHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingActionMenu />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingBuildingActionMenu />}
diff --git a/packages/editor/src/components/editor/node-arrow-handles.tsx b/packages/editor/src/components/editor/node-arrow-handles.tsx
new file mode 100644
index 000000000..cf620ac3b
--- /dev/null
+++ b/packages/editor/src/components/editor/node-arrow-handles.tsx
@@ -0,0 +1,448 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type Cursor,
+  createSceneApi,
+  type HandleDescriptor,
+  type HandlePortal,
+  type LinearResizeHandle,
+  nodeRegistry,
+  type RadialResizeHandle,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  Color,
+  DoubleSide,
+  ExtrudeGeometry,
+  type Group,
+  type Object3D,
+  OrthographicCamera,
+  Plane,
+  Shape,
+  Vector2,
+  Vector3,
+} from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { sfxEmitter } from '../../lib/sfx-bus'
+import useEditor from '../../store/use-editor'
+
+const ARROW_SCALE = 0.65
+const ARROW_COLOR = '#8381ed'
+const ARROW_HOVER_COLOR = '#a5b4fc'
+
+// Reused chevron+shaft silhouette — matches every other handle file. The
+// chevron points along +X by default; descriptors with `axis: 'z'` rotate
+// it around Y, and `axis: 'y'` rotates so it points up.
+function createArrowHandleGeometry() {
+  const shape = new Shape()
+  shape.moveTo(0.22, 0)
+  shape.lineTo(-0.04, 0.12)
+  shape.lineTo(-0.04, 0.035)
+  shape.lineTo(-0.2, 0.035)
+  shape.lineTo(-0.2, -0.035)
+  shape.lineTo(-0.04, -0.035)
+  shape.lineTo(-0.04, -0.12)
+  shape.lineTo(0.22, 0)
+  const geometry = new ExtrudeGeometry(shape, {
+    depth: 0.08,
+    bevelEnabled: true,
+    bevelThickness: 0.035,
+    bevelSize: 0.03,
+    bevelOffset: 0,
+    bevelSegments: 10,
+    curveSegments: 16,
+    steps: 1,
+  })
+  geometry.translate(0, 0, -0.04)
+  geometry.rotateX(-Math.PI / 2)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
+
+function swallowNextClick() {
+  const swallow = (clickEvent: Event) => {
+    clickEvent.stopPropagation()
+    clickEvent.preventDefault()
+  }
+  window.addEventListener('click', swallow, { capture: true, once: true })
+  setTimeout(() => {
+    window.removeEventListener('click', swallow, { capture: true })
+  }, 300)
+}
+
+export function NodeArrowHandles() {
+  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 selectedId = selectedIds.length === 1 ? selectedIds[0] : null
+  const node = useScene((state) =>
+    selectedId ? (state.nodes[selectedId as AnyNodeId] ?? null) : null,
+  )
+
+  const def = node ? nodeRegistry.get(node.type) : null
+  const descriptors = useMemo(() => {
+    if (!(node && def?.handles)) return null
+    return typeof def.handles === 'function'
+      ? def.handles(node as never)
+      : (def.handles as HandleDescriptor[])
+  }, [node, def])
+
+  const shouldRender =
+    Boolean(node && descriptors?.length) &&
+    !isFloorplanHovered &&
+    mode !== 'delete' &&
+    !movingNode
+
+  if (!shouldRender || !node || !descriptors) return null
+  return <NodeArrowHandlesForNode descriptors={descriptors} node={node} />
+}
+
+// Resolves the portal target + ride mesh chain. Descriptor-level `portal`
+// toggles between two layout patterns; descriptor placement is *always* in
+// the selected node's local frame regardless of mode.
+//
+//  - 'parent' (default): mount inside the selected node's parent mesh.
+//    The wrapper mirrors the node's own local pose, so handles live in
+//    node-local coords directly. No inner group. Used by columns / walls
+//    / anything where the node IS the thing the user selected and whose
+//    rotation should drive the handle frame.
+//  - 'grandparent': mount inside the grandparent mesh (to escape the
+//    parent's selection-outline traversal). The wrapper mirrors the
+//    parent mesh's local pose; a nested inner group mirrors the node's
+//    own local pose. Handles end up in node-local coords. Used by doors /
+//    windows — handles need to ride the wall's rotation but not be
+//    children of the wall mesh.
+function NodeArrowHandlesForNode({
+  node,
+  descriptors,
+}: {
+  node: AnyNode
+  descriptors: HandleDescriptor[]
+}) {
+  const parentId = node.parentId ?? null
+  const grandparentId = useScene((state) => {
+    if (!parentId) return null
+    const parent = state.nodes[parentId as AnyNodeId]
+    return parent?.parentId ?? null
+  })
+
+  const portalMode: HandlePortal = descriptors.some((d) => d.portal === 'grandparent')
+    ? 'grandparent'
+    : 'parent'
+
+  // Portal target: the mesh we createPortal into.
+  const portalTargetId = portalMode === 'grandparent' ? grandparentId : parentId
+  // Outer wrapper mirrors this mesh's local pose. For 'parent' mode the
+  // outer IS the node (so handles + drag math both live in node-local).
+  // For 'grandparent' the outer rides the parent and an inner group adds
+  // the node's own pose.
+  const outerRideId = portalMode === 'grandparent' ? parentId : (node.id as AnyNodeId)
+  const innerRideId = portalMode === 'grandparent' ? (node.id as AnyNodeId) : null
+
+  const [portalObject, setPortalObject] = useState<Object3D | null>(() =>
+    portalTargetId ? (sceneRegistry.nodes.get(portalTargetId as AnyNodeId) ?? null) : null,
+  )
+  const [outerRide, setOuterRide] = useState<Object3D | null>(() =>
+    outerRideId ? (sceneRegistry.nodes.get(outerRideId as AnyNodeId) ?? null) : null,
+  )
+  const [innerRide, setInnerRide] = useState<Object3D | null>(() =>
+    innerRideId ? (sceneRegistry.nodes.get(innerRideId as AnyNodeId) ?? null) : null,
+  )
+
+  useEffect(() => {
+    let frameId = 0
+    const resolve = () => {
+      const nextPortal = portalTargetId
+        ? (sceneRegistry.nodes.get(portalTargetId as AnyNodeId) ?? null)
+        : null
+      const nextOuter = outerRideId
+        ? (sceneRegistry.nodes.get(outerRideId as AnyNodeId) ?? null)
+        : null
+      const nextInner = innerRideId
+        ? (sceneRegistry.nodes.get(innerRideId as AnyNodeId) ?? null)
+        : null
+      setPortalObject((cur) => (cur === nextPortal ? cur : nextPortal))
+      setOuterRide((cur) => (cur === nextOuter ? cur : nextOuter))
+      setInnerRide((cur) => (cur === nextInner ? cur : nextInner))
+      // Inner ride is optional ('parent' mode skips it).
+      const needInner = innerRideId !== null
+      if (!nextPortal || !nextOuter || (needInner && !nextInner)) {
+        frameId = window.requestAnimationFrame(resolve)
+      }
+    }
+    resolve()
+    return () => {
+      if (frameId) window.cancelAnimationFrame(frameId)
+    }
+  }, [portalTargetId, outerRideId, innerRideId])
+
+  const outerRef = useRef<Group>(null)
+  const innerRef = useRef<Group>(null)
+
+  useFrame(() => {
+    if (outerRef.current && outerRide) {
+      outerRef.current.position.copy(outerRide.position)
+      outerRef.current.quaternion.copy(outerRide.quaternion)
+    }
+    if (innerRef.current && innerRide) {
+      innerRef.current.position.copy(innerRide.position)
+      innerRef.current.quaternion.copy(innerRide.quaternion)
+    }
+  })
+
+  if (!portalObject || !outerRide || (innerRideId !== null && !innerRide)) return null
+
+  // `arrowFrame` is the Object3D used as the spatial reference for the
+  // per-arrow drag math — its world matrix maps node-local coords to
+  // world. In 'parent' mode that's the outer ride (= the node mesh
+  // itself). In 'grandparent' mode it's the inner ride (= the node mesh)
+  // because the inner group mirrors the node's local pose under the
+  // wall-riding outer wrapper.
+  const arrowFrame = innerRide ?? outerRide
+
+  const arrows = descriptors.map((descriptor, index) => (
+    <ArrowHandle
+      descriptor={descriptor}
+      // Descriptors come from a per-node-kind static list, so index is a
+      // stable identity within this node's selection cycle.
+      key={index}
+      node={node}
+      rideObject={arrowFrame}
+    />
+  ))
+
+  return createPortal(
+    <group ref={outerRef}>
+      {innerRideId !== null ? <group ref={innerRef}>{arrows}</group> : arrows}
+    </group>,
+    portalObject,
+  )
+}
+
+function ArrowHandle({
+  descriptor,
+  node,
+  rideObject,
+}: {
+  descriptor: HandleDescriptor
+  node: AnyNode
+  rideObject: Object3D
+}) {
+  if (descriptor.kind === 'linear-resize' || descriptor.kind === 'radial-resize') {
+    return <LinearArrow descriptor={descriptor} node={node} rideObject={rideObject} />
+  }
+  // arc-resize / endpoint-move land here once their renderers are written.
+  return null
+}
+
+function useArrowMaterial(): MeshBasicNodeMaterial {
+  return useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true,
+        opacity: 1,
+      }),
+    [],
+  )
+}
+
+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'
+}
+
+function resolveBound(
+  bound: number | ((node: AnyNode, sceneApi: ReturnType<typeof createSceneApi>) => number) | undefined,
+  fallback: number,
+  node: AnyNode,
+  sceneApi: ReturnType<typeof createSceneApi>,
+): number {
+  if (bound === undefined) return fallback
+  return typeof bound === 'function' ? bound(node, sceneApi) : bound
+}
+
+function LinearArrow({
+  descriptor,
+  node,
+  rideObject,
+}: {
+  descriptor: LinearResizeHandle<AnyNode> | RadialResizeHandle<AnyNode>
+  node: AnyNode
+  rideObject: Object3D
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const arrowMaterial = useArrowMaterial()
+  const { camera, raycaster, gl } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [arrowMaterial, isHovered])
+  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
+  useEffect(() => () => dragCleanupRef.current?.(), [])
+
+  const cursor = pickCursor(descriptor)
+  const position = descriptor.placement.position(node)
+  const baseRotationY = descriptor.placement.rotationY?.(node) ?? 0
+  // Default chevron points +X. Rotate around Y to face the chosen axis.
+  const axisRotationY = descriptor.axis === 'z' ? -Math.PI / 2 : 0
+  // For axis === 'y' we orient the chevron up. Z-rotation by π/2 then
+  // Y-rotation chains via the parent <group> below.
+  const rotationY = baseRotationY + axisRotationY
+
+  const activate = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+
+    // Raycast plane at the handle's world position, perpendicular to the
+    // camera's projected horizontal direction. For axis='y' we need the
+    // plane to be vertical too — projection.y maps directly.
+    rideObject.updateMatrixWorld()
+    const worldOrigin = new Vector3(...position).applyMatrix4(rideObject.matrixWorld)
+    const planeNormal = new Vector3().subVectors(camera.position, worldOrigin).setY(0)
+    if (planeNormal.lengthSq() === 0) return
+    planeNormal.normalize()
+    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, worldOrigin)
+
+    const ndc = new Vector2()
+    const setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hitWorld = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
+    const hitLocal = rideObject.worldToLocal(hitWorld.clone())
+
+    // Capture node + initial value at drag start so `apply` can reference
+    // pre-drag state (e.g. door right-width anchors the LEFT edge at
+    // `initial.position[0] - initial.width/2` — using the live node would
+    // drift as width updates each frame).
+    const nodeId = node.id as AnyNodeId
+    const sceneApi = createSceneApi(useScene)
+    const initialNode = (sceneApi.get(nodeId) ?? node) as AnyNode
+    const initialValue = descriptor.currentValue(initialNode)
+    const initialPointer =
+      descriptor.axis === 'x' ? hitLocal.x : descriptor.axis === 'y' ? hitLocal.y : hitLocal.z
+
+    const minBound = resolveBound(descriptor.min, Number.NEGATIVE_INFINITY, initialNode, sceneApi)
+    const maxBound = resolveBound(descriptor.max, Number.POSITIVE_INFINITY, initialNode, sceneApi)
+
+    // Anchor factor maps pointer delta to value delta:
+    //   center: ×2 (both edges move ±delta, total span grows by 2·delta)
+    //   min:    ×1 ( +axis edge moves with pointer; -axis edge anchored)
+    //   max:    ×−1 (-axis edge moves with pointer; +axis edge anchored)
+    //   radial: ×1 (the visible edge follows the pointer 1:1)
+    const factor =
+      descriptor.kind === 'radial-resize'
+        ? 1
+        : descriptor.anchor === 'center'
+          ? 2
+          : descriptor.anchor === 'min'
+            ? 1
+            : -1
+
+    document.body.style.cursor = cursor
+    sfxEmitter.emit('sfx:item-pick')
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    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 intersectionLocal = rideObject.worldToLocal(intersection.clone())
+      const currentPointer =
+        descriptor.axis === 'x'
+          ? intersectionLocal.x
+          : descriptor.axis === 'y'
+            ? intersectionLocal.y
+            : intersectionLocal.z
+      const delta = currentPointer - initialPointer
+      const next = Math.min(
+        maxBound,
+        Math.max(minBound, initialValue + delta * factor),
+      )
+      // apply sees the node-at-drag-start so it can compute anchors from
+      // pre-drag geometry (door-width re-centers on the opposite edge).
+      const patch = descriptor.apply(initialNode as never, next, sceneApi)
+      sceneApi.update(nodeId, patch as Partial<AnyNode>)
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === cursor) {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+    dragCleanupRef.current = cleanup
+
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  // For axis === 'y' (vertical handles), tilt the chevron up via local
+  // X+Z rotation chain matching DoorHeightArrowHandle.
+  const innerRotation: [number, number, number] =
+    descriptor.axis === 'y' ? [0, Math.PI / 2, Math.PI / 2] : [0, 0, 0]
+
+  return (
+    <group position={position} rotation={[0, rotationY, 0]}>
+      <group rotation={innerRotation} scale={scale}>
+        <mesh
+          frustumCulled={false}
+          geometry={arrowGeometry}
+          material={arrowMaterial}
+          onPointerDown={activate}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setIsHovered(true)
+            document.body.style.cursor = cursor
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setIsHovered(false)
+            if (document.body.style.cursor === cursor) {
+              document.body.style.cursor = ''
+            }
+          }}
+          renderOrder={1010}
+        />
+      </group>
+    </group>
+  )
+}
diff --git a/packages/editor/src/components/editor/window-side-handles.tsx b/packages/editor/src/components/editor/window-side-handles.tsx
deleted file mode 100644
index cc79a1dc1..000000000
--- a/packages/editor/src/components/editor/window-side-handles.tsx
+++ /dev/null
@@ -1,540 +0,0 @@
-'use client'
-
-import {
-  type AnyNodeId,
-  sceneRegistry,
-  useScene,
-  type WallNode,
-  type WindowNode,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import {
-  Color,
-  DoubleSide,
-  ExtrudeGeometry,
-  type Group,
-  type Object3D,
-  OrthographicCamera,
-  Plane,
-  Shape,
-  Vector2,
-  Vector3,
-} from 'three'
-import { MeshBasicNodeMaterial } from 'three/webgpu'
-import { sfxEmitter } from '../../lib/sfx-bus'
-import useEditor from '../../store/use-editor'
-
-const SIDE_HANDLE_OFFSET = 0.24
-const HEIGHT_HANDLE_OFFSET = 0.24
-// Match the door arrow scale so the in-world chrome reads as one family.
-const ARROW_SCALE = 0.65
-const MIN_WINDOW_HEIGHT = 0.3
-const MIN_WINDOW_WIDTH = 0.3
-const ARROW_COLOR = '#8381ed'
-const ARROW_HOVER_COLOR = '#a5b4fc'
-
-// Mirror of door-side-handles `swallowNextClick`: pre-empt the synthetic
-// `click` the browser fires immediately after a drag's pointerup, so the
-// canvas-level PointerMissedHandler doesn't see "click on empty space" and
-// deselect the window the user just resized.
-function swallowNextClick() {
-  const swallow = (clickEvent: Event) => {
-    clickEvent.stopPropagation()
-    clickEvent.preventDefault()
-  }
-  window.addEventListener('click', swallow, { capture: true, once: true })
-  setTimeout(() => {
-    window.removeEventListener('click', swallow, { capture: true })
-  }, 300)
-}
-
-function createArrowHandleGeometry() {
-  // Same chevron+shaft silhouette used for wall and door handles, kept
-  // local so each handle file stays independent.
-  const shape = new Shape()
-  shape.moveTo(0.22, 0)
-  shape.lineTo(-0.04, 0.12)
-  shape.lineTo(-0.04, 0.035)
-  shape.lineTo(-0.2, 0.035)
-  shape.lineTo(-0.2, -0.035)
-  shape.lineTo(-0.04, -0.035)
-  shape.lineTo(-0.04, -0.12)
-  shape.lineTo(0.22, 0)
-
-  const geometry = new ExtrudeGeometry(shape, {
-    depth: 0.08,
-    bevelEnabled: true,
-    bevelThickness: 0.035,
-    bevelSize: 0.03,
-    bevelOffset: 0,
-    bevelSegments: 10,
-    curveSegments: 16,
-    steps: 1,
-  })
-  geometry.translate(0, 0, -0.04)
-  geometry.rotateX(-Math.PI / 2)
-  geometry.computeVertexNormals()
-  geometry.computeBoundingSphere()
-  return geometry
-}
-
-export function WindowSideHandles() {
-  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 selectedId = selectedIds.length === 1 ? selectedIds[0] : null
-  const selectedWindow = useScene((state) => {
-    const node = selectedId ? state.nodes[selectedId as AnyNodeId] : null
-    return node?.type === 'window' ? node : null
-  })
-
-  const shouldRender =
-    Boolean(selectedWindow) && !isFloorplanHovered && mode !== 'delete' && !movingNode
-
-  if (!shouldRender || !selectedWindow) return null
-  return <WindowSideHandlesForWindow windowNode={selectedWindow} />
-}
-
-function WindowSideHandlesForWindow({ windowNode }: { windowNode: WindowNode }) {
-  // Same portal-into-the-level pattern as DoorSideHandles: parenting handles
-  // under the wall mesh would make them part of the selection/hover outline
-  // pass. A wrapper group below mirrors the wall's pose each frame.
-  const wallParentId = useScene((state) => {
-    const wallNode = windowNode.parentId
-      ? (state.nodes[windowNode.parentId as AnyNodeId] as WallNode | undefined)
-      : undefined
-    return wallNode?.parentId ?? null
-  })
-
-  const [wallObject, setWallObject] = useState<Object3D | null>(() =>
-    windowNode.parentId ? (sceneRegistry.nodes.get(windowNode.parentId) ?? null) : null,
-  )
-  const [levelObject, setLevelObject] = useState<Object3D | null>(() =>
-    wallParentId ? (sceneRegistry.nodes.get(wallParentId as AnyNodeId) ?? null) : null,
-  )
-
-  useEffect(() => {
-    let frameId = 0
-    const resolve = () => {
-      const nextWall = windowNode.parentId
-        ? (sceneRegistry.nodes.get(windowNode.parentId) ?? null)
-        : null
-      const nextLevel = wallParentId
-        ? (sceneRegistry.nodes.get(wallParentId as AnyNodeId) ?? null)
-        : null
-      setWallObject((current) => (current === nextWall ? current : nextWall))
-      setLevelObject((current) => (current === nextLevel ? current : nextLevel))
-      if (!nextWall || !nextLevel) frameId = window.requestAnimationFrame(resolve)
-    }
-    resolve()
-    return () => {
-      if (frameId) window.cancelAnimationFrame(frameId)
-    }
-  }, [windowNode.parentId, wallParentId])
-
-  const wrapperRef = useRef<Group>(null)
-
-  useFrame(() => {
-    const wrapper = wrapperRef.current
-    if (!wrapper || !wallObject) return
-    wrapper.position.copy(wallObject.position)
-    wrapper.quaternion.copy(wallObject.quaternion)
-  })
-
-  if (!levelObject || !wallObject) return null
-
-  const rotation: [number, number, number] =
-    typeof windowNode.rotation === 'number'
-      ? [0, windowNode.rotation, 0]
-      : (windowNode.rotation ?? [0, 0, 0])
-
-  return createPortal(
-    <group ref={wrapperRef}>
-      <group position={windowNode.position} rotation={rotation}>
-        <WindowSideArrow side="left" wallObject={wallObject} windowNode={windowNode} />
-        <WindowSideArrow side="right" wallObject={wallObject} windowNode={windowNode} />
-        <WindowHeightArrowHandle edge="top" wallObject={wallObject} windowNode={windowNode} />
-        <WindowHeightArrowHandle edge="bottom" wallObject={wallObject} windowNode={windowNode} />
-      </group>
-    </group>,
-    levelObject,
-  )
-}
-
-function WindowSideArrow({
-  side,
-  wallObject,
-  windowNode,
-}: {
-  side: 'left' | 'right'
-  wallObject: Object3D
-  windowNode: WindowNode
-}) {
-  const [isHovered, setIsHovered] = useState(false)
-  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
-  const arrowMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        depthTest: false,
-        depthWrite: false,
-        transparent: true,
-        opacity: 1,
-      }),
-    [],
-  )
-  const { camera, raycaster, gl } = useThree()
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
-  const dragCleanupRef = useRef<(() => void) | null>(null)
-
-  useEffect(() => {
-    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [arrowMaterial, isHovered])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'ew-resize') {
-        document.body.style.cursor = ''
-      }
-      dragCleanupRef.current?.()
-    }
-  }, [])
-
-  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
-  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
-
-  const activateWidthResize = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-
-    // Window center in world space. Raycast plane is vertical through the
-    // window, normal pointed at the camera — same setup as the height
-    // arrow but we read the pointer's wall-local X to derive width.
-    wallObject.updateMatrixWorld()
-    const centerWorld = new Vector3(
-      windowNode.position[0],
-      windowNode.position[1],
-      windowNode.position[2],
-    )
-    centerWorld.applyMatrix4(wallObject.matrixWorld)
-
-    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
-    if (planeNormal.lengthSq() === 0) return
-    planeNormal.normalize()
-    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
-
-    const ndc = new Vector2()
-    const setNDC = (clientX: number, clientY: number) => {
-      const rect = gl.domElement.getBoundingClientRect()
-      ndc.set(
-        ((clientX - rect.left) / rect.width) * 2 - 1,
-        -((clientY - rect.top) / rect.height) * 2 + 1,
-      )
-    }
-
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hitWorld = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
-    const hitLocal = wallObject.worldToLocal(hitWorld.clone())
-
-    const initialWidth = windowNode.width
-    const initialPositionX = windowNode.position[0]
-    const initialPositionZ = windowNode.position[2]
-    const rotY =
-      typeof windowNode.rotation === 'number'
-        ? windowNode.rotation
-        : (windowNode.rotation?.[1] ?? 0)
-    // Window-local +X expressed in wall-local: rotating (1,0,0) by rotY around Y.
-    const armX = Math.cos(rotY)
-    const armZ = -Math.sin(rotY)
-    // sign === +1 grows the window from the window-local right edge (left
-    // edge anchored), sign === -1 grows from the left edge (right edge
-    // anchored).
-    const sign = side === 'right' ? 1 : -1
-    const initialPointerX = hitLocal.x
-    const initialPointerZ = hitLocal.z
-
-    const wallNode = windowNode.wallId
-      ? (useScene.getState().nodes[windowNode.wallId as AnyNodeId] as WallNode | undefined)
-      : undefined
-    const wallLength = wallNode
-      ? Math.hypot(wallNode.end[0] - wallNode.start[0], wallNode.end[1] - wallNode.start[1])
-      : Number.POSITIVE_INFINITY
-
-    const anchorWallX = initialPositionX - sign * (initialWidth / 2) * armX
-    const headroomRight = Math.max(0, wallLength - anchorWallX)
-    const headroomLeft = Math.max(0, anchorWallX)
-    const growDir = sign * armX
-    const headroomAlongArm =
-      growDir > 0
-        ? headroomRight
-        : growDir < 0
-          ? headroomLeft
-          : Math.max(headroomLeft, headroomRight)
-    const maxWidth = Math.max(MIN_WINDOW_WIDTH, headroomAlongArm)
-
-    document.body.style.cursor = 'ew-resize'
-    sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setResizingWindowWidth(windowNode)
-    useViewer.getState().setHandleDragging(true)
-    useScene.temporal.getState().pause()
-
-    const windowId = windowNode.id as AnyNodeId
-
-    const onMove = (e: PointerEvent) => {
-      setNDC(e.clientX, e.clientY)
-      raycaster.setFromCamera(ndc, camera)
-      const intersectionWorld = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, intersectionWorld)) return
-      const intersectionLocal = wallObject.worldToLocal(intersectionWorld.clone())
-      const dx = intersectionLocal.x - initialPointerX
-      const dz = intersectionLocal.z - initialPointerZ
-      const armDelta = dx * armX + dz * armZ
-      const widthDelta = sign * armDelta
-      const newWidth = Math.min(maxWidth, Math.max(MIN_WINDOW_WIDTH, initialWidth + widthDelta))
-      const half = (newWidth - initialWidth) / 2
-      const newPositionX = initialPositionX + sign * half * armX
-      const newPositionZ = initialPositionZ + sign * half * armZ
-      useScene.getState().updateNode(windowId, {
-        width: newWidth,
-        position: [newPositionX, windowNode.position[1], newPositionZ],
-      })
-    }
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      window.removeEventListener('pointercancel', onCancel)
-      if (document.body.style.cursor === 'ew-resize') {
-        document.body.style.cursor = ''
-      }
-      useScene.temporal.getState().resume()
-      useEditor.getState().setResizingWindowWidth(null)
-      useViewer.getState().setHandleDragging(false)
-      dragCleanupRef.current = null
-    }
-    const onUp = () => {
-      swallowNextClick()
-      sfxEmitter.emit('sfx:item-place')
-      cleanup()
-    }
-    const onCancel = () => cleanup()
-
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
-  }
-
-  const direction = side === 'right' ? 1 : -1
-  const x = direction * (windowNode.width / 2 + SIDE_HANDLE_OFFSET)
-  const rotationY = side === 'right' ? 0 : Math.PI
-
-  return (
-    <group position={[x, 0, 0]} rotation={[0, rotationY, 0]} scale={scale}>
-      <mesh
-        frustumCulled={false}
-        geometry={arrowGeometry}
-        material={arrowMaterial}
-        onPointerDown={activateWidthResize}
-        onPointerEnter={(event) => {
-          event.stopPropagation()
-          setIsHovered(true)
-          document.body.style.cursor = 'ew-resize'
-        }}
-        onPointerLeave={(event) => {
-          event.stopPropagation()
-          setIsHovered(false)
-          if (document.body.style.cursor === 'ew-resize') {
-            document.body.style.cursor = ''
-          }
-        }}
-        renderOrder={1010}
-      />
-    </group>
-  )
-}
-
-function WindowHeightArrowHandle({
-  edge,
-  wallObject,
-  windowNode,
-}: {
-  edge: 'top' | 'bottom'
-  wallObject: Object3D
-  windowNode: WindowNode
-}) {
-  const [isHovered, setIsHovered] = useState(false)
-  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
-  const arrowMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        depthTest: false,
-        depthWrite: false,
-        transparent: true,
-        opacity: 1,
-      }),
-    [],
-  )
-  const { camera, raycaster, gl } = useThree()
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
-  const dragCleanupRef = useRef<(() => void) | null>(null)
-
-  useEffect(() => {
-    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [arrowMaterial, isHovered])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'ns-resize') {
-        document.body.style.cursor = ''
-      }
-      dragCleanupRef.current?.()
-    }
-  }, [])
-
-  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
-  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
-
-  const edgeSign = edge === 'top' ? 1 : -1
-  const handleY = edgeSign * (windowNode.height / 2 + HEIGHT_HANDLE_OFFSET)
-  // Top arrow points up via the door-style [0, π/2, π/2]; flipping the Z
-  // roll sends the chevron tip to -Y for the bottom arrow.
-  const arrowInnerRotation: [number, number, number] =
-    edge === 'top' ? [0, Math.PI / 2, Math.PI / 2] : [0, Math.PI / 2, -Math.PI / 2]
-
-  const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-
-    wallObject.updateMatrixWorld()
-    const centerWorld = new Vector3(
-      windowNode.position[0],
-      windowNode.position[1],
-      windowNode.position[2],
-    )
-    centerWorld.applyMatrix4(wallObject.matrixWorld)
-
-    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
-    if (planeNormal.lengthSq() === 0) return
-    planeNormal.normalize()
-    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
-
-    const ndc = new Vector2()
-    const setNDC = (clientX: number, clientY: number) => {
-      const rect = gl.domElement.getBoundingClientRect()
-      ndc.set(
-        ((clientX - rect.left) / rect.width) * 2 - 1,
-        -((clientY - rect.top) / rect.height) * 2 + 1,
-      )
-    }
-
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hit = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hit)) return
-
-    const initialHeight = windowNode.height
-    const initialPositionY = windowNode.position[1]
-    // Anchor the OPPOSITE edge in wall-local Y so only the dragged edge
-    // moves. Top arrow → bottom edge stays; bottom arrow → top edge stays.
-    const bottomLocalY = initialPositionY - initialHeight / 2
-    const topLocalY = initialPositionY + initialHeight / 2
-    const anchorY = edge === 'top' ? bottomLocalY : topLocalY
-    const initialPointerY = hit.y
-    const windowId = windowNode.id as AnyNodeId
-    const wallNode = windowNode.wallId
-      ? (useScene.getState().nodes[windowNode.wallId as AnyNodeId] as WallNode | undefined)
-      : undefined
-    const maxHeightCap = wallNode?.height ?? Number.POSITIVE_INFINITY
-    // Top arrow grows upward → wall headroom above the bottom anchor.
-    // Bottom arrow grows downward → all of the top anchor's wall-local Y
-    // is available (the wall floor at Y=0 is the absolute clamp).
-    const maxHeight =
-      edge === 'top'
-        ? Math.max(MIN_WINDOW_HEIGHT, maxHeightCap - bottomLocalY)
-        : Math.max(MIN_WINDOW_HEIGHT, topLocalY)
-
-    document.body.style.cursor = 'ns-resize'
-    sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setResizingWindowHeight(windowNode)
-    useViewer.getState().setHandleDragging(true)
-    useScene.temporal.getState().pause()
-
-    const onMove = (e: PointerEvent) => {
-      setNDC(e.clientX, e.clientY)
-      raycaster.setFromCamera(ndc, camera)
-      const intersection = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, intersection)) return
-      // Dragging the top arrow up grows height; dragging the bottom arrow
-      // down also grows height — so flip the pointer delta sign for the
-      // bottom arrow.
-      const delta = (intersection.y - initialPointerY) * edgeSign
-      const newHeight = Math.min(maxHeight, Math.max(MIN_WINDOW_HEIGHT, initialHeight + delta))
-      const newPositionY = edge === 'top' ? anchorY + newHeight / 2 : anchorY - newHeight / 2
-      useScene.getState().updateNode(windowId, {
-        height: newHeight,
-        position: [windowNode.position[0], newPositionY, windowNode.position[2]],
-      })
-    }
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      window.removeEventListener('pointercancel', onCancel)
-      if (document.body.style.cursor === 'ns-resize') {
-        document.body.style.cursor = ''
-      }
-      useScene.temporal.getState().resume()
-      useEditor.getState().setResizingWindowHeight(null)
-      useViewer.getState().setHandleDragging(false)
-      dragCleanupRef.current = null
-    }
-    const onUp = () => {
-      swallowNextClick()
-      sfxEmitter.emit('sfx:item-place')
-      cleanup()
-    }
-    const onCancel = () => cleanup()
-
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
-  }
-
-  return (
-    <group position={[0, handleY, 0]}>
-      <group rotation={arrowInnerRotation} scale={scale}>
-        <mesh
-          frustumCulled={false}
-          geometry={arrowGeometry}
-          material={arrowMaterial}
-          onPointerDown={activateHeightResize}
-          onPointerEnter={(event) => {
-            event.stopPropagation()
-            setIsHovered(true)
-            document.body.style.cursor = 'ns-resize'
-          }}
-          onPointerLeave={(event) => {
-            event.stopPropagation()
-            setIsHovered(false)
-            if (document.body.style.cursor === 'ns-resize') {
-              document.body.style.cursor = ''
-            }
-          }}
-          renderOrder={1010}
-        />
-      </group>
-    </group>
-  )
-}
-
diff --git a/packages/nodes/src/column/definition.ts b/packages/nodes/src/column/definition.ts
index e584b48bc..f16495d3b 100644
--- a/packages/nodes/src/column/definition.ts
+++ b/packages/nodes/src/column/definition.ts
@@ -1,12 +1,142 @@
 import {
   ColumnNode as ColumnNodeSchema,
   type ColumnNode as ColumnNodeType,
+  type HandleDescriptor,
   type NodeDefinition,
 } from '@pascal-app/core'
 import { buildColumnFloorplan } from './floorplan'
 import { columnParametrics } from './parametrics'
 import { ColumnNode } from './schema'
 
+// Limits + offsets shared with the in-world arrows. Mirrors the floors
+// the renderer clamps to (`Math.max(0.2, node.height)` etc.) so a drag
+// can't push values past what the renderer will accept.
+const SIDE_HANDLE_OFFSET = 0.18
+const HEIGHT_HANDLE_OFFSET = 0.22
+const BRACE_HANDLE_OFFSET = 0.3
+const MIN_COLUMN_HEIGHT = 0.2
+const MIN_COLUMN_WIDTH = 0.1
+const MIN_COLUMN_DEPTH = 0.1
+const MIN_COLUMN_RADIUS = 0.05
+const MIN_BRACE_DIMENSION = 0.04
+
+const ROUND_CROSS_SECTIONS = new Set<ColumnNodeType['crossSection']>([
+  'round',
+  'octagonal',
+  'sixteen-sided',
+])
+
+function columnHeightHandle(): HandleDescriptor<ColumnNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min',
+    min: MIN_COLUMN_HEIGHT,
+    currentValue: (n) => n.height,
+    apply: (_n, newValue) => ({ height: newValue }),
+    placement: {
+      position: (n) => [0, n.height + HEIGHT_HANDLE_OFFSET, 0],
+    },
+  }
+}
+
+function columnRadiusHandle(): HandleDescriptor<ColumnNodeType> {
+  return {
+    kind: 'radial-resize',
+    axis: 'x',
+    min: MIN_COLUMN_RADIUS,
+    currentValue: (n) => n.radius,
+    apply: (_n, newValue) => ({ radius: newValue }),
+    placement: {
+      position: (n) => [n.radius + SIDE_HANDLE_OFFSET, n.height / 2, 0],
+    },
+  }
+}
+
+function columnAxisHandle(axis: 'x' | 'z'): HandleDescriptor<ColumnNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis,
+    anchor: 'center',
+    min: axis === 'x' ? MIN_COLUMN_WIDTH : MIN_COLUMN_DEPTH,
+    currentValue: (n) => (axis === 'x' ? n.width : n.depth),
+    apply: (_n, newValue) => (axis === 'x' ? { width: newValue } : { depth: newValue }),
+    placement: {
+      position: (n) => {
+        const half = axis === 'x' ? n.width / 2 : n.depth / 2
+        return axis === 'x'
+          ? [half + SIDE_HANDLE_OFFSET, n.height / 2, 0]
+          : [0, n.height / 2, half + SIDE_HANDLE_OFFSET]
+      },
+    },
+  }
+}
+
+function columnUniformHandle(): HandleDescriptor<ColumnNodeType> {
+  // Square columns keep width === depth. We anchor the arrow on the +X
+  // side and write BOTH fields from the same delta.
+  return {
+    kind: 'linear-resize',
+    axis: 'x',
+    anchor: 'center',
+    min: MIN_COLUMN_WIDTH,
+    currentValue: (n) => n.width,
+    apply: (_n, newValue) => ({ width: newValue, depth: newValue }),
+    placement: {
+      position: (n) => [n.width / 2 + SIDE_HANDLE_OFFSET, n.height / 2, 0],
+    },
+  }
+}
+
+function columnBraceHandle(axis: 'x' | 'z'): HandleDescriptor<ColumnNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis,
+    anchor: 'center',
+    min: MIN_BRACE_DIMENSION,
+    currentValue: (n) =>
+      axis === 'x' ? (n.braceWidth ?? n.width) : (n.braceDepth ?? n.depth),
+    apply: (_n, newValue) =>
+      axis === 'x' ? { braceWidth: newValue } : { braceDepth: newValue },
+    placement: {
+      position: (n) => {
+        // Position outside any splay so the arrow clears the legs.
+        const half =
+          axis === 'x'
+            ? Math.max(
+                n.braceBottomSpread ?? 0,
+                n.braceTopSpread ?? 0,
+                n.braceWidth ?? n.width,
+              ) / 2
+            : (n.braceDepth ?? n.depth) / 2
+        return axis === 'x'
+          ? [half + BRACE_HANDLE_OFFSET, n.height / 2, 0]
+          : [0, n.height / 2, half + BRACE_HANDLE_OFFSET]
+      },
+    },
+  }
+}
+
+function columnHandles(node: ColumnNodeType): HandleDescriptor<ColumnNodeType>[] {
+  // 1. Height (universal).
+  // 2. Footprint arrows depending on supportStyle + crossSection:
+  //    - non-vertical supports → braceWidth + braceDepth (skips crossSection)
+  //    - round / octagonal / sixteen-sided → single radius arrow
+  //    - square                            → uniform width+depth
+  //    - rectangular                       → width + depth (independent)
+  const handles: HandleDescriptor<ColumnNodeType>[] = [columnHeightHandle()]
+  if (node.supportStyle !== 'vertical') {
+    handles.push(columnBraceHandle('x'), columnBraceHandle('z'))
+  } else if (ROUND_CROSS_SECTIONS.has(node.crossSection)) {
+    handles.push(columnRadiusHandle())
+  } else if (node.crossSection === 'square') {
+    handles.push(columnUniformHandle())
+  } else {
+    handles.push(columnAxisHandle('x'), columnAxisHandle('z'))
+  }
+  return handles
+}
+
 /**
  * Column — Stage A registration. Wrap-export of the legacy
  * `ColumnRenderer` (no system — column geometry is computed inline in
@@ -54,6 +184,7 @@ export const columnDefinition: NodeDefinition<typeof ColumnNode> = {
   },
 
   parametrics: columnParametrics,
+  handles: columnHandles,
 
   renderer: {
     kind: 'parametric',
diff --git a/packages/nodes/src/door/definition.ts b/packages/nodes/src/door/definition.ts
index 7c33ad180..5bb15c0a8 100644
--- a/packages/nodes/src/door/definition.ts
+++ b/packages/nodes/src/door/definition.ts
@@ -1,10 +1,108 @@
-import type { NodeDefinition } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  type DoorNode as DoorNodeType,
+  type HandleDescriptor,
+  type NodeDefinition,
+  type WallNode,
+} from '@pascal-app/core'
 import { doorWidthAffordance } from './floorplan-affordances'
 import { buildDoorFloorplan } from './floorplan'
 import { doorFloorplanMoveTarget } from './floorplan-move'
 import { doorParametrics } from './parametrics'
 import { DoorNode } from './schema'
 
+const SIDE_HANDLE_OFFSET = 0.24
+const HEIGHT_HANDLE_OFFSET = 0.24
+const MIN_DOOR_HEIGHT = 0.5
+const MIN_DOOR_WIDTH = 0.3
+
+function readWallLength(door: DoorNodeType, scene: { get: (id: AnyNodeId) => unknown }): number {
+  if (!door.wallId) return Number.POSITIVE_INFINITY
+  const wall = scene.get(door.wallId as AnyNodeId) as WallNode | undefined
+  if (!wall) return Number.POSITIVE_INFINITY
+  return Math.hypot(wall.end[0] - wall.start[0], wall.end[1] - wall.start[1])
+}
+
+function readWallHeight(door: DoorNodeType, scene: { get: (id: AnyNodeId) => unknown }): number {
+  if (!door.wallId) return Number.POSITIVE_INFINITY
+  const wall = scene.get(door.wallId as AnyNodeId) as WallNode | undefined
+  return wall?.height ?? Number.POSITIVE_INFINITY
+}
+
+// Width arrow on the door-local +X (right) or -X (left) side. Drag grows
+// the door from the anchored OPPOSITE edge; the door's wall-local center
+// re-centers so the anchored edge stays put.
+function doorWidthHandle(side: 'left' | 'right'): HandleDescriptor<DoorNodeType> {
+  const sign = side === 'right' ? 1 : -1
+  return {
+    kind: 'linear-resize',
+    axis: 'x',
+    // 'min' = -X edge anchored (right arrow grows the +X edge outward).
+    // 'max' = +X edge anchored (left arrow grows the -X edge outward).
+    anchor: side === 'right' ? 'min' : 'max',
+    min: MIN_DOOR_WIDTH,
+    max: (n, scene) => readWallLength(n, scene),
+    currentValue: (n) => n.width,
+    apply: (initial, newWidth) => {
+      // Anchored edge stays fixed in wall-local coords. Door rotation is
+      // applied by the inner ride group (the renderer mounts a nested
+      // <group> at the door's pose), so the apply math here is in
+      // door-local coords AND the patch.position must be in wall-local
+      // coords. We compute the anchored wall-local point from the
+      // initial node, then derive the new wall-local center from it.
+      const rotY = initial.rotation[1]
+      const armX = Math.cos(rotY)
+      const armZ = -Math.sin(rotY)
+      const anchorX = initial.position[0] - sign * (initial.width / 2) * armX
+      const anchorZ = initial.position[2] - sign * (initial.width / 2) * armZ
+      const newCenterX = anchorX + sign * (newWidth / 2) * armX
+      const newCenterZ = anchorZ + sign * (newWidth / 2) * armZ
+      return {
+        width: newWidth,
+        position: [newCenterX, initial.position[1], newCenterZ],
+      }
+    },
+    placement: {
+      // door-local: +X axis lives along door's own X. Inner ride group
+      // applies door.rotation, so we sit purely on door-local +X / -X.
+      position: (n) => [sign * (n.width / 2 + SIDE_HANDLE_OFFSET), 0, 0],
+      rotationY: () => (side === 'right' ? 0 : Math.PI),
+    },
+    portal: 'grandparent',
+  }
+}
+
+function doorHeightHandle(): HandleDescriptor<DoorNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min', // bottom anchored at wall-local Y = position[1] - height/2
+    min: MIN_DOOR_HEIGHT,
+    max: (n, scene) => {
+      const bottom = n.position[1] - n.height / 2
+      return Math.max(MIN_DOOR_HEIGHT, readWallHeight(n, scene) - bottom)
+    },
+    currentValue: (n) => n.height,
+    apply: (initial, newHeight) => {
+      const bottom = initial.position[1] - initial.height / 2
+      return {
+        height: newHeight,
+        position: [initial.position[0], bottom + newHeight / 2, initial.position[2]],
+      }
+    },
+    placement: {
+      position: (n) => [0, n.height / 2 + HEIGHT_HANDLE_OFFSET, 0],
+    },
+    portal: 'grandparent',
+  }
+}
+
+const doorHandles: HandleDescriptor<DoorNodeType>[] = [
+  doorWidthHandle('left'),
+  doorWidthHandle('right'),
+  doorHeightHandle(),
+]
+
 /**
  * Door — Phase 5 batch kind. Hosted on walls, cuts holes in them,
  * animated open/close state.
@@ -47,6 +145,7 @@ export const doorDefinition: NodeDefinition<typeof DoorNode> = {
   },
 
   parametrics: doorParametrics,
+  handles: doorHandles,
 
   renderer: {
     kind: 'parametric',
diff --git a/packages/nodes/src/stair-segment/definition.ts b/packages/nodes/src/stair-segment/definition.ts
index 2052c73c9..7ae9d0bbf 100644
--- a/packages/nodes/src/stair-segment/definition.ts
+++ b/packages/nodes/src/stair-segment/definition.ts
@@ -1,7 +1,94 @@
-import { type NodeDefinition, StairSegmentNode as StairSegmentNodeSchema } from '@pascal-app/core'
+import {
+  type HandleDescriptor,
+  type NodeDefinition,
+  StairSegmentNode as StairSegmentNodeSchema,
+  type StairSegmentNode as StairSegmentNodeType,
+} from '@pascal-app/core'
 import { stairSegmentParametrics } from './parametrics'
 import { StairSegmentNode } from './schema'
 
+const SIDE_HANDLE_OFFSET = 0.24
+const LENGTH_HANDLE_OFFSET = 0.24
+const HEIGHT_HANDLE_OFFSET = 0.24
+const MIN_SEGMENT_WIDTH = 0.4
+const MIN_SEGMENT_LENGTH = 0.4
+const MIN_SEGMENT_HEIGHT = 0.1
+
+// Width grows symmetrically around the chain centerline — the chain owns
+// segment.position so writing a new center here would be clobbered next
+// frame by `syncSegmentMeshTransforms`. We just write `width` and let the
+// chain re-center.
+function stairSegmentWidthHandle(side: 'left' | 'right'): HandleDescriptor<StairSegmentNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'x',
+    // 'min' factor=+1 / 'max' factor=-1 lets each arrow grow the value
+    // when dragged outward (right edge: drag +X grows; left edge: drag -X
+    // grows). Matches the legacy `widthDelta = sign * pointerDelta`.
+    anchor: side === 'right' ? 'min' : 'max',
+    min: MIN_SEGMENT_WIDTH,
+    currentValue: (n) => n.width,
+    apply: (_n, newValue) => ({ width: newValue }),
+    placement: {
+      position: (n) => [
+        (side === 'right' ? 1 : -1) * (n.width / 2 + SIDE_HANDLE_OFFSET),
+        n.height / 2,
+        n.length / 2,
+      ],
+      rotationY: () => (side === 'right' ? 0 : Math.PI),
+    },
+    portal: 'grandparent',
+  }
+}
+
+// Length: segment's back-face (Z = length) anchors against the chain end,
+// so the run simply extends toward +Z as length grows. anchor='min' →
+// drag +Z grows length 1:1.
+function stairSegmentLengthHandle(): HandleDescriptor<StairSegmentNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'z',
+    anchor: 'min',
+    min: MIN_SEGMENT_LENGTH,
+    currentValue: (n) => n.length,
+    apply: (_n, newValue) => ({ length: newValue }),
+    placement: {
+      position: (n) => [0, n.height / 2, n.length + LENGTH_HANDLE_OFFSET],
+      rotationY: () => -Math.PI / 2,
+    },
+    portal: 'grandparent',
+  }
+}
+
+// Height applies only to step-flight segments (landings are flat). The
+// segment's floor is at Y=0; dragging the top grows height upward.
+function stairSegmentHeightHandle(): HandleDescriptor<StairSegmentNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min',
+    min: MIN_SEGMENT_HEIGHT,
+    currentValue: (n) => n.height,
+    apply: (_n, newValue) => ({ height: newValue }),
+    placement: {
+      position: (n) => [0, n.height + HEIGHT_HANDLE_OFFSET, n.length / 2],
+    },
+    portal: 'grandparent',
+  }
+}
+
+function stairSegmentHandles(node: StairSegmentNodeType): HandleDescriptor<StairSegmentNodeType>[] {
+  const handles: HandleDescriptor<StairSegmentNodeType>[] = [
+    stairSegmentWidthHandle('left'),
+    stairSegmentWidthHandle('right'),
+    stairSegmentLengthHandle(),
+  ]
+  if (node.segmentType === 'stair') {
+    handles.push(stairSegmentHeightHandle())
+  }
+  return handles
+}
+
 /**
  * Stair segment — Stage A. Child of a stair node; per-flight geometry.
  * Built by `StairSystem` registered on the parent stair definition.
@@ -29,6 +116,7 @@ export const stairSegmentDefinition: NodeDefinition<typeof StairSegmentNode> = {
   },
 
   parametrics: stairSegmentParametrics,
+  handles: stairSegmentHandles,
 
   renderer: {
     kind: 'parametric',
diff --git a/packages/nodes/src/window/definition.ts b/packages/nodes/src/window/definition.ts
index f220805db..15eebe6c3 100644
--- a/packages/nodes/src/window/definition.ts
+++ b/packages/nodes/src/window/definition.ts
@@ -1,10 +1,115 @@
-import type { NodeDefinition } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  type HandleDescriptor,
+  type NodeDefinition,
+  type WallNode,
+  type WindowNode as WindowNodeType,
+} from '@pascal-app/core'
 import { buildWindowFloorplan } from './floorplan'
 import { windowWidthAffordance } from './floorplan-affordances'
 import { windowFloorplanMoveTarget } from './floorplan-move'
 import { windowParametrics } from './parametrics'
 import { WindowNode } from './schema'
 
+const SIDE_HANDLE_OFFSET = 0.24
+const HEIGHT_HANDLE_OFFSET = 0.24
+const MIN_WINDOW_HEIGHT = 0.3
+const MIN_WINDOW_WIDTH = 0.3
+
+function readWallLength(w: WindowNodeType, scene: { get: (id: AnyNodeId) => unknown }): number {
+  if (!w.wallId) return Number.POSITIVE_INFINITY
+  const wall = scene.get(w.wallId as AnyNodeId) as WallNode | undefined
+  if (!wall) return Number.POSITIVE_INFINITY
+  return Math.hypot(wall.end[0] - wall.start[0], wall.end[1] - wall.start[1])
+}
+
+function readWallHeight(w: WindowNodeType, scene: { get: (id: AnyNodeId) => unknown }): number {
+  if (!w.wallId) return Number.POSITIVE_INFINITY
+  const wall = scene.get(w.wallId as AnyNodeId) as WallNode | undefined
+  return wall?.height ?? Number.POSITIVE_INFINITY
+}
+
+function windowWidthHandle(side: 'left' | 'right'): HandleDescriptor<WindowNodeType> {
+  const sign = side === 'right' ? 1 : -1
+  return {
+    kind: 'linear-resize',
+    axis: 'x',
+    anchor: side === 'right' ? 'min' : 'max',
+    min: MIN_WINDOW_WIDTH,
+    max: (n, scene) => readWallLength(n, scene),
+    currentValue: (n) => n.width,
+    apply: (initial, newWidth) => {
+      const rotY = initial.rotation[1]
+      const armX = Math.cos(rotY)
+      const armZ = -Math.sin(rotY)
+      const anchorX = initial.position[0] - sign * (initial.width / 2) * armX
+      const anchorZ = initial.position[2] - sign * (initial.width / 2) * armZ
+      return {
+        width: newWidth,
+        position: [
+          anchorX + sign * (newWidth / 2) * armX,
+          initial.position[1],
+          anchorZ + sign * (newWidth / 2) * armZ,
+        ],
+      }
+    },
+    placement: {
+      position: (n) => [sign * (n.width / 2 + SIDE_HANDLE_OFFSET), 0, 0],
+      rotationY: () => (side === 'right' ? 0 : Math.PI),
+    },
+    portal: 'grandparent',
+  }
+}
+
+// Window height has two arrows (top + bottom edge) — each anchors at the
+// opposite edge so dragging the top grows the window upward and dragging
+// the bottom grows it downward without the opposite edge moving.
+function windowHeightHandle(edge: 'top' | 'bottom'): HandleDescriptor<WindowNodeType> {
+  const sign = edge === 'top' ? 1 : -1
+  return {
+    kind: 'linear-resize',
+    axis: 'y',
+    // top arrow anchors at -Y (bottom stays fixed); bottom at +Y (top stays).
+    anchor: edge === 'top' ? 'min' : 'max',
+    min: MIN_WINDOW_HEIGHT,
+    max: (n, scene) => {
+      // Maximum: distance from the anchored edge to the wall's allowed Y
+      // bounds. Top arrow caps at wall.height - bottom; bottom arrow caps
+      // at top (positive Y room above the floor).
+      const wallH = readWallHeight(n, scene)
+      const anchored =
+        edge === 'top' ? n.position[1] - n.height / 2 : n.position[1] + n.height / 2
+      return edge === 'top'
+        ? Math.max(MIN_WINDOW_HEIGHT, wallH - anchored)
+        : Math.max(MIN_WINDOW_HEIGHT, anchored)
+    },
+    currentValue: (n) => n.height,
+    apply: (initial, newHeight) => {
+      // Anchored edge stays in wall-local Y; opposite edge moves.
+      const anchorY =
+        edge === 'top'
+          ? initial.position[1] - initial.height / 2 // bottom anchored
+          : initial.position[1] + initial.height / 2 // top anchored
+      const newCenterY = anchorY + sign * (newHeight / 2)
+      return {
+        height: newHeight,
+        position: [initial.position[0], newCenterY, initial.position[2]],
+      }
+    },
+    placement: {
+      position: (n) => [0, sign * (n.height / 2 + HEIGHT_HANDLE_OFFSET), 0],
+    },
+    portal: 'grandparent',
+  }
+}
+
+const windowHandles: HandleDescriptor<WindowNodeType>[] = [
+  windowWidthHandle('left'),
+  windowWidthHandle('right'),
+  windowHeightHandle('top'),
+  windowHeightHandle('bottom'),
+]
+
 /**
  * Window — Phase 5 batch kind. Mirrors door's shape: hosted on walls,
  * cuts holes in them, animated open/close state for opening windows.
@@ -37,6 +142,7 @@ export const windowDefinition: NodeDefinition<typeof WindowNode> = {
   },
 
   parametrics: windowParametrics,
+  handles: windowHandles,
 
   renderer: {
     kind: 'parametric',

From 5756f241baf4f2692ffa7bf51d51769ba29c2151 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Tue, 26 May 2026 01:01:33 +0530
Subject: [PATCH 26/48] handles: migrate wall + parent stair to registry; add
 arc-resize
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes the wall + parent-stair gap on the registry-driven handle
migration. Net −1177 lines (the per-kind handle files were 1500+
lines of duplicated drag plumbing; their replacements are ~50-line
config blocks on each NodeDefinition).

- `arc-resize` reworked to take a raw `delta` (radians) instead of
  `newValue` so two-field writes like curved-stair sweep (which
  updates `sweepAngle` AND `rotation` together to keep the
  non-dragged edge world-fixed) stay in the descriptor without
  awkward inverse-currentValue gymnastics. `currentValue` removed
  from arc-resize for the same reason — applies own their math.
- New `ArcArrow` renderer in `node-arrow-handles.tsx`: raycasts a
  horizontal drag plane at the arrow's Y, measures the signed angle
  delta around the node's local origin (atan2 in world XZ,
  normalised to [-π, π] so wraparound doesn't flip mid-gesture),
  hands the delta to `descriptor.apply` along with the initial node.
- Wall: height arrow migrated (linear-resize axis='y' anchor='min',
  placement uses curve apex for curved walls, chord midpoint for
  straight). Side-move arrows + corner pickers stay on the legacy
  `wall-move-side-handles.tsx` because they're tap-to-engage-mode
  affordances (move whole wall / move endpoint), not drag-resize —
  modelling them in the registry needs an editor-action descriptor
  variant which is a follow-up.
- Parent stair: curved + spiral stairs declare 5 handles
  — rise (linear-resize axis='y' anchor='min'),
  width (linear-resize axis='x' anchor='min'),
  inner-radius (linear-resize that also writes width to keep outer
  rim fixed), and sweep start / end (arc-resize variants writing
  sweepAngle + rotation). Straight stairs declare nothing — their
  segment children own resize.
- Old `stair-segment-handles.tsx` (1405 lines) deleted; all its
  arrows now flow through the registry.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/core/src/registry/handles.ts         |   31 +-
 .../editor/src/components/editor/index.tsx    |    2 -
 .../components/editor/node-arrow-handles.tsx  |  140 +-
 .../editor/stair-segment-handles.tsx          | 1405 -----------------
 .../editor/wall-move-side-handles.tsx         |  153 --
 packages/nodes/src/stair/definition.ts        |  194 ++-
 packages/nodes/src/wall/definition.ts         |   50 +-
 7 files changed, 399 insertions(+), 1576 deletions(-)
 delete mode 100644 packages/editor/src/components/editor/stair-segment-handles.tsx

diff --git a/packages/core/src/registry/handles.ts b/packages/core/src/registry/handles.ts
index 1b62c7eb4..926d37472 100644
--- a/packages/core/src/registry/handles.ts
+++ b/packages/core/src/registry/handles.ts
@@ -91,23 +91,28 @@ export type RadialResizeHandle<N> = {
 }
 
 /**
- * Curved / spiral stair arrows. The drag plane is computed in polar
- * coordinates around the node's local origin so the descriptor only
- * needs to declare which polar component changes:
- *   - 'angular' : sweep — pointer arc-length maps to angle delta
- *   - 'radial'  : inner radius / width — radial distance maps 1:1
- *   - 'vertical': rise — pointer Y maps 1:1 to height delta
+ * Curved / spiral stair sweep arrows. The renderer raycasts a horizontal
+ * plane through the arrow's Y and emits the angular delta (radians,
+ * signed, normalised to [-π, π]) around the node's local origin.
  *
- * `end` distinguishes the start / end sweep handles on curved stairs.
+ * Unlike the linear variants, `apply` receives the raw cursor delta
+ * (not a `newValue`) because sweep handles typically write multiple
+ * fields off the delta (`sweepAngle` AND `rotation` — re-orienting the
+ * arc so the opposite edge stays world-fixed). Descriptor-internal
+ * math handles the per-end sign and any clamping; the renderer stays
+ * out of it.
  */
-export type ArcResizeHandle<N> = {
+export type ArcResizeHandle<N = any> = {
   kind: 'arc-resize'
-  axis: 'angular' | 'radial' | 'vertical'
+  /**
+   * Marks the drag mode. Only 'angular' uses the polar plane renderer;
+   * 'radial' and 'vertical' degenerate to `linear-resize` (axis 'x' /
+   * 'y') so descriptors should prefer that for those cases.
+   */
+  axis: 'angular'
+  /** Optional metadata for descriptors that bundle two handles per kind. */
   end?: 'start' | 'end'
-  currentValue: (node: N) => number
-  apply: (node: N, newValue: number, sceneApi: SceneApi) => Partial<N>
-  min?: number | ((node: N, sceneApi: SceneApi) => number)
-  max?: number | ((node: N, sceneApi: SceneApi) => number)
+  apply: (initialNode: N, delta: number, sceneApi: SceneApi) => Partial<N>
   placement: HandlePlacement<N>
   portal?: HandlePortal
 }
diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index 527d96c21..9af35f5e9 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -66,7 +66,6 @@ import { NodeArrowHandles } from './node-arrow-handles'
 import { SelectionManager } from './selection-manager'
 import { SiteEdgeLabels } from './site-edge-labels'
 import { SnapshotCaptureOverlay } from './snapshot-capture-overlay'
-import { StairHandles } from './stair-segment-handles'
 import { type SnapshotCameraData, ThumbnailGenerator } from './thumbnail-generator'
 import { WallMeasurementLabel } from './wall-measurement-label'
 import { WallMoveSideHandles } from './wall-move-side-handles'
@@ -602,7 +601,6 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       {!(isVersionPreviewMode || isFirstPersonMode) && <BoxSelectTool />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <WallMoveSideHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <NodeArrowHandles />}
-      {!(isVersionPreviewMode || isFirstPersonMode) && <StairHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingActionMenu />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingBuildingActionMenu />}
       {!isFirstPersonMode && <WallMeasurementLabel />}
diff --git a/packages/editor/src/components/editor/node-arrow-handles.tsx b/packages/editor/src/components/editor/node-arrow-handles.tsx
index cf620ac3b..a9206fcdc 100644
--- a/packages/editor/src/components/editor/node-arrow-handles.tsx
+++ b/packages/editor/src/components/editor/node-arrow-handles.tsx
@@ -3,6 +3,7 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  type ArcResizeHandle,
   type Cursor,
   createSceneApi,
   type HandleDescriptor,
@@ -240,7 +241,10 @@ function ArrowHandle({
   if (descriptor.kind === 'linear-resize' || descriptor.kind === 'radial-resize') {
     return <LinearArrow descriptor={descriptor} node={node} rideObject={rideObject} />
   }
-  // arc-resize / endpoint-move land here once their renderers are written.
+  if (descriptor.kind === 'arc-resize') {
+    return <ArcArrow descriptor={descriptor} node={node} rideObject={rideObject} />
+  }
+  // endpoint-move not yet implemented.
   return null
 }
 
@@ -446,3 +450,137 @@ function LinearArrow({
     </group>
   )
 }
+
+// Angular drag: project pointer to a horizontal plane at the arrow's Y
+// and measure the signed angle around the node's local origin (in world
+// XZ). Pass the normalised delta to `apply` — the descriptor owns the
+// per-field math (sweep handles write `sweepAngle` AND `rotation` from
+// the same delta to keep the opposite edge world-fixed).
+function ArcArrow({
+  descriptor,
+  node,
+  rideObject,
+}: {
+  descriptor: ArcResizeHandle<AnyNode>
+  node: AnyNode
+  rideObject: Object3D
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const arrowMaterial = useArrowMaterial()
+  const { camera, raycaster, gl } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [arrowMaterial, isHovered])
+  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
+  useEffect(() => () => dragCleanupRef.current?.(), [])
+
+  const position = descriptor.placement.position(node)
+  const rotationY = descriptor.placement.rotationY?.(node) ?? 0
+  const cursor: Cursor = 'ew-resize'
+
+  const activate = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+
+    // Horizontal drag plane at the arrow's world Y. Atan2 around the
+    // node's local origin (= rideObject world center) gives the cursor's
+    // bearing — delta between samples is the angular drag.
+    rideObject.updateMatrixWorld()
+    const centerWorld = new Vector3()
+    rideObject.getWorldPosition(centerWorld)
+    const arrowWorld = new Vector3(...position).applyMatrix4(rideObject.matrixWorld)
+    const planeY = arrowWorld.y
+    const plane = new Plane(new Vector3(0, 1, 0), -planeY)
+
+    const ndc = new Vector2()
+    const setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hitWorld = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
+
+    const initialAngle = Math.atan2(hitWorld.z - centerWorld.z, hitWorld.x - centerWorld.x)
+    const nodeId = node.id as AnyNodeId
+    const sceneApi = createSceneApi(useScene)
+    const initialNode = (sceneApi.get(nodeId) ?? node) as AnyNode
+
+    document.body.style.cursor = cursor
+    sfxEmitter.emit('sfx:item-pick')
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    const onMove = (e: PointerEvent) => {
+      setNDC(e.clientX, e.clientY)
+      raycaster.setFromCamera(ndc, camera)
+      const hit = new Vector3()
+      if (!raycaster.ray.intersectPlane(plane, hit)) return
+      const currentAngle = Math.atan2(hit.z - centerWorld.z, hit.x - centerWorld.x)
+      // Normalise so a drag that crosses ±π doesn't flip sign mid-gesture.
+      let delta = currentAngle - initialAngle
+      while (delta > Math.PI) delta -= 2 * Math.PI
+      while (delta < -Math.PI) delta += 2 * Math.PI
+
+      const patch = descriptor.apply(initialNode as never, delta, sceneApi)
+      sceneApi.update(nodeId, patch as Partial<AnyNode>)
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === cursor) {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+    dragCleanupRef.current = cleanup
+
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  return (
+    <group position={position} rotation={[0, rotationY, 0]} scale={scale}>
+      <mesh
+        frustumCulled={false}
+        geometry={arrowGeometry}
+        material={arrowMaterial}
+        onPointerDown={activate}
+        onPointerEnter={(event) => {
+          event.stopPropagation()
+          setIsHovered(true)
+          document.body.style.cursor = cursor
+        }}
+        onPointerLeave={(event) => {
+          event.stopPropagation()
+          setIsHovered(false)
+          if (document.body.style.cursor === cursor) {
+            document.body.style.cursor = ''
+          }
+        }}
+        renderOrder={1010}
+      />
+    </group>
+  )
+}
diff --git a/packages/editor/src/components/editor/stair-segment-handles.tsx b/packages/editor/src/components/editor/stair-segment-handles.tsx
deleted file mode 100644
index 20c299b9a..000000000
--- a/packages/editor/src/components/editor/stair-segment-handles.tsx
+++ /dev/null
@@ -1,1405 +0,0 @@
-'use client'
-
-import {
-  type AnyNodeId,
-  type StairNode,
-  type StairSegmentNode,
-  sceneRegistry,
-  useScene,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import {
-  Color,
-  DoubleSide,
-  ExtrudeGeometry,
-  type Group,
-  type Mesh,
-  type Object3D,
-  OrthographicCamera,
-  Plane,
-  RingGeometry,
-  Shape,
-  Vector2,
-  Vector3,
-} from 'three'
-import { MeshBasicNodeMaterial } from 'three/webgpu'
-import { sfxEmitter } from '../../lib/sfx-bus'
-import useEditor from '../../store/use-editor'
-
-const SIDE_HANDLE_OFFSET = 0.24
-const LENGTH_HANDLE_OFFSET = 0.24
-const HEIGHT_HANDLE_OFFSET = 0.24
-const ARROW_SCALE = 0.65
-const MIN_SEGMENT_WIDTH = 0.4
-const MIN_SEGMENT_LENGTH = 0.4
-const MIN_SEGMENT_HEIGHT = 0.1
-const ARROW_COLOR = '#8381ed'
-const ARROW_HOVER_COLOR = '#a5b4fc'
-
-// Synthetic `click` after a drag's pointerup would deselect the segment via
-// the canvas-level PointerMissedHandler. Mirrors the window/door handles.
-function swallowNextClick() {
-  const swallow = (clickEvent: Event) => {
-    clickEvent.stopPropagation()
-    clickEvent.preventDefault()
-  }
-  window.addEventListener('click', swallow, { capture: true, once: true })
-  setTimeout(() => {
-    window.removeEventListener('click', swallow, { capture: true })
-  }, 300)
-}
-
-function createArrowHandleGeometry() {
-  const shape = new Shape()
-  shape.moveTo(0.22, 0)
-  shape.lineTo(-0.04, 0.12)
-  shape.lineTo(-0.04, 0.035)
-  shape.lineTo(-0.2, 0.035)
-  shape.lineTo(-0.2, -0.035)
-  shape.lineTo(-0.04, -0.035)
-  shape.lineTo(-0.04, -0.12)
-  shape.lineTo(0.22, 0)
-
-  const geometry = new ExtrudeGeometry(shape, {
-    depth: 0.08,
-    bevelEnabled: true,
-    bevelThickness: 0.035,
-    bevelSize: 0.03,
-    bevelOffset: 0,
-    bevelSegments: 10,
-    curveSegments: 16,
-    steps: 1,
-  })
-  geometry.translate(0, 0, -0.04)
-  geometry.rotateX(-Math.PI / 2)
-  geometry.computeVertexNormals()
-  geometry.computeBoundingSphere()
-  return geometry
-}
-
-export function StairSegmentHandles() {
-  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 selectedId = selectedIds.length === 1 ? selectedIds[0] : null
-  const selectedSegment = useScene((state) => {
-    const node = selectedId ? state.nodes[selectedId as AnyNodeId] : null
-    return node?.type === 'stair-segment' ? node : null
-  })
-
-  const shouldRender =
-    Boolean(selectedSegment) && !isFloorplanHovered && mode !== 'delete' && !movingNode
-
-  if (!shouldRender || !selectedSegment) return null
-  return <StairSegmentHandlesForSegment segmentNode={selectedSegment} />
-}
-
-function StairSegmentHandlesForSegment({ segmentNode }: { segmentNode: StairSegmentNode }) {
-  // Portal into the stair's PARENT (level / building / scene root), not the
-  // stair group itself: StairRenderer attaches useNodeEvents handlers on the
-  // stair group, so hovering anything inside the group bubbles up and sets
-  // `hoveredId = stairId`. The post-processing outline then traces every
-  // descendant of the stair group — which would include our icons. Mirrors
-  // the door fix (handles live under the level, not the wall).
-  const stairId = segmentNode.parentId
-  const stairParentId = useScene((state) => {
-    const stair = stairId ? (state.nodes[stairId as AnyNodeId] as StairNode | undefined) : undefined
-    return stair?.parentId ?? null
-  })
-
-  const [stairObject, setStairObject] = useState<Object3D | null>(() =>
-    stairId ? (sceneRegistry.nodes.get(stairId as AnyNodeId) ?? null) : null,
-  )
-  const [segmentObject, setSegmentObject] = useState<Mesh | null>(
-    () => (sceneRegistry.nodes.get(segmentNode.id as AnyNodeId) as Mesh | undefined) ?? null,
-  )
-  const [parentObject, setParentObject] = useState<Object3D | null>(() =>
-    stairParentId ? (sceneRegistry.nodes.get(stairParentId as AnyNodeId) ?? null) : null,
-  )
-
-  useEffect(() => {
-    let frameId = 0
-    const resolve = () => {
-      const nextStair = stairId ? (sceneRegistry.nodes.get(stairId as AnyNodeId) ?? null) : null
-      const nextSegment =
-        (sceneRegistry.nodes.get(segmentNode.id as AnyNodeId) as Mesh | undefined) ?? null
-      const nextParent = stairParentId
-        ? (sceneRegistry.nodes.get(stairParentId as AnyNodeId) ?? null)
-        : null
-      setStairObject((current) => (current === nextStair ? current : nextStair))
-      setSegmentObject((current) => (current === nextSegment ? current : nextSegment))
-      setParentObject((current) => (current === nextParent ? current : nextParent))
-      if (!(nextStair && nextSegment && nextParent)) {
-        frameId = window.requestAnimationFrame(resolve)
-      }
-    }
-    resolve()
-    return () => {
-      if (frameId) window.cancelAnimationFrame(frameId)
-    }
-  }, [stairId, segmentNode.id, stairParentId])
-
-  const stairPoseRef = useRef<Group>(null)
-  const segmentPoseRef = useRef<Group>(null)
-
-  useFrame(() => {
-    const stairPose = stairPoseRef.current
-    const segmentPose = segmentPoseRef.current
-    if (!(stairPose && segmentPose && stairObject && segmentObject)) return
-    // Two-layer transform mirror so the handles ride along even when nothing
-    // in React triggers a re-render: StairSystem writes the stair group's
-    // pose AND the per-segment chained pose imperatively each frame.
-    stairPose.position.copy(stairObject.position)
-    stairPose.quaternion.copy(stairObject.quaternion)
-    segmentPose.position.copy(segmentObject.position)
-    segmentPose.quaternion.copy(segmentObject.quaternion)
-  })
-
-  if (!(stairObject && segmentObject && parentObject)) return null
-
-  return createPortal(
-    <group ref={stairPoseRef}>
-      <group ref={segmentPoseRef}>
-        <StairSegmentSideArrow
-          segmentNode={segmentNode}
-          segmentObject={segmentObject}
-          side="left"
-        />
-        <StairSegmentSideArrow
-          segmentNode={segmentNode}
-          segmentObject={segmentObject}
-          side="right"
-        />
-        <StairSegmentLengthArrow segmentNode={segmentNode} segmentObject={segmentObject} />
-        {segmentNode.segmentType === 'stair' ? (
-          <StairSegmentHeightArrow segmentNode={segmentNode} segmentObject={segmentObject} />
-        ) : null}
-      </group>
-    </group>,
-    parentObject,
-  )
-}
-
-// Shared arrow material/geometry/scale boilerplate hoisted into one hook so
-// each arrow variant only carries its drag logic.
-function useArrowVisuals(cursor: 'ew-resize' | 'ns-resize') {
-  const [isHovered, setIsHovered] = useState(false)
-  const geometry = useMemo(() => createArrowHandleGeometry(), [])
-  const material = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        depthTest: false,
-        depthWrite: false,
-        transparent: true,
-        opacity: 1,
-      }),
-    [],
-  )
-  const { camera } = useThree()
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
-
-  useEffect(() => {
-    material.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [material, isHovered])
-
-  useEffect(() => () => geometry.dispose(), [geometry])
-  useEffect(() => () => material.dispose(), [material])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === cursor) {
-        document.body.style.cursor = ''
-      }
-    }
-  }, [cursor])
-
-  return { geometry, material, scale, isHovered, setIsHovered }
-}
-
-function StairSegmentSideArrow({
-  side,
-  segmentNode,
-  segmentObject,
-}: {
-  side: 'left' | 'right'
-  segmentNode: StairSegmentNode
-  segmentObject: Mesh
-}) {
-  const { geometry, material, scale, setIsHovered } = useArrowVisuals('ew-resize')
-  const { camera, raycaster, gl } = useThree()
-  const dragCleanupRef = useRef<(() => void) | null>(null)
-
-  useEffect(() => {
-    return () => {
-      dragCleanupRef.current?.()
-    }
-  }, [])
-
-  const activateWidthResize = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-
-    // Work in the SEGMENT's own local frame, not the stair group's. The
-    // chain (`syncSegmentMeshTransforms`) writes the segment mesh's
-    // rotation/position imperatively each frame based on prior siblings'
-    // `attachmentSide`; the node's own `rotation`/`position` are stale for
-    // anything past the first segment. `segmentObject.worldToLocal` is the
-    // only correct projection.
-    segmentObject.updateMatrixWorld()
-    const centerSegment = new Vector3(0, segmentNode.height / 2, segmentNode.length / 2)
-    const centerWorld = centerSegment.clone().applyMatrix4(segmentObject.matrixWorld)
-
-    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
-    if (planeNormal.lengthSq() === 0) return
-    planeNormal.normalize()
-    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
-
-    const ndc = new Vector2()
-    const setNDC = (clientX: number, clientY: number) => {
-      const rect = gl.domElement.getBoundingClientRect()
-      ndc.set(
-        ((clientX - rect.left) / rect.width) * 2 - 1,
-        -((clientY - rect.top) / rect.height) * 2 + 1,
-      )
-    }
-
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hitWorld = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
-    const hitLocal = segmentObject.worldToLocal(hitWorld.clone())
-
-    const initialWidth = segmentNode.width
-    // Segment-local +X is always the width axis, regardless of chain
-    // rotation. Right arrow's pointer-delta-in-+X is the width grow signal;
-    // left arrow's pointer-delta-in-+X is negated.
-    const sign = side === 'right' ? 1 : -1
-    const initialPointerX = hitLocal.x
-    const segmentId = segmentNode.id as AnyNodeId
-
-    document.body.style.cursor = 'ew-resize'
-    sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setResizingStairSegmentWidth(segmentNode)
-    useViewer.getState().setHandleDragging(true)
-    useScene.temporal.getState().pause()
-
-    const onMove = (e: PointerEvent) => {
-      setNDC(e.clientX, e.clientY)
-      raycaster.setFromCamera(ndc, camera)
-      const hit = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, hit)) return
-      const hitLocal = segmentObject.worldToLocal(hit.clone())
-      // Width grows symmetrically around the chain centerline — the chain
-      // owns segment.position so we can't anchor the opposite edge by
-      // writing back to it (the next frame's `syncSegmentMeshTransforms`
-      // would clobber the write).
-      const widthDelta = sign * (hitLocal.x - initialPointerX)
-      const newWidth = Math.max(MIN_SEGMENT_WIDTH, initialWidth + widthDelta)
-      useScene.getState().updateNode(segmentId, { width: newWidth })
-    }
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      window.removeEventListener('pointercancel', onCancel)
-      if (document.body.style.cursor === 'ew-resize') {
-        document.body.style.cursor = ''
-      }
-      useScene.temporal.getState().resume()
-      useEditor.getState().setResizingStairSegmentWidth(null)
-      useViewer.getState().setHandleDragging(false)
-      dragCleanupRef.current = null
-    }
-    const onUp = () => {
-      swallowNextClick()
-      sfxEmitter.emit('sfx:item-place')
-      cleanup()
-    }
-    const onCancel = () => cleanup()
-
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
-  }
-
-  const direction = side === 'right' ? 1 : -1
-  const x = direction * (segmentNode.width / 2 + SIDE_HANDLE_OFFSET)
-  // Centerline of the segment body: vertically at half height, lengthwise
-  // at half run.
-  const y = segmentNode.height / 2
-  const z = segmentNode.length / 2
-  const rotationY = side === 'right' ? 0 : Math.PI
-
-  return (
-    <group position={[x, y, z]} rotation={[0, rotationY, 0]} scale={scale}>
-      <mesh
-        frustumCulled={false}
-        geometry={geometry}
-        material={material}
-        onPointerDown={activateWidthResize}
-        onPointerEnter={(event) => {
-          event.stopPropagation()
-          setIsHovered(true)
-          document.body.style.cursor = 'ew-resize'
-        }}
-        onPointerLeave={(event) => {
-          event.stopPropagation()
-          setIsHovered(false)
-          if (document.body.style.cursor === 'ew-resize') {
-            document.body.style.cursor = ''
-          }
-        }}
-        renderOrder={1010}
-      />
-    </group>
-  )
-}
-
-function StairSegmentLengthArrow({
-  segmentNode,
-  segmentObject,
-}: {
-  segmentNode: StairSegmentNode
-  segmentObject: Mesh
-}) {
-  const { geometry, material, scale, setIsHovered } = useArrowVisuals('ew-resize')
-  const { camera, raycaster, gl } = useThree()
-  const dragCleanupRef = useRef<(() => void) | null>(null)
-
-  useEffect(() => {
-    return () => {
-      dragCleanupRef.current?.()
-    }
-  }, [])
-
-  const activateLengthResize = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-
-    // Segment-local frame for the same chained-rotation reason the side
-    // arrows use it — see comment in StairSegmentSideArrow.
-    segmentObject.updateMatrixWorld()
-    const centerSegment = new Vector3(0, segmentNode.height / 2, segmentNode.length / 2)
-    const centerWorld = centerSegment.clone().applyMatrix4(segmentObject.matrixWorld)
-
-    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
-    if (planeNormal.lengthSq() === 0) return
-    planeNormal.normalize()
-    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
-
-    const ndc = new Vector2()
-    const setNDC = (clientX: number, clientY: number) => {
-      const rect = gl.domElement.getBoundingClientRect()
-      ndc.set(
-        ((clientX - rect.left) / rect.width) * 2 - 1,
-        -((clientY - rect.top) / rect.height) * 2 + 1,
-      )
-    }
-
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hitWorld = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
-    const hitLocal = segmentObject.worldToLocal(hitWorld.clone())
-
-    const initialLength = segmentNode.length
-    const initialPointerZ = hitLocal.z
-    const segmentId = segmentNode.id as AnyNodeId
-
-    document.body.style.cursor = 'ew-resize'
-    sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setResizingStairSegmentLength(segmentNode)
-    useViewer.getState().setHandleDragging(true)
-    useScene.temporal.getState().pause()
-
-    const onMove = (e: PointerEvent) => {
-      setNDC(e.clientX, e.clientY)
-      raycaster.setFromCamera(ndc, camera)
-      const hit = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, hit)) return
-      const hitLocal = segmentObject.worldToLocal(hit.clone())
-      // Segment-local +Z is the run direction. The segment's back-face
-      // (Z=0) is the chain anchor, so the run simply extends/contracts
-      // toward the back as the pointer's +Z component grows.
-      const lengthDelta = hitLocal.z - initialPointerZ
-      const newLength = Math.max(MIN_SEGMENT_LENGTH, initialLength + lengthDelta)
-      useScene.getState().updateNode(segmentId, { length: newLength })
-    }
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      window.removeEventListener('pointercancel', onCancel)
-      if (document.body.style.cursor === 'ew-resize') {
-        document.body.style.cursor = ''
-      }
-      useScene.temporal.getState().resume()
-      useEditor.getState().setResizingStairSegmentLength(null)
-      useViewer.getState().setHandleDragging(false)
-      dragCleanupRef.current = null
-    }
-    const onUp = () => {
-      swallowNextClick()
-      sfxEmitter.emit('sfx:item-place')
-      cleanup()
-    }
-    const onCancel = () => cleanup()
-
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
-  }
-
-  // Anchor at the back face (Z = length) of the segment, halfway up the
-  // body. Arrow geometry's chevron tip is at local +X, so rotate -π/2
-  // around Y to swing it toward +Z (outward from the segment).
-  const z = segmentNode.length + LENGTH_HANDLE_OFFSET
-  const y = segmentNode.height / 2
-
-  return (
-    <group position={[0, y, z]} rotation={[0, -Math.PI / 2, 0]} scale={scale}>
-      <mesh
-        frustumCulled={false}
-        geometry={geometry}
-        material={material}
-        onPointerDown={activateLengthResize}
-        onPointerEnter={(event) => {
-          event.stopPropagation()
-          setIsHovered(true)
-          document.body.style.cursor = 'ew-resize'
-        }}
-        onPointerLeave={(event) => {
-          event.stopPropagation()
-          setIsHovered(false)
-          if (document.body.style.cursor === 'ew-resize') {
-            document.body.style.cursor = ''
-          }
-        }}
-        renderOrder={1010}
-      />
-    </group>
-  )
-}
-
-function StairSegmentHeightArrow({
-  segmentNode,
-  segmentObject,
-}: {
-  segmentNode: StairSegmentNode
-  segmentObject: Mesh
-}) {
-  const { geometry, material, scale, setIsHovered } = useArrowVisuals('ns-resize')
-  const { camera, raycaster, gl } = useThree()
-  const dragCleanupRef = useRef<(() => void) | null>(null)
-
-  useEffect(() => {
-    return () => {
-      dragCleanupRef.current?.()
-    }
-  }, [])
-
-  const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-
-    // Segment-local frame anchor for the raycast plane — Y math itself is
-    // rotation-invariant, but the plane center needs to be at the actual
-    // mesh position (the chain owns it, not segmentNode.position).
-    segmentObject.updateMatrixWorld()
-    const centerSegment = new Vector3(0, segmentNode.height / 2, segmentNode.length / 2)
-    const centerWorld = centerSegment.clone().applyMatrix4(segmentObject.matrixWorld)
-
-    const planeNormal = new Vector3().subVectors(camera.position, centerWorld).setY(0)
-    if (planeNormal.lengthSq() === 0) return
-    planeNormal.normalize()
-    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, centerWorld)
-
-    const ndc = new Vector2()
-    const setNDC = (clientX: number, clientY: number) => {
-      const rect = gl.domElement.getBoundingClientRect()
-      ndc.set(
-        ((clientX - rect.left) / rect.width) * 2 - 1,
-        -((clientY - rect.top) / rect.height) * 2 + 1,
-      )
-    }
-
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hitWorld = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
-
-    const initialHeight = segmentNode.height
-    const initialPointerY = hitWorld.y
-    const segmentId = segmentNode.id as AnyNodeId
-
-    document.body.style.cursor = 'ns-resize'
-    sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setResizingStairSegmentHeight(segmentNode)
-    useViewer.getState().setHandleDragging(true)
-    useScene.temporal.getState().pause()
-
-    const onMove = (e: PointerEvent) => {
-      setNDC(e.clientX, e.clientY)
-      raycaster.setFromCamera(ndc, camera)
-      const hit = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, hit)) return
-      // Bottom of the segment stays at local Y = 0; only the top moves.
-      // Y is unaffected by the stair group's rotation (rotation is around
-      // Y), so world Y delta == local Y delta.
-      const delta = hit.y - initialPointerY
-      const newHeight = Math.max(MIN_SEGMENT_HEIGHT, initialHeight + delta)
-      useScene.getState().updateNode(segmentId, { height: newHeight })
-    }
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      window.removeEventListener('pointercancel', onCancel)
-      if (document.body.style.cursor === 'ns-resize') {
-        document.body.style.cursor = ''
-      }
-      useScene.temporal.getState().resume()
-      useEditor.getState().setResizingStairSegmentHeight(null)
-      useViewer.getState().setHandleDragging(false)
-      dragCleanupRef.current = null
-    }
-    const onUp = () => {
-      swallowNextClick()
-      sfxEmitter.emit('sfx:item-place')
-      cleanup()
-    }
-    const onCancel = () => cleanup()
-
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
-  }
-
-  // Sit above the top of the segment, centered along width and length.
-  const y = segmentNode.height + HEIGHT_HANDLE_OFFSET
-  const z = segmentNode.length / 2
-
-  return (
-    <group position={[0, y, z]}>
-      <group rotation={[0, Math.PI / 2, Math.PI / 2]} scale={scale}>
-        <mesh
-          frustumCulled={false}
-          geometry={geometry}
-          material={material}
-          onPointerDown={activateHeightResize}
-          onPointerEnter={(event) => {
-            event.stopPropagation()
-            setIsHovered(true)
-            document.body.style.cursor = 'ns-resize'
-          }}
-          onPointerLeave={(event) => {
-            event.stopPropagation()
-            setIsHovered(false)
-            if (document.body.style.cursor === 'ns-resize') {
-              document.body.style.cursor = ''
-            }
-          }}
-          renderOrder={1010}
-        />
-      </group>
-    </group>
-  )
-}
-
-// ───────────────────────────────────────────────────────────────────────
-// Parent-stair handles — ground-anchored action menu for the whole stair
-// (move / duplicate / delete). Mirrors the per-segment ground menu above
-// so a selected stair shows in-world chrome instead of the screen-space
-// `<FloatingActionMenu>`.
-// ───────────────────────────────────────────────────────────────────────
-
-export function StairHandles() {
-  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 selectedId = selectedIds.length === 1 ? selectedIds[0] : null
-  const selectedStair = useScene((state) => {
-    const node = selectedId ? state.nodes[selectedId as AnyNodeId] : null
-    return node?.type === 'stair' ? node : null
-  })
-
-  const shouldRender =
-    Boolean(selectedStair) && !isFloorplanHovered && mode !== 'delete' && !movingNode
-
-  if (!shouldRender || !selectedStair) return null
-  return <StairHandlesForStair stairNode={selectedStair} />
-}
-
-function StairHandlesForStair({ stairNode }: { stairNode: StairNode }) {
-  // Same portal-into-parent trick as `StairSegmentHandlesForSegment`: the
-  // stair group has `useNodeEvents` handlers, so anything rendered inside
-  // it bubbles up and would be traced by the outline post-process.
-  const stairParentId = stairNode.parentId
-
-  const [stairObject, setStairObject] = useState<Object3D | null>(
-    () => sceneRegistry.nodes.get(stairNode.id as AnyNodeId) ?? null,
-  )
-  const [parentObject, setParentObject] = useState<Object3D | null>(() =>
-    stairParentId ? (sceneRegistry.nodes.get(stairParentId as AnyNodeId) ?? null) : null,
-  )
-
-  useEffect(() => {
-    let frameId = 0
-    const resolve = () => {
-      const nextStair = sceneRegistry.nodes.get(stairNode.id as AnyNodeId) ?? null
-      const nextParent = stairParentId
-        ? (sceneRegistry.nodes.get(stairParentId as AnyNodeId) ?? null)
-        : null
-      setStairObject((current) => (current === nextStair ? current : nextStair))
-      setParentObject((current) => (current === nextParent ? current : nextParent))
-      if (!(nextStair && nextParent)) {
-        frameId = window.requestAnimationFrame(resolve)
-      }
-    }
-    resolve()
-    return () => {
-      if (frameId) window.cancelAnimationFrame(frameId)
-    }
-  }, [stairNode.id, stairParentId])
-
-  const stairPoseRef = useRef<Group>(null)
-
-  useFrame(() => {
-    const stairPose = stairPoseRef.current
-    if (!(stairPose && stairObject)) return
-    // Mirror the stair group's pose so the menu rides along when the stair
-    // is moved imperatively (e.g. mid-drag from `MoveRoofTool`).
-    stairPose.position.copy(stairObject.position)
-    stairPose.quaternion.copy(stairObject.quaternion)
-  })
-
-  if (!(stairObject && parentObject)) return null
-
-  const isCurvedOrSpiral = stairNode.stairType === 'curved' || stairNode.stairType === 'spiral'
-
-  return createPortal(
-    <group ref={stairPoseRef}>
-      {isCurvedOrSpiral ? (
-        <>
-          <CurvedStairRiseArrow stairNode={stairNode} stairObject={stairObject} />
-          <CurvedStairWidthArrow stairNode={stairNode} stairObject={stairObject} />
-          <CurvedStairInnerRadiusArrow stairNode={stairNode} stairObject={stairObject} />
-          <CurvedStairSweepArrow end="start" stairNode={stairNode} stairObject={stairObject} />
-          <CurvedStairSweepArrow end="end" stairNode={stairNode} stairObject={stairObject} />
-        </>
-      ) : null}
-    </group>,
-    parentObject,
-  )
-}
-
-// ───────────────────────────────────────────────────────────────────────
-// Curved / spiral stair arrows — three handles that map to the stair-level
-// parametric params (totalRise, width, innerRadius). Curved stairs have no
-// `stair-segment` children, so the segment arrows above don't apply.
-// ───────────────────────────────────────────────────────────────────────
-
-const CURVED_RISE_OFFSET = 0.35
-const CURVED_RADIAL_OFFSET = 0.16
-// Width arrow sits a bit further out than the inner radius arrow — pulls the
-// handle clear of the curved stair's outer body so it doesn't read as part of
-// the geometry. The companion ring hugs the outer edge with its own smaller
-// padding so it visually traces the stair's outer perimeter.
-const CURVED_WIDTH_HANDLE_OFFSET = 0.5
-const CURVED_OUTER_RING_OFFSET = 0.2
-const CURVED_INNER_RING_OFFSET = 0.2
-const MIN_CURVED_RISE = 0.3
-const MIN_CURVED_WIDTH = 0.4
-// Match the renderer floors so dragging can't push past what the geometry
-// will actually accept (`renderer.tsx` clamps innerRadius this way).
-const MIN_CURVED_INNER_RADIUS_SPIRAL = 0.05
-const MIN_CURVED_INNER_RADIUS_CURVED = 0.2
-// Sweep arrows: two handles, one per arc end, anchored on the outer rim at
-// midAngle = 0 — same axis as the width arrow but on a closer radial step
-// so the width arrow sits visibly further out than the sweep cluster. ±Z
-// offset keeps the chevrons from stacking: +Z is the END handle (grows
-// the +sweep/2 edge), -Z is the START handle.
-const CURVED_SWEEP_RADIAL_OFFSET = 0.3
-const CURVED_SWEEP_LATERAL_OFFSET = 0.24
-// Sweep clamps. Min is one short step's worth so the stair doesn't collapse
-// past visibility; max stops a hair shy of a full turn so the start / end
-// edges don't fight for the same pixel.
-const MIN_CURVED_SWEEP = Math.PI / 12
-const MAX_CURVED_SWEEP = Math.PI * 2 - 0.05
-
-type CurvedStairGeometry = {
-  isSpiral: boolean
-  stepCount: number
-  totalRise: number
-  innerRadius: number
-  outerRadius: number
-  width: number
-  sweepAngle: number
-  stepSweep: number
-  midRadius: number
-  topAngle: number
-  minInnerRadius: number
-}
-
-function readCurvedStairGeometry(stairNode: StairNode): CurvedStairGeometry {
-  const isSpiral = stairNode.stairType === 'spiral'
-  const stepCount = Math.max(2, Math.round(stairNode.stepCount ?? 10))
-  const totalRise = Math.max(stairNode.totalRise ?? 2.5, 0.1)
-  const width = Math.max(stairNode.width ?? 1, MIN_CURVED_WIDTH)
-  const minInnerRadius = isSpiral ? MIN_CURVED_INNER_RADIUS_SPIRAL : MIN_CURVED_INNER_RADIUS_CURVED
-  const innerRadius = Math.max(minInnerRadius, stairNode.innerRadius ?? 0.9)
-  const outerRadius = innerRadius + width
-  const sweepAngle = stairNode.sweepAngle ?? (isSpiral ? Math.PI * 2 : Math.PI / 2)
-  const stepSweep = sweepAngle / stepCount
-  return {
-    isSpiral,
-    stepCount,
-    totalRise,
-    innerRadius,
-    outerRadius,
-    width,
-    sweepAngle,
-    stepSweep,
-    midRadius: (innerRadius + outerRadius) / 2,
-    topAngle: sweepAngle / 2 - stepSweep / 2,
-    minInnerRadius,
-  }
-}
-
-function CurvedStairRiseArrow({
-  stairNode,
-  stairObject,
-}: {
-  stairNode: StairNode
-  stairObject: Object3D
-}) {
-  const { geometry, material, scale, setIsHovered } = useArrowVisuals('ns-resize')
-  const { camera, raycaster, gl } = useThree()
-  const dragCleanupRef = useRef<(() => void) | null>(null)
-
-  useEffect(() => {
-    return () => {
-      dragCleanupRef.current?.()
-    }
-  }, [])
-
-  const activateRiseResize = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-    stairObject.updateMatrixWorld()
-
-    const geom = readCurvedStairGeometry(stairNode)
-    // Spiral stairs anchor over the central pillar (local origin) so the
-    // rise arrow rides the column. Curved stairs anchor over the upper
-    // step's midline, where the user expects the "top of the run" to be.
-    const anchorLocal = geom.isSpiral
-      ? new Vector3(0, geom.totalRise, 0)
-      : new Vector3(
-          geom.midRadius * Math.cos(geom.topAngle),
-          geom.totalRise,
-          geom.midRadius * Math.sin(geom.topAngle),
-        )
-    const anchorWorld = anchorLocal.clone().applyMatrix4(stairObject.matrixWorld)
-
-    const planeNormal = new Vector3().subVectors(camera.position, anchorWorld).setY(0)
-    if (planeNormal.lengthSq() === 0) return
-    planeNormal.normalize()
-    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, anchorWorld)
-
-    const ndc = new Vector2()
-    const setNDC = (clientX: number, clientY: number) => {
-      const rect = gl.domElement.getBoundingClientRect()
-      ndc.set(
-        ((clientX - rect.left) / rect.width) * 2 - 1,
-        -((clientY - rect.top) / rect.height) * 2 + 1,
-      )
-    }
-
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hitWorld = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
-
-    const initialRise = geom.totalRise
-    const initialPointerY = hitWorld.y
-    const stairId = stairNode.id as AnyNodeId
-
-    document.body.style.cursor = 'ns-resize'
-    sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setResizingCurvedStairRise(stairNode)
-    useViewer.getState().setHandleDragging(true)
-    useScene.temporal.getState().pause()
-
-    const onMove = (e: PointerEvent) => {
-      setNDC(e.clientX, e.clientY)
-      raycaster.setFromCamera(ndc, camera)
-      const hit = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, hit)) return
-      // Y is unaffected by the stair group's rotation (rotation is Y-axis
-      // only), so world Y delta == local Y delta.
-      const delta = hit.y - initialPointerY
-      const newRise = Math.max(MIN_CURVED_RISE, initialRise + delta)
-      useScene.getState().updateNode(stairId, { totalRise: newRise })
-    }
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      window.removeEventListener('pointercancel', onCancel)
-      if (document.body.style.cursor === 'ns-resize') {
-        document.body.style.cursor = ''
-      }
-      useScene.temporal.getState().resume()
-      useEditor.getState().setResizingCurvedStairRise(null)
-      useViewer.getState().setHandleDragging(false)
-      dragCleanupRef.current = null
-    }
-    const onUp = () => {
-      swallowNextClick()
-      sfxEmitter.emit('sfx:item-place')
-      cleanup()
-    }
-    const onCancel = () => cleanup()
-
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
-  }
-
-  const geom = readCurvedStairGeometry(stairNode)
-  // Spiral: sit over the central pillar so the arrow tracks the column.
-  // Curved: sit over the upper step's midline (the visual "top" of the run).
-  const x = geom.isSpiral ? 0 : geom.midRadius * Math.cos(geom.topAngle)
-  const z = geom.isSpiral ? 0 : geom.midRadius * Math.sin(geom.topAngle)
-  const y = geom.totalRise + CURVED_RISE_OFFSET
-
-  return (
-    <group position={[x, y, z]}>
-      <group rotation={[0, Math.PI / 2, Math.PI / 2]} scale={scale}>
-        <mesh
-          frustumCulled={false}
-          geometry={geometry}
-          material={material}
-          onPointerDown={activateRiseResize}
-          onPointerEnter={(event) => {
-            event.stopPropagation()
-            setIsHovered(true)
-            document.body.style.cursor = 'ns-resize'
-          }}
-          onPointerLeave={(event) => {
-            event.stopPropagation()
-            setIsHovered(false)
-            if (document.body.style.cursor === 'ns-resize') {
-              document.body.style.cursor = ''
-            }
-          }}
-          renderOrder={1010}
-        />
-      </group>
-    </group>
-  )
-}
-
-function CurvedStairWidthArrow({
-  stairNode,
-  stairObject,
-}: {
-  stairNode: StairNode
-  stairObject: Object3D
-}) {
-  const { geometry, material, scale, isHovered, setIsHovered } = useArrowVisuals('ew-resize')
-  const isResizingWidth = useEditor((state) => state.resizingCurvedStairWidth?.id === stairNode.id)
-  const { camera, raycaster, gl } = useThree()
-  const dragCleanupRef = useRef<(() => void) | null>(null)
-
-  useEffect(() => {
-    return () => {
-      dragCleanupRef.current?.()
-    }
-  }, [])
-
-  const activateWidthResize = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-    stairObject.updateMatrixWorld()
-
-    const geom = readCurvedStairGeometry(stairNode)
-    // midAngle = 0 puts the radial axis along stair-local +X.
-    const anchorLocal = new Vector3(geom.outerRadius, geom.totalRise / 2, 0)
-    const anchorWorld = anchorLocal.clone().applyMatrix4(stairObject.matrixWorld)
-
-    const planeNormal = new Vector3().subVectors(camera.position, anchorWorld).setY(0)
-    if (planeNormal.lengthSq() === 0) return
-    planeNormal.normalize()
-    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, anchorWorld)
-
-    const ndc = new Vector2()
-    const setNDC = (clientX: number, clientY: number) => {
-      const rect = gl.domElement.getBoundingClientRect()
-      ndc.set(
-        ((clientX - rect.left) / rect.width) * 2 - 1,
-        -((clientY - rect.top) / rect.height) * 2 + 1,
-      )
-    }
-
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hitWorld = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
-    const hitLocal = stairObject.worldToLocal(hitWorld.clone())
-
-    const initialWidth = geom.width
-    const initialPointerX = hitLocal.x
-    const stairId = stairNode.id as AnyNodeId
-
-    document.body.style.cursor = 'ew-resize'
-    sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setResizingCurvedStairWidth(stairNode)
-    useViewer.getState().setHandleDragging(true)
-    useScene.temporal.getState().pause()
-
-    const onMove = (e: PointerEvent) => {
-      setNDC(e.clientX, e.clientY)
-      raycaster.setFromCamera(ndc, camera)
-      const hit = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, hit)) return
-      const hitLocal = stairObject.worldToLocal(hit.clone())
-      // At midAngle = 0 the radial axis is +X, so the outward pointer delta
-      // is simply the X delta in stair-local space.
-      const widthDelta = hitLocal.x - initialPointerX
-      const newWidth = Math.max(MIN_CURVED_WIDTH, initialWidth + widthDelta)
-      useScene.getState().updateNode(stairId, { width: newWidth })
-    }
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      window.removeEventListener('pointercancel', onCancel)
-      if (document.body.style.cursor === 'ew-resize') {
-        document.body.style.cursor = ''
-      }
-      useScene.temporal.getState().resume()
-      useEditor.getState().setResizingCurvedStairWidth(null)
-      useViewer.getState().setHandleDragging(false)
-      dragCleanupRef.current = null
-    }
-    const onUp = () => {
-      swallowNextClick()
-      sfxEmitter.emit('sfx:item-place')
-      cleanup()
-    }
-    const onCancel = () => cleanup()
-
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
-  }
-
-  const geom = readCurvedStairGeometry(stairNode)
-  const x = geom.outerRadius + CURVED_WIDTH_HANDLE_OFFSET
-  const y = geom.totalRise / 2
-  const showOuterRing = isHovered || isResizingWidth
-
-  return (
-    <>
-      {showOuterRing ? (
-        // Ring hugs the outer edge — sits just outside the stair body so it
-        // traces the perimeter, independent of where the arrow handle floats.
-        <CurvedStairRing radius={geom.outerRadius + CURVED_OUTER_RING_OFFSET} y={y} />
-      ) : null}
-      <group position={[x, y, 0]} scale={scale}>
-        <mesh
-          frustumCulled={false}
-          geometry={geometry}
-          material={material}
-          onPointerDown={activateWidthResize}
-          onPointerEnter={(event) => {
-            event.stopPropagation()
-            setIsHovered(true)
-            document.body.style.cursor = 'ew-resize'
-          }}
-          onPointerLeave={(event) => {
-            event.stopPropagation()
-            setIsHovered(false)
-            if (document.body.style.cursor === 'ew-resize') {
-              document.body.style.cursor = ''
-            }
-          }}
-          renderOrder={1010}
-        />
-      </group>
-    </>
-  )
-}
-
-// Thin ring drawn at a given stair-local radius, floating at the companion
-// arrow's height so the two read as one connected guide. Uses the arrow's
-// color so the handle and its guide ring feel like a single piece of chrome.
-function CurvedStairRing({ radius, y }: { radius: number; y: number }) {
-  const ringGeom = useMemo(() => {
-    const inner = Math.max(radius - 0.015, 0.001)
-    const outer = radius + 0.015
-    return new RingGeometry(inner, outer, 96)
-  }, [radius])
-
-  const ringMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        transparent: true,
-        opacity: 0.95,
-        depthTest: false,
-      }),
-    [],
-  )
-
-  useEffect(() => () => ringGeom.dispose(), [ringGeom])
-  useEffect(() => () => ringMaterial.dispose(), [ringMaterial])
-
-  return (
-    <mesh
-      geometry={ringGeom}
-      material={ringMaterial}
-      position={[0, y, 0]}
-      renderOrder={1009}
-      rotation={[-Math.PI / 2, 0, 0]}
-    />
-  )
-}
-
-function CurvedStairInnerRadiusArrow({
-  stairNode,
-  stairObject,
-}: {
-  stairNode: StairNode
-  stairObject: Object3D
-}) {
-  const { geometry, material, scale, isHovered, setIsHovered } = useArrowVisuals('ew-resize')
-  const isResizingInner = useEditor(
-    (state) => state.resizingCurvedStairInnerRadius?.id === stairNode.id,
-  )
-  const { camera, raycaster, gl } = useThree()
-  const dragCleanupRef = useRef<(() => void) | null>(null)
-
-  useEffect(() => {
-    return () => {
-      dragCleanupRef.current?.()
-    }
-  }, [])
-
-  const activateInnerRadiusResize = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-    stairObject.updateMatrixWorld()
-
-    const geom = readCurvedStairGeometry(stairNode)
-    const anchorLocal = new Vector3(geom.innerRadius, geom.totalRise / 2, 0)
-    const anchorWorld = anchorLocal.clone().applyMatrix4(stairObject.matrixWorld)
-
-    const planeNormal = new Vector3().subVectors(camera.position, anchorWorld).setY(0)
-    if (planeNormal.lengthSq() === 0) return
-    planeNormal.normalize()
-    const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, anchorWorld)
-
-    const ndc = new Vector2()
-    const setNDC = (clientX: number, clientY: number) => {
-      const rect = gl.domElement.getBoundingClientRect()
-      ndc.set(
-        ((clientX - rect.left) / rect.width) * 2 - 1,
-        -((clientY - rect.top) / rect.height) * 2 + 1,
-      )
-    }
-
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hitWorld = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
-    const hitLocal = stairObject.worldToLocal(hitWorld.clone())
-
-    const initialInnerRadius = geom.innerRadius
-    const initialOuterRadius = geom.outerRadius
-    const initialPointerX = hitLocal.x
-    const minInnerRadius = geom.minInnerRadius
-    const maxInnerRadius = initialOuterRadius - MIN_CURVED_WIDTH
-    const stairId = stairNode.id as AnyNodeId
-
-    document.body.style.cursor = 'ew-resize'
-    sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setResizingCurvedStairInnerRadius(stairNode)
-    useViewer.getState().setHandleDragging(true)
-    useScene.temporal.getState().pause()
-
-    const onMove = (e: PointerEvent) => {
-      setNDC(e.clientX, e.clientY)
-      raycaster.setFromCamera(ndc, camera)
-      const hit = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, hit)) return
-      const hitLocal = stairObject.worldToLocal(hit.clone())
-      // +X pointer delta = inner edge moving outward = innerRadius grows.
-      const innerDelta = hitLocal.x - initialPointerX
-      const newInnerRadius = Math.min(
-        maxInnerRadius,
-        Math.max(minInnerRadius, initialInnerRadius + innerDelta),
-      )
-      // Keep the outer edge pinned in place — width absorbs the change so the
-      // outer rim doesn't shift with the inner one.
-      const newWidth = initialOuterRadius - newInnerRadius
-      useScene.getState().updateNode(stairId, {
-        innerRadius: newInnerRadius,
-        width: newWidth,
-      })
-    }
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      window.removeEventListener('pointercancel', onCancel)
-      if (document.body.style.cursor === 'ew-resize') {
-        document.body.style.cursor = ''
-      }
-      useScene.temporal.getState().resume()
-      useEditor.getState().setResizingCurvedStairInnerRadius(null)
-      useViewer.getState().setHandleDragging(false)
-      dragCleanupRef.current = null
-    }
-    const onUp = () => {
-      swallowNextClick()
-      sfxEmitter.emit('sfx:item-place')
-      cleanup()
-    }
-    const onCancel = () => cleanup()
-
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
-  }
-
-  const geom = readCurvedStairGeometry(stairNode)
-  const x = geom.innerRadius - CURVED_RADIAL_OFFSET
-  const y = geom.totalRise / 2
-  const showInnerRing = isHovered || isResizingInner
-  // Pull the ring inward from the inner edge by its own offset — clamped so a
-  // tiny inner radius (e.g. spiral default 0.05) doesn't push the ring through
-  // the center.
-  const innerRingRadius = Math.max(geom.innerRadius - CURVED_INNER_RING_OFFSET, 0.05)
-
-  return (
-    <>
-      {showInnerRing ? <CurvedStairRing radius={innerRingRadius} y={y} /> : null}
-      <group position={[x, y, 0]} rotation={[0, Math.PI, 0]} scale={scale}>
-        <mesh
-          frustumCulled={false}
-          geometry={geometry}
-          material={material}
-          onPointerDown={activateInnerRadiusResize}
-          onPointerEnter={(event) => {
-            event.stopPropagation()
-            setIsHovered(true)
-            document.body.style.cursor = 'ew-resize'
-          }}
-          onPointerLeave={(event) => {
-            event.stopPropagation()
-            setIsHovered(false)
-            if (document.body.style.cursor === 'ew-resize') {
-              document.body.style.cursor = ''
-            }
-          }}
-          renderOrder={1010}
-        />
-      </group>
-    </>
-  )
-}
-
-// Sweep arrows — one tangent handle per arc end, so each side of the sweep
-// can be extended / retracted independently. The opposite edge is held
-// world-fixed by nudging `stairNode.rotation` by half the applied delta:
-//   - END handle:   sweep += Δ, rotation += Δ/2   (start edge stays put)
-//   - START handle: sweep -= Δ, rotation -= Δ/2   (end edge stays put,
-//                                                  because rotation shifts
-//                                                  the midpoint *with* the
-//                                                  moving start)
-// where Δ is the world angular delta of the cursor from drag-start. Working
-// in world space (not stair-local) sidesteps the moving-frame problem —
-// updating `rotation` mid-drag rotates the local frame, but the cursor's
-// world position doesn't shift under the user's mouse.
-function CurvedStairSweepArrow({
-  end,
-  stairNode,
-  stairObject,
-}: {
-  end: 'start' | 'end'
-  stairNode: StairNode
-  stairObject: Object3D
-}) {
-  const { geometry, material, scale, setIsHovered } = useArrowVisuals('ew-resize')
-  const { camera, raycaster, gl } = useThree()
-  const dragCleanupRef = useRef<(() => void) | null>(null)
-
-  useEffect(() => {
-    return () => {
-      dragCleanupRef.current?.()
-    }
-  }, [])
-
-  const activateSweepResize = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-    stairObject.updateMatrixWorld()
-
-    const geom = readCurvedStairGeometry(stairNode)
-    const initialSweep = geom.sweepAngle
-    const initialRotation = stairNode.rotation as number
-    const sweepSign = Math.sign(initialSweep) || 1
-
-    // Drag plane = horizontal slab at the arrow's Y. The cursor's projection
-    // onto this plane gives a stable world-space (X,Z) point we can convert
-    // into an angle around the stair's center.
-    const centerWorld = new Vector3()
-    stairObject.getWorldPosition(centerWorld)
-    const planeY = centerWorld.y + geom.totalRise / 2
-    const plane = new Plane(new Vector3(0, 1, 0), -planeY)
-
-    const ndc = new Vector2()
-    const setNDC = (clientX: number, clientY: number) => {
-      const rect = gl.domElement.getBoundingClientRect()
-      ndc.set(
-        ((clientX - rect.left) / rect.width) * 2 - 1,
-        -((clientY - rect.top) / rect.height) * 2 + 1,
-      )
-    }
-
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hitWorld = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
-
-    const initialPointerAngle = Math.atan2(hitWorld.z - centerWorld.z, hitWorld.x - centerWorld.x)
-
-    const stairId = stairNode.id as AnyNodeId
-
-    document.body.style.cursor = 'ew-resize'
-    sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setResizingCurvedStairSweep(stairNode)
-    useViewer.getState().setHandleDragging(true)
-    useScene.temporal.getState().pause()
-
-    const onMove = (e: PointerEvent) => {
-      setNDC(e.clientX, e.clientY)
-      raycaster.setFromCamera(ndc, camera)
-      const hit = new Vector3()
-      if (!raycaster.ray.intersectPlane(plane, hit)) return
-
-      const currentPointerAngle = Math.atan2(hit.z - centerWorld.z, hit.x - centerWorld.x)
-      // Normalize the angular delta to [-π, π] so a drag that crosses the
-      // ±π wrap-around point doesn't flip sign mid-gesture.
-      let delta = currentPointerAngle - initialPointerAngle
-      while (delta > Math.PI) delta -= 2 * Math.PI
-      while (delta < -Math.PI) delta += 2 * Math.PI
-
-      // END handle: cursor angle delta == change in the end edge's world
-      // angle → sweep += Δ. START handle: same delta, but it's the start
-      // edge moving, so sweep shrinks by Δ.
-      const sweepDelta = end === 'end' ? delta : -delta
-      const targetSweep = initialSweep + sweepDelta
-      // Clamp magnitude; preserve original winding sign.
-      const clampedAbs = Math.min(
-        MAX_CURVED_SWEEP,
-        Math.max(MIN_CURVED_SWEEP, Math.abs(targetSweep)),
-      )
-      const newSweep = sweepSign * clampedAbs
-      const appliedSweepDelta = newSweep - initialSweep
-      // Three.js R_y(rot) maps stair-local angle θ to world angle (θ − rot).
-      // So the world position of an edge is (local_angle − rotation). To make
-      // the *grabbed* edge follow the cursor while the *other* edge stays
-      // world-fixed:
-      //   END  fixed-start:  Δ_world_start = −ΔS/2 − ΔR = 0 → ΔR = −ΔS/2
-      //   START fixed-end:   Δ_world_end   = +ΔS/2 − ΔR = 0 → ΔR = +ΔS/2
-      // The previous +/-ΔS/2 mapping had both signs flipped — the cursor
-      // ended up controlling the opposite edge.
-      const rotationShift = end === 'end' ? -appliedSweepDelta / 2 : appliedSweepDelta / 2
-      const newRotation = initialRotation + rotationShift
-
-      useScene.getState().updateNode(stairId, {
-        sweepAngle: newSweep,
-        rotation: newRotation,
-      })
-    }
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      window.removeEventListener('pointercancel', onCancel)
-      if (document.body.style.cursor === 'ew-resize') {
-        document.body.style.cursor = ''
-      }
-      useScene.temporal.getState().resume()
-      useEditor.getState().setResizingCurvedStairSweep(null)
-      useViewer.getState().setHandleDragging(false)
-      dragCleanupRef.current = null
-    }
-    const onUp = () => {
-      swallowNextClick()
-      sfxEmitter.emit('sfx:item-place')
-      cleanup()
-    }
-    const onCancel = () => cleanup()
-
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
-  }
-
-  // Both handles cluster beside the width arrow at the +X rim anchor
-  // (midAngle = 0). END sits on the +Z side of the anchor, START on -Z, so
-  // the spatial layout matches: drag END toward +Z (CCW) to grow, drag
-  // START toward -Z (CW) to grow. sweepSign flips the side assignment for
-  // CW-wound stairs so the spatial mapping holds either way.
-  const geom = readCurvedStairGeometry(stairNode)
-  const sweepSign = Math.sign(geom.sweepAngle) || 1
-  const x = geom.outerRadius + CURVED_SWEEP_RADIAL_OFFSET
-  const z =
-    end === 'end'
-      ? sweepSign * CURVED_SWEEP_LATERAL_OFFSET
-      : -sweepSign * CURVED_SWEEP_LATERAL_OFFSET
-  const y = geom.totalRise / 2
-  // At anchor midAngle = 0 the CCW tangent is world +Z; three.js R_y(-π/2)
-  // maps local +X (chevron tip) → +Z. END handle points +Z (grow CCW),
-  // START handle points -Z (grow CW). sweepSign flips both for CW-wound
-  // stairs so each chevron still points in its own grow direction.
-  const rotationY = end === 'end' ? -sweepSign * (Math.PI / 2) : sweepSign * (Math.PI / 2)
-
-  return (
-    <group position={[x, y, z]} rotation={[0, rotationY, 0]} scale={scale}>
-      <mesh
-        frustumCulled={false}
-        geometry={geometry}
-        material={material}
-        onPointerDown={activateSweepResize}
-        onPointerEnter={(event) => {
-          event.stopPropagation()
-          setIsHovered(true)
-          document.body.style.cursor = 'ew-resize'
-        }}
-        onPointerLeave={(event) => {
-          event.stopPropagation()
-          setIsHovered(false)
-          if (document.body.style.cursor === 'ew-resize') {
-            document.body.style.cursor = ''
-          }
-        }}
-        renderOrder={1010}
-      />
-    </group>
-  )
-}
diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
index 4d3a71bfb..860477d4d 100644
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -181,7 +181,6 @@ function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
       {handles.map((handle) => (
         <WallMoveArrowHandle handle={handle} key={handle.key} wall={wall} />
       ))}
-      <WallHeightArrowHandle wall={wall} />
       <WallCornerLeaderHandle endpoint="start" wall={wall} />
       <WallCornerLeaderHandle endpoint="end" wall={wall} />
     </group>,
@@ -333,158 +332,6 @@ function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint:
   )
 }
 
-function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
-  const [isHovered, setIsHovered] = useState(false)
-  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
-  const arrowMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        depthTest: false,
-        depthWrite: false,
-        transparent: true,
-        opacity: 1,
-      }),
-    [],
-  )
-  const { camera, raycaster, gl } = useThree()
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
-  const dragCleanupRef = useRef<(() => void) | null>(null)
-
-  useEffect(() => {
-    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [arrowMaterial, isHovered])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'ns-resize') {
-        document.body.style.cursor = ''
-      }
-      dragCleanupRef.current?.()
-    }
-  }, [])
-
-  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
-  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
-
-  // Sit on the visual centre of the wall — for curved walls that's the
-  // arc apex at t=0.5, not the chord midpoint. Use the curve tangent for
-  // the yaw so the arrow's local frame matches the wall direction at the
-  // apex, consistent with `getWallMoveHandles`.
-  const curveFrame = isCurvedWall(wall) ? getWallCurveFrameAt(wall, 0.5) : null
-  const midX = curveFrame ? curveFrame.point.x : (wall.start[0] + wall.end[0]) / 2
-  const midZ = curveFrame ? curveFrame.point.y : (wall.start[1] + wall.end[1]) / 2
-  const dirX = curveFrame ? curveFrame.tangent.x : wall.end[0] - wall.start[0]
-  const dirZ = curveFrame ? curveFrame.tangent.y : wall.end[1] - wall.start[1]
-  const wallAngle = Math.atan2(-dirZ, dirX)
-  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
-  const handleY = wallHeight + HEIGHT_HANDLE_OFFSET
-
-  const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-    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.
-    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 setNDC = (clientX: number, clientY: number) => {
-      const rect = gl.domElement.getBoundingClientRect()
-      ndc.set(
-        ((clientX - rect.left) / rect.width) * 2 - 1,
-        -((clientY - rect.top) / rect.height) * 2 + 1,
-      )
-    }
-
-    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
-    raycaster.setFromCamera(ndc, camera)
-    const hit = new Vector3()
-    if (!raycaster.ray.intersectPlane(plane, hit)) return
-
-    const initialHeight = wall.height ?? DEFAULT_WALL_HEIGHT
-    const initialY = hit.y
-    const wallId = wall.id as AnyNodeId
-
-    document.body.style.cursor = 'ns-resize'
-    sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setResizingWallHeight(wall)
-    // 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.
-    useViewer.getState().setHandleDragging(true)
-    useScene.temporal.getState().pause()
-
-    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))
-      useScene.getState().updateNode(wallId, { height: newHeight })
-    }
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      window.removeEventListener('pointercancel', onCancel)
-      if (document.body.style.cursor === 'ns-resize') {
-        document.body.style.cursor = ''
-      }
-      useScene.temporal.getState().resume()
-      useEditor.getState().setResizingWallHeight(null)
-      useViewer.getState().setHandleDragging(false)
-      dragCleanupRef.current = null
-    }
-    const onUp = () => {
-      swallowNextClick()
-      sfxEmitter.emit('sfx:item-place')
-      cleanup()
-    }
-    const onCancel = () => cleanup()
-
-    dragCleanupRef.current = cleanup
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-    window.addEventListener('pointercancel', onCancel)
-  }
-
-  return (
-    <group position={[midX, handleY, midZ]} rotation={[0, wallAngle, 0]}>
-      <group rotation={[0, Math.PI / 2, Math.PI / 2]} scale={scale}>
-        <mesh
-          // Geometry-as-prop + frustumCulled={false} — see WallMoveArrowHandle.
-          frustumCulled={false}
-          geometry={arrowGeometry}
-          material={arrowMaterial}
-          onPointerDown={activateHeightResize}
-          onPointerEnter={(event) => {
-            event.stopPropagation()
-            setIsHovered(true)
-            document.body.style.cursor = 'ns-resize'
-          }}
-          onPointerLeave={(event) => {
-            event.stopPropagation()
-            setIsHovered(false)
-            if (document.body.style.cursor === 'ns-resize') {
-              document.body.style.cursor = ''
-            }
-          }}
-          renderOrder={1002}
-        />
-      </group>
-    </group>
-  )
-}
-
 function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMoveHandle }) {
   const [isHovered, setIsHovered] = useState(false)
   const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
diff --git a/packages/nodes/src/stair/definition.ts b/packages/nodes/src/stair/definition.ts
index c95b14804..266026d16 100644
--- a/packages/nodes/src/stair/definition.ts
+++ b/packages/nodes/src/stair/definition.ts
@@ -1,4 +1,195 @@
-import { type NodeDefinition, StairNode as StairNodeSchema } from '@pascal-app/core'
+import {
+  type HandleDescriptor,
+  type NodeDefinition,
+  type StairNode as StairNodeType,
+  StairNode as StairNodeSchema,
+} from '@pascal-app/core'
+
+const MIN_CURVED_RISE = 0.3
+const MIN_CURVED_WIDTH = 0.4
+const MIN_CURVED_INNER_RADIUS_SPIRAL = 0.05
+const MIN_CURVED_INNER_RADIUS_CURVED = 0.2
+const MIN_CURVED_SWEEP = Math.PI / 12
+const MAX_CURVED_SWEEP = Math.PI * 2 - 0.05
+const CURVED_RISE_OFFSET = 0.35
+const CURVED_WIDTH_HANDLE_OFFSET = 0.5
+const CURVED_RADIAL_OFFSET = 0.16
+const CURVED_SWEEP_RADIAL_OFFSET = 0.3
+const CURVED_SWEEP_LATERAL_OFFSET = 0.24
+
+type CurvedStairGeom = {
+  isSpiral: boolean
+  stepCount: number
+  totalRise: number
+  innerRadius: number
+  outerRadius: number
+  width: number
+  sweepAngle: number
+  stepSweep: number
+  midRadius: number
+  topAngle: number
+  minInnerRadius: number
+}
+
+function readCurvedStairGeometry(node: StairNodeType): CurvedStairGeom {
+  const isSpiral = node.stairType === 'spiral'
+  const stepCount = Math.max(2, Math.round(node.stepCount ?? 10))
+  const totalRise = Math.max(node.totalRise ?? 2.5, 0.1)
+  const width = Math.max(node.width ?? 1, MIN_CURVED_WIDTH)
+  const minInnerRadius = isSpiral ? MIN_CURVED_INNER_RADIUS_SPIRAL : MIN_CURVED_INNER_RADIUS_CURVED
+  const innerRadius = Math.max(minInnerRadius, node.innerRadius ?? 0.9)
+  const outerRadius = innerRadius + width
+  const sweepAngle = node.sweepAngle ?? (isSpiral ? Math.PI * 2 : Math.PI / 2)
+  const stepSweep = sweepAngle / stepCount
+  return {
+    isSpiral,
+    stepCount,
+    totalRise,
+    innerRadius,
+    outerRadius,
+    width,
+    sweepAngle,
+    stepSweep,
+    midRadius: (innerRadius + outerRadius) / 2,
+    topAngle: sweepAngle / 2 - stepSweep / 2,
+    minInnerRadius,
+  }
+}
+
+function isCurvedOrSpiral(node: StairNodeType): boolean {
+  return node.stairType === 'curved' || node.stairType === 'spiral'
+}
+
+function curvedRiseHandle(): HandleDescriptor<StairNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min',
+    min: MIN_CURVED_RISE,
+    currentValue: (n) => Math.max(n.totalRise ?? 2.5, 0.1),
+    apply: (_n, newRise) => ({ totalRise: newRise }),
+    placement: {
+      position: (n) => {
+        const g = readCurvedStairGeometry(n)
+        // Spiral: over the central pillar. Curved: above the upper step's
+        // midline so the arrow sits where users read "top of the run".
+        const x = g.isSpiral ? 0 : g.midRadius * Math.cos(g.topAngle)
+        const z = g.isSpiral ? 0 : g.midRadius * Math.sin(g.topAngle)
+        return [x, g.totalRise + CURVED_RISE_OFFSET, z]
+      },
+    },
+  }
+}
+
+function curvedWidthHandle(): HandleDescriptor<StairNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'x',
+    anchor: 'min',
+    min: MIN_CURVED_WIDTH,
+    currentValue: (n) => Math.max(n.width ?? 1, MIN_CURVED_WIDTH),
+    apply: (_n, newWidth) => ({ width: newWidth }),
+    placement: {
+      position: (n) => {
+        const g = readCurvedStairGeometry(n)
+        return [g.outerRadius + CURVED_WIDTH_HANDLE_OFFSET, g.totalRise / 2, 0]
+      },
+    },
+  }
+}
+
+function curvedInnerRadiusHandle(): HandleDescriptor<StairNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'x',
+    anchor: 'min',
+    min: (n) =>
+      n.stairType === 'spiral' ? MIN_CURVED_INNER_RADIUS_SPIRAL : MIN_CURVED_INNER_RADIUS_CURVED,
+    currentValue: (n) => {
+      const minIR =
+        n.stairType === 'spiral' ? MIN_CURVED_INNER_RADIUS_SPIRAL : MIN_CURVED_INNER_RADIUS_CURVED
+      return Math.max(minIR, n.innerRadius ?? 0.9)
+    },
+    // Adjusting innerRadius alone would also push outerRadius outward,
+    // visually moving the outside of the stair. Compensate by reducing
+    // width by the same amount so the outer rim stays put.
+    apply: (initial, newInner) => {
+      const g = readCurvedStairGeometry(initial)
+      const delta = newInner - g.innerRadius
+      return {
+        innerRadius: newInner,
+        width: Math.max(MIN_CURVED_WIDTH, g.width - delta),
+      }
+    },
+    placement: {
+      position: (n) => {
+        const g = readCurvedStairGeometry(n)
+        return [g.innerRadius - CURVED_RADIAL_OFFSET, g.totalRise / 2, 0]
+      },
+      rotationY: () => Math.PI,
+    },
+  }
+}
+
+function curvedSweepHandle(end: 'start' | 'end'): HandleDescriptor<StairNodeType> {
+  return {
+    kind: 'arc-resize',
+    axis: 'angular',
+    end,
+    apply: (initial, delta) => {
+      const initialSweep = initial.sweepAngle ?? Math.PI / 2
+      const initialRotation = (initial.rotation as number) ?? 0
+      const sweepSign = Math.sign(initialSweep) || 1
+      // END handle: cursor angle delta IS the sweep delta.
+      // START handle: cursor angle delta is the negation of the sweep delta.
+      const sweepDelta = end === 'end' ? delta : -delta
+      const targetSweep = initialSweep + sweepDelta
+      const clampedAbs = Math.min(
+        MAX_CURVED_SWEEP,
+        Math.max(MIN_CURVED_SWEEP, Math.abs(targetSweep)),
+      )
+      const newSweep = sweepSign * clampedAbs
+      const appliedDelta = newSweep - initialSweep
+      // Re-orient the stair so the OPPOSITE edge stays world-fixed:
+      //   END  fixed-start: ΔR = −ΔS / 2
+      //   START fixed-end : ΔR = +ΔS / 2
+      const rotationShift = end === 'end' ? -appliedDelta / 2 : appliedDelta / 2
+      return {
+        sweepAngle: newSweep,
+        rotation: initialRotation + rotationShift,
+      }
+    },
+    placement: {
+      position: (n) => {
+        const g = readCurvedStairGeometry(n)
+        const sweepSign = Math.sign(g.sweepAngle) || 1
+        const z =
+          end === 'end'
+            ? sweepSign * CURVED_SWEEP_LATERAL_OFFSET
+            : -sweepSign * CURVED_SWEEP_LATERAL_OFFSET
+        return [g.outerRadius + CURVED_SWEEP_RADIAL_OFFSET, g.totalRise / 2, z]
+      },
+      rotationY: (n) => {
+        const sweepSign = Math.sign(n.sweepAngle ?? Math.PI / 2) || 1
+        return end === 'end' ? -sweepSign * (Math.PI / 2) : sweepSign * (Math.PI / 2)
+      },
+    },
+  }
+}
+
+function stairHandles(node: StairNodeType): HandleDescriptor<StairNodeType>[] {
+  // Straight stairs have no parent-level arrows — the segment children
+  // each render their own (width / length / height). Curved + spiral
+  // stairs use 5 arrows directly on the parent (no segments).
+  if (!isCurvedOrSpiral(node)) return []
+  return [
+    curvedRiseHandle(),
+    curvedWidthHandle(),
+    curvedInnerRadiusHandle(),
+    curvedSweepHandle('start'),
+    curvedSweepHandle('end'),
+  ]
+}
 import {
   curvedStairInnerRadiusAffordance,
   curvedStairSweepAffordance,
@@ -36,6 +227,7 @@ export const stairDefinition: NodeDefinition<typeof StairNode> = {
   },
 
   parametrics: stairParametrics,
+  handles: stairHandles,
 
   renderer: {
     kind: 'parametric',
diff --git a/packages/nodes/src/wall/definition.ts b/packages/nodes/src/wall/definition.ts
index d6a7e35b7..00eaa543e 100644
--- a/packages/nodes/src/wall/definition.ts
+++ b/packages/nodes/src/wall/definition.ts
@@ -1,4 +1,11 @@
-import type { NodeDefinition } from '@pascal-app/core'
+import {
+  DEFAULT_WALL_HEIGHT,
+  getWallCurveFrameAt,
+  type HandleDescriptor,
+  isCurvedWall,
+  type NodeDefinition,
+  type WallNode as WallNodeType,
+} from '@pascal-app/core'
 import { buildWallFloorplan } from './floorplan'
 import { wallCurveAffordance, wallMoveEndpointAffordance } from './floorplan-affordances'
 import { wallFloorplanMoveTarget } from './floorplan-move'
@@ -6,6 +13,46 @@ import { wallPaint } from './paint'
 import { wallParametrics } from './parametrics'
 import { WallNode } from './schema'
 
+const HEIGHT_HANDLE_OFFSET = 0.26
+const MIN_WALL_HEIGHT = 0.5
+
+// Wall's height arrow sits at the wall's visual centerline — apex for
+// curved walls, chord midpoint for straight. Migrated to the registry;
+// side-move arrows + corner pickers stay on `wall-move-side-handles.tsx`
+// because they're click-to-engage-mode affordances (move whole wall /
+// move endpoint) rather than drag-resize, and tap-action descriptors
+// would need editor-state plumbing the descriptor union doesn't have yet.
+function wallHeightHandle(): HandleDescriptor<WallNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min',
+    min: MIN_WALL_HEIGHT,
+    currentValue: (n) => n.height ?? DEFAULT_WALL_HEIGHT,
+    apply: (_n, newHeight) => ({ height: newHeight }),
+    placement: {
+      position: (n) => {
+        // Curved walls: apex at t=0.5. Straight: chord midpoint.
+        const curve = isCurvedWall(n) ? getWallCurveFrameAt(n, 0.5) : null
+        const midX = curve ? curve.point.x : (n.start[0] + n.end[0]) / 2
+        const midZ = curve ? curve.point.y : (n.start[1] + n.end[1]) / 2
+        const h = n.height ?? DEFAULT_WALL_HEIGHT
+        return [midX, h + HEIGHT_HANDLE_OFFSET, midZ]
+      },
+      // Align the arrow with the wall's tangent at the apex so the chevron
+      // points along the wall, matching the legacy WallHeightArrowHandle.
+      rotationY: (n) => {
+        const curve = isCurvedWall(n) ? getWallCurveFrameAt(n, 0.5) : null
+        const dirX = curve ? curve.tangent.x : n.end[0] - n.start[0]
+        const dirZ = curve ? curve.tangent.y : n.end[1] - n.start[1]
+        return Math.atan2(-dirZ, dirX)
+      },
+    },
+  }
+}
+
+const wallHandles: HandleDescriptor<WallNodeType>[] = [wallHeightHandle()]
+
 /**
  * Wall — the Phase 3 stress test of the registry-driven node model.
  *
@@ -65,6 +112,7 @@ export const wallDefinition: NodeDefinition<typeof WallNode> = {
   },
 
   parametrics: wallParametrics,
+  handles: wallHandles,
 
   // Stage D — all four wall drag affordances live in this folder.
   // curve / move-endpoint / move are 1:1 ports of the legacy tools

From a1bc6cb099141867012a507492c1c891e4994528 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Tue, 26 May 2026 01:12:50 +0530
Subject: [PATCH 27/48] handles: tap-action descriptor + EditorApi; finish wall
 + fence migration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes the final gap in the registry-driven handle migration. Wall side-
move + corner pickers + fence side-move were the last legacy handles
because they're click-to-engage-mode affordances (hand the node to its
move tool / start an endpoint drag), not drag-resize — `apply(node,
value, sceneApi)` had no path to editor state.

- New `EditorApi` interface in core (alongside `SceneApi`) exposes
  `engageMove(node)` + `engageEndpointMove(node, endpoint)`. Concrete
  implementation in `packages/editor/src/lib/editor-api.ts` casts
  through `useEditor`'s setters so the descriptor layer never imports
  editor internals.
- New `TapActionHandle` descriptor variant: `placement` + `onActivate
  (node, sceneApi, editorApi)`. `shape` field picks the visual —
  defaults to the chevron arrow; `'corner-picker'` renders the dashed
  vertical leader + billboarded hex disc + ring (sized to
  `nodeHeight(node)`).
- `TapActionArrow` renderer in `node-arrow-handles.tsx` wires up
  pointer-down → descriptor.onActivate. Pulled the chevron and corner
  visuals into `ArrowShape` / `CornerPickerShape` building blocks so
  future shapes can be added without touching the descriptor union.
- Wall: front/back side-move (engageMove) + start/end corner pickers
  (engageEndpointMove). Joined by the existing height arrow on the
  same `def.handles` list. Old `wall-move-side-handles.tsx` (600
  lines) deleted — wall now has zero per-kind handle component.
- Fence: front/back side-move. The bespoke endpoint move buttons in
  the floating menu stay until they migrate to a tap-action too.

Net for this commit: -620 +513. Combined with the prior two
migration commits: -2287 +912 across the full registry migration.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/core/src/registry/handles.ts         |  59 ++
 packages/core/src/registry/index.ts           |   2 +
 .../editor/src/components/editor/index.tsx    |   2 -
 .../components/editor/node-arrow-handles.tsx  | 253 ++++++++
 .../editor/wall-move-side-handles.tsx         | 600 ------------------
 packages/editor/src/lib/editor-api.ts         |  36 ++
 packages/nodes/src/fence/definition.ts        |  63 +-
 packages/nodes/src/wall/definition.ts         | 118 +++-
 8 files changed, 513 insertions(+), 620 deletions(-)
 delete mode 100644 packages/editor/src/components/editor/wall-move-side-handles.tsx
 create mode 100644 packages/editor/src/lib/editor-api.ts

diff --git a/packages/core/src/registry/handles.ts b/packages/core/src/registry/handles.ts
index 926d37472..1a98e6a1c 100644
--- a/packages/core/src/registry/handles.ts
+++ b/packages/core/src/registry/handles.ts
@@ -22,8 +22,35 @@
 //   - endpoint-move  : wall / fence endpoint drag (snapping is bespoke,
 //                      so it delegates to a kind-supplied callback)
 
+import type { AnyNode } from '../schema/types'
 import type { SceneApi } from './types'
 
+/**
+ * Editor-facing verbs that handle descriptors can invoke.
+ *
+ * Parallel to {@link SceneApi} but exposes EDITOR state mutations (move
+ * tools, endpoint dragging, etc.) instead of scene-data writes. Descriptors
+ * receive a concrete implementation from the editor at drag time — `core`
+ * only carries the interface so node definitions can call into editor
+ * affordances without importing the editor package.
+ *
+ * Minimal verb set today; grow it as new descriptor variants land
+ * (engageCurve for wall/fence curving, etc.).
+ */
+export type EditorApi = {
+  /**
+   * Hand the node to its registered move tool (the same path the floating
+   * menu's Move icon uses). Implementations clear any in-progress endpoint
+   * or curving state so the move starts from a clean slate.
+   */
+  engageMove: (node: AnyNode) => void
+  /**
+   * Engage endpoint drag for kinds that own start / end anchors (walls,
+   * fences). No-ops for kinds without endpoints.
+   */
+  engageEndpointMove: (node: AnyNode, endpoint: 'start' | 'end') => void
+}
+
 export type HandlePortal = 'self' | 'parent' | 'grandparent'
 
 export type HandleAxis = 'x' | 'y' | 'z'
@@ -139,11 +166,43 @@ export type EndpointMoveHandle<N> = {
 // Default to `any` so type-erased renderers can hold `HandleDescriptor[]`
 // without each variant's contravariant `currentValue: (node: N) => ...`
 // callback fighting the union widening. Per-kind defs supply a real N.
+/**
+ * Click-to-engage affordance. The descriptor doesn't drive a drag — its
+ * single job is to mount a click target at `placement` and dispatch a
+ * verb on the editor API when the user clicks. Used by wall side-move
+ * (engage move tool) and wall corner pickers (engage endpoint move).
+ *
+ * The renderer picks the visual from `shape`. Default `'arrow'` reuses
+ * the chevron shape every resize handle uses. `'corner-picker'` renders
+ * a dashed vertical leader + billboarded hex disc + ring, anchored at
+ * `placement.position` and extending up to `nodeHeight(node)`.
+ */
+export type TapActionHandle<N = any> = {
+  kind: 'tap-action'
+  placement: HandlePlacement<N>
+  /**
+   * Dispatched on pointer-down. Use scene/editor APIs to read state +
+   * trigger the desired action.
+   */
+  onActivate: (node: N, scene: SceneApi, editor: EditorApi) => void
+  /** Visual override; defaults to the standard chevron arrow. */
+  shape?: 'arrow' | 'corner-picker'
+  /**
+   * Required when `shape: 'corner-picker'` — controls the dashed leader's
+   * vertical extent. Pure callback so the descriptor doesn't need to
+   * import 3D libs.
+   */
+  nodeHeight?: (node: N) => number
+  portal?: HandlePortal
+  cursor?: Cursor
+}
+
 export type HandleDescriptor<N = any> =
   | LinearResizeHandle<N>
   | RadialResizeHandle<N>
   | ArcResizeHandle<N>
   | EndpointMoveHandle<N>
+  | TapActionHandle<N>
 
 /**
  * Static array, or a function for shape-dependent cases (column
diff --git a/packages/core/src/registry/index.ts b/packages/core/src/registry/index.ts
index 9463e8566..1b6a9ed30 100644
--- a/packages/core/src/registry/index.ts
+++ b/packages/core/src/registry/index.ts
@@ -18,6 +18,7 @@ export {
 export type {
   ArcResizeHandle,
   Cursor,
+  EditorApi,
   EndpointMoveHandle,
   HandleAnchor,
   HandleAxis,
@@ -27,6 +28,7 @@ export type {
   HandlePortal,
   LinearResizeHandle,
   RadialResizeHandle,
+  TapActionHandle,
 } from './handles'
 export { createSceneApi, type SceneStoreLike } from './scene-api'
 export type {
diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index 9af35f5e9..5bf482e02 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -68,7 +68,6 @@ import { SiteEdgeLabels } from './site-edge-labels'
 import { SnapshotCaptureOverlay } from './snapshot-capture-overlay'
 import { type SnapshotCameraData, ThumbnailGenerator } from './thumbnail-generator'
 import { WallMeasurementLabel } from './wall-measurement-label'
-import { WallMoveSideHandles } from './wall-move-side-handles'
 
 const CAMERA_CONTROLS_HINT_DISMISSED_STORAGE_KEY = 'editor-camera-controls-hint-dismissed:v1'
 const DELETE_CURSOR_BADGE_COLOR = '#ef4444'
@@ -599,7 +598,6 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
     <>
       {!isFirstPersonMode && <SelectionManager />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <BoxSelectTool />}
-      {!(isVersionPreviewMode || isFirstPersonMode) && <WallMoveSideHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <NodeArrowHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingActionMenu />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingBuildingActionMenu />}
diff --git a/packages/editor/src/components/editor/node-arrow-handles.tsx b/packages/editor/src/components/editor/node-arrow-handles.tsx
index a9206fcdc..c7d18825a 100644
--- a/packages/editor/src/components/editor/node-arrow-handles.tsx
+++ b/packages/editor/src/components/editor/node-arrow-handles.tsx
@@ -12,13 +12,16 @@ import {
   nodeRegistry,
   type RadialResizeHandle,
   sceneRegistry,
+  type TapActionHandle,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
+  type BufferGeometry,
   Color,
+  CylinderGeometry,
   DoubleSide,
   ExtrudeGeometry,
   type Group,
@@ -29,7 +32,9 @@ import {
   Vector2,
   Vector3,
 } from 'three'
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { createEditorApi } from '../../lib/editor-api'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
 
@@ -244,6 +249,9 @@ function ArrowHandle({
   if (descriptor.kind === 'arc-resize') {
     return <ArcArrow descriptor={descriptor} node={node} rideObject={rideObject} />
   }
+  if (descriptor.kind === 'tap-action') {
+    return <TapActionArrow descriptor={descriptor} node={node} />
+  }
   // endpoint-move not yet implemented.
   return null
 }
@@ -584,3 +592,248 @@ function ArcArrow({
     </group>
   )
 }
+
+// Click-to-engage affordance — no drag plumbing, just a click target. The
+// descriptor's `onActivate` receives sceneApi + editorApi so it can engage
+// move tools, endpoint drags, or any other editor-state transition without
+// importing editor internals from the node-def layer.
+function TapActionArrow({
+  descriptor,
+  node,
+}: {
+  descriptor: TapActionHandle<AnyNode>
+  node: AnyNode
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+
+  const position = descriptor.placement.position(node)
+  const rotationY = descriptor.placement.rotationY?.(node) ?? 0
+  const shape = descriptor.shape ?? 'arrow'
+  const cursor: Cursor =
+    descriptor.cursor ?? (shape === 'corner-picker' ? 'move' : 'ew-resize')
+
+  const onActivate = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    sfxEmitter.emit('sfx:item-pick')
+    document.body.style.cursor = ''
+    setIsHovered(false)
+    descriptor.onActivate(node as never, createSceneApi(useScene), createEditorApi())
+  }
+
+  const onEnter = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    setIsHovered(true)
+    document.body.style.cursor = cursor
+  }
+  const onLeave = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    setIsHovered(false)
+    if (document.body.style.cursor === cursor) document.body.style.cursor = ''
+  }
+
+  if (shape === 'corner-picker') {
+    const height = descriptor.nodeHeight?.(node) ?? 1
+    return (
+      <CornerPickerShape
+        height={height}
+        isHovered={isHovered}
+        onActivate={onActivate}
+        onEnter={onEnter}
+        onLeave={onLeave}
+        position={position}
+        zoom={zoom}
+      />
+    )
+  }
+
+  // Default 'arrow' shape — the standard chevron.
+  return (
+    <ArrowShape
+      isHovered={isHovered}
+      onActivate={onActivate}
+      onEnter={onEnter}
+      onLeave={onLeave}
+      position={position}
+      rotationY={rotationY}
+      zoom={zoom}
+    />
+  )
+}
+
+function ArrowShape({
+  position,
+  rotationY,
+  zoom,
+  isHovered,
+  onActivate,
+  onEnter,
+  onLeave,
+}: {
+  position: readonly [number, number, number]
+  rotationY: number
+  zoom: number
+  isHovered: boolean
+  onActivate: (event: ThreeEvent<PointerEvent>) => void
+  onEnter: (event: ThreeEvent<PointerEvent>) => void
+  onLeave: (event: ThreeEvent<PointerEvent>) => void
+}) {
+  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const arrowMaterial = useArrowMaterial()
+  useEffect(() => {
+    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [arrowMaterial, isHovered])
+  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
+
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
+  return (
+    <group position={position} rotation={[0, rotationY, 0]} scale={scale}>
+      <mesh
+        frustumCulled={false}
+        geometry={arrowGeometry}
+        material={arrowMaterial}
+        onPointerDown={onActivate}
+        onPointerEnter={onEnter}
+        onPointerLeave={onLeave}
+        renderOrder={1010}
+      />
+    </group>
+  )
+}
+
+// Wall corner-picker visual: dashed vertical leader from floor up to
+// `height` + billboarded hex disc (the click target) + outer ring. The
+// hex disc is the only mesh with a pointer-down handler; the dashes and
+// ring are decorative.
+const CORNER_HEX_RADIUS = 0.16
+const CORNER_DASH_SIZE = 0.1
+const CORNER_GAP_SIZE = 0.07
+const CORNER_DASH_THICKNESS = 0.006
+const CORNER_FLOOR_OFFSET = 0.01
+
+function buildDashedVerticalGeometry(height: number) {
+  const dashes: BufferGeometry[] = []
+  let y = 0
+  while (y < height) {
+    const end = Math.min(y + CORNER_DASH_SIZE, height)
+    const length = end - y
+    const cylinder = new CylinderGeometry(CORNER_DASH_THICKNESS, CORNER_DASH_THICKNESS, length, 8)
+    cylinder.translate(0, y + length / 2, 0)
+    dashes.push(cylinder)
+    y = end + CORNER_GAP_SIZE
+  }
+  const merged = mergeGeometries(dashes, false) ?? dashes[0]
+  for (const dash of dashes) dash.dispose()
+  return merged
+}
+
+function CornerPickerShape({
+  position,
+  height,
+  zoom,
+  isHovered,
+  onActivate,
+  onEnter,
+  onLeave,
+}: {
+  position: readonly [number, number, number]
+  height: number
+  zoom: number
+  isHovered: boolean
+  onActivate: (event: ThreeEvent<PointerEvent>) => void
+  onEnter: (event: ThreeEvent<PointerEvent>) => void
+  onLeave: (event: ThreeEvent<PointerEvent>) => void
+}) {
+  const dashedGeometry = useMemo(() => buildDashedVerticalGeometry(height), [height])
+  useEffect(() => () => dashedGeometry.dispose(), [dashedGeometry])
+
+  const dashMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        transparent: true,
+        opacity: 0.85,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+  const hexMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        transparent: true,
+        opacity: 0.95,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+  const ringMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        transparent: true,
+        opacity: 1,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+  useEffect(() => {
+    const next = isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR
+    dashMaterial.color.set(next)
+    hexMaterial.color.set(next)
+    ringMaterial.color.set(next)
+  }, [dashMaterial, hexMaterial, ringMaterial, isHovered])
+  useEffect(() => () => dashMaterial.dispose(), [dashMaterial])
+  useEffect(() => () => hexMaterial.dispose(), [hexMaterial])
+  useEffect(() => () => ringMaterial.dispose(), [ringMaterial])
+
+  const billboardRef = useRef<Group>(null)
+  const { camera } = useThree()
+  // Billboard the disc to the camera so the picker remains readable at any
+  // viewing angle. Assumes the parent level has no rotation (the standard
+  // case for walls / fences).
+  useFrame(() => {
+    if (billboardRef.current) {
+      billboardRef.current.quaternion.copy(camera.quaternion)
+    }
+  })
+
+  const scale = (isHovered ? 1.25 : 1) * zoom
+
+  return (
+    <>
+      <mesh
+        frustumCulled={false}
+        geometry={dashedGeometry}
+        material={dashMaterial}
+        position={position}
+        renderOrder={1001}
+      />
+      <group
+        position={[position[0], CORNER_FLOOR_OFFSET, position[2]]}
+        ref={billboardRef}
+        scale={scale}
+      >
+        <mesh
+          material={hexMaterial}
+          onPointerDown={onActivate}
+          onPointerEnter={onEnter}
+          onPointerLeave={onLeave}
+          renderOrder={1003}
+        >
+          <circleGeometry args={[CORNER_HEX_RADIUS, 6]} />
+        </mesh>
+        <mesh material={ringMaterial} renderOrder={1002}>
+          <ringGeometry args={[CORNER_HEX_RADIUS, CORNER_HEX_RADIUS * 1.18, 6]} />
+        </mesh>
+      </group>
+    </>
+  )
+}
diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
deleted file mode 100644
index 860477d4d..000000000
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ /dev/null
@@ -1,600 +0,0 @@
-'use client'
-
-import {
-  type AnyNodeId,
-  DEFAULT_WALL_HEIGHT,
-  type FenceNode,
-  getWallCurveFrameAt,
-  getWallThickness,
-  isCurvedWall,
-  sceneRegistry,
-  useScene,
-  type WallNode,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import {
-  BufferGeometry,
-  Color,
-  CylinderGeometry,
-  DoubleSide,
-  ExtrudeGeometry,
-  type Group,
-  type Object3D,
-  OrthographicCamera,
-  Plane,
-  Shape,
-  Vector2,
-  Vector3,
-} from 'three'
-import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
-import { MeshBasicNodeMaterial } from 'three/webgpu'
-import { sfxEmitter } from '../../lib/sfx-bus'
-import useEditor from '../../store/use-editor'
-
-const HANDLE_OFFSET = 0.27
-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_DASH_SIZE = 0.1
-const CORNER_GAP_SIZE = 0.07
-const CORNER_DASH_THICKNESS = 0.006
-const CORNER_FLOOR_OFFSET = 0.01
-
-type WallMoveHandle = {
-  key: string
-  position: [number, number, number]
-  rotationY: number
-}
-
-// Pre-empt the synthetic `click` the browser fires immediately after a
-// drag's pointerup. Without this, PointerMissedHandler treats the click
-// as "missed" and deselects the wall when the height arrow drag commits.
-function swallowNextClick() {
-  const swallow = (clickEvent: Event) => {
-    clickEvent.stopPropagation()
-    clickEvent.preventDefault()
-  }
-  window.addEventListener('click', swallow, { capture: true, once: true })
-  setTimeout(() => {
-    window.removeEventListener('click', swallow, { capture: true })
-  }, 300)
-}
-
-function createArrowHandleGeometry() {
-  // Classic arrow silhouette — chevron head + rectangular shaft — extruded
-  // slightly so the handle reads as a 3D plate but stays visually light.
-  const shape = new Shape()
-  shape.moveTo(0.22, 0)
-  shape.lineTo(-0.04, 0.12)
-  shape.lineTo(-0.04, 0.035)
-  shape.lineTo(-0.2, 0.035)
-  shape.lineTo(-0.2, -0.035)
-  shape.lineTo(-0.04, -0.035)
-  shape.lineTo(-0.04, -0.12)
-  shape.lineTo(0.22, 0)
-
-  const geometry = new ExtrudeGeometry(shape, {
-    depth: 0.08,
-    bevelEnabled: true,
-    bevelThickness: 0.035,
-    bevelSize: 0.03,
-    bevelOffset: 0,
-    bevelSegments: 10,
-    curveSegments: 16,
-    steps: 1,
-  })
-
-  // Centre the extruded plate around y=0 and re-orient it so the depth
-  // axis points up: the chevron lies flat in the XZ plane, tip along +X,
-  // wings spread across ±Z.
-  geometry.translate(0, 0, -0.04)
-  geometry.rotateX(-Math.PI / 2)
-  geometry.computeVertexNormals()
-  geometry.computeBoundingSphere()
-  return geometry
-}
-
-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 selectedId = selectedIds.length === 1 ? selectedIds[0] : null
-  const selectedNode = useScene((state) => {
-    const node = selectedId ? state.nodes[selectedId as AnyNodeId] : null
-    return node?.type === 'wall' || node?.type === 'fence' ? node : null
-  })
-
-  const shouldRender =
-    Boolean(selectedNode) &&
-    !isFloorplanHovered &&
-    mode !== 'delete' &&
-    !movingNode &&
-    !movingWallEndpoint &&
-    !movingFenceEndpoint &&
-    !curvingWall &&
-    !curvingFence
-
-  if (!shouldRender || !selectedNode) return null
-
-  return selectedNode.type === 'wall' ? (
-    <WallMoveSideHandlesForWall wall={selectedNode} />
-  ) : (
-    <WallMoveSideHandlesForFence fence={selectedNode} />
-  )
-}
-
-function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
-  const [levelObject, setLevelObject] = useState<Object3D | null>(() =>
-    wall.parentId ? (sceneRegistry.nodes.get(wall.parentId) ?? null) : null,
-  )
-
-  useEffect(() => {
-    let frameId = 0
-
-    const resolveLevelObject = () => {
-      const nextLevelObject = wall.parentId
-        ? (sceneRegistry.nodes.get(wall.parentId) ?? null)
-        : null
-      setLevelObject((currentLevelObject) => {
-        if (currentLevelObject === nextLevelObject) {
-          return currentLevelObject
-        }
-        return nextLevelObject
-      })
-
-      if (!nextLevelObject) {
-        frameId = window.requestAnimationFrame(resolveLevelObject)
-      }
-    }
-
-    resolveLevelObject()
-
-    return () => {
-      if (frameId) {
-        window.cancelAnimationFrame(frameId)
-      }
-    }
-  }, [wall.parentId])
-
-  const handles = useMemo(() => getWallMoveHandles(wall), [wall])
-
-  if (!levelObject || handles.length === 0) return null
-
-  return createPortal(
-    <group>
-      {handles.map((handle) => (
-        <WallMoveArrowHandle handle={handle} key={handle.key} wall={wall} />
-      ))}
-      <WallCornerLeaderHandle endpoint="start" wall={wall} />
-      <WallCornerLeaderHandle endpoint="end" wall={wall} />
-    </group>,
-    levelObject,
-  )
-}
-
-function buildDashedVerticalGeometry(height: number) {
-  // Build each dash as a thin cylinder section so thickness is
-  // controllable — native `lineSegments` lock to 1px on WebGL/WebGPU.
-  const dashes: BufferGeometry[] = []
-  let y = 0
-  while (y < height) {
-    const end = Math.min(y + CORNER_DASH_SIZE, height)
-    const length = end - y
-    const cylinder = new CylinderGeometry(CORNER_DASH_THICKNESS, CORNER_DASH_THICKNESS, length, 8)
-    cylinder.translate(0, y + length / 2, 0)
-    dashes.push(cylinder)
-    y = end + CORNER_GAP_SIZE
-  }
-  const merged = mergeGeometries(dashes, false) ?? new BufferGeometry()
-  for (const dash of dashes) dash.dispose()
-  return merged
-}
-
-function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint: 'start' | 'end' }) {
-  const [isHovered, setIsHovered] = useState(false)
-  const { camera } = useThree()
-  const billboardRef = useRef<Group>(null)
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.25 : 1) * zoom
-
-  const corner = endpoint === 'start' ? wall.start : wall.end
-  const x = corner[0]
-  const z = corner[1]
-  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
-
-  const dashedGeometry = useMemo(() => buildDashedVerticalGeometry(wallHeight), [wallHeight])
-  useEffect(() => () => dashedGeometry.dispose(), [dashedGeometry])
-
-  // Node materials matched to the rest of the file — mixing plain
-  // `meshBasicMaterial` with WebGPU node materials trips
-  // "Color target has no corresponding fragment stage output".
-  const dashMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        transparent: true,
-        opacity: 0.85,
-        depthTest: false,
-        depthWrite: false,
-      }),
-    [],
-  )
-  const hexMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        transparent: true,
-        opacity: 0.95,
-        depthTest: false,
-        depthWrite: false,
-      }),
-    [],
-  )
-  const ringMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        transparent: true,
-        opacity: 1,
-        depthTest: false,
-        depthWrite: false,
-      }),
-    [],
-  )
-
-  useEffect(() => {
-    const next = isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR
-    dashMaterial.color.set(next)
-    hexMaterial.color.set(next)
-    ringMaterial.color.set(next)
-  }, [dashMaterial, hexMaterial, ringMaterial, isHovered])
-
-  useEffect(() => () => dashMaterial.dispose(), [dashMaterial])
-  useEffect(() => () => hexMaterial.dispose(), [hexMaterial])
-  useEffect(() => () => ringMaterial.dispose(), [ringMaterial])
-
-  // Billboard the hex disc to the camera so the picker is always
-  // recognisable regardless of viewing angle. Assumes the parent level
-  // has no rotation, which is the standard case.
-  useFrame(() => {
-    if (billboardRef.current) {
-      billboardRef.current.quaternion.copy(camera.quaternion)
-    }
-  })
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'grab' || document.body.style.cursor === 'grabbing') {
-        document.body.style.cursor = ''
-      }
-    }
-  }, [])
-
-  const activateEndpointMove = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-    sfxEmitter.emit('sfx:item-pick')
-    document.body.style.cursor = 'grabbing'
-    useEditor.getState().setMovingWallEndpoint({ wall, endpoint })
-  }
-
-  return (
-    <>
-      <mesh
-        frustumCulled={false}
-        geometry={dashedGeometry}
-        material={dashMaterial}
-        position={[x, 0, z]}
-        renderOrder={1001}
-      />
-      <group position={[x, CORNER_FLOOR_OFFSET, z]} ref={billboardRef} scale={scale}>
-        <mesh
-          material={hexMaterial}
-          onPointerDown={activateEndpointMove}
-          onPointerEnter={(event) => {
-            event.stopPropagation()
-            setIsHovered(true)
-            document.body.style.cursor = 'grab'
-          }}
-          onPointerLeave={(event) => {
-            event.stopPropagation()
-            setIsHovered(false)
-            if (document.body.style.cursor === 'grab') {
-              document.body.style.cursor = ''
-            }
-          }}
-          renderOrder={1003}
-        >
-          <circleGeometry args={[CORNER_HEX_RADIUS, 6]} />
-        </mesh>
-        <mesh material={ringMaterial} renderOrder={1002}>
-          <ringGeometry args={[CORNER_HEX_RADIUS, CORNER_HEX_RADIUS * 1.18, 6]} />
-        </mesh>
-      </group>
-    </>
-  )
-}
-
-function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMoveHandle }) {
-  const [isHovered, setIsHovered] = useState(false)
-  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
-  const arrowMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        depthTest: false,
-        depthWrite: false,
-        transparent: true,
-        opacity: 1,
-      }),
-    [],
-  )
-  const { camera } = useThree()
-
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-
-  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
-
-  useEffect(() => {
-    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [arrowMaterial, isHovered])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'grab' || document.body.style.cursor === 'grabbing') {
-        document.body.style.cursor = ''
-      }
-    }
-  }, [])
-
-  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
-  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
-
-  const activateWallMove = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-    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)
-    // Keep the wall selected so it stays the active item once the move
-    // commits; the `!movingNode` guard on the handles hides them mid-drag.
-  }
-
-  return (
-    <group position={handle.position} rotation={[0, handle.rotationY, 0]} scale={scale}>
-      <mesh
-        // Pass geometry as a prop (not `<primitive attach="geometry">`)
-        // so the mesh is never rendered with R3F's default empty
-        // `BufferGeometry`. Combined with `frustumCulled={false}`, the
-        // primitive-attach path emits a `Draw(0, 1, 0, 0)` on the first
-        // frame and WebGPU flags "Vertex buffer slot 0 ... was not set".
-        frustumCulled={false}
-        geometry={arrowGeometry}
-        material={arrowMaterial}
-        onPointerDown={activateWallMove}
-        onPointerEnter={(event) => {
-          event.stopPropagation()
-          setIsHovered(true)
-          document.body.style.cursor = 'grab'
-        }}
-        onPointerLeave={(event) => {
-          event.stopPropagation()
-          setIsHovered(false)
-          if (document.body.style.cursor === 'grab') {
-            document.body.style.cursor = ''
-          }
-        }}
-        renderOrder={1002}
-      />
-    </group>
-  )
-}
-
-function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: WallMoveHandle }) {
-  const [isHovered, setIsHovered] = useState(false)
-  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
-  const arrowMaterial = useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        depthTest: false,
-        depthWrite: false,
-        transparent: true,
-        opacity: 1,
-      }),
-    [],
-  )
-  const { camera } = useThree()
-
-  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
-
-  useEffect(() => {
-    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [arrowMaterial, isHovered])
-
-  useEffect(() => {
-    return () => {
-      if (document.body.style.cursor === 'grab' || document.body.style.cursor === 'grabbing') {
-        document.body.style.cursor = ''
-      }
-    }
-  }, [])
-
-  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
-  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
-
-  const activateFenceMove = (event: ThreeEvent<PointerEvent>) => {
-    event.stopPropagation()
-    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)
-    // Keep the fence selected so it stays active once the move commits.
-  }
-
-  return (
-    <group position={handle.position} rotation={[0, handle.rotationY, 0]} scale={scale}>
-      <mesh
-        // Pass geometry as a prop — see WallMoveArrowHandle for the
-        // WebGPU "Vertex buffer slot 0 ... was not set" rationale.
-        frustumCulled={false}
-        geometry={arrowGeometry}
-        material={arrowMaterial}
-
-        onPointerDown={activateFenceMove}
-        onPointerEnter={(event) => {
-          event.stopPropagation()
-          setIsHovered(true)
-          document.body.style.cursor = 'grab'
-        }}
-        onPointerLeave={(event) => {
-          event.stopPropagation()
-          setIsHovered(false)
-          if (document.body.style.cursor === 'grab') {
-            document.body.style.cursor = ''
-          }
-        }}
-        renderOrder={1002}
-      />
-    </group>
-  )
-}
-
-function getWallMoveHandles(wall: WallNode): WallMoveHandle[] {
-  const dx = wall.end[0] - wall.start[0]
-  const dz = wall.end[1] - wall.start[1]
-  const length = Math.hypot(dx, dz)
-
-  if (length < 1e-6) {
-    return []
-  }
-
-  const frame = isCurvedWall(wall) ? getWallCurveFrameAt(wall, 0.5) : null
-  const normal: [number, number] = frame
-    ? [frame.normal.x, frame.normal.y]
-    : [-dz / length, dx / length]
-  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 handleHeight = Math.max(wallHeight - HANDLE_TOP_INSET, HANDLE_MIN_HEIGHT)
-  const offset = Math.max(getWallThickness(wall) / 2 + HANDLE_OFFSET, HANDLE_MIN_OFFSET)
-
-  return [
-    buildWallMoveHandle('front', midpoint, normal, offset, handleHeight),
-    buildWallMoveHandle('back', midpoint, [-normal[0], -normal[1]], offset, handleHeight),
-  ]
-}
-
-function WallMoveSideHandlesForFence({ fence }: { fence: FenceNode }) {
-  const [levelObject, setLevelObject] = useState<Object3D | null>(() =>
-    fence.parentId ? (sceneRegistry.nodes.get(fence.parentId) ?? null) : null,
-  )
-
-  useEffect(() => {
-    let frameId = 0
-
-    const resolveLevelObject = () => {
-      const nextLevelObject = fence.parentId
-        ? (sceneRegistry.nodes.get(fence.parentId) ?? null)
-        : null
-      setLevelObject((currentLevelObject) => {
-        if (currentLevelObject === nextLevelObject) {
-          return currentLevelObject
-        }
-        return nextLevelObject
-      })
-
-      if (!nextLevelObject) {
-        frameId = window.requestAnimationFrame(resolveLevelObject)
-      }
-    }
-
-    resolveLevelObject()
-
-    return () => {
-      if (frameId) {
-        window.cancelAnimationFrame(frameId)
-      }
-    }
-  }, [fence.parentId])
-
-  const handles = useMemo(() => getFenceMoveHandles(fence), [fence])
-
-  if (!levelObject || handles.length === 0) return null
-
-  return createPortal(
-    <group>
-      {handles.map((handle) => (
-        <FenceMoveArrowHandle fence={fence} handle={handle} key={handle.key} />
-      ))}
-    </group>,
-    levelObject,
-  )
-}
-
-function getFenceMoveHandles(fence: FenceNode): WallMoveHandle[] {
-  const dx = fence.end[0] - fence.start[0]
-  const dz = fence.end[1] - fence.start[1]
-  const length = Math.hypot(dx, dz)
-
-  if (length < 1e-6) {
-    return []
-  }
-
-  const midpoint: [number, number] = [
-    (fence.start[0] + fence.end[0]) / 2,
-    (fence.start[1] + fence.end[1]) / 2,
-  ]
-  const normal: [number, number] = [-dz / length, dx / length]
-  const fenceHeight = fence.height ?? 1.8
-  const handleHeight = Math.max(fenceHeight - HANDLE_TOP_INSET, HANDLE_MIN_HEIGHT)
-  const offset = Math.max((fence.thickness ?? 0.1) / 2 + HANDLE_OFFSET, HANDLE_MIN_OFFSET)
-
-  return [
-    buildWallMoveHandle('front', midpoint, normal, offset, handleHeight),
-    buildWallMoveHandle('back', midpoint, [-normal[0], -normal[1]], offset, handleHeight),
-  ]
-}
-
-function buildWallMoveHandle(
-  key: string,
-  midpoint: [number, number],
-  direction: [number, number],
-  offset: number,
-  height: number,
-): WallMoveHandle {
-  return {
-    key,
-    position: [midpoint[0] + direction[0] * offset, height, midpoint[1] + direction[1] * offset],
-    rotationY: Math.atan2(-direction[1], direction[0]),
-  }
-}
diff --git a/packages/editor/src/lib/editor-api.ts b/packages/editor/src/lib/editor-api.ts
new file mode 100644
index 000000000..440000e6c
--- /dev/null
+++ b/packages/editor/src/lib/editor-api.ts
@@ -0,0 +1,36 @@
+import type { AnyNode, EditorApi, FenceNode, WallNode } from '@pascal-app/core'
+import useEditor from '../store/use-editor'
+
+/**
+ * Concrete {@link EditorApi} backed by `useEditor`. Descriptors call into
+ * editor state through this interface; the editor owns the actual setter
+ * names so core stays decoupled.
+ *
+ * `engageMove` clears any in-progress endpoint drag or curve gesture so
+ * the move tool takes over cleanly — mirrors the legacy bookkeeping that
+ * lived inside `WallMoveArrowHandle.activateWallMove` / `FenceMoveArrowHandle`.
+ */
+export function createEditorApi(): EditorApi {
+  return {
+    engageMove(node: AnyNode) {
+      const editor = useEditor.getState()
+      // `setMovingNode` is typed against a narrower union than `AnyNode`
+      // (every concrete kind enumerated). Descriptors pass any node; the
+      // cast lets registry-driven move kinds through without forcing a
+      // schema-level type widening.
+      editor.setMovingNode(node as Parameters<typeof editor.setMovingNode>[0])
+      editor.setMovingWallEndpoint(null)
+      editor.setMovingFenceEndpoint(null)
+      editor.setCurvingWall(null)
+      editor.setCurvingFence(null)
+    },
+    engageEndpointMove(node: AnyNode, endpoint: 'start' | 'end') {
+      const editor = useEditor.getState()
+      if (node.type === 'wall') {
+        editor.setMovingWallEndpoint({ wall: node as WallNode, endpoint })
+      } else if (node.type === 'fence') {
+        editor.setMovingFenceEndpoint({ fence: node as FenceNode, endpoint })
+      }
+    },
+  }
+}
diff --git a/packages/nodes/src/fence/definition.ts b/packages/nodes/src/fence/definition.ts
index ad229abc1..ec77d26d9 100644
--- a/packages/nodes/src/fence/definition.ts
+++ b/packages/nodes/src/fence/definition.ts
@@ -1,10 +1,70 @@
-import type { NodeDefinition } from '@pascal-app/core'
+import {
+  type FenceNode as FenceNodeType,
+  type HandleDescriptor,
+  type NodeDefinition,
+} from '@pascal-app/core'
 import { buildFenceFloorplan } from './floorplan'
 import { fenceMoveEndpointAffordance } from './floorplan-affordances'
 import { buildFenceGeometry } from './geometry'
 import { fenceParametrics } from './parametrics'
 import { FenceNode } from './schema'
 
+const SIDE_HANDLE_OFFSET = 0.27
+const SIDE_HANDLE_MIN_OFFSET = 0.33
+const SIDE_HANDLE_TOP_INSET = 0.08
+const SIDE_HANDLE_MIN_HEIGHT = 0.4
+
+function fenceMidpointFrame(n: FenceNodeType): {
+  midX: number
+  midZ: number
+  normalX: number
+  normalZ: number
+} {
+  const dx = n.end[0] - n.start[0]
+  const dz = n.end[1] - n.start[1]
+  const len = Math.max(Math.hypot(dx, dz), 1e-6)
+  return {
+    midX: (n.start[0] + n.end[0]) / 2,
+    midZ: (n.start[1] + n.end[1]) / 2,
+    normalX: -dz / len,
+    normalZ: dx / len,
+  }
+}
+
+// Side-move arrows: click to hand the fence to its move tool. Same shape
+// as wall — front + back faces, positioned past the fence thickness near
+// the top so they don't compete with endpoint pickers in the floating
+// menu (which is where fence endpoint move lives today).
+function fenceSideMoveHandle(side: 'front' | 'back'): HandleDescriptor<FenceNodeType> {
+  const sign = side === 'front' ? 1 : -1
+  return {
+    kind: 'tap-action',
+    onActivate: (node, _scene, editor) => editor.engageMove(node),
+    placement: {
+      position: (n) => {
+        const { midX, midZ, normalX, normalZ } = fenceMidpointFrame(n)
+        const offset = Math.max(
+          (n.thickness ?? 0.1) / 2 + SIDE_HANDLE_OFFSET,
+          SIDE_HANDLE_MIN_OFFSET,
+        )
+        const h = n.height ?? 1.8
+        const handleY = Math.max(h - SIDE_HANDLE_TOP_INSET, SIDE_HANDLE_MIN_HEIGHT)
+        return [midX + sign * normalX * offset, handleY, midZ + sign * normalZ * offset]
+      },
+      rotationY: (n) => {
+        const { normalX, normalZ } = fenceMidpointFrame(n)
+        return Math.atan2(-sign * normalZ, sign * normalX)
+      },
+    },
+    cursor: 'move',
+  }
+}
+
+const fenceHandles: HandleDescriptor<FenceNodeType>[] = [
+  fenceSideMoveHandle('front'),
+  fenceSideMoveHandle('back'),
+]
+
 /**
  * Fence — Phase 5 batch kind. Stage B complete: `def.geometry` drives
  * the rebuild via the generic `<GeometrySystem>`; `<ParametricNodeRenderer>`
@@ -59,6 +119,7 @@ export const fenceDefinition: NodeDefinition<typeof FenceNode> = {
   },
 
   parametrics: fenceParametrics,
+  handles: fenceHandles,
 
   // Stage D: kind-owned placement tool. Two-click flow (start → end)
   // with live preview, length / angle HUD, snap to walls / fences /
diff --git a/packages/nodes/src/wall/definition.ts b/packages/nodes/src/wall/definition.ts
index 00eaa543e..f87f13d1c 100644
--- a/packages/nodes/src/wall/definition.ts
+++ b/packages/nodes/src/wall/definition.ts
@@ -1,6 +1,7 @@
 import {
   DEFAULT_WALL_HEIGHT,
   getWallCurveFrameAt,
+  getWallThickness,
   type HandleDescriptor,
   isCurvedWall,
   type NodeDefinition,
@@ -15,13 +16,49 @@ import { WallNode } from './schema'
 
 const HEIGHT_HANDLE_OFFSET = 0.26
 const MIN_WALL_HEIGHT = 0.5
+const SIDE_HANDLE_OFFSET = 0.27
+const SIDE_HANDLE_MIN_OFFSET = 0.33
+const SIDE_HANDLE_TOP_INSET = 0.08
+const SIDE_HANDLE_MIN_HEIGHT = 0.4
 
-// Wall's height arrow sits at the wall's visual centerline — apex for
-// curved walls, chord midpoint for straight. Migrated to the registry;
-// side-move arrows + corner pickers stay on `wall-move-side-handles.tsx`
-// because they're click-to-engage-mode affordances (move whole wall /
-// move endpoint) rather than drag-resize, and tap-action descriptors
-// would need editor-state plumbing the descriptor union doesn't have yet.
+// Curve-aware midpoint + outward-normal at the wall's t=0.5 point. For
+// straight walls that's the chord midpoint + perpendicular; for curved
+// walls it's the arc apex + true normal.
+function wallApexFrame(n: WallNodeType): {
+  midX: number
+  midZ: number
+  normalX: number
+  normalZ: number
+  tangentX: number
+  tangentZ: number
+} {
+  if (isCurvedWall(n)) {
+    const f = getWallCurveFrameAt(n, 0.5)
+    return {
+      midX: f.point.x,
+      midZ: f.point.y,
+      normalX: f.normal.x,
+      normalZ: f.normal.y,
+      tangentX: f.tangent.x,
+      tangentZ: f.tangent.y,
+    }
+  }
+  const dx = n.end[0] - n.start[0]
+  const dz = n.end[1] - n.start[1]
+  const len = Math.max(Math.hypot(dx, dz), 1e-6)
+  return {
+    midX: (n.start[0] + n.end[0]) / 2,
+    midZ: (n.start[1] + n.end[1]) / 2,
+    normalX: -dz / len,
+    normalZ: dx / len,
+    tangentX: dx / len,
+    tangentZ: dz / len,
+  }
+}
+
+// Height arrow: drag the +Y end, anchor at the floor (Y = 0). Curve-aware
+// placement so it sits over the visual centre of the wall (arc apex /
+// chord midpoint).
 function wallHeightHandle(): HandleDescriptor<WallNodeType> {
   return {
     kind: 'linear-resize',
@@ -32,26 +69,73 @@ function wallHeightHandle(): HandleDescriptor<WallNodeType> {
     apply: (_n, newHeight) => ({ height: newHeight }),
     placement: {
       position: (n) => {
-        // Curved walls: apex at t=0.5. Straight: chord midpoint.
-        const curve = isCurvedWall(n) ? getWallCurveFrameAt(n, 0.5) : null
-        const midX = curve ? curve.point.x : (n.start[0] + n.end[0]) / 2
-        const midZ = curve ? curve.point.y : (n.start[1] + n.end[1]) / 2
+        const { midX, midZ } = wallApexFrame(n)
         const h = n.height ?? DEFAULT_WALL_HEIGHT
         return [midX, h + HEIGHT_HANDLE_OFFSET, midZ]
       },
-      // Align the arrow with the wall's tangent at the apex so the chevron
-      // points along the wall, matching the legacy WallHeightArrowHandle.
       rotationY: (n) => {
-        const curve = isCurvedWall(n) ? getWallCurveFrameAt(n, 0.5) : null
-        const dirX = curve ? curve.tangent.x : n.end[0] - n.start[0]
-        const dirZ = curve ? curve.tangent.y : n.end[1] - n.start[1]
-        return Math.atan2(-dirZ, dirX)
+        const { tangentX, tangentZ } = wallApexFrame(n)
+        return Math.atan2(-tangentZ, tangentX)
+      },
+    },
+  }
+}
+
+// Side-move arrows: front + back faces of the wall. Clicking either hands
+// the wall to the move tool. Positioned just past each wall face at the
+// upper-third of the wall so they don't collide with door / window
+// handles on the same wall.
+function wallSideMoveHandle(side: 'front' | 'back'): HandleDescriptor<WallNodeType> {
+  const sign = side === 'front' ? 1 : -1
+  return {
+    kind: 'tap-action',
+    onActivate: (node, _scene, editor) => editor.engageMove(node),
+    placement: {
+      position: (n) => {
+        const { midX, midZ, normalX, normalZ } = wallApexFrame(n)
+        const offset = Math.max(
+          getWallThickness(n) / 2 + SIDE_HANDLE_OFFSET,
+          SIDE_HANDLE_MIN_OFFSET,
+        )
+        const h = n.height ?? DEFAULT_WALL_HEIGHT
+        const handleY = Math.max(h - SIDE_HANDLE_TOP_INSET, SIDE_HANDLE_MIN_HEIGHT)
+        return [midX + sign * normalX * offset, handleY, midZ + sign * normalZ * offset]
+      },
+      // Arrow chevron points outward along the (signed) normal direction.
+      rotationY: (n) => {
+        const { normalX, normalZ } = wallApexFrame(n)
+        return Math.atan2(-sign * normalZ, sign * normalX)
+      },
+    },
+    cursor: 'move',
+  }
+}
+
+// Corner pickers: dashed leader from floor up to wall.height + billboarded
+// hex disc at the corner. Clicking the hex engages endpoint move on that
+// corner.
+function wallCornerPickerHandle(endpoint: 'start' | 'end'): HandleDescriptor<WallNodeType> {
+  return {
+    kind: 'tap-action',
+    shape: 'corner-picker',
+    onActivate: (node, _scene, editor) => editor.engageEndpointMove(node, endpoint),
+    nodeHeight: (n) => n.height ?? DEFAULT_WALL_HEIGHT,
+    placement: {
+      position: (n) => {
+        const corner = endpoint === 'start' ? n.start : n.end
+        return [corner[0], 0, corner[1]]
       },
     },
   }
 }
 
-const wallHandles: HandleDescriptor<WallNodeType>[] = [wallHeightHandle()]
+const wallHandles: HandleDescriptor<WallNodeType>[] = [
+  wallHeightHandle(),
+  wallSideMoveHandle('front'),
+  wallSideMoveHandle('back'),
+  wallCornerPickerHandle('start'),
+  wallCornerPickerHandle('end'),
+]
 
 /**
  * Wall — the Phase 3 stress test of the registry-driven node model.

From 0e207a7f6e9756e064baff59a3fbbcc6373993aa Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Tue, 26 May 2026 02:10:02 +0530
Subject: [PATCH 28/48] wall: revert side-move arrows + corner pickers to
 legacy component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The registry-driven tap-action path didn't render the four non-height
wall handles, even with descriptors resolved and the wall mesh in
sceneRegistry. Fence uses the same descriptor shape and renders fine,
so the bug is wall-specific and not in the descriptor layer itself —
left for a real diagnosis later.

Restored the pre-5756f241 wall-move-side-handles.tsx (height arrow +
front/back side-move + start/end corner leaders, 753 lines) and
mounted it next to NodeArrowHandles in editor/index.tsx. Dropped the
def.handles field on wallDefinition so the two paths don't race.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../editor/src/components/editor/index.tsx    |   2 +
 .../editor/wall-move-side-handles.tsx         | 753 ++++++++++++++++++
 packages/nodes/src/wall/definition.ts         | 137 +---
 3 files changed, 759 insertions(+), 133 deletions(-)
 create mode 100644 packages/editor/src/components/editor/wall-move-side-handles.tsx

diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index 5bf482e02..03d36e75f 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -68,6 +68,7 @@ import { SiteEdgeLabels } from './site-edge-labels'
 import { SnapshotCaptureOverlay } from './snapshot-capture-overlay'
 import { type SnapshotCameraData, ThumbnailGenerator } from './thumbnail-generator'
 import { WallMeasurementLabel } from './wall-measurement-label'
+import { WallMoveSideHandles } from './wall-move-side-handles'
 
 const CAMERA_CONTROLS_HINT_DISMISSED_STORAGE_KEY = 'editor-camera-controls-hint-dismissed:v1'
 const DELETE_CURSOR_BADGE_COLOR = '#ef4444'
@@ -599,6 +600,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       {!isFirstPersonMode && <SelectionManager />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <BoxSelectTool />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <NodeArrowHandles />}
+      {!(isVersionPreviewMode || isFirstPersonMode) && <WallMoveSideHandles />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingActionMenu />}
       {!(isVersionPreviewMode || isFirstPersonMode) && <FloatingBuildingActionMenu />}
       {!isFirstPersonMode && <WallMeasurementLabel />}
diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
new file mode 100644
index 000000000..4d3a71bfb
--- /dev/null
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -0,0 +1,753 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  DEFAULT_WALL_HEIGHT,
+  type FenceNode,
+  getWallCurveFrameAt,
+  getWallThickness,
+  isCurvedWall,
+  sceneRegistry,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  BufferGeometry,
+  Color,
+  CylinderGeometry,
+  DoubleSide,
+  ExtrudeGeometry,
+  type Group,
+  type Object3D,
+  OrthographicCamera,
+  Plane,
+  Shape,
+  Vector2,
+  Vector3,
+} from 'three'
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { sfxEmitter } from '../../lib/sfx-bus'
+import useEditor from '../../store/use-editor'
+
+const HANDLE_OFFSET = 0.27
+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_DASH_SIZE = 0.1
+const CORNER_GAP_SIZE = 0.07
+const CORNER_DASH_THICKNESS = 0.006
+const CORNER_FLOOR_OFFSET = 0.01
+
+type WallMoveHandle = {
+  key: string
+  position: [number, number, number]
+  rotationY: number
+}
+
+// Pre-empt the synthetic `click` the browser fires immediately after a
+// drag's pointerup. Without this, PointerMissedHandler treats the click
+// as "missed" and deselects the wall when the height arrow drag commits.
+function swallowNextClick() {
+  const swallow = (clickEvent: Event) => {
+    clickEvent.stopPropagation()
+    clickEvent.preventDefault()
+  }
+  window.addEventListener('click', swallow, { capture: true, once: true })
+  setTimeout(() => {
+    window.removeEventListener('click', swallow, { capture: true })
+  }, 300)
+}
+
+function createArrowHandleGeometry() {
+  // Classic arrow silhouette — chevron head + rectangular shaft — extruded
+  // slightly so the handle reads as a 3D plate but stays visually light.
+  const shape = new Shape()
+  shape.moveTo(0.22, 0)
+  shape.lineTo(-0.04, 0.12)
+  shape.lineTo(-0.04, 0.035)
+  shape.lineTo(-0.2, 0.035)
+  shape.lineTo(-0.2, -0.035)
+  shape.lineTo(-0.04, -0.035)
+  shape.lineTo(-0.04, -0.12)
+  shape.lineTo(0.22, 0)
+
+  const geometry = new ExtrudeGeometry(shape, {
+    depth: 0.08,
+    bevelEnabled: true,
+    bevelThickness: 0.035,
+    bevelSize: 0.03,
+    bevelOffset: 0,
+    bevelSegments: 10,
+    curveSegments: 16,
+    steps: 1,
+  })
+
+  // Centre the extruded plate around y=0 and re-orient it so the depth
+  // axis points up: the chevron lies flat in the XZ plane, tip along +X,
+  // wings spread across ±Z.
+  geometry.translate(0, 0, -0.04)
+  geometry.rotateX(-Math.PI / 2)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
+
+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 selectedId = selectedIds.length === 1 ? selectedIds[0] : null
+  const selectedNode = useScene((state) => {
+    const node = selectedId ? state.nodes[selectedId as AnyNodeId] : null
+    return node?.type === 'wall' || node?.type === 'fence' ? node : null
+  })
+
+  const shouldRender =
+    Boolean(selectedNode) &&
+    !isFloorplanHovered &&
+    mode !== 'delete' &&
+    !movingNode &&
+    !movingWallEndpoint &&
+    !movingFenceEndpoint &&
+    !curvingWall &&
+    !curvingFence
+
+  if (!shouldRender || !selectedNode) return null
+
+  return selectedNode.type === 'wall' ? (
+    <WallMoveSideHandlesForWall wall={selectedNode} />
+  ) : (
+    <WallMoveSideHandlesForFence fence={selectedNode} />
+  )
+}
+
+function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
+  const [levelObject, setLevelObject] = useState<Object3D | null>(() =>
+    wall.parentId ? (sceneRegistry.nodes.get(wall.parentId) ?? null) : null,
+  )
+
+  useEffect(() => {
+    let frameId = 0
+
+    const resolveLevelObject = () => {
+      const nextLevelObject = wall.parentId
+        ? (sceneRegistry.nodes.get(wall.parentId) ?? null)
+        : null
+      setLevelObject((currentLevelObject) => {
+        if (currentLevelObject === nextLevelObject) {
+          return currentLevelObject
+        }
+        return nextLevelObject
+      })
+
+      if (!nextLevelObject) {
+        frameId = window.requestAnimationFrame(resolveLevelObject)
+      }
+    }
+
+    resolveLevelObject()
+
+    return () => {
+      if (frameId) {
+        window.cancelAnimationFrame(frameId)
+      }
+    }
+  }, [wall.parentId])
+
+  const handles = useMemo(() => getWallMoveHandles(wall), [wall])
+
+  if (!levelObject || handles.length === 0) return null
+
+  return createPortal(
+    <group>
+      {handles.map((handle) => (
+        <WallMoveArrowHandle handle={handle} key={handle.key} wall={wall} />
+      ))}
+      <WallHeightArrowHandle wall={wall} />
+      <WallCornerLeaderHandle endpoint="start" wall={wall} />
+      <WallCornerLeaderHandle endpoint="end" wall={wall} />
+    </group>,
+    levelObject,
+  )
+}
+
+function buildDashedVerticalGeometry(height: number) {
+  // Build each dash as a thin cylinder section so thickness is
+  // controllable — native `lineSegments` lock to 1px on WebGL/WebGPU.
+  const dashes: BufferGeometry[] = []
+  let y = 0
+  while (y < height) {
+    const end = Math.min(y + CORNER_DASH_SIZE, height)
+    const length = end - y
+    const cylinder = new CylinderGeometry(CORNER_DASH_THICKNESS, CORNER_DASH_THICKNESS, length, 8)
+    cylinder.translate(0, y + length / 2, 0)
+    dashes.push(cylinder)
+    y = end + CORNER_GAP_SIZE
+  }
+  const merged = mergeGeometries(dashes, false) ?? new BufferGeometry()
+  for (const dash of dashes) dash.dispose()
+  return merged
+}
+
+function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint: 'start' | 'end' }) {
+  const [isHovered, setIsHovered] = useState(false)
+  const { camera } = useThree()
+  const billboardRef = useRef<Group>(null)
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.25 : 1) * zoom
+
+  const corner = endpoint === 'start' ? wall.start : wall.end
+  const x = corner[0]
+  const z = corner[1]
+  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+
+  const dashedGeometry = useMemo(() => buildDashedVerticalGeometry(wallHeight), [wallHeight])
+  useEffect(() => () => dashedGeometry.dispose(), [dashedGeometry])
+
+  // Node materials matched to the rest of the file — mixing plain
+  // `meshBasicMaterial` with WebGPU node materials trips
+  // "Color target has no corresponding fragment stage output".
+  const dashMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        transparent: true,
+        opacity: 0.85,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+  const hexMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        transparent: true,
+        opacity: 0.95,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+  const ringMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        transparent: true,
+        opacity: 1,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+
+  useEffect(() => {
+    const next = isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR
+    dashMaterial.color.set(next)
+    hexMaterial.color.set(next)
+    ringMaterial.color.set(next)
+  }, [dashMaterial, hexMaterial, ringMaterial, isHovered])
+
+  useEffect(() => () => dashMaterial.dispose(), [dashMaterial])
+  useEffect(() => () => hexMaterial.dispose(), [hexMaterial])
+  useEffect(() => () => ringMaterial.dispose(), [ringMaterial])
+
+  // Billboard the hex disc to the camera so the picker is always
+  // recognisable regardless of viewing angle. Assumes the parent level
+  // has no rotation, which is the standard case.
+  useFrame(() => {
+    if (billboardRef.current) {
+      billboardRef.current.quaternion.copy(camera.quaternion)
+    }
+  })
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'grab' || document.body.style.cursor === 'grabbing') {
+        document.body.style.cursor = ''
+      }
+    }
+  }, [])
+
+  const activateEndpointMove = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    sfxEmitter.emit('sfx:item-pick')
+    document.body.style.cursor = 'grabbing'
+    useEditor.getState().setMovingWallEndpoint({ wall, endpoint })
+  }
+
+  return (
+    <>
+      <mesh
+        frustumCulled={false}
+        geometry={dashedGeometry}
+        material={dashMaterial}
+        position={[x, 0, z]}
+        renderOrder={1001}
+      />
+      <group position={[x, CORNER_FLOOR_OFFSET, z]} ref={billboardRef} scale={scale}>
+        <mesh
+          material={hexMaterial}
+          onPointerDown={activateEndpointMove}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setIsHovered(true)
+            document.body.style.cursor = 'grab'
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setIsHovered(false)
+            if (document.body.style.cursor === 'grab') {
+              document.body.style.cursor = ''
+            }
+          }}
+          renderOrder={1003}
+        >
+          <circleGeometry args={[CORNER_HEX_RADIUS, 6]} />
+        </mesh>
+        <mesh material={ringMaterial} renderOrder={1002}>
+          <ringGeometry args={[CORNER_HEX_RADIUS, CORNER_HEX_RADIUS * 1.18, 6]} />
+        </mesh>
+      </group>
+    </>
+  )
+}
+
+function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
+  const [isHovered, setIsHovered] = useState(false)
+  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const arrowMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true,
+        opacity: 1,
+      }),
+    [],
+  )
+  const { camera, raycaster, gl } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  useEffect(() => {
+    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [arrowMaterial, isHovered])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'ns-resize') {
+        document.body.style.cursor = ''
+      }
+      dragCleanupRef.current?.()
+    }
+  }, [])
+
+  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
+
+  // Sit on the visual centre of the wall — for curved walls that's the
+  // arc apex at t=0.5, not the chord midpoint. Use the curve tangent for
+  // the yaw so the arrow's local frame matches the wall direction at the
+  // apex, consistent with `getWallMoveHandles`.
+  const curveFrame = isCurvedWall(wall) ? getWallCurveFrameAt(wall, 0.5) : null
+  const midX = curveFrame ? curveFrame.point.x : (wall.start[0] + wall.end[0]) / 2
+  const midZ = curveFrame ? curveFrame.point.y : (wall.start[1] + wall.end[1]) / 2
+  const dirX = curveFrame ? curveFrame.tangent.x : wall.end[0] - wall.start[0]
+  const dirZ = curveFrame ? curveFrame.tangent.y : wall.end[1] - wall.start[1]
+  const wallAngle = Math.atan2(-dirZ, dirX)
+  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+  const handleY = wallHeight + HEIGHT_HANDLE_OFFSET
+
+  const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    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.
+    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 setNDC = (clientX: number, clientY: number) => {
+      const rect = gl.domElement.getBoundingClientRect()
+      ndc.set(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+    }
+
+    setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY)
+    raycaster.setFromCamera(ndc, camera)
+    const hit = new Vector3()
+    if (!raycaster.ray.intersectPlane(plane, hit)) return
+
+    const initialHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+    const initialY = hit.y
+    const wallId = wall.id as AnyNodeId
+
+    document.body.style.cursor = 'ns-resize'
+    sfxEmitter.emit('sfx:item-pick')
+    useEditor.getState().setResizingWallHeight(wall)
+    // 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.
+    useViewer.getState().setHandleDragging(true)
+    useScene.temporal.getState().pause()
+
+    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))
+      useScene.getState().updateNode(wallId, { height: newHeight })
+    }
+
+    const cleanup = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      if (document.body.style.cursor === 'ns-resize') {
+        document.body.style.cursor = ''
+      }
+      useScene.temporal.getState().resume()
+      useEditor.getState().setResizingWallHeight(null)
+      useViewer.getState().setHandleDragging(false)
+      dragCleanupRef.current = null
+    }
+    const onUp = () => {
+      swallowNextClick()
+      sfxEmitter.emit('sfx:item-place')
+      cleanup()
+    }
+    const onCancel = () => cleanup()
+
+    dragCleanupRef.current = cleanup
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  }
+
+  return (
+    <group position={[midX, handleY, midZ]} rotation={[0, wallAngle, 0]}>
+      <group rotation={[0, Math.PI / 2, Math.PI / 2]} scale={scale}>
+        <mesh
+          // Geometry-as-prop + frustumCulled={false} — see WallMoveArrowHandle.
+          frustumCulled={false}
+          geometry={arrowGeometry}
+          material={arrowMaterial}
+          onPointerDown={activateHeightResize}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setIsHovered(true)
+            document.body.style.cursor = 'ns-resize'
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setIsHovered(false)
+            if (document.body.style.cursor === 'ns-resize') {
+              document.body.style.cursor = ''
+            }
+          }}
+          renderOrder={1002}
+        />
+      </group>
+    </group>
+  )
+}
+
+function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMoveHandle }) {
+  const [isHovered, setIsHovered] = useState(false)
+  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const arrowMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true,
+        opacity: 1,
+      }),
+    [],
+  )
+  const { camera } = useThree()
+
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
+
+  useEffect(() => {
+    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [arrowMaterial, isHovered])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'grab' || document.body.style.cursor === 'grabbing') {
+        document.body.style.cursor = ''
+      }
+    }
+  }, [])
+
+  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
+
+  const activateWallMove = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    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)
+    // Keep the wall selected so it stays the active item once the move
+    // commits; the `!movingNode` guard on the handles hides them mid-drag.
+  }
+
+  return (
+    <group position={handle.position} rotation={[0, handle.rotationY, 0]} scale={scale}>
+      <mesh
+        // Pass geometry as a prop (not `<primitive attach="geometry">`)
+        // so the mesh is never rendered with R3F's default empty
+        // `BufferGeometry`. Combined with `frustumCulled={false}`, the
+        // primitive-attach path emits a `Draw(0, 1, 0, 0)` on the first
+        // frame and WebGPU flags "Vertex buffer slot 0 ... was not set".
+        frustumCulled={false}
+        geometry={arrowGeometry}
+        material={arrowMaterial}
+        onPointerDown={activateWallMove}
+        onPointerEnter={(event) => {
+          event.stopPropagation()
+          setIsHovered(true)
+          document.body.style.cursor = 'grab'
+        }}
+        onPointerLeave={(event) => {
+          event.stopPropagation()
+          setIsHovered(false)
+          if (document.body.style.cursor === 'grab') {
+            document.body.style.cursor = ''
+          }
+        }}
+        renderOrder={1002}
+      />
+    </group>
+  )
+}
+
+function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: WallMoveHandle }) {
+  const [isHovered, setIsHovered] = useState(false)
+  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const arrowMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true,
+        opacity: 1,
+      }),
+    [],
+  )
+  const { camera } = useThree()
+
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
+
+  useEffect(() => {
+    arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [arrowMaterial, isHovered])
+
+  useEffect(() => {
+    return () => {
+      if (document.body.style.cursor === 'grab' || document.body.style.cursor === 'grabbing') {
+        document.body.style.cursor = ''
+      }
+    }
+  }, [])
+
+  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+  useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
+
+  const activateFenceMove = (event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation()
+    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)
+    // Keep the fence selected so it stays active once the move commits.
+  }
+
+  return (
+    <group position={handle.position} rotation={[0, handle.rotationY, 0]} scale={scale}>
+      <mesh
+        // Pass geometry as a prop — see WallMoveArrowHandle for the
+        // WebGPU "Vertex buffer slot 0 ... was not set" rationale.
+        frustumCulled={false}
+        geometry={arrowGeometry}
+        material={arrowMaterial}
+
+        onPointerDown={activateFenceMove}
+        onPointerEnter={(event) => {
+          event.stopPropagation()
+          setIsHovered(true)
+          document.body.style.cursor = 'grab'
+        }}
+        onPointerLeave={(event) => {
+          event.stopPropagation()
+          setIsHovered(false)
+          if (document.body.style.cursor === 'grab') {
+            document.body.style.cursor = ''
+          }
+        }}
+        renderOrder={1002}
+      />
+    </group>
+  )
+}
+
+function getWallMoveHandles(wall: WallNode): WallMoveHandle[] {
+  const dx = wall.end[0] - wall.start[0]
+  const dz = wall.end[1] - wall.start[1]
+  const length = Math.hypot(dx, dz)
+
+  if (length < 1e-6) {
+    return []
+  }
+
+  const frame = isCurvedWall(wall) ? getWallCurveFrameAt(wall, 0.5) : null
+  const normal: [number, number] = frame
+    ? [frame.normal.x, frame.normal.y]
+    : [-dz / length, dx / length]
+  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 handleHeight = Math.max(wallHeight - HANDLE_TOP_INSET, HANDLE_MIN_HEIGHT)
+  const offset = Math.max(getWallThickness(wall) / 2 + HANDLE_OFFSET, HANDLE_MIN_OFFSET)
+
+  return [
+    buildWallMoveHandle('front', midpoint, normal, offset, handleHeight),
+    buildWallMoveHandle('back', midpoint, [-normal[0], -normal[1]], offset, handleHeight),
+  ]
+}
+
+function WallMoveSideHandlesForFence({ fence }: { fence: FenceNode }) {
+  const [levelObject, setLevelObject] = useState<Object3D | null>(() =>
+    fence.parentId ? (sceneRegistry.nodes.get(fence.parentId) ?? null) : null,
+  )
+
+  useEffect(() => {
+    let frameId = 0
+
+    const resolveLevelObject = () => {
+      const nextLevelObject = fence.parentId
+        ? (sceneRegistry.nodes.get(fence.parentId) ?? null)
+        : null
+      setLevelObject((currentLevelObject) => {
+        if (currentLevelObject === nextLevelObject) {
+          return currentLevelObject
+        }
+        return nextLevelObject
+      })
+
+      if (!nextLevelObject) {
+        frameId = window.requestAnimationFrame(resolveLevelObject)
+      }
+    }
+
+    resolveLevelObject()
+
+    return () => {
+      if (frameId) {
+        window.cancelAnimationFrame(frameId)
+      }
+    }
+  }, [fence.parentId])
+
+  const handles = useMemo(() => getFenceMoveHandles(fence), [fence])
+
+  if (!levelObject || handles.length === 0) return null
+
+  return createPortal(
+    <group>
+      {handles.map((handle) => (
+        <FenceMoveArrowHandle fence={fence} handle={handle} key={handle.key} />
+      ))}
+    </group>,
+    levelObject,
+  )
+}
+
+function getFenceMoveHandles(fence: FenceNode): WallMoveHandle[] {
+  const dx = fence.end[0] - fence.start[0]
+  const dz = fence.end[1] - fence.start[1]
+  const length = Math.hypot(dx, dz)
+
+  if (length < 1e-6) {
+    return []
+  }
+
+  const midpoint: [number, number] = [
+    (fence.start[0] + fence.end[0]) / 2,
+    (fence.start[1] + fence.end[1]) / 2,
+  ]
+  const normal: [number, number] = [-dz / length, dx / length]
+  const fenceHeight = fence.height ?? 1.8
+  const handleHeight = Math.max(fenceHeight - HANDLE_TOP_INSET, HANDLE_MIN_HEIGHT)
+  const offset = Math.max((fence.thickness ?? 0.1) / 2 + HANDLE_OFFSET, HANDLE_MIN_OFFSET)
+
+  return [
+    buildWallMoveHandle('front', midpoint, normal, offset, handleHeight),
+    buildWallMoveHandle('back', midpoint, [-normal[0], -normal[1]], offset, handleHeight),
+  ]
+}
+
+function buildWallMoveHandle(
+  key: string,
+  midpoint: [number, number],
+  direction: [number, number],
+  offset: number,
+  height: number,
+): WallMoveHandle {
+  return {
+    key,
+    position: [midpoint[0] + direction[0] * offset, height, midpoint[1] + direction[1] * offset],
+    rotationY: Math.atan2(-direction[1], direction[0]),
+  }
+}
diff --git a/packages/nodes/src/wall/definition.ts b/packages/nodes/src/wall/definition.ts
index f87f13d1c..7d0422f87 100644
--- a/packages/nodes/src/wall/definition.ts
+++ b/packages/nodes/src/wall/definition.ts
@@ -1,12 +1,4 @@
-import {
-  DEFAULT_WALL_HEIGHT,
-  getWallCurveFrameAt,
-  getWallThickness,
-  type HandleDescriptor,
-  isCurvedWall,
-  type NodeDefinition,
-  type WallNode as WallNodeType,
-} from '@pascal-app/core'
+import type { NodeDefinition } from '@pascal-app/core'
 import { buildWallFloorplan } from './floorplan'
 import { wallCurveAffordance, wallMoveEndpointAffordance } from './floorplan-affordances'
 import { wallFloorplanMoveTarget } from './floorplan-move'
@@ -14,129 +6,6 @@ import { wallPaint } from './paint'
 import { wallParametrics } from './parametrics'
 import { WallNode } from './schema'
 
-const HEIGHT_HANDLE_OFFSET = 0.26
-const MIN_WALL_HEIGHT = 0.5
-const SIDE_HANDLE_OFFSET = 0.27
-const SIDE_HANDLE_MIN_OFFSET = 0.33
-const SIDE_HANDLE_TOP_INSET = 0.08
-const SIDE_HANDLE_MIN_HEIGHT = 0.4
-
-// Curve-aware midpoint + outward-normal at the wall's t=0.5 point. For
-// straight walls that's the chord midpoint + perpendicular; for curved
-// walls it's the arc apex + true normal.
-function wallApexFrame(n: WallNodeType): {
-  midX: number
-  midZ: number
-  normalX: number
-  normalZ: number
-  tangentX: number
-  tangentZ: number
-} {
-  if (isCurvedWall(n)) {
-    const f = getWallCurveFrameAt(n, 0.5)
-    return {
-      midX: f.point.x,
-      midZ: f.point.y,
-      normalX: f.normal.x,
-      normalZ: f.normal.y,
-      tangentX: f.tangent.x,
-      tangentZ: f.tangent.y,
-    }
-  }
-  const dx = n.end[0] - n.start[0]
-  const dz = n.end[1] - n.start[1]
-  const len = Math.max(Math.hypot(dx, dz), 1e-6)
-  return {
-    midX: (n.start[0] + n.end[0]) / 2,
-    midZ: (n.start[1] + n.end[1]) / 2,
-    normalX: -dz / len,
-    normalZ: dx / len,
-    tangentX: dx / len,
-    tangentZ: dz / len,
-  }
-}
-
-// Height arrow: drag the +Y end, anchor at the floor (Y = 0). Curve-aware
-// placement so it sits over the visual centre of the wall (arc apex /
-// chord midpoint).
-function wallHeightHandle(): HandleDescriptor<WallNodeType> {
-  return {
-    kind: 'linear-resize',
-    axis: 'y',
-    anchor: 'min',
-    min: MIN_WALL_HEIGHT,
-    currentValue: (n) => n.height ?? DEFAULT_WALL_HEIGHT,
-    apply: (_n, newHeight) => ({ height: newHeight }),
-    placement: {
-      position: (n) => {
-        const { midX, midZ } = wallApexFrame(n)
-        const h = n.height ?? DEFAULT_WALL_HEIGHT
-        return [midX, h + HEIGHT_HANDLE_OFFSET, midZ]
-      },
-      rotationY: (n) => {
-        const { tangentX, tangentZ } = wallApexFrame(n)
-        return Math.atan2(-tangentZ, tangentX)
-      },
-    },
-  }
-}
-
-// Side-move arrows: front + back faces of the wall. Clicking either hands
-// the wall to the move tool. Positioned just past each wall face at the
-// upper-third of the wall so they don't collide with door / window
-// handles on the same wall.
-function wallSideMoveHandle(side: 'front' | 'back'): HandleDescriptor<WallNodeType> {
-  const sign = side === 'front' ? 1 : -1
-  return {
-    kind: 'tap-action',
-    onActivate: (node, _scene, editor) => editor.engageMove(node),
-    placement: {
-      position: (n) => {
-        const { midX, midZ, normalX, normalZ } = wallApexFrame(n)
-        const offset = Math.max(
-          getWallThickness(n) / 2 + SIDE_HANDLE_OFFSET,
-          SIDE_HANDLE_MIN_OFFSET,
-        )
-        const h = n.height ?? DEFAULT_WALL_HEIGHT
-        const handleY = Math.max(h - SIDE_HANDLE_TOP_INSET, SIDE_HANDLE_MIN_HEIGHT)
-        return [midX + sign * normalX * offset, handleY, midZ + sign * normalZ * offset]
-      },
-      // Arrow chevron points outward along the (signed) normal direction.
-      rotationY: (n) => {
-        const { normalX, normalZ } = wallApexFrame(n)
-        return Math.atan2(-sign * normalZ, sign * normalX)
-      },
-    },
-    cursor: 'move',
-  }
-}
-
-// Corner pickers: dashed leader from floor up to wall.height + billboarded
-// hex disc at the corner. Clicking the hex engages endpoint move on that
-// corner.
-function wallCornerPickerHandle(endpoint: 'start' | 'end'): HandleDescriptor<WallNodeType> {
-  return {
-    kind: 'tap-action',
-    shape: 'corner-picker',
-    onActivate: (node, _scene, editor) => editor.engageEndpointMove(node, endpoint),
-    nodeHeight: (n) => n.height ?? DEFAULT_WALL_HEIGHT,
-    placement: {
-      position: (n) => {
-        const corner = endpoint === 'start' ? n.start : n.end
-        return [corner[0], 0, corner[1]]
-      },
-    },
-  }
-}
-
-const wallHandles: HandleDescriptor<WallNodeType>[] = [
-  wallHeightHandle(),
-  wallSideMoveHandle('front'),
-  wallSideMoveHandle('back'),
-  wallCornerPickerHandle('start'),
-  wallCornerPickerHandle('end'),
-]
-
 /**
  * Wall — the Phase 3 stress test of the registry-driven node model.
  *
@@ -196,7 +65,9 @@ export const wallDefinition: NodeDefinition<typeof WallNode> = {
   },
 
   parametrics: wallParametrics,
-  handles: wallHandles,
+  // Height arrow + side-move arrows + corner pickers all live in the legacy
+  // `wall-move-side-handles.tsx` component. The registry handle path didn't
+  // render correctly for walls specifically; revisit once that's diagnosed.
 
   // Stage D — all four wall drag affordances live in this folder.
   // curve / move-endpoint / move are 1:1 ports of the legacy tools

From 0f9274c31f6db655bd507ecdec33d4014fc3fc55 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Tue, 26 May 2026 02:10:24 +0530
Subject: [PATCH 29/48] editor: level naming helper + ambient floorplan render
 during building moves

Two unrelated WIP fixes bundled:

- Level names: extract \`getDefaultLevelName(n)\` /
  \`getLevelDisplayName(level)\` into \`packages/editor/src/lib/level-name.ts\`
  and swap in across rename inputs, command palette, floating selector,
  site panel, level-tree node, level-duplicate dialog, view toggles, and
  viewer-overlay breadcrumb. Default labels now read "Ground Floor" /
  "Floor N" / "Basement N" instead of the bare "Level N" string each
  caller was concatenating itself.

- Building-move ambient floorplan: when a building is selected (or
  mid-move) without an explicit level, FloorplanRegistryLayer falls
  back to that building's level 0 (or lowest level) and renders it
  dimmed + non-interactive so the floor stays visible as context
  instead of disappearing. FloorplanPanel allows the SVG to mount in
  that case. MoveBuildingTool publishes per-frame pose to
  useLiveTransforms so the floor-plan follows the drag without
  reading from the Three.js mesh.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../renderers/floorplan-registry-layer.tsx    | 48 ++++++++++++++++++-
 .../src/components/editor/floorplan-panel.tsx | 23 ++++++++-
 .../editor/use-floorplan-scene-data.ts        | 15 +++++-
 .../tools/building/move-building-tool.tsx     | 19 ++++++++
 .../ui/action-menu/view-toggles.tsx           |  5 +-
 .../components/ui/command-palette/index.tsx   |  3 +-
 .../components/ui/floating-level-selector.tsx | 15 +++---
 .../components/ui/level-duplicate-dialog.tsx  |  3 +-
 .../ui/sidebar/panels/site-panel/index.tsx    |  3 +-
 .../panels/site-panel/level-tree-node.tsx     |  3 +-
 .../editor/src/components/viewer-overlay.tsx  |  3 +-
 packages/editor/src/lib/level-name.ts         | 11 +++++
 12 files changed, 128 insertions(+), 23 deletions(-)
 create mode 100644 packages/editor/src/lib/level-name.ts

diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
index d900a9b55..06c9106ea 100644
--- a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
@@ -101,13 +101,52 @@ function snapshotsToUpdates(snapshots: NodeSnapshot[]) {
 }
 
 export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
-  const levelId = useViewer((s) => s.selection.levelId)
+  const selectedLevelId = useViewer((s) => s.selection.levelId)
+  const selectedBuildingId = useViewer((s) => s.selection.buildingId)
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const previewSelectedIds = useViewer((s) => s.previewSelectedIds)
   const hoveredId = useViewer((s) => s.hoveredId)
   const setHoveredId = useViewer((s) => s.setHoveredId)
   const setSelection = useViewer((s) => s.setSelection)
   const nodes = useScene((s) => s.nodes)
+  // When a building is being moved, its explicit selection may be
+  // cleared as part of the move handoff. Fall back to the
+  // mid-drag building id so the dimmed floor keeps rendering
+  // throughout the gesture.
+  const movingBuildingId = useEditor((state) =>
+    state.movingNode?.type === 'building' ? state.movingNode.id : null,
+  )
+  const ambientBuildingSourceId = selectedBuildingId ?? movingBuildingId
+
+  // When only a building is in scope (no specific level), fall back to
+  // its level 0 (or the lowest-indexed level) so the floor still
+  // renders as context — dimmed and non-interactive — instead of
+  // disappearing entirely.
+  const ambientLevelId = useMemo<AnyNodeId | null>(() => {
+    if (selectedLevelId || !ambientBuildingSourceId) return null
+    const building = nodes[ambientBuildingSourceId]
+    if (!building || building.type !== 'building') return null
+    let zero: AnyNodeId | null = null
+    let lowestId: AnyNodeId | null = null
+    let lowestIdx = Number.POSITIVE_INFINITY
+    const childIds = (building as unknown as { children?: AnyNodeId[] }).children ?? []
+    for (const childId of childIds) {
+      const child = nodes[childId]
+      if (child?.type !== 'level') continue
+      if (child.level === 0) {
+        zero = child.id
+        break
+      }
+      if (child.level < lowestIdx) {
+        lowestIdx = child.level
+        lowestId = child.id
+      }
+    }
+    return zero ?? lowestId
+  }, [selectedLevelId, ambientBuildingSourceId, nodes])
+
+  const levelId = selectedLevelId ?? ambientLevelId
+  const isAmbient = !selectedLevelId && !!ambientLevelId
   const renderCtx = useFloorplanRender()
   const movingNode = useEditor((s) => s.movingNode)
   const setMovingNode = useEditor((s) => s.setMovingNode)
@@ -582,7 +621,12 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
     // appear to "deselect themselves a fraction of a second after
     // clicking." Scoped to `onClick` so hover / drag / pointer events
     // still propagate normally inside the registry tree.
-    <g className="floorplan-registry-layer" onClick={handleClickStop}>
+    <g
+      className="floorplan-registry-layer"
+      onClick={handleClickStop}
+      opacity={isAmbient ? 0.3 : undefined}
+      style={isAmbient ? { pointerEvents: 'none' } : undefined}
+    >
       {/* Base pass — rank-sorted body geometry (polygons, paths, fills,
           strokes, hatches). Lower-rank kinds (zones) paint first so
           higher-rank kinds (slabs, then walls / items / shelves) layer
diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index 18d4847fd..7f5548d0e 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -4119,6 +4119,27 @@ export function FloorplanPanel() {
     walls,
     zones,
   } = useFloorplanSceneData({ buildingId, levelId })
+  // When only a building is selected (or we're mid-drag on a building),
+  // the FloorplanRegistryLayer falls back to that building's level 0
+  // (or lowest level) and renders it dimmed as context. We let the SVG
+  // mount in that case so the dimmed-floor render path is reachable
+  // instead of swapping in the "Switch to a building level" message.
+  //
+  // `currentBuildingId` covers both the user-selected building and the
+  // building inferred from a selected level. During a building move the
+  // `movingNode` carries the building's id even if the explicit
+  // selection has been cleared as part of the move handoff.
+  const movingBuildingId =
+    useEditor((state) =>
+      state.movingNode?.type === 'building' ? state.movingNode.id : null,
+    ) ?? null
+  const ambientBuildingId = currentBuildingId ?? movingBuildingId
+  const hasAmbientBuildingLevel = useScene((state) => {
+    if (levelId || !ambientBuildingId) return false
+    const building = state.nodes[ambientBuildingId]
+    if (!building || building.type !== 'building') return false
+    return building.children.some((cid) => state.nodes[cid]?.type === 'level')
+  })
   const elevators = useScene(
     useShallow((state) => {
       const building = currentBuildingId ? state.nodes[currentBuildingId] : null
@@ -8722,7 +8743,7 @@ export function FloorplanPanel() {
           </form>
         )}
 
-        {!levelNode || levelNode.type !== 'level' ? (
+        {(!levelNode || levelNode.type !== 'level') && !hasAmbientBuildingLevel ? (
           <div className="flex h-full items-center justify-center px-6 text-center text-muted-foreground text-sm">
             Switch to a building level to view and edit the floorplan.
           </div>
diff --git a/packages/editor/src/components/editor/use-floorplan-scene-data.ts b/packages/editor/src/components/editor/use-floorplan-scene-data.ts
index 37db0c820..b3d7350ed 100644
--- a/packages/editor/src/components/editor/use-floorplan-scene-data.ts
+++ b/packages/editor/src/components/editor/use-floorplan-scene-data.ts
@@ -12,6 +12,7 @@ import {
   type SiteNode,
   type SlabNode,
   type SpawnNode,
+  useLiveTransforms,
   useScene,
   type WallNode,
   type WindowNode,
@@ -59,13 +60,22 @@ export function useFloorplanSceneData({
       ? (levelNode.parentId as BuildingNode['id'])
       : buildingId
 
-  const buildingRotationY = useScene((state) => {
+  // Live transform override — when the building is mid-drag (the move
+  // tool publishes per-frame pose to useLiveTransforms), the floor-plan
+  // follows that pose so the dimmed reference floor tracks the cursor
+  // instead of snapping only on commit.
+  const buildingLiveTransform = useLiveTransforms((state) =>
+    currentBuildingId ? state.transforms.get(currentBuildingId) : undefined,
+  )
+
+  const committedBuildingRotationY = useScene((state) => {
     if (!currentBuildingId) return 0
     const node = state.nodes[currentBuildingId]
     return node?.type === 'building' ? (node.rotation[1] ?? 0) : 0
   })
+  const buildingRotationY = buildingLiveTransform?.rotation ?? committedBuildingRotationY
 
-  const buildingPosition = useScene((state) => {
+  const committedBuildingPosition = useScene((state) => {
     if (!currentBuildingId) {
       return DEFAULT_BUILDING_POSITION
     }
@@ -75,6 +85,7 @@ export function useFloorplanSceneData({
       ? (node.position as [number, number, number])
       : DEFAULT_BUILDING_POSITION
   })
+  const buildingPosition = buildingLiveTransform?.position ?? committedBuildingPosition
 
   const site = useScene((state) => {
     for (const rootNodeId of state.rootNodeIds) {
diff --git a/packages/editor/src/components/tools/building/move-building-tool.tsx b/packages/editor/src/components/tools/building/move-building-tool.tsx
index d8fb9c445..0917abb28 100644
--- a/packages/editor/src/components/tools/building/move-building-tool.tsx
+++ b/packages/editor/src/components/tools/building/move-building-tool.tsx
@@ -5,6 +5,7 @@ import {
   emitter,
   type GridEvent,
   sceneRegistry,
+  useLiveTransforms,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
@@ -71,6 +72,16 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) {
 
     useScene.temporal.getState().pause()
 
+    // Publish the building's current pose to useLiveTransforms so the
+    // floor-plan (and any other live consumers) can follow per-frame
+    // without peeking into the Three.js mesh.
+    const publishLive = (posX: number, posZ: number, rotY: number) => {
+      useLiveTransforms.getState().set(nodeId, {
+        position: [posX, originalPosition[1], posZ],
+        rotation: rotY,
+      })
+    }
+
     let wasCommitted = false
 
     const onKeyDown = (event: KeyboardEvent) => {
@@ -97,6 +108,9 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) {
             const off = offsetAt(pendingRotationRef.current)
             mesh.position.x = gridX - off.x
             mesh.position.z = gridZ - off.z
+            publishLive(mesh.position.x, mesh.position.z, pendingRotationRef.current)
+          } else {
+            publishLive(mesh.position.x, mesh.position.z, pendingRotationRef.current)
           }
         }
       }
@@ -122,6 +136,7 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) {
         const off = offsetAt(pendingRotationRef.current)
         mesh.position.x = gridX - off.x
         mesh.position.z = gridZ - off.z
+        publishLive(mesh.position.x, mesh.position.z, pendingRotationRef.current)
       }
     }
 
@@ -174,6 +189,10 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) {
           rotation: [0, originalRotationRef.current, 0],
         })
       }
+      // Drop the live transform — committed positions are now in the scene
+      // store, so the floor-plan should read those instead of the stale
+      // drag overlay.
+      useLiveTransforms.getState().clear(nodeId)
       useScene.temporal.getState().resume()
       emitter.off('grid:move', onGridMove)
       emitter.off('grid:click', onGridClick)
diff --git a/packages/editor/src/components/ui/action-menu/view-toggles.tsx b/packages/editor/src/components/ui/action-menu/view-toggles.tsx
index a1e0c2dd3..25eb05783 100644
--- a/packages/editor/src/components/ui/action-menu/view-toggles.tsx
+++ b/packages/editor/src/components/ui/action-menu/view-toggles.tsx
@@ -13,6 +13,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { Check, ChevronDown, Eye, EyeOff, Layers2, Plus, Trash2 } from 'lucide-react'
 import { useCallback, useRef, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { getLevelDisplayName } from '../../../lib/level-name'
 import { createLocalGuideImage } from '../../../lib/local-guide-image'
 import { cn } from '../../../lib/utils'
 import useEditor, { type GridSnapStep } from '../../../store/use-editor'
@@ -84,10 +85,6 @@ function useLowerReferenceLevels(): LevelNode[] {
   )
 }
 
-function getLevelDisplayName(level: LevelNode) {
-  return level.name || `Level ${level.level}`
-}
-
 // ── Shared upload button for dropdowns ──────────────────────────────────────
 
 function UploadButton({ onError }: { onError: (message: string | null) => void }) {
diff --git a/packages/editor/src/components/ui/command-palette/index.tsx b/packages/editor/src/components/ui/command-palette/index.tsx
index 772e705d0..39b7e012c 100644
--- a/packages/editor/src/components/ui/command-palette/index.tsx
+++ b/packages/editor/src/components/ui/command-palette/index.tsx
@@ -10,6 +10,7 @@ import { useEffect, useState } from 'react'
 import { create } from 'zustand'
 import { useShallow } from 'zustand/shallow'
 import { Dialog, DialogContent, DialogTitle } from './../../../components/ui/primitives/dialog'
+import { getLevelDisplayName } from '../../../lib/level-name'
 import { useCommandRegistry } from '../../../store/use-command-registry'
 import { usePaletteViewRegistry } from '../../../store/use-palette-view-registry'
 
@@ -404,7 +405,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
                     <OptionItem
                       isActive={level.id === activeLevelId}
                       key={level.id}
-                      label={level.name ?? `Level ${level.level}`}
+                      label={getLevelDisplayName(level)}
                       onSelect={() =>
                         run(() => useViewer.getState().setSelection({ levelId: level.id }))
                       }
diff --git a/packages/editor/src/components/ui/floating-level-selector.tsx b/packages/editor/src/components/ui/floating-level-selector.tsx
index 240cf5508..1faa7b0dd 100644
--- a/packages/editor/src/components/ui/floating-level-selector.tsx
+++ b/packages/editor/src/components/ui/floating-level-selector.tsx
@@ -41,6 +41,7 @@ import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
 } from '../../lib/level-duplication'
+import { getDefaultLevelName, getLevelDisplayName } from '../../lib/level-name'
 import { deleteLevelWithFallbackSelection } from '../../lib/level-selection'
 import {
   getEditorClipboardSnapshot,
@@ -60,10 +61,6 @@ import {
 } from './primitives/dialog'
 import { Popover, PopoverContent, PopoverTrigger } from './primitives/popover'
 
-function getLevelDisplayLabel(level: LevelNode) {
-  return level.name || `Level ${level.level}`
-}
-
 // ── Inline rename input for a level row ─────────────────────────────────────
 
 function LevelInlineRename({
@@ -76,7 +73,7 @@ function LevelInlineRename({
   onStopEditing: () => void
 }) {
   const updateNode = useScene((s) => s.updateNode)
-  const defaultName = `Level ${level.level}`
+  const defaultName = getDefaultLevelName(level.level)
   const [value, setValue] = useState(level.name || '')
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -169,7 +166,7 @@ function LevelRow({
         >
           <button
             {...dragHandleProps}
-            aria-label={`Reorder ${getLevelDisplayLabel(level)}`}
+            aria-label={`Reorder ${getLevelDisplayName(level)}`}
             className={cn(
               'ml-0.5 flex h-6 w-4 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground/35 opacity-0 transition-colors hover:bg-white/5 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 group-hover/level:opacity-100',
               isDragging && 'cursor-grabbing opacity-100',
@@ -192,10 +189,10 @@ function LevelRow({
               e.stopPropagation()
               setIsEditing(true)
             }}
-            title={getLevelDisplayLabel(level)}
+            title={getLevelDisplayName(level)}
             type="button"
           >
-            <span className="truncate">{getLevelDisplayLabel(level)}</span>
+            <span className="truncate">{getLevelDisplayName(level)}</span>
           </button>
 
           {/* Vertical three-dot menu — inside the pill */}
@@ -599,7 +596,7 @@ export function FloatingLevelSelector() {
             <DialogTitle>Delete level</DialogTitle>
             <DialogDescription>
               Are you sure you want to delete{' '}
-              <strong>{deletingLevel ? getLevelDisplayLabel(deletingLevel) : ''}</strong>? All
+              <strong>{deletingLevel ? getLevelDisplayName(deletingLevel) : ''}</strong>? All
               walls, floors, and objects on this level will be permanently removed.
             </DialogDescription>
           </DialogHeader>
diff --git a/packages/editor/src/components/ui/level-duplicate-dialog.tsx b/packages/editor/src/components/ui/level-duplicate-dialog.tsx
index e91ae5b6a..5b2b9f474 100644
--- a/packages/editor/src/components/ui/level-duplicate-dialog.tsx
+++ b/packages/editor/src/components/ui/level-duplicate-dialog.tsx
@@ -3,6 +3,7 @@
 import type { LevelNode } from '@pascal-app/core'
 import { useEffect, useState } from 'react'
 import type { LevelDuplicatePreset } from '../../lib/level-duplication'
+import { getLevelDisplayName } from '../../lib/level-name'
 import { cn } from '../../lib/utils'
 import {
   Dialog,
@@ -42,7 +43,7 @@ const DUPLICATE_PRESETS: Array<{
 
 function getLevelLabel(level: LevelNode | null) {
   if (!level) return 'this level'
-  return level.name || `Level ${level.level}`
+  return getLevelDisplayName(level)
 }
 
 export function LevelDuplicateDialog({
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
index 5c291d323..4bc8ffea4 100644
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/index.tsx
@@ -36,6 +36,7 @@ import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
 } from './../../../../../lib/level-duplication'
+import { getDefaultLevelName } from './../../../../../lib/level-name'
 import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
 import { createLocalGuideImage } from './../../../../../lib/local-guide-image'
 import { cn } from './../../../../../lib/utils'
@@ -723,7 +724,7 @@ const LevelItem = memo(function LevelItem({
             src="/icons/level.png"
           />
           <InlineRenameInput
-            defaultName={`Level ${level.level}`}
+            defaultName={getDefaultLevelName(level.level)}
             isEditing={isEditing}
             nodeId={level.id}
             onStartEditing={() => setIsEditing(true)}
diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx
index 2054788e4..0047dd46e 100644
--- a/packages/editor/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx
+++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx
@@ -3,6 +3,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { Layers } from 'lucide-react'
 import { memo, useCallback, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { getDefaultLevelName } from '../../../../../lib/level-name'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -35,7 +36,7 @@ export const LevelTreeNode = memo(function LevelTreeNode({
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const defaultName = `Level ${level}`
+  const defaultName = getDefaultLevelName(level)
 
   return (
     <TreeNodeWrapper
diff --git a/packages/editor/src/components/viewer-overlay.tsx b/packages/editor/src/components/viewer-overlay.tsx
index e8a667306..7d60a23b1 100644
--- a/packages/editor/src/components/viewer-overlay.tsx
+++ b/packages/editor/src/components/viewer-overlay.tsx
@@ -30,6 +30,7 @@ import {
 } from 'lucide-react'
 import Link from 'next/link'
 import { useShallow } from 'zustand/react/shallow'
+import { getLevelDisplayName } from '../lib/level-name'
 import { cn } from '../lib/utils'
 import { ActionButton } from './ui/action-menu/action-button'
 import {
@@ -363,7 +364,7 @@ export const ViewerOverlay = ({
                       className={`truncate transition-colors ${zone ? 'text-muted-foreground hover:text-foreground' : 'font-medium text-foreground'}`}
                       onClick={() => handleBreadcrumbClick('level')}
                     >
-                      {level.name || `Level ${level.level}`}
+                      {getLevelDisplayName(level)}
                     </button>
                   </>
                 )}
diff --git a/packages/editor/src/lib/level-name.ts b/packages/editor/src/lib/level-name.ts
new file mode 100644
index 000000000..9476aa5be
--- /dev/null
+++ b/packages/editor/src/lib/level-name.ts
@@ -0,0 +1,11 @@
+import type { LevelNode } from '@pascal-app/core'
+
+export function getDefaultLevelName(level: number): string {
+  if (level === 0) return 'Ground Floor'
+  if (level > 0) return `Floor ${level}`
+  return `Basement ${-level}`
+}
+
+export function getLevelDisplayName(level: Pick<LevelNode, 'name' | 'level'>): string {
+  return level.name || getDefaultLevelName(level.level)
+}

From a80942dd6911292edebe1d1a638ae5de15f654f2 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Tue, 26 May 2026 02:33:05 +0530
Subject: [PATCH 30/48] handles: 3D resize arrows publish to
 useLiveNodeOverrides, commit on release
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Door / window / wall height-arrow drags now stage the patch in
\`useLiveNodeOverrides\` each frame and write to zustand exactly once on
pointerup. The kind's system reads via \`getEffectiveNode\` and rebuilds
the mesh imperatively, so the React tree never re-renders mid-drag and
undo isn't polluted by per-frame writes.

- \`packages/core\`: shared \`getEffectiveNode<T>(node)\` helper exported
  from \`@pascal-app/core\`; spreads any override fields onto the input,
  returns it unchanged when none. Replaces the inline merge wall-system
  had as \`getEffectiveWall\`.

- \`DoorSystem\` / \`WindowSystem\`: subscribe to
  \`useLiveNodeOverrides.overrides\` (so override-only ticks re-run the
  component and pick up the latest dirtyNodes), merge via
  \`getEffectiveNode\` before \`updateXMesh\`. Parent-wall dirty cascade
  uses the effective node's parentId.

- \`WallSystem.updateWallGeometry\`: door / window children are merged
  through \`getEffectiveNode\` before being passed to
  \`generateExtrudedWall\`, so cutouts track the in-flight resize.

- \`LinearArrow\` (registry handle): onMove → override + markDirty;
  onUp → one tracked \`sceneApi.update(lastPatch)\` + clear; onCancel →
  clear + markDirty to revert geometry.

- Legacy \`WallHeightArrowHandle\` in wall-move-side-handles.tsx
  switched to the same pattern (was the only inline-drag handle in
  that file — side-move + corner pickers hand off to other tools).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/core/src/index.ts                    |  1 +
 .../core/src/store/use-live-node-overrides.ts | 12 +++++++++
 .../components/editor/node-arrow-handles.tsx  | 27 +++++++++++++++++--
 .../editor/wall-move-side-handles.tsx         | 26 ++++++++++++++++--
 .../viewer/src/systems/door/door-system.tsx   | 17 +++++++++---
 .../viewer/src/systems/wall/wall-system.tsx   |  8 ++++++
 .../src/systems/window/window-system.tsx      | 14 +++++++---
 7 files changed, 95 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index c9a1edd7e..402289e77 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -97,6 +97,7 @@ export {
 export {
   default as useLiveNodeOverrides,
   type LiveNodeOverrides,
+  getEffectiveNode,
 } from './store/use-live-node-overrides'
 export { default as useLiveTransforms, type LiveTransform } from './store/use-live-transforms'
 export { clearSceneHistory, default as useScene } from './store/use-scene'
diff --git a/packages/core/src/store/use-live-node-overrides.ts b/packages/core/src/store/use-live-node-overrides.ts
index 5a4ac8128..aedb2293c 100644
--- a/packages/core/src/store/use-live-node-overrides.ts
+++ b/packages/core/src/store/use-live-node-overrides.ts
@@ -42,4 +42,16 @@ const useLiveNodeOverrides = create<LiveNodeOverrideState>((set, get) => ({
   clearAll: () => set({ overrides: new Map() }),
 }))
 
+/**
+ * Merge any live override for `node` into a fresh copy. Spread semantics —
+ * override fields win, untouched fields stay. Returns the input unchanged
+ * when no override exists, so the caller can use the result directly
+ * without an extra "did anything change" check.
+ */
+export function getEffectiveNode<T extends { id: string }>(node: T): T {
+  const override = useLiveNodeOverrides.getState().overrides.get(node.id)
+  if (!override || Object.keys(override).length === 0) return node
+  return { ...node, ...override } as T
+}
+
 export default useLiveNodeOverrides
diff --git a/packages/editor/src/components/editor/node-arrow-handles.tsx b/packages/editor/src/components/editor/node-arrow-handles.tsx
index c7d18825a..f4e3bf170 100644
--- a/packages/editor/src/components/editor/node-arrow-handles.tsx
+++ b/packages/editor/src/components/editor/node-arrow-handles.tsx
@@ -13,6 +13,7 @@ import {
   type RadialResizeHandle,
   sceneRegistry,
   type TapActionHandle,
+  useLiveNodeOverrides,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
@@ -380,6 +381,13 @@ function LinearArrow({
     useViewer.getState().setHandleDragging(true)
     useScene.temporal.getState().pause()
 
+    let lastPatch: Partial<AnyNode> | null = null
+
+    // Drag publishes the patch (e.g. door `{ width, position }`, wall
+    // `{ height }`) to `useLiveNodeOverrides` + markDirty. The node's
+    // system reads via `getEffectiveNode` and rebuilds the mesh
+    // imperatively, so zustand stays at the pre-drag values until
+    // commit — no per-frame React tree re-renders, no history churn.
     const onMove = (e: PointerEvent) => {
       setNDC(e.clientX, e.clientY)
       raycaster.setFromCamera(ndc, camera)
@@ -400,7 +408,9 @@ function LinearArrow({
       // apply sees the node-at-drag-start so it can compute anchors from
       // pre-drag geometry (door-width re-centers on the opposite edge).
       const patch = descriptor.apply(initialNode as never, next, sceneApi)
-      sceneApi.update(nodeId, patch as Partial<AnyNode>)
+      lastPatch = patch as Partial<AnyNode>
+      useLiveNodeOverrides.getState().set(nodeId, patch as Record<string, unknown>)
+      useScene.getState().markDirty(nodeId)
     }
 
     const cleanup = () => {
@@ -417,9 +427,22 @@ function LinearArrow({
     const onUp = () => {
       swallowNextClick()
       sfxEmitter.emit('sfx:item-place')
+      // Commit: one tracked write to the scene store, then drop the
+      // override so subscribers read from scene again.
+      if (lastPatch) {
+        sceneApi.update(nodeId, lastPatch)
+      }
+      useLiveNodeOverrides.getState().clear(nodeId)
+      useScene.getState().markDirty(nodeId)
+      cleanup()
+    }
+    const onCancel = () => {
+      // Revert: drop the override + mark dirty so the system rebuilds
+      // against the original scene values.
+      useLiveNodeOverrides.getState().clear(nodeId)
+      useScene.getState().markDirty(nodeId)
       cleanup()
     }
-    const onCancel = () => cleanup()
     dragCleanupRef.current = cleanup
 
     window.addEventListener('pointermove', onMove)
diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
index 4d3a71bfb..a5e5a53c5 100644
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -8,6 +8,7 @@ import {
   getWallThickness,
   isCurvedWall,
   sceneRegistry,
+  useLiveNodeOverrides,
   useScene,
   type WallNode,
 } from '@pascal-app/core'
@@ -413,6 +414,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
     const initialHeight = wall.height ?? DEFAULT_WALL_HEIGHT
     const initialY = hit.y
     const wallId = wall.id as AnyNodeId
+    let pendingHeight = initialHeight
 
     document.body.style.cursor = 'ns-resize'
     sfxEmitter.emit('sfx:item-pick')
@@ -423,13 +425,19 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
     useViewer.getState().setHandleDragging(true)
     useScene.temporal.getState().pause()
 
+    // Drag publishes `{ height }` to `useLiveNodeOverrides` and marks
+    // the wall dirty so `WallSystem.updateWallGeometry` rebuilds against
+    // the override-merged value (via `getEffectiveWall`). Zustand stays
+    // at the pre-drag height until pointerup commits one tracked write.
     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))
-      useScene.getState().updateNode(wallId, { height: newHeight })
+      pendingHeight = newHeight
+      useLiveNodeOverrides.getState().set(wallId, { height: newHeight })
+      useScene.getState().markDirty(wallId)
     }
 
     const cleanup = () => {
@@ -447,9 +455,23 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
     const onUp = () => {
       swallowNextClick()
       sfxEmitter.emit('sfx:item-place')
+      // 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.
+      if (pendingHeight !== initialHeight) {
+        useScene.getState().updateNode(wallId, { height: pendingHeight })
+      }
+      useLiveNodeOverrides.getState().clear(wallId)
+      useScene.getState().markDirty(wallId)
+      cleanup()
+    }
+    const onCancel = () => {
+      // Revert: drop the override, mark dirty so the geometry rebuilds
+      // against the original scene height.
+      useLiveNodeOverrides.getState().clear(wallId)
+      useScene.getState().markDirty(wallId)
       cleanup()
     }
-    const onCancel = () => cleanup()
 
     dragCleanupRef.current = cleanup
     window.addEventListener('pointermove', onMove)
diff --git a/packages/viewer/src/systems/door/door-system.tsx b/packages/viewer/src/systems/door/door-system.tsx
index 8c4aa383f..8ab66177b 100644
--- a/packages/viewer/src/systems/door/door-system.tsx
+++ b/packages/viewer/src/systems/door/door-system.tsx
@@ -3,8 +3,10 @@ import {
   clampDoorOperationState,
   type DoorNode,
   getDoorRenderOpenAmount,
+  getEffectiveNode,
   sceneRegistry,
   useInteractive,
+  useLiveNodeOverrides,
   useScene,
 } from '@pascal-app/core'
 import { useFrame } from '@react-three/fiber'
@@ -30,6 +32,11 @@ export const DoorSystem = () => {
   const shading = useViewer((state) => state.shading)
   const textures = useViewer((state) => state.textures)
   const colorPreset = useViewer((state) => state.colorPreset)
+  // Subscribe so an override-only update (no scene write) still re-runs
+  // the component, letting the gate below pick up the latest dirtyNodes
+  // set from the same render pass that received the override-publishing
+  // `markDirty` call. Mirrors WallSystem.
+  useLiveNodeOverrides((s) => s.overrides)
 
   const joineryMaterial = createSurfaceRoleMaterial('joinery', colorPreset)
   baseMaterial = textures ? getBaseMaterial(shading) : joineryMaterial
@@ -61,15 +68,19 @@ export const DoorSystem = () => {
       const mesh = sceneRegistry.nodes.get(id) as THREE.Mesh
       if (!mesh) return // Keep dirty until mesh mounts
 
-      updateDoorMesh(node as DoorNode, mesh)
+      // Merge any live override (width / height / position) so the mesh
+      // rebuild reflects the in-flight drag without zustand churn. When
+      // no override is set this returns the scene node unchanged.
+      const effectiveNode = getEffectiveNode(node as DoorNode)
+      updateDoorMesh(effectiveNode, mesh)
       clearDirty(id as AnyNodeId)
 
       // Rebuild the parent wall so its cutout reflects the updated door geometry
       // Avoid triggering expensive wall CSG rebuilds while the door is being interactively moved/duplicated.
       // The editor tools will request a final wall rebuild on commit.
       const isTransient = !!(node.metadata as Record<string, unknown> | null)?.isTransient
-      if (!isTransient && (node as DoorNode).parentId) {
-        useScene.getState().dirtyNodes.add((node as DoorNode).parentId as AnyNodeId)
+      if (!isTransient && effectiveNode.parentId) {
+        useScene.getState().dirtyNodes.add(effectiveNode.parentId as AnyNodeId)
       }
     })
   }, 3)
diff --git a/packages/viewer/src/systems/wall/wall-system.tsx b/packages/viewer/src/systems/wall/wall-system.tsx
index 2f5167ffb..5a578cc49 100644
--- a/packages/viewer/src/systems/wall/wall-system.tsx
+++ b/packages/viewer/src/systems/wall/wall-system.tsx
@@ -7,6 +7,7 @@ import {
   getAdjacentWallIds,
   getWallCurveFrameAt,
   getWallMiterBoundaryPoints,
+  getEffectiveNode,
   getWallPlanFootprint,
   getWallSurfacePolygon,
   getWallThickness,
@@ -478,9 +479,16 @@ function updateWallGeometry(wallId: string, miterData: WallMiterData) {
   const slabElevation = spatialGridManager.getSlabElevationForWall(levelId, node.start, node.end)
 
   const childrenIds = node.children || []
+  // Merge live overrides into door / window children so cutouts track an
+  // in-flight resize drag (door width arrow, window height arrow, etc.)
+  // without waiting on the scene store. Non-cutout children pass through
+  // unchanged.
   const childrenNodes = childrenIds
     .map((childId) => nodes[childId])
     .filter((n): n is AnyNode => n !== undefined)
+    .map((child) =>
+      child.type === 'door' || child.type === 'window' ? getEffectiveNode(child) : child,
+    )
 
   const newGeo = generateExtrudedWall(node, childrenNodes, miterData, slabElevation)
 
diff --git a/packages/viewer/src/systems/window/window-system.tsx b/packages/viewer/src/systems/window/window-system.tsx
index 851c315be..e86413fe4 100644
--- a/packages/viewer/src/systems/window/window-system.tsx
+++ b/packages/viewer/src/systems/window/window-system.tsx
@@ -1,7 +1,9 @@
 import {
   type AnyNodeId,
+  getEffectiveNode,
   sceneRegistry,
   useInteractive,
+  useLiveNodeOverrides,
   useScene,
   type WindowNode,
 } from '@pascal-app/core'
@@ -36,6 +38,9 @@ export const WindowSystem = () => {
   const shading = useViewer((state) => state.shading)
   const textures = useViewer((state) => state.textures)
   const colorPreset = useViewer((state) => state.colorPreset)
+  // Subscribe so override-only updates re-run this component. Mirrors
+  // WallSystem + DoorSystem.
+  useLiveNodeOverrides((s) => s.overrides)
 
   baseMaterial = textures
     ? getBaseMaterial(shading)
@@ -71,15 +76,18 @@ export const WindowSystem = () => {
       const mesh = sceneRegistry.nodes.get(id) as THREE.Mesh
       if (!mesh) return // Keep dirty until mesh mounts
 
-      updateWindowMesh(node as WindowNode, mesh)
+      // Merge any live override (width / height / position) so the mesh
+      // rebuild reflects the in-flight drag without zustand churn.
+      const effectiveNode = getEffectiveNode(node as WindowNode)
+      updateWindowMesh(effectiveNode, mesh)
       clearDirty(id as AnyNodeId)
 
       // Rebuild the parent wall so its cutout reflects the updated window geometry
       // Avoid triggering expensive wall CSG rebuilds while the window is being interactively moved/duplicated.
       // The editor tools will request a final wall rebuild on commit.
       const isTransient = !!(node.metadata as Record<string, unknown> | null)?.isTransient
-      if (!isTransient && (node as WindowNode).parentId) {
-        useScene.getState().dirtyNodes.add((node as WindowNode).parentId as AnyNodeId)
+      if (!isTransient && effectiveNode.parentId) {
+        useScene.getState().dirtyNodes.add(effectiveNode.parentId as AnyNodeId)
       }
     })
   }, 3)

From 9f54a79b06cc93a17c79f6a1bc89821d7d91e3b6 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Tue, 26 May 2026 02:33:13 +0530
Subject: [PATCH 31/48] floating menu: enable Move icon for wall / door /
 window

Widens the \`onMove\` gate on \`NodeActionMenu\` so wall, door, and
window join column in showing the Move chevron. \`handleMove\` calls
\`setMovingNode(node)\` which dispatches through the existing
\`affordanceTools.move\` path on each kind's definition (already
present for all three).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/editor/floating-action-menu.tsx       | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index 90ac81bf2..fe6b2cc2d 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -493,7 +493,14 @@ export function FloatingActionMenu() {
                   ? handleCurve
                   : undefined
               }
-              onMove={node?.type === 'column' ? handleMove : undefined}
+              onMove={
+                node?.type === 'column' ||
+                node?.type === 'wall' ||
+                node?.type === 'door' ||
+                node?.type === 'window'
+                  ? handleMove
+                  : undefined
+              }
               onDelete={handleDelete}
               onDuplicate={
                 node &&

From 3815af569b7e63a3b58984a00daff2b3afd444a9 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Tue, 26 May 2026 11:49:10 +0530
Subject: [PATCH 32/48] handles: live drag, guide rings, dimension chips;
 floating-menu Move on stairs

- Window bottom height arrow: flip Z rotation so chevron points down
  when placement Y < 0. Door / column height arrows unaffected (still
  above the node).
- Floating menu: raise stair-segment offsets (segmentType is 'stair' |
  'landing', so the legacy 'stair-flight' key was dead); enable the
  Move icon for parent stair and stair-segment.
- HandleDecoration on LinearResizeHandle + RadialResizeHandle. Generic
  GuideRing renders at node-local (0, y, 0) in the XZ plane when the
  arrow is hovered or dragging. Curved/spiral stair width arrow gets
  an outer rim ring, inner-radius arrow gets an inner pillar ring,
  and column radius arrow gets a footprint ring on round / octagonal /
  sixteen-sided shafts.
- ArcArrow migrated to the live-override pattern (sweepAngle +
  rotation). NodeArrowHandles subscribes to useLiveNodeOverrides for
  the selected node and merges into the effective node, so arrow
  positions, decorations, and dimension chips all track the in-flight
  drag instead of freezing at pre-drag values.
- StairRenderer and ColumnRenderer subscribe narrowly to their own
  override entry and render against the merged effective node, so the
  curved/spiral mesh and the column body update per pointer move
  without zustand churn.
- DimensionLabel chip (<Html>) rendered next to every linear-resize /
  radial-resize arrow on hover or drag. Format follows the wall /
  fence label recipe (metric / imperial via useViewer.unit).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/core/src/registry/handles.ts         |  20 ++
 .../editor/floating-action-menu.tsx           |   8 +-
 .../components/editor/node-arrow-handles.tsx  | 201 +++++++++++++++---
 packages/nodes/src/column/definition.ts       |   8 +
 packages/nodes/src/column/renderer.tsx        |  18 +-
 packages/nodes/src/stair/definition.ts        |  23 ++
 packages/nodes/src/stair/renderer.tsx         |  13 +-
 7 files changed, 259 insertions(+), 32 deletions(-)

diff --git a/packages/core/src/registry/handles.ts b/packages/core/src/registry/handles.ts
index 1a98e6a1c..4fd9a42b3 100644
--- a/packages/core/src/registry/handles.ts
+++ b/packages/core/src/registry/handles.ts
@@ -66,6 +66,22 @@ export type HandlePlacement<N> = {
 
 export type Cursor = 'ew-resize' | 'ns-resize' | 'move'
 
+/**
+ * Visual decoration shown alongside a handle while the user is hovering
+ * or dragging it. Today: a thin horizontal ring at a node-local radius —
+ * the curved-stair width / inner-radius arrows use this to trace the
+ * outer rim / inner pillar so the user sees what the drag affects.
+ *
+ * Pure data: the editor's arrow renderer reads it and mounts the visual.
+ */
+export type HandleDecoration<N> = {
+  kind: 'ring'
+  /** Node-local radius of the ring (XZ plane). */
+  radius: (node: N) => number
+  /** Node-local Y of the ring. Defaults to 0. */
+  y?: (node: N) => number
+}
+
 /**
  * Linear resize along a single local axis. Covers width / depth / height
  * arrows whose visible behaviour is "drag the +axis edge, the dimension
@@ -98,6 +114,8 @@ export type LinearResizeHandle<N> = {
    */
   portal?: HandlePortal
   cursor?: Cursor
+  /** Optional visual guide shown while the arrow is hovered or dragging. */
+  decoration?: HandleDecoration<N>
 }
 
 /**
@@ -115,6 +133,8 @@ export type RadialResizeHandle<N> = {
   max?: number | ((node: N, sceneApi: SceneApi) => number)
   placement: HandlePlacement<N>
   portal?: HandlePortal
+  /** Optional visual guide shown while the arrow is hovered or dragging. */
+  decoration?: HandleDecoration<N>
 }
 
 /**
diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index fe6b2cc2d..c7431cae0 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -74,8 +74,8 @@ const MENU_Y_OFFSETS: Record<string, number> = {
   window: 0.6,
   column: 0.6,
   stair: 0.2,
-  'stair-flight': 0.75,
-  'stair-landing': 0.5,
+  'stair-stair': 1.1,
+  'stair-landing': 0.9,
   slab: 0.4,
   ceiling: 0.4,
 }
@@ -497,7 +497,9 @@ export function FloatingActionMenu() {
                 node?.type === 'column' ||
                 node?.type === 'wall' ||
                 node?.type === 'door' ||
-                node?.type === 'window'
+                node?.type === 'window' ||
+                node?.type === 'stair' ||
+                node?.type === 'stair-segment'
                   ? handleMove
                   : undefined
               }
diff --git a/packages/editor/src/components/editor/node-arrow-handles.tsx b/packages/editor/src/components/editor/node-arrow-handles.tsx
index f4e3bf170..6e5c934e3 100644
--- a/packages/editor/src/components/editor/node-arrow-handles.tsx
+++ b/packages/editor/src/components/editor/node-arrow-handles.tsx
@@ -17,6 +17,7 @@ import {
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
 import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
@@ -29,6 +30,7 @@ import {
   type Object3D,
   OrthographicCamera,
   Plane,
+  RingGeometry,
   Shape,
   Vector2,
   Vector3,
@@ -41,6 +43,50 @@ import useEditor from '../../store/use-editor'
 
 const ARROW_SCALE = 0.65
 const ARROW_COLOR = '#8381ed'
+
+// Mirrors the formatter used by wall / fence measurement labels so all
+// in-world dimension chips read consistently.
+function formatDimension(value: number, unit: 'metric' | 'imperial'): string {
+  if (unit === 'imperial') {
+    const feet = value * 3.280_84
+    const wholeFeet = Math.floor(feet)
+    const inches = Math.round((feet - wholeFeet) * 12)
+    if (inches === 12) return `${wholeFeet + 1}'0"`
+    return `${wholeFeet}'${inches}"`
+  }
+  return `${Number.parseFloat(value.toFixed(2))}m`
+}
+
+// In-world dimension chip rendered next to a resize arrow during hover
+// or drag. Uses the same screen-space `<Html>` recipe + text-shadow
+// halo as the wall measurement label so it reads at every camera angle.
+function DimensionLabel({
+  position,
+  text,
+}: {
+  position: readonly [number, number, number]
+  text: string
+}) {
+  return (
+    <Html
+      center
+      position={position as unknown as [number, number, number]}
+      style={{ pointerEvents: 'none', userSelect: 'none' }}
+      zIndexRange={[40, 0]}
+    >
+      <div
+        className="whitespace-nowrap font-bold font-mono text-[13px]"
+        style={{
+          color: '#fafafa',
+          textShadow:
+            '-1.5px -1.5px 0 #0b0b0b, 1.5px -1.5px 0 #0b0b0b, -1.5px 1.5px 0 #0b0b0b, 1.5px 1.5px 0 #0b0b0b, 0 0 4px #0b0b0b',
+        }}
+      >
+        {text}
+      </div>
+    </Html>
+  )
+}
 const ARROW_HOVER_COLOR = '#a5b4fc'
 
 // Reused chevron+shaft silhouette — matches every other handle file. The
@@ -91,10 +137,23 @@ export function NodeArrowHandles() {
   const movingNode = useEditor((state) => state.movingNode)
 
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
-  const node = useScene((state) =>
+  const rawNode = useScene((state) =>
     selectedId ? (state.nodes[selectedId as AnyNodeId] ?? null) : null,
   )
 
+  // Merge any live drag override so the arrows themselves (positions,
+  // ring decorations) track the in-flight drag instead of freezing at
+  // pre-drag values. Subscribe to just this node's entry so unrelated
+  // override writes don't re-render the handle stack.
+  const liveOverride = useLiveNodeOverrides((s) =>
+    rawNode ? s.overrides.get(rawNode.id) : undefined,
+  )
+  const node = useMemo<AnyNode | null>(
+    () =>
+      rawNode && liveOverride ? ({ ...rawNode, ...liveOverride } as AnyNode) : rawNode,
+    [rawNode, liveOverride],
+  )
+
   const def = node ? nodeRegistry.get(node.type) : null
   const descriptors = useMemo(() => {
     if (!(node && def?.handles)) return null
@@ -297,12 +356,14 @@ function LinearArrow({
   rideObject: Object3D
 }) {
   const [isHovered, setIsHovered] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
   const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
   const arrowMaterial = useArrowMaterial()
   const { camera, raycaster, gl } = useThree()
   const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
   const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
   const dragCleanupRef = useRef<(() => void) | null>(null)
+  const unit = useViewer((s) => s.unit)
 
   useEffect(() => {
     arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR)
@@ -380,6 +441,7 @@ function LinearArrow({
     sfxEmitter.emit('sfx:item-pick')
     useViewer.getState().setHandleDragging(true)
     useScene.temporal.getState().pause()
+    setIsDragging(true)
 
     let lastPatch: Partial<AnyNode> | null = null
 
@@ -422,6 +484,7 @@ function LinearArrow({
       }
       useScene.temporal.getState().resume()
       useViewer.getState().setHandleDragging(false)
+      setIsDragging(false)
       dragCleanupRef.current = null
     }
     const onUp = () => {
@@ -451,34 +514,98 @@ function LinearArrow({
   }
 
   // For axis === 'y' (vertical handles), tilt the chevron up via local
-  // X+Z rotation chain matching DoorHeightArrowHandle.
+  // X+Z rotation chain matching DoorHeightArrowHandle. When the handle
+  // sits below the node (placement Y < 0, e.g. window bottom arrow),
+  // flip the Z rotation so the chevron points outward (downward).
   const innerRotation: [number, number, number] =
-    descriptor.axis === 'y' ? [0, Math.PI / 2, Math.PI / 2] : [0, 0, 0]
+    descriptor.axis === 'y'
+      ? [0, Math.PI / 2, position[1] < 0 ? -Math.PI / 2 : Math.PI / 2]
+      : [0, 0, 0]
+
+  // Optional guide decoration — linear handles use it for curved-stair
+  // width / inner-radius rings; radial handles use it for the column's
+  // round footprint ring.
+  const decoration = descriptor.decoration
+  const showDecoration = Boolean(decoration) && (isHovered || isDragging)
+
+  // Dimension chip — shows the live value the drag is steering. `node`
+  // is already the effective (override-merged) node, so currentValue
+  // returns the in-flight value during a drag and the label tracks
+  // smoothly without an extra subscription.
+  const showLabel = isHovered || isDragging
+  const labelText = showLabel ? formatDimension(descriptor.currentValue(node), unit) : ''
 
   return (
-    <group position={position} rotation={[0, rotationY, 0]}>
-      <group rotation={innerRotation} scale={scale}>
-        <mesh
-          frustumCulled={false}
-          geometry={arrowGeometry}
-          material={arrowMaterial}
-          onPointerDown={activate}
-          onPointerEnter={(event) => {
-            event.stopPropagation()
-            setIsHovered(true)
-            document.body.style.cursor = cursor
-          }}
-          onPointerLeave={(event) => {
-            event.stopPropagation()
-            setIsHovered(false)
-            if (document.body.style.cursor === cursor) {
-              document.body.style.cursor = ''
-            }
-          }}
-          renderOrder={1010}
+    <>
+      {showDecoration && decoration ? (
+        <GuideRing
+          radius={decoration.radius(node as never)}
+          y={decoration.y?.(node as never) ?? 0}
         />
+      ) : null}
+      <group position={position} rotation={[0, rotationY, 0]}>
+        {showLabel ? <DimensionLabel position={[0, 0.22, 0]} text={labelText} /> : null}
+        <group rotation={innerRotation} scale={scale}>
+          <mesh
+            frustumCulled={false}
+            geometry={arrowGeometry}
+            material={arrowMaterial}
+            onPointerDown={activate}
+            onPointerEnter={(event) => {
+              event.stopPropagation()
+              setIsHovered(true)
+              document.body.style.cursor = cursor
+            }}
+            onPointerLeave={(event) => {
+              event.stopPropagation()
+              setIsHovered(false)
+              if (document.body.style.cursor === cursor) {
+                document.body.style.cursor = ''
+              }
+            }}
+            renderOrder={1010}
+          />
+        </group>
       </group>
-    </group>
+    </>
+  )
+}
+
+// Thin horizontal ring used as a visual guide alongside a resize arrow —
+// e.g. the curved-stair width arrow traces the outer rim, the inner-radius
+// arrow traces the central pillar. Floats at node-local `y`, lies in the
+// XZ plane.
+function GuideRing({ radius, y }: { radius: number; y: number }) {
+  const safeRadius = Math.max(radius, 0.01)
+  const ringGeometry = useMemo(() => {
+    const inner = Math.max(safeRadius - 0.015, 0.001)
+    const outer = safeRadius + 0.015
+    return new RingGeometry(inner, outer, 96)
+  }, [safeRadius])
+  const ringMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        side: DoubleSide,
+        transparent: true,
+        opacity: 0.95,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+  useEffect(() => () => ringGeometry.dispose(), [ringGeometry])
+  useEffect(() => () => ringMaterial.dispose(), [ringMaterial])
+
+  return (
+    <mesh
+      frustumCulled={false}
+      geometry={ringGeometry}
+      material={ringMaterial}
+      position={[0, y, 0]}
+      renderOrder={1009}
+      rotation={[-Math.PI / 2, 0, 0]}
+    />
   )
 }
 
@@ -552,6 +679,13 @@ function ArcArrow({
     useViewer.getState().setHandleDragging(true)
     useScene.temporal.getState().pause()
 
+    let lastPatch: Partial<AnyNode> | null = null
+
+    // Mirrors LinearArrow: drag publishes the patch (sweepAngle + rotation
+    // for curved-stair sweep handles) to `useLiveNodeOverrides` and marks
+    // the node dirty. The StairRenderer subscribes to that store and re-
+    // renders the curved/spiral mesh with the effective node, so zustand
+    // stays at the pre-drag values until commit on release.
     const onMove = (e: PointerEvent) => {
       setNDC(e.clientX, e.clientY)
       raycaster.setFromCamera(ndc, camera)
@@ -564,7 +698,9 @@ function ArcArrow({
       while (delta < -Math.PI) delta += 2 * Math.PI
 
       const patch = descriptor.apply(initialNode as never, delta, sceneApi)
-      sceneApi.update(nodeId, patch as Partial<AnyNode>)
+      lastPatch = patch as Partial<AnyNode>
+      useLiveNodeOverrides.getState().set(nodeId, patch as Record<string, unknown>)
+      useScene.getState().markDirty(nodeId)
     }
 
     const cleanup = () => {
@@ -581,9 +717,22 @@ function ArcArrow({
     const onUp = () => {
       swallowNextClick()
       sfxEmitter.emit('sfx:item-place')
+      // Commit the final patch to zustand, then drop the override so the
+      // store is the single source of truth again.
+      if (lastPatch) {
+        sceneApi.update(nodeId, lastPatch)
+      }
+      useLiveNodeOverrides.getState().clear(nodeId)
+      useScene.getState().markDirty(nodeId)
+      cleanup()
+    }
+    const onCancel = () => {
+      // Revert: drop the override + mark dirty so the renderer rebuilds
+      // against the original scene values.
+      useLiveNodeOverrides.getState().clear(nodeId)
+      useScene.getState().markDirty(nodeId)
       cleanup()
     }
-    const onCancel = () => cleanup()
     dragCleanupRef.current = cleanup
 
     window.addEventListener('pointermove', onMove)
diff --git a/packages/nodes/src/column/definition.ts b/packages/nodes/src/column/definition.ts
index f16495d3b..130e859af 100644
--- a/packages/nodes/src/column/definition.ts
+++ b/packages/nodes/src/column/definition.ts
@@ -50,6 +50,14 @@ function columnRadiusHandle(): HandleDescriptor<ColumnNodeType> {
     placement: {
       position: (n) => [n.radius + SIDE_HANDLE_OFFSET, n.height / 2, 0],
     },
+    // Guide ring traces the column's footprint at mid-height while the
+    // user is hovering or dragging the radius arrow — clarifies which
+    // edge the drag controls on round / octagonal / sixteen-sided shafts.
+    decoration: {
+      kind: 'ring',
+      radius: (n) => n.radius + SIDE_HANDLE_OFFSET * 0.5,
+      y: (n) => n.height / 2,
+    },
   }
 }
 
diff --git a/packages/nodes/src/column/renderer.tsx b/packages/nodes/src/column/renderer.tsx
index a0c65a2f0..788c907fc 100644
--- a/packages/nodes/src/column/renderer.tsx
+++ b/packages/nodes/src/column/renderer.tsx
@@ -1,6 +1,11 @@
 'use client'
 
-import { type ColumnNode, useLiveTransforms, useRegistry } from '@pascal-app/core'
+import {
+  type ColumnNode,
+  useLiveNodeOverrides,
+  useLiveTransforms,
+  useRegistry,
+} from '@pascal-app/core'
 import {
   baseMaterial,
   type ColorPreset,
@@ -2071,8 +2076,17 @@ function Capital({ node, y, height }: { node: ColumnNode; y: number; height: num
   )
 }
 
-export const ColumnRenderer = ({ node }: { node: ColumnNode }) => {
+export const ColumnRenderer = ({ node: rawNode }: { node: ColumnNode }) => {
   const ref = useRef<Group>(null!)
+  // Merge any live drag override so width / depth / radius / height
+  // arrows update the mesh on every pointer move, with zustand only
+  // hearing the commit on release. Subscribes narrowly to this node's
+  // override entry; unrelated writes don't re-render.
+  const liveOverride = useLiveNodeOverrides((s) => s.overrides.get(rawNode.id))
+  const node = useMemo<ColumnNode>(
+    () => (liveOverride ? ({ ...rawNode, ...liveOverride } as ColumnNode) : rawNode),
+    [rawNode, liveOverride],
+  )
   const handlers = useNodeEvents(node, 'column')
   const liveTransform = useLiveTransforms((state) => state.get(node.id))
   const shading = useViewer((state) => state.shading)
diff --git a/packages/nodes/src/stair/definition.ts b/packages/nodes/src/stair/definition.ts
index 266026d16..bd265a847 100644
--- a/packages/nodes/src/stair/definition.ts
+++ b/packages/nodes/src/stair/definition.ts
@@ -16,6 +16,12 @@ const CURVED_WIDTH_HANDLE_OFFSET = 0.5
 const CURVED_RADIAL_OFFSET = 0.16
 const CURVED_SWEEP_RADIAL_OFFSET = 0.3
 const CURVED_SWEEP_LATERAL_OFFSET = 0.24
+// Guide rings — outer hugs just outside the rim, inner sits inside the
+// pillar. Clamp inner so a tiny innerRadius (spiral default 0.05) doesn't
+// push the ring through the axis.
+const CURVED_OUTER_RING_OFFSET = 0.2
+const CURVED_INNER_RING_OFFSET = 0.2
+const CURVED_INNER_RING_MIN = 0.05
 
 type CurvedStairGeom = {
   isSpiral: boolean
@@ -95,6 +101,13 @@ function curvedWidthHandle(): HandleDescriptor<StairNodeType> {
         return [g.outerRadius + CURVED_WIDTH_HANDLE_OFFSET, g.totalRise / 2, 0]
       },
     },
+    // Outer guide ring — traces the rim while the user interacts with the
+    // width arrow so it's obvious which edge the drag affects.
+    decoration: {
+      kind: 'ring',
+      radius: (n) => readCurvedStairGeometry(n).outerRadius + CURVED_OUTER_RING_OFFSET,
+      y: (n) => readCurvedStairGeometry(n).totalRise / 2,
+    },
   }
 }
 
@@ -128,6 +141,16 @@ function curvedInnerRadiusHandle(): HandleDescriptor<StairNodeType> {
       },
       rotationY: () => Math.PI,
     },
+    // Inner guide ring — traces the central pillar. Clamped so a tiny
+    // innerRadius doesn't pull the ring through the axis.
+    decoration: {
+      kind: 'ring',
+      radius: (n) => {
+        const g = readCurvedStairGeometry(n)
+        return Math.max(g.innerRadius - CURVED_INNER_RING_OFFSET, CURVED_INNER_RING_MIN)
+      },
+      y: (n) => readCurvedStairGeometry(n).totalRise / 2,
+    },
   }
 }
 
diff --git a/packages/nodes/src/stair/renderer.tsx b/packages/nodes/src/stair/renderer.tsx
index 904be2bb3..9457c6206 100644
--- a/packages/nodes/src/stair/renderer.tsx
+++ b/packages/nodes/src/stair/renderer.tsx
@@ -4,6 +4,7 @@ import {
   type AnyNodeId,
   type StairNode,
   type StairSegmentNode,
+  useLiveNodeOverrides,
   useRegistry,
   useScene,
 } from '@pascal-app/core'
@@ -52,8 +53,18 @@ type LandingChainNextStair = {
   isTerminalLandingBeforeStair: boolean
 }
 
-export const StairRenderer = ({ node }: { node: StairNode }) => {
+export const StairRenderer = ({ node: rawNode }: { node: StairNode }) => {
   const ref = useRef<THREE.Group>(null!)
+  // Merge any live drag override into the node so curved/spiral geometry
+  // (built declaratively in JSX below) rebuilds on every drag tick. The
+  // resize arrows publish to `useLiveNodeOverrides` and only commit to
+  // zustand on release — subscribing here turns those override writes
+  // into the React re-renders that drive the visible mesh update.
+  const liveOverride = useLiveNodeOverrides((s) => s.overrides.get(rawNode.id))
+  const node = useMemo<StairNode>(
+    () => (liveOverride ? ({ ...rawNode, ...liveOverride } as StairNode) : rawNode),
+    [rawNode, liveOverride],
+  )
   const isSegmentBasedStair = node.stairType === 'straight'
 
   useRegistry(node.id, 'stair', ref)

From 071f7cf0a6dd7d2ccbed86b9c4ef3f558eb4f292 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Tue, 26 May 2026 12:49:48 +0530
Subject: [PATCH 33/48] fence + column: registry handles, brace spread arrows,
 per-style defaults
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fence: side-move arrows already on the registry path; add the height
  arrow (axis 'y' linear-resize, anchor min) + start/end corner pickers
  (tap-action, shape 'corner-picker' with dashed leader + billboarded
  hex). Move icon enabled on the floating menu; the menu floats above
  the height arrow via a fence-specific MENU_Y_OFFSET. Endpoint move
  buttons + Alt-detach plumbing removed from the floating menu — corner
  pickers cover that flow. Legacy wall-move-side-handles.tsx no longer
  branches into fence (dedupes the side-move arrows that were stacked).
- Column: bottom + top spread arrows for non-vertical supports — anchor
  'center' so dragging the right leg outward grows the full leg-to-leg
  span symmetrically. Conditionally added per supportStyle:
    - a-frame:  both bottom and top spreads
    - y-frame / v-frame: top spread only
  Per-style preset map applied on supportStyle switch (panel.tsx) so
  every style snaps to its renderer's natural proportions (defaults
  lifted from each support's fall-through expressions); a customised
  A-frame switched to Y-frame no longer carries its 1.4 m bottom into
  state, and an X-brace gets equal parallel legs rather than inheriting
  A-frame's pinched 0.12 m top.
- GeometrySystem: merge `getEffectiveNode(node)` before calling
  `def.geometry`. Smooths drags for every kind on the parametric path
  (fence, shelf, item, anything that ships `def.geometry`): live
  override mutates the mesh per pointer move, zustand only hears the
  commit. Mirrors WallSystem / DoorSystem / WindowSystem / StairRenderer
  / ColumnRenderer hookups.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../editor/floating-action-menu.tsx           | 121 +-----------------
 .../editor/wall-move-side-handles.tsx         |  13 +-
 packages/nodes/src/column/definition.ts       |  67 ++++++++++
 packages/nodes/src/column/panel.tsx           |  90 ++++++++++++-
 packages/nodes/src/fence/definition.ts        |  52 ++++++++
 .../src/systems/geometry/geometry-system.tsx  |  13 +-
 6 files changed, 230 insertions(+), 126 deletions(-)

diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index c7431cae0..73800ef82 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -25,8 +25,7 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
-import { Move } from 'lucide-react'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useRef } from 'react'
 import * as THREE from 'three'
 import { duplicateRoofSubtree } from '../../lib/roof-duplication'
 import { sfxEmitter } from '../../lib/sfx-bus'
@@ -73,6 +72,9 @@ const MENU_Y_OFFSETS: Record<string, number> = {
   door: 0.6,
   window: 0.6,
   column: 0.6,
+  // Fence: clears the height-resize arrow (sits at fence.height + 0.45)
+  // plus the chevron's own visual size, so the menu floats just above it.
+  fence: 1.05,
   stair: 0.2,
   'stair-stair': 1.1,
   'stair-landing': 0.9,
@@ -97,17 +99,13 @@ export function FloatingActionMenu() {
   const movingFenceEndpoint = useEditor((s) => s.movingFenceEndpoint)
   const curvingFence = useEditor((s) => s.curvingFence)
   const setMovingNode = useEditor((s) => s.setMovingNode)
-  const setMovingFenceEndpoint = useEditor((s) => s.setMovingFenceEndpoint)
   const setCurvingWall = useEditor((s) => s.setCurvingWall)
   const setCurvingFence = useEditor((s) => s.setCurvingFence)
   const setSelection = useViewer((s) => s.setSelection)
   const setEditingHole = useEditor((s) => s.setEditingHole)
 
   const groupRef = useRef<THREE.Group>(null)
-  const startEndpointGroupRef = useRef<THREE.Group>(null)
-  const endEndpointGroupRef = useRef<THREE.Group>(null)
   const menuScaleRef = useRef<HTMLDivElement>(null)
-  const [altPressed, setAltPressed] = useState(false)
 
   // Only show for single selection of specific types
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
@@ -139,34 +137,6 @@ export function FloatingActionMenu() {
     })
   })
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Alt') {
-        setAltPressed(true)
-      }
-    }
-
-    const handleKeyUp = (event: KeyboardEvent) => {
-      if (event.key === 'Alt') {
-        setAltPressed(false)
-      }
-    }
-
-    const handleBlur = () => {
-      setAltPressed(false)
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    window.addEventListener('keyup', handleKeyUp)
-    window.addEventListener('blur', handleBlur)
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown)
-      window.removeEventListener('keyup', handleKeyUp)
-      window.removeEventListener('blur', handleBlur)
-    }
-  }, [])
-
   useFrame((state) => {
     if (!(selectedId && isValidType && groupRef.current)) return
 
@@ -195,29 +165,6 @@ export function FloatingActionMenu() {
         groupRef.current.position.set(center.x, box.max.y + getMenuYOffset(node), center.z)
       }
 
-      if (node?.type === 'fence') {
-        const segment = node as FenceNode
-        const endpointYOffset = 0.35
-        const startWorld = obj.localToWorld(
-          new THREE.Vector3(segment.start[0], 0, segment.start[1]),
-        )
-        const endWorld = obj.localToWorld(new THREE.Vector3(segment.end[0], 0, segment.end[1]))
-
-        if (startEndpointGroupRef.current) {
-          startEndpointGroupRef.current.position.set(
-            startWorld.x,
-            startWorld.y + endpointYOffset,
-            startWorld.z,
-          )
-        }
-        if (endEndpointGroupRef.current) {
-          endEndpointGroupRef.current.position.set(
-            endWorld.x,
-            endWorld.y + endpointYOffset,
-            endWorld.z,
-          )
-        }
-      }
     }
   })
 
@@ -248,17 +195,6 @@ export function FloatingActionMenu() {
     },
     [node, setMovingNode, setSelection],
   )
-  const handleEndpointMove = useCallback(
-    (endpoint: 'start' | 'end', e: { stopPropagation: () => void }) => {
-      e.stopPropagation()
-      if (!node || node.type !== 'fence') return
-      sfxEmitter.emit('sfx:item-pick')
-      setMovingFenceEndpoint({ fence: node, endpoint })
-      setSelection({ selectedIds: [] })
-    },
-    [node, setMovingFenceEndpoint, setSelection],
-  )
-
   const handleDuplicate = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
@@ -498,6 +434,7 @@ export function FloatingActionMenu() {
                 node?.type === 'wall' ||
                 node?.type === 'door' ||
                 node?.type === 'window' ||
+                node?.type === 'fence' ||
                 node?.type === 'stair' ||
                 node?.type === 'stair-segment'
                   ? handleMove
@@ -518,54 +455,6 @@ export function FloatingActionMenu() {
           </div>
         </Html>
       </group>
-      {node?.type === 'fence' && (
-        <>
-          <group ref={startEndpointGroupRef}>
-            <Html
-              center
-              style={{ pointerEvents: 'auto', touchAction: 'none' }}
-              zIndexRange={[100, 0]}
-            >
-              <button
-                aria-label="Move fence start"
-                className={`pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full border bg-background/95 shadow-lg backdrop-blur-md transition-colors ${
-                  altPressed
-                    ? 'border-amber-500/80 bg-amber-500/15 text-amber-100 hover:bg-amber-500/20 hover:text-white'
-                    : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
-                }`}
-                onClick={(e) => handleEndpointMove('start', e)}
-                onPointerDown={(e) => e.stopPropagation()}
-                title="Move fence start (Alt to detach)"
-                type="button"
-              >
-                <Move className="h-4 w-4" />
-              </button>
-            </Html>
-          </group>
-          <group ref={endEndpointGroupRef}>
-            <Html
-              center
-              style={{ pointerEvents: 'auto', touchAction: 'none' }}
-              zIndexRange={[100, 0]}
-            >
-              <button
-                aria-label="Move fence end"
-                className={`pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full border bg-background/95 shadow-lg backdrop-blur-md transition-colors ${
-                  altPressed
-                    ? 'border-amber-500/80 bg-amber-500/15 text-amber-100 hover:bg-amber-500/20 hover:text-white'
-                    : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
-                }`}
-                onClick={(e) => handleEndpointMove('end', e)}
-                onPointerDown={(e) => e.stopPropagation()}
-                title="Move fence end (Alt to detach)"
-                type="button"
-              >
-                <Move className="h-4 w-4" />
-              </button>
-            </Html>
-          </group>
-        </>
-      )}
     </group>
   )
 }
diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
index a5e5a53c5..28db46071 100644
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -116,9 +116,14 @@ export function WallMoveSideHandles() {
   const curvingFence = useEditor((state) => state.curvingFence)
 
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
+  // Fence side-move / height / corner-pickers now flow through the
+  // registry handle path (see packages/nodes/src/fence/definition.ts).
+  // Only walls still need the legacy renderer here — the registry path
+  // didn't render correctly for walls specifically and was reverted in
+  // commit 0e207a7f; revisit once that's diagnosed.
   const selectedNode = useScene((state) => {
     const node = selectedId ? state.nodes[selectedId as AnyNodeId] : null
-    return node?.type === 'wall' || node?.type === 'fence' ? node : null
+    return node?.type === 'wall' ? node : null
   })
 
   const shouldRender =
@@ -133,11 +138,7 @@ export function WallMoveSideHandles() {
 
   if (!shouldRender || !selectedNode) return null
 
-  return selectedNode.type === 'wall' ? (
-    <WallMoveSideHandlesForWall wall={selectedNode} />
-  ) : (
-    <WallMoveSideHandlesForFence fence={selectedNode} />
-  )
+  return <WallMoveSideHandlesForWall wall={selectedNode} />
 }
 
 function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
diff --git a/packages/nodes/src/column/definition.ts b/packages/nodes/src/column/definition.ts
index 130e859af..bd36d2c22 100644
--- a/packages/nodes/src/column/definition.ts
+++ b/packages/nodes/src/column/definition.ts
@@ -14,11 +14,14 @@ import { ColumnNode } from './schema'
 const SIDE_HANDLE_OFFSET = 0.18
 const HEIGHT_HANDLE_OFFSET = 0.22
 const BRACE_HANDLE_OFFSET = 0.3
+const SPREAD_HANDLE_OFFSET = 0.22
 const MIN_COLUMN_HEIGHT = 0.2
 const MIN_COLUMN_WIDTH = 0.1
 const MIN_COLUMN_DEPTH = 0.1
 const MIN_COLUMN_RADIUS = 0.05
 const MIN_BRACE_DIMENSION = 0.04
+const MIN_BRACE_BOTTOM_SPREAD = 0.2
+const MIN_BRACE_TOP_SPREAD = 0
 
 const ROUND_CROSS_SECTIONS = new Set<ColumnNodeType['crossSection']>([
   'round',
@@ -96,6 +99,52 @@ function columnUniformHandle(): HandleDescriptor<ColumnNodeType> {
   }
 }
 
+// Bottom-spread arrow — sits just outside the right foot of the splay
+// (a-frame / x-brace etc.), one beam-width above the floor plate so it
+// clears the support legs. Drags symmetrically: anchor='center' so
+// pointer Δ of d grows the full leg-to-leg distance by 2d, both legs
+// moving ±d. Defaults mirror the renderer fall-throughs.
+function columnBraceBottomSpreadHandle(): HandleDescriptor<ColumnNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'x',
+    anchor: 'center',
+    min: MIN_BRACE_BOTTOM_SPREAD,
+    currentValue: (n) =>
+      Math.max(MIN_BRACE_BOTTOM_SPREAD, n.braceBottomSpread ?? Math.max(n.width * 3, 1.2)),
+    apply: (_n, newValue) => ({ braceBottomSpread: newValue }),
+    placement: {
+      position: (n) => {
+        const spread = Math.max(
+          MIN_BRACE_BOTTOM_SPREAD,
+          n.braceBottomSpread ?? Math.max(n.width * 3, 1.2),
+        )
+        return [spread / 2 + SPREAD_HANDLE_OFFSET, 0.08, 0]
+      },
+    },
+  }
+}
+
+// Top-spread arrow — at the right tip of the brace's top edge. Same
+// symmetric anchor as the bottom spread. For a-frame this is the small
+// "pinch" at the top; for y/v-frame and x-brace it's the wider opening.
+function columnBraceTopSpreadHandle(): HandleDescriptor<ColumnNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'x',
+    anchor: 'center',
+    min: MIN_BRACE_TOP_SPREAD,
+    currentValue: (n) => Math.max(MIN_BRACE_TOP_SPREAD, n.braceTopSpread ?? 0.12),
+    apply: (_n, newValue) => ({ braceTopSpread: newValue }),
+    placement: {
+      position: (n) => {
+        const spread = Math.max(MIN_BRACE_TOP_SPREAD, n.braceTopSpread ?? 0.12)
+        return [spread / 2 + SPREAD_HANDLE_OFFSET, n.height + 0.08, 0]
+      },
+    },
+  }
+}
+
 function columnBraceHandle(axis: 'x' | 'z'): HandleDescriptor<ColumnNodeType> {
   return {
     kind: 'linear-resize',
@@ -125,16 +174,34 @@ function columnBraceHandle(axis: 'x' | 'z'): HandleDescriptor<ColumnNodeType> {
   }
 }
 
+// Which supports surface bottom-spread / top-spread in the renderer. Phase
+// 1 covers the simple two-leg / single-foot supports; x-brace / k-brace /
+// tripod / trestle / portal-frame / box-frame will hook the same handles
+// in a follow-up once we audit their leg geometry.
+const STYLES_WITH_BOTTOM_SPREAD = new Set<ColumnNodeType['supportStyle']>(['a-frame'])
+const STYLES_WITH_TOP_SPREAD = new Set<ColumnNodeType['supportStyle']>([
+  'a-frame',
+  'y-frame',
+  'v-frame',
+])
+
 function columnHandles(node: ColumnNodeType): HandleDescriptor<ColumnNodeType>[] {
   // 1. Height (universal).
   // 2. Footprint arrows depending on supportStyle + crossSection:
   //    - non-vertical supports → braceWidth + braceDepth (skips crossSection)
+  //      plus per-style spread arrows at the splay endpoints.
   //    - round / octagonal / sixteen-sided → single radius arrow
   //    - square                            → uniform width+depth
   //    - rectangular                       → width + depth (independent)
   const handles: HandleDescriptor<ColumnNodeType>[] = [columnHeightHandle()]
   if (node.supportStyle !== 'vertical') {
     handles.push(columnBraceHandle('x'), columnBraceHandle('z'))
+    if (STYLES_WITH_BOTTOM_SPREAD.has(node.supportStyle)) {
+      handles.push(columnBraceBottomSpreadHandle())
+    }
+    if (STYLES_WITH_TOP_SPREAD.has(node.supportStyle)) {
+      handles.push(columnBraceTopSpreadHandle())
+    }
   } else if (ROUND_CROSS_SECTIONS.has(node.crossSection)) {
     handles.push(columnRadiusHandle())
   } else if (node.crossSection === 'square') {
diff --git a/packages/nodes/src/column/panel.tsx b/packages/nodes/src/column/panel.tsx
index 60afe470d..fad37c85b 100644
--- a/packages/nodes/src/column/panel.tsx
+++ b/packages/nodes/src/column/panel.tsx
@@ -96,6 +96,83 @@ const SUPPORT_STYLE_OPTIONS: Array<{ label: string; value: ColumnNode['supportSt
   { label: 'Box Frame', value: 'box-frame' },
 ]
 
+type NonVerticalSupportStyle = Exclude<ColumnNode['supportStyle'], 'vertical'>
+
+// Per-style brace defaults. Values mirror each support's renderer
+// fall-through expressions so switching styles snaps the column to the
+// shape that style was designed around — e.g. an A-frame opens wide at
+// the foot and pinches at the top, an X-brace runs parallel legs, a
+// tripod's "bottomSpread" / "topSpread" double as its X-span / Z-span.
+// Without these, a user who customised one style (say A-frame bottom =
+// 2.0) then switched to Y-frame would carry that 2.0 around in state
+// even though Y-frame doesn't use it — and switching back to X-brace
+// would inherit the leftover 0.12 top from A-frame, making the X look
+// pinched.
+const SUPPORT_STYLE_DEFAULTS: Record<NonVerticalSupportStyle, Partial<ColumnNode>> = {
+  'a-frame': {
+    braceBottomSpread: 1.4,
+    braceTopSpread: 0.12,
+    braceWidth: 0.16,
+    braceDepth: 0.16,
+  },
+  'y-frame': {
+    braceBottomSpread: 0.2,
+    braceTopSpread: 0.9,
+    braceWidth: 0.16,
+    braceDepth: 0.16,
+  },
+  'v-frame': {
+    braceBottomSpread: 0.2,
+    braceTopSpread: 1.0,
+    braceWidth: 0.16,
+    braceDepth: 0.16,
+  },
+  'x-brace': {
+    braceBottomSpread: 1.0,
+    braceTopSpread: 1.0,
+    braceWidth: 0.14,
+    braceDepth: 0.14,
+  },
+  'k-brace': {
+    braceBottomSpread: 1.0,
+    braceTopSpread: 1.0,
+    braceWidth: 0.14,
+    braceDepth: 0.14,
+  },
+  'single-strut': {
+    braceBottomSpread: 0.6,
+    braceTopSpread: 0.6,
+    braceWidth: 0.12,
+    braceDepth: 0.12,
+  },
+  tripod: {
+    // bottomSpread = X span, topSpread = Z span (tripod's three legs).
+    braceBottomSpread: 1.1,
+    braceTopSpread: 1.1,
+    braceWidth: 0.12,
+    braceDepth: 0.12,
+  },
+  trestle: {
+    braceBottomSpread: 1.2,
+    braceTopSpread: 1.0,
+    braceWidth: 0.16,
+    braceDepth: 0.16,
+  },
+  'portal-frame': {
+    braceBottomSpread: 1.4,
+    braceTopSpread: 1.0,
+    braceWidth: 0.16,
+    braceDepth: 0.16,
+  },
+  'box-frame': {
+    // bottomSpread = X span, topSpread = Z span (rectangular footprint).
+    braceBottomSpread: 1.4,
+    braceTopSpread: 1.0,
+    braceWidth: 0.16,
+    braceDepth: 0.16,
+  },
+}
+
 function clamp(value: number, min: number, max: number) {
   return Math.min(max, Math.max(min, value))
 }
@@ -272,7 +349,15 @@ export default function ColumnPanel() {
                     : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
                 )}
                 key={option.value}
-                onClick={() =>
+                onClick={() => {
+                  // Per-style brace defaults reset the column to that
+                  // style's natural proportions on switch. Spread last
+                  // so the preset's braceWidth / braceDepth win over
+                  // the carried-from-previous-style values.
+                  const stylePreset =
+                    option.value === 'vertical'
+                      ? {}
+                      : SUPPORT_STYLE_DEFAULTS[option.value]
                   handleUpdate({
                     supportStyle: option.value,
                     ...(option.value !== 'vertical'
@@ -284,8 +369,9 @@ export default function ColumnPanel() {
                           capitalStyle: 'none',
                         }
                       : {}),
+                    ...stylePreset,
                   })
-                }
+                }}
                 type="button"
               >
                 <span className="truncate font-medium">{option.label}</span>
diff --git a/packages/nodes/src/fence/definition.ts b/packages/nodes/src/fence/definition.ts
index ec77d26d9..be431e953 100644
--- a/packages/nodes/src/fence/definition.ts
+++ b/packages/nodes/src/fence/definition.ts
@@ -13,6 +13,8 @@ const SIDE_HANDLE_OFFSET = 0.27
 const SIDE_HANDLE_MIN_OFFSET = 0.33
 const SIDE_HANDLE_TOP_INSET = 0.08
 const SIDE_HANDLE_MIN_HEIGHT = 0.4
+const HEIGHT_HANDLE_OFFSET = 0.45
+const MIN_FENCE_HEIGHT = 0.3
 
 function fenceMidpointFrame(n: FenceNodeType): {
   midX: number
@@ -60,9 +62,59 @@ function fenceSideMoveHandle(side: 'front' | 'back'): HandleDescriptor<FenceNode
   }
 }
 
+// Height arrow — anchored at the floor (Y=0), grows upward. Sits over
+// the fence midpoint at the top edge with enough clearance to clear the
+// side-move arrows that hug the rail. `rotationY` orients the chevron's
+// broad face along the fence's perpendicular (same direction the front
+// side-move arrow points), so the chevron reads frontally when viewing
+// the fence from either side rather than going edge-on.
+function fenceHeightHandle(): HandleDescriptor<FenceNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min',
+    min: MIN_FENCE_HEIGHT,
+    currentValue: (n) => n.height ?? 1.8,
+    apply: (_n, newHeight) => ({ height: newHeight }),
+    placement: {
+      position: (n) => {
+        const { midX, midZ } = fenceMidpointFrame(n)
+        return [midX, (n.height ?? 1.8) + HEIGHT_HANDLE_OFFSET, midZ]
+      },
+      rotationY: (n) => {
+        const { normalX, normalZ } = fenceMidpointFrame(n)
+        return Math.atan2(-normalZ, normalX)
+      },
+    },
+  }
+}
+
+// Corner picker — dashed vertical leader + billboarded hex disc at the
+// endpoint. Tap engages the endpoint-move flow (sister to the wall
+// pickers). nodeHeight controls the leader's vertical reach so the
+// dashes span the full fence height.
+function fenceCornerPicker(endpoint: 'start' | 'end'): HandleDescriptor<FenceNodeType> {
+  return {
+    kind: 'tap-action',
+    shape: 'corner-picker',
+    cursor: 'move',
+    nodeHeight: (n) => n.height ?? 1.8,
+    onActivate: (node, _scene, editor) => editor.engageEndpointMove(node, endpoint),
+    placement: {
+      position: (n) => {
+        const corner = endpoint === 'start' ? n.start : n.end
+        return [corner[0], 0, corner[1]]
+      },
+    },
+  }
+}
+
 const fenceHandles: HandleDescriptor<FenceNodeType>[] = [
   fenceSideMoveHandle('front'),
   fenceSideMoveHandle('back'),
+  fenceHeightHandle(),
+  fenceCornerPicker('start'),
+  fenceCornerPicker('end'),
 ]
 
 /**
diff --git a/packages/viewer/src/systems/geometry/geometry-system.tsx b/packages/viewer/src/systems/geometry/geometry-system.tsx
index 5c82412c9..05e50652f 100644
--- a/packages/viewer/src/systems/geometry/geometry-system.tsx
+++ b/packages/viewer/src/systems/geometry/geometry-system.tsx
@@ -4,6 +4,7 @@ import {
   type AnyNode,
   type AnyNodeId,
   type GeometryContext,
+  getEffectiveNode,
   nodeRegistry,
   type SurfaceRole,
   sceneRegistry,
@@ -137,10 +138,18 @@ export const GeometrySystem = () => {
       const group = sceneRegistry.nodes.get(id) as Group | undefined
       if (!group) continue // mount hasn't run — keep dirty for next frame
 
+      // Merge any live drag override into the node so resize arrows /
+      // 2D affordances see their in-flight patch on every pointer move
+      // — zustand only learns about the final value on commit. Mirrors
+      // the WallSystem / DoorSystem / WindowSystem hook-up; any kind
+      // that drives its mesh through `def.geometry` (fence, shelf, item)
+      // now smooths drags through this single line.
+      const effectiveNode = getEffectiveNode(node)
+
       const parentId = (node.parentId ?? null) as AnyNodeId | null
       const key: BatchKey = `${node.type}::${parentId ?? ''}`
       const levelData = levelDataByBatch.get(key)
-      const ctx = buildGeometryContext(node, nodes, levelData)
+      const ctx = buildGeometryContext(effectiveNode, nodes, levelData)
 
       // The builder is typed against the kind's specific node — at the
       // generic system level we lose that refinement, so the cast lands
@@ -154,7 +163,7 @@ export const GeometrySystem = () => {
           colorPreset: ColorPreset,
           sceneTheme: string,
         ) => { children: unknown[] }
-      )(node, ctx, shading, textures, colorPreset, sceneTheme) as unknown as Group
+      )(effectiveNode, ctx, shading, textures, colorPreset, sceneTheme) as unknown as Group
 
       if (!textures && def.surfaceRole) {
         applyDefaultSurfaceRole(built, def.surfaceRole, colorPreset, sceneTheme)

From 07278755fc3cdee25321be5cdc95667371691e76 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Tue, 26 May 2026 14:31:32 +0530
Subject: [PATCH 34/48] elevator + column: registry handles, rotation gizmo
 with curved arrow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Elevator: width / depth / cab-height arrows on the registry path
  (anchor='center' for width/depth so dragging outward grows the full
  span symmetrically; anchor='min' for cab-height with shaftTopY
  resolved through `resolveElevatorLevels` so the arrow lands above
  the full shaft on multi-level elevators, not just the cab top).
  Floating-menu Move icon enabled + a fence-style MENU_Y_OFFSET so
  the menu floats above the height arrow.
- Whole-node rotation gizmo for both elevator and column. Uses
  arc-resize with `shape: 'rotate'` + a new `decoration` ring on
  ArcResizeHandle. Curved-arrow geometry is a two-headed icon (arc
  ribbon with chevron wings + tangential tip at each end), rendered
  in node-local XZ plane at mid-height. Guide ring traces the rotation
  circle (footprint-diagonal + small offset) on hover or drag.
  Position offsets along +Z only — sticks out the front of the node
  instead of diagonally at the corner. apply() negates the cursor
  angular delta (atan2(z,x) is opposite-handed from three.js Ry) so
  dragging CCW around the node rotates the node CCW.
- ArcArrow renderer extended: tracks `isDragging` like LinearArrow,
  renders the optional ring decoration, and swaps geometry between
  the chevron (default, used by stair-sweep handles) and the new
  curved-arrow shape when `shape: 'rotate'` is set.
- HandlePlacement.position / .rotationY now optionally take a
  `sceneApi` so descriptors that depend on cross-node state (the
  elevator's level-chain resolution) can compute placement against
  the live scene. SceneApi gains a `nodes()` accessor returning the
  full record. Test stubs in core (relations-resolver, drag-session,
  hosting) updated to satisfy the new shape.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../__bench__/relations-resolver.bench.ts     |   1 +
 packages/core/src/registry/handles.ts         |  18 +-
 .../src/registry/relations-resolver.test.ts   |   1 +
 packages/core/src/registry/scene-api.ts       |   4 +
 packages/core/src/registry/types.ts           |   8 +
 .../core/src/services/drag-session.test.ts    |   1 +
 packages/core/src/services/hosting.test.ts    |   1 +
 .../editor/floating-action-menu.tsx           |   4 +
 .../components/editor/node-arrow-handles.tsx  | 173 +++++++++++++++---
 packages/nodes/src/column/definition.ts       |  66 +++++++
 packages/nodes/src/elevator/definition.ts     | 138 +++++++++++++-
 11 files changed, 383 insertions(+), 32 deletions(-)

diff --git a/packages/core/src/registry/__bench__/relations-resolver.bench.ts b/packages/core/src/registry/__bench__/relations-resolver.bench.ts
index 21ffd7e28..562a6150e 100644
--- a/packages/core/src/registry/__bench__/relations-resolver.bench.ts
+++ b/packages/core/src/registry/__bench__/relations-resolver.bench.ts
@@ -101,6 +101,7 @@ function buildFixture() {
 function makeScene(nodes: Record<string, AnyNode>): SceneApi {
   return {
     get: ((nid: AnyNodeId) => nodes[nid as string]) as SceneApi['get'],
+    nodes: () => nodes as Readonly<Record<AnyNodeId, AnyNode>>,
     update: () => {},
     upsert: () => ID(''),
     delete: () => {},
diff --git a/packages/core/src/registry/handles.ts b/packages/core/src/registry/handles.ts
index 4fd9a42b3..f366d5534 100644
--- a/packages/core/src/registry/handles.ts
+++ b/packages/core/src/registry/handles.ts
@@ -59,9 +59,15 @@ export type HandleAnchor = 'center' | 'min' | 'max'
 
 /** 3D position + rotation of the arrow in its portal target's local space. */
 export type HandlePlacement<N> = {
-  position: (node: N) => readonly [number, number, number]
+  /**
+   * `sceneApi` is supplied so descriptors that depend on cross-node state
+   * (elevator height resolving level entries, future cross-kind handles)
+   * can compute placement against the live scene. Existing descriptors
+   * that only need `node` can ignore the second argument.
+   */
+  position: (node: N, sceneApi: SceneApi) => readonly [number, number, number]
   /** Optional Y rotation (radians). Defaults to 0. */
-  rotationY?: (node: N) => number
+  rotationY?: (node: N, sceneApi: SceneApi) => number
 }
 
 export type Cursor = 'ew-resize' | 'ns-resize' | 'move'
@@ -162,6 +168,14 @@ export type ArcResizeHandle<N = any> = {
   apply: (initialNode: N, delta: number, sceneApi: SceneApi) => Partial<N>
   placement: HandlePlacement<N>
   portal?: HandlePortal
+  /** Optional visual guide shown while the arrow is hovered or dragging. */
+  decoration?: HandleDecoration<N>
+  /**
+   * Visual override. Defaults to the standard chevron (used by the
+   * stair-sweep extend handles). 'rotate' renders a two-headed curved
+   * arrow icon, intended for whole-node rotation handles.
+   */
+  shape?: 'chevron' | 'rotate'
 }
 
 /**
diff --git a/packages/core/src/registry/relations-resolver.test.ts b/packages/core/src/registry/relations-resolver.test.ts
index 2784c1d1f..2d33139c0 100644
--- a/packages/core/src/registry/relations-resolver.test.ts
+++ b/packages/core/src/registry/relations-resolver.test.ts
@@ -38,6 +38,7 @@ function makeNode(kind: string, idStr: string, extra: Partial<AnyNode> = {}): An
 function makeFakeScene(nodes: Record<string, AnyNode>): SceneApi {
   return {
     get: ((nid: AnyNodeId) => nodes[nid as string]) as SceneApi['get'],
+    nodes: () => nodes as Readonly<Record<AnyNodeId, AnyNode>>,
     update: () => {},
     upsert: () => id(''),
     delete: () => {},
diff --git a/packages/core/src/registry/scene-api.ts b/packages/core/src/registry/scene-api.ts
index 65aa50fdc..1858a336f 100644
--- a/packages/core/src/registry/scene-api.ts
+++ b/packages/core/src/registry/scene-api.ts
@@ -50,6 +50,10 @@ export function createSceneApi(store: SceneStoreLike): SceneApi {
       return store.getState().nodes[id] as N | undefined
     },
 
+    nodes() {
+      return store.getState().nodes
+    },
+
     update(id, patch) {
       captureIfNeeded(id)
       store.getState().updateNode(id, patch)
diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index c5a50686f..b3c38525b 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -1189,6 +1189,14 @@ export type SnapServicesLike = unknown
 
 export type SceneApi = {
   get: <N extends AnyNode = AnyNode>(id: AnyNodeId) => N | undefined
+  /**
+   * Snapshot of the full nodes record. For descriptors / placement
+   * callbacks that need to walk many siblings or resolve cross-node
+   * structure (elevator level entries, building level chains, etc.)
+   * without N round-trips through `get`. Returns the live reference —
+   * do not mutate.
+   */
+  nodes: () => Readonly<Record<AnyNodeId, AnyNode>>
   update: (id: AnyNodeId, patch: Partial<AnyNode>) => void
   upsert: (node: AnyNode, parentId?: AnyNodeId) => AnyNodeId
   delete: (id: AnyNodeId) => void
diff --git a/packages/core/src/services/drag-session.test.ts b/packages/core/src/services/drag-session.test.ts
index ab71eddb3..29869f81b 100644
--- a/packages/core/src/services/drag-session.test.ts
+++ b/packages/core/src/services/drag-session.test.ts
@@ -26,6 +26,7 @@ function makeSpyScene(initial: Record<string, AnyNode> = {}): SceneApi & {
   const nodes = { ...initial }
   return {
     get: ((nid: AnyNodeId) => nodes[nid as string]) as SceneApi['get'],
+    nodes: () => nodes as Readonly<Record<AnyNodeId, AnyNode>>,
     update: (nid, patch) => {
       calls.updated.push([nid, patch])
       const existing = nodes[nid as string]
diff --git a/packages/core/src/services/hosting.test.ts b/packages/core/src/services/hosting.test.ts
index f20de86e7..e3ae6cb20 100644
--- a/packages/core/src/services/hosting.test.ts
+++ b/packages/core/src/services/hosting.test.ts
@@ -43,6 +43,7 @@ function makeNode(kind: string, idStr: string, parentId: string | null = null):
 function makeFakeScene(nodes: Record<string, AnyNode>): SceneApi {
   return {
     get: ((nid: AnyNodeId) => nodes[nid as string]) as SceneApi['get'],
+    nodes: () => nodes as Readonly<Record<AnyNodeId, AnyNode>>,
     update: () => {},
     upsert: () => id(''),
     delete: () => {},
diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index 73800ef82..89fa5eacd 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -75,6 +75,9 @@ const MENU_Y_OFFSETS: Record<string, number> = {
   // Fence: clears the height-resize arrow (sits at fence.height + 0.45)
   // plus the chevron's own visual size, so the menu floats just above it.
   fence: 1.05,
+  // Elevator: clears the cab-height arrow which sits above the SHAFT
+  // top (resolved through level entries), so the menu floats above it.
+  elevator: 0.9,
   stair: 0.2,
   'stair-stair': 1.1,
   'stair-landing': 0.9,
@@ -435,6 +438,7 @@ export function FloatingActionMenu() {
                 node?.type === 'door' ||
                 node?.type === 'window' ||
                 node?.type === 'fence' ||
+                node?.type === 'elevator' ||
                 node?.type === 'stair' ||
                 node?.type === 'stair-segment'
                   ? handleMove
diff --git a/packages/editor/src/components/editor/node-arrow-handles.tsx b/packages/editor/src/components/editor/node-arrow-handles.tsx
index 6e5c934e3..cd5a682f3 100644
--- a/packages/editor/src/components/editor/node-arrow-handles.tsx
+++ b/packages/editor/src/components/editor/node-arrow-handles.tsx
@@ -89,6 +89,91 @@ function DimensionLabel({
 }
 const ARROW_HOVER_COLOR = '#a5b4fc'
 
+// Two-headed curved-arrow silhouette for whole-node rotation handles
+// (today: the elevator's corner rotate gizmo). Symmetric arc centred on
+// +X with sweeps to ±halfSweep, arrowhead wings + tangentially-extended
+// tips at each end. Drawn in 2D then extruded and rotated to lie in the
+// XZ plane — same final-orientation contract as the chevron, so the
+// outer rotation Y and inner-rotation chain in the renderer are reused
+// unchanged.
+function createRotateArrowHandleGeometry() {
+  const R = 0.2
+  const ribbonHalfWidth = 0.02 // ribbon thickness / 2
+  const halfSweep = Math.PI / 3 // 60° per side → 120° total arc
+  const headHalfWidth = 0.045 // arrowhead wings extend this far past ribbon
+  const headOvershoot = 0.075 // tangential reach of the arrowhead tip
+  const rIn = R - ribbonHalfWidth
+  const rOut = R + ribbonHalfWidth
+  const a1 = halfSweep
+  const a2 = -halfSweep
+
+  // Tip positions: at radius R, displaced tangentially past the ribbon end.
+  // CCW tangent at a1: (-sin a1, cos a1) → push past a1.
+  // CW tangent at a2: (+sin a2, -cos a2) → push past a2 the other way.
+  const tip1: [number, number] = [
+    R * Math.cos(a1) - headOvershoot * Math.sin(a1),
+    R * Math.sin(a1) + headOvershoot * Math.cos(a1),
+  ]
+  const tip2: [number, number] = [
+    R * Math.cos(a2) + headOvershoot * Math.sin(a2),
+    R * Math.sin(a2) - headOvershoot * Math.cos(a2),
+  ]
+  const innerWing1: [number, number] = [
+    (rIn - headHalfWidth) * Math.cos(a1),
+    (rIn - headHalfWidth) * Math.sin(a1),
+  ]
+  const outerWing1: [number, number] = [
+    (rOut + headHalfWidth) * Math.cos(a1),
+    (rOut + headHalfWidth) * Math.sin(a1),
+  ]
+  const innerWing2: [number, number] = [
+    (rIn - headHalfWidth) * Math.cos(a2),
+    (rIn - headHalfWidth) * Math.sin(a2),
+  ]
+  const outerWing2: [number, number] = [
+    (rOut + headHalfWidth) * Math.cos(a2),
+    (rOut + headHalfWidth) * Math.sin(a2),
+  ]
+  const innerCorner1: [number, number] = [rIn * Math.cos(a1), rIn * Math.sin(a1)]
+  const outerCorner1: [number, number] = [rOut * Math.cos(a1), rOut * Math.sin(a1)]
+  const innerCorner2: [number, number] = [rIn * Math.cos(a2), rIn * Math.sin(a2)]
+  const outerCorner2: [number, number] = [rOut * Math.cos(a2), rOut * Math.sin(a2)]
+
+  const shape = new Shape()
+  // Trace: top inner-corner → top inner-wing → top tip → top outer-wing →
+  //        top outer-corner → outer arc CW → bot outer-corner →
+  //        bot outer-wing → bot tip → bot inner-wing → bot inner-corner →
+  //        inner arc CCW → back to top inner-corner.
+  shape.moveTo(innerCorner1[0], innerCorner1[1])
+  shape.lineTo(innerWing1[0], innerWing1[1])
+  shape.lineTo(tip1[0], tip1[1])
+  shape.lineTo(outerWing1[0], outerWing1[1])
+  shape.lineTo(outerCorner1[0], outerCorner1[1])
+  shape.absarc(0, 0, rOut, a1, a2, true)
+  shape.lineTo(outerWing2[0], outerWing2[1])
+  shape.lineTo(tip2[0], tip2[1])
+  shape.lineTo(innerWing2[0], innerWing2[1])
+  shape.lineTo(innerCorner2[0], innerCorner2[1])
+  shape.absarc(0, 0, rIn, a2, a1, false)
+  shape.closePath()
+
+  const geometry = new ExtrudeGeometry(shape, {
+    depth: 0.06,
+    bevelEnabled: true,
+    bevelThickness: 0.018,
+    bevelSize: 0.012,
+    bevelOffset: 0,
+    bevelSegments: 6,
+    curveSegments: 24,
+    steps: 1,
+  })
+  geometry.translate(0, 0, -0.03)
+  geometry.rotateX(-Math.PI / 2)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
+
 // Reused chevron+shaft silhouette — matches every other handle file. The
 // chevron points along +X by default; descriptors with `axis: 'z'` rotate
 // it around Y, and `axis: 'y'` rotates so it points up.
@@ -373,8 +458,9 @@ function LinearArrow({
   useEffect(() => () => dragCleanupRef.current?.(), [])
 
   const cursor = pickCursor(descriptor)
-  const position = descriptor.placement.position(node)
-  const baseRotationY = descriptor.placement.rotationY?.(node) ?? 0
+  const placementSceneApi = useMemo(() => createSceneApi(useScene), [])
+  const position = descriptor.placement.position(node, placementSceneApi)
+  const baseRotationY = descriptor.placement.rotationY?.(node, placementSceneApi) ?? 0
   // Default chevron points +X. Rotate around Y to face the chosen axis.
   const axisRotationY = descriptor.axis === 'z' ? -Math.PI / 2 : 0
   // For axis === 'y' we orient the chevron up. Z-rotation by π/2 then
@@ -624,11 +710,22 @@ function ArcArrow({
   rideObject: Object3D
 }) {
   const [isHovered, setIsHovered] = useState(false)
-  const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
+  const [isDragging, setIsDragging] = useState(false)
+  // 'rotate' descriptors (whole-node rotation handles like the elevator
+  // corner) render a two-headed curved arrow; everything else (stair
+  // sweep, etc.) keeps the chevron.
+  const isRotateShape = descriptor.shape === 'rotate'
+  const arrowGeometry = useMemo(
+    () => (isRotateShape ? createRotateArrowHandleGeometry() : createArrowHandleGeometry()),
+    [isRotateShape],
+  )
   const arrowMaterial = useArrowMaterial()
   const { camera, raycaster, gl } = useThree()
   const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
-  const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE
+  // The rotate icon is denser than the chevron; pump scale a touch so the
+  // ribbon reads at the same on-screen size as the other handles.
+  const arrowScale = isRotateShape ? ARROW_SCALE * 1.05 : ARROW_SCALE
+  const scale = (isHovered ? 1.12 : 1) * zoom * arrowScale
   const dragCleanupRef = useRef<(() => void) | null>(null)
 
   useEffect(() => {
@@ -638,10 +735,17 @@ function ArcArrow({
   useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
   useEffect(() => () => dragCleanupRef.current?.(), [])
 
-  const position = descriptor.placement.position(node)
-  const rotationY = descriptor.placement.rotationY?.(node) ?? 0
+  const placementSceneApi = useMemo(() => createSceneApi(useScene), [])
+  const position = descriptor.placement.position(node, placementSceneApi)
+  const rotationY = descriptor.placement.rotationY?.(node, placementSceneApi) ?? 0
   const cursor: Cursor = 'ew-resize'
 
+  // Optional guide ring (elevator rotation circle) shown while the arc
+  // arrow is hovered or dragging. Same recipe as the linear / radial
+  // decoration path.
+  const decoration = descriptor.decoration
+  const showDecoration = Boolean(decoration) && (isHovered || isDragging)
+
   const activate = (event: ThreeEvent<PointerEvent>) => {
     event.stopPropagation()
 
@@ -678,6 +782,7 @@ function ArcArrow({
     sfxEmitter.emit('sfx:item-pick')
     useViewer.getState().setHandleDragging(true)
     useScene.temporal.getState().pause()
+    setIsDragging(true)
 
     let lastPatch: Partial<AnyNode> | null = null
 
@@ -712,6 +817,7 @@ function ArcArrow({
       }
       useScene.temporal.getState().resume()
       useViewer.getState().setHandleDragging(false)
+      setIsDragging(false)
       dragCleanupRef.current = null
     }
     const onUp = () => {
@@ -741,27 +847,35 @@ function ArcArrow({
   }
 
   return (
-    <group position={position} rotation={[0, rotationY, 0]} scale={scale}>
-      <mesh
-        frustumCulled={false}
-        geometry={arrowGeometry}
-        material={arrowMaterial}
-        onPointerDown={activate}
-        onPointerEnter={(event) => {
-          event.stopPropagation()
-          setIsHovered(true)
-          document.body.style.cursor = cursor
-        }}
-        onPointerLeave={(event) => {
-          event.stopPropagation()
-          setIsHovered(false)
-          if (document.body.style.cursor === cursor) {
-            document.body.style.cursor = ''
-          }
-        }}
-        renderOrder={1010}
-      />
-    </group>
+    <>
+      {showDecoration && decoration ? (
+        <GuideRing
+          radius={decoration.radius(node as never)}
+          y={decoration.y?.(node as never) ?? 0}
+        />
+      ) : null}
+      <group position={position} rotation={[0, rotationY, 0]} scale={scale}>
+        <mesh
+          frustumCulled={false}
+          geometry={arrowGeometry}
+          material={arrowMaterial}
+          onPointerDown={activate}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setIsHovered(true)
+            document.body.style.cursor = cursor
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setIsHovered(false)
+            if (document.body.style.cursor === cursor) {
+              document.body.style.cursor = ''
+            }
+          }}
+          renderOrder={1010}
+        />
+      </group>
+    </>
   )
 }
 
@@ -780,8 +894,9 @@ function TapActionArrow({
   const { camera } = useThree()
   const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
 
-  const position = descriptor.placement.position(node)
-  const rotationY = descriptor.placement.rotationY?.(node) ?? 0
+  const placementSceneApi = useMemo(() => createSceneApi(useScene), [])
+  const position = descriptor.placement.position(node, placementSceneApi)
+  const rotationY = descriptor.placement.rotationY?.(node, placementSceneApi) ?? 0
   const shape = descriptor.shape ?? 'arrow'
   const cursor: Cursor =
     descriptor.cursor ?? (shape === 'corner-picker' ? 'move' : 'ew-resize')
diff --git a/packages/nodes/src/column/definition.ts b/packages/nodes/src/column/definition.ts
index bd36d2c22..3c14d42c3 100644
--- a/packages/nodes/src/column/definition.ts
+++ b/packages/nodes/src/column/definition.ts
@@ -15,6 +15,8 @@ const SIDE_HANDLE_OFFSET = 0.18
 const HEIGHT_HANDLE_OFFSET = 0.22
 const BRACE_HANDLE_OFFSET = 0.3
 const SPREAD_HANDLE_OFFSET = 0.22
+const ROTATE_CORNER_OFFSET = 0.32
+const ROTATE_RING_OFFSET = 0.04
 const MIN_COLUMN_HEIGHT = 0.2
 const MIN_COLUMN_WIDTH = 0.1
 const MIN_COLUMN_DEPTH = 0.1
@@ -185,6 +187,69 @@ const STYLES_WITH_TOP_SPREAD = new Set<ColumnNodeType['supportStyle']>([
   'v-frame',
 ])
 
+// Resolve the column's visible XZ footprint half-extents per supportStyle
+// + crossSection. Vertical supports use the shaft geometry (radius for
+// round / octagonal / sixteen-sided, width/depth for square / rectangular);
+// non-vertical supports fall back to the widest sensible brace bound so
+// the rotation handle clears the splay.
+function columnFootprintHalf(n: ColumnNodeType): { halfX: number; halfZ: number } {
+  if (n.supportStyle === 'vertical') {
+    if (ROUND_CROSS_SECTIONS.has(n.crossSection)) {
+      return { halfX: n.radius, halfZ: n.radius }
+    }
+    if (n.crossSection === 'square') {
+      return { halfX: n.width / 2, halfZ: n.width / 2 }
+    }
+    return { halfX: n.width / 2, halfZ: n.depth / 2 }
+  }
+  return {
+    halfX:
+      Math.max(
+        n.width,
+        n.braceWidth ?? 0,
+        n.braceBottomSpread ?? 0,
+        n.braceTopSpread ?? 0,
+      ) / 2,
+    halfZ: Math.max(n.depth, n.braceDepth ?? 0) / 2,
+  }
+}
+
+// Whole-column rotation gizmo — same pattern as the elevator. Curved
+// two-headed arrow at the +X / +Z corner of the footprint, a guide ring
+// at the corner-diagonal radius on hover/drag. `apply` negates the
+// angular delta so dragging the cursor CCW around the column rotates
+// the column CCW (cursor atan2 ticks opposite-handed from three.js Ry).
+function columnRotateHandle(): HandleDescriptor<ColumnNodeType> {
+  return {
+    kind: 'arc-resize',
+    axis: 'angular',
+    shape: 'rotate',
+    apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }),
+    placement: {
+      // Offset along +Z only so the gizmo sticks out the front of the
+      // column rather than diagonally at the corner — keeps the rotate
+      // arrow from crowding the +X side handles (radius / axis / uniform)
+      // while still reading as attached to the column.
+      position: (n) => {
+        const { halfX, halfZ } = columnFootprintHalf(n)
+        const yMid = Math.max(n.height, MIN_COLUMN_HEIGHT) / 2
+        return [halfX, yMid, halfZ + ROTATE_CORNER_OFFSET]
+      },
+      // Fixed −45° tilt — leans the curve clockwise (as seen from above)
+      // toward the column's front face.
+      rotationY: () => -Math.PI / 4,
+    },
+    decoration: {
+      kind: 'ring',
+      radius: (n) => {
+        const { halfX, halfZ } = columnFootprintHalf(n)
+        return Math.hypot(halfX, halfZ) + ROTATE_RING_OFFSET
+      },
+      y: (n) => Math.max(n.height, MIN_COLUMN_HEIGHT) / 2,
+    },
+  }
+}
+
 function columnHandles(node: ColumnNodeType): HandleDescriptor<ColumnNodeType>[] {
   // 1. Height (universal).
   // 2. Footprint arrows depending on supportStyle + crossSection:
@@ -209,6 +274,7 @@ function columnHandles(node: ColumnNodeType): HandleDescriptor<ColumnNodeType>[]
   } else {
     handles.push(columnAxisHandle('x'), columnAxisHandle('z'))
   }
+  handles.push(columnRotateHandle())
   return handles
 }
 
diff --git a/packages/nodes/src/elevator/definition.ts b/packages/nodes/src/elevator/definition.ts
index 679ac877e..c3b24602c 100644
--- a/packages/nodes/src/elevator/definition.ts
+++ b/packages/nodes/src/elevator/definition.ts
@@ -1,8 +1,143 @@
-import { ElevatorNode as ElevatorNodeSchema, type NodeDefinition } from '@pascal-app/core'
+import {
+  type ElevatorNode as ElevatorNodeType,
+  ElevatorNode as ElevatorNodeSchema,
+  getElevatorCabDepth,
+  getElevatorCabWidth,
+  getElevatorShaftDepth,
+  getElevatorShaftWallThickness,
+  getElevatorShaftWidth,
+  type HandleDescriptor,
+  type NodeDefinition,
+  resolveElevatorLevels,
+} from '@pascal-app/core'
 import { buildElevatorFloorplan } from './floorplan'
 import { elevatorParametrics } from './parametrics'
 import { ElevatorNode } from './schema'
 
+const SIDE_HANDLE_OFFSET = 0.22
+const HEIGHT_HANDLE_OFFSET = 0.3
+const MIN_ELEVATOR_DIM = 0.6
+const MIN_CAB_HEIGHT = 1.4
+const ROTATE_CORNER_OFFSET = 0.4
+const ROTATE_RING_OFFSET = 0.08
+
+// Symmetric width / depth arrows around the cab footprint. The descriptor
+// edits the CAB dimension (`width` / `depth`) — but the arrow must sit
+// outside the SHAFT shell so it doesn't disappear inside the rendered
+// elevator. Placement uses the shaft's outer extent + wall thickness +
+// padding so the arrow clears the visible body on both `solid` and
+// `glass` shafts. `anchor: 'center'` means dragging outward grows the
+// full span 2× the pointer delta; node.position stays put.
+function elevatorAxisHandle(axis: 'x' | 'z'): HandleDescriptor<ElevatorNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis,
+    anchor: 'center',
+    min: MIN_ELEVATOR_DIM,
+    currentValue: (n) => (axis === 'x' ? n.width : n.depth),
+    apply: (_n, newValue) => (axis === 'x' ? { width: newValue } : { depth: newValue }),
+    placement: {
+      position: (n) => {
+        const cabWidth = getElevatorCabWidth(n)
+        const cabDepth = getElevatorCabDepth(n)
+        const wallThickness = getElevatorShaftWallThickness(n)
+        const outerHalf =
+          axis === 'x'
+            ? getElevatorShaftWidth(n, cabWidth) / 2 + wallThickness
+            : getElevatorShaftDepth(n, cabDepth) / 2 + wallThickness
+        const yMid = Math.max(n.cabHeight, MIN_CAB_HEIGHT) / 2
+        return axis === 'x'
+          ? [outerHalf + SIDE_HANDLE_OFFSET, yMid, 0]
+          : [0, yMid, outerHalf + SIDE_HANDLE_OFFSET]
+      },
+    },
+  }
+}
+
+// Cab-height arrow — `anchor: 'min'` keeps the cab floor fixed and grows
+// the cab upward. The arrow itself sits above the full SHAFT top (not
+// just the cab) so a multi-level elevator's arrow appears outside the
+// rendered body rather than buried inside the shaft. `resolveElevatorLevels`
+// walks the building's level chain to find shaftTopY; the fallback
+// (cabHeight + 0.3) matches the renderer's own when no service levels
+// are configured yet.
+function elevatorCabHeightHandle(): HandleDescriptor<ElevatorNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min',
+    min: MIN_CAB_HEIGHT,
+    currentValue: (n) => Math.max(n.cabHeight, MIN_CAB_HEIGHT),
+    apply: (_n, newValue) => ({ cabHeight: newValue }),
+    placement: {
+      position: (n, scene) => {
+        const { shaftTopY } = resolveElevatorLevels(n, scene.nodes())
+        const cabTop = Math.max(n.cabHeight, MIN_CAB_HEIGHT) + 0.3
+        const top = Math.max(shaftTopY, cabTop)
+        return [0, top + HEIGHT_HANDLE_OFFSET, 0]
+      },
+    },
+  }
+}
+
+// Rotation handle — sits at the front-right corner of the shaft
+// footprint. `arc-resize` does the angular drag math (raycasts a
+// horizontal plane at the arrow's Y, measures cursor angle around the
+// elevator's local origin, returns the delta to apply). On hover or
+// drag the decoration ring traces the shaft's bounding circle through
+// all four corners — same idiom as the column radius ring.
+function elevatorRotateHandle(): HandleDescriptor<ElevatorNodeType> {
+  return {
+    kind: 'arc-resize',
+    axis: 'angular',
+    shape: 'rotate',
+    // The cursor delta `atan2(hit.z - center.z, hit.x - center.x)` ticks
+    // up in the opposite handedness from three.js's Y-rotation (positive
+    // Ry takes +X → -Z, while atan2(z,x) increases as we go +X → +Z).
+    // Negate so dragging the cursor CCW around the elevator (as seen
+    // from above) actually rotates the elevator CCW.
+    apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }),
+    placement: {
+      // Offset along +Z only so the gizmo sticks out the front of the
+      // shaft rather than diagonally at the corner — matches the column's
+      // one-direction rotate placement.
+      position: (n) => {
+        const cabWidth = getElevatorCabWidth(n)
+        const cabDepth = getElevatorCabDepth(n)
+        const wallThickness = getElevatorShaftWallThickness(n)
+        const halfX = getElevatorShaftWidth(n, cabWidth) / 2 + wallThickness
+        const halfZ = getElevatorShaftDepth(n, cabDepth) / 2 + wallThickness
+        const yMid = Math.max(n.cabHeight, MIN_CAB_HEIGHT) / 2
+        return [halfX, yMid, halfZ + ROTATE_CORNER_OFFSET]
+      },
+      // Fixed −45° tilt — leans the curve clockwise (as seen from above)
+      // toward the shaft's front face.
+      rotationY: () => -Math.PI / 4,
+    },
+    decoration: {
+      kind: 'ring',
+      // Bounding circle through the shaft corners — drawn slightly larger
+      // so it sits outside the visible shell.
+      radius: (n) => {
+        const cabWidth = getElevatorCabWidth(n)
+        const cabDepth = getElevatorCabDepth(n)
+        const wallThickness = getElevatorShaftWallThickness(n)
+        const halfX = getElevatorShaftWidth(n, cabWidth) / 2 + wallThickness
+        const halfZ = getElevatorShaftDepth(n, cabDepth) / 2 + wallThickness
+        return Math.hypot(halfX, halfZ) + ROTATE_RING_OFFSET
+      },
+      y: (n) => Math.max(n.cabHeight, MIN_CAB_HEIGHT) / 2,
+    },
+  }
+}
+
+const elevatorHandles: HandleDescriptor<ElevatorNodeType>[] = [
+  elevatorAxisHandle('x'),
+  elevatorAxisHandle('z'),
+  elevatorCabHeightHandle(),
+  elevatorRotateHandle(),
+]
+
 /**
  * Elevator — Stage A registration. Wrap-exports the legacy renderer +
  * the three legacy systems (runtime / interaction / opening) bundled
@@ -30,6 +165,7 @@ export const elevatorDefinition: NodeDefinition<typeof ElevatorNode> = {
   },
 
   parametrics: elevatorParametrics,
+  handles: elevatorHandles,
 
   renderer: {
     kind: 'parametric',

From 713c19bd2d6158ed2f53a0bfed7b531cfa8c34c0 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Tue, 26 May 2026 15:24:40 +0530
Subject: [PATCH 35/48] slab + ceiling + shelf: registry handles, live polygon
 preview, cursor polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- slab: per-edge resize chevrons in PolygonEditor (gated on
  `allowEdgeMove`, so site / zone editors are unaffected), height arrow
  via `def.handles`, and a floating-menu Move icon. Polygon drags now
  publish the in-flight polygon to `useLiveNodeOverrides` through a new
  `onPolygonPreview` prop; GeometrySystem rebuilds the slab mesh at
  pointer rate while the store stays untouched until the single commit
  on release. Hole editor wired the same way. Handle materials switched
  meshStandard → meshBasic so the blue corner / green midpoint cylinders
  read true colour instead of dimming in scene lighting.
- ceiling: same Move icon, per-edge arrows, height arrow, and live
  preview through the boundary + hole editors. CeilingSystem now merges
  via `getEffectiveNode`, so polygon and height overrides flow through
  on every dirty tick. Height arrow placement is mesh-local (not
  `height + offset`) because CeilingSystem parks `mesh.position.y`
  on the height value.
- shelf: width / depth / height arrows + a curved rotation gizmo with
  ring decoration. Move icon on the floating menu. Shelf stores
  rotation as a tuple, so the rotate `apply` reads back `[x, y, z]` and
  only mutates `y`.
- LinearArrow: snapshot `rideObject.matrixWorld.invert()` at drag-start
  and reuse it in `onMove`. Kinds that park `mesh.position` on the
  field being dragged (ceiling `height`) used to chase a moving ride
  frame, so the local-Y delta collapsed and the value stalled / jittered.
- ArcArrow: cursor is `'grab'` on hover and `'grabbing'` during the
  drag (was the misleading `'ew-resize'`); the `Cursor` type gains
  those two members.
- ParametricNodeRenderer: merge `useLiveNodeOverrides` for position +
  rotation so the rotation gizmo shows live motion through the outer
  group — GeometrySystem already covered geometry-affecting fields.
- floating menu offsets: slab 0.4 → 0.7, ceiling 0.4 → 1.0, shelf 0.6,
  so the menu floats above each kind's new height arrow.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/core/src/registry/handles.ts         |   2 +-
 .../editor/floating-action-menu.tsx           |  17 +-
 .../components/editor/node-arrow-handles.tsx  |  31 ++-
 .../tools/shared/polygon-editor.tsx           | 237 ++++++++++++++----
 .../nodes/src/ceiling/boundary-editor.tsx     |  36 ++-
 packages/nodes/src/ceiling/definition.ts      |  53 +++-
 packages/nodes/src/ceiling/hole-editor.tsx    |  32 ++-
 packages/nodes/src/shelf/definition.ts        | 100 +++++++-
 packages/nodes/src/slab/boundary-editor.tsx   |  38 ++-
 packages/nodes/src/slab/definition.ts         |  45 +++-
 packages/nodes/src/slab/hole-editor.tsx       |  31 ++-
 .../renderers/parametric-node-renderer.tsx    |  22 +-
 .../src/systems/ceiling/ceiling-system.tsx    |  13 +-
 13 files changed, 576 insertions(+), 81 deletions(-)

diff --git a/packages/core/src/registry/handles.ts b/packages/core/src/registry/handles.ts
index f366d5534..754a3c3d2 100644
--- a/packages/core/src/registry/handles.ts
+++ b/packages/core/src/registry/handles.ts
@@ -70,7 +70,7 @@ export type HandlePlacement<N> = {
   rotationY?: (node: N, sceneApi: SceneApi) => number
 }
 
-export type Cursor = 'ew-resize' | 'ns-resize' | 'move'
+export type Cursor = 'ew-resize' | 'ns-resize' | 'move' | 'grab' | 'grabbing'
 
 /**
  * Visual decoration shown alongside a handle while the user is hovering
diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index 89fa5eacd..c9ddcb0d1 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -81,8 +81,16 @@ const MENU_Y_OFFSETS: Record<string, number> = {
   stair: 0.2,
   'stair-stair': 1.1,
   'stair-landing': 0.9,
-  slab: 0.4,
-  ceiling: 0.4,
+  // Slab: clears the height arrow that sits at elevation + 0.22 plus the
+  // chevron's own visual reach, so the menu floats just above it.
+  slab: 0.7,
+  // Ceiling: clears the upward height arrow that sits ~0.22 above the
+  // ceiling plane, plus extra headroom so the menu doesn't crowd the
+  // chevron at any zoom level.
+  ceiling: 1.0,
+  // Shelf: clears the height arrow that sits at shelf.height + 0.22
+  // plus the chevron's visual reach.
+  shelf: 0.6,
 }
 
 function getMenuYOffset(node: AnyNode | null): number {
@@ -440,7 +448,10 @@ export function FloatingActionMenu() {
                 node?.type === 'fence' ||
                 node?.type === 'elevator' ||
                 node?.type === 'stair' ||
-                node?.type === 'stair-segment'
+                node?.type === 'stair-segment' ||
+                node?.type === 'slab' ||
+                node?.type === 'ceiling' ||
+                node?.type === 'shelf'
                   ? handleMove
                   : undefined
               }
diff --git a/packages/editor/src/components/editor/node-arrow-handles.tsx b/packages/editor/src/components/editor/node-arrow-handles.tsx
index cd5a682f3..2f9f6cf20 100644
--- a/packages/editor/src/components/editor/node-arrow-handles.tsx
+++ b/packages/editor/src/components/editor/node-arrow-handles.tsx
@@ -27,6 +27,7 @@ import {
   DoubleSide,
   ExtrudeGeometry,
   type Group,
+  Matrix4,
   type Object3D,
   OrthographicCamera,
   Plane,
@@ -474,6 +475,13 @@ function LinearArrow({
     // camera's projected horizontal direction. For axis='y' we need the
     // plane to be vertical too — projection.y maps directly.
     rideObject.updateMatrixWorld()
+    // Freeze the ride frame at drag-start. Some kinds park their mesh
+    // position on the field being dragged (ceiling: mesh.position.y =
+    // height) — using the *live* matrix in `onMove` would chase that
+    // moving frame and the value stalls or jitters. The inverse is
+    // captured once so local-coord math stays anchored to the pre-drag
+    // pose for the duration of the drag.
+    const initialFrameInverse = new Matrix4().copy(rideObject.matrixWorld).invert()
     const worldOrigin = new Vector3(...position).applyMatrix4(rideObject.matrixWorld)
     const planeNormal = new Vector3().subVectors(camera.position, worldOrigin).setY(0)
     if (planeNormal.lengthSq() === 0) return
@@ -493,7 +501,7 @@ function LinearArrow({
     raycaster.setFromCamera(ndc, camera)
     const hitWorld = new Vector3()
     if (!raycaster.ray.intersectPlane(plane, hitWorld)) return
-    const hitLocal = rideObject.worldToLocal(hitWorld.clone())
+    const hitLocal = hitWorld.clone().applyMatrix4(initialFrameInverse)
 
     // Capture node + initial value at drag start so `apply` can reference
     // pre-drag state (e.g. door right-width anchors the LEFT edge at
@@ -541,7 +549,9 @@ function LinearArrow({
       raycaster.setFromCamera(ndc, camera)
       const intersection = new Vector3()
       if (!raycaster.ray.intersectPlane(plane, intersection)) return
-      const intersectionLocal = rideObject.worldToLocal(intersection.clone())
+      // Use the frozen drag-start frame, not the live one. See the
+      // `initialFrameInverse` comment above.
+      const intersectionLocal = intersection.clone().applyMatrix4(initialFrameInverse)
       const currentPointer =
         descriptor.axis === 'x'
           ? intersectionLocal.x
@@ -738,7 +748,10 @@ function ArcArrow({
   const placementSceneApi = useMemo(() => createSceneApi(useScene), [])
   const position = descriptor.placement.position(node, placementSceneApi)
   const rotationY = descriptor.placement.rotationY?.(node, placementSceneApi) ?? 0
-  const cursor: Cursor = 'ew-resize'
+  // Rotation gizmo: hover signals "grabbable", active drag signals
+  // "grabbed". `ew-resize` was wrong — it implies linear width drag.
+  const hoverCursor: Cursor = 'grab'
+  const dragCursor: Cursor = 'grabbing'
 
   // Optional guide ring (elevator rotation circle) shown while the arc
   // arrow is hovered or dragging. Same recipe as the linear / radial
@@ -778,7 +791,7 @@ function ArcArrow({
     const sceneApi = createSceneApi(useScene)
     const initialNode = (sceneApi.get(nodeId) ?? node) as AnyNode
 
-    document.body.style.cursor = cursor
+    document.body.style.cursor = dragCursor
     sfxEmitter.emit('sfx:item-pick')
     useViewer.getState().setHandleDragging(true)
     useScene.temporal.getState().pause()
@@ -812,7 +825,7 @@ function ArcArrow({
       window.removeEventListener('pointermove', onMove)
       window.removeEventListener('pointerup', onUp)
       window.removeEventListener('pointercancel', onCancel)
-      if (document.body.style.cursor === cursor) {
+      if (document.body.style.cursor === dragCursor) {
         document.body.style.cursor = ''
       }
       useScene.temporal.getState().resume()
@@ -863,12 +876,16 @@ function ArcArrow({
           onPointerEnter={(event) => {
             event.stopPropagation()
             setIsHovered(true)
-            document.body.style.cursor = cursor
+            // Only show the hover cursor if no drag is already in flight —
+            // otherwise we'd stomp `grabbing` back to `grab` mid-gesture.
+            if (document.body.style.cursor !== dragCursor) {
+              document.body.style.cursor = hoverCursor
+            }
           }}
           onPointerLeave={(event) => {
             event.stopPropagation()
             setIsHovered(false)
-            if (document.body.style.cursor === cursor) {
+            if (document.body.style.cursor === hoverCursor) {
               document.body.style.cursor = ''
             }
           }}
diff --git a/packages/editor/src/components/tools/shared/polygon-editor.tsx b/packages/editor/src/components/tools/shared/polygon-editor.tsx
index 11aaa3040..fba9917a9 100644
--- a/packages/editor/src/components/tools/shared/polygon-editor.tsx
+++ b/packages/editor/src/components/tools/shared/polygon-editor.tsx
@@ -1,12 +1,55 @@
 import { emitter, type GridEvent, sceneRegistry } from '@pascal-app/core'
 import { createPortal } from '@react-three/fiber'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { BufferGeometry, Float32BufferAttribute, type Line, type Object3D } from 'three'
+import {
+  BufferGeometry,
+  ExtrudeGeometry,
+  Float32BufferAttribute,
+  type Line,
+  type Object3D,
+  Shape,
+} from 'three'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { snapToHalf } from '../item/placement-math'
 
 const Y_OFFSET = 0.02
+// Per-side resize arrows: indigo chevrons that match the registry arrow
+// handles (wall / column / fence). Each arrow sits just outside an edge
+// midpoint, pointing along the edge's outward normal — dragging an arrow
+// translates that edge only (its two vertices), leaving the opposite side
+// fixed. Reuses the existing 'edge' drag mode in PolygonEditor.
+const EDGE_ARROW_COLOR = '#8381ed'
+const EDGE_ARROW_HOVER_COLOR = '#a5b4fc'
+const EDGE_ARROW_SCALE = 0.65
+const EDGE_ARROW_OFFSET = 0.34
+
+function createEdgeArrowGeometry() {
+  const shape = new Shape()
+  shape.moveTo(0.22, 0)
+  shape.lineTo(-0.04, 0.12)
+  shape.lineTo(-0.04, 0.035)
+  shape.lineTo(-0.2, 0.035)
+  shape.lineTo(-0.2, -0.035)
+  shape.lineTo(-0.04, -0.035)
+  shape.lineTo(-0.04, -0.12)
+  shape.lineTo(0.22, 0)
+  const geometry = new ExtrudeGeometry(shape, {
+    depth: 0.08,
+    bevelEnabled: true,
+    bevelThickness: 0.035,
+    bevelSize: 0.03,
+    bevelOffset: 0,
+    bevelSegments: 10,
+    curveSegments: 16,
+    steps: 1,
+  })
+  geometry.translate(0, 0, -0.04)
+  geometry.rotateX(-Math.PI / 2)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
 
 type DragState = {
   isDragging: boolean
@@ -23,6 +66,14 @@ export interface PolygonEditorProps {
   polygon: Array<[number, number]>
   color?: string
   onPolygonChange: (polygon: Array<[number, number]>) => void
+  /**
+   * Fires on every drag tick with the in-flight polygon, then once with
+   * `null` when the drag commits or is otherwise cleared. Hosts wire
+   * this to `useLiveNodeOverrides` so the underlying mesh rebuilds at
+   * pointer rate while `onPolygonChange` stays a single store commit
+   * on release.
+   */
+  onPolygonPreview?: (polygon: ReadonlyArray<readonly [number, number]> | null) => void
   minVertices?: number
   /** Level ID to mount the editor to. If provided, uses createPortal for automatic level animation following. */
   levelId?: string
@@ -55,6 +106,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   polygon,
   color = '#3b82f6',
   onPolygonChange,
+  onPolygonPreview,
   minVertices = 3,
   levelId,
   surfaceHeight = 0,
@@ -105,9 +157,19 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   const [previewPolygon, setPreviewPolygon] = useState<Array<[number, number]> | null>(null)
   const previewPolygonRef = useRef<Array<[number, number]> | null>(null)
 
+  const onPolygonPreviewRef = useRef(onPolygonPreview)
+  useEffect(() => {
+    onPolygonPreviewRef.current = onPolygonPreview
+  }, [onPolygonPreview])
+
   const updatePreviewPolygon = useCallback((nextPolygon: Array<[number, number]> | null) => {
     previewPolygonRef.current = nextPolygon
     setPreviewPolygon(nextPolygon)
+    // Notify the host so it can mirror the in-flight polygon onto
+    // `useLiveNodeOverrides` (drag rebuilds the mesh at pointer rate)
+    // and clear that override when we hand `null` back at commit /
+    // cancel / external-undo time.
+    onPolygonPreviewRef.current?.(nextPolygon)
   }, [])
 
   // Keep ref in sync
@@ -159,6 +221,15 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   const edgeHandles = useMemo(() => {
     if (displayPolygon.length < 2) return []
 
+    let cx = 0
+    let cz = 0
+    for (const [x, z] of displayPolygon) {
+      cx += x
+      cz += z
+    }
+    cx /= displayPolygon.length
+    cz /= displayPolygon.length
+
     return displayPolygon.flatMap(([x1, z1], index) => {
       const nextIndex = (index + 1) % displayPolygon.length
       const [x2, z2] = displayPolygon[nextIndex]!
@@ -167,17 +238,33 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
       const length = Math.hypot(dx, dz)
       if (length < 1e-6) return []
 
+      const midpoint: [number, number] = [(x1 + x2) / 2, (z1 + z2) / 2]
+      // Outward normal: edge perpendicular flipped to point away from the
+      // polygon centroid. Independent of winding order so arrows always
+      // face outward even on hand-traced (mixed-winding) polygons.
+      let nx = -dz / length
+      let nz = dx / length
+      if (nx * (midpoint[0] - cx) + nz * (midpoint[1] - cz) < 0) {
+        nx = -nx
+        nz = -nz
+      }
+
       return [
         {
           index,
           length,
-          midpoint: [(x1 + x2) / 2, (z1 + z2) / 2] as [number, number],
+          midpoint,
           rotationY: -Math.atan2(dz, dx),
+          outwardNormal: [nx, nz] as [number, number],
+          outwardAngle: -Math.atan2(nz, nx),
         },
       ]
     })
   }, [displayPolygon])
 
+  const arrowGeometry = useMemo(() => createEdgeArrowGeometry(), [])
+  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+
   // Update vertex position using grid cursor position
   const handleVertexDrag = useCallback(
     (vertexIndex: number, position: [number, number]) => {
@@ -427,7 +514,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
             position={[x!, editY + height / 2, z!]}
           >
             <cylinderGeometry args={[radius, radius, height, 16]} />
-            <meshStandardMaterial
+            <meshBasicMaterial
               color={isDragging ? '#22c55e' : isHovered ? '#60a5fa' : '#3b82f6'}
             />
           </mesh>
@@ -458,63 +545,107 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
           position={[polygonCenter[0], editY + handleHeight + 0.08, polygonCenter[1]]}
         >
           <sphereGeometry args={[0.09, 20, 20]} />
-          <meshStandardMaterial color={dragState?.mode === 'polygon' ? '#22c55e' : '#f59e0b'} />
+          <meshBasicMaterial color={dragState?.mode === 'polygon' ? '#22c55e' : '#f59e0b'} />
         </mesh>
       )}
 
       {allowEdgeMove &&
-        edgeHandles.map(({ index, length, midpoint, rotationY }) => {
+        edgeHandles.map(({ index, length, midpoint, rotationY, outwardNormal, outwardAngle }) => {
           const isHovered = hoveredEdge === index
           const isDragging = dragState?.mode === 'edge' && dragState.edgeIndex === index
+          const arrowX = midpoint[0] + outwardNormal[0] * EDGE_ARROW_OFFSET
+          const arrowZ = midpoint[1] + outwardNormal[1] * EDGE_ARROW_OFFSET
+
+          const beginEdgeDrag = (e: { button: number; pointerId: number }) => {
+            const start = displayPolygon[index]
+            const end = displayPolygon[(index + 1) % displayPolygon.length]
+            if (!(start && end)) return
+
+            const edgeNormal = getEdgeNormal(start, end)
+            if (!edgeNormal) return
+
+            setHoveredEdge(null)
+            setDragState({
+              isDragging: true,
+              mode: 'edge',
+              vertexIndex: null,
+              edgeIndex: index,
+              edgeNormal,
+              initialPosition: cursorPosition,
+              initialPolygon: displayPolygon.map(([px, pz]) => [px, pz] as [number, number]),
+              pointerId: e.pointerId,
+            })
+          }
 
           return (
-            <mesh
-              key={`edge-${index}`}
-              layers={EDITOR_LAYER}
-              onClick={(e) => {
-                if (e.button !== 0) return
-                e.stopPropagation()
-              }}
-              onPointerDown={(e) => {
-                if (e.button !== 0) return
-                e.stopPropagation()
-                const start = displayPolygon[index]
-                const end = displayPolygon[(index + 1) % displayPolygon.length]
-                if (!(start && end)) return
-
-                const edgeNormal = getEdgeNormal(start, end)
-                if (!edgeNormal) return
-
-                setHoveredEdge(null)
-                setDragState({
-                  isDragging: true,
-                  mode: 'edge',
-                  vertexIndex: null,
-                  edgeIndex: index,
-                  edgeNormal,
-                  initialPosition: cursorPosition,
-                  initialPolygon: displayPolygon.map(([px, pz]) => [px, pz] as [number, number]),
-                  pointerId: e.pointerId,
-                })
-              }}
-              onPointerEnter={(e) => {
-                e.stopPropagation()
-                setHoveredEdge(index)
-              }}
-              onPointerLeave={(e) => {
-                e.stopPropagation()
-                setHoveredEdge(null)
-              }}
-              position={[midpoint[0], edgeHandleY, midpoint[1]]}
-              rotation={[0, rotationY, 0]}
-            >
-              <boxGeometry args={[length, EDGE_HANDLE_HEIGHT, EDGE_HANDLE_THICKNESS]} />
-              <meshStandardMaterial
-                color={isDragging ? '#22c55e' : '#94a3b8'}
-                opacity={isDragging ? 0.5 : isHovered ? 0.38 : 0.14}
-                transparent
-              />
-            </mesh>
+            <group key={`edge-${index}`}>
+              <mesh
+                layers={EDITOR_LAYER}
+                onClick={(e) => {
+                  if (e.button !== 0) return
+                  e.stopPropagation()
+                }}
+                onPointerDown={(e) => {
+                  if (e.button !== 0) return
+                  e.stopPropagation()
+                  beginEdgeDrag(e)
+                }}
+                onPointerEnter={(e) => {
+                  e.stopPropagation()
+                  setHoveredEdge(index)
+                }}
+                onPointerLeave={(e) => {
+                  e.stopPropagation()
+                  setHoveredEdge(null)
+                }}
+                position={[midpoint[0], edgeHandleY, midpoint[1]]}
+                rotation={[0, rotationY, 0]}
+              >
+                <boxGeometry args={[length, EDGE_HANDLE_HEIGHT, EDGE_HANDLE_THICKNESS]} />
+                <meshBasicMaterial
+                  color={isDragging ? '#22c55e' : '#60a5fa'}
+                  opacity={isDragging ? 0.5 : isHovered ? 0.38 : 0.14}
+                  transparent
+                />
+              </mesh>
+              {/* Per-side resize arrow — points outward from the edge.
+                  Dragging it pulls (or pushes) only this edge's two
+                  vertices along the outward normal; the opposite side
+                  of the polygon stays put. */}
+              <mesh
+                geometry={arrowGeometry}
+                layers={EDITOR_LAYER}
+                onClick={(e) => {
+                  if (e.button !== 0) return
+                  e.stopPropagation()
+                }}
+                onPointerDown={(e) => {
+                  if (e.button !== 0) return
+                  e.stopPropagation()
+                  beginEdgeDrag(e)
+                }}
+                onPointerEnter={(e) => {
+                  e.stopPropagation()
+                  setHoveredEdge(index)
+                }}
+                onPointerLeave={(e) => {
+                  e.stopPropagation()
+                  setHoveredEdge(null)
+                }}
+                position={[arrowX, edgeHandleY, arrowZ]}
+                rotation={[0, outwardAngle, 0]}
+                scale={EDGE_ARROW_SCALE}
+              >
+                <meshBasicMaterial
+                  color={
+                    isDragging ? '#22c55e' : isHovered ? EDGE_ARROW_HOVER_COLOR : EDGE_ARROW_COLOR
+                  }
+                  depthTest={false}
+                  depthWrite={false}
+                  transparent
+                />
+              </mesh>
+            </group>
           )
         })}
 
@@ -560,7 +691,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
               position={[x!, editY + height / 2, z!]}
             >
               <cylinderGeometry args={[radius, radius, height, 16]} />
-              <meshStandardMaterial
+              <meshBasicMaterial
                 color={isHovered ? '#4ade80' : '#22c55e'}
                 opacity={isHovered ? 1 : 0.7}
                 transparent
diff --git a/packages/nodes/src/ceiling/boundary-editor.tsx b/packages/nodes/src/ceiling/boundary-editor.tsx
index b807a6a8e..88ac26524 100644
--- a/packages/nodes/src/ceiling/boundary-editor.tsx
+++ b/packages/nodes/src/ceiling/boundary-editor.tsx
@@ -1,9 +1,14 @@
 'use client'
 
-import { type CeilingNode, resolveLevelId, useScene } from '@pascal-app/core'
+import {
+  type CeilingNode,
+  resolveLevelId,
+  useLiveNodeOverrides,
+  useScene,
+} from '@pascal-app/core'
 import { PolygonEditor } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 
 /**
  * Phase 5 Stage D — ceiling boundary editor (registry-driven).
@@ -11,12 +16,17 @@ import { useCallback } from 'react'
  * Thin wrapper around the shared `<PolygonEditor>` (same shape as
  * slab's boundary-editor). Activates when a ceiling is selected in
  * structure/select mode and no hole edit is in progress.
+ *
+ * Drag flow mirrors slab: `onPolygonPreview` pushes the in-flight
+ * polygon to `useLiveNodeOverrides` so the ceiling mesh rebuilds at
+ * pointer rate; `onPolygonChange` is the single commit on release.
  */
 export const CeilingBoundaryEditor: React.FC<{ ceilingId: CeilingNode['id'] }> = ({
   ceilingId,
 }) => {
   const ceilingNode = useScene((s) => s.nodes[ceilingId])
   const updateNode = useScene((s) => s.updateNode)
+  const markDirty = useScene((s) => s.markDirty)
   const setSelection = useViewer((s) => s.setSelection)
 
   const ceiling = ceilingNode?.type === 'ceiling' ? (ceilingNode as CeilingNode) : null
@@ -29,6 +39,27 @@ export const CeilingBoundaryEditor: React.FC<{ ceilingId: CeilingNode['id'] }> =
     [ceilingId, updateNode, setSelection],
   )
 
+  const handlePolygonPreview = useCallback(
+    (preview: ReadonlyArray<readonly [number, number]> | null) => {
+      if (preview) {
+        useLiveNodeOverrides.getState().set(ceilingId, {
+          polygon: preview.map(([x, z]) => [x, z] as [number, number]),
+        })
+      } else {
+        useLiveNodeOverrides.getState().clear(ceilingId)
+      }
+      markDirty(ceilingId)
+    },
+    [ceilingId, markDirty],
+  )
+
+  useEffect(() => {
+    return () => {
+      useLiveNodeOverrides.getState().clear(ceilingId)
+      useScene.getState().markDirty(ceilingId)
+    }
+  }, [ceilingId])
+
   if (!ceiling?.polygon || ceiling.polygon.length < 3) return null
 
   return (
@@ -38,6 +69,7 @@ export const CeilingBoundaryEditor: React.FC<{ ceilingId: CeilingNode['id'] }> =
       levelId={resolveLevelId(ceiling, useScene.getState().nodes)}
       minVertices={3}
       onPolygonChange={handlePolygonChange}
+      onPolygonPreview={handlePolygonPreview}
       polygon={ceiling.polygon}
       surfaceHeight={ceiling.height ?? 2.5}
     />
diff --git a/packages/nodes/src/ceiling/definition.ts b/packages/nodes/src/ceiling/definition.ts
index b0f305e16..93bd59031 100644
--- a/packages/nodes/src/ceiling/definition.ts
+++ b/packages/nodes/src/ceiling/definition.ts
@@ -1,4 +1,8 @@
-import type { NodeDefinition } from '@pascal-app/core'
+import type {
+  CeilingNode as CeilingNodeType,
+  HandleDescriptor,
+  NodeDefinition,
+} from '@pascal-app/core'
 import { buildCeilingFloorplan } from './floorplan'
 import {
   ceilingAddVertexAffordance,
@@ -9,6 +13,52 @@ import { ceilingFloorplanMoveTarget } from './floorplan-move'
 import { ceilingParametrics } from './parametrics'
 import { CeilingNode } from './schema'
 
+const HEIGHT_HANDLE_OFFSET = 0.22
+const MIN_CEILING_HEIGHT = 0.5
+
+function ceilingPolygonCenter(n: CeilingNodeType): [number, number] {
+  const polygon = n.polygon ?? []
+  if (polygon.length === 0) return [0, 0]
+  let cx = 0
+  let cz = 0
+  for (const [x, z] of polygon) {
+    cx += x
+    cz += z
+  }
+  return [cx / polygon.length, cz / polygon.length]
+}
+
+// Ceiling height arrow — vertical chevron at the polygon centroid,
+// hovering just above the ceiling plane. Drags the `height` field
+// (the Y position of the ceiling surface). `anchor: 'min'` so dragging
+// the cursor upward grows the value directly. Live override + commit
+// flow comes from the shared registry arrow pipeline.
+//
+// The placement Y is in *mesh-local* coords. CeilingSystem already
+// parks `mesh.position.y = ceiling.height - 0.01`, so the local Y is
+// just the offset above that plane (NOT `height + offset` — that
+// would double-add the height and push the arrow off-screen).
+function ceilingHeightHandle(): HandleDescriptor<CeilingNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min',
+    min: MIN_CEILING_HEIGHT,
+    currentValue: (n) => n.height ?? 2.5,
+    apply: (_n, newValue) => ({ height: newValue }),
+    placement: {
+      position: (n) => {
+        const [cx, cz] = ceilingPolygonCenter(n)
+        return [cx, HEIGHT_HANDLE_OFFSET, cz]
+      },
+    },
+  }
+}
+
+function ceilingHandles(_node: CeilingNodeType): HandleDescriptor<CeilingNodeType>[] {
+  return [ceilingHeightHandle()]
+}
+
 /**
  * Ceiling — Phase 5 batch kind, polygon-based. Structurally similar to
  * slab but with React-rendered hosted children + TSL shader materials +
@@ -60,6 +110,7 @@ export const ceilingDefinition: NodeDefinition<typeof CeilingNode> = {
   },
 
   parametrics: ceilingParametrics,
+  handles: ceilingHandles,
 
   // Stage D: kind-owned placement tool. Multi-click polygon drawing
   // with a vertical TSL-gradient connector + ground-shadow lines.
diff --git a/packages/nodes/src/ceiling/hole-editor.tsx b/packages/nodes/src/ceiling/hole-editor.tsx
index 5923a5eab..0ddcfd823 100644
--- a/packages/nodes/src/ceiling/hole-editor.tsx
+++ b/packages/nodes/src/ceiling/hole-editor.tsx
@@ -1,9 +1,14 @@
 'use client'
 
-import { type CeilingNode, resolveLevelId, useScene } from '@pascal-app/core'
+import {
+  type CeilingNode,
+  resolveLevelId,
+  useLiveNodeOverrides,
+  useScene,
+} from '@pascal-app/core'
 import { PolygonEditor } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 
 /**
  * Phase 5 Stage D — ceiling hole editor (registry-driven).
@@ -14,6 +19,7 @@ export const CeilingHoleEditor: React.FC<{
 }> = ({ ceilingId, holeIndex }) => {
   const ceilingNode = useScene((s) => s.nodes[ceilingId])
   const updateNode = useScene((s) => s.updateNode)
+  const markDirty = useScene((s) => s.markDirty)
   const setSelection = useViewer((s) => s.setSelection)
 
   const ceiling = ceilingNode?.type === 'ceiling' ? (ceilingNode as CeilingNode) : null
@@ -30,6 +36,27 @@ export const CeilingHoleEditor: React.FC<{
     [ceilingId, holeIndex, holes, updateNode, setSelection],
   )
 
+  const handlePolygonPreview = useCallback(
+    (preview: ReadonlyArray<readonly [number, number]> | null) => {
+      if (preview) {
+        const updatedHoles = [...holes]
+        updatedHoles[holeIndex] = preview.map(([x, z]) => [x, z] as [number, number])
+        useLiveNodeOverrides.getState().set(ceilingId, { holes: updatedHoles })
+      } else {
+        useLiveNodeOverrides.getState().clear(ceilingId)
+      }
+      markDirty(ceilingId)
+    },
+    [ceilingId, holeIndex, holes, markDirty],
+  )
+
+  useEffect(() => {
+    return () => {
+      useLiveNodeOverrides.getState().clear(ceilingId)
+      useScene.getState().markDirty(ceilingId)
+    }
+  }, [ceilingId])
+
   if (!(ceiling && hole) || hole.length < 3) return null
 
   return (
@@ -40,6 +67,7 @@ export const CeilingHoleEditor: React.FC<{
       levelId={resolveLevelId(ceiling, useScene.getState().nodes)}
       minVertices={3}
       onPolygonChange={handlePolygonChange}
+      onPolygonPreview={handlePolygonPreview}
       polygon={hole}
       surfaceHeight={ceiling.height ?? 2.5}
     />
diff --git a/packages/nodes/src/shelf/definition.ts b/packages/nodes/src/shelf/definition.ts
index a9ae8767c..40f9c195d 100644
--- a/packages/nodes/src/shelf/definition.ts
+++ b/packages/nodes/src/shelf/definition.ts
@@ -1,10 +1,107 @@
-import type { NodeDefinition } from '@pascal-app/core'
+import type {
+  HandleDescriptor,
+  NodeDefinition,
+  ShelfNode as ShelfNodeType,
+} from '@pascal-app/core'
 import { buildShelfFloorplan } from './floorplan'
 import { shelfFloorplanMoveTarget } from './floorplan-move'
 import { buildShelfGeometry, shelfRowSurfaceYs } from './geometry'
 import { shelfParametrics } from './parametrics'
 import { ShelfNode } from './schema'
 
+const SIDE_HANDLE_OFFSET = 0.18
+const HEIGHT_HANDLE_OFFSET = 0.22
+const ROTATE_CORNER_OFFSET = 0.32
+const ROTATE_RING_OFFSET = 0.04
+const MIN_SHELF_WIDTH = 0.3
+const MIN_SHELF_DEPTH = 0.1
+const MIN_SHELF_HEIGHT = 0.05
+
+// Width arrow — anchor='center' so dragging the +X side grows the full
+// width symmetrically (both edges move ±delta), matching the column /
+// elevator pattern.
+function shelfWidthHandle(): HandleDescriptor<ShelfNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'x',
+    anchor: 'center',
+    min: MIN_SHELF_WIDTH,
+    currentValue: (n) => n.width,
+    apply: (_n, newValue) => ({ width: newValue }),
+    placement: {
+      position: (n) => [n.width / 2 + SIDE_HANDLE_OFFSET, n.height / 2, 0],
+    },
+  }
+}
+
+// Depth arrow — symmetric on the +Z side.
+function shelfDepthHandle(): HandleDescriptor<ShelfNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'z',
+    anchor: 'center',
+    min: MIN_SHELF_DEPTH,
+    currentValue: (n) => n.depth,
+    apply: (_n, newValue) => ({ depth: newValue }),
+    placement: {
+      position: (n) => [0, n.height / 2, n.depth / 2 + SIDE_HANDLE_OFFSET],
+    },
+  }
+}
+
+// Height arrow — anchor='min' so the base stays on the floor and the
+// top edge follows the cursor.
+function shelfHeightHandle(): HandleDescriptor<ShelfNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min',
+    min: MIN_SHELF_HEIGHT,
+    currentValue: (n) => n.height,
+    apply: (_n, newValue) => ({ height: newValue }),
+    placement: {
+      position: (n) => [0, n.height + HEIGHT_HANDLE_OFFSET, 0],
+    },
+  }
+}
+
+// Whole-shelf rotation gizmo — curved two-headed arrow at the front of
+// the footprint, guide ring traces the corner-diagonal radius on hover
+// / drag. Same pattern as the elevator / column rotate gizmo; differs
+// only because shelf stores rotation as a `[x, y, z]` tuple, so the
+// apply patch writes back the whole tuple with Y mutated.
+function shelfRotateHandle(): HandleDescriptor<ShelfNodeType> {
+  return {
+    kind: 'arc-resize',
+    axis: 'angular',
+    shape: 'rotate',
+    apply: (initial, delta) => {
+      const r = initial.rotation ?? [0, 0, 0]
+      // Negate to match three.js Y-rotation handedness (cursor atan2
+      // ticks opposite-handed from `rotation-y`).
+      return { rotation: [r[0], (r[1] ?? 0) - delta, r[2]] as [number, number, number] }
+    },
+    placement: {
+      position: (n) => {
+        const halfZ = n.depth / 2
+        const yMid = Math.max(n.height, MIN_SHELF_HEIGHT) / 2
+        return [n.width / 2, yMid, halfZ + ROTATE_CORNER_OFFSET]
+      },
+      // Tilt the curve toward the shelf's front face.
+      rotationY: () => -Math.PI / 4,
+    },
+    decoration: {
+      kind: 'ring',
+      radius: (n) => Math.hypot(n.width / 2, n.depth / 2) + ROTATE_RING_OFFSET,
+      y: (n) => Math.max(n.height, MIN_SHELF_HEIGHT) / 2,
+    },
+  }
+}
+
+function shelfHandles(_node: ShelfNodeType): HandleDescriptor<ShelfNodeType>[] {
+  return [shelfWidthHandle(), shelfDepthHandle(), shelfHeightHandle(), shelfRotateHandle()]
+}
+
 export const shelfDefinition: NodeDefinition<typeof ShelfNode> = {
   kind: 'shelf',
   schemaVersion: 2,
@@ -82,6 +179,7 @@ export const shelfDefinition: NodeDefinition<typeof ShelfNode> = {
   },
 
   parametrics: shelfParametrics,
+  handles: shelfHandles,
 
   // Three-checkbox composition: shelf needs only pure builder functions.
   // The framework's <ParametricNodeRenderer> + <GeometrySystem> handle 3D
diff --git a/packages/nodes/src/slab/boundary-editor.tsx b/packages/nodes/src/slab/boundary-editor.tsx
index 0e9412edb..c651646a8 100644
--- a/packages/nodes/src/slab/boundary-editor.tsx
+++ b/packages/nodes/src/slab/boundary-editor.tsx
@@ -1,9 +1,9 @@
 'use client'
 
-import { resolveLevelId, type SlabNode, useScene } from '@pascal-app/core'
+import { resolveLevelId, type SlabNode, useLiveNodeOverrides, useScene } from '@pascal-app/core'
 import { PolygonEditor } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 
 /**
  * Phase 5 Stage D — slab boundary editor (registry-driven).
@@ -14,10 +14,19 @@ import { useCallback } from 'react'
  * bracketing — lives in `PolygonEditor` itself.
  *
  * Mounted by ToolManager via `def.affordanceTools['boundary-edit']`.
+ *
+ * Drag flow: every pointer tick the editor hands back the in-flight
+ * polygon through `onPolygonPreview`; we mirror it onto
+ * `useLiveNodeOverrides` + `markDirty` so `GeometrySystem` rebuilds
+ * the slab mesh at pointer rate. On release the editor calls
+ * `onPolygonChange` once with the final polygon — that's the single
+ * `updateNode` tracked by undo. The follow-up `onPolygonPreview(null)`
+ * drops the override so subscribers read from the store again.
  */
 export const SlabBoundaryEditor: React.FC<{ slabId: SlabNode['id'] }> = ({ slabId }) => {
   const slabNode = useScene((s) => s.nodes[slabId])
   const updateNode = useScene((s) => s.updateNode)
+  const markDirty = useScene((s) => s.markDirty)
   const setSelection = useViewer((s) => s.setSelection)
 
   const slab = slabNode?.type === 'slab' ? (slabNode as SlabNode) : null
@@ -30,6 +39,30 @@ export const SlabBoundaryEditor: React.FC<{ slabId: SlabNode['id'] }> = ({ slabI
     [slabId, updateNode, setSelection],
   )
 
+  const handlePolygonPreview = useCallback(
+    (preview: ReadonlyArray<readonly [number, number]> | null) => {
+      if (preview) {
+        useLiveNodeOverrides.getState().set(slabId, {
+          polygon: preview.map(([x, z]) => [x, z] as [number, number]),
+        })
+      } else {
+        useLiveNodeOverrides.getState().clear(slabId)
+      }
+      markDirty(slabId)
+    },
+    [slabId, markDirty],
+  )
+
+  // Guarantee the override clears if the editor unmounts mid-drag
+  // (selection change, mode switch) so the slab mesh doesn't get stuck
+  // on a stale polygon.
+  useEffect(() => {
+    return () => {
+      useLiveNodeOverrides.getState().clear(slabId)
+      useScene.getState().markDirty(slabId)
+    }
+  }, [slabId])
+
   if (!slab?.polygon || slab.polygon.length < 3) return null
 
   return (
@@ -39,6 +72,7 @@ export const SlabBoundaryEditor: React.FC<{ slabId: SlabNode['id'] }> = ({ slabI
       levelId={resolveLevelId(slab, useScene.getState().nodes)}
       minVertices={3}
       onPolygonChange={handlePolygonChange}
+      onPolygonPreview={handlePolygonPreview}
       polygon={slab.polygon}
       surfaceHeight={slab.elevation ?? 0.05}
     />
diff --git a/packages/nodes/src/slab/definition.ts b/packages/nodes/src/slab/definition.ts
index b09246d07..5f289b89d 100644
--- a/packages/nodes/src/slab/definition.ts
+++ b/packages/nodes/src/slab/definition.ts
@@ -1,4 +1,4 @@
-import type { NodeDefinition } from '@pascal-app/core'
+import type { HandleDescriptor, NodeDefinition, SlabNode as SlabNodeType } from '@pascal-app/core'
 import { buildSlabFloorplan } from './floorplan'
 import {
   slabAddVertexAffordance,
@@ -10,6 +10,48 @@ import { buildSlabGeometry } from './geometry'
 import { slabParametrics } from './parametrics'
 import { SlabNode } from './schema'
 
+const HEIGHT_HANDLE_OFFSET = 0.22
+const MIN_SLAB_ELEVATION = 0.02
+
+function slabPolygonCenter(n: SlabNodeType): [number, number] {
+  const polygon = n.polygon ?? []
+  if (polygon.length === 0) return [0, 0]
+  let cx = 0
+  let cz = 0
+  for (const [x, z] of polygon) {
+    cx += x
+    cz += z
+  }
+  return [cx / polygon.length, cz / polygon.length]
+}
+
+// Slab height arrow — vertical chevron at the polygon centroid, just
+// above the slab's top face. Drags elevation (the extrusion thickness)
+// with `anchor: 'min'` so the bottom stays at world Y=0 and the top
+// follows the pointer. Same registry-handle pipeline as the column
+// height arrow, so live override + commit-on-release come for free.
+function slabHeightHandle(): HandleDescriptor<SlabNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min',
+    min: MIN_SLAB_ELEVATION,
+    currentValue: (n) => n.elevation ?? 0.05,
+    apply: (_n, newValue) => ({ elevation: newValue }),
+    placement: {
+      position: (n) => {
+        const [cx, cz] = slabPolygonCenter(n)
+        const elevation = n.elevation ?? 0.05
+        return [cx, elevation + HEIGHT_HANDLE_OFFSET, cz]
+      },
+    },
+  }
+}
+
+function slabHandles(_node: SlabNodeType): HandleDescriptor<SlabNodeType>[] {
+  return [slabHeightHandle()]
+}
+
 /**
  * Slab — Phase 5 batch kind, polygon-based. Stage B: `def.geometry`
  * drives the rebuild via generic <GeometrySystem>; <ParametricNodeRenderer>
@@ -60,6 +102,7 @@ export const slabDefinition: NodeDefinition<typeof SlabNode> = {
   },
 
   parametrics: slabParametrics,
+  handles: slabHandles,
 
   // Stage D: kind-owned placement tool. Multi-click polygon drawing
   // with axis/45° snap (Shift to defeat).
diff --git a/packages/nodes/src/slab/hole-editor.tsx b/packages/nodes/src/slab/hole-editor.tsx
index 43afdeb36..7b4d0eb02 100644
--- a/packages/nodes/src/slab/hole-editor.tsx
+++ b/packages/nodes/src/slab/hole-editor.tsx
@@ -1,9 +1,9 @@
 'use client'
 
-import { resolveLevelId, type SlabNode, useScene } from '@pascal-app/core'
+import { resolveLevelId, type SlabNode, useLiveNodeOverrides, useScene } from '@pascal-app/core'
 import { PolygonEditor } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 
 /**
  * Phase 5 Stage D — slab hole editor (registry-driven).
@@ -18,6 +18,7 @@ export const SlabHoleEditor: React.FC<{ slabId: SlabNode['id']; holeIndex: numbe
 }) => {
   const slabNode = useScene((s) => s.nodes[slabId])
   const updateNode = useScene((s) => s.updateNode)
+  const markDirty = useScene((s) => s.markDirty)
   const setSelection = useViewer((s) => s.setSelection)
 
   const slab = slabNode?.type === 'slab' ? (slabNode as SlabNode) : null
@@ -34,6 +35,31 @@ export const SlabHoleEditor: React.FC<{ slabId: SlabNode['id']; holeIndex: numbe
     [slabId, holeIndex, holes, updateNode, setSelection],
   )
 
+  // Live-preview the in-flight hole onto the slab via
+  // `useLiveNodeOverrides.holes` so `GeometrySystem` rebuilds the CSG
+  // cut while the user is still dragging. Single store commit happens
+  // through `handlePolygonChange` on release.
+  const handlePolygonPreview = useCallback(
+    (preview: ReadonlyArray<readonly [number, number]> | null) => {
+      if (preview) {
+        const updatedHoles = [...holes]
+        updatedHoles[holeIndex] = preview.map(([x, z]) => [x, z] as [number, number])
+        useLiveNodeOverrides.getState().set(slabId, { holes: updatedHoles })
+      } else {
+        useLiveNodeOverrides.getState().clear(slabId)
+      }
+      markDirty(slabId)
+    },
+    [slabId, holeIndex, holes, markDirty],
+  )
+
+  useEffect(() => {
+    return () => {
+      useLiveNodeOverrides.getState().clear(slabId)
+      useScene.getState().markDirty(slabId)
+    }
+  }, [slabId])
+
   if (!(slab && hole) || hole.length < 3) return null
 
   return (
@@ -44,6 +70,7 @@ export const SlabHoleEditor: React.FC<{ slabId: SlabNode['id']; holeIndex: numbe
       levelId={resolveLevelId(slab, useScene.getState().nodes)}
       minVertices={3}
       onPolygonChange={handlePolygonChange}
+      onPolygonPreview={handlePolygonPreview}
       polygon={hole}
       surfaceHeight={slab.elevation ?? 0.05}
     />
diff --git a/packages/viewer/src/components/renderers/parametric-node-renderer.tsx b/packages/viewer/src/components/renderers/parametric-node-renderer.tsx
index edb691369..eb7d36560 100644
--- a/packages/viewer/src/components/renderers/parametric-node-renderer.tsx
+++ b/packages/viewer/src/components/renderers/parametric-node-renderer.tsx
@@ -3,6 +3,7 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  useLiveNodeOverrides,
   useLiveTransforms,
   useRegistry,
   useScene,
@@ -54,6 +55,18 @@ export const ParametricNodeRenderer = ({ node }: { node: AnyNode }) => {
   // through the type cast is safer than widening the hook signature.
   const handlers = useNodeEvents(node as any, node.type as any)
   const liveTransform = useLiveTransforms((s) => s.get(node.id as AnyNodeId))
+  // Registry arrow handles (rotation gizmo, position-affecting patches)
+  // write to `useLiveNodeOverrides`. GeometrySystem already merges that
+  // for the mesh body; we also fold it into the outer group's
+  // position/rotation so the rotation arrow shows live motion instead
+  // of snapping only on commit. Per-node subscription so unrelated
+  // override writes don't re-render the whole tree.
+  const liveOverride = useLiveNodeOverrides((s) => s.overrides.get(node.id))
+  const overrideRotation = liveOverride?.rotation as
+    | [number, number, number]
+    | number
+    | undefined
+  const overridePosition = liveOverride?.position as [number, number, number] | undefined
 
   useRegistry(node.id, node.type, ref)
 
@@ -61,13 +74,14 @@ export const ParametricNodeRenderer = ({ node }: { node: AnyNode }) => {
     useScene.getState().markDirty(node.id as AnyNodeId)
   }, [node.id])
 
-  const position = liveTransform?.position ?? n.position ?? [0, 0, 0]
+  const position = liveTransform?.position ?? overridePosition ?? n.position ?? [0, 0, 0]
+  const rawRotation = overrideRotation ?? n.rotation
   const rotation: [number, number, number] =
     liveTransform?.rotation !== undefined
       ? [0, liveTransform.rotation, 0]
-      : typeof n.rotation === 'number'
-        ? [0, n.rotation, 0]
-        : (n.rotation ?? [0, 0, 0])
+      : typeof rawRotation === 'number'
+        ? [0, rawRotation, 0]
+        : (rawRotation ?? [0, 0, 0])
 
   return (
     <group
diff --git a/packages/viewer/src/systems/ceiling/ceiling-system.tsx b/packages/viewer/src/systems/ceiling/ceiling-system.tsx
index 63da642d7..43a2aa24a 100644
--- a/packages/viewer/src/systems/ceiling/ceiling-system.tsx
+++ b/packages/viewer/src/systems/ceiling/ceiling-system.tsx
@@ -1,4 +1,10 @@
-import { type AnyNodeId, type CeilingNode, sceneRegistry, useScene } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  type CeilingNode,
+  getEffectiveNode,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
 import { useFrame } from '@react-three/fiber'
 import * as THREE from 'three'
 import { mergeSurfaceHolePolygons } from '../surface-hole-geometry'
@@ -29,7 +35,10 @@ export const CeilingSystem = () => {
 
       const mesh = sceneRegistry.nodes.get(id) as THREE.Mesh
       if (mesh) {
-        updateCeilingGeometry(node as CeilingNode, mesh)
+        // Merge any live drag override so the polygon / height resize
+        // arrow rebuilds the mesh at pointer rate — zustand only learns
+        // the final value on commit. Mirrors WallSystem / GeometrySystem.
+        updateCeilingGeometry(getEffectiveNode(node as CeilingNode), mesh)
         clearDirty(id as AnyNodeId)
       }
       // If mesh not found, keep it dirty for next frame

From c97f7029ffddb037cab33165ae777d0e2e98d26d Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Tue, 26 May 2026 23:12:55 +0530
Subject: [PATCH 36/48] roof-segment: registry handles, live override path,
 analytical-normal fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- roof-segment: width / depth / wall-height / pitch / rotation arrows; pitch
  drag back-solves the angle from peak-height via the slope frame
- roof-system: getEffectiveNode + useLiveNodeOverrides so drags rebuild
  the segment + merged shell live, commit-on-release stays a single write
- floating menu: Move icon for roof-segment; uniform EXTRA_MENU_LIFT
- skylight / solar-panel / box-vent ghost: fix analytical normal — shed
  sign flip, mansard / dutch +X face direction, gambrel + mansard tier
  awareness; one (dx·tan, 1, dz·tan) formula across all roof types

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../editor/floating-action-menu.tsx           |  14 +-
 packages/nodes/src/roof-segment/definition.ts | 171 +++++++++++++++++-
 .../solar-panel/__tests__/geometry.test.ts    |  69 +++++++
 packages/nodes/src/solar-panel/geometry.ts    | 110 ++++++++---
 .../viewer/src/systems/roof/roof-system.tsx   |  35 +++-
 5 files changed, 367 insertions(+), 32 deletions(-)

diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index c9ddcb0d1..dd225608b 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -66,6 +66,9 @@ const REF_CAMERA_DISTANCE = 12
 // World-space Y distance from a node's bbox top to the floating menu anchor.
 // Per-type because in-world chrome above the node (height-resize arrows,
 // measurement labels) varies in vertical reach.
+// `EXTRA_MENU_LIFT` is a uniform global nudge — easier to tune one
+// constant than to bump every per-type entry below.
+const EXTRA_MENU_LIFT = 0.35
 const MENU_Y_OFFSET_DEFAULT = 0.3
 const MENU_Y_OFFSETS: Record<string, number> = {
   wall: 0.5,
@@ -94,11 +97,13 @@ const MENU_Y_OFFSETS: Record<string, number> = {
 }
 
 function getMenuYOffset(node: AnyNode | null): number {
-  if (!node) return MENU_Y_OFFSET_DEFAULT
+  if (!node) return MENU_Y_OFFSET_DEFAULT + EXTRA_MENU_LIFT
   if (node.type === 'stair-segment') {
-    return MENU_Y_OFFSETS[`stair-${node.segmentType}`] ?? MENU_Y_OFFSET_DEFAULT
+    return (
+      (MENU_Y_OFFSETS[`stair-${node.segmentType}`] ?? MENU_Y_OFFSET_DEFAULT) + EXTRA_MENU_LIFT
+    )
   }
-  return MENU_Y_OFFSETS[node.type] ?? MENU_Y_OFFSET_DEFAULT
+  return (MENU_Y_OFFSETS[node.type] ?? MENU_Y_OFFSET_DEFAULT) + EXTRA_MENU_LIFT
 }
 
 export function FloatingActionMenu() {
@@ -451,7 +456,8 @@ export function FloatingActionMenu() {
                 node?.type === 'stair-segment' ||
                 node?.type === 'slab' ||
                 node?.type === 'ceiling' ||
-                node?.type === 'shelf'
+                node?.type === 'shelf' ||
+                node?.type === 'roof-segment'
                   ? handleMove
                   : undefined
               }
diff --git a/packages/nodes/src/roof-segment/definition.ts b/packages/nodes/src/roof-segment/definition.ts
index 7bc81ac7b..b019bef47 100644
--- a/packages/nodes/src/roof-segment/definition.ts
+++ b/packages/nodes/src/roof-segment/definition.ts
@@ -1,8 +1,176 @@
-import { type NodeDefinition, RoofSegmentNode as RoofSegmentNodeSchema } from '@pascal-app/core'
+import {
+  getActiveRoofHeight,
+  getPitchFromActiveRoofHeight,
+  type HandleDescriptor,
+  type NodeDefinition,
+  type RoofSegmentNode as RoofSegmentNodeType,
+  RoofSegmentNode as RoofSegmentNodeSchema,
+} from '@pascal-app/core'
 import { buildRoofSegmentFloorplan } from './floorplan'
 import { roofSegmentParametrics } from './parametrics'
 import { RoofSegmentNode } from './schema'
 
+const SIDE_HANDLE_OFFSET = 0.3
+const HEIGHT_HANDLE_OFFSET = 0.3
+const ROTATE_CORNER_OFFSET = 0.4
+const ROTATE_RING_OFFSET = 0.08
+const MIN_ROOF_DIM = 1
+const MIN_WALL_HEIGHT = 0
+// Clamp used for handle Y placement so arrows stay visible on flat /
+// wall-less segments where `wallHeight ≈ 0` would put them on the floor.
+const MIN_WALL_DISPLAY = 0.3
+// Pitch is stored in degrees on the schema; same clamp the panel applies.
+const MIN_PITCH = 0
+const MAX_PITCH = 85
+
+// Floor-to-peak height of the assembled segment. Pitch drag drives this
+// value directly and back-solves the pitch angle via the slope-frame
+// math in core.
+function getPeakHeight(n: RoofSegmentNodeType): number {
+  return n.wallHeight + getActiveRoofHeight(n)
+}
+
+// Width arrow — anchor='center' so dragging the +X side grows the full
+// footprint symmetrically (both edges move ±delta). Same idiom as the
+// elevator / column / shelf width arrow.
+function roofSegmentWidthHandle(): HandleDescriptor<RoofSegmentNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'x',
+    anchor: 'center',
+    min: MIN_ROOF_DIM,
+    currentValue: (n) => n.width,
+    apply: (_n, newValue) => ({ width: newValue }),
+    placement: {
+      position: (n) => [
+        n.width / 2 + SIDE_HANDLE_OFFSET,
+        Math.max(n.wallHeight, MIN_WALL_DISPLAY) / 2,
+        0,
+      ],
+    },
+  }
+}
+
+// Depth arrow — symmetric on the +Z side.
+function roofSegmentDepthHandle(): HandleDescriptor<RoofSegmentNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'z',
+    anchor: 'center',
+    min: MIN_ROOF_DIM,
+    currentValue: (n) => n.depth,
+    apply: (_n, newValue) => ({ depth: newValue }),
+    placement: {
+      position: (n) => [
+        0,
+        Math.max(n.wallHeight, MIN_WALL_DISPLAY) / 2,
+        n.depth / 2 + SIDE_HANDLE_OFFSET,
+      ],
+    },
+  }
+}
+
+// Wall-height arrow — `anchor: 'min'` keeps the base on the floor and
+// grows the wall upward. Placed on the -X side at the wall's top edge
+// so it doesn't stack on the centered pitch arrow when wallHeight ≈ 0
+// (flat roof / no walls).
+function roofSegmentWallHeightHandle(): HandleDescriptor<RoofSegmentNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min',
+    min: MIN_WALL_HEIGHT,
+    currentValue: (n) => n.wallHeight,
+    apply: (_n, newValue) => ({ wallHeight: newValue }),
+    placement: {
+      position: (n) => [
+        -(n.width / 2 + SIDE_HANDLE_OFFSET),
+        Math.max(n.wallHeight, MIN_WALL_DISPLAY),
+        0,
+      ],
+    },
+  }
+}
+
+// Pitch arrow — drag the peak vertically to steepen / flatten the roof.
+// The handle exposes the floor-to-peak height as its currentValue so the
+// drag delta is a meters value the user can read in the dimension chip;
+// `apply` inverts the slope-frame math (run = primary-slope footprint
+// span, rise fraction depends on roofType) to recover the pitch degrees
+// the new peak corresponds to. Clamped to the schema range [0, 85].
+//
+// Placed at the peak's center so it visually attaches to the ridge for
+// gable / hip / dutch / mansard / gambrel; on shed roofs the geometric
+// peak sits at one edge, so the arrow floats slightly inboard of the
+// ridge — acceptable as a "peak-height" affordance and matches the
+// floorplan-center origin every other handle uses.
+function roofSegmentPitchHandle(): HandleDescriptor<RoofSegmentNodeType> {
+  return {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min',
+    min: (n) => n.wallHeight,
+    currentValue: (n) => getPeakHeight(n),
+    apply: (initial, newPeakHeight) => {
+      const roofHeight = Math.max(0, newPeakHeight - initial.wallHeight)
+      const pitch = getPitchFromActiveRoofHeight({
+        roofType: initial.roofType,
+        width: initial.width,
+        depth: initial.depth,
+        roofHeight,
+        gambrelLowerWidthRatio: initial.gambrelLowerWidthRatio,
+        gambrelLowerHeightRatio: initial.gambrelLowerHeightRatio,
+        mansardSteepWidthRatio: initial.mansardSteepWidthRatio,
+        mansardSteepHeightRatio: initial.mansardSteepHeightRatio,
+        dutchHipWidthRatio: initial.dutchHipWidthRatio,
+        dutchHipHeightRatio: initial.dutchHipHeightRatio,
+      })
+      return { pitch: Math.max(MIN_PITCH, Math.min(MAX_PITCH, pitch)) }
+    },
+    placement: {
+      position: (n) => [0, getPeakHeight(n) + HEIGHT_HANDLE_OFFSET, 0],
+    },
+  }
+}
+
+// Whole-segment rotation gizmo — curved two-headed arrow at the +X / +Z
+// corner of the footprint, guide ring traces the corner-diagonal radius
+// on hover / drag. Same pattern as the elevator / column rotate gizmo;
+// roof-segment stores rotation as a scalar (radians) so the apply patch
+// just writes back the new scalar.
+function roofSegmentRotateHandle(): HandleDescriptor<RoofSegmentNodeType> {
+  return {
+    kind: 'arc-resize',
+    axis: 'angular',
+    shape: 'rotate',
+    // Negate the cursor delta to match three.js Y-rotation handedness
+    // (cursor atan2 ticks opposite-handed from `rotation-y`).
+    apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }),
+    placement: {
+      position: (n) => {
+        const halfX = n.width / 2
+        const halfZ = n.depth / 2
+        const yMid = Math.max(n.wallHeight, MIN_WALL_DISPLAY) / 2
+        return [halfX, yMid, halfZ + ROTATE_CORNER_OFFSET]
+      },
+      rotationY: () => -Math.PI / 4,
+    },
+    decoration: {
+      kind: 'ring',
+      radius: (n) => Math.hypot(n.width / 2, n.depth / 2) + ROTATE_RING_OFFSET,
+      y: (n) => Math.max(n.wallHeight, MIN_WALL_DISPLAY) / 2,
+    },
+  }
+}
+
+const roofSegmentHandles: HandleDescriptor<RoofSegmentNodeType>[] = [
+  roofSegmentWidthHandle(),
+  roofSegmentDepthHandle(),
+  roofSegmentWallHeightHandle(),
+  roofSegmentPitchHandle(),
+  roofSegmentRotateHandle(),
+]
+
 /**
  * Roof segment — Stage A. Child of a roof node, owns the per-segment
  * polygon + pitch. Geometry is generated by `RoofSystem` (registered
@@ -32,6 +200,7 @@ export const roofSegmentDefinition: NodeDefinition<typeof RoofSegmentNode> = {
   },
 
   parametrics: roofSegmentParametrics,
+  handles: roofSegmentHandles,
 
   renderer: {
     kind: 'parametric',
diff --git a/packages/nodes/src/solar-panel/__tests__/geometry.test.ts b/packages/nodes/src/solar-panel/__tests__/geometry.test.ts
index 7ef58897a..2ccf9a24b 100644
--- a/packages/nodes/src/solar-panel/__tests__/geometry.test.ts
+++ b/packages/nodes/src/solar-panel/__tests__/geometry.test.ts
@@ -87,6 +87,75 @@ describe('getAnalyticalNormal', () => {
     expect(n.z).toBeGreaterThan(0)
     expect(n.y).toBeGreaterThan(0)
   })
+  // Regression: previously `(0, depth, -rh)` flipped the shed preview's
+  // tilt opposite the actual slope (peak at -d/2, eave at +d/2 → outward
+  // normal tilts toward +Z, the low side).
+  test('shed returns normal tilted toward the +z low side', () => {
+    const n = getAnalyticalNormal(0, 0, fixtureSegment({ roofType: 'shed' }))
+    expect(n.z).toBeGreaterThan(0)
+    expect(n.y).toBeGreaterThan(0)
+  })
+  test('gambrel lower tier z=+halfD tilts toward +z', () => {
+    const seg = fixtureSegment({ roofType: 'gambrel' })
+    const n = getAnalyticalNormal(0, seg.depth / 2 - 0.01, seg)
+    expect(n.z).toBeGreaterThan(0)
+    expect(n.y).toBeGreaterThan(0)
+  })
+  test('gambrel upper tier (|z|<mz) uses shallower slope than lower tier', () => {
+    const seg = fixtureSegment({
+      roofType: 'gambrel',
+      gambrelLowerWidthRatio: 0.5,
+      gambrelLowerHeightRatio: 0.7,
+    })
+    const lower = getAnalyticalNormal(0, seg.depth / 2 - 0.01, seg)
+    const upper = getAnalyticalNormal(0, 0.01, seg)
+    // Both tilt toward +z; upper tier is shallower, so its Z component
+    // (sin θ) is smaller than the lower tier's.
+    expect(upper.z).toBeGreaterThan(0)
+    expect(upper.z).toBeLessThan(lower.z)
+  })
+  test('hip +x face tilts toward +x, not +z', () => {
+    const n = getAnalyticalNormal(2, 0, fixtureSegment({ roofType: 'hip' }))
+    expect(n.x).toBeGreaterThan(0)
+    expect(Math.abs(n.z)).toBeLessThan(1e-6)
+    expect(n.y).toBeGreaterThan(0)
+  })
+  // Regression: mansard previously fell through to gable code, ignoring
+  // the X axis. Points near the +X edge tilted toward +Z instead of +X.
+  test('mansard +x steep band tilts toward +x', () => {
+    const seg = fixtureSegment({ roofType: 'mansard' })
+    const n = getAnalyticalNormal(seg.width / 2 - 0.01, 0, seg)
+    expect(n.x).toBeGreaterThan(0)
+    expect(Math.abs(n.z)).toBeLessThan(1e-6)
+    expect(n.y).toBeGreaterThan(0)
+  })
+  test('mansard top hip (inside waist) is shallower than the steep band', () => {
+    const seg = fixtureSegment({
+      roofType: 'mansard',
+      mansardSteepWidthRatio: 0.2,
+      mansardSteepHeightRatio: 0.7,
+    })
+    const steep = getAnalyticalNormal(seg.width / 2 - 0.01, 0, seg)
+    const top = getAnalyticalNormal(0.01, 0, seg)
+    expect(top.x).toBeGreaterThan(0)
+    expect(top.x).toBeLessThan(steep.x)
+  })
+  // Regression: dutch previously fell through to gable code, ignoring
+  // the X axis. Hip ends rendered with the wrong tilt direction.
+  test('dutch +x hip end tilts toward +x (w>=d)', () => {
+    const seg = fixtureSegment({ roofType: 'dutch', width: 8, depth: 6 })
+    const n = getAnalyticalNormal(seg.width / 2 - 0.01, 0, seg)
+    expect(n.x).toBeGreaterThan(0)
+    expect(Math.abs(n.z)).toBeLessThan(1e-6)
+    expect(n.y).toBeGreaterThan(0)
+  })
+  test('dutch +z gable side tilts toward +z (w>=d)', () => {
+    const seg = fixtureSegment({ roofType: 'dutch', width: 8, depth: 6 })
+    const n = getAnalyticalNormal(0, seg.depth / 2 - 0.01, seg)
+    expect(n.z).toBeGreaterThan(0)
+    expect(Math.abs(n.x)).toBeLessThan(1e-6)
+    expect(n.y).toBeGreaterThan(0)
+  })
 })
 
 describe('computeAutoFit', () => {
diff --git a/packages/nodes/src/solar-panel/geometry.ts b/packages/nodes/src/solar-panel/geometry.ts
index 8c0198508..b11e7a7a8 100644
--- a/packages/nodes/src/solar-panel/geometry.ts
+++ b/packages/nodes/src/solar-panel/geometry.ts
@@ -1,4 +1,10 @@
-import { getActiveRoofHeight, type RoofSegmentNode, type SolarPanelNode } from '@pascal-app/core'
+import {
+  getActiveRoofHeight,
+  getSegmentSlopeFrame,
+  ROOF_SHAPE_DEFAULTS,
+  type RoofSegmentNode,
+  type SolarPanelNode,
+} from '@pascal-app/core'
 import * as THREE from 'three'
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { MeshStandardNodeMaterial } from 'three/webgpu'
@@ -217,35 +223,97 @@ export function getSurfaceY(lx: number, lz: number, seg: RoofSegmentNode): numbe
   return peakY - t * rh
 }
 
+// Outward normal for a roof surface tilting at angle θ in the horizontal
+// direction (dx, dz). Derivation: the surface tangent vectors are the
+// ridge axis (perpendicular to the fall line, horizontal) and the
+// down-slope direction (cos θ horizontal + −sin θ vertical). Crossing
+// them gives the outward normal ∝ (sin θ · dx, cos θ, sin θ · dz),
+// equivalently (dx · tan θ, 1, dz · tan θ) un-normalised.
+function buildSlopeNormal(dx: number, dz: number, tan: number): THREE.Vector3 {
+  return new THREE.Vector3(dx * tan, 1, dz * tan).normalize()
+}
+
 export function getAnalyticalNormal(lx: number, lz: number, seg: RoofSegmentNode): THREE.Vector3 {
   const { roofType, depth, width } = seg
-  const rh = getActiveRoofHeight(seg)
-  if (rh === 0) return new THREE.Vector3(0, 1, 0)
+  const slope = getSegmentSlopeFrame(seg)
+  if (slope.activeRh === 0 || slope.tanTheta === 0) {
+    return new THREE.Vector3(0, 1, 0)
+  }
+  const primaryTan = slope.tanTheta
+  const halfW = width / 2
+  const halfD = depth / 2
 
-  if (roofType === 'gable') {
-    const halfD = depth / 2
-    return new THREE.Vector3(0, halfD, lz >= 0 ? rh : -rh).normalize()
+  // Ridge runs along X — slope falls in ±Z. Gambrel shares the gable
+  // dispatch (its kink-to-eave/lower tier is the primary slope frame).
+  if (roofType === 'gable' || roofType === 'gambrel') {
+    if (roofType === 'gambrel') {
+      // Tier-aware: the upper (shallower) face spans |z| < mz; the
+      // lower (steep) face spans mz < |z| ≤ halfD. Using primaryTan on
+      // the upper tier would tilt the ghost too steeply near the ridge.
+      const lowerWidthRatio =
+        seg.gambrelLowerWidthRatio ?? ROOF_SHAPE_DEFAULTS.gambrelLowerWidthRatio
+      const lowerHeightRatio =
+        seg.gambrelLowerHeightRatio ?? ROOF_SHAPE_DEFAULTS.gambrelLowerHeightRatio
+      const mz = halfD * lowerWidthRatio
+      if (Math.abs(lz) <= mz) {
+        const upperRise = slope.activeRh * (1 - lowerHeightRatio)
+        const upperRun = mz
+        const upperTan = upperRun > 0 ? upperRise / upperRun : 0
+        return buildSlopeNormal(0, lz >= 0 ? 1 : -1, upperTan)
+      }
+    }
+    return buildSlopeNormal(0, lz >= 0 ? 1 : -1, primaryTan)
   }
+
+  // Single slope falling toward +Z (ridge at -Z, eave at +Z).
   if (roofType === 'shed') {
-    return new THREE.Vector3(0, depth, -rh).normalize()
+    return buildSlopeNormal(0, 1, primaryTan)
   }
+
+  // 4-sided slopes: the dominant axis chooses which face the point sits
+  // on. Hip is uniform across all four faces. Mansard has a steep outer
+  // band (primaryTan) and a shallow top inside the waist. Dutch has hip
+  // ends and gable sides — both share the same primaryTan from the
+  // slope frame, so directional dispatch is enough.
   if (roofType === 'hip') {
-    // All four hip faces share the same slope angle, set by `rh` over
-    // `min(w/2, d/2)` (the eave-to-ridge horizontal reach perpendicular
-    // to the ridge — short axis for both the trapezoidal long faces and
-    // the triangular short faces). Using `depth/2` for the front/back
-    // normal and `width/2` for the sides was correct only when w == d;
-    // for any other aspect ratio it tilted the long-axis faces wrong.
-    const fx = width > 0 ? Math.abs(lx) / (width / 2) : 0
-    const fz = depth > 0 ? Math.abs(lz) / (depth / 2) : 0
-    const slopeReach = Math.min(width, depth) / 2
-    if (fz >= fx) {
-      return new THREE.Vector3(0, slopeReach, lz >= 0 ? rh : -rh).normalize()
+    const fx = halfW > 0 ? Math.abs(lx) / halfW : 0
+    const fz = halfD > 0 ? Math.abs(lz) / halfD : 0
+    if (fz >= fx) return buildSlopeNormal(0, lz >= 0 ? 1 : -1, primaryTan)
+    return buildSlopeNormal(lx >= 0 ? 1 : -1, 0, primaryTan)
+  }
+
+  if (roofType === 'mansard') {
+    const widthRatio = seg.mansardSteepWidthRatio ?? ROOF_SHAPE_DEFAULTS.mansardSteepWidthRatio
+    const heightRatio = seg.mansardSteepHeightRatio ?? ROOF_SHAPE_DEFAULTS.mansardSteepHeightRatio
+    const inset = Math.min(width, depth) * widthRatio
+    const fx = halfW > 0 ? Math.abs(lx) / halfW : 0
+    const fz = halfD > 0 ? Math.abs(lz) / halfD : 0
+    const onZ = fz >= fx
+    const inSteepBand = onZ ? Math.abs(lz) > halfD - inset : Math.abs(lx) > halfW - inset
+
+    let tan = primaryTan
+    if (!inSteepBand) {
+      // Top hip (shallow) above the waist — rises from the waist
+      // rectangle at fraction `heightRatio` of activeRh up to the peak.
+      const topRise = slope.activeRh * (1 - heightRatio)
+      const topRun = Math.max(0, Math.min(halfW, halfD) - inset)
+      tan = topRun > 0 ? topRise / topRun : 0
     }
-    return new THREE.Vector3(lx >= 0 ? rh : -rh, slopeReach, 0).normalize()
+    if (onZ) return buildSlopeNormal(0, lz >= 0 ? 1 : -1, tan)
+    return buildSlopeNormal(lx >= 0 ? 1 : -1, 0, tan)
   }
-  const halfD = depth / 2
-  return new THREE.Vector3(0, halfD, lz >= 0 ? rh : -rh).normalize()
+
+  if (roofType === 'dutch') {
+    // Hip on the short-axis ends, gable on the long-axis sides. Both
+    // share the primary pitch on their primary (eave-band) face, so the
+    // approximation collapses to "pick the dominant axis."
+    const fx = halfW > 0 ? Math.abs(lx) / halfW : 0
+    const fz = halfD > 0 ? Math.abs(lz) / halfD : 0
+    if (fz >= fx) return buildSlopeNormal(0, lz >= 0 ? 1 : -1, primaryTan)
+    return buildSlopeNormal(lx >= 0 ? 1 : -1, 0, primaryTan)
+  }
+
+  return new THREE.Vector3(0, 1, 0)
 }
 
 // ─── Quaternion helper ───────────────────────────────────────────────
diff --git a/packages/viewer/src/systems/roof/roof-system.tsx b/packages/viewer/src/systems/roof/roof-system.tsx
index 7f0f449ea..55702d31f 100644
--- a/packages/viewer/src/systems/roof/roof-system.tsx
+++ b/packages/viewer/src/systems/roof/roof-system.tsx
@@ -1,6 +1,7 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  getEffectiveNode,
   getSegmentSlopeFrame,
   hasSegmentMaterialOverride,
   nodeRegistry,
@@ -8,6 +9,7 @@ import {
   type RoofSegmentNode,
   type RoofType,
   sceneRegistry,
+  useLiveNodeOverrides,
   useScene,
 } from '@pascal-app/core'
 import { useFrame } from '@react-three/fiber'
@@ -75,6 +77,11 @@ export const RoofSystem = () => {
   const dirtyNodes = useScene((state) => state.dirtyNodes)
   const clearDirty = useScene((state) => state.clearDirty)
   const rootNodeIds = useScene((state) => state.rootNodeIds)
+  // Subscribe so an override-only update (no scene write) still re-runs
+  // the component, letting the useFrame loop pick up the latest dirtyNodes
+  // set from the render pass that received the override-publishing
+  // `markDirty` call. Mirrors WallSystem / DoorSystem.
+  useLiveNodeOverrides((s) => s.overrides)
 
   useFrame(() => {
     // Clear stale pending updates when the scene is unloaded
@@ -115,12 +122,17 @@ export const RoofSystem = () => {
 
       if (node.type === 'roof-segment') {
         const mesh = sceneRegistry.nodes.get(id) as THREE.Mesh
+        // Merge any live override (width / depth / wallHeight / pitch /
+        // rotation) so the mesh rebuild reflects the in-flight handle drag
+        // without zustand churn. When no override is set this returns the
+        // scene node unchanged. Same pattern as DoorSystem / WallSystem.
+        const effectiveSegment = getEffectiveNode(node as RoofSegmentNode)
         if (mesh) {
           // Only compute expensive individual CSG when the segment is actually rendered
           // (its parent group is visible = the roof is selected for editing)
           const isVisible = mesh.parent?.visible !== false
           if (isVisible && segmentsProcessed < MAX_SEGMENTS_PER_FRAME) {
-            updateRoofSegmentGeometry(node as RoofSegmentNode, mesh)
+            updateRoofSegmentGeometry(effectiveSegment, mesh)
             segmentsProcessed++
           } else if (isVisible) {
             return // Over budget — keep dirty, process next frame
@@ -136,16 +148,20 @@ export const RoofSystem = () => {
               computeGeometryBoundsTree(placeholder)
               mesh.geometry = placeholder
             }
-            mesh.position.set(node.position[0], node.position[1], node.position[2])
-            mesh.rotation.y = node.rotation
+            mesh.position.set(
+              effectiveSegment.position[0],
+              effectiveSegment.position[1],
+              effectiveSegment.position[2],
+            )
+            mesh.rotation.y = effectiveSegment.rotation
           }
           clearDirty(id as AnyNodeId)
         } else {
           clearDirty(id as AnyNodeId)
         }
         // Queue the parent roof for a merged geometry update
-        if (node.parentId) {
-          pendingRoofUpdates.add(node.parentId as AnyNodeId)
+        if (effectiveSegment.parentId) {
+          pendingRoofUpdates.add(effectiveSegment.parentId as AnyNodeId)
         }
       } else if (node.type === 'roof') {
         pendingRoofUpdates.add(id as AnyNodeId)
@@ -211,8 +227,15 @@ function updateMergedRoofGeometry(
   // in `RoofRenderer` so the painted material is preserved. Exclude them
   // from the merged shell — otherwise the merged mesh would draw on top
   // with the roof's default material.
+  //
+  // Merge each child through `getEffectiveNode` so an in-flight handle
+  // drag (live override on width / depth / wallHeight / pitch / rotation)
+  // is reflected in the merged shell during the drag, not only on commit.
   const children = (roofNode.children ?? [])
-    .map((id) => nodes[id] as RoofSegmentNode)
+    .map((id) => {
+      const scn = nodes[id] as RoofSegmentNode | undefined
+      return scn ? getEffectiveNode(scn) : undefined
+    })
     .filter((n): n is RoofSegmentNode => Boolean(n) && !hasSegmentMaterialOverride(n))
 
   if (children.length === 0) {

From 7ddb229fc530e13973294f0c2412c182d6e59743 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Wed, 27 May 2026 01:57:01 +0530
Subject: [PATCH 37/48] floorplan: resize/rotate arrows for column, shelf,
 elevator, fence; rotation handedness fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Column / shelf / elevator: per-cross-section resize arrows in the 2D
  floor plan, matching the 3D handle set (width / depth / uniform /
  radius / brace dims), plus a corner rotate-arrow. Body move stays on
  the move-handle dot via the registry overlay's generic translate.
- Fence: floor-plan curve sagitta handle + side move-arrows + a
  body-move target (`fenceFloorplanMoveTarget`) with linked-fence
  endpoint cascade and ALT-detach. Commit strips `isNew` metadata and
  re-selects so the chrome stays visible at the new position.
- Roof-segment: floor-plan resize + rotate arrows wired through new
  affordances; `resolveSegmentFrame` aligns with the builder's
  transform so handles stay glued to the rendered footprint.
- Stair: in-world rotate gizmo bow orientation derived from the
  gizmo's position (was a stray `-π/4` that read as "pointing outward"
  on the spiral). StairSystem now merges the live override before the
  slab-elevation spatial query, so dragging the rotate gizmo no longer
  drops the group's Y when a segment swings off its pre-drag footprint.
- Rotation handedness: floor-plan now plots column / shelf /
  roof-segment at `-rotation` so SVG's CW-with-y-down `rotate`
  visually matches Three.js Y-rotation (CCW from top-down). Same
  `rotation` value rotates the same direction in both views, and the
  same cursor gesture writes the same sign — `- delta` in every rotate
  affordance, lined up with the 3D handles.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/ifc-converter/next-env.d.ts              |   2 +-
 packages/core/src/registry/registry.ts        |  15 +-
 packages/core/src/registry/types.ts           |  21 ++
 .../renderers/floorplan-registry-layer.tsx    | 157 ++++++++++
 .../editor/floating-action-menu.tsx           |   3 +-
 packages/nodes/src/column/definition.ts       |  14 +
 .../nodes/src/column/floorplan-affordances.ts | 170 +++++++++++
 packages/nodes/src/column/floorplan.ts        | 143 ++++++++-
 packages/nodes/src/elevator/definition.ts     |  16 +
 .../src/elevator/floorplan-affordances.ts     | 103 +++++++
 packages/nodes/src/elevator/floorplan.ts      | 273 ++++++++++++------
 packages/nodes/src/fence/definition.ts        |  21 +-
 .../nodes/src/fence/floorplan-affordances.ts  |  63 +++-
 packages/nodes/src/fence/floorplan-move.ts    | 180 ++++++++++++
 packages/nodes/src/fence/floorplan.ts         |  50 +++-
 packages/nodes/src/roof-segment/definition.ts |  18 +-
 .../src/roof-segment/floorplan-affordances.ts | 187 ++++++++++++
 packages/nodes/src/roof-segment/floorplan.ts  | 108 +++++--
 packages/nodes/src/shelf/definition.ts        |  10 +
 .../nodes/src/shelf/floorplan-affordances.ts  | 102 +++++++
 packages/nodes/src/shelf/floorplan.ts         | 100 ++++++-
 packages/nodes/src/stair/definition.ts        |  97 ++++++-
 .../nodes/src/stair/floorplan-affordances.ts  |  41 +++
 packages/nodes/src/stair/floorplan.ts         |  70 ++++-
 .../viewer/src/systems/stair/stair-system.tsx |  17 +-
 25 files changed, 1820 insertions(+), 161 deletions(-)
 create mode 100644 packages/nodes/src/column/floorplan-affordances.ts
 create mode 100644 packages/nodes/src/elevator/floorplan-affordances.ts
 create mode 100644 packages/nodes/src/fence/floorplan-move.ts
 create mode 100644 packages/nodes/src/roof-segment/floorplan-affordances.ts
 create mode 100644 packages/nodes/src/shelf/floorplan-affordances.ts

diff --git a/apps/ifc-converter/next-env.d.ts b/apps/ifc-converter/next-env.d.ts
index c4b7818fb..9edff1c7c 100644
--- a/apps/ifc-converter/next-env.d.ts
+++ b/apps/ifc-converter/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/packages/core/src/registry/registry.ts b/packages/core/src/registry/registry.ts
index 50021bee7..be9e30d95 100644
--- a/packages/core/src/registry/registry.ts
+++ b/packages/core/src/registry/registry.ts
@@ -28,9 +28,6 @@ class NodeRegistryImpl implements NodeRegistry {
 
   // Internal — exposed via registerNode below.
   _register(def: AnyNodeDefinition): void {
-    if (this.defs.has(def.kind)) {
-      throw new Error(`[registry] duplicate node kind: "${def.kind}" already registered`)
-    }
     if (typeof def.kind !== 'string' || def.kind.length === 0) {
       throw new Error('[registry] NodeDefinition.kind must be a non-empty string')
     }
@@ -39,6 +36,18 @@ class NodeRegistryImpl implements NodeRegistry {
         `[registry] NodeDefinition.schemaVersion must be a positive integer (kind: "${def.kind}")`,
       )
     }
+    // Replace on duplicate rather than throw. The previous behaviour
+    // (throw on `defs.has(kind)`) broke HMR for `def.ts` edits: every
+    // save would either re-execute the module and crash on the second
+    // `registerNode(...)` call, or skip the re-execute entirely and
+    // leave the running app with the original descriptor. Editing
+    // `handles` / `placement.rotationY` / etc. looked like a no-op
+    // because the old object was still pinned. In production we
+    // register each kind exactly once, so silently overwriting only
+    // matters in dev — where it's the desired behaviour.
+    if (this.defs.has(def.kind)) {
+      console.warn(`[registry] re-registering node kind "${def.kind}" (HMR)`)
+    }
     this.defs.set(def.kind, def)
   }
 
diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index b3c38525b..90f02aa9a 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -389,6 +389,27 @@ export type FloorplanGeometry =
       affordance?: string
       payload?: unknown
     }
+  /**
+   * Curved two-headed rotation arrow — the 2D counterpart of the 3D
+   * `arc-resize` handle's `shape: 'rotate'` gizmo. Visually a short arc
+   * with arrowheads at each end pointing tangentially in opposite
+   * directions, so it reads as "rotate either way" rather than "drag
+   * along a line." Always routes through an affordance (rotation has no
+   * sensible default Move semantics).
+   *
+   * `angle` is the radial-outward direction in plan coords — the icon's
+   * local +X axis points away from the pivot, with the arc curving
+   * around it. Emitters typically compute this as
+   * `atan2(handle.y − pivot.y, handle.x − pivot.x)`.
+   */
+  | {
+      kind: 'rotate-arrow'
+      point: FloorplanPoint
+      /** Radial-outward direction from the rotation pivot, in radians. */
+      angle: number
+      affordance: string
+      payload?: unknown
+    }
   /**
    * Centered length / distance label. Renders as a small rounded
    * background plate with text, oriented along `angle` (radians). The
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
index 06c9106ea..e84fb05d3 100644
--- a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
@@ -332,6 +332,74 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
 
     visit(levelId as AnyNodeId)
 
+    // Elevators live under the building (siblings of levels), not under
+    // the level — so the `visit(levelId)` DFS above never reaches them.
+    // Emit a separate pass that walks every elevator in the scene whose
+    // building contains the active level. The elevator's real
+    // `parentId` stays pointing to the building (so
+    // `resolveElevatorServiceLevelIds`, which looks up
+    // `elevator.parentId` to find the building, keeps working), but we
+    // synthesise a `GeometryContext` whose `parent` is the active level
+    // — that's what `buildElevatorFloorplan` reads via `ctx.parent?.id`
+    // to decide whether this floor is within the elevator's service
+    // range.
+    const activeLevelNode = nodes[levelId as AnyNodeId] as AnyNode | undefined
+    // The level's `parentId` is sometimes null in scenes that came from
+    // older serialisations even though the building's `children` array
+    // still contains the level id. Trust `parentId` first, then fall
+    // back to scanning buildings whose `children` include this level.
+    let activeBuildingId: AnyNodeId | null = (
+      activeLevelNode as unknown as { parentId?: AnyNodeId | null } | undefined
+    )?.parentId ?? null
+    if (!activeBuildingId && activeLevelNode) {
+      for (const [bid, candidate] of Object.entries(nodes)) {
+        if (candidate?.type !== 'building') continue
+        const cChildren = (candidate as unknown as { children?: AnyNodeId[] }).children
+        if (Array.isArray(cChildren) && cChildren.includes(levelId as AnyNodeId)) {
+          activeBuildingId = bid as AnyNodeId
+          break
+        }
+      }
+    }
+    if (activeLevelNode && activeBuildingId) {
+      for (const [id, node] of Object.entries(nodes)) {
+        if (!node || node.type !== 'elevator') continue
+        const elevatorParentId = (node as unknown as { parentId?: AnyNodeId | null }).parentId
+        if (elevatorParentId !== activeBuildingId) continue
+        const cid = id as AnyNodeId
+        const def = nodeRegistry.get(node.type)
+        const builder = def?.floorplan
+        if (!builder) continue
+        const selected = selectedIdSet.has(cid)
+        const highlighted = highlightedIdSet.has(cid)
+        const hovered = hoveredId === cid
+        const moving = movingNode?.id === cid
+        const ctx: GeometryContext = {
+          resolve: <N = AnyNode>(rid: AnyNodeId): N | undefined =>
+            nodes[rid] as N | undefined,
+          children: [],
+          siblings: [],
+          parent: activeLevelNode,
+          viewState: renderCtx?.palette
+            ? {
+                selected,
+                highlighted,
+                hovered,
+                moving,
+                palette: renderCtx.palette,
+              }
+            : undefined,
+        }
+        const geometry = (
+          builder as (n: AnyNode, c: GeometryContext) => FloorplanGeometry | null
+        )(node, ctx)
+        if (geometry) {
+          const { base, overlay } = splitFloorplanOverlay(geometry)
+          out.push({ id: cid, node, base, overlay, selected, highlighted })
+        }
+      }
+    }
+
     // Stable z-order sort. SVG renders in document order — later siblings
     // paint on top of earlier ones — so anything that should sit *under*
     // other floor-plan geometry has to come first in the entries array.
@@ -351,6 +419,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
     hoveredId,
     movingNode?.id,
     renderCtx?.palette,
+    interactiveElevators,
   ])
 
   // ── Generic 2D affordance dispatch ─────────────────────────────────
@@ -901,6 +970,93 @@ function InteractiveGeometry({
           </g>
         )
       }
+      case 'rotate-arrow': {
+        if (!palette) return <></>
+        // 2D counterpart of the 3D `arc-resize` rotate gizmo. Local
+        // frame: +X is the radial-outward direction (away from the
+        // pivot); the arc bows in that direction with arrowheads on
+        // each end pointing tangentially in opposite directions —
+        // "rotate either way."
+        const handleId = makeHandleId(nodeId, g.payload)
+        const isHovered = hoveredHandleId === handleId
+        // Arc geometry (all values precomputed for a 72° arc of
+        // radius 0.13 — comparable footprint to `move-arrow`).
+        const R = 0.13
+        const halfSpan = Math.PI / 5
+        const cosH = Math.cos(halfSpan)
+        const sinH = Math.sin(halfSpan)
+        const endY = R * sinH
+        const headLen = 0.06
+        const headHalfBase = 0.045
+        // End-1 (top) arrowhead — tip along CCW tangent.
+        const t1x = -sinH * headLen
+        const t1y = endY + cosH * headLen
+        const b1ax = cosH * headHalfBase
+        const b1ay = endY + sinH * headHalfBase
+        const b1bx = -cosH * headHalfBase
+        const b1by = endY - sinH * headHalfBase
+        // End-2 (bottom) arrowhead — mirror of End-1.
+        const t2x = -sinH * headLen
+        const t2y = -endY - cosH * headLen
+        const b2ax = cosH * headHalfBase
+        const b2ay = -endY - sinH * headHalfBase
+        const b2bx = -cosH * headHalfBase
+        const b2by = -endY + sinH * headHalfBase
+        const arcPath = `M 0 ${-endY} A ${R} ${R} 0 0 1 0 ${endY}`
+        const head1 = `M ${t1x} ${t1y} L ${b1ax} ${b1ay} L ${b1bx} ${b1by} Z`
+        const head2 = `M ${t2x} ${t2y} L ${b2ax} ${b2ay} L ${b2bx} ${b2by} Z`
+        const fill = isHovered ? '#a5b4fc' : '#8381ed'
+        const strokeWidthPx = isHovered ? 2.4 : 1.8
+        const angleDeg = (g.angle * 180) / Math.PI
+        const affordance = g.affordance
+        const payload = g.payload
+        return (
+          <g
+            key={keyHint}
+            onClick={(e) => e.stopPropagation()}
+            transform={`translate(${g.point[0]} ${g.point[1]}) rotate(${angleDeg})`}
+          >
+            <path
+              d={arcPath}
+              fill="none"
+              pointerEvents="none"
+              stroke={fill}
+              strokeLinecap="round"
+              strokeWidth={strokeWidthPx}
+              vectorEffect="non-scaling-stroke"
+            />
+            <path d={head1} fill={fill} pointerEvents="none" />
+            <path d={head2} fill={fill} pointerEvents="none" />
+            {/* Hit target — fat invisible stroke along the arc + filled
+                triangles at the heads so the user can grab anywhere on
+                the visible icon. */}
+            <path
+              d={arcPath}
+              fill="none"
+              onPointerDown={(e) =>
+                onHandlePointerDown(affordance, payload, e as ReactPointerEvent<SVGPathElement>)
+              }
+              onPointerEnter={() => onHandleHoverChange(handleId)}
+              onPointerLeave={() => onHandleHoverChange(null)}
+              pointerEvents="stroke"
+              stroke="transparent"
+              strokeWidth={0.06}
+              style={{ cursor: 'grab' }}
+            />
+            <path
+              d={`${head1} ${head2}`}
+              fill="transparent"
+              onPointerDown={(e) =>
+                onHandlePointerDown(affordance, payload, e as ReactPointerEvent<SVGPathElement>)
+              }
+              onPointerEnter={() => onHandleHoverChange(handleId)}
+              onPointerLeave={() => onHandleHoverChange(null)}
+              pointerEvents="fill"
+              style={{ cursor: 'grab' }}
+            />
+          </g>
+        )
+      }
       case 'move-arrow': {
         if (!palette) return <></>
         // Affordance-routed arrows (door width-resize) get a per-payload
@@ -1433,6 +1589,7 @@ const OVERLAY_KINDS = new Set<FloorplanGeometry['kind']>([
   'edge-handle',
   'move-handle',
   'move-arrow',
+  'rotate-arrow',
   'dimension',
   'dimension-label',
 ])
diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index dd225608b..469baa52e 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -457,7 +457,8 @@ export function FloatingActionMenu() {
                 node?.type === 'slab' ||
                 node?.type === 'ceiling' ||
                 node?.type === 'shelf' ||
-                node?.type === 'roof-segment'
+                node?.type === 'roof-segment' ||
+                node?.type === 'roof'
                   ? handleMove
                   : undefined
               }
diff --git a/packages/nodes/src/column/definition.ts b/packages/nodes/src/column/definition.ts
index 3c14d42c3..485f7c1bb 100644
--- a/packages/nodes/src/column/definition.ts
+++ b/packages/nodes/src/column/definition.ts
@@ -5,6 +5,7 @@ import {
   type NodeDefinition,
 } from '@pascal-app/core'
 import { buildColumnFloorplan } from './floorplan'
+import { columnResizeAffordance, columnRotateAffordance } from './floorplan-affordances'
 import { columnParametrics } from './parametrics'
 import { ColumnNode } from './schema'
 
@@ -338,6 +339,19 @@ export const columnDefinition: NodeDefinition<typeof ColumnNode> = {
     move: () => import('./move-tool'),
   },
   floorplan: buildColumnFloorplan,
+  // 2D drag affordances — `column-resize` handles every dimension arrow
+  // the floor-plan builder emits per cross-section / support style (the
+  // payload's `dim` field discriminates radius / uniform / width / depth
+  // / brace-width / brace-depth / spreads). `column-rotate` powers the
+  // corner rotate-arrow. Body move continues to flow through the
+  // orange move-handle dot via the registry overlay's generic
+  // free-translate path — columns don't need a kind-specific
+  // `floorplanMoveTarget` since they have no linked-cascade
+  // requirements like wall.
+  floorplanAffordances: {
+    'column-resize': columnResizeAffordance,
+    'column-rotate': columnRotateAffordance,
+  },
 
   presentation: {
     label: 'Column',
diff --git a/packages/nodes/src/column/floorplan-affordances.ts b/packages/nodes/src/column/floorplan-affordances.ts
new file mode 100644
index 000000000..d74d55d63
--- /dev/null
+++ b/packages/nodes/src/column/floorplan-affordances.ts
@@ -0,0 +1,170 @@
+import {
+  type AnyNodeId,
+  type ColumnNode,
+  type FloorplanAffordance,
+  useScene,
+} from '@pascal-app/core'
+
+// Floor minimums — mirror the 3D handles in `column/definition.ts` so a
+// drag can't push a value past what the renderer accepts.
+const MIN_COLUMN_WIDTH = 0.1
+const MIN_COLUMN_DEPTH = 0.1
+const MIN_COLUMN_RADIUS = 0.05
+const MIN_BRACE_DIMENSION = 0.04
+const MIN_BRACE_BOTTOM_SPREAD = 0.2
+const MIN_BRACE_TOP_SPREAD = 0
+
+/**
+ * One drag pattern for every column size handle. The arrow's outward
+ * direction in plan coords (`planAxis`) is captured at emit-time; the
+ * affordance projects the cursor along that axis and applies the delta
+ * to the dimension named by `dim`.
+ *
+ * Sign / factor mirror the 3D `column/definition.ts` handles:
+ *
+ *   - `width` / `depth` / `uniform` / `brace-width` / `brace-depth` /
+ *     `brace-bottom-spread` / `brace-top-spread`: `anchor: 'center'` —
+ *     a cursor delta of `d` along the outward axis grows the dimension
+ *     by `2·d` (both faces move ±d so the centre stays put).
+ *   - `radius`: `kind: 'radial-resize'` — cursor delta `d` grows the
+ *     radius by `d` (the visible edge follows the cursor 1:1).
+ */
+export type ColumnResizePayload = {
+  dim:
+    | 'width'
+    | 'depth'
+    | 'uniform'
+    | 'radius'
+    | 'brace-width'
+    | 'brace-depth'
+    | 'brace-bottom-spread'
+    | 'brace-top-spread'
+  planAxis: [number, number]
+}
+
+export const columnResizeAffordance: FloorplanAffordance<ColumnNode> = {
+  start({ node, payload, initialPlanPoint }) {
+    const { dim, planAxis } = payload as ColumnResizePayload
+    const columnId = node.id as AnyNodeId
+    const [ax, ay] = planAxis
+    const initialProj = initialPlanPoint[0] * ax + initialPlanPoint[1] * ay
+    const initialWidth = node.width
+    const initialDepth = node.depth
+    const initialRadius = node.radius
+    const initialBraceWidth = node.braceWidth ?? node.width
+    const initialBraceDepth = node.braceDepth ?? node.depth
+    const initialBraceBottomSpread =
+      node.braceBottomSpread ?? Math.max(node.width * 3, 1.2)
+    const initialBraceTopSpread = node.braceTopSpread ?? 0.12
+
+    let lastPatch: Partial<ColumnNode> = {}
+
+    const commitPatch = (patch: Partial<ColumnNode>) => {
+      lastPatch = patch
+      useScene.getState().updateNode(columnId, patch)
+    }
+
+    return {
+      affectedIds: [columnId],
+      apply({ planPoint }) {
+        const currentProj = planPoint[0] * ax + planPoint[1] * ay
+        const projDelta = currentProj - initialProj
+        switch (dim) {
+          case 'width':
+            commitPatch({
+              width: Math.max(MIN_COLUMN_WIDTH, initialWidth + 2 * projDelta),
+            })
+            return
+          case 'depth':
+            commitPatch({
+              depth: Math.max(MIN_COLUMN_DEPTH, initialDepth + 2 * projDelta),
+            })
+            return
+          case 'uniform': {
+            const next = Math.max(MIN_COLUMN_WIDTH, initialWidth + 2 * projDelta)
+            commitPatch({ width: next, depth: next })
+            return
+          }
+          case 'radius':
+            commitPatch({
+              radius: Math.max(MIN_COLUMN_RADIUS, initialRadius + projDelta),
+            })
+            return
+          case 'brace-width':
+            commitPatch({
+              braceWidth: Math.max(MIN_BRACE_DIMENSION, initialBraceWidth + 2 * projDelta),
+            })
+            return
+          case 'brace-depth':
+            commitPatch({
+              braceDepth: Math.max(MIN_BRACE_DIMENSION, initialBraceDepth + 2 * projDelta),
+            })
+            return
+          case 'brace-bottom-spread':
+            commitPatch({
+              braceBottomSpread: Math.max(
+                MIN_BRACE_BOTTOM_SPREAD,
+                initialBraceBottomSpread + 2 * projDelta,
+              ),
+            })
+            return
+          case 'brace-top-spread':
+            commitPatch({
+              braceTopSpread: Math.max(
+                MIN_BRACE_TOP_SPREAD,
+                initialBraceTopSpread + 2 * projDelta,
+              ),
+            })
+            return
+        }
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        if (Object.keys(lastPatch).length > 0) {
+          useScene.getState().updateNode(columnId, lastPatch)
+        }
+      },
+    }
+  },
+}
+
+/**
+ * Column rotation drag (floor-plan). Sister to the 3D
+ * `columnRotateHandle` (arc-resize). Same `- delta` convention as the
+ * 3D handle: the floor-plan builder plots the footprint at
+ * `-column.rotation` (see `buildColumnFloorplan`'s `rot = -node.rotation`),
+ * so the 2D view rotates the same direction as 3D for the same
+ * `rotation` value, and the same cursor gesture writes the same sign
+ * in both views.
+ */
+export const columnRotateAffordance: FloorplanAffordance<ColumnNode> = {
+  start({ node, initialPlanPoint }) {
+    const columnId = node.id as AnyNodeId
+    const initialRotation = node.rotation ?? 0
+    const cx = node.position[0]
+    const cz = node.position[2]
+    const initialAngle = Math.atan2(initialPlanPoint[1] - cz, initialPlanPoint[0] - cx)
+    let lastRotation = initialRotation
+
+    return {
+      affectedIds: [columnId],
+      apply({ planPoint }) {
+        const currentAngle = Math.atan2(planPoint[1] - cz, planPoint[0] - cx)
+        let delta = currentAngle - initialAngle
+        while (delta > Math.PI) delta -= 2 * Math.PI
+        while (delta < -Math.PI) delta += 2 * Math.PI
+        const newRotation = initialRotation - delta
+        lastRotation = newRotation
+        useScene.getState().updateNode(columnId, { rotation: newRotation })
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene.getState().updateNode(columnId, { rotation: lastRotation })
+      },
+    }
+  },
+}
diff --git a/packages/nodes/src/column/floorplan.ts b/packages/nodes/src/column/floorplan.ts
index 7b21bc61c..28fd5268d 100644
--- a/packages/nodes/src/column/floorplan.ts
+++ b/packages/nodes/src/column/floorplan.ts
@@ -4,6 +4,19 @@ import type {
   FloorplanPoint,
   GeometryContext,
 } from '@pascal-app/core'
+import type { ColumnResizePayload } from './floorplan-affordances'
+
+// Offsets for the floor-plan selection arrows. Resize chevrons hug the
+// footprint a hair off the rim; the rotate-arrow corner sits a bit
+// further out so it doesn't crowd the resize arrows.
+const RESIZE_ARROW_OFFSET = 0.12
+const ROTATE_ARROW_CORNER_OFFSET = 0.22
+
+const ROUND_CROSS_SECTIONS = new Set<ColumnNode['crossSection']>([
+  'round',
+  'octagonal',
+  'sixteen-sided',
+])
 
 /**
  * Stage C floor-plan builder for column. Inlined from the legacy
@@ -13,9 +26,9 @@ import type {
  * a-frame / x-brace / etc.) — brace supports use a rotated rectangle
  * spanning the base spread; standalone columns use the shaft profile.
  *
- * When selected, switches to a themed accent stroke and emits a move
- * handle at the column center. No dimension overlay (columns don't
- * have a natural "length" axis like a wall).
+ * When selected, switches to a themed accent stroke and emits the
+ * orange move-handle dot, four perpendicular side move-arrows for
+ * dragging the body, and a rotate-arrow at the front-right corner.
  */
 export function buildColumnFloorplan(
   node: ColumnNode,
@@ -56,12 +69,95 @@ export function buildColumnFloorplan(
     })
   }
 
-  // Move handle at the column center when selected.
+  // Selection chrome — move-handle dot at the centre (body move), one
+  // resize chevron per dimension the 3D handle set exposes (radius /
+  // uniform / width+depth or brace-width+brace-depth + per-style spread
+  // arrows), and a rotate-arrow at the front-right corner. Mirrors
+  // `column/definition.ts`'s handle selection so what users can
+  // manipulate in 3D top-view is the same in the floor plan.
   if (isSelected) {
     children.push({
       kind: 'move-handle',
       point: [node.position[0], node.position[2]],
     })
+
+    const cx = node.position[0]
+    const cz = node.position[2]
+    // Floor-plan plots at `-rotation` so SVG-CW maps to Three.js-CCW.
+    // Selection chrome (side arrows, rotate-arrow) follows the same
+    // convention so it stays glued to the rotated footprint.
+    const rot = -node.rotation
+    const emitArrowAlong = (
+      dim: ColumnResizePayload['dim'],
+      localDirection: 'x' | 'z',
+      localOffsetDistance: number,
+    ) => {
+      // Local position of the arrow's chevron tip relative to the
+      // column centre. The chevron sits a hair past the dimension's
+      // current half-extent so it never overlaps the footprint stroke.
+      const localPos: [number, number] =
+        localDirection === 'x' ? [localOffsetDistance, 0] : [0, localOffsetDistance]
+      const [worldOffsetX, worldOffsetZ] = rotatePlanVector(localPos[0], localPos[1], rot)
+      // The cursor projection axis: same direction as the arrow's
+      // outward tip in plan coords. Captured at emit-time so the
+      // affordance doesn't need to recompute `column.rotation` (and
+      // a mid-drag rotation can't drift the projection basis).
+      const outwardLocal: [number, number] =
+        localDirection === 'x' ? [1, 0] : [0, 1]
+      const [planAxisX, planAxisY] = rotatePlanVector(outwardLocal[0], outwardLocal[1], rot)
+      children.push({
+        kind: 'move-arrow',
+        point: [cx + worldOffsetX, cz + worldOffsetZ],
+        angle: Math.atan2(planAxisY, planAxisX),
+        affordance: 'column-resize',
+        payload: { dim, planAxis: [planAxisX, planAxisY] } satisfies ColumnResizePayload,
+      })
+    }
+
+    if (node.supportStyle !== 'vertical') {
+      // Brace columns — width + depth of the bracing structure. Spread
+      // arrows (top + bottom) project to the same XZ in top-view, so
+      // we only surface bracing dimensions here. The 3D set still has
+      // spread arrows at different heights.
+      const halfBraceX =
+        Math.max(
+          node.width,
+          node.braceWidth ?? 0,
+          node.braceBottomSpread ?? 0,
+          node.braceTopSpread ?? 0,
+        ) / 2
+      const halfBraceZ = Math.max(node.depth, node.braceDepth ?? 0) / 2
+      emitArrowAlong('brace-width', 'x', halfBraceX + RESIZE_ARROW_OFFSET)
+      emitArrowAlong('brace-depth', 'z', halfBraceZ + RESIZE_ARROW_OFFSET)
+    } else if (ROUND_CROSS_SECTIONS.has(node.crossSection)) {
+      // Round shafts — single radius arrow. `radial-resize` factor 1
+      // (cursor delta = radius delta), so dragging the chevron
+      // outward 1 unit grows the column by 1 unit.
+      emitArrowAlong('radius', 'x', node.radius + RESIZE_ARROW_OFFSET)
+    } else if (node.crossSection === 'square') {
+      // Square shafts — single uniform arrow that grows width + depth
+      // together (matches 3D `columnUniformHandle`).
+      emitArrowAlong('uniform', 'x', node.width / 2 + RESIZE_ARROW_OFFSET)
+    } else {
+      // Rectangular — independent width + depth arrows.
+      emitArrowAlong('width', 'x', node.width / 2 + RESIZE_ARROW_OFFSET)
+      emitArrowAlong('depth', 'z', node.depth / 2 + RESIZE_ARROW_OFFSET)
+    }
+
+    // Rotate-arrow at the +X / +Z corner — matches the 3D
+    // `columnRotateHandle` corner placement so users see the rotation
+    // affordance in the same quadrant across views.
+    const { halfX, halfZ } = columnPlanHalfExtents(node)
+    const cornerLocalX = halfX + ROTATE_ARROW_CORNER_OFFSET
+    const cornerLocalZ = halfZ + ROTATE_ARROW_CORNER_OFFSET
+    const [cornerWorldX, cornerWorldZ] = rotatePlanVector(cornerLocalX, cornerLocalZ, rot)
+    const [radialX, radialZ] = rotatePlanVector(1, 1, rot)
+    children.push({
+      kind: 'rotate-arrow',
+      point: [cx + cornerWorldX, cz + cornerWorldZ],
+      angle: Math.atan2(radialZ, radialX),
+      affordance: 'column-rotate',
+    })
   }
 
   return { kind: 'group', children }
@@ -71,6 +167,39 @@ export function buildColumnFloorplan(
 
 type PlanPoint = { x: number; y: number }
 
+/**
+ * XZ half-extents for the column's plan footprint. Mirrors the 3D
+ * `columnFootprintHalf` so side-arrows + rotate-arrow ring the same
+ * bounding box the in-world handles use. Vertical supports read the
+ * shaft geometry; non-vertical supports use the widest brace bound so
+ * arrows clear the splay.
+ */
+function columnPlanHalfExtents(column: ColumnNode): { halfX: number; halfZ: number } {
+  if (column.supportStyle !== 'vertical') {
+    return {
+      halfX:
+        Math.max(
+          column.width,
+          column.braceWidth ?? 0,
+          column.braceBottomSpread ?? 0,
+          column.braceTopSpread ?? 0,
+        ) / 2,
+      halfZ: Math.max(column.depth, column.braceDepth ?? 0) / 2,
+    }
+  }
+  if (
+    column.crossSection === 'round' ||
+    column.crossSection === 'octagonal' ||
+    column.crossSection === 'sixteen-sided'
+  ) {
+    return { halfX: column.radius, halfZ: column.radius }
+  }
+  if (column.crossSection === 'square') {
+    return { halfX: column.width / 2, halfZ: column.width / 2 }
+  }
+  return { halfX: column.width / 2, halfZ: column.depth / 2 }
+}
+
 function rotatePlanVector(x: number, y: number, rotation: number): [number, number] {
   const c = Math.cos(rotation)
   const s = Math.sin(rotation)
@@ -147,7 +276,7 @@ function getColumnPlanFootprint(column: ColumnNode): PlanPoint[] {
       column.braceDepth ?? column.depth,
       0.08,
     )
-    return getRotatedRectanglePolygon(center, width, depth, column.rotation)
+    return getRotatedRectanglePolygon(center, width, depth, -column.rotation)
   }
 
   // Standalone column: shaft profile expanded for base + capital.
@@ -169,7 +298,7 @@ function getColumnPlanFootprint(column: ColumnNode): PlanPoint[] {
   )
 
   if (column.crossSection === 'square' || column.crossSection === 'rectangular') {
-    return getRotatedRectanglePolygon(center, width, depth, column.rotation)
+    return getRotatedRectanglePolygon(center, width, depth, -column.rotation)
   }
 
   const segmentCount =
@@ -179,7 +308,7 @@ function getColumnPlanFootprint(column: ColumnNode): PlanPoint[] {
     const angle = (index / segmentCount) * Math.PI * 2
     const localX = Math.cos(angle) * (width / 2)
     const localY = Math.sin(angle) * (depth / 2)
-    const [offsetX, offsetY] = rotatePlanVector(localX, localY, column.rotation)
+    const [offsetX, offsetY] = rotatePlanVector(localX, localY, -column.rotation)
     return { x: center.x + offsetX, y: center.y + offsetY }
   })
 }
diff --git a/packages/nodes/src/elevator/definition.ts b/packages/nodes/src/elevator/definition.ts
index c3b24602c..948790c9a 100644
--- a/packages/nodes/src/elevator/definition.ts
+++ b/packages/nodes/src/elevator/definition.ts
@@ -10,6 +10,10 @@ import {
   type NodeDefinition,
   resolveElevatorLevels,
 } from '@pascal-app/core'
+import {
+  elevatorResizeAffordance,
+  elevatorRotateAffordance,
+} from './floorplan-affordances'
 import { buildElevatorFloorplan } from './floorplan'
 import { elevatorParametrics } from './parametrics'
 import { ElevatorNode } from './schema'
@@ -160,6 +164,11 @@ export const elevatorDefinition: NodeDefinition<typeof ElevatorNode> = {
 
   capabilities: {
     selectable: { hitVolume: 'bbox' },
+    // Generic XZ translate so the floating action menu's Move button
+    // (and the side move-arrows emitted from `def.floorplan`) drive the
+    // 2D body-move flow through `FloorplanRegistryMoveOverlay`'s
+    // Path 2 — position[0] / position[2] update with a 0.5m grid snap.
+    movable: { axes: ['x', 'z'], gridSnap: true },
     duplicable: true,
     deletable: true,
   },
@@ -176,6 +185,13 @@ export const elevatorDefinition: NodeDefinition<typeof ElevatorNode> = {
     priority: 3,
   },
   floorplan: buildElevatorFloorplan,
+  // 2D drag affordance for the rotate-arrow emitted at the elevator's
+  // front-right corner. Body move uses the generic move-arrow / move-
+  // handle path emitted by the floor-plan builder.
+  floorplanAffordances: {
+    'elevator-resize': elevatorResizeAffordance,
+    'elevator-rotate': elevatorRotateAffordance,
+  },
 
   presentation: {
     label: 'Elevator',
diff --git a/packages/nodes/src/elevator/floorplan-affordances.ts b/packages/nodes/src/elevator/floorplan-affordances.ts
new file mode 100644
index 000000000..253edb712
--- /dev/null
+++ b/packages/nodes/src/elevator/floorplan-affordances.ts
@@ -0,0 +1,103 @@
+import {
+  type AnyNodeId,
+  type ElevatorNode,
+  type FloorplanAffordance,
+  useScene,
+} from '@pascal-app/core'
+
+const MIN_ELEVATOR_DIM = 0.6
+
+type ElevatorResizePayload = { axis: 'x' | 'z'; side: 1 | -1 }
+
+/**
+ * Elevator width / depth drag (floor-plan). Mirrors the 3D
+ * `linear-resize` handles declared in `definition.ts` — `anchor: 'center'`
+ * means dragging outward on either +X or -X edge grows `width` by 2×
+ * the elevator-local cursor offset while `position` stays put. Same for
+ * +Z / -Z and `depth`. Writes directly to scene each tick (door pattern);
+ * the registry dispatcher snapshots / pauses history at start so the
+ * per-tick writes collapse into one undoable entry on commit.
+ */
+export const elevatorResizeAffordance: FloorplanAffordance<ElevatorNode> = {
+  start({ node, payload, initialPlanPoint }) {
+    const { axis, side } = payload as ElevatorResizePayload
+    const elevatorId = node.id as AnyNodeId
+    const initialValue = axis === 'x' ? node.width : node.depth
+    const cx = node.position[0]
+    const cz = node.position[2]
+    const rotation = node.rotation ?? 0
+    const cos = Math.cos(rotation)
+    const sin = Math.sin(rotation)
+    // Inverse of the elevator's local→plan rotation. The plan-space
+    // matrix is `[c, s; -s, c]`; its inverse is `[c, -s; s, c]`.
+    const projectLocalAxis = (px: number, pz: number): number => {
+      const lx = (px - cx) * cos - (pz - cz) * sin
+      const ly = (px - cx) * sin + (pz - cz) * cos
+      return axis === 'x' ? lx : ly
+    }
+    const initialLocal = projectLocalAxis(initialPlanPoint[0], initialPlanPoint[1])
+    let lastValue = initialValue
+
+    return {
+      affectedIds: [elevatorId],
+      apply({ planPoint }) {
+        const currentLocal = projectLocalAxis(planPoint[0], planPoint[1])
+        // `side` is +1 for the +axis arrow, -1 for the -axis arrow.
+        // Pointer delta along the arrow's outward direction grows the
+        // full span 2× (centre anchor).
+        const delta = (currentLocal - initialLocal) * side
+        const newValue = Math.max(MIN_ELEVATOR_DIM, initialValue + 2 * delta)
+        lastValue = newValue
+        useScene
+          .getState()
+          .updateNode(elevatorId, axis === 'x' ? { width: newValue } : { depth: newValue })
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene
+          .getState()
+          .updateNode(elevatorId, axis === 'x' ? { width: lastValue } : { depth: lastValue })
+      },
+    }
+  },
+}
+
+/**
+ * Elevator rotation drag (floor-plan). Sister to the 3D `arc-resize`
+ * handle declared in `definition.ts`. Same `- delta` sign convention as
+ * the 3D path so dragging the cursor in the same direction in both views
+ * produces the same rotation. Writes directly to scene during the drag;
+ * the registry dispatcher captures a snapshot first and re-applies the
+ * single tracked update on pointer-up.
+ */
+export const elevatorRotateAffordance: FloorplanAffordance<ElevatorNode> = {
+  start({ node, initialPlanPoint }) {
+    const elevatorId = node.id as AnyNodeId
+    const initialRotation = node.rotation ?? 0
+    const cx = node.position[0]
+    const cz = node.position[2]
+    const initialAngle = Math.atan2(initialPlanPoint[1] - cz, initialPlanPoint[0] - cx)
+    let lastRotation = initialRotation
+
+    return {
+      affectedIds: [elevatorId],
+      apply({ planPoint }) {
+        const currentAngle = Math.atan2(planPoint[1] - cz, planPoint[0] - cx)
+        let delta = currentAngle - initialAngle
+        while (delta > Math.PI) delta -= 2 * Math.PI
+        while (delta < -Math.PI) delta += 2 * Math.PI
+        const newRotation = initialRotation - delta
+        lastRotation = newRotation
+        useScene.getState().updateNode(elevatorId, { rotation: newRotation })
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene.getState().updateNode(elevatorId, { rotation: lastRotation })
+      },
+    }
+  },
+}
diff --git a/packages/nodes/src/elevator/floorplan.ts b/packages/nodes/src/elevator/floorplan.ts
index 8fdfa492a..a2da8d9df 100644
--- a/packages/nodes/src/elevator/floorplan.ts
+++ b/packages/nodes/src/elevator/floorplan.ts
@@ -10,33 +10,26 @@ import {
 } from '@pascal-app/core'
 
 /**
- * Stage C floor-plan emitter for elevator. Renders:
+ * Stage C floor-plan emitter for elevator. Architectural symbol style:
  *
- *  - **Outer shaft footprint** — rotated rectangle (cab + wall thickness).
- *  - **Cab indicator** — inner rectangle showing the cab's position within
- *    the shaft. Highlighted when `runtime.currentLevelId` matches the
- *    active level (i.e. the car is *on this floor*).
- *  - **Door opening indicator** — a short marker on the front face
- *    spanning `doorWidth` so users can see which way the doors open.
- *  - **Selection / target / queued chrome** — selection stroke when
- *    the elevator is selected, accent stroke when the runtime targets
- *    this level (cab is travelling here) or this level is queued.
+ *  - **Outer shaft outline** — outer face of the shaft wall.
+ *  - **Inner shaft outline** — inner face of the shaft wall, offset
+ *    inward by `shaftWallThickness`. The two outlines together read as
+ *    a hollow wall in plan.
+ *  - **Dashed X** — two diagonals across the shaft interior, the
+ *    universal architectural mark for an elevator cab.
+ *  - **Door opening** — two small jamb stubs flanking the opening at
+ *    the front face, with a dashed line spanning the opening (the
+ *    closed door).
+ *  - **Selection / runtime chrome** — selected → palette stroke;
+ *    cab-on-level → green tint on the X; target/queued → sky accent.
  *
- * Reads the elevator's live state via `useLiveNodeOverrides.getState()`
- * (inspector edits) and `useInteractive.getState().elevators[id]`
- * (runtime cab travel). Those reads are non-reactive on their own —
- * `FloorplanRegistryLayer` subscribes to both stores so the layer
- * re-renders when they change, propagating into this builder.
- *
- * Per-level served-level chips (the small floor-label badges on each
- * shaft side) are not emitted yet — they need an HTML-overlay primitive
- * in `FloorplanGeometry` to render properly (SVG `<text>` rotates with
- * the plan, which mangles label legibility). Tracked as follow-up; the
- * legacy `<FloorplanElevatorLayer>` still renders the chips for
- * pre-registry builds while we figure out the right primitive shape.
+ * Reads live overrides (`useLiveNodeOverrides`) and runtime cab state
+ * (`useInteractive.elevators[id]`) non-reactively; the registry layer
+ * subscribes to both stores so this builder re-runs on change.
  */
 
-const STAGE_LEVEL_FILTER_HIDE = true
+const STAGE_LEVEL_FILTER_HIDE = false
 
 export function buildElevatorFloorplan(
   node: ElevatorNode,
@@ -65,9 +58,11 @@ export function buildElevatorFloorplan(
   const cabDepth = Math.max(display.depth, 0.8)
   const shaftWidth = Math.max(display.shaftWidth ?? display.width, cabWidth, 0.8)
   const shaftDepth = Math.max(display.shaftDepth ?? display.depth, cabDepth, 0.8)
-  const doorWidth = Math.min(Math.max(display.doorWidth, 0.45), cabWidth - 0.18, shaftWidth - 0.18)
-  const halfWidth = Math.max(0.1, shaftWidth / 2 + wallThickness)
-  const halfDepth = Math.max(0.1, shaftDepth / 2 + wallThickness)
+  const doorWidth = Math.min(Math.max(display.doorWidth, 0.45), shaftWidth - 0.24)
+  const outerHalfW = Math.max(0.1, shaftWidth / 2 + wallThickness)
+  const outerHalfD = Math.max(0.1, shaftDepth / 2 + wallThickness)
+  const innerHalfW = Math.max(0.05, shaftWidth / 2)
+  const innerHalfD = Math.max(0.05, shaftDepth / 2)
 
   const center = { x: display.position[0], y: display.position[2] }
   const cos = Math.cos(display.rotation)
@@ -78,35 +73,16 @@ export function buildElevatorFloorplan(
     // uses this matrix and not the standard counter-clockwise one.
     return [lx * cos + ly * sin, -lx * sin + ly * cos]
   }
-
-  // Outer shaft footprint corners.
-  const outerCorners: Array<readonly [number, number]> = [
-    [-halfWidth, -halfDepth],
-    [halfWidth, -halfDepth],
-    [halfWidth, halfDepth],
-    [-halfWidth, halfDepth],
-  ]
-  const outerPoints: FloorplanPoint[] = outerCorners.map(([lx, ly]) => {
+  const toPlan = (lx: number, ly: number): FloorplanPoint => {
     const [rx, ry] = rotate(lx, ly)
     return [center.x + rx, center.y + ry]
-  })
-
-  // Cab inner rectangle. The cab sits flush against the front face
-  // (-Z in local coords) so its center is `-shaftDepth/2 + cabDepth/2`
-  // away from shaft center.
-  const cabCenterLocalY = -shaftDepth / 2 + cabDepth / 2
-  const cabHalfW = cabWidth / 2
-  const cabHalfD = cabDepth / 2
-  const cabCorners: Array<readonly [number, number]> = [
-    [-cabHalfW, cabCenterLocalY - cabHalfD],
-    [cabHalfW, cabCenterLocalY - cabHalfD],
-    [cabHalfW, cabCenterLocalY + cabHalfD],
-    [-cabHalfW, cabCenterLocalY + cabHalfD],
+  }
+  const rectPoints = (halfW: number, halfD: number): FloorplanPoint[] => [
+    toPlan(-halfW, -halfD),
+    toPlan(halfW, -halfD),
+    toPlan(halfW, halfD),
+    toPlan(-halfW, halfD),
   ]
-  const cabPoints: FloorplanPoint[] = cabCorners.map(([lx, ly]) => {
-    const [rx, ry] = rotate(lx, ly)
-    return [center.x + rx, center.y + ry]
-  })
 
   // Runtime state — current level / target level / queued.
   const runtime = useInteractive.getState().elevators[node.id]
@@ -122,63 +98,120 @@ export function buildElevatorFloorplan(
   const isHighlighted = view?.highlighted ?? false
   const showSelectedChrome = isSelected || isHighlighted
 
-  // Stroke selection — selected wins, then runtime target / queued
-  // states get the accent palette colour so users can spot "the cab is
-  // coming here" at a glance.
-  const stroke =
-    showSelectedChrome && palette
-      ? palette.selectedStroke
-      : isTargetLevel || isQueuedLevel
-        ? '#0ea5e9'
-        : '#475569'
-  // Shaft fill — orange when selected, light slate otherwise. When the
-  // car is *on this level*, the cab indicator inside gets the highlight
-  // instead of the whole shaft (more legible).
-  const shaftFill = showSelectedChrome ? '#fed7aa' : '#cbd5e1'
-  const cabFill = isCarOnLevel ? '#22c55e' : showSelectedChrome ? '#fef3c7' : '#e2e8f0'
-  const cabStroke = isCarOnLevel ? '#15803d' : '#475569'
+  // Base ink: near-black architectural outline. Selection switches to
+  // the palette accent. Runtime state (car-on-level, target, queued)
+  // is conveyed via the served-level chip column when selected, not
+  // the main outline — so the floor-plan symbol stays neutral and
+  // matches the line weight of the other architectural elements.
+  const baseInk = '#111111'
+  const stroke = showSelectedChrome && palette ? palette.selectedStroke : baseInk
+  const cabMarkInk = stroke
 
   const children: FloorplanGeometry[] = []
 
-  // Outer shaft.
+  // Invisible hit-target — closed polygon over the full outer
+  // footprint so clicks anywhere inside the elevator (not just on the
+  // stroked outlines) select the node. The outer outline below is a
+  // polyline with `fill='none'`, so without this layer the interior
+  // would fall through to whatever sits beneath.
   children.push({
     kind: 'polygon',
-    points: outerPoints,
-    fill: shaftFill,
+    points: rectPoints(outerHalfW, outerHalfD),
+    fill: stroke,
+    fillOpacity: 0,
+    stroke: 'none',
+    strokeWidth: 0,
+    pointerEvents: 'all',
+  })
+
+  // Door geometry. The jambs are little U-shaped notches that hang
+  // BELOW the outer wall's bottom edge on either side of the door
+  // opening; the outer outline traces around them and breaks for the
+  // door in the middle.
+  const doorY = -outerHalfD
+  const effectiveDoorWidth = Math.min(doorWidth, innerHalfW * 2 - 0.16)
+  const jambInnerX = effectiveDoorWidth / 2
+  const jambWidth = Math.max(0.08, Math.min(wallThickness * 2.2, (outerHalfW - jambInnerX) * 0.55))
+  const jambOuterX = Math.min(jambInnerX + jambWidth, outerHalfW - 0.04)
+  const jambStubDepth = Math.max(0.06, wallThickness * 1.05)
+
+  // Outer outline — single polyline that traces clockwise from the
+  // left edge of the door opening, around the left jamb stub, along
+  // the bottom-left segment, up the left side, across the top, down
+  // the right side, along the bottom-right segment, around the right
+  // jamb stub, ending at the right edge of the door opening. The two
+  // endpoints frame the door gap; SVG `polyline` doesn't close.
+  const outerOutline: FloorplanPoint[] = [
+    toPlan(-jambInnerX, doorY),
+    toPlan(-jambInnerX, doorY - jambStubDepth),
+    toPlan(-jambOuterX, doorY - jambStubDepth),
+    toPlan(-jambOuterX, doorY),
+    toPlan(-outerHalfW, doorY),
+    toPlan(-outerHalfW, outerHalfD),
+    toPlan(outerHalfW, outerHalfD),
+    toPlan(outerHalfW, doorY),
+    toPlan(jambOuterX, doorY),
+    toPlan(jambOuterX, doorY - jambStubDepth),
+    toPlan(jambInnerX, doorY - jambStubDepth),
+    toPlan(jambInnerX, doorY),
+  ]
+  children.push({
+    kind: 'polyline',
+    points: outerOutline,
+    fill: 'none',
     stroke,
-    strokeWidth: showSelectedChrome ? 0.04 : 0.03,
-    strokeLinejoin: 'round',
-    opacity: 0.85,
+    strokeWidth: showSelectedChrome ? 0.035 : 0.025,
+    strokeLinejoin: 'miter',
+    strokeLinecap: 'butt',
   })
 
-  // Cab inner rectangle.
+  // Inner outline — closed rectangle, the inner face of the shaft.
+  // The X diagonals terminate at its corners.
   children.push({
     kind: 'polygon',
-    points: cabPoints,
-    fill: cabFill,
-    fillOpacity: isCarOnLevel ? 0.85 : 0.55,
-    stroke: cabStroke,
-    strokeWidth: 0.018,
-    strokeLinejoin: 'round',
-    opacity: 0.92,
+    points: rectPoints(innerHalfW, innerHalfD),
+    fill: 'none',
+    stroke,
+    strokeWidth: 0.02,
+    strokeLinejoin: 'miter',
   })
 
-  // Door opening indicator — a short line on the front edge centered
-  // on the cab. The legacy renders a more complex slide / center-open
-  // hint; this is the minimum useful signal.
-  const doorY = -halfDepth
-  const [doorStartX, doorStartY] = rotate(-doorWidth / 2, doorY)
-  const [doorEndX, doorEndY] = rotate(doorWidth / 2, doorY)
+  // Dashed X across the shaft interior — corner-to-corner of the
+  // inner rectangle, the universal elevator-cab mark.
+  const diagonals: Array<readonly [FloorplanPoint, FloorplanPoint]> = [
+    [toPlan(-innerHalfW, -innerHalfD), toPlan(innerHalfW, innerHalfD)],
+    [toPlan(innerHalfW, -innerHalfD), toPlan(-innerHalfW, innerHalfD)],
+  ]
+  for (const [start, end] of diagonals) {
+    children.push({
+      kind: 'line',
+      x1: start[0],
+      y1: start[1],
+      x2: end[0],
+      y2: end[1],
+      stroke: cabMarkInk,
+      strokeWidth: 0.018,
+      strokeDasharray: '0.08 0.06',
+      strokeLinecap: 'butt',
+      opacity: 0.85,
+    })
+  }
+
+  // Dashed door line — sits on the outer wall line, spanning the gap
+  // between the two jamb stubs.
+  const doorStart = toPlan(-jambInnerX, doorY)
+  const doorEnd = toPlan(jambInnerX, doorY)
   children.push({
     kind: 'line',
-    x1: center.x + doorStartX,
-    y1: center.y + doorStartY,
-    x2: center.x + doorEndX,
-    y2: center.y + doorEndY,
-    stroke: isCarOnLevel ? '#15803d' : '#0f172a',
-    strokeWidth: 0.05,
-    strokeLinecap: 'round',
-    opacity: 0.92,
+    x1: doorStart[0],
+    y1: doorStart[1],
+    x2: doorEnd[0],
+    y2: doorEnd[1],
+    stroke: cabMarkInk,
+    strokeWidth: 0.02,
+    strokeDasharray: '0.08 0.06',
+    strokeLinecap: 'butt',
+    opacity: 0.9,
   })
 
   // Served-level chips — vertical column of marker circles + level
@@ -194,7 +227,7 @@ export function buildElevatorFloorplan(
       const serviceOnlyLevelIds = new Set(display.serviceOnlyLevelIds ?? [])
       const rangeStep = 0.18
       const rangeHeight = Math.max(0, (serviceLevelIds.length - 1) * rangeStep)
-      const [rangeOffsetX, rangeOffsetY] = rotate(halfWidth + 0.38, 0)
+      const [rangeOffsetX, rangeOffsetY] = rotate(outerHalfW + 0.38, 0)
       const rangeX = center.x + rangeOffsetX
       const rangeBottomY = center.y + rangeOffsetY + rangeHeight / 2
       const rangeTopY = center.y + rangeOffsetY - rangeHeight / 2
@@ -265,11 +298,59 @@ export function buildElevatorFloorplan(
     }
   }
 
+  // Selection chrome — orange move-handle dot at the centre, four
+  // perpendicular side resize-arrows ringing the outer shaft, and a
+  // rotate-arrow at the front-right corner. Side arrows drive `width`
+  // (X-axis) and `depth` (Z-axis) through `elevatorResizeAffordance`
+  // with `anchor: 'center'` — sister of the 3D `linear-resize` handles
+  // in `definition.ts`. Body move is reached via the centroid dot or
+  // the floating action menu's Move button.
   if (isSelected) {
     children.push({
       kind: 'move-handle',
       point: [display.position[0], display.position[2]],
     })
+
+    const sideArrowOffset = 0.12
+    const rotateCornerOffset = 0.22
+    const cx = display.position[0]
+    const cz = display.position[2]
+    const sides: Array<{
+      local: [number, number]
+      localAngle: number
+      axis: 'x' | 'z'
+      side: 1 | -1
+    }> = [
+      { local: [outerHalfW + sideArrowOffset, 0], localAngle: 0, axis: 'x', side: 1 },
+      { local: [-(outerHalfW + sideArrowOffset), 0], localAngle: Math.PI, axis: 'x', side: -1 },
+      { local: [0, outerHalfD + sideArrowOffset], localAngle: Math.PI / 2, axis: 'z', side: 1 },
+      { local: [0, -(outerHalfD + sideArrowOffset)], localAngle: -Math.PI / 2, axis: 'z', side: -1 },
+    ]
+    for (const side of sides) {
+      const [ox, oz] = rotate(side.local[0], side.local[1])
+      const [tx, tz] = rotate(Math.cos(side.localAngle), Math.sin(side.localAngle))
+      children.push({
+        kind: 'move-arrow',
+        point: [cx + ox, cz + oz],
+        angle: Math.atan2(tz, tx),
+        affordance: 'elevator-resize',
+        payload: { axis: side.axis, side: side.side },
+      })
+    }
+
+    // Rotate-arrow at the +X / +Z corner. `localAngle = π/4` puts the
+    // curved arrow's bow at the diagonal corner so it reads as a
+    // rotation gizmo around the elevator centre.
+    const cornerLocalX = outerHalfW + rotateCornerOffset
+    const cornerLocalZ = outerHalfD + rotateCornerOffset
+    const [cornerX, cornerZ] = rotate(cornerLocalX, cornerLocalZ)
+    const [radialX, radialZ] = rotate(1, 1)
+    children.push({
+      kind: 'rotate-arrow',
+      point: [cx + cornerX, cz + cornerZ],
+      angle: Math.atan2(radialZ, radialX),
+      affordance: 'elevator-rotate',
+    })
   }
 
   return { kind: 'group', children }
diff --git a/packages/nodes/src/fence/definition.ts b/packages/nodes/src/fence/definition.ts
index be431e953..bc61ada5d 100644
--- a/packages/nodes/src/fence/definition.ts
+++ b/packages/nodes/src/fence/definition.ts
@@ -4,7 +4,8 @@ import {
   type NodeDefinition,
 } from '@pascal-app/core'
 import { buildFenceFloorplan } from './floorplan'
-import { fenceMoveEndpointAffordance } from './floorplan-affordances'
+import { fenceCurveAffordance, fenceMoveEndpointAffordance } from './floorplan-affordances'
+import { fenceFloorplanMoveTarget } from './floorplan-move'
 import { buildFenceGeometry } from './geometry'
 import { fenceParametrics } from './parametrics'
 import { FenceNode } from './schema'
@@ -189,13 +190,23 @@ export const fenceDefinition: NodeDefinition<typeof FenceNode> = {
   // Legacy `floorplanFenceEntries` short-circuits to [] when fence is
   // registered (see floorplan-panel.tsx).
   floorplan: buildFenceFloorplan,
-  // 2D drag affordance — sister to `actions/move-endpoint.ts`. The 3D
-  // DragAction drives R3F grid events through `createDragSession`; this
-  // one drives SVG pointer events through the floor-plan registry
-  // dispatcher's snapshot + single-undo dance. Same legacy semantics.
+  // 2D drag affordances — sister to `actions/move-endpoint.ts`. The 3D
+  // DragAction drives R3F grid events through `createDragSession`; these
+  // drive SVG pointer events through the floor-plan registry
+  // dispatcher's snapshot + single-undo dance. `move-endpoint` keeps the
+  // legacy fence endpoint semantics; `curve` mirrors the wall sagitta
+  // drag (publishes `curveOffset` overrides per tick, commits on
+  // pointer-up).
   floorplanAffordances: {
     'move-endpoint': fenceMoveEndpointAffordance,
+    curve: fenceCurveAffordance,
   },
+  // Body move on the fence is driven by the two `move-arrow` chevrons
+  // the floor-plan builder emits at the midpoint. Pointer-down enters
+  // movingNode mode; the registry overlay routes through this target
+  // for the live preview + commit. Translates the dragged fence and
+  // cascades the shared endpoints of any linked fences, ALT detaches.
+  floorplanMoveTarget: fenceFloorplanMoveTarget,
   // Stage D — all four fence drag-affordances live in this folder.
   // curve / move-endpoint / move are 1:1 ports of the legacy tools
   // (same snap pipeline, same history dance, same cursor render),
diff --git a/packages/nodes/src/fence/floorplan-affordances.ts b/packages/nodes/src/fence/floorplan-affordances.ts
index 9624392ba..13249ce73 100644
--- a/packages/nodes/src/fence/floorplan-affordances.ts
+++ b/packages/nodes/src/fence/floorplan-affordances.ts
@@ -4,10 +4,20 @@ import {
   type FenceNode,
   type FloorplanAffordance,
   type FloorplanAffordanceSession,
+  getMaxWallCurveOffset,
+  getWallChordFrame,
+  normalizeWallCurveOffset,
+  useLiveNodeOverrides,
   useScene,
   type WallNode,
 } from '@pascal-app/core'
-import { type FencePlanPoint, isWallLongEnough, snapFenceDraftPoint } from '@pascal-app/editor'
+import {
+  type FencePlanPoint,
+  getWallGridStep,
+  isWallLongEnough,
+  snapFenceDraftPoint,
+  snapScalarToGrid,
+} from '@pascal-app/editor'
 
 /**
  * Floor-plan 2D drag affordances for fence — sister to the 3D
@@ -70,6 +80,57 @@ function collectLinkedFences(
   return out
 }
 
+/**
+ * Fence curve sagitta drag — 1:1 mirror of `wallCurveAffordance`. Drag
+ * projects the pointer onto the chord normal to compute `curveOffset`,
+ * snaps to grid (Shift bypasses), clamps to `getMaxWallCurveOffset`,
+ * normalizes via `normalizeWallCurveOffset`. Same single-undo dance — the
+ * dispatcher handles snapshot / pause / resume around `apply`. Lives in
+ * the same file as the endpoint affordance to keep the two fence
+ * floor-plan drags side-by-side (both publish to `useLiveNodeOverrides`,
+ * both committed on pointer-up).
+ */
+export const fenceCurveAffordance: FloorplanAffordance<FenceNode> = {
+  start({ node }): FloorplanAffordanceSession {
+    const chord = getWallChordFrame(node)
+    const maxOffset = getMaxWallCurveOffset(node)
+    const fenceId = node.id as AnyNodeId
+    let lastCurveOffset = node.curveOffset ?? 0
+
+    return {
+      affectedIds: [node.id],
+      apply({ planPoint, modifiers }) {
+        const snapStep = getWallGridStep()
+        const x = modifiers.shiftKey ? planPoint[0] : snapScalarToGrid(planPoint[0], snapStep)
+        const y = modifiers.shiftKey ? planPoint[1] : snapScalarToGrid(planPoint[1], snapStep)
+
+        const offsetFromMidpoint = -(
+          (x - chord.midpoint.x) * chord.normal.x +
+          (y - chord.midpoint.y) * chord.normal.y
+        )
+        const snappedOffset = modifiers.shiftKey
+          ? offsetFromMidpoint
+          : snapScalarToGrid(offsetFromMidpoint, snapStep)
+        const nextCurveOffset = normalizeWallCurveOffset(
+          node,
+          Math.max(-maxOffset, Math.min(maxOffset, snappedOffset)),
+        )
+        lastCurveOffset = nextCurveOffset
+
+        useLiveNodeOverrides.getState().set(fenceId, { curveOffset: nextCurveOffset })
+        useScene.getState().markDirty(fenceId)
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene.getState().updateNodes([{ id: fenceId, data: { curveOffset: lastCurveOffset } }])
+        useLiveNodeOverrides.getState().clear(fenceId)
+      },
+    }
+  },
+}
+
 export const fenceMoveEndpointAffordance: FloorplanAffordance<FenceNode> = {
   start({ node, payload, nodes }): FloorplanAffordanceSession {
     const { endpoint } = payload as FenceEndpointPayload
diff --git a/packages/nodes/src/fence/floorplan-move.ts b/packages/nodes/src/fence/floorplan-move.ts
new file mode 100644
index 000000000..49e9bea9f
--- /dev/null
+++ b/packages/nodes/src/fence/floorplan-move.ts
@@ -0,0 +1,180 @@
+import {
+  type AnyNodeId,
+  type FenceNode,
+  type FloorplanMoveTarget,
+  type FloorplanMoveTargetSession,
+  useLiveNodeOverrides,
+  useScene,
+} from '@pascal-app/core'
+import { getWallGridStep, isWallLongEnough, snapPointToGrid } from '@pascal-app/editor'
+import { useViewer } from '@pascal-app/viewer'
+
+type PlanPoint = [number, number]
+
+function pointsEqual(a: PlanPoint, b: PlanPoint): boolean {
+  return a[0] === b[0] && a[1] === b[1]
+}
+
+type LinkedFenceSnapshot = { id: AnyNodeId; start: PlanPoint; end: PlanPoint }
+
+function getLinkedFenceSnapshots(args: {
+  fenceId: AnyNodeId
+  parentId: string | null
+  originalStart: PlanPoint
+  originalEnd: PlanPoint
+}): LinkedFenceSnapshot[] {
+  const { fenceId, parentId, originalStart, originalEnd } = args
+  const { nodes } = useScene.getState()
+  const snapshots: LinkedFenceSnapshot[] = []
+  for (const node of Object.values(nodes)) {
+    if (node?.type !== 'fence' || node.id === fenceId) continue
+    if ((node.parentId ?? null) !== parentId) continue
+    const fence = node as FenceNode
+    if (
+      pointsEqual(fence.start as PlanPoint, originalStart) ||
+      pointsEqual(fence.start as PlanPoint, originalEnd) ||
+      pointsEqual(fence.end as PlanPoint, originalStart) ||
+      pointsEqual(fence.end as PlanPoint, originalEnd)
+    ) {
+      snapshots.push({
+        id: fence.id as AnyNodeId,
+        start: [fence.start[0], fence.start[1]],
+        end: [fence.end[0], fence.end[1]],
+      })
+    }
+  }
+  return snapshots
+}
+
+/**
+ * 2D floor-plan body move for fence. Mirrors `wallFloorplanMoveTarget`
+ * but without bridge-wall planning: fence corners cascade through
+ * shared endpoints, ALT detaches them, and there's no perpendicular
+ * branch logic to chase. Tick publishes endpoint overrides; commit
+ * folds them into a single tracked update.
+ */
+export const fenceFloorplanMoveTarget: FloorplanMoveTarget<FenceNode> = ({ node }) => {
+  const fenceId = node.id as AnyNodeId
+  const originalStart: PlanPoint = [node.start[0], node.start[1]]
+  const originalEnd: PlanPoint = [node.end[0], node.end[1]]
+  const originalMetadata =
+    typeof node.metadata === 'object' && node.metadata !== null && !Array.isArray(node.metadata)
+      ? (node.metadata as Record<string, unknown>)
+      : {}
+  const isNew = !!originalMetadata.isNew
+
+  const linkedOriginals: LinkedFenceSnapshot[] = isNew
+    ? []
+    : getLinkedFenceSnapshots({
+        fenceId,
+        parentId: node.parentId ?? null,
+        originalStart,
+        originalEnd,
+      })
+
+  let rawAnchor: PlanPoint | null = null
+  let lastDelta: PlanPoint = [0, 0]
+  let lastNextStart: PlanPoint = originalStart
+  let lastNextEnd: PlanPoint = originalEnd
+
+  const projectLinked = (
+    snapshot: LinkedFenceSnapshot,
+    nextStart: PlanPoint,
+    nextEnd: PlanPoint,
+  ): { start: PlanPoint; end: PlanPoint } => ({
+    start: pointsEqual(snapshot.start, originalStart)
+      ? nextStart
+      : pointsEqual(snapshot.start, originalEnd)
+        ? nextEnd
+        : snapshot.start,
+    end: pointsEqual(snapshot.end, originalStart)
+      ? nextStart
+      : pointsEqual(snapshot.end, originalEnd)
+        ? nextEnd
+        : snapshot.end,
+  })
+
+  const session: FloorplanMoveTargetSession = {
+    affectedIds: [fenceId, ...linkedOriginals.map((l) => l.id)],
+
+    apply({ planPoint, modifiers }) {
+      if (!rawAnchor) {
+        rawAnchor = [planPoint[0], planPoint[1]]
+        return
+      }
+      const rawDx = planPoint[0] - rawAnchor[0]
+      const rawDz = planPoint[1] - rawAnchor[1]
+      const step = getWallGridStep()
+      const nextStart: PlanPoint = modifiers.shiftKey
+        ? [originalStart[0] + rawDx, originalStart[1] + rawDz]
+        : snapPointToGrid([originalStart[0] + rawDx, originalStart[1] + rawDz], step)
+      const dx = nextStart[0] - originalStart[0]
+      const dz = nextStart[1] - originalStart[1]
+      if (dx === lastDelta[0] && dz === lastDelta[1]) return
+      lastDelta = [dx, dz]
+      const nextEnd: PlanPoint = [originalEnd[0] + dx, originalEnd[1] + dz]
+      lastNextStart = nextStart
+      lastNextEnd = nextEnd
+
+      const linkedUpdates = modifiers.altKey
+        ? []
+        : linkedOriginals.map((l) => ({ id: l.id, ...projectLinked(l, nextStart, nextEnd) }))
+
+      useLiveNodeOverrides
+        .getState()
+        .setMany([
+          [fenceId, { start: nextStart, end: nextEnd }],
+          ...linkedUpdates.map(
+            (u) => [u.id, { start: u.start, end: u.end }] as [string, Record<string, unknown>],
+          ),
+        ])
+      const sceneState = useScene.getState()
+      sceneState.markDirty(fenceId)
+      for (const u of linkedUpdates) sceneState.markDirty(u.id)
+    },
+
+    canCommit() {
+      const [dx, dz] = lastDelta
+      return (dx !== 0 || dz !== 0) && isWallLongEnough(lastNextStart, lastNextEnd)
+    },
+
+    commit() {
+      // The overlay (see `floorplan-registry-move-overlay.tsx`) has already
+      // (a) written the snapshot back to scene to establish a clean
+      // baseline for the single-undo dance and (b) resumed history.
+      // This `updateNodes` IS the final-state write — recorded as one
+      // tracked change. Drop the override AFTER the scene write so
+      // mid-commit reads still see the new position (override wins until
+      // cleared; scene wins after).
+      const fenceUpdate: { id: AnyNodeId; data: Partial<FenceNode> } = isNew
+        ? {
+            id: fenceId,
+            data: {
+              start: lastNextStart,
+              end: lastNextEnd,
+              metadata: { ...originalMetadata, isNew: false },
+            } as Partial<FenceNode>,
+          }
+        : { id: fenceId, data: { start: lastNextStart, end: lastNextEnd } }
+      const linkedUpdates = linkedOriginals.map((l) => ({
+        id: l.id,
+        ...projectLinked(l, lastNextStart, lastNextEnd),
+      }))
+      useScene
+        .getState()
+        .updateNodes([
+          fenceUpdate,
+          ...linkedUpdates.map((u) => ({ id: u.id, data: { start: u.start, end: u.end } })),
+        ])
+      const overrides = useLiveNodeOverrides.getState()
+      overrides.clear(fenceId)
+      for (const l of linkedOriginals) overrides.clear(l.id)
+      // Re-select the moved fence so selection-gated chrome (endpoint
+      // handles, side arrows, curve dot) remains visible at the new
+      // position — the action menu's Move click cleared selection on
+      // entry. Matches the wall move-target's post-commit re-select.
+      useViewer.getState().setSelection({ selectedIds: [fenceId] })
+    },
+  }
+  return session
+}
diff --git a/packages/nodes/src/fence/floorplan.ts b/packages/nodes/src/fence/floorplan.ts
index 6a773904f..11e35c0c0 100644
--- a/packages/nodes/src/fence/floorplan.ts
+++ b/packages/nodes/src/fence/floorplan.ts
@@ -3,6 +3,7 @@ import {
   type GeometryContext,
   getWallCurveFrameAt,
   getWallCurveLength,
+  getWallMidpointHandlePoint,
   isCurvedWall,
   sampleWallCenterline,
 } from '@pascal-app/core'
@@ -339,7 +340,10 @@ export function buildFenceFloorplan(node: FenceNode, ctx: GeometryContext): Floo
     cursor: 'pointer',
   })
 
-  // 6. Endpoint handles + length label when selected.
+  // 6. Endpoint handles + side move-arrows + curve handle + length when
+  //    selected. Mirrors the wall builder so fences gain the same set of
+  //    in-plan affordances (drag endpoints, drag body via either side
+  //    arrow, drag the midpoint sagitta to curve).
   if (isSelected) {
     children.push({
       kind: 'endpoint-handle',
@@ -356,6 +360,50 @@ export function buildFenceFloorplan(node: FenceNode, ctx: GeometryContext): Floo
       payload: { fenceId: node.id, endpoint: 'end' as const },
     })
 
+    // Two perpendicular `move-arrow` chevrons at the fence midpoint.
+    // No `affordance` → the registry layer routes pointer-down through
+    // `setMovingNode`, which the `FloorplanRegistryMoveOverlay` picks
+    // up and runs through `def.floorplanMoveTarget` (see
+    // `fence/floorplan-move.ts`). Sized in plan-units like the wall
+    // counterpart so they shrink / grow with zoom.
+    {
+      const dx = node.end[0] - node.start[0]
+      const dz = node.end[1] - node.start[1]
+      const lineLength = Math.hypot(dx, dz)
+      if (lineLength > 1e-6) {
+        const frame = isCurvedWall(node) ? getWallCurveFrameAt(node, 0.5) : null
+        const midX = frame ? frame.point.x : (node.start[0] + node.end[0]) / 2
+        const midZ = frame ? frame.point.y : (node.start[1] + node.end[1]) / 2
+        const nx = frame ? frame.normal.x : -dz / lineLength
+        const nz = frame ? frame.normal.y : dx / lineLength
+        const offset = (node.thickness ?? 0.08) / 2 + 0.05
+        children.push({
+          kind: 'move-arrow',
+          point: [midX + nx * offset, midZ + nz * offset],
+          angle: Math.atan2(nz, nx),
+        })
+        children.push({
+          kind: 'move-arrow',
+          point: [midX - nx * offset, midZ - nz * offset],
+          angle: Math.atan2(-nz, -nx),
+        })
+      }
+    }
+
+    // Curve sagitta handle — teal dot at the visual midpoint that drives
+    // `curveOffset`. Routes through `fenceCurveAffordance`. Fences host
+    // no children, so there's no equivalent of wall's curve-blocking
+    // check to gate this.
+    const curveHandle = getWallMidpointHandlePoint(node)
+    children.push({
+      kind: 'endpoint-handle',
+      point: [curveHandle.x, curveHandle.y],
+      state: 'idle',
+      variant: 'curve',
+      affordance: 'curve',
+      payload: { fenceId: node.id },
+    })
+
     const length = getWallCurveLength(node)
     if (length >= 0.1) {
       const midX = (node.start[0] + node.end[0]) / 2
diff --git a/packages/nodes/src/roof-segment/definition.ts b/packages/nodes/src/roof-segment/definition.ts
index b019bef47..397ccd822 100644
--- a/packages/nodes/src/roof-segment/definition.ts
+++ b/packages/nodes/src/roof-segment/definition.ts
@@ -6,6 +6,11 @@ import {
   type RoofSegmentNode as RoofSegmentNodeType,
   RoofSegmentNode as RoofSegmentNodeSchema,
 } from '@pascal-app/core'
+import {
+  roofSegmentMoveTarget,
+  roofSegmentResizeAffordance,
+  roofSegmentRotateAffordance,
+} from './floorplan-affordances'
 import { buildRoofSegmentFloorplan } from './floorplan'
 import { roofSegmentParametrics } from './parametrics'
 import { RoofSegmentNode } from './schema'
@@ -195,7 +200,7 @@ export const roofSegmentDefinition: NodeDefinition<typeof RoofSegmentNode> = {
 
   capabilities: {
     selectable: { hitVolume: 'bbox' },
-    duplicable: false,
+    duplicable: true,
     deletable: true,
   },
 
@@ -207,6 +212,17 @@ export const roofSegmentDefinition: NodeDefinition<typeof RoofSegmentNode> = {
     module: () => import('./renderer'),
   },
   floorplan: buildRoofSegmentFloorplan,
+  // Body-move target. The generic Path 2 fallback writes plan coords
+  // directly to `position`, which is wrong here because the segment's
+  // position is roof-local. `roofSegmentMoveTarget` inverts the parent
+  // roof's transform so the segment lands at the world-plan cursor.
+  floorplanMoveTarget: roofSegmentMoveTarget,
+  // 2D drag affordances for the side resize arrows + corner rotate
+  // arrow emitted by `buildRoofSegmentFloorplan`.
+  floorplanAffordances: {
+    'roof-segment-resize': roofSegmentResizeAffordance,
+    'roof-segment-rotate': roofSegmentRotateAffordance,
+  },
 
   presentation: {
     label: 'Roof Segment',
diff --git a/packages/nodes/src/roof-segment/floorplan-affordances.ts b/packages/nodes/src/roof-segment/floorplan-affordances.ts
new file mode 100644
index 000000000..498288da2
--- /dev/null
+++ b/packages/nodes/src/roof-segment/floorplan-affordances.ts
@@ -0,0 +1,187 @@
+import {
+  type AnyNodeId,
+  type FloorplanAffordance,
+  type FloorplanMoveTarget,
+  type RoofNode,
+  type RoofSegmentNode,
+  useScene,
+} from '@pascal-app/core'
+
+const MIN_ROOF_DIM = 1
+
+type RoofSegmentResizePayload = { axis: 'x' | 'z'; side: 1 | -1 }
+
+// Resolve world-space center + effective rotation of a roof segment by
+// composing the parent roof's position + rotation with the segment's
+// local position. Mirrors the floorplan builder's transform so handles
+// and affordances stay glued to the rendered footprint.
+function resolveSegmentFrame(
+  segment: RoofSegmentNode,
+  nodes: Record<AnyNodeId, unknown>,
+): {
+  cx: number
+  cz: number
+  roofRot: number
+  effRot: number
+  cosRoof: number
+  sinRoof: number
+} {
+  const roofId = (segment as unknown as { parentId?: AnyNodeId | null }).parentId
+  const roof = roofId ? (nodes[roofId] as RoofNode | undefined) : undefined
+  const roofPosX = roof?.position[0] ?? 0
+  const roofPosZ = roof?.position[2] ?? 0
+  // Floor-plan plots at `-rotation` so SVG-CW matches Three.js-CCW (see
+  // `buildRoofSegmentFloorplan` for the rationale). This frame mirrors
+  // the builder's transform so affordance cx/cz line up with where the
+  // segment actually renders, and the cursor projection in `effRot`
+  // works in the same coord system.
+  const roofRot = -(roof?.rotation ?? 0)
+  const cosRoof = Math.cos(roofRot)
+  const sinRoof = Math.sin(roofRot)
+  const localX = segment.position[0]
+  const localZ = segment.position[2]
+  const cx = roofPosX + localX * cosRoof - localZ * sinRoof
+  const cz = roofPosZ + localX * sinRoof + localZ * cosRoof
+  const effRot = roofRot + -(segment.rotation ?? 0)
+  return { cx, cz, roofRot, effRot, cosRoof, sinRoof }
+}
+
+/**
+ * Roof-segment width / depth drag (floor-plan). Mirrors the 3D
+ * `linear-resize` handles in `definition.ts` — `anchor: 'center'`
+ * means dragging outward on either +/-X (or +/-Z) edge grows the
+ * dimension by 2× the segment-local cursor offset while the segment's
+ * roof-local position stays put. Projects the plan cursor onto the
+ * segment's effective rotation (roof.rotation + segment.rotation) so
+ * the math survives any parent-roof rotation.
+ */
+export const roofSegmentResizeAffordance: FloorplanAffordance<RoofSegmentNode> = {
+  start({ node, payload, nodes, initialPlanPoint }) {
+    const { axis, side } = payload as RoofSegmentResizePayload
+    const segmentId = node.id as AnyNodeId
+    const initialValue = axis === 'x' ? node.width : node.depth
+    const { cx, cz, effRot } = resolveSegmentFrame(node, nodes)
+    const cosEff = Math.cos(effRot)
+    const sinEff = Math.sin(effRot)
+    // Project (planPoint - center) onto the segment's local X or Z axis
+    // (world directions of those axes are (cosEff, sinEff) and
+    // (-sinEff, cosEff)).
+    const projectLocalAxis = (px: number, pz: number): number => {
+      const dx = px - cx
+      const dz = pz - cz
+      return axis === 'x' ? dx * cosEff + dz * sinEff : -dx * sinEff + dz * cosEff
+    }
+    const initialLocal = projectLocalAxis(initialPlanPoint[0], initialPlanPoint[1])
+    let lastValue = initialValue
+
+    return {
+      affectedIds: [segmentId],
+      apply({ planPoint }) {
+        const currentLocal = projectLocalAxis(planPoint[0], planPoint[1])
+        const delta = (currentLocal - initialLocal) * side
+        const newValue = Math.max(MIN_ROOF_DIM, initialValue + 2 * delta)
+        lastValue = newValue
+        useScene
+          .getState()
+          .updateNode(segmentId, axis === 'x' ? { width: newValue } : { depth: newValue })
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene
+          .getState()
+          .updateNode(segmentId, axis === 'x' ? { width: lastValue } : { depth: lastValue })
+      },
+    }
+  },
+}
+
+/**
+ * Roof-segment rotation drag (floor-plan). Sister to the 3D `arc-resize`
+ * handle. Same `- delta` convention as the 3D handle: the floor-plan
+ * builder plots the footprint at `-(roof.rotation + segment.rotation)`
+ * (see `buildRoofSegmentFloorplan`'s `rotation` local), so the 2D
+ * view rotates the same direction as 3D for the same `rotation` value,
+ * and the same cursor gesture writes the same sign in both views.
+ */
+export const roofSegmentRotateAffordance: FloorplanAffordance<RoofSegmentNode> = {
+  start({ node, nodes, initialPlanPoint }) {
+    const segmentId = node.id as AnyNodeId
+    const initialRotation = node.rotation ?? 0
+    const { cx, cz } = resolveSegmentFrame(node, nodes)
+    const initialAngle = Math.atan2(initialPlanPoint[1] - cz, initialPlanPoint[0] - cx)
+    let lastRotation = initialRotation
+
+    return {
+      affectedIds: [segmentId],
+      apply({ planPoint }) {
+        const currentAngle = Math.atan2(planPoint[1] - cz, planPoint[0] - cx)
+        let delta = currentAngle - initialAngle
+        while (delta > Math.PI) delta -= 2 * Math.PI
+        while (delta < -Math.PI) delta += 2 * Math.PI
+        lastRotation = initialRotation - delta
+        useScene.getState().updateNode(segmentId, { rotation: lastRotation })
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene.getState().updateNode(segmentId, { rotation: lastRotation })
+      },
+    }
+  },
+}
+
+/**
+ * Roof-segment body-move target (floor-plan). The generic Path 2 move
+ * fallback writes the cursor's plan position straight into `position`,
+ * which is wrong for roof segments because `position` is **roof-local**
+ * (the floorplan builder composes parent roof's transform to render).
+ * This target inverts the parent roof's transform so the segment moves
+ * to the cursor's WORLD-plan position, not to a roof-local interpretation
+ * of those world coords. Falls back to identity for orphaned segments.
+ */
+export const roofSegmentMoveTarget: FloorplanMoveTarget<RoofSegmentNode> = ({ node, nodes }) => {
+  const segmentId = node.id as AnyNodeId
+  const initialY = node.position[1]
+  const { roofRot, cosRoof, sinRoof } = resolveSegmentFrame(node, nodes)
+  const roofId = (node as unknown as { parentId?: AnyNodeId | null }).parentId
+  const roof = roofId ? (nodes[roofId] as RoofNode | undefined) : undefined
+  const roofPosX = roof?.position[0] ?? 0
+  const roofPosZ = roof?.position[2] ?? 0
+  // Inverse of the forward transform `[cosRoof, -sinRoof; sinRoof, cosRoof]`
+  // is `[cosRoof, sinRoof; -sinRoof, cosRoof]`. Used to project world cursor
+  // back into roof-local coords.
+  void roofRot
+  let lastLocal: [number, number, number] = [
+    node.position[0],
+    node.position[1],
+    node.position[2],
+  ]
+
+  return {
+    affectedIds: [segmentId],
+    apply({ planPoint, modifiers }) {
+      const dx = planPoint[0] - roofPosX
+      const dz = planPoint[1] - roofPosZ
+      let localX = dx * cosRoof + dz * sinRoof
+      let localZ = -dx * sinRoof + dz * cosRoof
+      // 0.5m grid snap (alt held disables). Mirrors the generic Path 2
+      // fallback's `snapPointToGrid` step so floor-plan moves feel
+      // consistent across kinds.
+      if (!modifiers.altKey) {
+        localX = Math.round(localX * 2) / 2
+        localZ = Math.round(localZ * 2) / 2
+      }
+      lastLocal = [localX, initialY, localZ]
+      useScene.getState().updateNode(segmentId, { position: lastLocal })
+    },
+    canCommit() {
+      return true
+    },
+    commit() {
+      useScene.getState().updateNode(segmentId, { position: lastLocal })
+    },
+  }
+}
diff --git a/packages/nodes/src/roof-segment/floorplan.ts b/packages/nodes/src/roof-segment/floorplan.ts
index aeb50b31f..fec976b14 100644
--- a/packages/nodes/src/roof-segment/floorplan.ts
+++ b/packages/nodes/src/roof-segment/floorplan.ts
@@ -22,16 +22,20 @@ export function buildRoofSegmentFloorplan(
   const roof = ctx.parent as RoofNode | null
   if (!roof || roof.type !== 'roof') return null
 
-  // Segment center in world coords: parent roof's transform applied to
-  // the segment's local position offset.
-  const cosRoof = Math.cos(roof.rotation)
-  const sinRoof = Math.sin(roof.rotation)
+  // Segment center in world coords. Floor-plan plots at `-rotation` so
+  // SVG's CW-with-y-down `rotate` direction ends up matching Three.js
+  // Y-rotation (CCW from top-down). The standard math rotation matrix
+  // applied to (localX, localZ) with `+rotation` gives screen-CW in
+  // SVG; negating the rotation gives screen-CCW = matches Three.js.
+  const planRoofRotation = -roof.rotation
+  const cosRoof = Math.cos(planRoofRotation)
+  const sinRoof = Math.sin(planRoofRotation)
   const localX = node.position[0]
   const localZ = node.position[2]
   const cx = roof.position[0] + localX * cosRoof - localZ * sinRoof
   const cz = roof.position[2] + localX * sinRoof + localZ * cosRoof
 
-  const rotation = roof.rotation + node.rotation
+  const rotation = -(roof.rotation + node.rotation)
   const cos = Math.cos(rotation)
   const sin = Math.sin(rotation)
   const halfWidth = node.width / 2
@@ -54,23 +58,40 @@ export function buildRoofSegmentFloorplan(
   const isHighlighted = view?.highlighted ?? false
   const showSelectedChrome = isSelected || isHighlighted
 
-  const stroke =
-    showSelectedChrome && palette ? palette.selectedStroke : 'rgba(125, 211, 252, 0.82)'
-  const fill = showSelectedChrome ? '#fed7aa' : 'rgba(56, 189, 248, 0.16)'
+  // Black architectural outline by default; palette accent on select.
+  // Mirrors the elevator / column style so all structural elements read
+  // the same in the floor plan.
+  const baseInk = '#111111'
+  const stroke = showSelectedChrome && palette ? palette.selectedStroke : baseInk
 
   const children: FloorplanGeometry[] = [
+    // Invisible hit-target — full footprint, transparent fill, captures
+    // clicks across the entire roof rectangle (so the user doesn't need
+    // to pixel-hunt the outline strokes).
     {
       kind: 'polygon',
       points,
-      fill,
+      fill: stroke,
+      fillOpacity: 0,
+      stroke: 'none',
+      strokeWidth: 0,
+      pointerEvents: 'all',
+    },
+    // Visible outline.
+    {
+      kind: 'polygon',
+      points,
+      fill: showSelectedChrome ? '#fed7aa' : 'none',
+      fillOpacity: showSelectedChrome ? 0.55 : 0,
       stroke,
-      strokeWidth: showSelectedChrome ? 0.04 : 0.025,
-      strokeLinejoin: 'round',
-      opacity: 0.85,
+      strokeWidth: showSelectedChrome ? 0.035 : 0.025,
+      strokeLinejoin: 'miter',
     },
   ]
 
-  // Ridge line — only for pitched segments, not flat roofs.
+  // Ridge line — only for pitched segments, not flat roofs. Dashed
+  // black so it reads as the ridge (axis of the pitch) without
+  // competing with the perimeter outline.
   if (node.roofType !== 'flat') {
     const ridgeAxis =
       node.roofType === 'gable' || node.roofType === 'gambrel'
@@ -88,18 +109,71 @@ export function buildRoofSegmentFloorplan(
       y1: cz - halfSpan * Math.sin(axisAngle),
       x2: cx + halfSpan * Math.cos(axisAngle),
       y2: cz + halfSpan * Math.sin(axisAngle),
-      stroke: showSelectedChrome ? '#eff6ff' : 'rgba(186, 230, 253, 0.84)',
-      strokeWidth: 1.4,
-      strokeLinecap: 'round',
-      vectorEffect: 'non-scaling-stroke',
+      stroke,
+      strokeWidth: 0.02,
+      strokeDasharray: '0.1 0.08',
+      strokeLinecap: 'butt',
+      opacity: 0.85,
     })
   }
 
+  // Selection chrome — orange move-handle dot at the centre, four
+  // perpendicular side resize-arrows (width on X, depth on Z), and a
+  // rotate-arrow at the +X/+Z corner. Sister to the 3D handles in
+  // `definition.ts`. Resize/rotate route through the matching
+  // `floorplanAffordances`; the dot drives body-move via
+  // `def.floorplanMoveTarget`.
   if (isSelected) {
     children.push({
       kind: 'move-handle',
       point: [cx, cz],
     })
+
+    const sideArrowOffset = 0.12
+    const rotateCornerOffset = 0.22
+    const halfW = node.width / 2
+    const halfD = node.depth / 2
+    // Effective rotation = parent roof rotation + segment-local rotation.
+    // Reuse `cos` / `sin` from the corner computation above (they were
+    // computed for the same `rotation` value).
+    const rotateLocal = (lx: number, ly: number): [number, number] => [
+      lx * cos - ly * sin,
+      lx * sin + ly * cos,
+    ]
+    const sides: Array<{
+      local: [number, number]
+      localAngle: number
+      axis: 'x' | 'z'
+      side: 1 | -1
+    }> = [
+      { local: [halfW + sideArrowOffset, 0], localAngle: 0, axis: 'x', side: 1 },
+      { local: [-(halfW + sideArrowOffset), 0], localAngle: Math.PI, axis: 'x', side: -1 },
+      { local: [0, halfD + sideArrowOffset], localAngle: Math.PI / 2, axis: 'z', side: 1 },
+      { local: [0, -(halfD + sideArrowOffset)], localAngle: -Math.PI / 2, axis: 'z', side: -1 },
+    ]
+    for (const s of sides) {
+      const [ox, oz] = rotateLocal(s.local[0], s.local[1])
+      const [tx, tz] = rotateLocal(Math.cos(s.localAngle), Math.sin(s.localAngle))
+      children.push({
+        kind: 'move-arrow',
+        point: [cx + ox, cz + oz],
+        angle: Math.atan2(tz, tx),
+        affordance: 'roof-segment-resize',
+        payload: { axis: s.axis, side: s.side },
+      })
+    }
+
+    // Rotate-arrow at the +X / +Z corner. Local angle π/4 puts the
+    // curved arrow's bow at the diagonal corner so it reads as a
+    // rotation gizmo around the segment centre.
+    const [cornerX, cornerZ] = rotateLocal(halfW + rotateCornerOffset, halfD + rotateCornerOffset)
+    const [radialX, radialZ] = rotateLocal(1, 1)
+    children.push({
+      kind: 'rotate-arrow',
+      point: [cx + cornerX, cz + cornerZ],
+      angle: Math.atan2(radialZ, radialX),
+      affordance: 'roof-segment-rotate',
+    })
   }
 
   return { kind: 'group', children }
diff --git a/packages/nodes/src/shelf/definition.ts b/packages/nodes/src/shelf/definition.ts
index 40f9c195d..b5a6cdcb8 100644
--- a/packages/nodes/src/shelf/definition.ts
+++ b/packages/nodes/src/shelf/definition.ts
@@ -3,6 +3,7 @@ import type {
   NodeDefinition,
   ShelfNode as ShelfNodeType,
 } from '@pascal-app/core'
+import { shelfResizeAffordance, shelfRotateAffordance } from './floorplan-affordances'
 import { buildShelfFloorplan } from './floorplan'
 import { shelfFloorplanMoveTarget } from './floorplan-move'
 import { buildShelfGeometry, shelfRowSurfaceYs } from './geometry'
@@ -197,6 +198,15 @@ export const shelfDefinition: NodeDefinition<typeof ShelfNode> = {
   // transforms during drag for real-time 3D sync and commits via a
   // single tracked `updateNode`.
   floorplanMoveTarget: shelfFloorplanMoveTarget,
+  // 2D drag affordances for the resize chevrons + rotate-arrow emitted
+  // when the shelf is selected. `shelf-resize` handles width / depth
+  // (the payload's `dim` discriminator); `shelf-rotate` is the corner
+  // arc-arrow that drives `rotation[1]`. Body move stays on the
+  // action-menu Move button → `shelfFloorplanMoveTarget` above.
+  floorplanAffordances: {
+    'shelf-resize': shelfResizeAffordance,
+    'shelf-rotate': shelfRotateAffordance,
+  },
 
   preview: () => import('./preview'),
   tool: () => import('./tool'),
diff --git a/packages/nodes/src/shelf/floorplan-affordances.ts b/packages/nodes/src/shelf/floorplan-affordances.ts
new file mode 100644
index 000000000..c5ab40f34
--- /dev/null
+++ b/packages/nodes/src/shelf/floorplan-affordances.ts
@@ -0,0 +1,102 @@
+import {
+  type AnyNodeId,
+  type FloorplanAffordance,
+  type ShelfNode,
+  useScene,
+} from '@pascal-app/core'
+
+// Mirror the 3D handles in `shelf/definition.ts` so a drag can't push a
+// value past what the renderer / geometry builder accepts.
+const MIN_SHELF_WIDTH = 0.3
+const MIN_SHELF_DEPTH = 0.1
+
+export type ShelfResizePayload = {
+  dim: 'width' | 'depth'
+  // Plan-space direction of the arrow's outward tip. Captured at emit
+  // time so a mid-drag rotation can't drift the projection basis.
+  planAxis: [number, number]
+}
+
+/**
+ * Single drag handler for both shelf size arrows. Mirrors the 3D
+ * `shelfWidthHandle` / `shelfDepthHandle` (`anchor: 'center'` — cursor
+ * delta `d` along the outward axis grows the dimension by `2·d` so both
+ * faces move ±d and the centre stays put).
+ */
+export const shelfResizeAffordance: FloorplanAffordance<ShelfNode> = {
+  start({ node, payload, initialPlanPoint }) {
+    const { dim, planAxis } = payload as ShelfResizePayload
+    const shelfId = node.id as AnyNodeId
+    const [ax, ay] = planAxis
+    const initialProj = initialPlanPoint[0] * ax + initialPlanPoint[1] * ay
+    const initialWidth = node.width
+    const initialDepth = node.depth
+
+    let lastPatch: Partial<ShelfNode> = {}
+
+    return {
+      affectedIds: [shelfId],
+      apply({ planPoint }) {
+        const currentProj = planPoint[0] * ax + planPoint[1] * ay
+        const projDelta = currentProj - initialProj
+        if (dim === 'width') {
+          lastPatch = { width: Math.max(MIN_SHELF_WIDTH, initialWidth + 2 * projDelta) }
+        } else {
+          lastPatch = { depth: Math.max(MIN_SHELF_DEPTH, initialDepth + 2 * projDelta) }
+        }
+        useScene.getState().updateNode(shelfId, lastPatch)
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        if (Object.keys(lastPatch).length > 0) {
+          useScene.getState().updateNode(shelfId, lastPatch)
+        }
+      },
+    }
+  },
+}
+
+/**
+ * Whole-shelf rotation drag (floor-plan). Sister to the 3D
+ * `shelfRotateHandle` (arc-resize). Cursor angle around the shelf
+ * centre drives `rotation[1]` (Y axis). Shelf stores rotation as a
+ * `[x, y, z]` tuple — the patch preserves the X / Z slots.
+ *
+ * Same `- delta` convention as the 3D handle: the floor-plan builder
+ * plots the footprint at `-rotation[1]` (see `buildShelfFloorplan`'s
+ * `planRy`), so the 2D view rotates the same direction as 3D for the
+ * same `rotation` value and the same cursor gesture writes the same
+ * sign in both views.
+ */
+export const shelfRotateAffordance: FloorplanAffordance<ShelfNode> = {
+  start({ node, initialPlanPoint }) {
+    const shelfId = node.id as AnyNodeId
+    const r = node.rotation ?? [0, 0, 0]
+    const initialRotationY = r[1] ?? 0
+    const cx = node.position[0]
+    const cz = node.position[2]
+    const initialAngle = Math.atan2(initialPlanPoint[1] - cz, initialPlanPoint[0] - cx)
+    let lastRotation: [number, number, number] = [r[0], initialRotationY, r[2]]
+
+    return {
+      affectedIds: [shelfId],
+      apply({ planPoint }) {
+        const currentAngle = Math.atan2(planPoint[1] - cz, planPoint[0] - cx)
+        let delta = currentAngle - initialAngle
+        while (delta > Math.PI) delta -= 2 * Math.PI
+        while (delta < -Math.PI) delta += 2 * Math.PI
+        const newRotationY = initialRotationY - delta
+        lastRotation = [r[0], newRotationY, r[2]]
+        useScene.getState().updateNode(shelfId, { rotation: lastRotation })
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene.getState().updateNode(shelfId, { rotation: lastRotation })
+      },
+    }
+  },
+}
diff --git a/packages/nodes/src/shelf/floorplan.ts b/packages/nodes/src/shelf/floorplan.ts
index b146afc8a..6ed96ce06 100644
--- a/packages/nodes/src/shelf/floorplan.ts
+++ b/packages/nodes/src/shelf/floorplan.ts
@@ -1,6 +1,13 @@
-import type { FloorplanGeometry } from '@pascal-app/core'
+import type { FloorplanGeometry, GeometryContext } from '@pascal-app/core'
+import type { ShelfResizePayload } from './floorplan-affordances'
 import type { ShelfNode } from './schema'
 
+// Offsets for the floor-plan selection chrome. Resize chevrons sit a
+// hair off the footprint rim; the rotate-arrow corner sits a bit further
+// out so it doesn't crowd the resize arrows.
+const RESIZE_ARROW_OFFSET = 0.12
+const ROTATE_ARROW_CORNER_OFFSET = 0.22
+
 /**
  * 2D floor-plan representation of a shelf. The unit's outer footprint
  * projects to a rectangle of `width × depth` centered on the shelf's
@@ -12,22 +19,30 @@ import type { ShelfNode } from './schema'
  * stack vertically under the topmost board from a top-down view and
  * adding them clutters the plan without conveying useful information.
  *
- * Coordinates are level-local meters; the floor-plan panel applies the
- * world→SVG transform via its viewBox. Rotation is radians (three.js
- * convention); the renderer converts to SVG degrees.
+ * When selected, emits resize chevrons matching the 3D handle set
+ * (width on +X, depth on +Z) plus a rotate-arrow at the front-right
+ * corner. Body move continues to flow through `shelfFloorplanMoveTarget`
+ * (engaged from the action-menu Move button, not from these arrows).
  */
-export function buildShelfFloorplan(node: ShelfNode): FloorplanGeometry {
+export function buildShelfFloorplan(
+  node: ShelfNode,
+  ctx?: GeometryContext,
+): FloorplanGeometry {
   const [px, , pz] = node.position
   const ry = node.rotation[1] ?? 0
+  // Floor-plan plots at `-ry` so SVG's CW-with-y-down `rotate` direction
+  // ends up visually matching Three.js Y-rotation (CCW from a top-down
+  // view) — same `rotation` value rotates the same way in both views.
+  // Stair already does this; column / shelf / roof-segment now do too.
+  const planRy = -ry
   const halfW = node.width / 2
   const halfD = node.depth / 2
+  const isSelected = ctx?.viewState?.selected ?? false
 
   // Floor-plan fill: a single neutral fill regardless of `material`.
   // 2D doesn't render the actual paint material — surfaces in plan view
-  // read as outline + tone, not photoreal texture. Using a fixed light
-  // gray keeps the plan visually consistent with the other furniture
-  // kinds (item / column / etc.) which also render as neutral fills.
-  const children: FloorplanGeometry[] = [
+  // read as outline + tone, not photoreal texture.
+  const footprintChildren: FloorplanGeometry[] = [
     {
       kind: 'rect',
       x: -halfW,
@@ -48,7 +63,7 @@ export function buildShelfFloorplan(node: ShelfNode): FloorplanGeometry {
     const colStep = innerWidth / node.columns
     for (let c = 1; c < node.columns; c++) {
       const x = -innerWidth / 2 + c * colStep
-      children.push({
+      footprintChildren.push({
         kind: 'line',
         x1: x,
         y1: -halfD + node.thickness,
@@ -61,9 +76,68 @@ export function buildShelfFloorplan(node: ShelfNode): FloorplanGeometry {
     }
   }
 
-  return {
+  const footprintGroup: FloorplanGeometry = {
     kind: 'group',
-    transform: { translate: [px, pz], rotate: ry },
-    children,
+    transform: { translate: [px, pz], rotate: planRy },
+    children: footprintChildren,
+  }
+
+  if (!isSelected) {
+    return footprintGroup
+  }
+
+  // Selection chrome lives in world coords (not under the rotated
+  // transform group) so the cursor projection in the affordance can use
+  // the same coord system the dispatcher's `planPoint` arrives in.
+  // `planRy` (= -ry) is the rotation the SVG group uses; arrows and
+  // their plan-coord projections must use the same.
+  const cosR = Math.cos(planRy)
+  const sinR = Math.sin(planRy)
+  // Plan vectors for the shelf-local axes — SVG `rotate(planRy)` maps
+  // local (1, 0) → (cos planRy, sin planRy) and local (0, 1) → (-sin planRy, cos planRy).
+  const localXInPlan: [number, number] = [cosR, sinR]
+  const localZInPlan: [number, number] = [-sinR, cosR]
+
+  const children: FloorplanGeometry[] = [footprintGroup]
+
+  const emitResizeArrow = (
+    dim: ShelfResizePayload['dim'],
+    localAxis: [number, number],
+    localOffset: number,
+  ) => {
+    const planAxis: [number, number] = [
+      localAxis[0] * cosR - localAxis[1] * sinR,
+      localAxis[0] * sinR + localAxis[1] * cosR,
+    ]
+    children.push({
+      kind: 'move-arrow',
+      point: [px + planAxis[0] * localOffset, pz + planAxis[1] * localOffset],
+      angle: Math.atan2(planAxis[1], planAxis[0]),
+      affordance: 'shelf-resize',
+      payload: { dim, planAxis } satisfies ShelfResizePayload,
+    })
   }
+
+  emitResizeArrow('width', [1, 0], halfW + RESIZE_ARROW_OFFSET)
+  emitResizeArrow('depth', [0, 1], halfD + RESIZE_ARROW_OFFSET)
+
+  // Rotate-arrow at the +X / +Z corner — matches the 3D
+  // `shelfRotateHandle` corner placement so users see the rotation
+  // affordance in the same quadrant across views.
+  const cornerLocalX = halfW + ROTATE_ARROW_CORNER_OFFSET
+  const cornerLocalZ = halfD + ROTATE_ARROW_CORNER_OFFSET
+  const cornerPlanX = cornerLocalX * cosR - cornerLocalZ * sinR
+  const cornerPlanY = cornerLocalX * sinR + cornerLocalZ * cosR
+  // The arc-arrow's local +X reads as the radial-outward direction; the
+  // diagonal corner is the (+X +Z) sum direction in shelf-local.
+  const radialPlanX = localXInPlan[0] + localZInPlan[0]
+  const radialPlanY = localXInPlan[1] + localZInPlan[1]
+  children.push({
+    kind: 'rotate-arrow',
+    point: [px + cornerPlanX, pz + cornerPlanY],
+    angle: Math.atan2(radialPlanY, radialPlanX),
+    affordance: 'shelf-rotate',
+  })
+
+  return { kind: 'group', children }
 }
diff --git a/packages/nodes/src/stair/definition.ts b/packages/nodes/src/stair/definition.ts
index bd265a847..6f53cbb37 100644
--- a/packages/nodes/src/stair/definition.ts
+++ b/packages/nodes/src/stair/definition.ts
@@ -22,6 +22,10 @@ const CURVED_SWEEP_LATERAL_OFFSET = 0.24
 const CURVED_OUTER_RING_OFFSET = 0.2
 const CURVED_INNER_RING_OFFSET = 0.2
 const CURVED_INNER_RING_MIN = 0.05
+// Whole-stair rotation gizmo — curved two-headed arrow at a corner of
+// the footprint. Same pattern as elevator / column / shelf / roof-segment.
+const STAIR_ROTATE_CORNER_OFFSET = 0.4
+const STAIR_ROTATE_RING_OFFSET = 0.08
 
 type CurvedStairGeom = {
   isSpiral: boolean
@@ -200,25 +204,97 @@ function curvedSweepHandle(end: 'start' | 'end'): HandleDescriptor<StairNodeType
   }
 }
 
-function stairHandles(node: StairNodeType): HandleDescriptor<StairNodeType>[] {
-  // Straight stairs have no parent-level arrows — the segment children
-  // each render their own (width / length / height). Curved + spiral
-  // stairs use 5 arrows directly on the parent (no segments).
-  if (!isCurvedOrSpiral(node)) return []
+// Whole-stair rotation gizmo. Lives on the stair parent so it rotates
+// straight + curved + spiral kinds the same way. For straight stairs the
+// gizmo anchors just outside the +X corner of the run start (the stair's
+// root sits at the bottom of the first segment, with the chain extending
+// along +Z). For curved / spiral the gizmo sits at the outer rim, at the
+// sweep-start side, where there's no other handle in the way. apply()
+// negates the cursor delta so dragging CCW (atan2 ticks +) rotates the
+// stair CCW around Y — same convention as elevator / column.
+function stairRotateGizmoPosition(n: StairNodeType): [number, number, number] {
+  if (isCurvedOrSpiral(n)) {
+    const g = readCurvedStairGeometry(n)
+    const radius = g.outerRadius + STAIR_ROTATE_CORNER_OFFSET
+    // Sweep-start side in node-local frame. Sector is centred on
+    // local +X (sweep bisector = 0), so start = -sweep/2.
+    const angle = -g.sweepAngle / 2
+    return [radius * Math.cos(angle), g.totalRise / 2, radius * Math.sin(angle)]
+  }
+  const width = Math.max(n.width ?? 1, MIN_CURVED_WIDTH)
+  const yMid = Math.max(n.totalRise ?? 2.5, 0.1) / 2
   return [
-    curvedRiseHandle(),
-    curvedWidthHandle(),
-    curvedInnerRadiusHandle(),
-    curvedSweepHandle('start'),
-    curvedSweepHandle('end'),
+    width / 2 + STAIR_ROTATE_CORNER_OFFSET,
+    yMid,
+    -STAIR_ROTATE_CORNER_OFFSET,
   ]
 }
+
+function stairRotateHandle(): HandleDescriptor<StairNodeType> {
+  return {
+    kind: 'arc-resize',
+    axis: 'angular',
+    shape: 'rotate',
+    apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }),
+    placement: {
+      position: stairRotateGizmoPosition,
+      // The curved-arrow geometry's bow points along its local +X. Rotate
+      // the icon so the bow points radially outward — away from the
+      // stair's center — so the curve hugs the body's outline at the
+      // gizmo's corner instead of cutting into it. rotateY(−α) maps local
+      // +X to the outward radial direction (same handedness rule as
+      // elevator / column, but here the gizmo lands in different
+      // quadrants per stair kind so the tilt is position-derived rather
+      // than a fixed −π/4).
+      rotationY: (n) => {
+        const [px, , pz] = stairRotateGizmoPosition(n)
+        return -Math.atan2(pz, px)
+      },
+    },
+    decoration: {
+      kind: 'ring',
+      radius: (n) => {
+        if (isCurvedOrSpiral(n)) {
+          const g = readCurvedStairGeometry(n)
+          return g.outerRadius + STAIR_ROTATE_CORNER_OFFSET + STAIR_ROTATE_RING_OFFSET
+        }
+        const width = Math.max(n.width ?? 1, MIN_CURVED_WIDTH)
+        return (
+          Math.hypot(width / 2 + STAIR_ROTATE_CORNER_OFFSET, STAIR_ROTATE_CORNER_OFFSET) +
+          STAIR_ROTATE_RING_OFFSET
+        )
+      },
+      y: (n) => Math.max(n.totalRise ?? 2.5, 0.1) / 2,
+    },
+  }
+}
+
+function stairHandles(node: StairNodeType): HandleDescriptor<StairNodeType>[] {
+  // Straight stairs have no parent-level shape arrows — the segment
+  // children each render their own (width / length / height). Curved +
+  // spiral stairs use 5 arrows directly on the parent (no segments).
+  // The whole-stair rotation gizmo is universal: every stair kind
+  // exposes the same curved-arrow rotate handle.
+  const handles: HandleDescriptor<StairNodeType>[] = []
+  if (isCurvedOrSpiral(node)) {
+    handles.push(
+      curvedRiseHandle(),
+      curvedWidthHandle(),
+      curvedInnerRadiusHandle(),
+      curvedSweepHandle('start'),
+      curvedSweepHandle('end'),
+    )
+  }
+  handles.push(stairRotateHandle())
+  return handles
+}
 import {
   curvedStairInnerRadiusAffordance,
   curvedStairSweepAffordance,
   curvedStairWidthAffordance,
   segmentLengthAffordance,
   segmentWidthAffordance,
+  stairRotateAffordance,
 } from './floorplan-affordances'
 import { buildStairFloorplan } from './floorplan'
 import { stairFloorplanMoveTarget } from './floorplan-move'
@@ -285,6 +361,7 @@ export const stairDefinition: NodeDefinition<typeof StairNode> = {
     'curved-width': curvedStairWidthAffordance,
     'curved-inner-radius': curvedStairInnerRadiusAffordance,
     'curved-sweep': curvedStairSweepAffordance,
+    'stair-rotate': stairRotateAffordance,
   },
 
   presentation: {
diff --git a/packages/nodes/src/stair/floorplan-affordances.ts b/packages/nodes/src/stair/floorplan-affordances.ts
index ddeb559a6..ed60329ce 100644
--- a/packages/nodes/src/stair/floorplan-affordances.ts
+++ b/packages/nodes/src/stair/floorplan-affordances.ts
@@ -212,6 +212,47 @@ export const curvedStairInnerRadiusAffordance: FloorplanAffordance<StairNode> =
   },
 }
 
+/**
+ * Whole-stair rotation gizmo → stair `rotation`. Mirrors the 3D
+ * `stairRotateHandle` (arc-resize, curved-arrow shape). Angular drag
+ * around the stair's plan-space pivot — atan2 ticks CW visually, the
+ * stored `rotation` field is the schema's Y-axis radians, and the
+ * floorplan plots sectors at `-rotation`, so a positive cursor delta
+ * (CCW around the centre in standard math coords / CW on screen given
+ * inverted Y) should DECREASE `rotation`. Same `- delta` convention the
+ * 3D handle uses; cursor handedness across both views matches.
+ */
+export const stairRotateAffordance: FloorplanAffordance<StairNode> = {
+  start({ node, initialPlanPoint }) {
+    const stairId = node.id as AnyNodeId
+    const initialRotation = node.rotation ?? 0
+    const cx = node.position[0]
+    const cz = node.position[2]
+    const initialAngle = Math.atan2(initialPlanPoint[1] - cz, initialPlanPoint[0] - cx)
+    let lastRotation = initialRotation
+
+    return {
+      affectedIds: [stairId],
+      apply({ planPoint }) {
+        const currentAngle = Math.atan2(planPoint[1] - cz, planPoint[0] - cx)
+        let delta = currentAngle - initialAngle
+        // Wrap to [-π, π] so a drag crossing ±π doesn't flip sign mid-gesture.
+        while (delta > Math.PI) delta -= 2 * Math.PI
+        while (delta < -Math.PI) delta += 2 * Math.PI
+        const newRotation = initialRotation - delta
+        lastRotation = newRotation
+        useScene.getState().updateNode(stairId, { rotation: newRotation })
+      },
+      canCommit() {
+        return true
+      },
+      commit() {
+        useScene.getState().updateNode(stairId, { rotation: lastRotation })
+      },
+    }
+  },
+}
+
 /**
  * Curved / spiral sweep arrows → stair `sweepAngle` + `rotation`. Anchors
  * the opposite edge world-fixed by nudging `rotation` by half the applied
diff --git a/packages/nodes/src/stair/floorplan.ts b/packages/nodes/src/stair/floorplan.ts
index a407e0a6c..26c1dca15 100644
--- a/packages/nodes/src/stair/floorplan.ts
+++ b/packages/nodes/src/stair/floorplan.ts
@@ -5,6 +5,12 @@ import type {
   StairNode,
   StairSegmentNode,
 } from '@pascal-app/core'
+
+// Offset from the stair's footprint edge to the rotation chevron's
+// origin. Same magnitude as `STAIR_ROTATE_CORNER_OFFSET` in
+// `definition.ts` so the 2D handle visually lines up with where the 3D
+// curved-arrow gizmo would sit at the matching world point.
+const STAIR_ROTATE_PLAN_OFFSET = 0.4
 import {
   buildFloorplanStairEntry,
   buildSvgAnnularSectorPath,
@@ -172,7 +178,19 @@ export function buildStairFloorplan(
     const sectorStartAngle = -stair.rotation - normalizedSweepAngle / 2
     const sectorEndAngle = sectorStartAngle + normalizedSweepAngle
     const spiralLandingSweep = getFloorplanSpiralLandingSweep(stair, normalizedSweepAngle)
-    const visualSectorEndAngle = sectorEndAngle + spiralLandingSweep
+    // SVG `A` (arc) draws a single sub-360° segment. Once the base sweep
+    // is near a full turn and we add up to 0.75π of integrated landing
+    // on top, the total `visualSectorEnd - sectorStart` overflows 2π and
+    // the path becomes malformed (the whole stair chrome breaks). Cap
+    // the COMBINED visual sweep to just under a full revolution — past
+    // that, the landing visually overlaps the start of the arc, which
+    // is exactly the multi-turn "stack on top of each other" behaviour
+    // we want for spirals with > 360° rotation.
+    const rawVisualSweep = normalizedSweepAngle + spiralLandingSweep
+    const sweepCap = Math.PI * 2 - 0.001
+    const visualSweep =
+      Math.sign(rawVisualSweep || 1) * Math.min(Math.abs(rawVisualSweep), sweepCap)
+    const visualSectorEndAngle = sectorStartAngle + visualSweep
     const stairCenter = { x: stair.position[0], y: stair.position[2] }
     const innerRadius = Math.max(
       stairType === 'spiral' ? 0.05 : 0.2,
@@ -396,6 +414,56 @@ export function buildStairFloorplan(
     }
   }
 
+  // Whole-stair rotation handle — sister to the 3D `stairRotateHandle`
+  // (arc-resize, curved-arrow). 2D doesn't have a dedicated curved-arrow
+  // primitive, so we emit a `move-arrow` with the `'stair-rotate'`
+  // affordance: the chevron sits at the stair's outer corner and a drag
+  // around the stair centre rotates the whole node. Placement mirrors
+  // the 3D handle:
+  //   - straight: at the +X / -Z corner of the run start
+  //   - curved / spiral: outer rim at the sweep-start side
+  // Position is computed in stair-local coords then rotated into plan
+  // coords by `R(-θ)` — matches the convention the curved sector emitter
+  // already uses (`sectorStartAngle = -stair.rotation - sweep/2`).
+  if (isSelected && !view?.moving) {
+    const cos = Math.cos(stair.rotation)
+    const sin = Math.sin(stair.rotation)
+    const cx = stair.position[0]
+    const cz = stair.position[2]
+    let localX: number
+    let localZ: number
+    if (stairType === 'straight') {
+      const stairWidth = Math.max(stair.width ?? 1, 0.4)
+      localX = stairWidth / 2 + STAIR_ROTATE_PLAN_OFFSET
+      localZ = -STAIR_ROTATE_PLAN_OFFSET
+    } else {
+      const isSpiral = stairType === 'spiral'
+      const innerR = Math.max(
+        isSpiral ? 0.05 : 0.2,
+        stair.innerRadius ?? (isSpiral ? 0.2 : 0.9),
+      )
+      const outerR = innerR + (stair.width ?? 1)
+      const sweep = stair.sweepAngle ?? (isSpiral ? Math.PI * 2 : Math.PI / 2)
+      const radius = outerR + STAIR_ROTATE_PLAN_OFFSET
+      const localAngle = -sweep / 2
+      localX = radius * Math.cos(localAngle)
+      localZ = radius * Math.sin(localAngle)
+    }
+    const planX = cx + localX * cos + localZ * sin
+    const planY = cz - localX * sin + localZ * cos
+    // The `rotate-arrow` icon is designed in a local frame where +X is
+    // the radial-outward direction from the pivot. `angle` selects that
+    // direction in plan coords; the arrowheads then read as tangential
+    // motion around the stair centre.
+    const radialAngle = Math.atan2(planY - cz, planX - cx)
+    children.push({
+      kind: 'rotate-arrow',
+      point: [planX, planY],
+      angle: radialAngle,
+      affordance: 'stair-rotate',
+    })
+  }
+
   // Move handle — orange dot at the stair root position. Same UX as
   // every other kind's `move-handle`: click to enter cursor-follow
   // mode, click again to commit.
diff --git a/packages/viewer/src/systems/stair/stair-system.tsx b/packages/viewer/src/systems/stair/stair-system.tsx
index 8157c1884..d581ff526 100644
--- a/packages/viewer/src/systems/stair/stair-system.tsx
+++ b/packages/viewer/src/systems/stair/stair-system.tsx
@@ -1,6 +1,7 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  getEffectiveNode,
   resolveLevelId,
   type StairNode,
   type StairSegmentNode,
@@ -84,13 +85,21 @@ export const StairSystem = () => {
 
     // --- Pass 1b: Sync chained transforms to individual segment meshes (edit mode) ---
     for (const stairId of parentsNeedingSegmentSync) {
-      const stairNode = nodes[stairId]
-      if (!stairNode || stairNode.type !== 'stair') continue
+      const baseStairNode = nodes[stairId]
+      if (!baseStairNode || baseStairNode.type !== 'stair') continue
+      // Merge any in-flight drag override (e.g. parent-stair rotate handle)
+      // so slab-elevation spatial queries match where the segments are
+      // actually being rendered. Without this, dragging the rotate gizmo
+      // looks up slabs at the pre-drag world XZ — if rotation carries a
+      // segment off the original slab footprint, getStairSlabElevation
+      // returns 0 and `group.position.y` collapses, dropping the flight
+      // or landing below the floor and out of view mid-drag.
+      const stairNode = getEffectiveNode(baseStairNode as StairNode)
       const group = sceneRegistry.nodes.get(stairId) as THREE.Group | undefined
       if (group) {
-        syncStairGroupElevation(stairNode as StairNode, group, nodes)
+        syncStairGroupElevation(stairNode, group, nodes)
       }
-      syncSegmentMeshTransforms(stairNode as StairNode, nodes)
+      syncSegmentMeshTransforms(stairNode, nodes)
     }
 
     // --- Pass 2: Process pending merged-stair updates (throttled) ---

From d1ed88d809c20685407dbefc70d8db54061a1a01 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Wed, 27 May 2026 10:44:53 +0530
Subject: [PATCH 38/48] registry: floorplanScope + movable capability; cursor
 focus under mouse
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Registry: duplicate-kind throws in production, warns in dev (HMR).
  New `kindsWithFloorplanScope('building')` and `isRegistryMovable`
  helpers; `resolveBuildingForLevel` extracted into spatial-grid-sync.
- Floorplan registry layer: building-scoped kinds (elevator today) now
  dispatched via `def.floorplanScope === 'building'` instead of a
  hardcoded `node.type === 'elevator'` arm.
- FloatingActionMenu: Move button gated by `isRegistryMovable(kind)`,
  replacing the 13-arm `node?.type === '…'` chain so adding a movable
  kind no longer touches this file.
- 2D cursor indicator: render at the raw mouse position in all modes
  (drop the snapped `cursorAnchorPosition` machinery) so the badge
  always sits under the cursor.
- 3D grid reveal ring: the shader's `positionLocal.xy` is in
  grid-mesh-local space, but the cursor uniform was in world coords —
  so the ring drifted by the building's world XZ. Store the last world
  cursor and re-derive the local uniform every frame after the mesh's
  XZ lerp, so the ring stays locked under the mouse including during
  the catch-up frames after a building rotation commits.
- Roof system: tighten the merged-shell filter's type predicate so TS
  narrows `n` before `hasSegmentMaterialOverride(n)`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/ifc-converter/next-env.d.ts              |  2 +-
 .../hooks/spatial-grid/spatial-grid-sync.ts   | 34 +++++++++
 packages/core/src/index.ts                    |  1 +
 packages/core/src/registry/index.ts           |  2 +
 packages/core/src/registry/registry.ts        | 72 ++++++++++++++++---
 packages/core/src/registry/types.ts           | 12 ++++
 .../floorplan-cursor-indicator-overlay.tsx    |  4 +-
 .../renderers/floorplan-registry-layer.tsx    | 49 +++++--------
 .../editor/floating-action-menu.tsx           | 23 +++---
 .../src/components/editor/floorplan-panel.tsx | 27 -------
 .../editor/src/components/editor/grid.tsx     | 23 +++++-
 packages/nodes/src/elevator/definition.ts     |  8 +++
 packages/nodes/src/elevator/floorplan.ts      |  8 ++-
 .../viewer/src/systems/roof/roof-system.tsx   |  2 +-
 14 files changed, 174 insertions(+), 93 deletions(-)

diff --git a/apps/ifc-converter/next-env.d.ts b/apps/ifc-converter/next-env.d.ts
index 9edff1c7c..c4b7818fb 100644
--- a/apps/ifc-converter/next-env.d.ts
+++ b/apps/ifc-converter/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/packages/core/src/hooks/spatial-grid/spatial-grid-sync.ts b/packages/core/src/hooks/spatial-grid/spatial-grid-sync.ts
index 3829c4b98..5825bcb0a 100644
--- a/packages/core/src/hooks/spatial-grid/spatial-grid-sync.ts
+++ b/packages/core/src/hooks/spatial-grid/spatial-grid-sync.ts
@@ -28,6 +28,40 @@ export function resolveLevelId(node: AnyNode, nodes: Record<string, AnyNode>): s
   return 'default' // fallback for orphaned items
 }
 
+/**
+ * Returns the building id that contains the given level, or `null` if
+ * the level is unparented or no enclosing building exists.
+ *
+ * Most scenes record the relationship via `level.parentId →
+ * building.id`, but older serialisations occasionally drop `parentId`
+ * even though the building's `children` array still references the
+ * level. The fallback scan covers that case.
+ *
+ * Used by `FloorplanRegistryLayer` to discover building-scoped kinds
+ * (`def.floorplanScope === 'building'`) without hardcoding any kind
+ * name in the editor layer.
+ */
+export function resolveBuildingForLevel(
+  levelId: AnyNodeId,
+  nodes: Record<AnyNodeId, AnyNode>,
+): AnyNodeId | null {
+  const level = nodes[levelId] as AnyNode | undefined
+  if (!level) return null
+  const directParent = (level as { parentId?: AnyNodeId | null }).parentId ?? null
+  if (directParent) {
+    const candidate = nodes[directParent]
+    if (candidate?.type === 'building') return candidate.id as AnyNodeId
+  }
+  for (const candidate of Object.values(nodes)) {
+    if (candidate?.type !== 'building') continue
+    const children = (candidate as { children?: AnyNodeId[] }).children
+    if (Array.isArray(children) && children.includes(levelId)) {
+      return candidate.id as AnyNodeId
+    }
+  }
+  return null
+}
+
 // Call this once at app initialization. Returns an unsubscribe function that
 // detaches the scene-store listener (useful when the editor is unmounted so
 // the spatial grid singleton does not hold stale references to old scenes).
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 402289e77..86499ae9f 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -40,6 +40,7 @@ export {
 export { pointInPolygon, spatialGridManager } from './hooks/spatial-grid/spatial-grid-manager'
 export {
   initSpatialGridSync,
+  resolveBuildingForLevel,
   resolveLevelId,
 } from './hooks/spatial-grid/spatial-grid-sync'
 export { useSpatialQuery } from './hooks/spatial-grid/use-spatial-query'
diff --git a/packages/core/src/registry/index.ts b/packages/core/src/registry/index.ts
index 1b6a9ed30..69ff7ebe9 100644
--- a/packages/core/src/registry/index.ts
+++ b/packages/core/src/registry/index.ts
@@ -1,7 +1,9 @@
 export {
   discoverPlugins,
   getSelectableKinds,
+  isRegistryMovable,
   isRegistrySelectable,
+  kindsWithFloorplanScope,
   loadPlugin,
   nodeRegistry,
   type PluginDiscovery,
diff --git a/packages/core/src/registry/registry.ts b/packages/core/src/registry/registry.ts
index be9e30d95..8cfbea8c9 100644
--- a/packages/core/src/registry/registry.ts
+++ b/packages/core/src/registry/registry.ts
@@ -3,6 +3,23 @@ import type { AnyNodeDefinition, NodeRegistry, Plugin } from './types'
 
 const HOST_API_VERSION = 1 as const
 
+// True in dev / test builds, false in production. Tries Vite's
+// `import.meta.env.DEV` first (the editor app's bundler) and falls back
+// to `process.env.NODE_ENV !== 'production'` for Node test runners.
+function isDevMode(): boolean {
+  try {
+    const meta = import.meta as { env?: { DEV?: boolean } }
+    if (typeof meta?.env?.DEV === 'boolean') return meta.env.DEV
+  } catch {
+    // import.meta unavailable in some CJS contexts — fall through.
+  }
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV) {
+    return process.env.NODE_ENV !== 'production'
+  }
+  // No environment signal — be safe and treat as production.
+  return false
+}
+
 class NodeRegistryImpl implements NodeRegistry {
   private readonly defs = new Map<string, AnyNodeDefinition>()
 
@@ -36,17 +53,20 @@ class NodeRegistryImpl implements NodeRegistry {
         `[registry] NodeDefinition.schemaVersion must be a positive integer (kind: "${def.kind}")`,
       )
     }
-    // Replace on duplicate rather than throw. The previous behaviour
-    // (throw on `defs.has(kind)`) broke HMR for `def.ts` edits: every
-    // save would either re-execute the module and crash on the second
-    // `registerNode(...)` call, or skip the re-execute entirely and
-    // leave the running app with the original descriptor. Editing
-    // `handles` / `placement.rotationY` / etc. looked like a no-op
-    // because the old object was still pinned. In production we
-    // register each kind exactly once, so silently overwriting only
-    // matters in dev — where it's the desired behaviour.
+    // Duplicate-kind handling depends on environment:
+    //   - **Production**: throw. The plugin-authoring contract
+    //     (`wiki/architecture/plugin-authoring.md`) guarantees that two
+    //     plugins shipping `kind: 'couch'` is a startup-time error, not
+    //     a silent overwrite — collisions need to be visible.
+    //   - **Dev (HMR)**: replace with a warning. Saving `def.ts` would
+    //     otherwise either crash on re-execute or skip it entirely,
+    //     leaving stale descriptors pinned in memory.
     if (this.defs.has(def.kind)) {
-      console.warn(`[registry] re-registering node kind "${def.kind}" (HMR)`)
+      if (isDevMode()) {
+        console.warn(`[registry] re-registering node kind "${def.kind}" (HMR)`)
+      } else {
+        throw new Error(`[registry] duplicate node kind: "${def.kind}" already registered`)
+      }
     }
     this.defs.set(def.kind, def)
   }
@@ -94,6 +114,38 @@ export function isRegistrySelectable(kind: string): boolean {
   return nodeRegistry.get(kind)?.capabilities.selectable !== undefined
 }
 
+/**
+ * Kinds whose `def.floorplanScope` matches the requested scope. Used by
+ * `FloorplanRegistryLayer` to discover building-scoped kinds (e.g.
+ * elevator) without hardcoding kind names in the editor layer. `'level'`
+ * is the default, so `kindsWithFloorplanScope('level')` includes kinds
+ * that didn't set the field at all.
+ */
+export function kindsWithFloorplanScope(scope: 'level' | 'building'): string[] {
+  const result: string[] = []
+  for (const [kind, def] of nodeRegistry.entries()) {
+    const declared = def.floorplanScope ?? 'level'
+    if (declared === scope) result.push(kind)
+  }
+  return result
+}
+
+/**
+ * Returns true when the kind is movable from a 2D floor-plan handle —
+ * either via `capabilities.movable`, an explicit
+ * `def.floorplanMoveTarget`, or an `affordanceTools.move` 3D mover that
+ * the floating action menu can engage. Replaces the kind-name ternary
+ * chain in `floating-action-menu.tsx`.
+ */
+export function isRegistryMovable(kind: string): boolean {
+  const def = nodeRegistry.get(kind)
+  if (!def) return false
+  if (def.capabilities.movable !== undefined) return true
+  if (def.floorplanMoveTarget !== undefined) return true
+  if (def.affordanceTools?.move !== undefined) return true
+  return false
+}
+
 export async function loadPlugin(plugin: Plugin): Promise<void> {
   if (plugin.apiVersion !== HOST_API_VERSION) {
     throw new Error(
diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index 90f02aa9a..53168180f 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -698,6 +698,18 @@ export type NodeDefinition<S extends ZodObject<any>> = {
    * the legacy `floorplan-panel.tsx` monolith.
    */
   floorplan?: (node: z.infer<S>, ctx: GeometryContext) => FloorplanGeometry | null
+  /**
+   * Which scope the floor-plan layer walks to find instances of this
+   * kind. Default `'level'` — the layer's DFS from the active level id
+   * picks the node up via its parent chain. `'building'` — the kind
+   * lives as a sibling of levels (elevator is the canonical example:
+   * elevators are parented to the *building*, not a level, but the
+   * floor-plan should still surface them for every level inside that
+   * building). For `'building'`-scoped kinds the layer iterates every
+   * instance whose parent matches the active level's building, and
+   * synthesises a `GeometryContext` whose `parent` is the active level.
+   */
+  floorplanScope?: 'level' | 'building'
   /**
    * 2D drag affordances keyed by the string identifier emitted on
    * `endpoint-handle` (and similar interactive floor-plan primitives) via
diff --git a/packages/editor/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx b/packages/editor/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx
index 152eca79f..64dbf2903 100644
--- a/packages/editor/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx
+++ b/packages/editor/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx
@@ -23,7 +23,6 @@ type FloorplanCursorIndicator =
 
 type FloorplanCursorIndicatorOverlayProps = {
   cursorPosition: SvgPoint | null
-  cursorAnchorPosition: SvgPoint | null
   floorplanSelectionTool: FloorplanSelectionTool
   movingOpeningType: 'door' | 'window' | null
   isPanning: boolean
@@ -35,7 +34,6 @@ type FloorplanCursorIndicatorOverlayProps = {
 
 export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndicatorOverlay({
   cursorPosition,
-  cursorAnchorPosition,
   floorplanSelectionTool,
   movingOpeningType,
   isPanning,
@@ -81,7 +79,7 @@ export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndi
     return null
   }, [activeFloorplanToolConfig, floorplanSelectionTool, mode, structureLayer])
 
-  const position = mode === 'delete' ? cursorPosition : cursorAnchorPosition
+  const position = cursorPosition
 
   if (!(indicator && position) || isPanning) {
     return null
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
index e84fb05d3..3e875c866 100644
--- a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
@@ -8,8 +8,10 @@ import {
   type FloorplanGeometry,
   type FloorplanPalette,
   type GeometryContext,
+  kindsWithFloorplanScope,
   nodeRegistry,
   pauseSceneHistory,
+  resolveBuildingForLevel,
   resumeSceneHistory,
   useInteractive,
   useLiveNodeOverrides,
@@ -332,40 +334,25 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
 
     visit(levelId as AnyNodeId)
 
-    // Elevators live under the building (siblings of levels), not under
-    // the level — so the `visit(levelId)` DFS above never reaches them.
-    // Emit a separate pass that walks every elevator in the scene whose
-    // building contains the active level. The elevator's real
-    // `parentId` stays pointing to the building (so
-    // `resolveElevatorServiceLevelIds`, which looks up
-    // `elevator.parentId` to find the building, keeps working), but we
-    // synthesise a `GeometryContext` whose `parent` is the active level
-    // — that's what `buildElevatorFloorplan` reads via `ctx.parent?.id`
-    // to decide whether this floor is within the elevator's service
-    // range.
+    // Building-scoped kinds (`def.floorplanScope === 'building'`) live
+    // as siblings of the level, not under it — the `visit(levelId)` DFS
+    // above doesn't reach them. Walk every node of those kinds whose
+    // parent matches the active level's building, and synthesise a
+    // `GeometryContext` whose `parent` is the active level (so kind
+    // builders that gate on the current floor — e.g. elevator service
+    // range — keep working). Pure registry-driven dispatch: no kind
+    // name appears in this file.
     const activeLevelNode = nodes[levelId as AnyNodeId] as AnyNode | undefined
-    // The level's `parentId` is sometimes null in scenes that came from
-    // older serialisations even though the building's `children` array
-    // still contains the level id. Trust `parentId` first, then fall
-    // back to scanning buildings whose `children` include this level.
-    let activeBuildingId: AnyNodeId | null = (
-      activeLevelNode as unknown as { parentId?: AnyNodeId | null } | undefined
-    )?.parentId ?? null
-    if (!activeBuildingId && activeLevelNode) {
-      for (const [bid, candidate] of Object.entries(nodes)) {
-        if (candidate?.type !== 'building') continue
-        const cChildren = (candidate as unknown as { children?: AnyNodeId[] }).children
-        if (Array.isArray(cChildren) && cChildren.includes(levelId as AnyNodeId)) {
-          activeBuildingId = bid as AnyNodeId
-          break
-        }
-      }
-    }
+    const activeBuildingId = activeLevelNode
+      ? resolveBuildingForLevel(levelId as AnyNodeId, nodes)
+      : null
     if (activeLevelNode && activeBuildingId) {
+      const buildingScopedKinds = kindsWithFloorplanScope('building')
+      const buildingScopedKindSet = new Set(buildingScopedKinds)
       for (const [id, node] of Object.entries(nodes)) {
-        if (!node || node.type !== 'elevator') continue
-        const elevatorParentId = (node as unknown as { parentId?: AnyNodeId | null }).parentId
-        if (elevatorParentId !== activeBuildingId) continue
+        if (!node || !buildingScopedKindSet.has(node.type)) continue
+        const parentId = (node as { parentId?: AnyNodeId | null }).parentId
+        if (parentId !== activeBuildingId) continue
         const cid = id as AnyNodeId
         const def = nodeRegistry.get(node.type)
         const builder = def?.floorplan
diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index 469baa52e..2efd1ec27 100644
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -10,6 +10,7 @@ import {
   FenceNode,
   generateId,
   ItemNode,
+  isRegistryMovable,
   isRegistrySelectable,
   nodeRegistry,
   RoofSegmentNode,
@@ -446,21 +447,13 @@ export function FloatingActionMenu() {
                   : undefined
               }
               onMove={
-                node?.type === 'column' ||
-                node?.type === 'wall' ||
-                node?.type === 'door' ||
-                node?.type === 'window' ||
-                node?.type === 'fence' ||
-                node?.type === 'elevator' ||
-                node?.type === 'stair' ||
-                node?.type === 'stair-segment' ||
-                node?.type === 'slab' ||
-                node?.type === 'ceiling' ||
-                node?.type === 'shelf' ||
-                node?.type === 'roof-segment' ||
-                node?.type === 'roof'
-                  ? handleMove
-                  : undefined
+                // Registry-driven: any kind that declares
+                // `capabilities.movable`, a `floorplanMoveTarget`, or a
+                // 3D `affordanceTools.move` mover gets the Move button.
+                // Replaces the previous 13-arm `node?.type === '…'`
+                // chain so adding a new movable kind doesn't touch this
+                // file.
+                node && isRegistryMovable(node.type) ? handleMove : undefined
               }
               onDelete={handleDelete}
               onDuplicate={
diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index 7f5548d0e..6ecd1cd03 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -5459,32 +5459,6 @@ export function FloorplanPanel() {
     () => Math.max(floorplanWorldUnitsPerPixel * 0.55, 0.0001),
     [floorplanWorldUnitsPerPixel],
   )
-  const floorplanCursorAnchorPosition = useMemo(() => {
-    if (
-      cursorPoint &&
-      surfaceSize.width > 0 &&
-      surfaceSize.height > 0 &&
-      viewBox.width > 0 &&
-      viewBox.height > 0
-    ) {
-      return projectSvgPointToSurface(
-        rotateSvgPoint(toSvgPlanPoint(cursorPoint), floorplanSceneRotationDeg),
-        viewBox,
-        surfaceSize,
-      )
-    }
-
-    return floorplanCursorPosition
-  }, [
-    cursorPoint,
-    floorplanCursorPosition,
-    floorplanSceneRotationDeg,
-    surfaceSize,
-    surfaceSize.height,
-    surfaceSize.width,
-    viewBox,
-  ])
-
   useEffect(() => {
     setHoveredGuideCorner(null)
   }, [])
@@ -8610,7 +8584,6 @@ export function FloorplanPanel() {
       <FloorplanSiteKeyHandler onRestoreGroundLevel={restoreGroundLevelStructureSelection} />
       <div className="relative min-h-0 flex-1" ref={viewportHostRef}>
         <Editor2dFloorplanCursorIndicatorOverlay
-          cursorAnchorPosition={floorplanCursorAnchorPosition}
           cursorColor={floorplanCursorColor}
           cursorPosition={floorplanCursorPosition}
           floorplanSelectionTool={floorplanSelectionTool}
diff --git a/packages/editor/src/components/editor/grid.tsx b/packages/editor/src/components/editor/grid.tsx
index 7b05e7452..72cb80f06 100644
--- a/packages/editor/src/components/editor/grid.tsx
+++ b/packages/editor/src/components/editor/grid.tsx
@@ -118,10 +118,18 @@ export const Grid = ({
   // Use custom raycasting for grid events (independent of mesh events)
   useGridEvents(gridY)
 
-  // Update cursor position from grid:move events
+  // Track the last world-space cursor hit. The reveal-fade shader reads
+  // `positionLocal.xy` (vertex position on the un-transformed plane), and
+  // the mesh's -π/2 X rotation maps `positionLocal.y` to world `-Z`
+  // relative to the mesh origin. The mesh origin itself is lerped each
+  // frame toward the active building's world XZ (see `useFrame` below),
+  // so the local-frame cursor must be recomputed every frame from the
+  // stored world cursor — otherwise the ring drifts whenever the grid is
+  // mid-lerp (e.g. just after a building rotation commits).
+  const lastWorldCursorRef = useRef<{ x: number; z: number } | null>(null)
   useEffect(() => {
     const onGridMove = (event: GridEvent) => {
-      cursorPositionRef.current.set(event.position[0], -event.position[2])
+      lastWorldCursorRef.current = { x: event.position[0], z: event.position[2] }
     }
 
     emitter.on('grid:move', onGridMove)
@@ -160,6 +168,17 @@ export const Grid = ({
     const newY = MathUtils.lerp(gridRef.current.position.y, targetY, t)
     gridRef.current.position.y = newY
     setGridY(newY)
+
+    // Re-derive the local-frame cursor uniform after the grid's XZ has
+    // lerped this frame, so the reveal ring stays locked under the world
+    // cursor even when the grid origin is mid-transition.
+    const world = lastWorldCursorRef.current
+    if (world) {
+      cursorPositionRef.current.set(
+        world.x - gridRef.current.position.x,
+        -(world.z - gridRef.current.position.z),
+      )
+    }
   })
 
   const showGrid = useViewer((state) => state.showGrid)
diff --git a/packages/nodes/src/elevator/definition.ts b/packages/nodes/src/elevator/definition.ts
index 948790c9a..cf101303f 100644
--- a/packages/nodes/src/elevator/definition.ts
+++ b/packages/nodes/src/elevator/definition.ts
@@ -185,6 +185,14 @@ export const elevatorDefinition: NodeDefinition<typeof ElevatorNode> = {
     priority: 3,
   },
   floorplan: buildElevatorFloorplan,
+  // Elevators are parented to the building (siblings of levels), so the
+  // floor-plan layer's level-rooted DFS never reaches them. Declaring
+  // `floorplanScope: 'building'` tells `FloorplanRegistryLayer` to walk
+  // building-scoped kinds separately and synthesise `ctx.parent` as the
+  // active level — that's what `buildElevatorFloorplan` reads via
+  // `ctx.parent?.id` to decide whether this floor is in the elevator's
+  // service range.
+  floorplanScope: 'building',
   // 2D drag affordance for the rotate-arrow emitted at the elevator's
   // front-right corner. Body move uses the generic move-arrow / move-
   // handle path emitted by the floor-plan builder.
diff --git a/packages/nodes/src/elevator/floorplan.ts b/packages/nodes/src/elevator/floorplan.ts
index a2da8d9df..70c519f53 100644
--- a/packages/nodes/src/elevator/floorplan.ts
+++ b/packages/nodes/src/elevator/floorplan.ts
@@ -68,9 +68,11 @@ export function buildElevatorFloorplan(
   const cos = Math.cos(display.rotation)
   const sin = Math.sin(display.rotation)
   const rotate = (lx: number, ly: number): [number, number] => {
-    // Same clockwise convention as `rotatePlanVector` in editor — see
-    // `wiki/architecture/tools.md` for why every plan-space rotation
-    // uses this matrix and not the standard counter-clockwise one.
+    // Negated-rotation matrix (equivalent to rotating by `-rotation`)
+    // so SVG's CW-with-y-down `rotate` direction visually matches
+    // Three.js Y-rotation (CCW from a top-down view). Column / shelf /
+    // roof-segment do the same thing explicitly via `-node.rotation`
+    // passed to `rotatePlanVector`; this is the inline version.
     return [lx * cos + ly * sin, -lx * sin + ly * cos]
   }
   const toPlan = (lx: number, ly: number): FloorplanPoint => {
diff --git a/packages/viewer/src/systems/roof/roof-system.tsx b/packages/viewer/src/systems/roof/roof-system.tsx
index 55702d31f..e2e690949 100644
--- a/packages/viewer/src/systems/roof/roof-system.tsx
+++ b/packages/viewer/src/systems/roof/roof-system.tsx
@@ -236,7 +236,7 @@ function updateMergedRoofGeometry(
       const scn = nodes[id] as RoofSegmentNode | undefined
       return scn ? getEffectiveNode(scn) : undefined
     })
-    .filter((n): n is RoofSegmentNode => Boolean(n) && !hasSegmentMaterialOverride(n))
+    .filter((n): n is RoofSegmentNode => n !== undefined && !hasSegmentMaterialOverride(n))
 
   if (children.length === 0) {
     mergedMesh.geometry.dispose()

From e89a82285b8fa375ca939f5701651ba16589db19 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Wed, 27 May 2026 11:40:34 +0530
Subject: [PATCH 39/48] =?UTF-8?q?wall:=20corner=20billboard,=20perpendicul?=
 =?UTF-8?q?ar=20grid=20snap,=20drop=2045=C2=B0=20from=20move/draft?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Corner picker discs (3D move + wall corner leader) now solve
  `parentWorld⁻¹ · cameraWorld` so they face the camera even when an
  ancestor building/level has a rotation; the old `camera.quaternion`
  copy silently broke under any parent rotation.
- Side-handle wall move snaps the wall centre's *absolute* perpendicular
  projection to grid lines, so axis-aligned walls land on real grid
  positions regardless of where they started.
- Wall draft + endpoint move (3D and 2D) drop the 45°-from-start angle
  snap. It was useful for picking a direction during the very first
  draft, but during a perpendicular endpoint drag it pulls the cursor
  onto a 45° ray from the fixed corner instead of tracking the grid.
- Shift now selects the fine grid step (`WALL_FINE_GRID_STEP = 0.05`)
  for precision placement in every wall snap call site, replacing the
  former "Shift = bypass angle snap" semantics with a consistent
  "Shift = finer snap" convention.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/editor/floorplan-panel.tsx | 13 ++++--
 .../components/editor/node-arrow-handles.tsx  | 21 +++++++--
 .../editor/wall-move-side-handles.tsx         | 22 ++++++++--
 .../components/tools/wall/wall-drafting.ts    |  9 +++-
 packages/editor/src/index.tsx                 |  1 +
 .../nodes/src/wall/floorplan-affordances.ts   |  8 +++-
 .../nodes/src/wall/move-endpoint-tool.tsx     | 14 +++++-
 packages/nodes/src/wall/move-tool.tsx         | 44 +++++++++++++++----
 packages/nodes/src/wall/tool.tsx              | 19 +++++---
 9 files changed, 118 insertions(+), 33 deletions(-)

diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index 6ecd1cd03..209d69cee 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -108,6 +108,7 @@ import {
   createWallOnCurrentLevel,
   isWallLongEnough,
   snapWallDraftPoint,
+  WALL_FINE_GRID_STEP,
   WALL_GRID_STEP,
   type WallPlanPoint,
 } from '../tools/wall/wall-drafting'
@@ -6679,12 +6680,14 @@ export function FloorplanPanel() {
           return
         }
 
+        // Wall endpoint move: grid snap only (no 45° angle snap from the
+        // fixed corner — that's draft-only behaviour). Shift switches
+        // to the fine grid step for precision.
         const snappedPoint = snapWallDraftPoint({
           point: planPoint,
           walls,
-          start: dragState.fixedPoint,
-          angleSnap: !shiftPressed,
           ignoreWallIds: [dragState.wallId],
+          step: shiftPressed ? WALL_FINE_GRID_STEP : undefined,
         })
 
         if (pointsEqual(dragState.currentPoint, snappedPoint)) {
@@ -7375,11 +7378,13 @@ export function FloorplanPanel() {
         return
       }
 
+      // Wall draft: grid snap only — orthogonal walls follow naturally
+      // from a grid-aligned start. Shift switches to the fine grid step
+      // (0.05m) for precision.
       const snappedPoint = snapWallDraftPoint({
         point: planPoint,
         walls,
-        start: draftStart ?? undefined,
-        angleSnap: Boolean(draftStart) && !shiftPressed,
+        step: shiftPressed ? WALL_FINE_GRID_STEP : undefined,
       })
 
       // Emit `grid:move` so the registry-driven wall tool's 3D preview
diff --git a/packages/editor/src/components/editor/node-arrow-handles.tsx b/packages/editor/src/components/editor/node-arrow-handles.tsx
index 2f9f6cf20..c01843539 100644
--- a/packages/editor/src/components/editor/node-arrow-handles.tsx
+++ b/packages/editor/src/components/editor/node-arrow-handles.tsx
@@ -31,6 +31,7 @@ import {
   type Object3D,
   OrthographicCamera,
   Plane,
+  Quaternion,
   RingGeometry,
   Shape,
   Vector2,
@@ -1101,11 +1102,23 @@ function CornerPickerShape({
   const billboardRef = useRef<Group>(null)
   const { camera } = useThree()
   // Billboard the disc to the camera so the picker remains readable at any
-  // viewing angle. Assumes the parent level has no rotation (the standard
-  // case for walls / fences).
+  // viewing angle. The disc lives under the building-rotated tool group
+  // (and possibly a rotated level), so copying `camera.quaternion` onto
+  // the local quaternion no longer yields camera-aligned WORLD rotation
+  // when the parent has a rotation of its own — compute the local
+  // quaternion that, composed with the parent's world rotation, equals
+  // the camera's world rotation.
+  const parentWorldQuat = useMemo(() => new Quaternion(), [])
+  const invParentWorldQuat = useMemo(() => new Quaternion(), [])
   useFrame(() => {
-    if (billboardRef.current) {
-      billboardRef.current.quaternion.copy(camera.quaternion)
+    const group = billboardRef.current
+    if (!group) return
+    if (group.parent) {
+      group.parent.getWorldQuaternion(parentWorldQuat)
+      invParentWorldQuat.copy(parentWorldQuat).invert()
+      group.quaternion.copy(invParentWorldQuat).multiply(camera.quaternion)
+    } else {
+      group.quaternion.copy(camera.quaternion)
     }
   })
 
diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
index 28db46071..b236b7729 100644
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -25,6 +25,7 @@ import {
   type Object3D,
   OrthographicCamera,
   Plane,
+  Quaternion,
   Shape,
   Vector2,
   Vector3,
@@ -213,6 +214,7 @@ function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint:
   const [isHovered, setIsHovered] = useState(false)
   const { camera } = useThree()
   const billboardRef = useRef<Group>(null)
+  const parentWorldQuaternionRef = useRef(new Quaternion())
   const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
   const scale = (isHovered ? 1.25 : 1) * zoom
 
@@ -275,11 +277,23 @@ function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint:
   useEffect(() => () => ringMaterial.dispose(), [ringMaterial])
 
   // Billboard the hex disc to the camera so the picker is always
-  // recognisable regardless of viewing angle. Assumes the parent level
-  // has no rotation, which is the standard case.
+  // recognisable regardless of viewing angle.
+  //
+  // Why parent-aware: the disc lives under a `createPortal` into the
+  // level object, which itself sits under a building. Both can have
+  // non-identity world rotations. `quaternion.copy(camera.quaternion)`
+  // alone sets the LOCAL quaternion, so any ancestor rotation rotates
+  // the disc away from the camera. We instead solve for a local
+  // quaternion whose composition with the parent world quaternion
+  // equals the camera's: `local = parentWorld⁻¹ · cameraWorld`.
   useFrame(() => {
-    if (billboardRef.current) {
-      billboardRef.current.quaternion.copy(camera.quaternion)
+    const billboard = billboardRef.current
+    if (!billboard) return
+    billboard.quaternion.copy(camera.quaternion)
+    const parent = billboard.parent
+    if (parent) {
+      parent.getWorldQuaternion(parentWorldQuaternionRef.current)
+      billboard.quaternion.premultiply(parentWorldQuaternionRef.current.invert())
     }
   })
 
diff --git a/packages/editor/src/components/tools/wall/wall-drafting.ts b/packages/editor/src/components/tools/wall/wall-drafting.ts
index 9eee0d6fb..64b2c4be1 100644
--- a/packages/editor/src/components/tools/wall/wall-drafting.ts
+++ b/packages/editor/src/components/tools/wall/wall-drafting.ts
@@ -19,6 +19,9 @@ import useEditor from '../../../store/use-editor'
 export type WallPlanPoint = [number, number]
 
 export const WALL_GRID_STEP = 0.5
+// Smallest available grid snap. Used as a precision-mode step (Shift +
+// drag) so a drag can land on values the regular grid skips.
+export const WALL_FINE_GRID_STEP = 0.05
 export const WALL_JOIN_SNAP_RADIUS = 0.35
 export const WALL_MIN_LENGTH = 0.01
 const DEFAULT_WALL_ANGLE_SNAP_STEP = Math.PI / 4
@@ -377,9 +380,11 @@ export function snapWallDraftPoint(args: {
   start?: WallPlanPoint
   angleSnap?: boolean
   ignoreWallIds?: string[]
+  /** Override the grid step (e.g. `WALL_FINE_GRID_STEP` for precision mode). */
+  step?: number
 }): WallPlanPoint {
-  const { point, walls, start, angleSnap = false, ignoreWallIds } = args
-  const step = getWallGridStep()
+  const { point, walls, start, angleSnap = false, ignoreWallIds, step: overrideStep } = args
+  const step = overrideStep ?? getWallGridStep()
   const angleStep = getWallAngleSnapStep(step)
   const basePoint =
     start && angleSnap
diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx
index ebee4a158..f328c98e5 100644
--- a/packages/editor/src/index.tsx
+++ b/packages/editor/src/index.tsx
@@ -86,6 +86,7 @@ export {
   snapPointToGrid,
   snapScalarToGrid,
   snapWallDraftPoint,
+  WALL_FINE_GRID_STEP,
   type WallPlanPoint,
 } from './components/tools/wall/wall-drafting'
 export { CameraActions as ViewerToolbarRight } from './components/ui/action-menu/camera-actions'
diff --git a/packages/nodes/src/wall/floorplan-affordances.ts b/packages/nodes/src/wall/floorplan-affordances.ts
index de92a3ae6..b32c2b0c9 100644
--- a/packages/nodes/src/wall/floorplan-affordances.ts
+++ b/packages/nodes/src/wall/floorplan-affordances.ts
@@ -15,6 +15,7 @@ import {
   isWallLongEnough,
   snapScalarToGrid,
   snapWallDraftPoint,
+  WALL_FINE_GRID_STEP,
   type WallPlanPoint,
 } from '@pascal-app/editor'
 
@@ -179,12 +180,15 @@ export const wallMoveEndpointAffordance: FloorplanAffordance<WallNode> = {
         // the legacy flow.
         const sceneNodes = useScene.getState().nodes
         const walls = collectLevelWalls(sceneNodes, node.id)
+        // Endpoint move = grid snap, never 45° from the fixed corner —
+        // the angle snap is for initial draft only. Shift switches to
+        // the fine grid step for precision, matching the 3D
+        // `MoveWallEndpointTool`.
         const snapped = snapWallDraftPoint({
           point: planPoint as WallPlanPoint,
           walls,
-          start: fixedPoint,
-          angleSnap: !modifiers.shiftKey,
           ignoreWallIds: [node.id],
+          step: modifiers.shiftKey ? WALL_FINE_GRID_STEP : undefined,
         })
 
         const primaryStart: WallPlanPoint = endpoint === 'start' ? snapped : fixedPoint
diff --git a/packages/nodes/src/wall/move-endpoint-tool.tsx b/packages/nodes/src/wall/move-endpoint-tool.tsx
index 09228ebc9..452c6e7a6 100644
--- a/packages/nodes/src/wall/move-endpoint-tool.tsx
+++ b/packages/nodes/src/wall/move-endpoint-tool.tsx
@@ -20,6 +20,7 @@ import {
   snapWallDraftPoint,
   triggerSFX,
   useEditor,
+  WALL_FINE_GRID_STEP,
   type WallPlanPoint,
 } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
@@ -262,12 +263,21 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
 
     const onGridMove = (event: GridEvent) => {
       const planPoint: WallPlanPoint = [event.localPosition[0], event.localPosition[2]]
+      // Endpoint *move* snaps to the grid (and to other wall corners) —
+      // 45° angle snap is for the initial draft, where it gives clean
+      // orthogonal corners; here it would fight every perpendicular
+      // drag by warping the endpoint onto the nearest 45° line from
+      // the fixed corner.
+      //
+      // Shift switches to the *fine* grid step (`WALL_FINE_GRID_STEP`)
+      // for precision placement, so it can land on positions the
+      // active grid would skip (e.g. 0.05m increments when the active
+      // grid is 0.5m). It does NOT bypass snap.
       const snappedPoint = snapWallDraftPoint({
         point: planPoint,
         walls: levelWalls,
-        start: fixedPoint,
-        angleSnap: !shiftPressedRef.current,
         ignoreWallIds: [nodeId],
+        step: shiftPressedRef.current ? WALL_FINE_GRID_STEP : undefined,
       })
 
       if (
diff --git a/packages/nodes/src/wall/move-tool.tsx b/packages/nodes/src/wall/move-tool.tsx
index 8d74de8a5..2c1f27932 100644
--- a/packages/nodes/src/wall/move-tool.tsx
+++ b/packages/nodes/src/wall/move-tool.tsx
@@ -2,7 +2,6 @@
 
 import {
   type AnyNodeId,
-  constrainWallMoveDeltaToAxis,
   detectSpacesForLevel,
   emitter,
   type GridEvent,
@@ -386,17 +385,44 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
       const rawX = event.localPosition[0]
       const rawZ = event.localPosition[2]
       const snapStep = getWallGridStep()
-      const localX = shiftPressedRef.current ? rawX : snapScalarToGrid(rawX, snapStep)
-      const localZ = shiftPressedRef.current ? rawZ : snapScalarToGrid(rawZ, snapStep)
 
-      const anchor = dragAnchorRef.current ?? [localX, localZ]
+      // Anchor at the raw cursor so the displacement is measured in
+      // continuous space.
+      const anchor = dragAnchorRef.current ?? [rawX, rawZ]
       dragAnchorRef.current = anchor
 
-      const [deltaX, deltaZ] = constrainWallMoveDeltaToAxis(
-        localX - anchor[0],
-        localZ - anchor[1],
-        moveAxisRef.current,
-      )
+      const rawDeltaX = rawX - anchor[0]
+      const rawDeltaZ = rawZ - anchor[1]
+
+      // When the move is axis-locked (side-handle drag), snap the wall
+      // center's absolute perpendicular offset to a multiple of
+      // `snapStep`. For axis-aligned walls this puts the wall on grid
+      // lines along its normal regardless of the wall's starting
+      // position; for diagonal walls the wall steps in exact
+      // `snapStep` increments along its normal.
+      //
+      // Why absolute (perp · centre) rather than `delta` snap: snapping
+      // the displacement alone preserves any pre-existing off-grid
+      // offset, so the wall could only ever sit at `originalCentre ±
+      // k·snapStep` — never on actual grid lines. Snapping the wall's
+      // own perpendicular coordinate fixes that.
+      const axis = moveAxisRef.current
+      let deltaX: number
+      let deltaZ: number
+      if (axis) {
+        const originalProj = originalCenter[0] * axis[0] + originalCenter[1] * axis[1]
+        const rawProj = originalProj + rawDeltaX * axis[0] + rawDeltaZ * axis[1]
+        const snappedProj = shiftPressedRef.current
+          ? rawProj
+          : snapScalarToGrid(rawProj, snapStep)
+        const perpDelta = snappedProj - originalProj
+        deltaX = axis[0] * perpDelta
+        deltaZ = axis[1] * perpDelta
+      } else {
+        deltaX = shiftPressedRef.current ? rawDeltaX : snapScalarToGrid(rawDeltaX, snapStep)
+        deltaZ = shiftPressedRef.current ? rawDeltaZ : snapScalarToGrid(rawDeltaZ, snapStep)
+      }
+
       const constrainedGridPos: [number, number] = [anchor[0] + deltaX, anchor[1] + deltaZ]
 
       if (
diff --git a/packages/nodes/src/wall/tool.tsx b/packages/nodes/src/wall/tool.tsx
index 3003728fb..d9d743053 100644
--- a/packages/nodes/src/wall/tool.tsx
+++ b/packages/nodes/src/wall/tool.tsx
@@ -21,6 +21,7 @@ import {
   type SegmentAngleReference,
   snapWallDraftPoint,
   triggerSFX,
+  WALL_FINE_GRID_STEP,
   type WallPlanPoint,
 } from '@pascal-app/editor'
 import { getSceneTheme, useViewer } from '@pascal-app/viewer'
@@ -407,14 +408,19 @@ export const WallTool: React.FC = () => {
 
       const walls = getCurrentLevelWalls()
       const localPoint: WallPlanPoint = [event.localPosition[0], event.localPosition[2]]
-      gridPosition = snapWallDraftPoint({ point: localPoint, walls })
+      // Default to the active grid step; Shift switches to the fine
+      // step (0.05m) for precision. No 45° angle snap — we want the
+      // cursor to track grid lines in every direction. Orthogonal
+      // walls fall out of grid snap naturally when the start sits on
+      // a grid intersection.
+      const step = shiftPressed.current ? WALL_FINE_GRID_STEP : undefined
+      gridPosition = snapWallDraftPoint({ point: localPoint, walls, step })
 
       if (buildingState.current === 1) {
         const snappedLocal = snapWallDraftPoint({
           point: localPoint,
           walls,
-          start: [startingPoint.current.x, startingPoint.current.z],
-          angleSnap: !shiftPressed.current,
+          step,
         })
         endingPoint.current.set(snappedLocal[0], event.localPosition[1], snappedLocal[1])
         cursorRef.current.position.copy(endingPoint.current)
@@ -453,8 +459,10 @@ export const WallTool: React.FC = () => {
       const walls = getCurrentLevelWalls()
       const localClick: WallPlanPoint = [event.localPosition[0], event.localPosition[2]]
 
+      const clickStep = shiftPressed.current ? WALL_FINE_GRID_STEP : undefined
+
       if (buildingState.current === 0) {
-        const snappedStart = snapWallDraftPoint({ point: localClick, walls })
+        const snappedStart = snapWallDraftPoint({ point: localClick, walls, step: clickStep })
         gridPosition = snappedStart
         startingPoint.current.set(snappedStart[0], event.localPosition[1], snappedStart[1])
         endingPoint.current.copy(startingPoint.current)
@@ -471,8 +479,7 @@ export const WallTool: React.FC = () => {
         const snappedEnd = snapWallDraftPoint({
           point: localClick,
           walls,
-          start: [startingPoint.current.x, startingPoint.current.z],
-          angleSnap: !shiftPressed.current,
+          step: clickStep,
         })
         const dx = snappedEnd[0] - startingPoint.current.x
         const dz = snappedEnd[1] - startingPoint.current.z

From fbb48418b2d0d507fb19713c5c43257bfdda0e77 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Wed, 27 May 2026 11:52:40 +0530
Subject: [PATCH 40/48] =?UTF-8?q?fence:=20drop=2045=C2=B0=20angle=20snap?=
 =?UTF-8?q?=20from=20draft=20+=20endpoint=20move,=20Shift=20=3D=20fine=20s?=
 =?UTF-8?q?tep?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mirrors the wall convention shipped in e89a8228:

- `snapFenceDraftPoint` gains an optional `step` override.
- Fence draft (3D `tool.tsx` and 2D `floorplan-panel.tsx`,
  `use-floorplan-background-placement.ts`) snaps to the active grid
  step only — no 45°-from-start snap. Shift switches to
  `WALL_FINE_GRID_STEP` for precision placement.
- Fence endpoint move (3D `actions/move-endpoint.ts` and 2D
  `floorplan-affordances.ts`) drops `start`/`angleSnap` so a
  perpendicular drag tracks the grid instead of pulling onto a 45°
  ray from the fixed endpoint. Shift switches to the fine step.

Also fixes the matching wall click path in
`use-floorplan-background-placement.ts:215` that was missed in
e89a8228, plus its locally-injected `snapWallDraftPoint` signature.

Side-handle perpendicular slide (`fence/move-tool.tsx`) was already
grid-snap-only without 45°, so it's untouched.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/editor/floorplan-panel.tsx |  6 ++++--
 .../use-floorplan-background-placement.ts     | 13 ++++++------
 .../components/tools/fence/fence-drafting.ts  |  6 ++++--
 .../nodes/src/fence/actions/move-endpoint.ts  | 13 +++++++++---
 .../nodes/src/fence/floorplan-affordances.ts  |  7 +++++--
 packages/nodes/src/fence/tool.tsx             | 20 +++++++++++++------
 6 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index 209d69cee..c6bcff7c3 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -7262,12 +7262,14 @@ export function FloorplanPanel() {
       if (isFenceBuildActive) {
         emitFloorplanGridEvent('move', planPoint, event)
 
+        // Fence draft: grid snap only — orthogonal fences fall out of
+        // a grid-aligned start. Shift switches to the fine grid step
+        // for precision. Mirrors `wall/tool.tsx`.
         const snappedPoint = snapFenceDraftPoint({
           point: planPoint,
           walls,
           fences,
-          start: fenceDraftStart ?? undefined,
-          angleSnap: Boolean(fenceDraftStart) && !shiftPressed,
+          step: shiftPressed ? WALL_FINE_GRID_STEP : undefined,
         })
 
         setCursorPoint((previousPoint) =>
diff --git a/packages/editor/src/components/editor/use-floorplan-background-placement.ts b/packages/editor/src/components/editor/use-floorplan-background-placement.ts
index 41e93713e..126b3ebe4 100644
--- a/packages/editor/src/components/editor/use-floorplan-background-placement.ts
+++ b/packages/editor/src/components/editor/use-floorplan-background-placement.ts
@@ -4,7 +4,7 @@ import { emitter, type FenceNode, isCurvedWall, type WallNode } from '@pascal-ap
 import { type MouseEvent as ReactMouseEvent, useCallback } from 'react'
 import { getPlanPointDistance } from '../../lib/floorplan'
 import { snapFenceDraftPoint } from '../tools/fence/fence-drafting'
-import type { WallPlanPoint } from '../tools/wall/wall-drafting'
+import { WALL_FINE_GRID_STEP, type WallPlanPoint } from '../tools/wall/wall-drafting'
 
 type UseFloorplanBackgroundPlacementArgs = {
   activePolygonDraftPoints: WallPlanPoint[]
@@ -53,7 +53,8 @@ type UseFloorplanBackgroundPlacementArgs = {
     point: WallPlanPoint
     walls: WallNode[]
     start?: WallPlanPoint
-    angleSnap: boolean
+    angleSnap?: boolean
+    step?: number
   }) => WallPlanPoint
   snapPolygonDraftPoint: (args: {
     point: WallPlanPoint
@@ -156,12 +157,12 @@ export function useFloorplanBackgroundPlacement({
       if (isFenceBuildActive) {
         emitFloorplanGridEvent('click', planPoint, event)
 
+        // Fence draft: grid snap only; Shift = fine step. See `wall/tool.tsx`.
         const snappedPoint = snapFenceDraftPoint({
           point: planPoint,
           walls,
           fences,
-          start: fenceDraftStart ?? undefined,
-          angleSnap: Boolean(fenceDraftStart) && !shiftPressed,
+          step: shiftPressed ? WALL_FINE_GRID_STEP : undefined,
         })
 
         setCursorPoint(snappedPoint)
@@ -212,11 +213,11 @@ export function useFloorplanBackgroundPlacement({
       // / draftEnd state in the floor plan would never update, leaving
       // the dashed-line draft preview invisible.
       if (isWallBuildActive) {
+        // Wall draft: grid snap only; Shift = fine step. See `wall/tool.tsx`.
         const snappedPoint = snapWallDraftPoint({
           point: planPoint,
           walls,
-          start: draftStart ?? undefined,
-          angleSnap: Boolean(draftStart) && !shiftPressed,
+          step: shiftPressed ? WALL_FINE_GRID_STEP : undefined,
         })
 
         emitFloorplanGridEvent('click', snappedPoint, event)
diff --git a/packages/editor/src/components/tools/fence/fence-drafting.ts b/packages/editor/src/components/tools/fence/fence-drafting.ts
index d3af19f81..150b3de2c 100644
--- a/packages/editor/src/components/tools/fence/fence-drafting.ts
+++ b/packages/editor/src/components/tools/fence/fence-drafting.ts
@@ -131,9 +131,11 @@ export function snapFenceDraftPoint(args: {
   start?: FencePlanPoint
   angleSnap?: boolean
   ignoreFenceIds?: string[]
+  /** Override the grid step (e.g. `WALL_FINE_GRID_STEP` for precision mode). */
+  step?: number
 }): FencePlanPoint {
-  const { point, walls, fences, start, angleSnap = false, ignoreFenceIds } = args
-  const gridStep = getWallGridStep()
+  const { point, walls, fences, start, angleSnap = false, ignoreFenceIds, step } = args
+  const gridStep = step ?? getWallGridStep()
   const angleStep = getWallAngleSnapStep(gridStep)
   const basePoint =
     start && angleSnap
diff --git a/packages/nodes/src/fence/actions/move-endpoint.ts b/packages/nodes/src/fence/actions/move-endpoint.ts
index e79a2738f..2572145bc 100644
--- a/packages/nodes/src/fence/actions/move-endpoint.ts
+++ b/packages/nodes/src/fence/actions/move-endpoint.ts
@@ -6,7 +6,12 @@ import {
   useScene,
   type WallNode,
 } from '@pascal-app/core'
-import { type FencePlanPoint, isWallLongEnough, snapFenceDraftPoint } from '@pascal-app/editor'
+import {
+  type FencePlanPoint,
+  isWallLongEnough,
+  snapFenceDraftPoint,
+  WALL_FINE_GRID_STEP,
+} from '@pascal-app/editor'
 
 /**
  * Phase 5 Stage D — move-fence-endpoint drag affordance.
@@ -143,13 +148,15 @@ export const moveFenceEndpointDragAction: DragAction<MoveFenceEndpointCtx, MoveF
 
     preview: (ctx, point, modifiers) => {
       const planPoint: FencePlanPoint = [point[0], point[1]]
+      // Endpoint move = grid snap only; the 45°-from-start angle snap
+      // is draft-only. Shift switches to the fine grid step for
+      // precision, mirroring the wall convention.
       const snapped = snapFenceDraftPoint({
         point: planPoint,
         walls: ctx.levelWalls,
         fences: ctx.levelFences,
-        start: ctx.fixedPoint,
-        angleSnap: !modifiers.shift,
         ignoreFenceIds: [ctx.fenceId as string],
+        step: modifiers.shift ? WALL_FINE_GRID_STEP : undefined,
       })
       const nextStart = ctx.endpoint === 'start' ? snapped : ctx.fixedPoint
       const nextEnd = ctx.endpoint === 'end' ? snapped : ctx.fixedPoint
diff --git a/packages/nodes/src/fence/floorplan-affordances.ts b/packages/nodes/src/fence/floorplan-affordances.ts
index 13249ce73..7f0e508c5 100644
--- a/packages/nodes/src/fence/floorplan-affordances.ts
+++ b/packages/nodes/src/fence/floorplan-affordances.ts
@@ -17,6 +17,7 @@ import {
   isWallLongEnough,
   snapFenceDraftPoint,
   snapScalarToGrid,
+  WALL_FINE_GRID_STEP,
 } from '@pascal-app/editor'
 
 /**
@@ -153,13 +154,15 @@ export const fenceMoveEndpointAffordance: FloorplanAffordance<FenceNode> = {
         // itself is excluded via `ignoreFenceIds`).
         const sceneNodes = useScene.getState().nodes
         const { walls: nextWalls, fences: nextFences } = collectLevel(sceneNodes, parentId)
+        // Endpoint move = grid snap only; the 45°-from-start angle
+        // snap is draft-only. Shift switches to the fine grid step for
+        // precision, matching the 3D fence endpoint action.
         const snapped = snapFenceDraftPoint({
           point: planPoint as FencePlanPoint,
           walls: nextWalls,
           fences: nextFences,
-          start: fixedPoint,
-          angleSnap: !modifiers.shiftKey,
           ignoreFenceIds: [node.id],
+          step: modifiers.shiftKey ? WALL_FINE_GRID_STEP : undefined,
         })
         const nextStart = endpoint === 'start' ? snapped : fixedPoint
         const nextEnd = endpoint === 'end' ? snapped : fixedPoint
diff --git a/packages/nodes/src/fence/tool.tsx b/packages/nodes/src/fence/tool.tsx
index 38ff867a6..8ed0ed7a6 100644
--- a/packages/nodes/src/fence/tool.tsx
+++ b/packages/nodes/src/fence/tool.tsx
@@ -25,6 +25,7 @@ import {
   type SegmentAngleReference,
   snapFenceDraftPoint,
   triggerSFX,
+  WALL_FINE_GRID_STEP,
 } from '@pascal-app/editor'
 import { getSceneTheme, useViewer } from '@pascal-app/viewer'
 import { Html } from '@react-three/drei'
@@ -437,14 +438,16 @@ export const FenceTool: React.FC = () => {
       if (!(cursorRef.current && previewRef.current)) return
       const { walls, fences } = getCurrentLevelElements()
       const localPoint: FencePlanPoint = [event.localPosition[0], event.localPosition[2]]
+      // Default = active grid step; Shift switches to the fine step
+      // (0.05m). No 45° angle snap — see `wall/tool.tsx` for rationale.
+      const step = shiftPressed.current ? WALL_FINE_GRID_STEP : undefined
 
       if (buildingState.current === 1) {
         const snappedLocal = snapFenceDraftPoint({
           point: localPoint,
           walls,
           fences,
-          start: [startingPoint.current.x, startingPoint.current.z],
-          angleSnap: !shiftPressed.current,
+          step,
         })
         endingPoint.current.set(snappedLocal[0], event.localPosition[1], snappedLocal[1])
         cursorRef.current.position.copy(endingPoint.current)
@@ -467,7 +470,7 @@ export const FenceTool: React.FC = () => {
           ),
         )
       } else {
-        const snappedPoint = snapFenceDraftPoint({ point: localPoint, walls, fences })
+        const snappedPoint = snapFenceDraftPoint({ point: localPoint, walls, fences, step })
         cursorRef.current.position.set(snappedPoint[0], event.localPosition[1], snappedPoint[1])
         setDraftMeasurement(null)
       }
@@ -481,9 +484,15 @@ export const FenceTool: React.FC = () => {
 
       const { walls, fences } = getCurrentLevelElements()
       const localClick: FencePlanPoint = [event.localPosition[0], event.localPosition[2]]
+      const clickStep = shiftPressed.current ? WALL_FINE_GRID_STEP : undefined
 
       if (buildingState.current === 0) {
-        const snappedStart = snapFenceDraftPoint({ point: localClick, walls, fences })
+        const snappedStart = snapFenceDraftPoint({
+          point: localClick,
+          walls,
+          fences,
+          step: clickStep,
+        })
         startingPoint.current.set(snappedStart[0], event.localPosition[1], snappedStart[1])
         endingPoint.current.copy(startingPoint.current)
         buildingState.current = 1
@@ -494,8 +503,7 @@ export const FenceTool: React.FC = () => {
           point: localClick,
           walls,
           fences,
-          start: [startingPoint.current.x, startingPoint.current.z],
-          angleSnap: !shiftPressed.current,
+          step: clickStep,
         })
         const dx = snappedEnd[0] - startingPoint.current.x
         const dz = snappedEnd[1] - startingPoint.current.z

From 4474f9788f0b61c87bde330276db034dacc1524b Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Wed, 27 May 2026 12:06:05 +0530
Subject: [PATCH 41/48] floorplan menu: show Move button for selected walls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removes the `node.type !== 'wall'` exclusion that hid the Move icon
on the 2D floor-plan floating menu for walls. The dispatcher already
has a working path for walls — `def.affordanceTools.move` routes to
`MoveWallTool` (perpendicular slide + linked-wall cascade) — so the
menu just needs to expose the button.

The original opt-out called the menu entry "redundant" because walls
also have side-arrow handles, but the user wants the same icon walls
get the same affordance as every other selected element in the
floating menu.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../editor-2d/floorplan-registry-action-menu.tsx   | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/editor/src/components/editor-2d/floorplan-registry-action-menu.tsx b/packages/editor/src/components/editor-2d/floorplan-registry-action-menu.tsx
index 4f1fce5ee..4fe78cf45 100644
--- a/packages/editor/src/components/editor-2d/floorplan-registry-action-menu.tsx
+++ b/packages/editor/src/components/editor-2d/floorplan-registry-action-menu.tsx
@@ -122,17 +122,13 @@ export function FloorplanRegistryActionMenu() {
   // Move button is enabled when any of:
   //   - `capabilities.movable` (generic translate-on-XZ — shelf / spawn / fence)
   //   - `def.floorplanMoveTarget` (anchor-aware 2D — door / window / item)
-  //   - `def.affordanceTools.move` (kind-owned 3D mover — slab / ceiling)
+  //   - `def.affordanceTools.move` (kind-owned 3D mover — slab / ceiling / wall)
   // From the menu's perspective all three are "this kind can move from
-  // the floor plan." The `MoveTool` dispatcher resolves the right path.
-  //
-  // Walls opt out: they expose move via the side-arrow handles emitted
-  // from `def.floorplan` (see `buildWallFloorplan`), so a menu button
-  // would be a redundant second entry point — and lets the user start a
-  // body-follow drag from anywhere, which we don't want for walls.
+  // the floor plan." The `MoveTool` dispatcher resolves the right path —
+  // walls land on their bespoke `MoveWallTool` (perpendicular slide
+  // with linked-wall cascade) via `affordanceTools.move`.
   const canMove =
-    node.type !== 'wall' &&
-    (!!def.capabilities.movable || !!def.floorplanMoveTarget || !!def.affordanceTools?.move)
+    !!def.capabilities.movable || !!def.floorplanMoveTarget || !!def.affordanceTools?.move
   const canDuplicate = def.capabilities.duplicable !== false
   const canDelete = def.capabilities.deletable !== false
   const canAddHole = node.type === 'slab' || node.type === 'ceiling'

From 3746d63659140929b82a89ed297e6c6191f5378a Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Wed, 27 May 2026 12:12:09 +0530
Subject: [PATCH 42/48] floorplan wall move: axis-lock to wall normal, match 3D
 MoveWallTool
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 2D `wallFloorplanMoveTarget` was applying the raw cursor delta in
XZ, so dragging a selected wall in the floor plan let it free-float
sideways and lengthwise. The 3D `MoveWallTool` constrains the same
drag to the wall's perpendicular axis (sideways slide only) — this
brings the 2D path into parity.

- Captures the wall's centre and the `getPerpendicularWallMoveAxis`
  normal at session start.
- Each tick, projects `originalCentre + rawDelta` onto the axis,
  snaps that absolute scalar to the active grid step, and translates
  the wall by `axis * perpDelta`. Same math as the 3D tool.
- Shift bypasses snap (raw projection), matching the 3D convention.
- Degenerate zero-length walls fall back to free XZ motion (rare;
  they're already destined for deletion via the junction planner).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/nodes/src/wall/floorplan-move.ts | 55 ++++++++++++++---------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/packages/nodes/src/wall/floorplan-move.ts b/packages/nodes/src/wall/floorplan-move.ts
index 5f3e18b97..3fc941816 100644
--- a/packages/nodes/src/wall/floorplan-move.ts
+++ b/packages/nodes/src/wall/floorplan-move.ts
@@ -3,6 +3,7 @@ import {
   type AnyNodeId,
   type FloorplanMoveTarget,
   type FloorplanMoveTargetSession,
+  getPerpendicularWallMoveAxis,
   getPlannedLinkedWallUpdates,
   planWallMoveJunctions,
   useLiveNodeOverrides,
@@ -14,7 +15,7 @@ import {
   getFloorplanWallThickness,
   getWallGridStep,
   isWallLongEnough,
-  snapPointToGrid,
+  snapScalarToGrid,
   useWallMoveGhosts,
   type WallMoveGhostBridge,
 } from '@pascal-app/editor'
@@ -61,6 +62,16 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
   const wallId = node.id as AnyNodeId
   const originalStart: WallPlanPoint = [node.start[0], node.start[1]]
   const originalEnd: WallPlanPoint = [node.end[0], node.end[1]]
+  const originalCenter: WallPlanPoint = [
+    (originalStart[0] + originalEnd[0]) / 2,
+    (originalStart[1] + originalEnd[1]) / 2,
+  ]
+  // Perpendicular (wall normal) axis — same lock the 3D `MoveWallTool`
+  // uses, so a 2D drag slides the wall sideways across its own
+  // direction rather than free-floating in XZ. `null` only for
+  // degenerate zero-length walls; we fall through to free motion in
+  // that case (the wall is going to be deleted anyway).
+  const moveAxis = getPerpendicularWallMoveAxis(originalStart, originalEnd)
   const isNew = !!(node.metadata as { isNew?: unknown } | null)?.isNew
 
   const linkedOriginals: LinkedWallSnapshot[] = isNew
@@ -73,11 +84,9 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
       })
 
   // Raw (un-snapped) cursor at drag start. Using the raw anchor lets the
-  // wall start respond to every sub-step cursor movement: the resulting
-  // wall position is rounded to absolute grid each tick, so the wall
-  // lands on grid lines (instead of the previous "delta from snapped
-  // anchor" path, which kept the wall at its original off-grid offset
-  // and introduced a half-step dead-zone before the first jump).
+  // wall respond to every sub-step cursor movement: the wall's
+  // perpendicular projection is snapped to grid each tick, so the wall
+  // lands on grid lines along its normal regardless of starting offset.
   let rawAnchor: WallPlanPoint | null = null
   let lastDelta: WallPlanPoint = [0, 0]
   let lastNextStart: WallPlanPoint = originalStart
@@ -94,25 +103,31 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
 
       const rawDx = planPoint[0] - rawAnchor[0]
       const rawDz = planPoint[1] - rawAnchor[1]
-
-      // Snap the wall's start to the absolute grid (not the cursor
-      // delta) so the wall actually lines up with grid lines, and the
-      // wall jumps to a new grid position the moment the cursor crosses
-      // the midpoint between two grid lines — no "half-step before
-      // anything happens" lag.
       const step = getWallGridStep()
-      const nextStart: WallPlanPoint = modifiers.shiftKey
-        ? [originalStart[0] + rawDx, originalStart[1] + rawDz]
-        : snapPointToGrid(
-            [originalStart[0] + rawDx, originalStart[1] + rawDz] as WallPlanPoint,
-            step,
-          )
 
-      const dx = nextStart[0] - originalStart[0]
-      const dz = nextStart[1] - originalStart[1]
+      // Axis-lock the move to the wall's perpendicular (normal). Project
+      // the original centre + raw cursor delta onto the axis, snap the
+      // absolute projection to a grid multiple, then translate the wall
+      // by `axis * perpDelta`. Matches `MoveWallTool` so 2D and 3D drag
+      // produce identical wall topology. Shift bypasses snap.
+      let dx: number
+      let dz: number
+      if (moveAxis) {
+        const originalProj = originalCenter[0] * moveAxis[0] + originalCenter[1] * moveAxis[1]
+        const rawProj = originalProj + rawDx * moveAxis[0] + rawDz * moveAxis[1]
+        const snappedProj = modifiers.shiftKey ? rawProj : snapScalarToGrid(rawProj, step)
+        const perpDelta = snappedProj - originalProj
+        dx = moveAxis[0] * perpDelta
+        dz = moveAxis[1] * perpDelta
+      } else {
+        dx = modifiers.shiftKey ? rawDx : snapScalarToGrid(rawDx, step)
+        dz = modifiers.shiftKey ? rawDz : snapScalarToGrid(rawDz, step)
+      }
+
       if (dx === lastDelta[0] && dz === lastDelta[1]) return
       lastDelta = [dx, dz]
 
+      const nextStart: WallPlanPoint = [originalStart[0] + dx, originalStart[1] + dz]
       const nextEnd: WallPlanPoint = [originalEnd[0] + dx, originalEnd[1] + dz]
       lastNextStart = nextStart
       lastNextEnd = nextEnd

From 8132c8f68de47c317999e76041a855dd11c17ac0 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Wed, 27 May 2026 12:18:49 +0530
Subject: [PATCH 43/48] floorplan move overlay: commit at last pointermove, not
 pointer-up
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The overlay used to re-run \`session.apply\` with the pointer-up
coordinates before committing, on the assumption that pointer-up
might fire without a preceding pointermove. Side effect: when the
pointer-up coord crossed a grid-snap boundary relative to the last
pointermove, the snap flipped to a different cell and the moved node
visibly jumped at release from where the drag had painted it.

Trust the last pointermove instead — modern browsers reliably emit a
final pointermove right before pointerup, and "what you saw is what
gets committed" is the UX users expect. The previous sub-pixel
drift fix loses to the visible boundary-jump it caused.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../floorplan-registry-move-overlay.tsx       | 35 ++++++++-----------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx b/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx
index 26f298474..433534708 100644
--- a/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx
+++ b/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx
@@ -236,26 +236,21 @@ export function FloorplanRegistryMoveOverlay() {
         // inside the SVG viewport, including empty grid background.
         if (!isPointerOverFloorplanScene(event.clientX, event.clientY)) return
 
-        // Apply once more at the pointer-up coords before committing.
-        // Browsers don't guarantee a pointermove fires right before
-        // pointerup — a quick click after a drag can land pointerup a
-        // few pixels past the last pointermove. Without this re-apply,
-        // the commit would freeze the item at the stale pointermove
-        // position, leaving a visible drift between where the user
-        // released the click and where the item lands.
-        const finalPlanPoint = toMeters(event.clientX, event.clientY)
-        if (finalPlanPoint) {
-          hasMovedSinceStart = true
-          session.apply({
-            planPoint: finalPlanPoint,
-            modifiers: {
-              shiftKey: event.shiftKey,
-              altKey: event.altKey,
-              ctrlKey: event.ctrlKey,
-              metaKey: event.metaKey,
-            },
-          })
-        }
+        // Commit using the LAST pointermove's state — no re-apply at
+        // pointer-up coords. A previous version re-applied here to
+        // close a sub-pixel "drift" window when pointer-up fires
+        // without a preceding pointermove, but that re-apply also
+        // re-snaps: if the pointer-up coord crosses a grid boundary
+        // relative to the last pointermove, the snapped result flips
+        // to a different grid cell and the wall (or other moved node)
+        // visibly jumps from where it was painted during the drag to
+        // a different commit position. Trusting the last pointermove
+        // means "what you saw is what gets committed", which is the
+        // UX users expect — at the cost of a sub-pixel drift in the
+        // rare case where the OS fires pointerup with no preceding
+        // pointermove. Modern browsers reliably emit a final
+        // pointermove right before pointerup, so the trade-off lands
+        // on the side of WYSIWYG.
 
         commitFinalStateOrRevert()
         setMovingNode(null)

From 3cc004c379aadb203e9cdac35e648c44136f2420 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Wed, 27 May 2026 14:46:04 +0530
Subject: [PATCH 44/48] floorplan: door wall-hit placement, fence/stair move
 fixes, wall auto-ceiling sync
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Door / window placement: registry layer entries no longer swallow
  pointer events while a door / window tool is active, so clicking
  ON a wall now triggers placement (previously only clicks NEAR a
  wall worked — the wall's registry-entry `<g>` was stopping the
  pointer event before it reached the SVG background handler that
  emits `wall:click`).
- Fence floor-plan move: 3D `MoveFenceTool` now respects
  `movingNodeOrigin === '2d'` on unmount. Without the guard, the 2D
  overlay's commit would call `setMovingNode(null)`, unmounting the
  3D tool, whose cleanup then ran `restoreOriginal()` and reverted
  the just-committed positions — the "fence reverts on commit"
  symptom. Mirrors the wall move-tool's existing guard.
- Stair floor-plan move: anchored, delta-based motion (was
  position-jumps-to-snapped-cursor), and reads `getWallGridStep()`
  instead of hard-coded 0.5 so the stair snaps to the editor's
  current grid step in real time. Matches the 3D `MoveRegistryNode`
  commit position.
- Stair segment length arrow: drop the placement `rotationY` —
  `axis: 'z'` already auto-rotates the chevron by `-π/2`, stacking
  another `-π/2` spun the tip to `-X` (sideways) instead of `+Z`
  (forward off the run). Matches shelf / roof-segment.
- Stair segment system: merge `useLiveNodeOverrides` when rebuilding
  geometry, chain transforms, merged mesh, and slab elevation, so
  width / length / height drags show the live value on the mesh and
  the store only gets the final tracked write on commit.
- Stair length arrow position: offset 0.06 m past the front edge so
  the head clears the stair fill and reads as pointing forward off
  the run rather than lying across the edge.
- Stair default railing mode: `'both'` for new placements (was
  `'right'`).
- Wall floor-plan move: anchored at first cursor sample (was raw
  centre) so the floating-menu drag-icon offset doesn't jump the
  wall to a different snap cell on grab.
- Wall move: live auto-slab + auto-ceiling preview via
  `useLiveNodeOverrides`. The store stays at pre-drag values during
  the drag; commit writes the final plan in one atomic
  `applyNodeChanges` (creates / updates / deletes deferred from
  per-tick to commit so undo rolls the whole topology change back
  in one step). Adds `planAutoCeilingsForLevel` + `AutoCeilingSyncPlan`
  exports mirroring the existing auto-slab planner.
- Wall draft: expose `WALL_ENDPOINT_SNAP_RADIUS` (0.7 m) for
  endpoint snap intent — strongest user intent (closing polygons,
  attaching to corners) wants a more generous radius than the
  generic join snap.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/core/src/index.ts                    |   2 +
 packages/core/src/lib/space-detection.ts      |  39 +++-
 .../renderers/floorplan-registry-layer.tsx    |  22 +-
 .../components/tools/stair/stair-defaults.ts  |   2 +-
 .../components/tools/wall/wall-drafting.ts    |  44 ++++
 packages/nodes/src/fence/move-tool.tsx        |  21 +-
 .../nodes/src/stair-segment/definition.ts     |   9 +-
 packages/nodes/src/stair/floorplan-move.ts    |  70 +++++--
 packages/nodes/src/stair/floorplan.ts         |  21 +-
 packages/nodes/src/wall/floorplan-move.ts     |  18 +-
 packages/nodes/src/wall/move-tool.tsx         | 189 ++++++++++++------
 .../viewer/src/systems/stair/stair-system.tsx |  21 +-
 12 files changed, 350 insertions(+), 108 deletions(-)

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 86499ae9f..3fa927f1d 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -54,9 +54,11 @@ export {
 } from './lib/door-operation'
 export { getRenderableSlabPolygon } from './lib/slab-polygon'
 export {
+  type AutoCeilingSyncPlan,
   type AutoSlabSyncPlan,
   detectSpacesForLevel,
   initSpaceDetectionSync,
+  planAutoCeilingsForLevel,
   planAutoSlabsForLevel,
   type Space,
   wallTouchesOthers,
diff --git a/packages/core/src/lib/space-detection.ts b/packages/core/src/lib/space-detection.ts
index 94a6e47b7..9670f0938 100644
--- a/packages/core/src/lib/space-detection.ts
+++ b/packages/core/src/lib/space-detection.ts
@@ -47,6 +47,12 @@ export type AutoSlabSyncPlan = {
   delete: Array<SlabNodeType['id']>
 }
 
+export type AutoCeilingSyncPlan = {
+  create: CeilingNodeType[]
+  update: Array<{ id: CeilingNodeType['id']; data: Partial<CeilingNodeType> }>
+  delete: Array<CeilingNodeType['id']>
+}
+
 const DEFAULT_AUTO_SLAB_ELEVATION = 0.05
 const DEFAULT_AUTO_CEILING_HEIGHT = 2.5
 const ROOM_CURVE_TOLERANCE = 0.04
@@ -650,12 +656,10 @@ function syncAutoSlabsForLevel(
   }
 }
 
-function syncAutoCeilingsForLevel(
-  levelId: string,
+export function planAutoCeilingsForLevel(
   roomPolygons: Point2D[][],
   existingCeilings: CeilingNodeType[],
-  sceneStore: any,
-) {
+): AutoCeilingSyncPlan {
   const manualCeilings = existingCeilings.filter((ceiling) => !ceiling.autoFromWalls)
   const manualSignatures = new Set(
     manualCeilings.map((ceiling) => polygonSignature(ceiling.polygon.map(pointFromTuple))),
@@ -782,16 +786,31 @@ function syncAutoCeilingsForLevel(
     )
   }
 
-  if (ceilingsToDelete.length > 0) {
-    sceneStore.getState().deleteNodes(ceilingsToDelete)
+  return {
+    create: ceilingsToCreate,
+    update: ceilingsToUpdate,
+    delete: ceilingsToDelete,
   }
+}
 
-  if (ceilingsToUpdate.length > 0) {
-    sceneStore.getState().updateNodes(ceilingsToUpdate)
+function syncAutoCeilingsForLevel(
+  levelId: string,
+  roomPolygons: Point2D[][],
+  existingCeilings: CeilingNodeType[],
+  sceneStore: any,
+) {
+  const plan = planAutoCeilingsForLevel(roomPolygons, existingCeilings)
+
+  if (plan.delete.length > 0) {
+    sceneStore.getState().deleteNodes(plan.delete)
   }
 
-  if (ceilingsToCreate.length > 0) {
-    sceneStore.getState().createNodes(ceilingsToCreate.map((node) => ({ node, parentId: levelId })))
+  if (plan.update.length > 0) {
+    sceneStore.getState().updateNodes(plan.update)
+  }
+
+  if (plan.create.length > 0) {
+    sceneStore.getState().createNodes(plan.create.map((node) => ({ node, parentId: levelId })))
   }
 }
 
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
index 3e875c866..080a99b11 100644
--- a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
@@ -152,6 +152,22 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   const renderCtx = useFloorplanRender()
   const movingNode = useEditor((s) => s.movingNode)
   const setMovingNode = useEditor((s) => s.setMovingNode)
+  // Door / window placement (both build and move) needs the SVG's
+  // background click handler to run — it finds the closest wall via
+  // `findClosestWallPoint` and emits `wall:click` for the door / window
+  // tool. When the user clicks *on top of* a wall in this mode, the
+  // wall's registry entry would otherwise swallow the click via
+  // `handleClickStop` / `handleSelect`, so the placement never fires.
+  // Pass clicks through in that case.
+  const editorPhase = useEditor((s) => s.phase)
+  const editorMode = useEditor((s) => s.mode)
+  const editorTool = useEditor((s) => s.tool)
+  const isOpeningPlacementActive =
+    (editorPhase === 'structure' &&
+      editorMode === 'build' &&
+      (editorTool === 'door' || editorTool === 'window')) ||
+    movingNode?.type === 'door' ||
+    movingNode?.type === 'window'
   // Subscribe to the live-transforms map ref so the layer re-renders
   // whenever a 3D mover publishes a per-frame position (see
   // `usePlacementCoordinator`). Without this the 2D floor plan only
@@ -618,8 +634,8 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       className="floorplan-registry-entry"
       data-node-id={id}
       key={key}
-      onClick={handleClickStop}
-      onPointerDown={(e) => handleSelect(id, e)}
+      onClick={isOpeningPlacementActive ? undefined : handleClickStop}
+      onPointerDown={isOpeningPlacementActive ? undefined : (e) => handleSelect(id, e)}
       // Mirror the sidebar tree nodes' hover wiring — `useViewer.
       // hoveredId` drives the highlight halo in 3D as well as the
       // wall / fence floor-plan hover stroke. Setting it on
@@ -679,7 +695,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
     // still propagate normally inside the registry tree.
     <g
       className="floorplan-registry-layer"
-      onClick={handleClickStop}
+      onClick={isOpeningPlacementActive ? undefined : handleClickStop}
       opacity={isAmbient ? 0.3 : undefined}
       style={isAmbient ? { pointerEvents: 'none' } : undefined}
     >
diff --git a/packages/editor/src/components/tools/stair/stair-defaults.ts b/packages/editor/src/components/tools/stair/stair-defaults.ts
index ace03f5e8..572d9d9e0 100644
--- a/packages/editor/src/components/tools/stair/stair-defaults.ts
+++ b/packages/editor/src/components/tools/stair/stair-defaults.ts
@@ -13,5 +13,5 @@ export const DEFAULT_SPIRAL_TOP_LANDING_MODE = 'none' as const
 export const DEFAULT_SPIRAL_TOP_LANDING_DEPTH = 0.9
 export const DEFAULT_SPIRAL_SHOW_CENTER_COLUMN = true
 export const DEFAULT_SPIRAL_SHOW_STEP_SUPPORTS = true
-export const DEFAULT_STAIR_RAILING_MODE = 'right' as const
+export const DEFAULT_STAIR_RAILING_MODE = 'both' as const
 export const DEFAULT_STAIR_RAILING_HEIGHT = 0.92
diff --git a/packages/editor/src/components/tools/wall/wall-drafting.ts b/packages/editor/src/components/tools/wall/wall-drafting.ts
index 64b2c4be1..93cbfc1a9 100644
--- a/packages/editor/src/components/tools/wall/wall-drafting.ts
+++ b/packages/editor/src/components/tools/wall/wall-drafting.ts
@@ -23,6 +23,11 @@ export const WALL_GRID_STEP = 0.5
 // drag) so a drag can land on values the regular grid skips.
 export const WALL_FINE_GRID_STEP = 0.05
 export const WALL_JOIN_SNAP_RADIUS = 0.35
+// Generous radius for snapping to an *existing* wall's endpoint while
+// drafting. Larger than `WALL_JOIN_SNAP_RADIUS` because endpoint snap
+// is the strongest user intent (closing a polygon, attaching to a
+// corner) and the cursor never lands pixel-perfect on a corner.
+export const WALL_ENDPOINT_SNAP_RADIUS = 0.7
 export const WALL_MIN_LENGTH = 0.01
 const DEFAULT_WALL_ANGLE_SNAP_STEP = Math.PI / 4
 
@@ -374,6 +379,36 @@ export function findWallSnapTarget(
   return bestTarget
 }
 
+/**
+ * Endpoint-only snap from the *raw* cursor (no grid pre-snap), with a
+ * generous radius. Use this before `findWallSnapTarget` so the strong
+ * "attach to an existing wall corner" intent isn't accidentally pushed
+ * out of range by an interim grid snap that moved the cursor away from
+ * the endpoint.
+ */
+function findWallEndpointFromRaw(
+  point: WallPlanPoint,
+  walls: WallNode[],
+  ignoreWallIds?: string[],
+): WallPlanPoint | null {
+  const ignored = new Set(ignoreWallIds ?? [])
+  const radiusSquared = WALL_ENDPOINT_SNAP_RADIUS ** 2
+  let best: WallPlanPoint | null = null
+  let bestDistSq = Number.POSITIVE_INFINITY
+
+  for (const wall of walls) {
+    if (ignored.has(wall.id)) continue
+    for (const corner of [wall.start, wall.end] as WallPlanPoint[]) {
+      const d = distanceSquared(point, corner)
+      if (d <= radiusSquared && d < bestDistSq) {
+        best = corner
+        bestDistSq = d
+      }
+    }
+  }
+  return best
+}
+
 export function snapWallDraftPoint(args: {
   point: WallPlanPoint
   walls: WallNode[]
@@ -384,6 +419,15 @@ export function snapWallDraftPoint(args: {
   step?: number
 }): WallPlanPoint {
   const { point, walls, start, angleSnap = false, ignoreWallIds, step: overrideStep } = args
+
+  // Endpoint of an existing wall wins outright when the cursor is
+  // anywhere within `WALL_ENDPOINT_SNAP_RADIUS` — closing a polygon or
+  // attaching to a corner should "just work" without needing
+  // pixel-perfect aim. Done from the raw cursor so it isn't masked by
+  // an interim grid snap that nudged us out of range.
+  const endpointSnap = findWallEndpointFromRaw(point, walls, ignoreWallIds)
+  if (endpointSnap) return endpointSnap
+
   const step = overrideStep ?? getWallGridStep()
   const angleStep = getWallAngleSnapStep(step)
   const basePoint =
diff --git a/packages/nodes/src/fence/move-tool.tsx b/packages/nodes/src/fence/move-tool.tsx
index 510629495..2831c2dcf 100644
--- a/packages/nodes/src/fence/move-tool.tsx
+++ b/packages/nodes/src/fence/move-tool.tsx
@@ -266,6 +266,10 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
       useViewer.getState().setSelection({ selectedIds: [fenceId] })
       useScene.temporal.getState().resume()
       markToolCancelConsumed()
+      // Claim teardown ownership so the 2D overlay doesn't redundantly
+      // revert the same baseline on its own cleanup. Mirrors wall's
+      // move-tool cancel path.
+      useEditor.getState().setMovingNodeOrigin('3d')
       exitMoveMode()
     }
 
@@ -275,7 +279,22 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
 
     return () => {
       if (!wasCommitted) {
-        restoreOriginal()
+        // The 2D `FloorplanRegistryMoveOverlay` mounts in parallel with
+        // this 3D tool whenever the user enters fence move mode from the
+        // floor plan. When the 2D overlay commits via
+        // `fenceFloorplanMoveTarget.commit()` it calls
+        // `setMovingNode(null)`, which unmounts this tool. Our local
+        // `wasCommitted` is still false (its own `onGridClick` never
+        // ran), so a blind `restoreOriginal()` here would overwrite the
+        // just-committed new positions back to the originals — the
+        // "fence reverts on commit" symptom users see in the 2D view.
+        // The 2D overlay sets `movingNodeOrigin = '2d'` before clearing
+        // movingNode; respect that flag and skip the restore. Mirrors
+        // the wall move-tool's `finalisedBy2D` guard.
+        const finalisedBy2D = useEditor.getState().movingNodeOrigin === '2d'
+        if (!finalisedBy2D) {
+          restoreOriginal()
+        }
       }
       useScene.temporal.getState().resume()
       emitter.off('grid:move', onGridMove)
diff --git a/packages/nodes/src/stair-segment/definition.ts b/packages/nodes/src/stair-segment/definition.ts
index 7ae9d0bbf..125788855 100644
--- a/packages/nodes/src/stair-segment/definition.ts
+++ b/packages/nodes/src/stair-segment/definition.ts
@@ -44,6 +44,14 @@ function stairSegmentWidthHandle(side: 'left' | 'right'): HandleDescriptor<Stair
 // Length: segment's back-face (Z = length) anchors against the chain end,
 // so the run simply extends toward +Z as length grows. anchor='min' →
 // drag +Z grows length 1:1.
+//
+// `rotationY` is intentionally omitted. The generic linear-arrow renderer
+// already auto-rotates `axis: 'z'` chevrons by `-π/2` so the local +X tip
+// faces +Z (see `axisRotationY` in `node-arrow-handles.tsx`). Adding our
+// own `-π/2` here stacks to `-π`, which spins the tip to `-X` and the
+// chevron reads as sideways across the front edge instead of pointing
+// forward off the run. Shelf / roof-segment depth handles match this —
+// neither sets `rotationY` for their `axis: 'z'` arrow.
 function stairSegmentLengthHandle(): HandleDescriptor<StairSegmentNodeType> {
   return {
     kind: 'linear-resize',
@@ -54,7 +62,6 @@ function stairSegmentLengthHandle(): HandleDescriptor<StairSegmentNodeType> {
     apply: (_n, newValue) => ({ length: newValue }),
     placement: {
       position: (n) => [0, n.height / 2, n.length + LENGTH_HANDLE_OFFSET],
-      rotationY: () => -Math.PI / 2,
     },
     portal: 'grandparent',
   }
diff --git a/packages/nodes/src/stair/floorplan-move.ts b/packages/nodes/src/stair/floorplan-move.ts
index ce6ee9188..606f8d10b 100644
--- a/packages/nodes/src/stair/floorplan-move.ts
+++ b/packages/nodes/src/stair/floorplan-move.ts
@@ -3,16 +3,33 @@ import {
   type FloorplanMoveTarget,
   type FloorplanMoveTargetSession,
   type StairNode,
-  snapPointToGrid,
+  snapScalar,
   useScene,
 } from '@pascal-app/core'
+import { getWallGridStep } from '@pascal-app/editor'
 
 /**
  * 2D floor-plan move handler for stair — kicks in when the user clicks
  * "Move" on the stair action menu and the floor-plan view is active.
- * Stairs are free-floating on the slab (no wall anchor), so the apply
- * logic is just: pointer in plan space → snap to 0.5 m grid (Shift
- * bypasses) → write `position` via `useScene.updateNodes`.
+ *
+ * **Delta-based motion, anchored on first pointermove.** The first
+ * `apply` only captures `rawAnchor` — the cursor's pointer position the
+ * instant the move begins — and skips writing to the scene. Subsequent
+ * applies translate the stair's original position by the cursor's raw
+ * delta and then snap the *absolute* result to the 0.5 m grid.
+ *
+ * Anchoring matters because the action-menu Move button portals to
+ * `document.body`, so the move starts with the cursor wherever the menu
+ * sits (often nowhere near the stair). The previous "position = snapped
+ * cursor" implementation made the stair teleport to the menu's screen
+ * position on the very first pointermove, which is the "drag doesn't
+ * happen properly" symptom. Mirrors the same anchor pattern wall's
+ * `floorplan-move.ts` uses.
+ *
+ * Snapping the absolute position (rather than the delta) keeps the
+ * stair on the same 0.5 m grid the 3D StairTool placement and 3D
+ * MoveRegistryNodeTool use — so dragging in 2D lands at the same
+ * grid intersections you'd hit dragging in 3D.
  *
  * Routing through `floorplanMoveTarget` (instead of the overlay's
  * generic Path 2 translate) fixes two latent bugs the generic path
@@ -20,11 +37,9 @@ import {
  *
  *   1. Path 2's `onPointerUp` bails when `event.target.closest(
  *      '[data-floorplan-scene]')` fails — which happens when the
- *      pointer-up lands on empty grid background (the SVG `<g>` only
- *      covers painted entries, so `target` resolves to the parent
- *      `<svg>` with no `[data-floorplan-scene]` ancestor). Path 1
- *      uses the overlay's bounding-rect check, which accepts any
- *      pointer inside the SVG viewport.
+ *      pointer-up lands on empty grid background. Path 1 uses the
+ *      overlay's bounding-rect check, which accepts any pointer
+ *      inside the SVG viewport.
  *   2. Path 2 commits via a single `updateNode` call that has no
  *      "self-owned commit" hook, so the overlay's diff path can
  *      silently revert when the final state matches the snapshot.
@@ -33,27 +48,46 @@ import {
  *      revert → resume → `session.commit()` path runs.
  */
 export const stairFloorplanMoveTarget: FloorplanMoveTarget<StairNode> = ({ node }) => {
-  // Y stays put — stair's elevation is set by its parent level, not by
-  // the 2D plan drag. Snapshot at start so apply() doesn't need to read
-  // it from a possibly-mutated scene each tick.
+  // Capture the stair's original position once — apply() reads these
+  // every tick instead of re-querying scene state (which would
+  // double-apply our own writes).
+  const originalX = node.position[0]
   const startY = node.position[1]
+  const originalZ = node.position[2]
 
-  // Track the last successful placement so `commit()` can write it
-  // atomically — see the comment on `commit` below.
+  let rawAnchor: [number, number] | null = null
   let lastValid: { position: [number, number, number] } | null = null
 
   const session: FloorplanMoveTargetSession = {
     affectedIds: [node.id as AnyNodeId],
     apply({ planPoint, modifiers }) {
-      const [sx, sz] = modifiers.shiftKey ? planPoint : snapPointToGrid(planPoint, 0.5)
+      if (!rawAnchor) {
+        rawAnchor = [planPoint[0], planPoint[1]]
+        return
+      }
+      const rawDx = planPoint[0] - rawAnchor[0]
+      const rawDz = planPoint[1] - rawAnchor[1]
+      // Snap the absolute new position to the editor's current grid
+      // step (the same one the cursor / draft snap to — driven by
+      // `useEditor.gridSnapStep`). Hardcoding 0.5 here caused the stair
+      // to snap to half-metre cells even when the user had set the grid
+      // to a finer step like 0.1, so the cursor and the stair SVG
+      // landed at different grid points. Shift bypasses snap entirely.
+      const step = getWallGridStep()
+      const rawX = originalX + rawDx
+      const rawZ = originalZ + rawDz
+      const sx = modifiers.shiftKey ? rawX : snapScalar(rawX, step)
+      const sz = modifiers.shiftKey ? rawZ : snapScalar(rawZ, step)
+
+      if (lastValid && lastValid.position[0] === sx && lastValid.position[2] === sz) return
       lastValid = { position: [sx, startY, sz] }
       useScene.getState().updateNodes([{ id: node.id as AnyNodeId, data: lastValid }])
     },
     canCommit() {
       // No overlap / placement rules for stairs in 2D — any pointer-up
-      // position commits. Mirrors the 3D move tool which also lets
-      // stairs land anywhere on the slab.
-      return true
+      // position commits, as long as we actually moved. Mirrors the 3D
+      // move tool which also lets stairs land anywhere on the slab.
+      return lastValid !== null
     },
     commit() {
       // Own the atomic write so the overlay takes the deterministic
diff --git a/packages/nodes/src/stair/floorplan.ts b/packages/nodes/src/stair/floorplan.ts
index 26c1dca15..75a751f46 100644
--- a/packages/nodes/src/stair/floorplan.ts
+++ b/packages/nodes/src/stair/floorplan.ts
@@ -144,7 +144,19 @@ export function buildStairFloorplan(
           ]
           const rightMid: [number, number] = [(c1.x + c2.x) / 2, (c1.y + c2.y) / 2]
           const leftMid: [number, number] = [(c0.x + c3.x) / 2, (c0.y + c3.y) / 2]
-          const frontMid: [number, number] = [(c2.x + c3.x) / 2, (c2.y + c3.y) / 2]
+          const frontEdgeMid: [number, number] = [(c2.x + c3.x) / 2, (c2.y + c3.y) / 2]
+          // Offset the length arrow's base OUT past the front edge so the
+          // shaft+head sit entirely beyond the stair body. The arrow path's
+          // own `bi` inset is only 0.03 m — short enough that the head can
+          // still overlap the stair fill at common zooms, which reads as
+          // "the arrow is lying along the edge / pointing sideways" instead
+          // of clearly pointing forward off the run. Pushing the anchor
+          // along +axisZ removes that ambiguity.
+          const segmentLengthArrowOffset = 0.06
+          const frontArrowAnchor: [number, number] = [
+            frontEdgeMid[0] + axisZ[0] * segmentLengthArrowOffset,
+            frontEdgeMid[1] + axisZ[1] * segmentLengthArrowOffset,
+          ]
           const segmentId = segmentEntry.segment.id
           children.push({
             kind: 'move-arrow',
@@ -160,9 +172,14 @@ export function buildStairFloorplan(
             affordance: 'segment-width',
             payload: { segmentId, side: 'left', axisX },
           })
+          // Length arrow — anchored just past the front edge, pointing in
+          // the segment's run direction (axisZ = back-to-front). After the
+          // SVG `rotate(angle)`, the arrow's local +X (its tip) lines up
+          // with +axisZ, so the head clearly extends forward off the front
+          // edge instead of sideways across it.
           children.push({
             kind: 'move-arrow',
-            point: frontMid,
+            point: frontArrowAnchor,
             angle: Math.atan2(axisZ[1], axisZ[0]),
             affordance: 'segment-length',
             payload: { segmentId, axisZ },
diff --git a/packages/nodes/src/wall/floorplan-move.ts b/packages/nodes/src/wall/floorplan-move.ts
index 3fc941816..d65da5dd3 100644
--- a/packages/nodes/src/wall/floorplan-move.ts
+++ b/packages/nodes/src/wall/floorplan-move.ts
@@ -83,10 +83,20 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
         originalEnd,
       })
 
-  // Raw (un-snapped) cursor at drag start. Using the raw anchor lets the
-  // wall respond to every sub-step cursor movement: the wall's
-  // perpendicular projection is snapped to grid each tick, so the wall
-  // lands on grid lines along its normal regardless of starting offset.
+  // Anchor lazily at the first cursor sample (the click point) and
+  // measure cursor movement from there. The wall doesn't shift on
+  // click — `rawDelta` is zero on the first apply, so the snapped
+  // centre projection equals `originalProj` (already grid-aligned for
+  // walls placed via the draft tool). As the cursor moves, the wall
+  // translates along its normal by the cursor's perpendicular delta,
+  // snapped to absolute grid lines.
+  //
+  // Using `originalCenter` as the anchor instead would pin the wall's
+  // centre to the cursor — but the floor-plan drag icon lives inside
+  // a floating menu whose hit-area is offset from the exact wall
+  // centre, so the first `planPoint` would never equal `originalCenter`
+  // and the wall would snap to a different grid cell the instant the
+  // drag began, even before the cursor moved.
   let rawAnchor: WallPlanPoint | null = null
   let lastDelta: WallPlanPoint = [0, 0]
   let lastNextStart: WallPlanPoint = originalStart
diff --git a/packages/nodes/src/wall/move-tool.tsx b/packages/nodes/src/wall/move-tool.tsx
index 2c1f27932..6db9f9111 100644
--- a/packages/nodes/src/wall/move-tool.tsx
+++ b/packages/nodes/src/wall/move-tool.tsx
@@ -2,16 +2,21 @@
 
 import {
   type AnyNodeId,
+  type AutoCeilingSyncPlan,
+  type AutoSlabSyncPlan,
+  type CeilingNode,
   detectSpacesForLevel,
   emitter,
   type GridEvent,
   getPerpendicularWallMoveAxis,
   getPlannedLinkedWallUpdates,
   pauseSceneHistory,
+  planAutoCeilingsForLevel,
   planAutoSlabsForLevel,
   planWallMoveJunctions,
   resumeSceneHistory,
   type SlabNode,
+  useLiveNodeOverrides,
   useScene,
   type WallMoveAxis,
   type WallMoveJunctionPlan,
@@ -69,27 +74,17 @@ function rotateVector([x, z]: [number, number], angle: number): [number, number]
   return [x * cos - z * sin, x * sin + z * cos]
 }
 
-function cloneSlabSnapshot(slab: SlabNode): SlabNode {
-  return {
-    ...slab,
-    polygon: slab.polygon.map(([x, z]) => [x, z] as [number, number]),
-    holes: slab.holes.map((hole) => hole.map(([x, z]) => [x, z] as [number, number])),
-    holeMetadata: slab.holeMetadata.map((metadata) => ({ ...metadata })),
-  }
-}
-
 function getLevelSlabs(levelId: string, nodes: ReturnType<typeof useScene.getState>['nodes']) {
   return Object.values(nodes).filter(
     (entry): entry is SlabNode => entry?.type === 'slab' && (entry.parentId ?? null) === levelId,
   )
 }
 
-function getLevelAutoSlabs(levelId: string, nodes: ReturnType<typeof useScene.getState>['nodes']) {
-  return getLevelSlabs(levelId, nodes).filter((slab) => slab.autoFromWalls)
-}
-
-function getLevelAutoSlabSnapshots(levelId: string) {
-  return getLevelAutoSlabs(levelId, useScene.getState().nodes).map(cloneSlabSnapshot)
+function getLevelCeilings(levelId: string, nodes: ReturnType<typeof useScene.getState>['nodes']) {
+  return Object.values(nodes).filter(
+    (entry): entry is CeilingNode =>
+      entry?.type === 'ceiling' && (entry.parentId ?? null) === levelId,
+  )
 }
 
 function setPreviewGeometryAttributes(
@@ -189,9 +184,6 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
           originalEnd: node.end,
         }),
   )
-  const originalAutoSlabsRef = useRef<SlabNode[]>(
-    node.parentId ? getLevelAutoSlabSnapshots(node.parentId) : [],
-  )
   const dragAnchorRef = useRef<[number, number] | null>(null)
   const nodeIdRef = useRef(node.id)
   const previewRef = useRef<{ start: [number, number]; end: [number, number] } | null>(null)
@@ -216,8 +208,6 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
     const originalCenter = originalCenterRef.current
     const originalHalfVector = originalHalfVectorRef.current
     const levelId = node.parentId ?? null
-    const originalAutoSlabs = originalAutoSlabsRef.current
-
     pauseSceneHistory(useScene)
     let shouldRestoreOnCleanup = true
 
@@ -235,72 +225,127 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
       }
     }
 
-    const applyLiveAutoSlabPreview = (walls: WallNode[]) => {
-      if (!levelId) {
-        return
-      }
+    // Live auto-slab / auto-ceiling preview. Calculates the new
+    // surfaces from the moving wall configuration each tick, then
+    // sends polygon overrides to `useLiveNodeOverrides` (and marks
+    // the slab / ceiling dirty) so `GeometrySystem` / `CeilingSystem`
+    // rebuild the mesh through the existing `getEffectiveNode` merge
+    // path. *Nothing* is written to the scene store during the drag —
+    // the store stays at pre-drag values; commit writes the final
+    // plan in one atomic `applyNodeChanges`. Mirrors the wall's own
+    // 2D drag pattern (`useLiveNodeOverrides` → mesh, store on
+    // commit).
+    //
+    // Creates / deletes from the plan are *deferred* to commit. We
+    // can't represent a "node that doesn't exist yet" through
+    // overrides, so newly-detected rooms only get their slab/ceiling
+    // materialised on release; rooms whose closing wall pulls away
+    // keep their slab/ceiling visible (at the original polygon) until
+    // commit clears them. UX-wise this trades the previous "ghost
+    // appears/disappears mid-drag" feedback for atomic, undoable
+    // commits — which is what the user asked for.
+    //
+    // `latestSurfacePlans` holds the most recent plan from the last
+    // live tick. `commitSurfacesToStore` flushes it (creates,
+    // updates, deletes) into the scene as part of the commit-time
+    // atomic write, then `clearSurfaceOverrides` drops the override
+    // map so the system reads from the now-committed store.
+    let latestSurfacePlans: { slabs: AutoSlabSyncPlan; ceilings: AutoCeilingSyncPlan } | null = null
+    const touchedSlabIds = new Set<AnyNodeId>()
+    const touchedCeilingIds = new Set<AnyNodeId>()
+
+    const publishLiveSurfaceOverrides = (walls: WallNode[]) => {
+      if (!levelId) return
 
       const levelWalls = walls.filter((wall) => (wall.parentId ?? null) === levelId)
       const sceneState = useScene.getState()
       const { roomPolygons } = detectSpacesForLevel(levelId, levelWalls)
+
+      // Plan against the pre-drag scene — `getLevelSlabs/Ceilings`
+      // reads from the unchanged store, so the matcher's "remap
+      // existing room → existing slab" logic sees stable IDs across
+      // ticks. Without this anchor, IDs would drift as overrides
+      // re-flowed through the planner.
       const slabPlan = planAutoSlabsForLevel(roomPolygons, getLevelSlabs(levelId, sceneState.nodes))
+      const ceilingPlan = planAutoCeilingsForLevel(
+        roomPolygons,
+        getLevelCeilings(levelId, sceneState.nodes),
+      )
 
-      if (
-        slabPlan.create.length === 0 &&
-        slabPlan.update.length === 0 &&
-        slabPlan.delete.length === 0
-      ) {
-        return
+      latestSurfacePlans = { slabs: slabPlan, ceilings: ceilingPlan }
+
+      const overrideEntries: Array<[string, Record<string, unknown>]> = []
+      for (const update of slabPlan.update) {
+        if (update.data.polygon === undefined) continue
+        overrideEntries.push([update.id, { polygon: update.data.polygon }])
+        touchedSlabIds.add(update.id as AnyNodeId)
+      }
+      for (const update of ceilingPlan.update) {
+        if (update.data.polygon === undefined) continue
+        overrideEntries.push([update.id, { polygon: update.data.polygon }])
+        touchedCeilingIds.add(update.id as AnyNodeId)
       }
 
-      sceneState.applyNodeChanges({
-        update: slabPlan.update.map((entry) => ({
+      if (overrideEntries.length > 0) {
+        useLiveNodeOverrides.getState().setMany(overrideEntries)
+        for (const [id] of overrideEntries) {
+          sceneState.markDirty(id as AnyNodeId)
+        }
+      }
+    }
+
+    // Commit-time: flush the last live plan into the scene store as
+    // one atomic write, then drop overrides so the renderer reads
+    // from the now-current store state. Called from `commitPreview`
+    // *while history is resumed*, so the entire surface delta is one
+    // undoable step alongside the wall update.
+    const commitSurfacesToStore = () => {
+      if (!levelId || !latestSurfacePlans) return
+
+      const { slabs, ceilings } = latestSurfacePlans
+      const update = [
+        ...slabs.update.map((entry) => ({
+          id: entry.id as AnyNodeId,
+          data: entry.data,
+        })),
+        ...ceilings.update.map((entry) => ({
           id: entry.id as AnyNodeId,
           data: entry.data,
         })),
-        create: slabPlan.create.map((slab) => ({
+      ]
+      const create = [
+        ...slabs.create.map((slab) => ({
           node: slab,
           parentId: levelId as AnyNodeId,
         })),
-        delete: slabPlan.delete.map((id) => id as AnyNodeId),
-      })
-    }
-
-    const restoreAutoSlabPreview = () => {
-      if (!levelId) {
-        return
-      }
-
-      const sceneState = useScene.getState()
-      const originalIds = new Set(originalAutoSlabs.map((slab) => slab.id))
-      const currentAutoSlabs = getLevelAutoSlabs(levelId, sceneState.nodes)
-      const update = originalAutoSlabs
-        .filter((slab) => sceneState.nodes[slab.id as AnyNodeId])
-        .map((slab) => ({
-          id: slab.id as AnyNodeId,
-          data: cloneSlabSnapshot(slab),
-        }))
-      const create = originalAutoSlabs
-        .filter((slab) => !sceneState.nodes[slab.id as AnyNodeId])
-        .map((slab) => ({
-          node: cloneSlabSnapshot(slab),
+        ...ceilings.create.map((ceiling) => ({
+          node: ceiling,
           parentId: levelId as AnyNodeId,
-        }))
-      const deleteIds = currentAutoSlabs
-        .filter((slab) => !originalIds.has(slab.id))
-        .map((slab) => slab.id as AnyNodeId)
+        })),
+      ]
+      const deleteIds = [
+        ...slabs.delete.map((id) => id as AnyNodeId),
+        ...ceilings.delete.map((id) => id as AnyNodeId),
+      ]
 
-      if (update.length === 0 && create.length === 0 && deleteIds.length === 0) {
-        return
-      }
+      if (update.length === 0 && create.length === 0 && deleteIds.length === 0) return
 
-      sceneState.applyNodeChanges({
+      useScene.getState().applyNodeChanges({
         update,
         create,
         delete: deleteIds,
       })
     }
 
+    const clearSurfaceOverrides = () => {
+      const overrides = useLiveNodeOverrides.getState()
+      for (const id of touchedSlabIds) overrides.clear(id)
+      for (const id of touchedCeilingIds) overrides.clear(id)
+      touchedSlabIds.clear()
+      touchedCeilingIds.clear()
+      latestSurfacePlans = null
+    }
+
     const buildWallFromCenter = (center: [number, number]) => {
       const rotatedHalf = rotateVector(originalHalfVector, pendingRotationRef.current)
       const nextStart: [number, number] = [center[0] - rotatedHalf[0], center[1] - rotatedHalf[1]]
@@ -369,7 +414,7 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
       const virtualBridgeWalls = bridgePreviews.map((preview) => preview.wall)
       setGhostWallPreviews(nextGhostWalls)
       applyNodePreview(previewUpdates)
-      applyLiveAutoSlabPreview([...previewSceneWalls, ...virtualBridgeWalls])
+      publishLiveSurfaceOverrides([...previewSceneWalls, ...virtualBridgeWalls])
     }
 
     const restoreOriginal = () => {
@@ -378,7 +423,10 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
         { id: nodeId, start: originalStart, end: originalEnd },
         ...linkedOriginalsRef.current,
       ])
-      restoreAutoSlabPreview()
+      // No scene rollback for surfaces — nothing was written. Just
+      // clear the live overrides so the renderer falls back to the
+      // (pre-drag, unchanged) store state.
+      clearSurfaceOverrides()
     }
 
     const onGridMove = (event: GridEvent) => {
@@ -447,12 +495,13 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
 
       // Restore original baseline while paused so the next resume+update
       // registers as a single tracked change (undo reverts to original).
+      // Surfaces stayed in the store the whole drag (override-driven
+      // mesh preview), so there's nothing to restore for them.
       setGhostWallPreviews([])
       applyNodePreview([
         { id: nodeId, start: originalStart, end: originalEnd },
         ...linkedOriginalsRef.current,
       ])
-      restoreAutoSlabPreview()
 
       resumeSceneHistory(useScene)
       const commitPlan = getMovePlan(preview.start, preview.end)
@@ -505,6 +554,14 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
         delete: Array.from(collapsedLinkedWallIds),
       })
 
+      // Flush the last live surface plan (slab + ceiling creates,
+      // updates, deletes) into the store while history is still
+      // resumed, so the surface delta joins the wall change as one
+      // undoable step. Then drop the live overrides — the renderer
+      // now reads the committed polygons directly.
+      commitSurfacesToStore()
+      clearSurfaceOverrides()
+
       pauseSceneHistory(useScene)
 
       // Claim teardown ownership so the 2D overlay's cleanup skips its
diff --git a/packages/viewer/src/systems/stair/stair-system.tsx b/packages/viewer/src/systems/stair/stair-system.tsx
index d581ff526..545df0457 100644
--- a/packages/viewer/src/systems/stair/stair-system.tsx
+++ b/packages/viewer/src/systems/stair/stair-system.tsx
@@ -54,8 +54,13 @@ export const StairSystem = () => {
         if (mesh) {
           const isVisible = mesh.parent?.visible !== false
           if (isVisible && segmentsProcessed < MAX_SEGMENTS_PER_FRAME) {
-            // Geometry will be updated; chained position is applied in the parent sync pass below
-            updateStairSegmentGeometry(node as StairSegmentNode, mesh)
+            // Geometry will be updated; chained position is applied in the parent sync pass below.
+            // Merge live overrides so width / length / height drags update the
+            // mesh in real time — the resize arrows publish to
+            // `useLiveNodeOverrides` and only commit to scene on pointer-up, so
+            // without this the geometry would rebuild from the pre-drag values.
+            const effectiveSegment = getEffectiveNode(node as StairSegmentNode)
+            updateStairSegmentGeometry(effectiveSegment, mesh)
             if (node.parentId) parentsNeedingSegmentSync.add(node.parentId as AnyNodeId)
             segmentsProcessed++
           } else if (isVisible) {
@@ -239,9 +244,14 @@ function updateStairSegmentGeometry(node: StairSegmentNode, mesh: THREE.Mesh) {
  * not by the node's stored position field.
  */
 function syncSegmentMeshTransforms(stairNode: StairNode, nodes: Record<string, AnyNode>) {
+  // Merge live overrides into each segment so the chain math reflects the
+  // in-flight drag (a width / length change shifts every downstream segment's
+  // anchor). Without this, dragging a width handle would resize the dragged
+  // segment's mesh but leave subsequent segments at their pre-drag positions.
   const segments = (stairNode.children ?? [])
     .map((childId) => nodes[childId as AnyNodeId] as StairSegmentNode | undefined)
     .filter((n): n is StairSegmentNode => n?.type === 'stair-segment')
+    .map((n) => getEffectiveNode(n))
 
   if (segments.length === 0) return
 
@@ -273,9 +283,11 @@ function getStairSlabElevation(
   stairNode: StairNode,
   nodes: Record<string, AnyNode>,
 ): number {
+  // Merge live overrides so slab queries match the visual chain during a drag.
   const segments = (stairNode.children ?? [])
     .map((childId) => nodes[childId as AnyNodeId] as StairSegmentNode | undefined)
     .filter((n): n is StairSegmentNode => n?.type === 'stair-segment')
+    .map((n) => getEffectiveNode(n))
 
   if (segments.length === 0) return 0
 
@@ -338,9 +350,14 @@ function updateMergedStairGeometry(
   }
 
   const children = stairNode.children ?? []
+  // Merge live overrides — same reason as `syncSegmentMeshTransforms`: a
+  // width / length / height drag publishes the new value to
+  // `useLiveNodeOverrides`, so the merged geometry has to read through that
+  // overlay or the merged mesh stays at pre-drag values until pointer-up.
   const segments = children
     .map((childId) => nodes[childId as AnyNodeId] as StairSegmentNode | undefined)
     .filter((n): n is StairSegmentNode => n?.type === 'stair-segment')
+    .map((n) => getEffectiveNode(n))
 
   if (segments.length === 0) {
     replaceMeshGeometry(mergedMesh, createEmptyGeometry())

From eea1e30cebd0cf567482893a095d866a7fc4c41e Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Wed, 27 May 2026 15:22:29 +0530
Subject: [PATCH 45/48] open-pr skill: refresh existing PR description instead
 of bailing

Adds a 3b branch to the open-pr skill: when gh pr view finds an
existing PR, regenerate the body from current branch commits/diff
while preserving Screenshots verbatim and the user's checklist
tick state, then apply via gh pr edit. Previously the skill would
print the URL and exit, leaving stale descriptions on long-lived
feature branches.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .agents/skills/open-pr/SKILL.md | 41 ++++++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/.agents/skills/open-pr/SKILL.md b/.agents/skills/open-pr/SKILL.md
index ceab50457..d3492d713 100644
--- a/.agents/skills/open-pr/SKILL.md
+++ b/.agents/skills/open-pr/SKILL.md
@@ -52,10 +52,12 @@ git push -u origin HEAD
 Check for an existing PR first:
 
 ```bash
-gh pr view --json url 2>/dev/null
+gh pr view --json number,url,title,body 2>/dev/null
 ```
 
-If none exists, create it. Pass the body via HEREDOC to preserve markdown formatting:
+### 3a. No existing PR → create one
+
+Pass the body via HEREDOC to preserve markdown formatting:
 
 ```bash
 gh pr create --title "short, scope-prefixed title" --body "$(cat <<'EOF'
@@ -85,7 +87,40 @@ EOF
 
 Keep the title under ~70 characters. Use a scope prefix when there's an obvious one (`viewer:`, `core:`, `editor:`, `mcp:`).
 
-If a PR already exists, print its URL and stop — don't recreate.
+### 3b. PR already exists → update its description
+
+Do **not** recreate the PR. Refresh the existing body so it reflects everything currently on the branch, while keeping the template structure and any reviewer-meaningful state the user already set.
+
+1. Capture the existing body and the full branch history:
+
+   ```bash
+   gh pr view --json number,body -q '.number, .body' > /tmp/existing-pr.txt
+   git log --oneline main..HEAD
+   git diff --stat main..HEAD
+   ```
+
+2. Reconstruct the body section-by-section. Keep the four template headings in the same order (`## What does this PR do?`, `## How to test`, `## Screenshots / screen recording`, `## Checklist`). For each section:
+
+   - **What does this PR do?** — rewrite from the *current* commits and diff on the branch, not from memory. Preserve any `Fixes #123` / `Refs #123` lines from the old body.
+   - **How to test** — regenerate concrete steps for the *current* behaviour. If a previous step is still valid, keep its wording; drop steps that no longer apply; add steps for new commits.
+   - **Screenshots / screen recording** — preserve the existing content verbatim (links, embedded images, "N/A — …"). Do not blank it out. Only change it if the user explicitly provided a new recording.
+   - **Checklist** — preserve the user's tick state (`[x]` vs `[ ]`) for every item that still exists in the template. Add any new template items as unchecked.
+
+   If the old body contains extra sections the template doesn't have (e.g. a manual "Notes" block), keep them at the end.
+
+3. Apply the update:
+
+   ```bash
+   gh pr edit <number> --body "$(cat <<'EOF'
+   ## What does this PR do?
+   …
+   EOF
+   )"
+   ```
+
+   Use `gh pr edit --title` *only* if the branch's scope has clearly changed; otherwise leave the title alone.
+
+4. Print the PR URL so the user can confirm the edit.
 
 ## 4. Report
 

From dd065779a33cb9c1dcc37dd403a12ded55542a29 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Wed, 27 May 2026 22:18:55 +0530
Subject: [PATCH 46/48] floorplan: capability/hook dispatch, generic resize +
 endpoint state

Removes per-kind `node.type ===` arms from the floorplan layer
(door/window opening placement, wall live-override merge, building
ambient context) in favour of new NodeDefinition capabilities and
hooks. Collapses 12 `resizing*` editor-store fields into one
`activeHandleDrag`, the wall/fence endpoint-move dispatch into a
kind-keyed table, and renames now-shared wall utilities to
segment-generic names.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/core/src/registry/types.ts           | 44 +++++++++++
 .../renderers/floorplan-registry-layer.tsx    | 77 ++++++-------------
 .../editor/custom-camera-controls.tsx         | 22 +-----
 .../src/components/editor/floorplan-panel.tsx | 19 +++--
 .../components/editor/node-arrow-handles.tsx  |  8 +-
 .../editor/wall-move-side-handles.tsx         |  8 +-
 .../components/tools/fence/fence-drafting.ts  |  8 +-
 .../components/tools/wall/wall-drafting.ts    | 12 +--
 packages/editor/src/index.tsx                 |  4 +-
 packages/editor/src/lib/editor-api.ts         | 26 +++++--
 packages/editor/src/store/use-editor.tsx      | 62 ++++-----------
 packages/nodes/src/building/definition.ts     |  1 +
 packages/nodes/src/door/definition.ts         |  1 +
 .../nodes/src/fence/actions/move-endpoint.ts  |  6 +-
 packages/nodes/src/fence/curve-tool.tsx       |  6 +-
 .../nodes/src/fence/floorplan-affordances.ts  |  8 +-
 packages/nodes/src/fence/floorplan-move.ts    |  6 +-
 packages/nodes/src/stair/floorplan-move.ts    |  4 +-
 packages/nodes/src/wall/curve-tool.tsx        |  4 +-
 packages/nodes/src/wall/definition.ts         |  2 +
 .../nodes/src/wall/floorplan-affordances.ts   |  8 +-
 packages/nodes/src/wall/floorplan-move.ts     | 10 +--
 .../nodes/src/wall/floorplan-overrides.ts     | 34 ++++++++
 .../nodes/src/wall/move-endpoint-tool.tsx     |  4 +-
 packages/nodes/src/wall/move-shared.ts        |  6 +-
 packages/nodes/src/wall/move-tool.tsx         | 10 +--
 packages/nodes/src/window/definition.ts       |  1 +
 .../components/viewer/selection-manager.tsx   |  2 +-
 packages/viewer/src/hooks/use-node-events.ts  | 10 +--
 packages/viewer/src/store/use-viewer.ts       | 22 +++---
 30 files changed, 228 insertions(+), 207 deletions(-)
 create mode 100644 packages/nodes/src/wall/floorplan-overrides.ts

diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index 53168180f..6f80cfdc3 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -740,6 +740,30 @@ export type NodeDefinition<S extends ZodObject<any>> = {
    * unset and rely on the generic overlay path.
    */
   floorplanMoveTarget?: FloorplanMoveTarget<z.infer<S>>
+  /**
+   * Optional hook letting a kind project the `useLiveNodeOverrides` map
+   * into a fresh `nodes` snapshot before its `def.floorplan` builder
+   * runs. The floor-plan layer calls this when present and passes the
+   * returned map both as the builder's `ctx` source AND as the
+   * effective node (so the kind's own override lands in `effectiveNode`).
+   *
+   * Used by wall, whose miter joins read sibling walls via
+   * `ctx.siblings`: during a 2D drag the moved wall + its linked
+   * neighbours publish per-frame `{ start, end, curveOffset }`
+   * overrides, and the floor-plan must merge those into every wall
+   * the builder can see — otherwise miter math snaps back to the
+   * committed positions while the cursor moves. Kinds whose previews
+   * are self-contained leave this unset and the layer hands the raw
+   * `nodes` through.
+   *
+   * Return the input `nodes` unchanged when no override is relevant
+   * so the caller can short-circuit.
+   */
+  floorplanSiblingOverrides?: (args: {
+    nodeId: AnyNodeId
+    nodes: Record<AnyNodeId, AnyNode>
+    liveOverrides: Map<string, Record<string, unknown>>
+  }) => Record<AnyNodeId, AnyNode>
   system?: SystemContribution
   tool?: LazyComponent
   /**
@@ -926,6 +950,26 @@ export type Capabilities = {
   floorPlaced?: FloorPlacedConfig
   roofAccessory?: RoofAccessoryConfig
   paint?: PaintCapability
+  /**
+   * Kind is placed by clicking on a wall (door, window). When set, the
+   * floor-plan layer lets wall background clicks pass through during
+   * placement / move-on-wall — the placement tool's `wall:click` event
+   * needs the SVG's `findClosestWallPoint` handler to run; without
+   * this the wall's registry entry would swallow the click via
+   * `handleSelect`. Read by `FloorplanRegistryLayer` when `movingNode`
+   * is set, so the active move can suspend wall selection.
+   */
+  wallOpeningPlacement?: boolean
+  /**
+   * Instances of this kind contain levels. When such a node is being
+   * moved, the floor-plan layer falls back to the moving node's id as
+   * the ambient building context — so the floor under the cursor keeps
+   * rendering dimmed throughout the gesture even though the explicit
+   * selection may have been cleared as part of the move handoff. Set
+   * on building; future container kinds (e.g. annexes) opt in by
+   * declaring the same flag.
+   */
+  floorplanLevelContainer?: boolean
 }
 
 /**
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
index 080a99b11..73aa326f5 100644
--- a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
@@ -115,9 +115,12 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   // cleared as part of the move handoff. Fall back to the
   // mid-drag building id so the dimmed floor keeps rendering
   // throughout the gesture.
-  const movingBuildingId = useEditor((state) =>
-    state.movingNode?.type === 'building' ? state.movingNode.id : null,
-  )
+  const movingBuildingId = useEditor((state) => {
+    const moving = state.movingNode
+    if (!moving) return null
+    const def = nodeRegistry.get(moving.type)
+    return def?.capabilities?.floorplanLevelContainer ? moving.id : null
+  })
   const ambientBuildingSourceId = selectedBuildingId ?? movingBuildingId
 
   // When only a building is in scope (no specific level), fall back to
@@ -166,8 +169,8 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
     (editorPhase === 'structure' &&
       editorMode === 'build' &&
       (editorTool === 'door' || editorTool === 'window')) ||
-    movingNode?.type === 'door' ||
-    movingNode?.type === 'window'
+    (movingNode != null &&
+      !!nodeRegistry.get(movingNode.type)?.capabilities?.wallOpeningPlacement)
   // Subscribe to the live-transforms map ref so the layer re-renders
   // whenever a 3D mover publishes a per-frame position (see
   // `usePlacementCoordinator`). Without this the 2D floor plan only
@@ -304,28 +307,23 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
             }
           }
         }
-        // Wall live-overrides: the 2D drag handlers publish
-        // `{ start, end, curveOffset }` to `useLiveNodeOverrides` so
-        // the visual preview tracks the cursor without writing to
-        // zustand. The wall builder reads `ctx.siblings` for miter
-        // joins, so we also merge overrides into other walls in the
-        // same level via a per-builder `nodes` view below.
-        if (node.type === 'wall') {
-          const wallOverride = liveOverrides.get(id)
-          if (wallOverride && Object.keys(wallOverride).length > 0) {
-            effectiveNode = { ...node, ...wallOverride } as AnyNode
-          }
+        // Live-edit overrides: kinds whose `def.floorplan` builder
+        // reads cross-sibling data (wall miters, …) declare a
+        // `def.floorplanSiblingOverrides` hook that projects the
+        // override map into a merged `nodes` snapshot. The merged
+        // copy feeds `buildContext` so `ctx.siblings` reflects the
+        // live cursor positions, and replaces `effectiveNode` so the
+        // kind's own override lands too (covers the case where the
+        // node being rendered is itself the dragged one). Kinds
+        // without the hook hand the raw `nodes` through — most
+        // previews are self-contained.
+        const contextNodes = def?.floorplanSiblingOverrides
+          ? def.floorplanSiblingOverrides({ nodeId: id, nodes, liveOverrides })
+          : nodes
+        if (contextNodes !== nodes) {
+          const merged = contextNodes[id]
+          if (merged) effectiveNode = merged
         }
-        // For walls, expose an override-merged copy of `nodes` so
-        // `buildContext`'s sibling list (and the linked-wall miter
-        // calculation it feeds) reflects the live cursor positions.
-        // For every other kind we hand the raw `nodes` through —
-        // override-merging an entire scene per tick would be wasteful
-        // when only walls care about sibling state.
-        const contextNodes =
-          node.type === 'wall' && liveOverrides.size > 0
-            ? mergeWallOverridesIntoNodes(nodes, liveOverrides)
-            : nodes
         const ctx = buildContext(effectiveNode, contextNodes, {
           selected,
           highlighted,
@@ -1475,33 +1473,6 @@ function InteractiveGeometry({
 
 // ── Helpers ──────────────────────────────────────────────────────────
 
-/**
- * Returns a copy of `nodes` where any wall with a live override has
- * `{ start, end, curveOffset, ... }` merged in. Used by the wall
- * branch of the registry builder so `ctx.siblings` (which feeds
- * `calculateLevelMiters`) reflects the live cursor positions during a
- * 2D drag, not the pre-drag scene state.
- *
- * Only wall entries are touched; every other node is shared by
- * reference. The allocation cost is one shallow object per overridden
- * wall — the override map is small (the moved wall + its linked
- * neighbours), so this is cheap.
- */
-function mergeWallOverridesIntoNodes(
-  nodes: Record<string, AnyNode>,
-  overrides: Map<string, Record<string, unknown>>,
-): Record<string, AnyNode> {
-  if (overrides.size === 0) return nodes
-  const out: Record<string, AnyNode> = { ...nodes }
-  for (const [id, override] of overrides) {
-    const existing = out[id]
-    if (!existing || existing.type !== 'wall') continue
-    if (Object.keys(override).length === 0) continue
-    out[id] = { ...existing, ...override } as AnyNode
-  }
-  return out
-}
-
 function buildContext(
   node: AnyNode,
   nodes: Record<string, AnyNode>,
diff --git a/packages/editor/src/components/editor/custom-camera-controls.tsx b/packages/editor/src/components/editor/custom-camera-controls.tsx
index e3ae742c4..115f9e4fb 100644
--- a/packages/editor/src/components/editor/custom-camera-controls.tsx
+++ b/packages/editor/src/components/editor/custom-camera-controls.tsx
@@ -139,32 +139,14 @@ export const CustomCameraControls = () => {
   const movingNode = useEditor((s) => s.movingNode)
   const movingWallEndpoint = useEditor((s) => s.movingWallEndpoint)
   const movingFenceEndpoint = useEditor((s) => s.movingFenceEndpoint)
-  const resizingWallHeight = useEditor((s) => s.resizingWallHeight)
-  const resizingDoorHeight = useEditor((s) => s.resizingDoorHeight)
-  const resizingDoorWidth = useEditor((s) => s.resizingDoorWidth)
-  const resizingStairSegmentWidth = useEditor((s) => s.resizingStairSegmentWidth)
-  const resizingStairSegmentLength = useEditor((s) => s.resizingStairSegmentLength)
-  const resizingStairSegmentHeight = useEditor((s) => s.resizingStairSegmentHeight)
-  const resizingCurvedStairRise = useEditor((s) => s.resizingCurvedStairRise)
-  const resizingCurvedStairWidth = useEditor((s) => s.resizingCurvedStairWidth)
-  const resizingCurvedStairInnerRadius = useEditor((s) => s.resizingCurvedStairInnerRadius)
-  const resizingCurvedStairSweep = useEditor((s) => s.resizingCurvedStairSweep)
+  const activeHandleDrag = useEditor((s) => s.activeHandleDrag)
   const isBoxSelectActive = mode === 'select' && selectionTool === 'marquee'
   const isInteracting = Boolean(
     tool ||
       movingNode ||
       movingWallEndpoint ||
       movingFenceEndpoint ||
-      resizingWallHeight ||
-      resizingDoorHeight ||
-      resizingDoorWidth ||
-      resizingStairSegmentWidth ||
-      resizingStairSegmentLength ||
-      resizingStairSegmentHeight ||
-      resizingCurvedStairRise ||
-      resizingCurvedStairWidth ||
-      resizingCurvedStairInnerRadius ||
-      resizingCurvedStairSweep ||
+      activeHandleDrag ||
       isBoxSelectActive,
   )
   const touches = useMemo(() => {
diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index c6bcff7c3..e41a9ab75 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -106,7 +106,7 @@ import {
 } from '../tools/stair/stair-defaults'
 import {
   createWallOnCurrentLevel,
-  isWallLongEnough,
+  isSegmentLongEnough,
   snapWallDraftPoint,
   WALL_FINE_GRID_STEP,
   WALL_GRID_STEP,
@@ -4131,9 +4131,12 @@ export function FloorplanPanel() {
   // `movingNode` carries the building's id even if the explicit
   // selection has been cleared as part of the move handoff.
   const movingBuildingId =
-    useEditor((state) =>
-      state.movingNode?.type === 'building' ? state.movingNode.id : null,
-    ) ?? null
+    useEditor((state) => {
+      const moving = state.movingNode
+      if (!moving) return null
+      const def = nodeRegistry.get(moving.type)
+      return def?.capabilities?.floorplanLevelContainer ? moving.id : null
+    }) ?? null
   const ambientBuildingId = currentBuildingId ?? movingBuildingId
   const hasAmbientBuildingLevel = useScene((state) => {
     if (levelId || !ambientBuildingId) return false
@@ -5029,7 +5032,7 @@ export function FloorplanPanel() {
   }, [shouldShowSiteBoundaryHandles, siteVertexDragState, visibleSitePolygon])
 
   const draftPolygon = useMemo(() => {
-    if (!(levelId && draftStart && draftEnd && isWallLongEnough(draftStart, draftEnd))) {
+    if (!(levelId && draftStart && draftEnd && isSegmentLongEnough(draftStart, draftEnd))) {
       return null
     }
 
@@ -5042,7 +5045,7 @@ export function FloorplanPanel() {
   // space. Length renders at the segment midpoint; angle arcs sit at
   // each endpoint that meets an existing wall.
   const draftWallMeasurement = useMemo(() => {
-    if (!(isWallBuildActive && draftStart && draftEnd && isWallLongEnough(draftStart, draftEnd))) {
+    if (!(isWallBuildActive && draftStart && draftEnd && isSegmentLongEnough(draftStart, draftEnd))) {
       return null
     }
 
@@ -6859,7 +6862,7 @@ export function FloorplanPanel() {
           )
         })
 
-        if (commitUpdates.length > 0 && isWallLongEnough(nextDraft.start, nextDraft.end)) {
+        if (commitUpdates.length > 0 && isSegmentLongEnough(nextDraft.start, nextDraft.end)) {
           useScene.getState().updateNodes(
             commitUpdates.map((update) => ({
               id: update.id as AnyNodeId,
@@ -7588,7 +7591,7 @@ export function FloorplanPanel() {
         return
       }
 
-      if (!isWallLongEnough(draftStart, point)) {
+      if (!isSegmentLongEnough(draftStart, point)) {
         return
       }
 
diff --git a/packages/editor/src/components/editor/node-arrow-handles.tsx b/packages/editor/src/components/editor/node-arrow-handles.tsx
index c01843539..018b51e93 100644
--- a/packages/editor/src/components/editor/node-arrow-handles.tsx
+++ b/packages/editor/src/components/editor/node-arrow-handles.tsx
@@ -534,7 +534,7 @@ function LinearArrow({
 
     document.body.style.cursor = cursor
     sfxEmitter.emit('sfx:item-pick')
-    useViewer.getState().setHandleDragging(true)
+    useViewer.getState().setInputDragging(true)
     useScene.temporal.getState().pause()
     setIsDragging(true)
 
@@ -580,7 +580,7 @@ function LinearArrow({
         document.body.style.cursor = ''
       }
       useScene.temporal.getState().resume()
-      useViewer.getState().setHandleDragging(false)
+      useViewer.getState().setInputDragging(false)
       setIsDragging(false)
       dragCleanupRef.current = null
     }
@@ -794,7 +794,7 @@ function ArcArrow({
 
     document.body.style.cursor = dragCursor
     sfxEmitter.emit('sfx:item-pick')
-    useViewer.getState().setHandleDragging(true)
+    useViewer.getState().setInputDragging(true)
     useScene.temporal.getState().pause()
     setIsDragging(true)
 
@@ -830,7 +830,7 @@ function ArcArrow({
         document.body.style.cursor = ''
       }
       useScene.temporal.getState().resume()
-      useViewer.getState().setHandleDragging(false)
+      useViewer.getState().setInputDragging(false)
       setIsDragging(false)
       dragCleanupRef.current = null
     }
diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx
index b236b7729..473063b8a 100644
--- a/packages/editor/src/components/editor/wall-move-side-handles.tsx
+++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx
@@ -433,11 +433,11 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
 
     document.body.style.cursor = 'ns-resize'
     sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setResizingWallHeight(wall)
+    useEditor.getState().setActiveHandleDrag({ nodeId: wallId, label: '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.
-    useViewer.getState().setHandleDragging(true)
+    useViewer.getState().setInputDragging(true)
     useScene.temporal.getState().pause()
 
     // Drag publishes `{ height }` to `useLiveNodeOverrides` and marks
@@ -463,8 +463,8 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
         document.body.style.cursor = ''
       }
       useScene.temporal.getState().resume()
-      useEditor.getState().setResizingWallHeight(null)
-      useViewer.getState().setHandleDragging(false)
+      useEditor.getState().setActiveHandleDrag(null)
+      useViewer.getState().setInputDragging(false)
       dragCleanupRef.current = null
     }
     const onUp = () => {
diff --git a/packages/editor/src/components/tools/fence/fence-drafting.ts b/packages/editor/src/components/tools/fence/fence-drafting.ts
index 150b3de2c..752e8fb86 100644
--- a/packages/editor/src/components/tools/fence/fence-drafting.ts
+++ b/packages/editor/src/components/tools/fence/fence-drafting.ts
@@ -11,8 +11,8 @@ import { sfxEmitter } from '../../../lib/sfx-bus'
 import {
   findWallSnapTarget,
   getWallAngleSnapStep,
-  getWallGridStep,
-  isWallLongEnough,
+  getSegmentGridStep,
+  isSegmentLongEnough,
   snapPointTo45Degrees,
   snapPointToGrid,
   type WallPlanPoint,
@@ -135,7 +135,7 @@ export function snapFenceDraftPoint(args: {
   step?: number
 }): FencePlanPoint {
   const { point, walls, fences, start, angleSnap = false, ignoreFenceIds, step } = args
-  const gridStep = step ?? getWallGridStep()
+  const gridStep = step ?? getSegmentGridStep()
   const angleStep = getWallAngleSnapStep(gridStep)
   const basePoint =
     start && angleSnap
@@ -153,7 +153,7 @@ export function createFenceOnCurrentLevel(
   const currentLevelId = useViewer.getState().selection.levelId
   const { createNode, nodes } = useScene.getState()
 
-  if (!(currentLevelId && isWallLongEnough(start, end))) {
+  if (!(currentLevelId && isSegmentLongEnough(start, end))) {
     return null
   }
 
diff --git a/packages/editor/src/components/tools/wall/wall-drafting.ts b/packages/editor/src/components/tools/wall/wall-drafting.ts
index 93cbfc1a9..1c443e1e7 100644
--- a/packages/editor/src/components/tools/wall/wall-drafting.ts
+++ b/packages/editor/src/components/tools/wall/wall-drafting.ts
@@ -49,7 +49,7 @@ function distanceSquared(a: WallPlanPoint, b: WallPlanPoint): number {
   return dx * dx + dz * dz
 }
 
-export function getWallGridStep(): number {
+export function getSegmentGridStep(): number {
   return useEditor.getState().gridSnapStep
 }
 
@@ -79,7 +79,7 @@ export function snapPointTo45Degrees(
   )
 }
 
-export function getWallAngleSnapStep(step = getWallGridStep()): number {
+export function getWallAngleSnapStep(step = getSegmentGridStep()): number {
   return WALL_ANGLE_SNAP_BY_GRID_STEP[step] ?? DEFAULT_WALL_ANGLE_SNAP_STEP
 }
 
@@ -428,7 +428,7 @@ export function snapWallDraftPoint(args: {
   const endpointSnap = findWallEndpointFromRaw(point, walls, ignoreWallIds)
   if (endpointSnap) return endpointSnap
 
-  const step = overrideStep ?? getWallGridStep()
+  const step = overrideStep ?? getSegmentGridStep()
   const angleStep = getWallAngleSnapStep(step)
   const basePoint =
     start && angleSnap
@@ -442,7 +442,7 @@ export function snapWallDraftPoint(args: {
   )
 }
 
-export function isWallLongEnough(start: WallPlanPoint, end: WallPlanPoint): boolean {
+export function isSegmentLongEnough(start: WallPlanPoint, end: WallPlanPoint): boolean {
   return distanceSquared(start, end) >= WALL_MIN_LENGTH * WALL_MIN_LENGTH
 }
 
@@ -454,7 +454,7 @@ export function createWallOnCurrentLevel(
   const { createNode, createNodes, deleteNode, nodes } = useScene.getState()
   const { updateNodes } = useScene.getState()
 
-  if (!(currentLevelId && isWallLongEnough(start, end))) {
+  if (!(currentLevelId && isSegmentLongEnough(start, end))) {
     return null
   }
 
@@ -493,7 +493,7 @@ export function createWallOnCurrentLevel(
     resolvedStart = splitStart.point
   }
 
-  if (!isWallLongEnough(resolvedStart, resolvedEnd) || pointsEqual(resolvedStart, resolvedEnd)) {
+  if (!isSegmentLongEnough(resolvedStart, resolvedEnd) || pointsEqual(resolvedStart, resolvedEnd)) {
     return null
   }
 
diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx
index f328c98e5..c4ead4eed 100644
--- a/packages/editor/src/index.tsx
+++ b/packages/editor/src/index.tsx
@@ -81,8 +81,8 @@ export {
 } from './components/tools/stair/stair-defaults'
 export {
   createWallOnCurrentLevel,
-  getWallGridStep,
-  isWallLongEnough,
+  getSegmentGridStep,
+  isSegmentLongEnough,
   snapPointToGrid,
   snapScalarToGrid,
   snapWallDraftPoint,
diff --git a/packages/editor/src/lib/editor-api.ts b/packages/editor/src/lib/editor-api.ts
index 440000e6c..3a2229078 100644
--- a/packages/editor/src/lib/editor-api.ts
+++ b/packages/editor/src/lib/editor-api.ts
@@ -1,6 +1,25 @@
 import type { AnyNode, EditorApi, FenceNode, WallNode } from '@pascal-app/core'
 import useEditor from '../store/use-editor'
 
+type EditorState = ReturnType<typeof useEditor.getState>
+type EndpointEngager = (node: AnyNode, endpoint: 'start' | 'end', editor: EditorState) => void
+
+/**
+ * Per-kind endpoint-move engagement. Kinds whose 2D endpoint drag
+ * needs its own store field (wall ↔ `movingWallEndpoint`, fence ↔
+ * `movingFenceEndpoint`) register their bridge here. The dispatcher
+ * is a table lookup rather than an `if (type === 'wall')` chain so
+ * adding a new endpoint-draggable kind is a one-line entry instead
+ * of a new branch. Each entry casts the generic `AnyNode` to its
+ * concrete kind — the lookup key already guarantees the type.
+ */
+const endpointEngagers: Record<string, EndpointEngager> = {
+  wall: (node, endpoint, editor) =>
+    editor.setMovingWallEndpoint({ wall: node as WallNode, endpoint }),
+  fence: (node, endpoint, editor) =>
+    editor.setMovingFenceEndpoint({ fence: node as FenceNode, endpoint }),
+}
+
 /**
  * Concrete {@link EditorApi} backed by `useEditor`. Descriptors call into
  * editor state through this interface; the editor owns the actual setter
@@ -25,12 +44,7 @@ export function createEditorApi(): EditorApi {
       editor.setCurvingFence(null)
     },
     engageEndpointMove(node: AnyNode, endpoint: 'start' | 'end') {
-      const editor = useEditor.getState()
-      if (node.type === 'wall') {
-        editor.setMovingWallEndpoint({ wall: node as WallNode, endpoint })
-      } else if (node.type === 'fence') {
-        editor.setMovingFenceEndpoint({ fence: node as FenceNode, endpoint })
-      }
+      endpointEngagers[node.type]?.(node, endpoint, useEditor.getState())
     },
   }
 }
diff --git a/packages/editor/src/store/use-editor.tsx b/packages/editor/src/store/use-editor.tsx
index 40ebbfd9f..0b0d74248 100644
--- a/packages/editor/src/store/use-editor.tsx
+++ b/packages/editor/src/store/use-editor.tsx
@@ -211,30 +211,18 @@ type EditorState = {
   setMovingWallEndpoint: (value: MovingWallEndpoint | null) => void
   movingFenceEndpoint: MovingFenceEndpoint | null
   setMovingFenceEndpoint: (value: MovingFenceEndpoint | null) => void
-  resizingWallHeight: WallNode | null
-  setResizingWallHeight: (wall: WallNode | null) => void
-  resizingDoorHeight: DoorNode | null
-  setResizingDoorHeight: (door: DoorNode | null) => void
-  resizingDoorWidth: DoorNode | null
-  setResizingDoorWidth: (door: DoorNode | null) => void
-  resizingWindowHeight: WindowNode | null
-  setResizingWindowHeight: (window: WindowNode | null) => void
-  resizingWindowWidth: WindowNode | null
-  setResizingWindowWidth: (window: WindowNode | null) => void
-  resizingStairSegmentWidth: StairSegmentNode | null
-  setResizingStairSegmentWidth: (segment: StairSegmentNode | null) => void
-  resizingStairSegmentLength: StairSegmentNode | null
-  setResizingStairSegmentLength: (segment: StairSegmentNode | null) => void
-  resizingStairSegmentHeight: StairSegmentNode | null
-  setResizingStairSegmentHeight: (segment: StairSegmentNode | null) => void
-  resizingCurvedStairRise: StairNode | null
-  setResizingCurvedStairRise: (stair: StairNode | null) => void
-  resizingCurvedStairWidth: StairNode | null
-  setResizingCurvedStairWidth: (stair: StairNode | null) => void
-  resizingCurvedStairInnerRadius: StairNode | null
-  setResizingCurvedStairInnerRadius: (stair: StairNode | null) => void
-  resizingCurvedStairSweep: StairNode | null
-  setResizingCurvedStairSweep: (stair: StairNode | null) => void
+  /**
+   * Generic per-kind handle drag state. Set by a node's resize handle
+   * (height arrow, width arrow, rise / sweep / inner-radius for curved
+   * stairs, …) at drag-start and cleared on drag-end. `label`
+   * identifies which dimension the handle controls — measurement
+   * overlays read it to render the right caption; the camera controls
+   * use the truthy value to suppress one-finger pan-rotate. Replaces
+   * the previous per-kind `resizing*` fields so adding a new resize
+   * handle doesn't require a new store field.
+   */
+  activeHandleDrag: { nodeId: AnyNodeId; label: string } | null
+  setActiveHandleDrag: (drag: { nodeId: AnyNodeId; label: string } | null) => void
   curvingWall: WallNode | null
   setCurvingWall: (wall: WallNode | null) => void
   curvingFence: FenceNode | null
@@ -656,30 +644,8 @@ const useEditor = create<EditorState>()(
       setMovingWallEndpoint: (value) => set({ movingWallEndpoint: value }),
       movingFenceEndpoint: null,
       setMovingFenceEndpoint: (value) => set({ movingFenceEndpoint: value }),
-      resizingWallHeight: null,
-      setResizingWallHeight: (wall) => set({ resizingWallHeight: wall }),
-      resizingDoorHeight: null,
-      setResizingDoorHeight: (door) => set({ resizingDoorHeight: door }),
-      resizingDoorWidth: null,
-      setResizingDoorWidth: (door) => set({ resizingDoorWidth: door }),
-      resizingWindowHeight: null,
-      setResizingWindowHeight: (windowNode) => set({ resizingWindowHeight: windowNode }),
-      resizingWindowWidth: null,
-      setResizingWindowWidth: (windowNode) => set({ resizingWindowWidth: windowNode }),
-      resizingStairSegmentWidth: null,
-      setResizingStairSegmentWidth: (segment) => set({ resizingStairSegmentWidth: segment }),
-      resizingStairSegmentLength: null,
-      setResizingStairSegmentLength: (segment) => set({ resizingStairSegmentLength: segment }),
-      resizingStairSegmentHeight: null,
-      setResizingStairSegmentHeight: (segment) => set({ resizingStairSegmentHeight: segment }),
-      resizingCurvedStairRise: null,
-      setResizingCurvedStairRise: (stair) => set({ resizingCurvedStairRise: stair }),
-      resizingCurvedStairWidth: null,
-      setResizingCurvedStairWidth: (stair) => set({ resizingCurvedStairWidth: stair }),
-      resizingCurvedStairInnerRadius: null,
-      setResizingCurvedStairInnerRadius: (stair) => set({ resizingCurvedStairInnerRadius: stair }),
-      resizingCurvedStairSweep: null,
-      setResizingCurvedStairSweep: (stair) => set({ resizingCurvedStairSweep: stair }),
+      activeHandleDrag: null,
+      setActiveHandleDrag: (drag) => set({ activeHandleDrag: drag }),
       curvingWall: null,
       setCurvingWall: (wall) => set({ curvingWall: wall }),
       curvingFence: null,
diff --git a/packages/nodes/src/building/definition.ts b/packages/nodes/src/building/definition.ts
index 803d46d6d..4f050ce38 100644
--- a/packages/nodes/src/building/definition.ts
+++ b/packages/nodes/src/building/definition.ts
@@ -27,6 +27,7 @@ export const buildingDefinition: NodeDefinition<typeof BuildingNode> = {
     // selection, never 3D click. Same reasoning as `level` / `site`.
     duplicable: false,
     deletable: false,
+    floorplanLevelContainer: true,
   },
 
   parametrics: buildingParametrics,
diff --git a/packages/nodes/src/door/definition.ts b/packages/nodes/src/door/definition.ts
index 5bb15c0a8..2b007d62d 100644
--- a/packages/nodes/src/door/definition.ts
+++ b/packages/nodes/src/door/definition.ts
@@ -142,6 +142,7 @@ export const doorDefinition: NodeDefinition<typeof DoorNode> = {
     selectable: { hitVolume: 'bbox' },
     duplicable: true,
     deletable: true,
+    wallOpeningPlacement: true,
   },
 
   parametrics: doorParametrics,
diff --git a/packages/nodes/src/fence/actions/move-endpoint.ts b/packages/nodes/src/fence/actions/move-endpoint.ts
index 2572145bc..6ba3e0bad 100644
--- a/packages/nodes/src/fence/actions/move-endpoint.ts
+++ b/packages/nodes/src/fence/actions/move-endpoint.ts
@@ -8,7 +8,7 @@ import {
 } from '@pascal-app/core'
 import {
   type FencePlanPoint,
-  isWallLongEnough,
+  isSegmentLongEnough,
   snapFenceDraftPoint,
   WALL_FINE_GRID_STEP,
 } from '@pascal-app/editor'
@@ -28,7 +28,7 @@ import {
  *  - **apply**: writes the fence + linked fence endpoints into the
  *    scene. Drag-session paused history captures originals; cascade
  *    resolver fans dirty marks through `endpoint-match`.
- *  - **commit**: requires `hasChanged` && `isWallLongEnough(next)`.
+ *  - **commit**: requires `hasChanged` && `isSegmentLongEnough(next)`.
  *    Performs the single-undo dance — revert to originals (snapshot),
  *    resume history, re-apply final draft — so the entire drag is one
  *    `Ctrl-Z` step. Returns false to reject; `createDragSession.cancel`
@@ -196,7 +196,7 @@ export const moveFenceEndpointDragAction: DragAction<MoveFenceEndpointCtx, MoveF
       // fence/actions/curve.ts for the rationale (no-op drag must still
       // push a pastState entry to avoid Ctrl-Z cancelling the fence
       // creation that preceded the activation).
-      if (!isWallLongEnough(draft.start, draft.end)) return false
+      if (!isSegmentLongEnough(draft.start, draft.end)) return false
 
       // Single-undo dance: revert to originals (paused history → no
       // zundo record), resume history, then re-apply the final draft
diff --git a/packages/nodes/src/fence/curve-tool.tsx b/packages/nodes/src/fence/curve-tool.tsx
index fbbeaa6d4..38631e02f 100644
--- a/packages/nodes/src/fence/curve-tool.tsx
+++ b/packages/nodes/src/fence/curve-tool.tsx
@@ -16,7 +16,7 @@ import {
 } from '@pascal-app/core'
 import {
   CursorSphere,
-  getWallGridStep,
+  getSegmentGridStep,
   markToolCancelConsumed,
   snapScalarToGrid,
   triggerSFX,
@@ -32,7 +32,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
  * fence/curve-fence-tool.tsx). Same snap pipeline, same Shift override,
  * same history dance, same activation grace. Imports adjusted to the
  * `@pascal-app/editor` public surface (triggerSFX, markToolCancelConsumed,
- * getWallGridStep, snapScalarToGrid). Mounted via
+ * getSegmentGridStep, snapScalarToGrid). Mounted via
  * `def.affordanceTools.curve` — ToolManager picks it up at runtime,
  * legacy fallback is unused when this kind is registered.
  */
@@ -89,7 +89,7 @@ export const CurveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
     }
 
     const onGridMove = (event: GridEvent) => {
-      const snapStep = getWallGridStep()
+      const snapStep = getSegmentGridStep()
       const localX = shiftPressedRef.current
         ? event.localPosition[0]
         : snapScalarToGrid(event.localPosition[0], snapStep)
diff --git a/packages/nodes/src/fence/floorplan-affordances.ts b/packages/nodes/src/fence/floorplan-affordances.ts
index 7f0e508c5..66d46ae96 100644
--- a/packages/nodes/src/fence/floorplan-affordances.ts
+++ b/packages/nodes/src/fence/floorplan-affordances.ts
@@ -13,8 +13,8 @@ import {
 } from '@pascal-app/core'
 import {
   type FencePlanPoint,
-  getWallGridStep,
-  isWallLongEnough,
+  getSegmentGridStep,
+  isSegmentLongEnough,
   snapFenceDraftPoint,
   snapScalarToGrid,
   WALL_FINE_GRID_STEP,
@@ -101,7 +101,7 @@ export const fenceCurveAffordance: FloorplanAffordance<FenceNode> = {
     return {
       affectedIds: [node.id],
       apply({ planPoint, modifiers }) {
-        const snapStep = getWallGridStep()
+        const snapStep = getSegmentGridStep()
         const x = modifiers.shiftKey ? planPoint[0] : snapScalarToGrid(planPoint[0], snapStep)
         const y = modifiers.shiftKey ? planPoint[1] : snapScalarToGrid(planPoint[1], snapStep)
 
@@ -188,7 +188,7 @@ export const fenceMoveEndpointAffordance: FloorplanAffordance<FenceNode> = {
         return (
           !!finalFence &&
           finalFence.type === 'fence' &&
-          isWallLongEnough(finalFence.start, finalFence.end)
+          isSegmentLongEnough(finalFence.start, finalFence.end)
         )
       },
     }
diff --git a/packages/nodes/src/fence/floorplan-move.ts b/packages/nodes/src/fence/floorplan-move.ts
index 49e9bea9f..b3ae41059 100644
--- a/packages/nodes/src/fence/floorplan-move.ts
+++ b/packages/nodes/src/fence/floorplan-move.ts
@@ -6,7 +6,7 @@ import {
   useLiveNodeOverrides,
   useScene,
 } from '@pascal-app/core'
-import { getWallGridStep, isWallLongEnough, snapPointToGrid } from '@pascal-app/editor'
+import { getSegmentGridStep, isSegmentLongEnough, snapPointToGrid } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
 
 type PlanPoint = [number, number]
@@ -104,7 +104,7 @@ export const fenceFloorplanMoveTarget: FloorplanMoveTarget<FenceNode> = ({ node
       }
       const rawDx = planPoint[0] - rawAnchor[0]
       const rawDz = planPoint[1] - rawAnchor[1]
-      const step = getWallGridStep()
+      const step = getSegmentGridStep()
       const nextStart: PlanPoint = modifiers.shiftKey
         ? [originalStart[0] + rawDx, originalStart[1] + rawDz]
         : snapPointToGrid([originalStart[0] + rawDx, originalStart[1] + rawDz], step)
@@ -135,7 +135,7 @@ export const fenceFloorplanMoveTarget: FloorplanMoveTarget<FenceNode> = ({ node
 
     canCommit() {
       const [dx, dz] = lastDelta
-      return (dx !== 0 || dz !== 0) && isWallLongEnough(lastNextStart, lastNextEnd)
+      return (dx !== 0 || dz !== 0) && isSegmentLongEnough(lastNextStart, lastNextEnd)
     },
 
     commit() {
diff --git a/packages/nodes/src/stair/floorplan-move.ts b/packages/nodes/src/stair/floorplan-move.ts
index 606f8d10b..a2f30edec 100644
--- a/packages/nodes/src/stair/floorplan-move.ts
+++ b/packages/nodes/src/stair/floorplan-move.ts
@@ -6,7 +6,7 @@ import {
   snapScalar,
   useScene,
 } from '@pascal-app/core'
-import { getWallGridStep } from '@pascal-app/editor'
+import { getSegmentGridStep } from '@pascal-app/editor'
 
 /**
  * 2D floor-plan move handler for stair — kicks in when the user clicks
@@ -73,7 +73,7 @@ export const stairFloorplanMoveTarget: FloorplanMoveTarget<StairNode> = ({ node
       // to snap to half-metre cells even when the user had set the grid
       // to a finer step like 0.1, so the cursor and the stair SVG
       // landed at different grid points. Shift bypasses snap entirely.
-      const step = getWallGridStep()
+      const step = getSegmentGridStep()
       const rawX = originalX + rawDx
       const rawZ = originalZ + rawDz
       const sx = modifiers.shiftKey ? rawX : snapScalar(rawX, step)
diff --git a/packages/nodes/src/wall/curve-tool.tsx b/packages/nodes/src/wall/curve-tool.tsx
index 8cd9fcead..6771b6d28 100644
--- a/packages/nodes/src/wall/curve-tool.tsx
+++ b/packages/nodes/src/wall/curve-tool.tsx
@@ -14,7 +14,7 @@ import {
 } from '@pascal-app/core'
 import {
   CursorSphere,
-  getWallGridStep,
+  getSegmentGridStep,
   markToolCancelConsumed,
   snapScalarToGrid,
   triggerSFX,
@@ -84,7 +84,7 @@ export const CurveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
     }
 
     const onGridMove = (event: GridEvent) => {
-      const snapStep = getWallGridStep()
+      const snapStep = getSegmentGridStep()
       const localX = shiftPressedRef.current
         ? event.localPosition[0]
         : snapScalarToGrid(event.localPosition[0], snapStep)
diff --git a/packages/nodes/src/wall/definition.ts b/packages/nodes/src/wall/definition.ts
index 7d0422f87..2462a2625 100644
--- a/packages/nodes/src/wall/definition.ts
+++ b/packages/nodes/src/wall/definition.ts
@@ -2,6 +2,7 @@ import type { NodeDefinition } from '@pascal-app/core'
 import { buildWallFloorplan } from './floorplan'
 import { wallCurveAffordance, wallMoveEndpointAffordance } from './floorplan-affordances'
 import { wallFloorplanMoveTarget } from './floorplan-move'
+import { wallFloorplanSiblingOverrides } from './floorplan-overrides'
 import { wallPaint } from './paint'
 import { wallParametrics } from './parametrics'
 import { WallNode } from './schema'
@@ -103,6 +104,7 @@ export const wallDefinition: NodeDefinition<typeof WallNode> = {
     curve: wallCurveAffordance,
   },
   floorplanMoveTarget: wallFloorplanMoveTarget,
+  floorplanSiblingOverrides: wallFloorplanSiblingOverrides,
 
   toolHints: [
     { key: 'Left click', label: 'Set wall start / end' },
diff --git a/packages/nodes/src/wall/floorplan-affordances.ts b/packages/nodes/src/wall/floorplan-affordances.ts
index b32c2b0c9..5c3c51987 100644
--- a/packages/nodes/src/wall/floorplan-affordances.ts
+++ b/packages/nodes/src/wall/floorplan-affordances.ts
@@ -11,8 +11,8 @@ import {
   type WallNode,
 } from '@pascal-app/core'
 import {
-  getWallGridStep,
-  isWallLongEnough,
+  getSegmentGridStep,
+  isSegmentLongEnough,
   snapScalarToGrid,
   snapWallDraftPoint,
   WALL_FINE_GRID_STEP,
@@ -108,7 +108,7 @@ export const wallCurveAffordance: FloorplanAffordance<WallNode> = {
     return {
       affectedIds: [node.id],
       apply({ planPoint, modifiers }) {
-        const snapStep = getWallGridStep()
+        const snapStep = getSegmentGridStep()
         const x = modifiers.shiftKey ? planPoint[0] : snapScalarToGrid(planPoint[0], snapStep)
         const y = modifiers.shiftKey ? planPoint[1] : snapScalarToGrid(planPoint[1], snapStep)
 
@@ -232,7 +232,7 @@ export const wallMoveEndpointAffordance: FloorplanAffordance<WallNode> = {
         // The dragged wall must still be long enough at the preview
         // length — checked against `lastPrimary*`, not scene, because
         // scene holds baseline values until commit().
-        return isWallLongEnough(lastPrimaryStart, lastPrimaryEnd)
+        return isSegmentLongEnough(lastPrimaryStart, lastPrimaryEnd)
       },
       commit() {
         // Atomic tracked write of the final endpoints, then drop the
diff --git a/packages/nodes/src/wall/floorplan-move.ts b/packages/nodes/src/wall/floorplan-move.ts
index d65da5dd3..cd808efc9 100644
--- a/packages/nodes/src/wall/floorplan-move.ts
+++ b/packages/nodes/src/wall/floorplan-move.ts
@@ -13,8 +13,8 @@ import {
 } from '@pascal-app/core'
 import {
   getFloorplanWallThickness,
-  getWallGridStep,
-  isWallLongEnough,
+  getSegmentGridStep,
+  isSegmentLongEnough,
   snapScalarToGrid,
   useWallMoveGhosts,
   type WallMoveGhostBridge,
@@ -113,7 +113,7 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
 
       const rawDx = planPoint[0] - rawAnchor[0]
       const rawDz = planPoint[1] - rawAnchor[1]
-      const step = getWallGridStep()
+      const step = getSegmentGridStep()
 
       // Axis-lock the move to the wall's perpendicular (normal). Project
       // the original centre + raw cursor delta onto the axis, snap the
@@ -164,7 +164,7 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
       // doesn't churn the scene graph with create / delete pairs.
       const collapsedIds = new Set([
         ...plannedUpdates
-          .filter((entry) => !isWallLongEnough(entry.start, entry.end))
+          .filter((entry) => !isSegmentLongEnough(entry.start, entry.end))
           .map((entry) => entry.id),
         ...plan.wallsToDelete.map((wall) => wall.id),
       ])
@@ -266,7 +266,7 @@ export const wallFloorplanMoveTarget: FloorplanMoveTarget<WallNode> = ({ node })
       )
       const collapsedLinkedWallIds = new Set([
         ...linkedWallUpdates
-          .filter((entry) => !isWallLongEnough(entry.start, entry.end))
+          .filter((entry) => !isSegmentLongEnough(entry.start, entry.end))
           .map((entry) => entry.id as AnyNodeId),
         ...plan.wallsToDelete.map((wall) => wall.id as AnyNodeId),
       ])
diff --git a/packages/nodes/src/wall/floorplan-overrides.ts b/packages/nodes/src/wall/floorplan-overrides.ts
new file mode 100644
index 000000000..72c6804b0
--- /dev/null
+++ b/packages/nodes/src/wall/floorplan-overrides.ts
@@ -0,0 +1,34 @@
+import type { AnyNode, AnyNodeId } from '@pascal-app/core'
+
+/**
+ * Project per-frame wall drag overrides (`{ start, end, curveOffset }`)
+ * from `useLiveNodeOverrides` into a fresh `nodes` snapshot. The 2D drag
+ * handlers publish overrides for the moved wall plus its linked
+ * neighbours; the floor-plan layer hands the merged snapshot to
+ * `buildContext` so each wall's `ctx.siblings` (which feeds the
+ * miter calculation) reflects the live cursor positions instead of
+ * the last committed scene state.
+ *
+ * Only wall entries are touched; every other node is shared by
+ * reference. The allocation cost is one shallow object per overridden
+ * wall — the override map is small, so this is cheap. When the
+ * override map is empty (no live drag) the input is returned
+ * unchanged.
+ */
+export function wallFloorplanSiblingOverrides(args: {
+  nodeId: AnyNodeId
+  nodes: Record<AnyNodeId, AnyNode>
+  liveOverrides: Map<string, Record<string, unknown>>
+}): Record<AnyNodeId, AnyNode> {
+  const { nodes, liveOverrides } = args
+  if (liveOverrides.size === 0) return nodes
+  let out: Record<AnyNodeId, AnyNode> | null = null
+  for (const [id, override] of liveOverrides) {
+    const existing = nodes[id as AnyNodeId]
+    if (!existing || existing.type !== 'wall') continue
+    if (Object.keys(override).length === 0) continue
+    if (!out) out = { ...nodes }
+    out[id as AnyNodeId] = { ...existing, ...override } as AnyNode
+  }
+  return out ?? nodes
+}
diff --git a/packages/nodes/src/wall/move-endpoint-tool.tsx b/packages/nodes/src/wall/move-endpoint-tool.tsx
index 452c6e7a6..019017f25 100644
--- a/packages/nodes/src/wall/move-endpoint-tool.tsx
+++ b/packages/nodes/src/wall/move-endpoint-tool.tsx
@@ -14,7 +14,7 @@ import {
   formatAngleRadians,
   getAngleToSegmentReference,
   getSegmentAngleReferenceAtPoint,
-  isWallLongEnough,
+  isSegmentLongEnough,
   type MovingWallEndpoint,
   markToolCancelConsumed,
   snapWallDraftPoint,
@@ -307,7 +307,7 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
         samePoint(preview.start, originalStart) && samePoint(preview.end, originalEnd)
       )
 
-      if (hasChanged && isWallLongEnough(preview.start, preview.end)) {
+      if (hasChanged && isSegmentLongEnough(preview.start, preview.end)) {
         wasCommitted = true
 
         // Restore original baseline while paused so the next resume+update
diff --git a/packages/nodes/src/wall/move-shared.ts b/packages/nodes/src/wall/move-shared.ts
index 337d88658..7cb591d53 100644
--- a/packages/nodes/src/wall/move-shared.ts
+++ b/packages/nodes/src/wall/move-shared.ts
@@ -9,7 +9,7 @@ import {
   type WallPlanPoint,
   WallNode as WallSchema,
 } from '@pascal-app/core'
-import { isWallLongEnough } from '@pascal-app/editor'
+import { isSegmentLongEnough } from '@pascal-app/editor'
 
 /**
  * Pure helpers shared by the 3D `MoveWallTool` and the 2D
@@ -150,7 +150,7 @@ export function buildBridgeWallCreates(args: {
   for (const plan of bridgePlans) {
     const nextPoint = plan.movedEndpoint === 'start' ? nextStart : nextEnd
 
-    if (!isWallLongEnough(plan.originalPoint, nextPoint)) {
+    if (!isSegmentLongEnough(plan.originalPoint, nextPoint)) {
       continue
     }
 
@@ -199,7 +199,7 @@ export function buildBridgeWallPreviews(args: {
   for (const plan of bridgePlans) {
     const nextPoint = plan.movedEndpoint === 'start' ? nextStart : nextEnd
 
-    if (!isWallLongEnough(plan.originalPoint, nextPoint)) {
+    if (!isSegmentLongEnough(plan.originalPoint, nextPoint)) {
       continue
     }
 
diff --git a/packages/nodes/src/wall/move-tool.tsx b/packages/nodes/src/wall/move-tool.tsx
index 6db9f9111..d83c3d6fd 100644
--- a/packages/nodes/src/wall/move-tool.tsx
+++ b/packages/nodes/src/wall/move-tool.tsx
@@ -25,8 +25,8 @@ import {
 import {
   CursorSphere,
   EDITOR_LAYER,
-  getWallGridStep,
-  isWallLongEnough,
+  getSegmentGridStep,
+  isSegmentLongEnough,
   markToolCancelConsumed,
   snapScalarToGrid,
   triggerSFX,
@@ -393,7 +393,7 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
       ]
       const previewCollapsedWallIds = new Set([
         ...previewUpdates
-          .filter((entry) => entry.id !== nodeId && !isWallLongEnough(entry.start, entry.end))
+          .filter((entry) => entry.id !== nodeId && !isSegmentLongEnough(entry.start, entry.end))
           .map((entry) => entry.id as AnyNodeId),
         ...previewPlan.wallsToDelete.map((wall) => wall.id as AnyNodeId),
       ])
@@ -432,7 +432,7 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
     const onGridMove = (event: GridEvent) => {
       const rawX = event.localPosition[0]
       const rawZ = event.localPosition[2]
-      const snapStep = getWallGridStep()
+      const snapStep = getSegmentGridStep()
 
       // Anchor at the raw cursor so the displacement is measured in
       // continuous space.
@@ -514,7 +514,7 @@ export const MoveWallTool: React.FC<{ node: WallNode }> = ({ node }) => {
       )
       const collapsedLinkedWallIds = new Set([
         ...linkedWallUpdates
-          .filter((entry) => !isWallLongEnough(entry.start, entry.end))
+          .filter((entry) => !isSegmentLongEnough(entry.start, entry.end))
           .map((entry) => entry.id as AnyNodeId),
         ...commitPlan.wallsToDelete.map((wall) => wall.id as AnyNodeId),
       ])
diff --git a/packages/nodes/src/window/definition.ts b/packages/nodes/src/window/definition.ts
index 15eebe6c3..cf7bf683a 100644
--- a/packages/nodes/src/window/definition.ts
+++ b/packages/nodes/src/window/definition.ts
@@ -139,6 +139,7 @@ export const windowDefinition: NodeDefinition<typeof WindowNode> = {
     selectable: { hitVolume: 'bbox' },
     duplicable: true,
     deletable: true,
+    wallOpeningPlacement: true,
   },
 
   parametrics: windowParametrics,
diff --git a/packages/viewer/src/components/viewer/selection-manager.tsx b/packages/viewer/src/components/viewer/selection-manager.tsx
index 7ae36303f..814d6fd83 100644
--- a/packages/viewer/src/components/viewer/selection-manager.tsx
+++ b/packages/viewer/src/components/viewer/selection-manager.tsx
@@ -399,7 +399,7 @@ const PointerMissedHandler = ({
     const handleClick = (event: MouseEvent) => {
       // Only handle left clicks
       const viewerState = useViewer.getState()
-      if (viewerState.cameraDragging || viewerState.handleDragging) return
+      if (viewerState.cameraDragging || viewerState.inputDragging) return
       if (event.button !== 0) return
 
       // Use requestAnimationFrame to check after R3F event handlers
diff --git a/packages/viewer/src/hooks/use-node-events.ts b/packages/viewer/src/hooks/use-node-events.ts
index ed1cdf556..a33beab3c 100644
--- a/packages/viewer/src/hooks/use-node-events.ts
+++ b/packages/viewer/src/hooks/use-node-events.ts
@@ -37,13 +37,13 @@ export function useNodeEvents<K extends AnyNodeType>(node: NodeByKind<K>, type:
   }
 
   // Suppress node pointer events while an interaction drag is in
-  // progress. `cameraDragging` covers orbit/pan/dolly; `handleDragging`
-  // covers in-world handle drags (height arrow, width arrow, etc.).
-  // Without this, the synthesized click on pointerup would reroute
-  // selection to whatever mesh the cursor lands on at release.
+  // progress. `cameraDragging` covers orbit/pan/dolly; `inputDragging`
+  // covers host-driven drags (editor handle arrows etc.). Without
+  // this, the synthesized click on pointerup would reroute selection
+  // to whatever mesh the cursor lands on at release.
   const isInteractionActive = () => {
     const s = useViewer.getState()
-    return s.cameraDragging || s.handleDragging
+    return s.cameraDragging || s.inputDragging
   }
 
   return {
diff --git a/packages/viewer/src/store/use-viewer.ts b/packages/viewer/src/store/use-viewer.ts
index fd2ac523b..c1da8e44a 100644
--- a/packages/viewer/src/store/use-viewer.ts
+++ b/packages/viewer/src/store/use-viewer.ts
@@ -101,15 +101,17 @@ type ViewerState = {
   setCameraDragging: (dragging: boolean) => void
 
   /**
-   * True while an in-world handle drag is in progress (height arrow,
-   * width arrow, etc.). Suppresses node pointer event routing so the
-   * synthetic click on pointerup doesn't reroute selection to whatever
-   * mesh the cursor lands on at release. Conceptually a sibling of
-   * `cameraDragging` — both mean "user is dragging; don't treat the next
-   * pointerup as a click on the scene."
+   * True while a host-driven drag is in progress (editor handles —
+   * height arrow, width arrow, etc.). Suppresses node pointer event
+   * routing so the synthetic click on pointerup doesn't reroute
+   * selection to whatever mesh the cursor lands on at release.
+   * Conceptually a sibling of `cameraDragging` — both mean "user is
+   * dragging; don't treat the next pointerup as a click on the
+   * scene." Set by the host (e.g. `NodeArrowHandles` in the editor);
+   * the viewer only reads it.
    */
-  handleDragging: boolean
-  setHandleDragging: (dragging: boolean) => void
+  inputDragging: boolean
+  setInputDragging: (dragging: boolean) => void
 }
 
 const useViewer = create<ViewerState>()(
@@ -260,8 +262,8 @@ const useViewer = create<ViewerState>()(
 
       cameraDragging: false,
       setCameraDragging: (dragging) => set({ cameraDragging: dragging }),
-      handleDragging: false,
-      setHandleDragging: (dragging) => set({ handleDragging: dragging }),
+      inputDragging: false,
+      setInputDragging: (dragging) => set({ inputDragging: dragging }),
     }),
     {
       name: 'viewer-preferences',

From d6b74fbe798d013827e8a8a5cf3e2ca9185ceb57 Mon Sep 17 00:00:00 2001
From: sudhir <sudhir9297@gmail.com>
Date: Wed, 27 May 2026 22:19:59 +0530
Subject: [PATCH 47/48] 3d wall measurement: hide label for selected walls

Item measurements still render; the wall branch is left in place so
re-enabling is a one-line gate flip.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../editor/src/components/editor/wall-measurement-label.tsx    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/editor/src/components/editor/wall-measurement-label.tsx b/packages/editor/src/components/editor/wall-measurement-label.tsx
index a0bf98cd3..b82cdca78 100644
--- a/packages/editor/src/components/editor/wall-measurement-label.tsx
+++ b/packages/editor/src/components/editor/wall-measurement-label.tsx
@@ -79,8 +79,7 @@ export function WallMeasurementLabel() {
 
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
   const selectedNode = selectedId ? nodes[selectedId as AnyNodeId] : null
-  const measurableNode =
-    selectedNode?.type === 'wall' || selectedNode?.type === 'item' ? selectedNode : null
+  const measurableNode = selectedNode?.type === 'item' ? selectedNode : null
 
   const [objectState, setObjectState] = useState<{
     id: AnyNodeId

From b47359a20d33723ff71f8f63ed27e278bd0506cc Mon Sep 17 00:00:00 2001
From: open-pascal <open@pascal.app>
Date: Wed, 27 May 2026 17:52:41 +0000
Subject: [PATCH 48/48] editor: set EDITOR_LAYER on arrow handles to exclude
 from thumbnails

Arrow meshes portaled into the 3D scene were missing EDITOR_LAYER, so
ThumbnailGenerator's camera (which calls cam.layers.disable(EDITOR_LAYER))
would render selection handles into captures.

Add a useEffect in NodeArrowHandlesForNode that traverses the portal root
group and sets EDITOR_LAYER on every child. The effect re-runs whenever
descriptors change so newly created meshes (e.g. when handle count changes
for the same selected node) get the layer tag immediately.
---
 .../src/components/editor/node-arrow-handles.tsx     | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/editor/src/components/editor/node-arrow-handles.tsx b/packages/editor/src/components/editor/node-arrow-handles.tsx
index 018b51e93..b9d5e1a03 100644
--- a/packages/editor/src/components/editor/node-arrow-handles.tsx
+++ b/packages/editor/src/components/editor/node-arrow-handles.tsx
@@ -39,6 +39,7 @@ import {
 } from 'three'
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../lib/constants'
 import { createEditorApi } from '../../lib/editor-api'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
@@ -341,6 +342,17 @@ function NodeArrowHandlesForNode({
   const outerRef = useRef<Group>(null)
   const innerRef = useRef<Group>(null)
 
+  // Tag all arrow objects for EDITOR_LAYER so the ThumbnailGenerator camera
+  // (which calls cam.layers.disable(EDITOR_LAYER)) excludes them from captures.
+  // descriptors is used as a trigger dep: when handles change, new mesh objects
+  // are created and need their layers set even though it isn't read in the body.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional trigger dep
+  useEffect(() => {
+    outerRef.current?.traverse((obj) => {
+      obj.layers.set(EDITOR_LAYER)
+    })
+  }, [descriptors])
+
   useFrame(() => {
     if (outerRef.current && outerRide) {
       outerRef.current.position.copy(outerRide.position)