@pascal-app/editor 1.0.0-beta.5 → 1.0.1

package/src/components/tools/item/use-placement-coordinator.tsx

@@ -6,14 +6,20 @@ import {
   type CeilingEvent,
   collectAlignmentAnchors,
   emitter,
+  findLevelAncestorId,
   type GridEvent,
   getScaledDimensions,
   type ItemEvent,
   movingFootprintAnchors,
+  type NodeEvent,
+  nodeRegistry,
   type RoofEvent,
+  resolveFrozenFloorPlacementPatch,
   resolveLevelId,
   type ShelfEvent,
+  type SurfaceRejectReason,
   sceneRegistry,
+  useLiveNodeOverrides,
   useLiveTransforms,
   useScene,
   useSpatialQuery,
@@ -25,16 +31,13 @@ import { Html } from '@react-three/drei'
 import { useFrame, useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
-  Box3,
   Euler,
   type Group,
   type LineSegments,
-  Matrix4,
   type Mesh,
   type Object3D,
   PlaneGeometry,
   Quaternion,
-  Ray,
   Vector3,
 } from 'three'
 import { distance, smoothstep, uv, vec2 } from 'three/tsl'
@@ -45,16 +48,29 @@ import {
 } from '../../../lib/active-placement-surface'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { formatLinearMeasurement } from '../../../lib/measurements'
+import { createMovementSfxTick } from '../../../lib/sfx/movement-tick'
 import { sfxEmitter } from '../../../lib/sfx-bus'
-
+import {
+  surfaceAttachmentId,
+  surfaceFramePose,
+  updateSurfaceNode,
+} from '../../../lib/surface-attachment'
 import {
   projectAlignmentGuidesWorldToActiveBuildingLocal,
   resolveAlignmentForActiveBuilding,
 } from '../../../lib/world-grid-snap'
 import useAlignmentGuides from '../../../store/use-alignment-guides'
-import useEditor, { isAlignmentGuideActive, isMagneticSnapActive } from '../../../store/use-editor'
-
+import useEditor, {
+  isAlignmentGuideActive,
+  isGridSnapActive,
+  isMagneticSnapActive,
+} from '../../../store/use-editor'
 import useFacingPose from '../../../store/use-facing-pose'
+import usePlacementPreview from '../../../store/use-placement-preview'
+import {
+  createItemSurfaceGridDispatch,
+  createItemSurfacePointerArbitration,
+} from '../registry/item-surface-move'
 import { getFloorStackPreviewPosition } from '../shared/floor-stack-preview'
 import {
   createLineGeometry,
@@ -63,9 +79,19 @@ import {
   updateLineGeometry,
 } from '../shared/placement-box-geometry'
 import {
+  type PointerSupportSurface,
   resolvePointerSupportElevation,
   resolvePointerSupportSurface,
 } from '../shared/pointer-support-cap'
+import { createShelfStickiness } from '../shared/shelf-stickiness'
+import { createSurfaceRejectionFeedback } from '../shared/surface-rejection'
+import { shouldCreateFloorDraft } from './draft-creation'
+import { commitFaceHostClick, resolveFaceHostPreviewCommit } from './face-host-commit'
+import {
+  applyFaceHostPreviewPose,
+  resolveFaceHostSwitch,
+  shouldDetachFaceHostOnLeave,
+} from './face-host-preview'
 import {
   getDetachedAttachmentPreviewLift,
   getGridAlignedDimensions,
@@ -77,12 +103,14 @@ import {
 import {
   ceilingStrategy,
   checkCanPlace,
+  faceHostStrategy,
   floorStrategy,
   itemSurfaceStrategy,
   roofWallStrategy,
   shelfSurfaceStrategy,
   wallStrategy,
 } from './placement-strategies'
+import { resolveItemPlacementSurfaceNormal } from './placement-surface'
 import type { PlacementState, TransitionResult } from './placement-types'
 import type { DraftNodeHandle } from './use-draft-node'
 
@@ -178,6 +206,27 @@ function getGridAlignedPreviewNode(item: ItemNode): ItemNode {
   }
 }
 
+/**
+ * Building-local Y of the storey the floor-path ghost belongs to.
+ *
+ * The cursor group is mounted inside ToolManager's building-local group, which
+ * carries no per-floor elevation, while every floor-path position (grid
+ * position, `getFloorVisualPosition`) is LEVEL-local — so on an upper storey the
+ * wireframe and its dimension labels render a floor too low. The wall / ceiling
+ * / item-surface paths don't need this: they convert a world hit through
+ * `worldToBuildingLocal`, which already carries the storey.
+ *
+ * Read off the level mesh (same source as `LevelOffsetGroup`) rather than the
+ * stored elevation so the ghost also follows the exploded-view lerp.
+ */
+function getPlacementLevelY(draft: ItemNode | null | undefined): number {
+  const levelId =
+    (draft ? findLevelAncestorId(draft.id, useScene.getState().nodes) : null) ??
+    useViewer.getState().selection.levelId
+  const levelMesh = levelId ? sceneRegistry.nodes.get(levelId as AnyNodeId) : null
+  return levelMesh ? levelMesh.position.y : 0
+}
+
 // Shared materials for placement cursor - we just change colors, not swap materials
 // Note: EdgesGeometry doesn't work with dashed lines, so using solid lines
 const edgeMaterial = new LineBasicNodeMaterial({
@@ -280,6 +329,8 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
   // by the MAX overlapping slab and a deck above the aimed-at floor
   // captures the item (and the grid-plane feedback makes it blink).
   const pointerSupportCapRef = useRef<number | null>(null)
+  const pointerSupportSurfaceRef = useRef<PointerSupportSurface | null>(null)
+  const frozenSupportSlabIdRef = useRef<string | undefined>(undefined)
   const [dimensionBounds, setDimensionBounds] = useState<PreviewBounds | null>(null)
 
   // Live camera ref — the shelf-stickiness test reconstructs the cursor world
@@ -427,17 +478,50 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     ): [number, number, number] => {
       const draft = draftNode.current
       if (!(draft && !asset?.attachTo)) return position
-      const previewNode = getGridAlignedPreviewNode({ ...draft, ...nodeUpdate } as ItemNode)
+      const previewNode = getGridAlignedPreviewNode({
+        ...draft,
+        ...nodeUpdate,
+        ...(pointerSupportSurfaceRef.current?.sourceNodeId
+          ? { supportSlabId: frozenSupportSlabIdRef.current }
+          : {}),
+      } as ItemNode)
       return getFloorStackPreviewPosition({
         node: previewNode,
         position,
         rotation: previewNode.rotation,
-        maxElevation: pointerSupportCapRef.current,
+        maxElevation: pointerSupportSurfaceRef.current?.sourceNodeId
+          ? null
+          : pointerSupportCapRef.current,
       })
     },
     [asset?.attachTo, draftNode],
   )
 
+  // Disable raycasting on the live draft mesh (and restore it when the draft
+  // changes or goes away) so the cursor ray passes through the item being
+  // moved and lands on the surface beneath it.
+  const reconcileDraftRaycast = useCallback((mesh: Object3D | null) => {
+    if (raycastDisabledMeshRef.current !== mesh) {
+      // New draft root (or cleared): restore the prior mesh and reset tracking.
+      for (const restore of restoreRaycastsRef.current) restore()
+      restoreRaycastsRef.current = []
+      raycastDisabledChildrenRef.current = new WeakSet()
+      raycastDisabledMeshRef.current = mesh
+    }
+    if (!mesh) return
+    // Item models can mount descendants asynchronously. Re-walk the root so
+    // newly mounted meshes cannot intercept the next pointer event.
+    mesh.traverse((child) => {
+      if (raycastDisabledChildrenRef.current.has(child)) return
+      raycastDisabledChildrenRef.current.add(child)
+      const original = child.raycast
+      child.raycast = () => {}
+      restoreRaycastsRef.current.push(() => {
+        child.raycast = original
+      })
+    })
+  }, [])
+
   useEffect(() => {
     if (!asset) return
     useScene.temporal.getState().pause()
@@ -452,6 +536,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     // layer's frame.
     let alignmentCandidates: AlignmentAnchor[] | null = null
     let floorDragAnchor: [number, number] | null = null
+    let pendingFaceHostId: string | null = null
 
     // Reset placement state
     placementState.current = configRef.current.initialState ?? {
@@ -465,17 +550,24 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     // No pointer surface known yet — fall back to the uncapped election
     // (an adopted move draft keeps its persisted host until the first move).
     pointerSupportCapRef.current = null
+    pointerSupportSurfaceRef.current = null
+    frozenSupportSlabIdRef.current = undefined
     if (!asset.attachTo && placementState.current.surface === 'floor') {
       gridPosition.current.y = 0
       if (cursorGroupRef.current) {
-        cursorGroupRef.current.position.y = 0
+        cursorGroupRef.current.position.y = getPlacementLevelY(draftNode.current)
       }
     }
 
+    let lastSurfaceEvent: NodeEvent<AnyNode> | null = null
+    const feedback = createSurfaceRejectionFeedback()
+    feedback.clear()
+
     // ---- Helpers ----
 
     const getContext = () => ({
       asset,
+      onSurfaceReject: (reason: SurfaceRejectReason) => feedback.reject(reason),
       levelId: useViewer.getState().selection.levelId,
       draftItem: draftNode.current,
       gridPosition: gridPosition.current,
@@ -493,6 +585,13 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
           }
         : validators
 
+    const disableDraftRaycastNow = () => {
+      const draft = draftNode.current
+      if (!draft) return
+      const mesh = sceneRegistry.nodes.get(draft.id)
+      if (mesh) reconcileDraftRaycast(mesh)
+    }
+
     const finishCommittedPlacement = (
       committedId: string | null,
       wasAdopted: boolean,
@@ -517,14 +616,94 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       useEditor.getState().setMode('select')
     }
 
+    const commitDraft = (
+      nodeUpdate: Partial<ItemNode>,
+      options?: {
+        supportElevationCap?: number | null
+        preferredSupportSlabId?: string | null
+        pinSupport?: boolean
+      },
+    ) => {
+      const draftId = draftNode.current?.id ?? null
+      const wasAdopted = draftNode.isAdopted
+      const finalId = draftNode.commit(nodeUpdate, options)
+      if (draftId) {
+        useLiveTransforms.getState().clear(draftId)
+        useLiveNodeOverrides.getState().clearFields(draftId, faceHostClearFields(draftNode.current))
+      }
+      return { committedId: finalId ?? draftId, wasAdopted }
+    }
+
+    const faceHostClearFields = (draft: ItemNode | null | undefined): Array<keyof ItemNode> => {
+      if (!draft?.parentId) return ['position', 'rotation']
+      const host = useScene.getState().nodes[draft.parentId as AnyNodeId]
+      return host
+        ? [...(nodeRegistry.get(host.type)?.capabilities.faceHost?.clearItemFields ?? [])]
+        : ['position', 'rotation']
+    }
+
+    const currentFaceHostId = (draft: ItemNode | null | undefined): string | null => {
+      if (!draft?.parentId) return null
+      const host = useScene.getState().nodes[draft.parentId as AnyNodeId]
+      return host
+        ? (nodeRegistry.get(host.type)?.capabilities.faceHost?.currentFaceId(draft) ?? null)
+        : null
+    }
+
+    const surfacePointer = createItemSurfacePointerArbitration()
     const revalidate = (): boolean => {
-      const placeable = altFreeRef.current || checkCanPlace(getContext(), validators)
+      const fits = checkCanPlace(getContext(), validators)
+      if (
+        !fits &&
+        lastSurfaceEvent &&
+        (feedback.reason === 'footprint-outside-surface' ||
+          feedback.reason === 'footprint-exceeds-host' ||
+          feedback.reason === 'no-surface') &&
+        (placementState.current.surface === 'item-surface' ||
+          placementState.current.surface === 'shelf-surface')
+      ) {
+        const hostId =
+          placementState.current.surface === 'shelf-surface'
+            ? placementState.current.shelfId
+            : placementState.current.surfaceItemId
+        const mesh = hostId ? sceneRegistry.nodes.get(hostId) : undefined
+        if (mesh) {
+          const position = mesh.localToWorld(gridPosition.current.clone()).toArray()
+          feedback.clear()
+          detachItemSurfaceToFloor({ ...lastSurfaceEvent, position } as ItemEvent)
+          return revalidate()
+        }
+      }
+      const placeable = !feedback.reason && (altFreeRef.current || fits)
       const color = placeable ? 0x22_c5_5e : 0xef_44_44 // green-500 : red-500
       edgeMaterial.color.setHex(color)
       basePlaneMaterial.color.setHex(color)
       return placeable
     }
 
+    const surfaceContext = (event: NodeEvent<AnyNode>) => {
+      lastSurfaceEvent = event
+      return {
+        ...getContext(),
+        onSurfaceReject: (reason: SurfaceRejectReason) => {
+          if (
+            (reason === 'footprint-outside-surface' ||
+              reason === 'footprint-exceeds-host' ||
+              reason === 'no-surface') &&
+            (placementState.current.surface === 'item-surface' ||
+              placementState.current.surface === 'shelf-surface')
+          ) {
+            feedback.clear()
+            detachItemSurfaceToFloor(event as ItemEvent)
+            surfacePointer.hit(event.node.id, event.nativeEvent.nativeEvent ?? event.nativeEvent)
+            return
+          }
+          feedback.reject(reason, event.nativeEvent.nativeEvent ?? event.nativeEvent)
+          revalidate()
+        },
+      }
+    }
+
     // Tool visuals are rendered inside the building-local ToolManager group, so all cursor
     // positions must be in building-local space. Wall/ceiling/item-surface strategies return
     // world-space cursor positions (from their event.position); convert them here.
@@ -540,7 +719,37 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       return buildingMesh ? buildingMesh.localToWorld(new Vector3(x, y, z)) : new Vector3(x, y, z)
     }
 
-    const applyTransition = (result: TransitionResult) => {
+    const worldRotationToBuildingLocal = (
+      rotation: [number, number, number],
+    ): [number, number, number] => {
+      const worldQuaternion = new Quaternion().setFromEuler(new Euler(...rotation))
+      const buildingId = useViewer.getState().selection.buildingId
+      const buildingMesh = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
+      if (buildingMesh) {
+        const buildingWorldQuaternion = new Quaternion()
+        buildingMesh.getWorldQuaternion(buildingWorldQuaternion)
+        worldQuaternion.premultiply(buildingWorldQuaternion.invert())
+      }
+      const localRotation = new Euler().setFromQuaternion(worldQuaternion, 'XYZ')
+      return [localRotation.x, localRotation.y, localRotation.z]
+    }
+
+    const { tick: tickMovementSfx } = createMovementSfxTick()
+    const tickSurfaceMovementSfx = (position: [number, number, number]) => {
+      const point = worldToBuildingLocal(...position)
+      tickMovementSfx({
+        coords: [point.x, point.z],
+        gridSnapActive: isGridSnapActive(),
+        gridStep: useEditor.getState().gridSnapStep,
+      })
+    }
+
+    const applyTransition = (result: TransitionResult, event?: NodeEvent<AnyNode>) => {
+      if (event) {
+        surfacePointer.hit(event.node.id, event.nativeEvent.nativeEvent ?? event.nativeEvent)
+        tickSurfaceMovementSfx(result.cursorPosition)
+      }
+      feedback.clear()
       // Alignment guides are floor-only; clear them when the cursor moves
       // onto a wall / ceiling / item surface (only those paths call this).
       useAlignmentGuides.getState().clear()
@@ -555,7 +764,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       if (cursorGroupRef.current) {
         cursorGroupRef.current.position.set(c.x, c.y, c.z)
         if (result.cursorRotation) {
-          cursorGroupRef.current.rotation.set(...result.cursorRotation)
+          cursorGroupRef.current.rotation.set(
+            ...worldRotationToBuildingLocal(result.cursorRotation),
+          )
         } else {
           cursorGroupRef.current.rotation.set(0, result.cursorRotationY, 0)
         }
@@ -575,7 +786,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       if (cursorGroupRef.current) {
         cursorGroupRef.current.position.set(c.x, c.y, c.z)
         if (result.cursorRotation) {
-          cursorGroupRef.current.rotation.set(...result.cursorRotation)
+          cursorGroupRef.current.rotation.set(
+            ...worldRotationToBuildingLocal(result.cursorRotation),
+          )
         } else {
           cursorGroupRef.current.rotation.set(0, result.cursorRotationY, 0)
         }
@@ -599,7 +812,10 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       if (draft) {
         Object.assign(draft, result.nodeUpdate)
         // One-time setup: put node in the right parent so it renders correctly
-        useScene.getState().updateNode(draft.id, result.nodeUpdate)
+        if (result.surfaceId !== undefined)
+          draftNode.updateSurface(result.nodeUpdate, result.surfaceId)
+        else updateSurfaceNode(draft.id, result.nodeUpdate)
+        disableDraftRaycastNow()
       }
 
       const previewBounds = expandBoundsToGrid(
@@ -617,6 +833,8 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
     // ---- Init draft ----
     configRef.current.initDraft(gridPosition.current)
+    if (draftNode.current && surfaceAttachmentId(draftNode.current))
+      gridPosition.current.set(...draftNode.current.position)
     const preserveDragOffset = configRef.current.preserveDragOffset === true
     // The host the item was grabbed from + its pre-drag host-local position.
     // Each surface's grab anchor preserves the grab offset only on THAT host,
@@ -775,7 +993,10 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
           }
         }
       } else if (cursorGroupRef.current) {
+        // No registered mesh yet (a just-created draft renders next tick), so
+        // fall back to the level-local grid position lifted onto its storey.
         cursorGroupRef.current.position.copy(gridPosition.current)
+        cursorGroupRef.current.position.y += getPlacementLevelY(draftNode.current)
         cursorGroupRef.current.rotation.y = draftNode.current.rotation[1] ?? 0
       }
     }
@@ -800,6 +1021,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       setTimeout(() => window.removeEventListener('click', swallow, { capture: true }), 300)
     }
     const onReleaseCommit = () => {
+      gridDispatch.flush()
       if (!releaseCommit) return
       const commit = releaseCommit
       releaseCommit = null
@@ -809,56 +1031,15 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
     // ---- Floor Handlers ----
 
-    let previousGridPos: [number, number, number] | null = null
-
-    // Scratch objects reused by the stickiness test (runs per grid:move).
-    const stickyRay = new Ray()
-    const stickyBox = new Box3()
-    const stickyMat = new Matrix4()
-    const stickyCamPos = new Vector3()
-
-    // True while the cursor ray still points at the active shelf's volume.
-    // Used to keep an item hosted on a shelf "sticky": from an angled camera
-    // the cursor ray slips off the shelf's thin boards / through its gaps and
-    // lands on the floor *behind* the shelf, which would otherwise thrash the
-    // placement between the shelf row and the floor on every micro-move. We
-    // reconstruct the world ray (camera → grid hit point) and test it against
-    // the shelf's bounding box — so a ray that passes *through* the shelf but
-    // lands behind it still counts as "on the shelf". Only a ray that misses
-    // the shelf box entirely means the user genuinely moved off it. A simple
-    // footprint test on the floor hit point can't distinguish those.
-    const cursorRayIntersectsActiveShelf = (gridWorldPoint: [number, number, number]): boolean => {
-      const shelfId = placementState.current.shelfId
-      if (!shelfId) return false
-      const shelfMesh = sceneRegistry.nodes.get(shelfId as AnyNodeId)
-      const shelfNode = useScene.getState().nodes[shelfId as AnyNodeId] as
-        | { width?: number; depth?: number; height?: number }
-        | undefined
-      if (!(shelfMesh && shelfNode?.width && shelfNode?.depth && shelfNode?.height)) return false
-
-      cameraRef.current.getWorldPosition(stickyCamPos)
-      stickyRay.origin.copy(stickyCamPos)
-      stickyRay.direction
-        .set(
-          gridWorldPoint[0] - stickyCamPos.x,
-          gridWorldPoint[1] - stickyCamPos.y,
-          gridWorldPoint[2] - stickyCamPos.z,
-        )
-        .normalize()
-
-      // Into shelf-local space, then test the shelf's local AABB (origin at the
-      // base: y ∈ [0, height]) with a small margin.
-      stickyRay.applyMatrix4(stickyMat.copy(shelfMesh.matrixWorld).invert())
-      const m = 0.08
-      stickyBox.min.set(-shelfNode.width / 2 - m, -m, -shelfNode.depth / 2 - m)
-      stickyBox.max.set(shelfNode.width / 2 + m, shelfNode.height + m, shelfNode.depth / 2 + m)
-      return stickyRay.intersectsBox(stickyBox)
-    }
+    const cursorRayIntersectsShelf = createShelfStickiness()
 
     const onGridMove = (event: GridEvent) => {
+      if (surfacePointer.blocksGrid(event.nativeEvent.nativeEvent ?? event.nativeEvent)) return
       releaseCommit = () => onGridClick(event)
       // Lazy draft creation: if no draft yet (e.g. level wasn't ready during init), create now
-      if (draftNode.current === null && asset.attachTo === undefined) {
+      if (
+        shouldCreateFloorDraft(draftNode.current, asset.attachTo, placementState.current.surface)
+      ) {
         configRef.current.initDraft(gridPosition.current)
       }
 
@@ -875,6 +1056,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       // a drag over a deck-above-a-floor hop between the two surfaces).
       const pointed = resolvePointerSupportSurface(cameraRef.current, event.position)
       pointerSupportCapRef.current = pointed?.elevation ?? null
+      pointerSupportSurfaceRef.current = pointed
       const surfaceEvent: GridEvent =
         pointed?.worldPoint && pointed.localPoint
           ? { ...event, position: pointed.worldPoint, localPosition: pointed.localPoint }
@@ -885,13 +1067,34 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       // off a board / through a gap and hit the floor behind). Detach to the
       // floor only once the ray misses the shelf entirely — without this the
       // item oscillates between the shelf row and the floor on every micro-move.
+      const counterId =
+        placementState.current.surface === 'item-surface'
+          ? placementState.current.surfaceItemId
+          : null
+      if (counterId && useScene.getState().nodes[counterId as AnyNodeId]?.type === 'cabinet') {
+        if (
+          surfacePointer.blocksGrid(event.nativeEvent.nativeEvent ?? event.nativeEvent) ||
+          cursorRayIntersectsShelf(counterId, cameraRef.current, event.position)
+        )
+          return
+        detachItemSurfaceToFloor(surfaceEvent as unknown as ItemEvent)
+      }
       if (placementState.current.surface === 'shelf-surface') {
-        if (cursorRayIntersectsActiveShelf(event.position)) return
+        if (
+          cursorRayIntersectsShelf(
+            placementState.current.shelfId,
+            cameraRef.current,
+            event.position,
+          )
+        )
+          return
         // Land at the pointed surface's plan point — the raw grid hit is
         // still skewed by the plane riding at the shelf-surface height.
         detachItemSurfaceToFloor(surfaceEvent as unknown as ItemEvent)
       }
 
+      if (placementState.current.surface === 'floor')
+        feedback.grid(event.nativeEvent.nativeEvent ?? event.nativeEvent)
       const floorEvent = applyFloorGrabOffset(surfaceEvent)
 
       lastRawPos.current.set(
@@ -946,27 +1149,53 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         useAlignmentGuides.getState().clear()
       }
 
-      const gridPos: [number, number, number] = [
+      // `result.gridPosition[1]` is the LIVE `gridPosition.current.y` — seeded
+      // from the draft's authored Y by `initDraft` (so a block-face / raised
+      // construction-plane item keeps its height) and zeroed by
+      // `detachItemSurfaceToFloor` / `faceHostStrategy.leave` when the item
+      // comes back down. Freezing it at drag start instead left an item taken
+      // off a shelf floating at the shelf's height.
+      let gridPos: [number, number, number] = [
         result.gridPosition[0] + alignX,
         result.gridPosition[1],
         result.gridPosition[2] + alignZ,
       ]
-
-      // Play snap sound when grid position changes
-      if (
-        previousGridPos &&
-        (gridPos[0] !== previousGridPos[0] || gridPos[2] !== previousGridPos[2])
-      ) {
-        sfxEmitter.emit('sfx:grid-snap')
+      frozenSupportSlabIdRef.current = undefined
+      if (draft && pointed?.sourceNodeId) {
+        const effectiveNode = {
+          ...draft,
+          position: gridPos,
+          parentId: useViewer.getState().selection.levelId ?? draft.parentId,
+        } as ItemNode
+        const frozenPatch = resolveFrozenFloorPlacementPatch(
+          effectiveNode,
+          useScene.getState().nodes,
+          {
+            position: gridPos,
+            rotation: effectiveNode.rotation,
+            elevation: pointed.elevation,
+            preferredSlabId: pointed.supportSlabId,
+          },
+        )
+        gridPos = frozenPatch.position
+        frozenSupportSlabIdRef.current = frozenPatch.supportSlabId
       }
 
-      previousGridPos = [...gridPos]
+      tickMovementSfx({
+        coords: [gridPos[0], gridPos[2]],
+        gridSnapActive: isGridSnapActive(),
+        gridStep: useEditor.getState().gridSnapStep,
+      })
       gridPosition.current.set(...gridPos)
       const cursorPosition = getFloorVisualPosition(gridPos)
       if (!draft && asset.attachTo) {
         cursorPosition[1] += getDetachedAttachmentPreviewLift(asset.attachTo)
       }
-      cursorGroupRef.current.position.set(cursorPosition[0], cursorPosition[1], cursorPosition[2])
+      cursorGroupRef.current.position.set(
+        cursorPosition[0],
+        cursorPosition[1] + getPlacementLevelY(draft),
+        cursorPosition[2],
+      )
       // Floor items only rotate on Y; keep the preview box (and the live
       // transform the 2D floorplan mirrors) aligned with the draft's
       // rotation. Without this the box stays at its seed rotation until a
@@ -989,6 +1218,8 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     }
 
     const onGridClick = (event: GridEvent) => {
+      gridDispatch.flush()
+      if (feedback.reason) return
       // Drop alignment guides on click — the move commits (guides done) or
       // placement re-arms (the next move republishes them).
       useAlignmentGuides.getState().clear()
@@ -1002,20 +1233,15 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         0,
       ]
 
-      // Clear live transform before commit
-      if (draftNode.current) {
-        useLiveTransforms.getState().clear(draftNode.current.id)
-      }
-
-      const committedId = draftNode.current?.id ?? null
-      const wasAdopted = draftNode.isAdopted
       // Carry the pointer surface cap into the commit so the persisted
       // supportSlabId reproduces the capped election (elects the aimed-at
       // lower slab — or the ground — instead of a deck hanging above).
-      const finalId = draftNode.commit(result.nodeUpdate, {
+      const { committedId, wasAdopted } = commitDraft(result.nodeUpdate, {
         supportElevationCap: pointerSupportCapRef.current,
+        preferredSupportSlabId: pointerSupportSurfaceRef.current?.supportSlabId,
+        pinSupport: pointerSupportSurfaceRef.current?.sourceNodeId != null,
       })
-      finishCommittedPlacement(finalId ?? committedId, wasAdopted, () => {
+      finishCommittedPlacement(committedId, wasAdopted, () => {
         draftNode.create(
           gridPosition.current,
           asset,
@@ -1055,7 +1281,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         ensureDraft(result)
       } else if (result.nodeUpdate.parentId) {
         // Existing draft (move mode): reparent to new wall
-        useScene.getState().updateNode(draftNode.current.id, result.nodeUpdate)
+        updateSurfaceNode(draftNode.current.id, result.nodeUpdate)
         if (result.stateUpdate.wallId) {
           useScene.getState().dirtyNodes.add(result.stateUpdate.wallId as AnyNodeId)
         }
@@ -1082,7 +1308,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         event.stopPropagation()
         applyTransition(enterResult)
         if (draftNode.current && enterResult.nodeUpdate.parentId) {
-          useScene.getState().updateNode(draftNode.current.id, enterResult.nodeUpdate)
+          updateSurfaceNode(draftNode.current.id, enterResult.nodeUpdate)
           if (enterResult.stateUpdate.wallId) {
             useScene.getState().dirtyNodes.add(enterResult.stateUpdate.wallId as AnyNodeId)
           }
@@ -1208,18 +1434,12 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       if (!result) return
 
       event.stopPropagation()
-      // Clear live transform before commit
-      if (draftNode.current) {
-        useLiveTransforms.getState().clear(draftNode.current.id)
-      }
-      const committedId = draftNode.current?.id ?? null
-      const wasAdopted = draftNode.isAdopted
-      const finalId = draftNode.commit(result.nodeUpdate)
+      const { committedId, wasAdopted } = commitDraft(result.nodeUpdate)
       if (result.dirtyNodeId) {
         useScene.getState().dirtyNodes.add(result.dirtyNodeId)
       }
 
-      finishCommittedPlacement(finalId ?? committedId, wasAdopted, () => {
+      finishCommittedPlacement(committedId, wasAdopted, () => {
         const nodes = useScene.getState().nodes
         const enterResult = wallStrategy.enter(
           getContext(),
@@ -1285,7 +1505,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         ensureDraft(result)
       } else if (result.nodeUpdate.parentId) {
         // Existing draft (move mode): reparent to the segment
-        useScene.getState().updateNode(draftNode.current.id, result.nodeUpdate)
+        updateSurfaceNode(draftNode.current.id, result.nodeUpdate)
       }
       return true
     }
@@ -1368,14 +1588,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       if (!result) return
 
       event.stopPropagation()
-      if (draftNode.current) {
-        useLiveTransforms.getState().clear(draftNode.current.id)
-      }
-      const committedId = draftNode.current?.id ?? null
-      const wasAdopted = draftNode.isAdopted
-      const finalId = draftNode.commit(result.nodeUpdate)
+      const { committedId, wasAdopted } = commitDraft(result.nodeUpdate)
 
-      finishCommittedPlacement(finalId ?? committedId, wasAdopted, () => {
+      finishCommittedPlacement(committedId, wasAdopted, () => {
         const enterResult = roofWallStrategy.enter(getContext(), event, altFreeRef.current)
         if (enterResult) {
           applyTransition(enterResult)
@@ -1408,10 +1623,124 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       }
     }
 
+    // ---- Face Host Handlers ----
+
+    const enterFaceHost = (event: NodeEvent): boolean => {
+      const result = faceHostStrategy.enter(getContext(), event)
+      if (!result) return false
+      pendingFaceHostId = null
+      event.stopPropagation()
+      applyTransition(result)
+      if (!draftNode.current) {
+        ensureDraft(result)
+      } else if (result.nodeUpdate.parentId) {
+        updateSurfaceNode(draftNode.current.id, result.nodeUpdate)
+        disableDraftRaycastNow()
+      }
+      if (draftNode.current) useLiveTransforms.getState().clear(draftNode.current.id)
+      return true
+    }
+
+    const onFaceHostEnter = (event: NodeEvent) => {
+      has3DPointerDrivenMoveRef.current = true
+      enterFaceHost(event)
+    }
+
+    const onFaceHostMove = (event: NodeEvent) => {
+      has3DPointerDrivenMoveRef.current = true
+      if (!cursorGroupRef.current) return
+      const ctx = getContext()
+      if (ctx.state.surface !== 'block-face' || !draftNode.current) {
+        if (enterFaceHost(event)) releaseCommit = () => onFaceHostClick(event)
+        return
+      }
+      const result = faceHostStrategy.move(ctx, event)
+      if (!result) {
+        event.stopPropagation()
+        return
+      }
+
+      event.stopPropagation()
+      const draft = draftNode.current
+      const nextFaceId = result.hostFaceId
+      const faceSwitch = resolveFaceHostSwitch(
+        currentFaceHostId(draft),
+        nextFaceId,
+        pendingFaceHostId,
+      )
+      pendingFaceHostId = faceSwitch.pendingFaceId
+      if (!faceSwitch.accept) return
+      releaseCommit = () => onFaceHostClick(event)
+
+      const posChanged =
+        gridPosition.current.x !== result.gridPosition[0] ||
+        gridPosition.current.y !== result.gridPosition[1] ||
+        gridPosition.current.z !== result.gridPosition[2]
+      if (posChanged) sfxEmitter.emit('sfx:grid-snap')
+      gridPosition.current.set(...result.gridPosition)
+      const cursor = worldToBuildingLocal(...result.cursorPosition)
+      cursorGroupRef.current.position.copy(cursor)
+      if (result.cursorRotation) {
+        cursorGroupRef.current.rotation.set(...worldRotationToBuildingLocal(result.cursorRotation))
+      }
+
+      if (draft && result.nodeUpdate) {
+        Object.assign(draft, result.nodeUpdate)
+        const mesh = sceneRegistry.nodes.get(draft.id)
+        const rotation = result.nodeUpdate.rotation ?? draft.rotation
+        if (mesh) applyFaceHostPreviewPose(mesh, result.gridPosition, rotation)
+        useLiveNodeOverrides.getState().set(draft.id, {
+          position: result.gridPosition,
+          rotation,
+          ...result.nodeUpdate,
+        })
+      }
+      revalidate()
+    }
+
+    const onFaceHostClick = (event: NodeEvent) => {
+      const outcome = commitFaceHostClick({
+        commitDraft,
+        enterFaceHost,
+        event,
+        getContext,
+      })
+      if (!outcome) return
+      const { committedId, wasAdopted } = outcome
+      finishCommittedPlacement(committedId, wasAdopted, () => {
+        const enterResult = faceHostStrategy.enter(getContext(), event)
+        if (enterResult) applyTransition(enterResult)
+        else revalidate()
+      })
+    }
+
+    const onFaceHostLeave = (event: NodeEvent) => {
+      pendingFaceHostId = null
+      if (!shouldDetachFaceHostOnLeave(asset.attachTo)) {
+        event.stopPropagation()
+        return
+      }
+      const result = faceHostStrategy.leave(getContext())
+      if (!result) return
+      event.stopPropagation()
+      const draft = draftNode.current
+      if (draft) {
+        useLiveNodeOverrides.getState().clearFields(draft.id, faceHostClearFields(draft))
+      }
+      if (draftNode.isAdopted) {
+        applyTransition(result)
+        if (draft) useScene.getState().updateNode(draft.id, result.nodeUpdate)
+      } else {
+        draftNode.destroy()
+        Object.assign(placementState.current, result.stateUpdate)
+      }
+    }
+
     // ---- Item Surface Handlers ----
 
-    const detachItemSurfaceToFloor = (event: ItemEvent) => {
+    const detachItemSurfaceToFloor = (event: NodeEvent<AnyNode>) => {
       hostSurfaceDragAnchor = null
+      surfacePointer.clear()
       // Landing back on the floor: refresh the pointer surface cap from
       // this event's world hit so the first floor position already targets
       // the aimed-at surface (not a deck above it).
@@ -1449,7 +1778,11 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         levelId ? { parentId: levelId } : undefined,
       )
       if (cursorGroupRef.current) {
-        cursorGroupRef.current.position.set(...floorVisualPosition)
+        cursorGroupRef.current.position.set(
+          floorVisualPosition[0],
+          floorVisualPosition[1] + getPlacementLevelY(draftNode.current),
+          floorVisualPosition[2],
+        )
       }
 
       const draft = draftNode.current
@@ -1480,7 +1813,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         // parent-must-be-a-level guard and the item + grid stopped following
         // slab elevations for the rest of the drag).
         if (levelId) draft.parentId = levelId
-        useScene.getState().updateNode(draft.id, {
+        updateSurfaceNode(draft.id, {
           parentId: useViewer.getState().selection.levelId as string,
           position: floorPos,
           rotation,
@@ -1490,29 +1823,42 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       revalidate()
     }
 
-    const onItemEnter = (event: ItemEvent) => {
+    const onItemEnter = (event: NodeEvent<AnyNode>) => {
+      if (event.node.type === 'cabinet' && placementState.current.surfaceItemId === event.node.id) {
+        onItemMove(event)
+        return
+      }
+      if (event.node.type === 'cabinet') {
+        lastRawPos.current.set(...event.position)
+        surfacePointer.hit(event.node.id, event.nativeEvent.nativeEvent ?? event.nativeEvent)
+      }
       if (event.node.id === draftNode.current?.id) return
       has3DPointerDrivenMoveRef.current = true
-      const result = itemSurfaceStrategy.enter(getContext(), event)
+      const result = itemSurfaceStrategy.enter(surfaceContext(event), event)
       if (!result) return
+      feedback.clear()
 
       event.stopPropagation()
-      applyTransition(result)
+      applyTransition(result, event)
 
       if (!draftNode.current) {
         ensureDraft(result)
       } else if (result.nodeUpdate.parentId) {
         // Existing draft (move mode): reparent to surface item
-        useScene.getState().updateNode(draftNode.current.id, result.nodeUpdate)
+        draftNode.updateSurface(result.nodeUpdate, result.surfaceId ?? null)
       }
     }
 
-    const onItemMove = (event: ItemEvent) => {
+    const onItemMove = (event: NodeEvent<AnyNode>) => {
       if (event.node.id === draftNode.current?.id) return
       releaseCommit = () => onItemClick(event)
       has3DPointerDrivenMoveRef.current = true
       if (!cursorGroupRef.current) return
-      const ctx = getContext()
+      const ctx = surfaceContext(event)
+      if (event.node.type === 'cabinet') {
+        lastRawPos.current.set(...event.position)
+        surfacePointer.hit(event.node.id, event.nativeEvent.nativeEvent ?? event.nativeEvent)
+      }
 
       if (ctx.state.surface !== 'item-surface') {
         // Try entering surface mode
@@ -1520,9 +1866,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         if (!enterResult) return
 
         event.stopPropagation()
-        applyTransition(enterResult)
+        applyTransition(enterResult, event)
         if (draftNode.current && enterResult.nodeUpdate.parentId) {
-          useScene.getState().updateNode(draftNode.current.id, enterResult.nodeUpdate)
+          draftNode.updateSurface(enterResult.nodeUpdate, enterResult.surfaceId ?? null)
         }
         return
       }
@@ -1535,18 +1881,18 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
         event.stopPropagation()
         if (enterResult) {
-          applyTransition(enterResult)
+          applyTransition(enterResult, event)
           if (draftNode.current && enterResult.nodeUpdate.parentId) {
-            useScene.getState().updateNode(draftNode.current.id, enterResult.nodeUpdate)
+            draftNode.updateSurface(enterResult.nodeUpdate, enterResult.surfaceId ?? null)
           }
-        } else {
+        } else if (!feedback.reason) {
           detachItemSurfaceToFloor(event)
         }
         return
       }
 
       if (!draftNode.current) {
-        const enterResult = itemSurfaceStrategy.enter(getContext(), event)
+        const enterResult = itemSurfaceStrategy.enter(surfaceContext(event), event)
         if (!enterResult) return
         event.stopPropagation()
         ensureDraft(enterResult)
@@ -1563,11 +1909,17 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         itemMoveEvent.position[1],
         itemMoveEvent.position[2],
       )
-      const result = itemSurfaceStrategy.move(ctx, itemMoveEvent)
-      if (!result) return
+      const result = itemSurfaceStrategy.move(ctx, itemMoveEvent, event)
+      if (!result) {
+        revalidate()
+        return
+      }
+      feedback.clear()
 
       event.stopPropagation()
 
+      surfacePointer.hit(event.node.id, event.nativeEvent.nativeEvent ?? event.nativeEvent)
+      tickSurfaceMovementSfx(result.cursorPosition)
       gridPosition.current.set(...result.gridPosition)
       const ic = worldToBuildingLocal(...result.cursorPosition)
       cursorGroupRef.current.position.set(ic.x, ic.y, ic.z)
@@ -1576,8 +1928,13 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       const draft = draftNode.current
       if (draft) {
         draft.position = result.gridPosition
+        if (event.node.type === 'procedural-item')
+          draftNode.updateSurface(result.nodeUpdate ?? {}, result.surfaceId ?? null)
         const mesh = sceneRegistry.nodes.get(draft.id)
-        if (mesh) mesh.position.set(...result.gridPosition)
+        if (mesh)
+          mesh.position.set(
+            ...surfaceFramePose(draft.parentId, surfaceAttachmentId(draft), draft, true).position,
+          )
 
         // Publish live transform for 2D floorplan
         useLiveTransforms.getState().set(draft.id, {
@@ -1589,7 +1946,8 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       revalidate()
     }
 
-    const onItemLeave = (event: ItemEvent) => {
+    const onItemLeave = (event: NodeEvent<AnyNode>) => {
+      if (event.node.type === 'cabinet') return
       if (event.node.id === draftNode.current?.id) return
       if (placementState.current.surface !== 'item-surface') return
 
@@ -1603,7 +1961,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       detachItemSurfaceToFloor(event)
     }
 
-    const onItemClick = (event: ItemEvent) => {
+    const onItemClick = (event: NodeEvent<AnyNode>) => {
+      gridDispatch.flush()
+      if (feedback.reason) return
       // Click on the draft item itself. R3F dispatches click events to
       // the closest intersected mesh only — when the draft is hovering
       // on a host (shelf / table / etc.) the draft's mesh is *above*
@@ -1612,7 +1972,16 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       // self-click as a commit on the active shelf so the user doesn't
       // have to aim around the cursor preview to drop the item.
       if (event.node.id === draftNode.current?.id) {
-        const ctx = getContext()
+        const ctx = surfaceContext(event)
+        if (ctx.state.surface === 'block-face') {
+          const result = resolveFaceHostPreviewCommit(ctx)
+          if (result) {
+            event.stopPropagation()
+            const { committedId, wasAdopted } = commitDraft(result.nodeUpdate)
+            finishCommittedPlacement(committedId, wasAdopted, revalidate)
+            return
+          }
+        }
         if (ctx.state.surface === 'shelf-surface' && ctx.state.shelfId) {
           const shelfNode = useScene.getState().nodes[ctx.state.shelfId as AnyNodeId]
           if (shelfNode && shelfNode.type === 'shelf') {
@@ -1620,13 +1989,8 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
             const result = shelfSurfaceStrategy.click(ctx, synthetic as never)
             if (result) {
               event.stopPropagation()
-              if (draftNode.current) {
-                useLiveTransforms.getState().clear(draftNode.current.id)
-              }
-              const committedId = draftNode.current?.id ?? null
-              const wasAdopted = draftNode.isAdopted
-              const finalId = draftNode.commit(result.nodeUpdate)
-              finishCommittedPlacement(finalId ?? committedId, wasAdopted, () => {
+              const { committedId, wasAdopted } = commitDraft(result.nodeUpdate)
+              finishCommittedPlacement(committedId, wasAdopted, () => {
                 const enterResult = shelfSurfaceStrategy.enter(ctx, synthetic as never)
                 if (enterResult) {
                   applyTransition(enterResult)
@@ -1643,18 +2007,18 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         // the host's own click event is blocked by the cursor preview.
         if (ctx.state.surface === 'item-surface' && ctx.state.surfaceItemId) {
           const hostNode = useScene.getState().nodes[ctx.state.surfaceItemId as AnyNodeId]
-          if (hostNode && hostNode.type === 'item') {
+          if (
+            hostNode &&
+            (hostNode.type === 'item' ||
+              hostNode.type === 'cabinet' ||
+              hostNode.type === 'procedural-item')
+          ) {
             const synthetic = { ...event, node: hostNode } as ItemEvent
             const result = itemSurfaceStrategy.click(ctx, synthetic)
             if (result) {
               event.stopPropagation()
-              if (draftNode.current) {
-                useLiveTransforms.getState().clear(draftNode.current.id)
-              }
-              const committedId = draftNode.current?.id ?? null
-              const wasAdopted = draftNode.isAdopted
-              const finalId = draftNode.commit(result.nodeUpdate)
-              finishCommittedPlacement(finalId ?? committedId, wasAdopted, () => {
+              const { committedId, wasAdopted } = commitDraft(result.nodeUpdate)
+              finishCommittedPlacement(committedId, wasAdopted, () => {
                 const enterResult = itemSurfaceStrategy.enter(ctx, synthetic)
                 if (enterResult) {
                   applyTransition(enterResult)
@@ -1679,16 +2043,11 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
             const result = ceilingStrategy.click(ctx, synthetic, getActiveValidators())
             if (result) {
               event.stopPropagation()
-              if (draftNode.current) {
-                useLiveTransforms.getState().clear(draftNode.current.id)
-              }
-              const committedId = draftNode.current?.id ?? null
-              const wasAdopted = draftNode.isAdopted
-              const finalId = draftNode.commit(result.nodeUpdate)
-              finishCommittedPlacement(finalId ?? committedId, wasAdopted, () => {
+              const { committedId, wasAdopted } = commitDraft(result.nodeUpdate)
+              finishCommittedPlacement(committedId, wasAdopted, () => {
                 const nodes = useScene.getState().nodes
                 const enterResult = ceilingStrategy.enter(
-                  getContext(),
+                  surfaceContext(event),
                   synthetic,
                   resolveLevelId,
                   nodes,
@@ -1706,21 +2065,15 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         return
       }
 
-      const result = itemSurfaceStrategy.click(getContext(), event)
+      const result = itemSurfaceStrategy.click(surfaceContext(event), event)
       if (!result) return
 
       event.stopPropagation()
-      // Clear live transform before commit
-      if (draftNode.current) {
-        useLiveTransforms.getState().clear(draftNode.current.id)
-      }
-      const committedId = draftNode.current?.id ?? null
-      const wasAdopted = draftNode.isAdopted
-      const finalId = draftNode.commit(result.nodeUpdate)
+      const { committedId, wasAdopted } = commitDraft(result.nodeUpdate)
 
-      finishCommittedPlacement(finalId ?? committedId, wasAdopted, () => {
+      finishCommittedPlacement(committedId, wasAdopted, () => {
         // Try to set up next draft on the same surface
-        const enterResult = itemSurfaceStrategy.enter(getContext(), event)
+        const enterResult = itemSurfaceStrategy.enter(surfaceContext(event), event)
         if (enterResult) {
           applyTransition(enterResult)
         } else {
@@ -1744,7 +2097,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         ensureDraft(result)
       } else if (result.nodeUpdate.parentId) {
         // Existing draft (move mode): reparent to new ceiling
-        useScene.getState().updateNode(draftNode.current.id, result.nodeUpdate)
+        updateSurfaceNode(draftNode.current.id, result.nodeUpdate)
         if (result.stateUpdate.ceilingId) {
           useScene.getState().dirtyNodes.add(result.stateUpdate.ceilingId as AnyNodeId)
         }
@@ -1841,15 +2194,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       if (!result) return
 
       event.stopPropagation()
-      // Clear live transform before commit
-      if (draftNode.current) {
-        useLiveTransforms.getState().clear(draftNode.current.id)
-      }
-      const committedId = draftNode.current?.id ?? null
-      const wasAdopted = draftNode.isAdopted
-      const finalId = draftNode.commit(result.nodeUpdate)
+      const { committedId, wasAdopted } = commitDraft(result.nodeUpdate)
 
-      finishCommittedPlacement(finalId ?? committedId, wasAdopted, () => {
+      finishCommittedPlacement(committedId, wasAdopted, () => {
         const nodes = useScene.getState().nodes
         const enterResult = ceilingStrategy.enter(getContext(), event, resolveLevelId, nodes)
         if (enterResult) {
@@ -1900,16 +2247,16 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
     const onShelfEnter = (event: ShelfEvent) => {
       has3DPointerDrivenMoveRef.current = true
-      const result = shelfSurfaceStrategy.enter(getContext(), event)
+      const result = shelfSurfaceStrategy.enter(surfaceContext(event), event)
       if (!result) return
 
       event.stopPropagation()
-      applyTransition(result)
+      applyTransition(result, event)
 
       if (!draftNode.current) {
         ensureDraft(result)
       } else if (result.nodeUpdate.parentId) {
-        useScene.getState().updateNode(draftNode.current.id, result.nodeUpdate)
+        updateSurfaceNode(draftNode.current.id, result.nodeUpdate)
       }
     }
 
@@ -1919,7 +2266,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       // A shelf event can fire before the cursor group mounts or after
       // teardown, leaving the ref null; bail before dereferencing it below.
       if (!cursorGroupRef.current) return
-      const ctx = getContext()
+      const ctx = surfaceContext(event)
       if (ctx.state.surface !== 'shelf-surface') {
         // Cursor entered via a move event without an enter — try
         // transitioning in so the user doesn't need to mouse out + back
@@ -1927,11 +2274,11 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         const enterResult = shelfSurfaceStrategy.enter(ctx, event)
         if (!enterResult) return
         event.stopPropagation()
-        applyTransition(enterResult)
+        applyTransition(enterResult, event)
         if (!draftNode.current) {
           ensureDraft(enterResult)
         } else if (enterResult.nodeUpdate.parentId) {
-          useScene.getState().updateNode(draftNode.current.id, enterResult.nodeUpdate)
+          updateSurfaceNode(draftNode.current.id, enterResult.nodeUpdate)
         }
         return
       }
@@ -1943,8 +2290,11 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       const result = shelfSurfaceStrategy.move(ctx, shelfMoveEvent)
       if (!result) return
 
+      feedback.clear()
       event.stopPropagation()
 
+      surfacePointer.hit(event.node.id, event.nativeEvent.nativeEvent ?? event.nativeEvent)
+      tickSurfaceMovementSfx(result.cursorPosition)
       gridPosition.current.set(...result.gridPosition)
       const ic = worldToBuildingLocal(...result.cursorPosition)
       cursorGroupRef.current.position.set(ic.x, ic.y, ic.z)
@@ -1954,7 +2304,10 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       if (draft) {
         draft.position = result.gridPosition
         const mesh = sceneRegistry.nodes.get(draft.id)
-        if (mesh) mesh.position.set(...result.gridPosition)
+        if (mesh)
+          mesh.position.set(
+            ...surfaceFramePose(draft.parentId, surfaceAttachmentId(draft), draft, true).position,
+          )
         useLiveTransforms.getState().set(draft.id, {
           position: result.cursorPosition,
           rotation: result.cursorRotationY,
@@ -1978,19 +2331,16 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     }
 
     const onShelfClick = (event: ShelfEvent) => {
-      const result = shelfSurfaceStrategy.click(getContext(), event)
+      gridDispatch.flush()
+      if (feedback.reason) return
+      const result = shelfSurfaceStrategy.click(surfaceContext(event), event)
       if (!result) return
 
       event.stopPropagation()
-      if (draftNode.current) {
-        useLiveTransforms.getState().clear(draftNode.current.id)
-      }
-      const committedId = draftNode.current?.id ?? null
-      const wasAdopted = draftNode.isAdopted
-      const finalId = draftNode.commit(result.nodeUpdate)
+      const { committedId, wasAdopted } = commitDraft(result.nodeUpdate)
 
-      finishCommittedPlacement(finalId ?? committedId, wasAdopted, () => {
-        const enterResult = shelfSurfaceStrategy.enter(getContext(), event)
+      finishCommittedPlacement(committedId, wasAdopted, () => {
+        const enterResult = shelfSurfaceStrategy.enter(surfaceContext(event), event)
         if (enterResult) {
           applyTransition(enterResult)
         } else {
@@ -2018,7 +2368,11 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
       // Roof-wall drafts live flat in the host face frame (yaw 0) —
       // manual rotation would skew them off the wall plane.
-      if (placementState.current.surface === 'roof-wall') return
+      if (
+        placementState.current.surface === 'roof-wall' ||
+        placementState.current.surface === 'block-face'
+      )
+        return
 
       let rotationDir: 1 | -1 | 0 = 0
       if ((event.key === 'r' || event.key === 'R') && !event.metaKey && !event.ctrlKey)
@@ -2034,9 +2388,11 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         const newRotationY = steppedRotation(currentRotation[1] ?? 0, rotationDir)
         draft.rotation = [currentRotation[0], newRotationY, currentRotation[2]]
 
-        // Ref + cursor mesh + item mesh — no store update during drag
+        // Rotate the building-local cursor by the same delta as the host-local
+        // draft. This preserves the host's composed yaw for items resting on a
+        // table or shelf while still matching the draft exactly on the floor.
         if (cursorGroupRef.current) {
-          cursorGroupRef.current.rotation.y = newRotationY
+          cursorGroupRef.current.rotation.y += newRotationY - currentRotation[1]
         }
         const mesh = sceneRegistry.nodes.get(draft.id)
         if (mesh) mesh.rotation.y = newRotationY
@@ -2053,8 +2409,11 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
           draft.position = [x, gridPosition.current.y, z]
           if (cursorGroupRef.current) {
             if (surface === 'floor') {
+              const visual = getFloorVisualPosition([x, gridPosition.current.y, z])
               cursorGroupRef.current.position.set(
-                ...getFloorVisualPosition([x, gridPosition.current.y, z]),
+                visual[0],
+                visual[1] + getPlacementLevelY(draft),
+                visual[2],
               )
             } else {
               cursorGroupRef.current.position.x = x
@@ -2100,27 +2459,63 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
           }
         }
 
-        // Update live transform for 2D floorplan with post-snap position
+        // Keep both preview renderers on the rotated draft. The item renderer
+        // consumes live node overrides, while the floor-plan renderer consumes
+        // the live transform and placement-preview snapshot.
+        const storedSurfacePose = surfaceFramePose(
+          draft.parentId,
+          surfaceAttachmentId(draft),
+          draft,
+          true,
+        )
+        if (surfaceAttachmentId(draft)) {
+          draftNode.updateSurface(
+            { position: draft.position, rotation: draft.rotation },
+            surfaceAttachmentId(draft),
+          )
+          mesh?.position.set(...storedSurfacePose.position)
+          mesh?.rotation.set(...storedSurfacePose.rotation)
+        }
+        useLiveNodeOverrides.getState().set(draft.id, { rotation: storedSurfacePose.rotation })
         const currentLive = useLiveTransforms.getState().get(draft.id)
-        if (currentLive) {
-          const livePosition: [number, number, number] =
-            surface === 'floor'
-              ? [draft.position[0], draft.position[1], draft.position[2]]
-              : cursorGroupRef.current
-                ? [
-                    cursorGroupRef.current.position.x,
-                    cursorGroupRef.current.position.y,
-                    cursorGroupRef.current.position.z,
-                  ]
-                : [draft.position[0], draft.position[1], draft.position[2]]
-          useLiveTransforms.getState().set(draft.id, {
-            ...currentLive,
-            position: livePosition,
-            rotation: newRotationY,
-          })
+        const livePosition: [number, number, number] =
+          surface === 'floor'
+            ? [draft.position[0], draft.position[1], draft.position[2]]
+            : cursorGroupRef.current
+              ? [
+                  cursorGroupRef.current.position.x,
+                  cursorGroupRef.current.position.y,
+                  cursorGroupRef.current.position.z,
+                ]
+              : [draft.position[0], draft.position[1], draft.position[2]]
+        useLiveTransforms.getState().set(draft.id, {
+          ...currentLive,
+          position: livePosition,
+          rotation: cursorGroupRef.current?.rotation.y ?? newRotationY,
+        })
+
+        const placementPreview = usePlacementPreview.getState()
+        if (placementPreview.node?.id === draft.id) {
+          const parentNode = draft.parentId
+            ? (useScene.getState().nodes[draft.parentId as AnyNodeId] ?? null)
+            : null
+          placementPreview.set(
+            {
+              ...draft,
+              position: [...draft.position],
+              rotation: [...draft.rotation],
+            },
+            parentNode,
+          )
         }
 
-        revalidate()
+        if (feedback.reason && lastSurfaceEvent) {
+          if (lastSurfaceEvent.node.type === 'shelf') onShelfMove(lastSurfaceEvent as ShelfEvent)
+          else onItemMove(lastSurfaceEvent as NodeEvent<AnyNode>)
+        } else {
+          feedback.clear()
+          revalidate()
+        }
       }
     }
 
@@ -2214,7 +2609,8 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
     // ---- Subscribe ----
 
-    emitter.on('grid:move', onGridMove)
+    const gridDispatch = createItemSurfaceGridDispatch(onGridMove)
+    emitter.on('grid:move', gridDispatch.schedule)
     emitter.on('grid:click', onGridClick)
     emitter.on('item:enter', onItemEnter)
     emitter.on('item:move', onItemMove)
@@ -2228,10 +2624,22 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     emitter.on('roof:move', onRoofWallMove)
     emitter.on('roof:click', onRoofWallClick)
     emitter.on('roof:leave', onRoofWallLeave)
+    emitter.on('node:enter', onFaceHostEnter)
+    emitter.on('node:move', onFaceHostMove)
+    emitter.on('node:click', onFaceHostClick)
+    emitter.on('node:leave', onFaceHostLeave)
     emitter.on('ceiling:enter', onCeilingEnter)
     emitter.on('ceiling:move', onCeilingMove)
     emitter.on('ceiling:click', onCeilingClick)
     emitter.on('ceiling:leave', onCeilingLeave)
+    emitter.on('cabinet:enter', onItemEnter)
+    emitter.on('procedural-item:enter' as never, onItemEnter)
+    emitter.on('cabinet:move', onItemMove)
+    emitter.on('procedural-item:move' as never, onItemMove)
+    emitter.on('cabinet:click', onItemClick)
+    emitter.on('procedural-item:click' as never, onItemClick)
+    emitter.on('cabinet:leave', onItemLeave)
+    emitter.on('procedural-item:leave' as never, onItemLeave)
     emitter.on('shelf:enter', onShelfEnter)
     emitter.on('shelf:move', onShelfMove)
     emitter.on('shelf:click', onShelfClick)
@@ -2250,25 +2658,24 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       if (placementState.current.surface !== 'floor') return
       onGridClick(event as unknown as GridEvent)
     }
-    emitter.on('wall:click', commitFloorOnSurfaceClick as never)
-    emitter.on('item:click', commitFloorOnSurfaceClick as never)
-    emitter.on('ceiling:click', commitFloorOnSurfaceClick as never)
-    emitter.on('roof:click', commitFloorOnSurfaceClick as never)
-    emitter.on('shelf:click', commitFloorOnSurfaceClick as never)
+    emitter.on('node:click', commitFloorOnSurfaceClick as never)
     if (dragMode) window.addEventListener('pointerup', onReleaseCommit)
 
     return () => {
       tearingDown = true
+      feedback.clear()
       if (dragMode) window.removeEventListener('pointerup', onReleaseCommit)
       unsubDraftWatch()
       useAlignmentGuides.getState().clear()
-      // Clear live transform for any remaining draft
+      // Clear every live preview channel before restoring or deleting the draft.
       if (draftNode.current) {
         useLiveTransforms.getState().clear(draftNode.current.id)
+        useLiveNodeOverrides.getState().clearFields(draftNode.current.id, ['rotation'])
       }
       draftNode.destroy()
       useScene.temporal.getState().resume()
-      emitter.off('grid:move', onGridMove)
+      gridDispatch.cancel()
+      emitter.off('grid:move', gridDispatch.schedule)
       emitter.off('grid:click', onGridClick)
       emitter.off('item:enter', onItemEnter)
       emitter.off('item:move', onItemMove)
@@ -2282,19 +2689,27 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       emitter.off('roof:move', onRoofWallMove)
       emitter.off('roof:click', onRoofWallClick)
       emitter.off('roof:leave', onRoofWallLeave)
+      emitter.off('node:enter', onFaceHostEnter)
+      emitter.off('node:move', onFaceHostMove)
+      emitter.off('node:click', onFaceHostClick)
+      emitter.off('node:leave', onFaceHostLeave)
       emitter.off('ceiling:enter', onCeilingEnter)
       emitter.off('ceiling:move', onCeilingMove)
       emitter.off('ceiling:click', onCeilingClick)
       emitter.off('ceiling:leave', onCeilingLeave)
+      emitter.off('cabinet:enter', onItemEnter)
+      emitter.off('procedural-item:enter' as never, onItemEnter)
+      emitter.off('cabinet:move', onItemMove)
+      emitter.off('procedural-item:move' as never, onItemMove)
+      emitter.off('cabinet:click', onItemClick)
+      emitter.off('procedural-item:click' as never, onItemClick)
+      emitter.off('cabinet:leave', onItemLeave)
+      emitter.off('procedural-item:leave' as never, onItemLeave)
       emitter.off('shelf:enter', onShelfEnter)
       emitter.off('shelf:move', onShelfMove)
       emitter.off('shelf:click', onShelfClick)
       emitter.off('shelf:leave', onShelfLeave)
-      emitter.off('wall:click', commitFloorOnSurfaceClick as never)
-      emitter.off('item:click', commitFloorOnSurfaceClick as never)
-      emitter.off('ceiling:click', commitFloorOnSurfaceClick as never)
-      emitter.off('roof:click', commitFloorOnSurfaceClick as never)
-      emitter.off('shelf:click', commitFloorOnSurfaceClick as never)
+      emitter.off('node:click', commitFloorOnSurfaceClick as never)
       emitter.off('tool:cancel', onCancel)
       window.removeEventListener('keydown', onKeyDown)
       window.removeEventListener('keyup', onKeyUp)
@@ -2312,6 +2727,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     gridSnapStep,
     updateDimensionGuides,
     updatePreviewGeometry,
+    reconcileDraftRaycast,
   ])
 
   // Refresh wireframe when the grid step changes mid-placement so the green/red
@@ -2343,39 +2759,19 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     const draftParent = draft.parentId
       ? useScene.getState().nodes[draft.parentId as AnyNodeId]
       : undefined
-    if (draftParent?.type === 'item' || draftParent?.type === 'shelf') return
+    if (
+      draftParent?.type === 'item' ||
+      draftParent?.type === 'shelf' ||
+      draftParent?.type === 'cabinet' ||
+      draftParent?.type === 'procedural-item' ||
+      (draftParent &&
+        nodeRegistry.get(draftParent.type)?.capabilities.faceHost?.currentFaceId(draft))
+    )
+      return
     draft.parentId = viewerLevelId
     useScene.getState().updateNode(draft.id as AnyNodeId, { parentId: viewerLevelId })
   }, [viewerLevelId, draftNode, asset])
 
-  // Disable raycasting on the live draft mesh (and restore it when the draft
-  // changes or goes away) so the cursor ray passes through the item being
-  // moved and lands on the surface beneath it.
-  const reconcileDraftRaycast = useCallback((mesh: Object3D | null) => {
-    if (raycastDisabledMeshRef.current !== mesh) {
-      // New draft root (or cleared): restore the prior mesh and reset tracking.
-      for (const restore of restoreRaycastsRef.current) restore()
-      restoreRaycastsRef.current = []
-      raycastDisabledChildrenRef.current = new WeakSet()
-      raycastDisabledMeshRef.current = mesh
-    }
-    if (!mesh) return
-    // Disable any descendant not handled yet. Item drafts are GLB models whose
-    // child meshes mount asynchronously (Suspense), so a one-shot traverse
-    // misses them — those late children keep intercepting the ray and corrupt
-    // the shelf-row hit the moment the item moves onto a row. Re-walking each
-    // frame is cheap: the WeakSet makes it idempotent, so only new children pay.
-    mesh.traverse((child) => {
-      if (raycastDisabledChildrenRef.current.has(child)) return
-      raycastDisabledChildrenRef.current.add(child)
-      const original = child.raycast
-      child.raycast = () => {}
-      restoreRaycastsRef.current.push(() => {
-        child.raycast = original
-      })
-    })
-  }, [])
-
   // Restore the draft mesh's raycast when the coordinator unmounts (tool change).
   useEffect(() => () => reconcileDraftRaycast(null), [reconcileDraftRaycast])
 
@@ -2387,8 +2783,10 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
   // moving existing node has no draft here, so the grid reads that case straight
   // off the node's mesh. Cleared when idle.
   const surfaceNormalRef = useRef(new Vector3(0, 1, 0))
+  const surfaceWorldPointRef = useRef(new Vector3())
   const facingForwardRef = useRef(new Vector3(0, 0, 1))
   const facingQuatRef = useRef(new Quaternion())
+  const ghostSurfaceQuatRef = useRef(new Quaternion())
   useFrame(() => {
     const ghost = cursorGroupRef.current
     if (!(asset && ghost)) {
@@ -2403,7 +2801,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     // the item's forward on the floor, and the triangle rides at the ghost's Y.
     let facingYaw = ghost.rotation.y
     let facingY = ghost.position.y
-    if (surf === 'wall' || surf === 'roof-wall') {
+    if (surf === 'wall' || surf === 'roof-wall' || surf === 'block-face') {
       // Wall/roof-segment faces: the cursor group's yaw is the symmetric
       // wireframe yaw (π off the real facing for a wall, and a different frame
       // for a roof face), so derive the item's TRUE outward facing from the
@@ -2411,21 +2809,31 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       // surface. This keeps BOTH the grid normal and the triangle correct for
       // wall and roof-segment hosts alike, rather than the old quaternion read
       // that pointed the wrong way.
-      const mesh = draftNode.current ? sceneRegistry.nodes.get(draftNode.current.id) : null
-      if (mesh) {
-        mesh.getWorldQuaternion(facingQuatRef.current)
-        const fwd = facingForwardRef.current.set(0, 0, 1).applyQuaternion(facingQuatRef.current)
-        fwd.y = 0
-        if (fwd.lengthSq() > 1e-6) facingYaw = Math.atan2(fwd.x, fwd.z)
-      }
+      const mesh =
+        surf === 'block-face' || !draftNode.current
+          ? null
+          : sceneRegistry.nodes.get(draftNode.current.id)
+      ghost.getWorldQuaternion(ghostSurfaceQuatRef.current)
+      const hostedQuaternion = mesh ? mesh.getWorldQuaternion(facingQuatRef.current) : null
+      resolveItemPlacementSurfaceNormal(
+        surf,
+        ghostSurfaceQuatRef.current,
+        hostedQuaternion,
+        n,
+        asset.attachTo,
+      )
+      const fwd = facingForwardRef.current.copy(n)
+      if (fwd.lengthSq() > 1e-6) facingYaw = Math.atan2(fwd.x, fwd.z)
       // The forward triangle is a floor aid; drop it to the building-local floor
-      // under the wall (the ghost Y is up on the wall).
-      facingY = 0
-      n.set(Math.sin(facingYaw), 0, Math.cos(facingYaw))
+      // under the hosted plane — the storey's floor, not world ground.
+      facingY = getPlacementLevelY(draftNode.current)
     } else {
-      n.set(0, 1, 0)
+      ghost.getWorldQuaternion(ghostSurfaceQuatRef.current)
+      resolveItemPlacementSurfaceNormal(surf, ghostSurfaceQuatRef.current, null, n)
     }
-    publishPlacementSurface(ghost.position, n)
+    // `publishPlacementSurface` is a WORLD-space contract (the grid reads it in
+    // world space), but the ghost lives in the building-local tool group.
+    publishPlacementSurface(ghost.getWorldPosition(surfaceWorldPointRef.current), n)
 
     if (shape.depth > 0) {
       useFacingPose.getState().set({
@@ -2493,8 +2901,16 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
           gridPosition.current.z,
         ])
         mesh.position.y = visualPosition[1]
-        cursorGroupRef.current.position.y = visualPosition[1]
-      }
+        cursorGroupRef.current.position.y =
+          visualPosition[1] + getPlacementLevelY(draftNode.current)
+      }
+    } else if (placementState.current.surface === 'block-face') {
+      const rotation = draftNode.current.rotation
+      applyFaceHostPreviewPose(
+        mesh,
+        [gridPosition.current.x, gridPosition.current.y, gridPosition.current.z],
+        rotation,
+      )
     }
   })