@pascal-app/editor 0.6.0 → 0.8.0

package/src/components/tools/fence/move-fence-tool.tsx

@@ -1,16 +1,24 @@
 'use client'
 
-import { type AnyNodeId, type FenceNode, emitter, type GridEvent, useScene } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  emitter,
+  type FenceNode,
+  type GridEvent,
+  type LevelNode,
+  sceneRegistry,
+  useLiveTransforms,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import type * as THREE from 'three'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { CursorSphere } from '../shared/cursor-sphere'
-
-function snap(value: number) {
-  return Math.round(value * 2) / 2
-}
+import { snapFenceDraftPoint } from './fence-drafting'
 
 function samePoint(a: [number, number], b: [number, number]) {
   return a[0] === b[0] && a[1] === b[1]
@@ -24,10 +32,11 @@ type LinkedFenceSnapshot = {
 
 function getLinkedFenceSnapshots(args: {
   fenceId: FenceNode['id']
+  fenceParentId: string | null
   originalStart: [number, number]
   originalEnd: [number, number]
 }) {
-  const { fenceId, originalStart, originalEnd } = args
+  const { fenceId, fenceParentId, originalStart, originalEnd } = args
   const { nodes } = useScene.getState()
   const snapshots: LinkedFenceSnapshot[] = []
 
@@ -36,11 +45,17 @@ function getLinkedFenceSnapshots(args: {
       continue
     }
 
+    if ((node.parentId ?? null) !== fenceParentId) {
+      continue
+    }
+
     if (
-      !samePoint(node.start, originalStart) &&
-      !samePoint(node.start, originalEnd) &&
-      !samePoint(node.end, originalStart) &&
-      !samePoint(node.end, originalEnd)
+      !(
+        samePoint(node.start, originalStart) ||
+        samePoint(node.start, originalEnd) ||
+        samePoint(node.end, originalStart) ||
+        samePoint(node.end, originalEnd)
+      )
     ) {
       continue
     }
@@ -78,12 +93,14 @@ function getLinkedFenceUpdates(
 }
 
 export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
+  const activatedAtRef = useRef<number>(Date.now())
   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])
   const linkedOriginalsRef = useRef(
     getLinkedFenceSnapshots({
       fenceId: node.id,
+      fenceParentId: node.parentId ?? null,
       originalStart: node.start,
       originalEnd: node.end,
     }),
@@ -106,11 +123,52 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
     const nodeId = nodeIdRef.current
     const originalStart = originalStartRef.current
     const originalEnd = originalEndRef.current
+    const levelNode =
+      node.parentId && useScene.getState().nodes[node.parentId as AnyNodeId]?.type === 'level'
+        ? (useScene.getState().nodes[node.parentId as AnyNodeId] as LevelNode)
+        : null
+    const levelChildren = levelNode?.children ?? []
+    const levelWalls = levelChildren
+      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
+      .filter((child): child is WallNode => child?.type === 'wall')
+    const levelFences = levelChildren
+      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
+      .filter((child): child is FenceNode => child?.type === 'fence')
 
     useScene.temporal.getState().pause()
     let wasCommitted = false
 
-    const applyNodePreview = (updates: Array<{ id: FenceNode['id']; start: [number, number]; end: [number, number] }>) => {
+    const setMeshOffset = (fenceId: FenceNode['id'], deltaX: number, deltaZ: number) => {
+      const mesh = sceneRegistry.nodes.get(fenceId) as THREE.Object3D | undefined
+      if (!mesh) {
+        return
+      }
+
+      mesh.position.set(deltaX, 0, deltaZ)
+    }
+
+    const setFenceLiveTransform = (fence: FenceNode, deltaX: number, deltaZ: number) => {
+      const originalCenterX = (fence.start[0] + fence.end[0]) / 2
+      const originalCenterZ = (fence.start[1] + fence.end[1]) / 2
+      useLiveTransforms.getState().set(fence.id, {
+        position: [originalCenterX + deltaX, 0, originalCenterZ + deltaZ],
+        rotation: 0,
+      })
+    }
+
+    const clearPreviewState = () => {
+      setMeshOffset(nodeId, 0, 0)
+      useLiveTransforms.getState().clear(nodeId)
+
+      for (const linkedFence of linkedOriginalsRef.current) {
+        setMeshOffset(linkedFence.id, 0, 0)
+        useLiveTransforms.getState().clear(linkedFence.id)
+      }
+    }
+
+    const applyNodePreview = (
+      updates: Array<{ id: FenceNode['id']; start: [number, number]; end: [number, number] }>,
+    ) => {
       useScene.getState().updateNodes(
         updates.map((entry) => ({
           id: entry.id as AnyNodeId,
@@ -127,21 +185,33 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
       const centerX = (nextStart[0] + nextEnd[0]) / 2
       const centerZ = (nextStart[1] + nextEnd[1]) / 2
       setCursorLocalPos([centerX, 0, centerZ])
-      applyNodePreview([
-        { id: nodeId, start: nextStart, end: nextEnd },
-        ...getLinkedFenceUpdates(
-          linkedOriginalsRef.current,
-          originalStart,
-          originalEnd,
-          nextStart,
-          nextEnd,
-        ),
-      ])
+      const deltaX = nextStart[0] - originalStart[0]
+      const deltaZ = nextStart[1] - originalStart[1]
+      setMeshOffset(nodeId, deltaX, deltaZ)
+      setFenceLiveTransform(node, deltaX, deltaZ)
+
+      for (const linkedFence of linkedOriginalsRef.current) {
+        setMeshOffset(linkedFence.id, deltaX, deltaZ)
+        setFenceLiveTransform(
+          {
+            ...node,
+            id: linkedFence.id,
+            start: linkedFence.start,
+            end: linkedFence.end,
+          },
+          deltaX,
+          deltaZ,
+        )
+      }
     }
 
     const onGridMove = (event: GridEvent) => {
-      const localX = snap(event.localPosition[0])
-      const localZ = snap(event.localPosition[2])
+      const [localX, localZ] = snapFenceDraftPoint({
+        point: [event.localPosition[0], event.localPosition[2]],
+        walls: levelWalls,
+        fences: levelFences,
+        ignoreFenceIds: [nodeId],
+      })
 
       if (
         previousGridPosRef.current &&
@@ -164,17 +234,15 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
     }
 
     const onGridClick = (event: GridEvent) => {
+      if (Date.now() - activatedAtRef.current < 150) {
+        event.nativeEvent?.stopPropagation?.()
+        return
+      }
+
       const preview = previewRef.current ?? { start: originalStart, end: originalEnd }
 
       wasCommitted = true
 
-      // Restore original baseline while paused so the next resume+update
-      // registers as a single tracked change (undo reverts to original).
-      applyNodePreview([
-        { id: nodeId, start: originalStart, end: originalEnd },
-        ...linkedOriginalsRef.current,
-      ])
-
       useScene.temporal.getState().resume()
       applyNodePreview([
         { id: nodeId, start: preview.start, end: preview.end },
@@ -186,6 +254,10 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
           preview.end,
         ),
       ])
+      useLiveTransforms.getState().clear(nodeId)
+      for (const linkedFence of linkedOriginalsRef.current) {
+        useLiveTransforms.getState().clear(linkedFence.id)
+      }
       useScene.temporal.getState().pause()
 
       sfxEmitter.emit('sfx:item-place')
@@ -195,10 +267,7 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
     }
 
     const onCancel = () => {
-      applyNodePreview([
-        { id: nodeId, start: originalStart, end: originalEnd },
-        ...linkedOriginalsRef.current,
-      ])
+      clearPreviewState()
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
       useScene.temporal.getState().resume()
       markToolCancelConsumed()
@@ -210,18 +279,20 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
     emitter.on('tool:cancel', onCancel)
 
     return () => {
-      if (!wasCommitted) {
-        applyNodePreview([
-          { id: nodeId, start: originalStart, end: originalEnd },
-          ...linkedOriginalsRef.current,
-        ])
+      if (wasCommitted) {
+        useLiveTransforms.getState().clear(nodeId)
+        for (const linkedFence of linkedOriginalsRef.current) {
+          useLiveTransforms.getState().clear(linkedFence.id)
+        }
+      } else {
+        clearPreviewState()
       }
       useScene.temporal.getState().resume()
       emitter.off('grid:move', onGridMove)
       emitter.off('grid:click', onGridClick)
       emitter.off('tool:cancel', onCancel)
     }
-  }, [exitMoveMode])
+  }, [exitMoveMode, node])
 
   return (
     <group>

package/src/components/tools/item/move-tool.tsx

@@ -1,12 +1,14 @@
 import type {
   BuildingNode,
   CeilingNode,
+  ColumnNode,
   DoorNode,
   FenceNode,
   ItemNode,
   RoofNode,
   RoofSegmentNode,
   SlabNode,
+  SpawnNode,
   StairNode,
   StairSegmentNode,
   WallNode,
@@ -17,10 +19,12 @@ import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { MoveBuildingContent } from '../building/move-building-tool'
 import { MoveCeilingTool } from '../ceiling/move-ceiling-tool'
+import { MoveColumnTool } from '../column/move-column-tool'
 import { MoveDoorTool } from '../door/move-door-tool'
 import { MoveFenceTool } from '../fence/move-fence-tool'
 import { MoveRoofTool } from '../roof/move-roof-tool'
 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'
@@ -94,12 +98,14 @@ export const MoveTool: React.FC = () => {
     return <MoveBuildingContent node={movingNode as BuildingNode} />
   if (movingNode.type === 'door') return <MoveDoorTool node={movingNode as DoorNode} />
   if (movingNode.type === 'window') return <MoveWindowTool node={movingNode as WindowNode} />
-  if (movingNode.type === 'fence') return <MoveFenceTool node={movingNode as FenceNode} />
   if (movingNode.type === 'ceiling') return <MoveCeilingTool node={movingNode as CeilingNode} />
+  if (movingNode.type === 'column') return <MoveColumnTool node={movingNode as ColumnNode} />
   if (movingNode.type === 'slab') return <MoveSlabTool node={movingNode as SlabNode} />
   if (movingNode.type === 'wall') return <MoveWallTool node={movingNode as WallNode} />
+  if (movingNode.type === 'fence') return <MoveFenceTool node={movingNode as FenceNode} />
   if (movingNode.type === 'roof' || movingNode.type === 'roof-segment')
     return <MoveRoofTool node={movingNode as RoofNode | RoofSegmentNode} />
+  if (movingNode.type === 'spawn') return <MoveSpawnTool node={movingNode as SpawnNode} />
   if (movingNode.type === 'stair' || movingNode.type === 'stair-segment')
     return <MoveRoofTool node={movingNode as StairNode | StairSegmentNode} />
   return <MoveItemContent movingNode={movingNode as ItemNode} />

package/src/components/tools/item/placement-math.ts

@@ -1,4 +1,4 @@
-import { isObject } from '@pascal-app/core'
+import { type AssetInput, isObject } from '@pascal-app/core'
 import useEditor from '../../../store/use-editor'
 
 function getGridSnapStep(): number {
@@ -10,9 +10,7 @@ function positiveModulo(value: number, divisor: number): number {
 }
 
 /**
- * Snaps a position to 0.5 grid, with an offset to align item edges to grid lines.
- * For items with dimensions like 2.5, the center would be at 1.25 from the edge,
- * which doesn't align with 0.5 grid. This adds an offset so edges align instead.
+ * Snaps a position to the active grid step, aligning item edges to grid lines.
  */
 export function snapToGrid(position: number, dimension: number, step = getGridSnapStep()): number {
   const halfDim = dimension / 2
@@ -21,12 +19,41 @@ export function snapToGrid(position: number, dimension: number, step = getGridSn
 }
 
 /**
- * Snap a value to 0.5 increments (used for wall-local positions).
+ * Snap a value to the active grid step (used for wall-local positions).
  */
 export function snapToHalf(value: number, step = getGridSnapStep()): number {
   return Math.round(value / step) * step
 }
 
+/**
+ * Round a value up to the next multiple of `step`, with a minimum of `step`.
+ */
+export function snapUpToGridStep(value: number, step = getGridSnapStep()): number {
+  return Math.max(step, Math.ceil(value / step) * step)
+}
+
+/**
+ * Expand an item's scaled dimensions up to the active grid step on the axes
+ * the placement grid covers. Used for the placement wireframe, snap math, and
+ * collision against the draft so a small item visually reserves a full grid
+ * cell.
+ *
+ * - Floor / ceiling / item-surface: X + Z (footprint) expand; Y stays exact.
+ * - Wall / wall-side: X (along wall) + Y (height) expand; Z (depth) stays exact
+ *   so wall-thickness offsets aren't disturbed.
+ */
+export function getGridAlignedDimensions(
+  scaledDims: [number, number, number],
+  attachTo: AssetInput['attachTo'] | null | undefined,
+  step = getGridSnapStep(),
+): [number, number, number] {
+  const [w, h, d] = scaledDims
+  if (attachTo === 'wall' || attachTo === 'wall-side') {
+    return [snapUpToGridStep(w, step), snapUpToGridStep(h, step), d]
+  }
+  return [snapUpToGridStep(w, step), h, snapUpToGridStep(d, step)]
+}
+
 /**
  * Calculate cursor rotation in WORLD space from wall normal and orientation.
  */

package/src/components/tools/item/placement-strategies.ts

@@ -9,11 +9,17 @@ import type {
   WallEvent,
   WallNode,
 } from '@pascal-app/core'
-import { getScaledDimensions, sceneRegistry, useScene } from '@pascal-app/core'
-import { Vector3 } from 'three'
+import {
+  getScaledDimensions,
+  isLowProfileItemSurface,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { Euler, Matrix3, Quaternion, Vector3 } from 'three'
 import {
   calculateCursorRotation,
   calculateItemRotation,
+  getGridAlignedDimensions,
   getSideFromNormal,
   isValidWallSideFace,
   snapToGrid,
@@ -30,6 +36,46 @@ import type {
 } from './placement-types'
 
 const DEFAULT_DIMENSIONS: [number, number, number] = [1, 1, 1]
+const UPWARD_SURFACE_NORMAL_MIN_Y = 0.75
+
+function getWorldNormalY(event: ItemEvent): number | null {
+  if (!event.normal) return null
+
+  const normal = new Vector3(event.normal[0], event.normal[1], event.normal[2])
+  normal.applyNormalMatrix(new Matrix3().getNormalMatrix(event.object.matrixWorld)).normalize()
+  return normal.y
+}
+
+function isUpwardItemSurfaceHit(event: ItemEvent): boolean {
+  const normalY = getWorldNormalY(event)
+  return normalY !== null && normalY >= UPWARD_SURFACE_NORMAL_MIN_Y
+}
+
+function getSurfacePlacementHeight(surfaceItem: ItemNode, event: ItemEvent, localPos: Vector3) {
+  if (isLowProfileItemSurface(surfaceItem)) return null
+  if (!isUpwardItemSurfaceHit(event)) return null
+
+  if (surfaceItem.asset.surface) {
+    return surfaceItem.asset.surface.height * surfaceItem.scale[1]
+  }
+
+  if (!Number.isFinite(localPos.y)) return null
+  return localPos.y
+}
+
+function isDescendantOfItem(
+  candidate: ItemNode,
+  ancestor: ItemNode,
+  nodes: Record<string, AnyNode>,
+): boolean {
+  let parentId = candidate.parentId
+  while (parentId) {
+    if (parentId === ancestor.id) return true
+    const parent = nodes[parentId as AnyNodeId]
+    parentId = parent?.parentId ?? null
+  }
+  return false
+}
 
 // ============================================================================
 // FLOOR STRATEGY
@@ -43,9 +89,10 @@ export const floorStrategy = {
   move(ctx: PlacementContext, event: GridEvent): PlacementResult | null {
     if (ctx.state.surface !== 'floor') return null
 
-    const dims = ctx.draftItem
+    const rawDims = ctx.draftItem
       ? getScaledDimensions(ctx.draftItem)
       : (ctx.asset.dimensions ?? DEFAULT_DIMENSIONS)
+    const dims = getGridAlignedDimensions(rawDims, ctx.asset.attachTo)
     const [dimX, , dimZ] = dims
     const rotY = ctx.draftItem?.rotation?.[1] ?? 0
     const swapDims = Math.abs(Math.sin(rotY)) > 0.9
@@ -80,7 +127,7 @@ export const floorStrategy = {
     const valid = validators.canPlaceOnFloor(
       ctx.levelId,
       pos,
-      getScaledDimensions(ctx.draftItem),
+      getGridAlignedDimensions(getScaledDimensions(ctx.draftItem), ctx.draftItem.asset.attachTo),
       ctx.draftItem.rotation,
       [ctx.draftItem.id],
     ).valid
@@ -133,14 +180,15 @@ export const wallStrategy = {
     const z = snapToHalf(event.localPosition[2])
 
     // Get auto-adjusted Y position from validator
+    const rawDims = ctx.draftItem
+      ? getScaledDimensions(ctx.draftItem)
+      : (ctx.asset.dimensions ?? DEFAULT_DIMENSIONS)
     const validation = validators.canPlaceOnWall(
       ctx.levelId,
       event.node.id,
       x,
       y,
-      ctx.draftItem
-        ? getScaledDimensions(ctx.draftItem)
-        : (ctx.asset.dimensions ?? DEFAULT_DIMENSIONS),
+      getGridAlignedDimensions(rawDims, attachTo),
       attachTo,
       side,
       [],
@@ -195,7 +243,7 @@ export const wallStrategy = {
       event.node.id,
       snappedX,
       snappedY,
-      getScaledDimensions(ctx.draftItem),
+      getGridAlignedDimensions(getScaledDimensions(ctx.draftItem), ctx.draftItem.asset.attachTo),
       ctx.draftItem.asset.attachTo as 'wall' | 'wall-side',
       side,
       [ctx.draftItem.id],
@@ -239,7 +287,7 @@ export const wallStrategy = {
       ctx.state.wallId as WallNode['id'],
       ctx.gridPosition.x,
       ctx.gridPosition.y,
-      getScaledDimensions(ctx.draftItem),
+      getGridAlignedDimensions(getScaledDimensions(ctx.draftItem), ctx.draftItem.asset.attachTo),
       ctx.draftItem.asset.attachTo as 'wall' | 'wall-side',
       ctx.draftItem.side,
       [ctx.draftItem.id],
@@ -301,16 +349,20 @@ export const ceilingStrategy = {
     const ceilingLevelId = resolveLevelId(event.node, nodes)
     if (ctx.levelId !== ceilingLevelId) return null
 
-    const dims = ctx.draftItem
+    const rawDims = ctx.draftItem
       ? getScaledDimensions(ctx.draftItem)
       : (ctx.asset.dimensions ?? DEFAULT_DIMENSIONS)
+    const dims = getGridAlignedDimensions(rawDims, ctx.asset.attachTo)
     const [dimX, , dimZ] = dims
-    const itemHeight = dims[1]
+    const itemHeight = rawDims[1]
     const rotY = ctx.draftItem?.rotation?.[1] ?? 0
     const swapDims = Math.abs(Math.sin(rotY)) > 0.9
 
-    const x = snapToGrid(event.position[0], swapDims ? dimZ : dimX)
-    const z = snapToGrid(event.position[2], swapDims ? dimX : dimZ)
+    // Ceiling items are stored in ceiling-local coordinates, so snapping must
+    // use the ceiling hit's local position rather than world position.
+    const x = snapToGrid(event.localPosition[0], swapDims ? dimZ : dimX)
+    const z = snapToGrid(event.localPosition[2], swapDims ? dimX : dimZ)
+    const worldSnapped = event.object.localToWorld(new Vector3(x, -itemHeight, z))
 
     return {
       stateUpdate: { surface: 'ceiling', ceilingId: event.node.id },
@@ -320,7 +372,7 @@ export const ceilingStrategy = {
       },
       cursorRotationY: 0,
       gridPosition: [x, -itemHeight, z],
-      cursorPosition: [x, event.position[1] - itemHeight, z],
+      cursorPosition: [worldSnapped.x, worldSnapped.y, worldSnapped.z],
       stopPropagation: true,
     }
   },
@@ -332,18 +384,20 @@ export const ceilingStrategy = {
     if (ctx.state.surface !== 'ceiling') return null
     if (!ctx.draftItem) return null
 
-    const dims = getScaledDimensions(ctx.draftItem)
+    const rawDims = getScaledDimensions(ctx.draftItem)
+    const dims = getGridAlignedDimensions(rawDims, ctx.draftItem.asset.attachTo)
     const [dimX, , dimZ] = dims
-    const itemHeight = dims[1]
+    const itemHeight = rawDims[1]
     const rotY = ctx.draftItem.rotation?.[1] ?? 0
     const swapDims = Math.abs(Math.sin(rotY)) > 0.9
 
-    const x = snapToGrid(event.position[0], swapDims ? dimZ : dimX)
-    const z = snapToGrid(event.position[2], swapDims ? dimX : dimZ)
+    const x = snapToGrid(event.localPosition[0], swapDims ? dimZ : dimX)
+    const z = snapToGrid(event.localPosition[2], swapDims ? dimX : dimZ)
+    const worldSnapped = event.object.localToWorld(new Vector3(x, -itemHeight, z))
 
     return {
       gridPosition: [x, -itemHeight, z],
-      cursorPosition: [x, event.position[1] - itemHeight, z],
+      cursorPosition: [worldSnapped.x, worldSnapped.y, worldSnapped.z],
       cursorRotationY: 0,
       nodeUpdate: null,
       stopPropagation: true,
@@ -371,7 +425,7 @@ export const ceilingStrategy = {
     const valid = validators.canPlaceOnCeiling(
       ctx.state.ceilingId as CeilingNode['id'],
       pos,
-      getScaledDimensions(ctx.draftItem),
+      getGridAlignedDimensions(getScaledDimensions(ctx.draftItem), ctx.draftItem.asset.attachTo),
       ctx.draftItem.rotation,
       [ctx.draftItem.id],
     ).valid
@@ -425,8 +479,11 @@ export const itemSurfaceStrategy = {
     const surfaceItem = event.node as ItemNode
     // Don't surface-place on the draft itself
     if (surfaceItem.id === ctx.draftItem?.id) return null
-    // Surface item must declare a surface
-    if (!surfaceItem.asset.surface) return null
+    if (ctx.state.surface === 'item-surface' && ctx.state.surfaceItemId === surfaceItem.id) {
+      return null
+    }
+    const nodes = useScene.getState().nodes
+    if (ctx.draftItem && isDescendantOfItem(surfaceItem, ctx.draftItem, nodes)) return null
 
     // Size check: our footprint must fit on surface item's footprint
     const ourDims = ctx.draftItem
@@ -440,17 +497,33 @@ export const itemSurfaceStrategy = {
 
     const worldPos = new Vector3(event.position[0], event.position[1], event.position[2])
     const localPos = surfaceMesh.worldToLocal(worldPos)
+    const surfaceHeight = getSurfacePlacementHeight(surfaceItem, event, localPos)
+    if (surfaceHeight === null) return null
 
     const x = snapToGrid(localPos.x, ourDims[0])
     const z = snapToGrid(localPos.z, ourDims[2])
-    const y = surfaceItem.asset.surface.height * surfaceItem.scale[1]
+    const y = surfaceHeight
 
     const worldSnapped = surfaceMesh.localToWorld(new Vector3(x, y, z))
 
+    // Counter-rotate so the draft's world Y rotation stays continuous when
+    // the user drags onto a rotated surface item. The cursor wireframe
+    // already shows the user's intended world rotation; we just need to
+    // store the right local value relative to the new parent.
+    const surfaceQuat = new Quaternion()
+    surfaceMesh.getWorldQuaternion(surfaceQuat)
+    const surfaceWorldY = new Euler().setFromQuaternion(surfaceQuat, 'YXZ').y
+    const localRotationY = ctx.currentCursorRotationY - surfaceWorldY
+    const draftRotation = ctx.draftItem?.rotation ?? [0, 0, 0]
+
     return {
       stateUpdate: { surface: 'item-surface', surfaceItemId: surfaceItem.id },
-      nodeUpdate: { position: [x, y, z], parentId: surfaceItem.id },
-      cursorRotationY: 0,
+      nodeUpdate: {
+        position: [x, y, z],
+        parentId: surfaceItem.id,
+        rotation: [draftRotation[0], localRotationY, draftRotation[2]],
+      },
+      cursorRotationY: ctx.currentCursorRotationY,
       gridPosition: [x, y, z],
       cursorPosition: [worldSnapped.x, worldSnapped.y, worldSnapped.z],
       stopPropagation: true,
@@ -463,10 +536,11 @@ export const itemSurfaceStrategy = {
   move(ctx: PlacementContext, event: ItemEvent): PlacementResult | null {
     if (ctx.state.surface !== 'item-surface') return null
     if (!(ctx.state.surfaceItemId && ctx.draftItem)) return null
+    if (event.node.id !== ctx.state.surfaceItemId) return null
 
     const nodes = useScene.getState().nodes
     const surfaceItem = nodes[ctx.state.surfaceItemId as AnyNodeId] as ItemNode | undefined
-    if (!surfaceItem?.asset.surface) return null
+    if (!surfaceItem) return null
 
     const surfaceMesh = sceneRegistry.nodes.get(ctx.state.surfaceItemId)
     if (!surfaceMesh) return null
@@ -474,17 +548,19 @@ export const itemSurfaceStrategy = {
     const ourDims = getScaledDimensions(ctx.draftItem)
     const worldPos = new Vector3(event.position[0], event.position[1], event.position[2])
     const localPos = surfaceMesh.worldToLocal(worldPos)
+    const surfaceHeight = getSurfacePlacementHeight(surfaceItem, event, localPos)
+    if (surfaceHeight === null) return null
 
     const x = snapToGrid(localPos.x, ourDims[0])
     const z = snapToGrid(localPos.z, ourDims[2])
-    const y = surfaceItem.asset.surface.height * surfaceItem.scale[1]
+    const y = surfaceHeight
 
     const worldSnapped = surfaceMesh.localToWorld(new Vector3(x, y, z))
 
     return {
       gridPosition: [x, y, z],
       cursorPosition: [worldSnapped.x, worldSnapped.y, worldSnapped.z],
-      cursorRotationY: 0,
+      cursorRotationY: ctx.currentCursorRotationY,
       nodeUpdate: { position: [x, y, z] },
       stopPropagation: true,
       dirtyNodeId: null,
@@ -497,6 +573,7 @@ export const itemSurfaceStrategy = {
   click(ctx: PlacementContext, _event: ItemEvent): CommitResult | null {
     if (ctx.state.surface !== 'item-surface') return null
     if (!(ctx.draftItem && ctx.state.surfaceItemId)) return null
+    if (_event.node.id !== ctx.state.surfaceItemId) return null
 
     return {
       nodeUpdate: {
@@ -528,12 +605,14 @@ export function checkCanPlace(ctx: PlacementContext, validators: SpatialValidato
 
   const attachTo = ctx.draftItem.asset.attachTo
 
+  const alignedDims = getGridAlignedDimensions(getScaledDimensions(ctx.draftItem), attachTo)
+
   if (attachTo === 'ceiling') {
     if (ctx.state.surface !== 'ceiling' || !ctx.state.ceilingId) return false
     return validators.canPlaceOnCeiling(
       ctx.state.ceilingId as CeilingNode['id'],
       [ctx.gridPosition.x, ctx.gridPosition.y, ctx.gridPosition.z],
-      getScaledDimensions(ctx.draftItem),
+      alignedDims,
       ctx.draftItem.rotation,
       [ctx.draftItem.id],
     ).valid
@@ -546,7 +625,7 @@ export function checkCanPlace(ctx: PlacementContext, validators: SpatialValidato
       ctx.state.wallId as WallNode['id'],
       ctx.gridPosition.x,
       ctx.gridPosition.y,
-      getScaledDimensions(ctx.draftItem),
+      alignedDims,
       attachTo,
       ctx.draftItem.side,
       [ctx.draftItem.id],
@@ -557,7 +636,7 @@ export function checkCanPlace(ctx: PlacementContext, validators: SpatialValidato
   return validators.canPlaceOnFloor(
     ctx.levelId,
     [ctx.gridPosition.x, 0, ctx.gridPosition.z],
-    getScaledDimensions(ctx.draftItem),
+    alignedDims,
     ctx.draftItem.rotation,
     [ctx.draftItem.id],
   ).valid

package/src/components/tools/item/placement-types.ts

@@ -38,6 +38,13 @@ export interface PlacementContext {
   draftItem: ItemNode | null
   gridPosition: Vector3
   state: PlacementState
+  /**
+   * Current world Y rotation of the placement cursor — the user's intended
+   * orientation, preserved across surface transitions. Strategies that
+   * re-parent the draft (e.g. floor → item-surface) read this to compute the
+   * matching parent-local rotation so the world orientation doesn't jump.
+   */
+  currentCursorRotationY: number
 }
 
 // ============================================================================