Phase 5 Stage D: re-port curve + whole-item move tools 1:1 from legacy

Each tool is now a direct copy of the legacy implementation, relocated
under @pascal-app/nodes/<kind>/ and dispatched via the registry's
def.affordanceTools. No DragAction abstraction, no clever live-drag
exception, no novel snap pipeline — same code, same UX, same
performance, same history dance.

Ports:
- fence/curve-tool.tsx    (legacy CurveFenceTool, 1:1)
- fence/move-tool.tsx     (legacy MoveFenceTool, 1:1 — including
                           the mesh.position + useLiveTransforms
                           exception that the legacy uses for fence
                           specifically)
- wall/curve-tool.tsx     (legacy CurveWallTool, 1:1)
- slab/move-tool.tsx      (legacy MoveSlabTool, 1:1)
- ceiling/move-tool.tsx   (legacy MoveCeilingTool, 1:1 — preview
                           fill + outline overlay preserved)

Drops the obsolete DragAction-based action files
(packages/nodes/src/{fence,wall,slab,ceiling}/actions/{curve,move}.ts)
and their now-empty actions/ directories where applicable. Fence
keeps actions/move-endpoint.ts since that port works.

Editor public surface gains `getWallGridStep` + `snapScalarToGrid`
(transitional exports — Stage F moves them into @pascal-app/nodes).

ToolManager + MoveTool dispatch unchanged: the same legacy-fallback
branches now mount the registry component because the affordances are
declared, but the rendered behavior matches the legacy because the
implementations are copies.

Per-kind progress: fence D ✅ (curve / move-endpoint / move / placement
all kind-owned), slab D ✅, ceiling D ✅, wall D 🟡 (curve only,
endpoint/move/placement still legacy).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

packages/nodes/src/ceiling/actions/move.ts

@@ -1,145 +0,0 @@
-import {
-  type AnyNode,
-  type AnyNodeId,
-  type CeilingNode,
-  type DragAction,
-  sceneRegistry,
-  useLiveTransforms,
-} from '@pascal-app/core'
-import { triggerSFX } from '@pascal-app/editor'
-import type * as THREE from 'three'
-
-/**
- * Phase 5 Stage D — whole-ceiling move drag affordance.
- *
- * Live-drag exception (same recipe as slab/fence move): translate the
- * ceiling MESH visually via `sceneRegistry.nodes.get(ceilingId)
- * .position` plus a mirror in `useLiveTransforms`. No scene.update
- * during the drag → no React re-render, no polygon CSG rebuild per
- * tick. Snaps to a 0.5m grid (no wall/fence corner snap).
- *
- * On commit the final polygon is written via the single-undo dance
- * and the mesh-offset is cleared.
- */
-
-const GRID_STEP = 0.5
-
-function snap(value: number): number {
-  return Math.round(value / GRID_STEP) * GRID_STEP
-}
-
-function sameSnap(a: [number, number] | null, b: [number, number]): boolean {
-  return a !== null && a[0] === b[0] && a[1] === b[1]
-}
-
-function translatePolygon(
-  polygon: Array<[number, number]>,
-  deltaX: number,
-  deltaZ: number,
-): Array<[number, number]> {
-  return polygon.map(([x, z]) => [x + deltaX, z + deltaZ] as [number, number])
-}
-
-function polygonCenter(polygon: Array<[number, number]>): [number, number] {
-  if (polygon.length === 0) return [0, 0]
-  let sx = 0
-  let sz = 0
-  for (const [x, z] of polygon) {
-    sx += x
-    sz += z
-  }
-  return [sx / polygon.length, sz / polygon.length]
-}
-
-function setMeshOffset(id: AnyNodeId, deltaX: number, deltaZ: number): void {
-  const mesh = sceneRegistry.nodes.get(id) as THREE.Object3D | undefined
-  if (mesh) mesh.position.set(deltaX, 0, deltaZ)
-}
-
-function setLiveTransform(
-  id: AnyNodeId,
-  originalCenter: [number, number],
-  deltaX: number,
-  deltaZ: number,
-  height: number,
-): void {
-  useLiveTransforms.getState().set(id, {
-    position: [originalCenter[0] + deltaX, height, originalCenter[1] + deltaZ],
-    rotation: 0,
-  })
-}
-
-function clearLiveState(id: AnyNodeId): void {
-  setMeshOffset(id, 0, 0)
-  useLiveTransforms.getState().clear(id)
-}
-
-export type MoveCeilingCtx = {
-  ceilingId: AnyNodeId
-  originalPolygon: Array<[number, number]>
-  originalHoles: Array<Array<[number, number]>>
-  originalCenter: [number, number]
-  height: number
-  dragAnchor: [number, number] | null
-  lastSnapped: [number, number] | null
-}
-
-export type MoveCeilingDraft = {
-  deltaX: number
-  deltaZ: number
-}
-
-export const moveCeilingDragAction: DragAction<MoveCeilingCtx, MoveCeilingDraft> = {
-  begin: (input) => {
-    const ceiling = input.node as CeilingNode | undefined
-    if (!ceiling) throw new Error('[moveCeilingDragAction] begin requires a ceiling node')
-    const originalPolygon = ceiling.polygon.map(([x, z]) => [x, z] as [number, number])
-    return {
-      ceilingId: ceiling.id as AnyNodeId,
-      originalPolygon,
-      originalHoles: (ceiling.holes ?? []).map((h) =>
-        h.map(([x, z]) => [x, z] as [number, number]),
-      ),
-      originalCenter: polygonCenter(originalPolygon),
-      height: ceiling.height ?? 2.5,
-      dragAnchor: null,
-      lastSnapped: null,
-    }
-  },
-
-  preview: (ctx, point, _modifiers) => {
-    const sx = snap(point[0])
-    const sz = snap(point[1])
-    const snapped: [number, number] = [sx, sz]
-    if (!sameSnap(ctx.lastSnapped, snapped)) {
-      if (ctx.lastSnapped !== null) triggerSFX('sfx:grid-snap')
-      ctx.lastSnapped = snapped
-    }
-    if (!ctx.dragAnchor) ctx.dragAnchor = snapped
-    return {
-      deltaX: sx - ctx.dragAnchor[0],
-      deltaZ: sz - ctx.dragAnchor[1],
-    }
-  },
-
-  apply: (draft, ctx, _scene) => {
-    setMeshOffset(ctx.ceilingId, draft.deltaX, draft.deltaZ)
-    setLiveTransform(ctx.ceilingId, ctx.originalCenter, draft.deltaX, draft.deltaZ, ctx.height)
-    return []
-  },
-
-  commit: (draft, ctx, scene) => {
-    scene.restoreAll()
-    scene.resumeHistory()
-    scene.update(ctx.ceilingId, {
-      polygon: translatePolygon(ctx.originalPolygon, draft.deltaX, draft.deltaZ),
-      holes: ctx.originalHoles.map((h) => translatePolygon(h, draft.deltaX, draft.deltaZ)),
-    } as Partial<AnyNode>)
-    clearLiveState(ctx.ceilingId)
-    return true
-  },
-
-  cancel: (ctx, _scene) => {
-    clearLiveState(ctx.ceilingId)
-  },
-}

packages/nodes/src/ceiling/definition.ts

@@ -58,12 +58,13 @@ export const ceilingDefinition: NodeDefinition<typeof CeilingNode> = {
   // with a vertical TSL-gradient connector + ground-shadow lines.
   tool: () => import('./tool'),
 
-  // Stage D — boundary + hole editors ported. Whole-ceiling move kept
-  // on the legacy MoveCeilingTool for the same reason as slab (live-
-  // drag mesh.position one-frame teleport on commit).
+  // Stage D — all four ceiling drag-affordances live in this folder.
+  // 1:1 port of the legacy tools (scene.update per tick + history
+  // dance + preview fill/outline overlay on move).
   affordanceTools: {
     'boundary-edit': () => import('./boundary-editor'),
     'hole-edit': () => import('./hole-editor'),
+    move: () => import('./move-tool'),
   },
 
   renderer: {

packages/nodes/src/ceiling/move-tool.tsx

@@ -1,77 +1,270 @@
 'use client'
 
-import { type CeilingNode, emitter, type GridEvent } from '@pascal-app/core'
-import { CursorSphere, triggerSFX, useDragAction, useEditor } from '@pascal-app/editor'
+import {
+  type AnyNodeId,
+  type CeilingNode,
+  emitter,
+  type GridEvent,
+  useScene,
+} from '@pascal-app/core'
+import { CursorSphere, markToolCancelConsumed, triggerSFX, useEditor } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useMemo, useRef } from 'react'
-import type { Group } from 'three'
-import { moveCeilingDragAction } from './actions/move'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { BufferGeometry, DoubleSide, Path, Shape, ShapeGeometry, Vector3 } from 'three'
 
 /**
- * Phase 5 Stage D — thin React wrapper around `moveCeilingDragAction`.
+ * Phase 5 Stage D — ceiling whole-move tool (kind-owned).
  *
- * Same shape as `slab/move-tool.tsx`: cursor sphere follows the raw
- * grid pointer via direct ref mutation, the ceiling mesh translates
- * visually via `mesh.position` + `useLiveTransforms`, scene polygon is
- * written only on commit (single-undo dance).
- *
- * No preview fill / outline mesh — moving a translucent overlay every
- * tick adds the same per-frame React reconciliation cost we're trying
- * to avoid here. The real ceiling mesh translates in place; that's
- * enough visual feedback.
+ * 1:1 port of the legacy `MoveCeilingTool`. 0.5m grid snap, scene.update
+ * per tick, history dance on commit, preview fill + outline overlay
+ * matching the legacy.
  */
-export const CeilingMoveTool: React.FC<{ node: CeilingNode }> = ({ node }) => {
-  const ceilingId = node.id
-  const cursorRef = useRef<Group>(null)
+function snap(value: number) {
+  return Math.round(value * 2) / 2
+}
 
-  const initialCenter: [number, number] = useMemo(() => {
-    if (node.polygon.length === 0) return [0, 0]
-    let sx = 0
-    let sz = 0
-    for (const [x, z] of node.polygon) {
-      sx += x
-      sz += z
-    }
-    return [sx / node.polygon.length, sz / node.polygon.length]
-  }, [node.polygon])
+function translatePolygon(
+  polygon: Array<[number, number]>,
+  deltaX: number,
+  deltaZ: number,
+): Array<[number, number]> {
+  return polygon.map(([x, z]) => [x + deltaX, z + deltaZ] as [number, number])
+}
 
-  useEffect(() => {
-    const onMove = (event: GridEvent) => {
-      if (!cursorRef.current) return
-      cursorRef.current.position.set(
-        event.localPosition[0],
-        event.localPosition[1],
-        event.localPosition[2],
-      )
-    }
-    emitter.on('grid:move', onMove)
-    return () => {
-      emitter.off('grid:move', onMove)
-    }
+function getPolygonCenter(polygon: Array<[number, number]>): [number, number] {
+  if (polygon.length === 0) return [0, 0]
+  let sumX = 0
+  let sumZ = 0
+  for (const [x, z] of polygon) {
+    sumX += x
+    sumZ += z
+  }
+  return [sumX / polygon.length, sumZ / polygon.length]
+}
+
+export const MoveCeilingTool: React.FC<{ node: CeilingNode }> = ({ node }) => {
+  const activatedAtRef = useRef<number>(Date.now())
+  const originalPolygonRef = useRef(node.polygon.map(([x, z]) => [x, z] as [number, number]))
+  const originalHolesRef = useRef(
+    (node.holes ?? []).map((hole) => hole.map(([x, z]) => [x, z] as [number, number])),
+  )
+  const dragAnchorRef = useRef<[number, number] | null>(null)
+  const previousGridPosRef = useRef<[number, number] | null>(null)
+  const previousCursorPosRef = useRef<[number, number, number] | null>(null)
+  const previousDeltaRef = useRef<[number, number] | null>(null)
+  const previewRef = useRef<{
+    polygon: Array<[number, number]>
+    holes: Array<Array<[number, number]>>
+  } | null>(null)
+
+  const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>(() => {
+    const center = getPolygonCenter(node.polygon)
+    return [center[0], node.height ?? 2.5, center[1]]
+  })
+  const [previewPolygon, setPreviewPolygon] = useState<Array<[number, number]>>(node.polygon)
+  const [previewHoles, setPreviewHoles] = useState<Array<Array<[number, number]>>>(node.holes ?? [])
+
+  const exitMoveMode = useCallback(() => {
+    useEditor.getState().setMovingNode(null)
   }, [])
 
-  const exitMoveMode = (committed: boolean) => {
-    if (committed) triggerSFX('sfx:item-place')
-    useViewer.getState().setSelection({ selectedIds: [ceilingId] })
-    useEditor.getState().setMovingNode(null)
-  }
+  useEffect(() => {
+    const originalPolygon = originalPolygonRef.current
+    const originalHoles = originalHolesRef.current
 
-  useDragAction({
-    active: true,
-    action: moveCeilingDragAction,
-    initial: {
-      node,
-      point: initialCenter,
-    },
-    onCommit: () => exitMoveMode(true),
-    onCancel: () => exitMoveMode(false),
-  })
+    useScene.temporal.getState().pause()
+    let wasCommitted = false
+
+    const applyPreview = (
+      polygon: Array<[number, number]>,
+      holes: Array<Array<[number, number]>>,
+    ) => {
+      previewRef.current = { polygon, holes }
+      setPreviewPolygon(polygon)
+      setPreviewHoles(holes)
+      const center = getPolygonCenter(polygon)
+      const nextCursorPos: [number, number, number] = [center[0], node.height ?? 2.5, center[1]]
+      if (
+        !previousCursorPosRef.current ||
+        previousCursorPosRef.current[0] !== nextCursorPos[0] ||
+        previousCursorPosRef.current[1] !== nextCursorPos[1] ||
+        previousCursorPosRef.current[2] !== nextCursorPos[2]
+      ) {
+        previousCursorPosRef.current = nextCursorPos
+        setCursorLocalPos(nextCursorPos)
+      }
+      useScene.getState().updateNode(node.id, { polygon, holes })
+      useScene.getState().markDirty(node.id as AnyNodeId)
+    }
+
+    const restoreOriginal = () => {
+      setPreviewPolygon(originalPolygon)
+      setPreviewHoles(originalHoles)
+      useScene.getState().updateNode(node.id, {
+        holes: originalHoles,
+        polygon: originalPolygon,
+      })
+      useScene.getState().markDirty(node.id as AnyNodeId)
+    }
+
+    const onGridMove = (event: GridEvent) => {
+      const localX = snap(event.localPosition[0])
+      const localZ = snap(event.localPosition[2])
+
+      if (
+        previousGridPosRef.current &&
+        (localX !== previousGridPosRef.current[0] || localZ !== previousGridPosRef.current[1])
+      ) {
+        triggerSFX('sfx:grid-snap')
+      }
+      previousGridPosRef.current = [localX, localZ]
+
+      const anchor = dragAnchorRef.current ?? [localX, localZ]
+      dragAnchorRef.current = anchor
+
+      const deltaX = localX - anchor[0]
+      const deltaZ = localZ - anchor[1]
+
+      if (
+        previousDeltaRef.current &&
+        previousDeltaRef.current[0] === deltaX &&
+        previousDeltaRef.current[1] === deltaZ
+      ) {
+        return
+      }
+      previousDeltaRef.current = [deltaX, deltaZ]
+
+      applyPreview(
+        translatePolygon(originalPolygon, deltaX, deltaZ),
+        originalHoles.map((hole) => translatePolygon(hole, deltaX, deltaZ)),
+      )
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      if (Date.now() - activatedAtRef.current < 150) {
+        event.nativeEvent?.stopPropagation?.()
+        return
+      }
+
+      const preview = previewRef.current ?? { polygon: originalPolygon, holes: originalHoles }
+
+      wasCommitted = true
+
+      // Restore original baseline while paused so the next resume+update
+      // registers as a single tracked change (undo reverts to original).
+      useScene.getState().updateNode(node.id, {
+        polygon: originalPolygon,
+        holes: originalHoles,
+      })
+
+      useScene.temporal.getState().resume()
+      useScene.getState().updateNode(node.id, preview)
+      useScene.getState().markDirty(node.id as AnyNodeId)
+      useScene.temporal.getState().pause()
+
+      triggerSFX('sfx:item-place')
+      useViewer.getState().setSelection({ selectedIds: [node.id] })
+      exitMoveMode()
+      event.nativeEvent?.stopPropagation?.()
+    }
+
+    const onCancel = () => {
+      restoreOriginal()
+      useViewer.getState().setSelection({ selectedIds: [node.id] })
+      useScene.temporal.getState().resume()
+      markToolCancelConsumed()
+      exitMoveMode()
+    }
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+    emitter.on('tool:cancel', onCancel)
+
+    return () => {
+      if (!wasCommitted) {
+        restoreOriginal()
+      }
+      useScene.temporal.getState().resume()
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+      emitter.off('tool:cancel', onCancel)
+    }
+  }, [exitMoveMode, node.height, node.id])
+
+  const previewFillGeometry = useMemo(
+    () => createCeilingPreviewGeometry(previewPolygon, previewHoles),
+    [previewHoles, previewPolygon],
+  )
+
+  const previewOutlineGeometry = useMemo(
+    () => createCeilingOutlineGeometry(previewPolygon),
+    [previewPolygon],
+  )
 
   return (
     <group>
-      <CursorSphere ref={cursorRef} showTooltip={false} />
+      <mesh geometry={previewFillGeometry} position={[0, (node.height ?? 2.5) + 0.012, 0]}>
+        <meshBasicMaterial
+          color="#f5f5f4"
+          depthWrite={false}
+          opacity={0.3}
+          side={DoubleSide}
+          transparent
+        />
+      </mesh>
+      {/* @ts-ignore */}
+      <line geometry={previewOutlineGeometry} position={[0, (node.height ?? 2.5) + 0.02, 0]}>
+        <lineBasicMaterial color="#ffffff" depthWrite={false} opacity={0.95} transparent />
+      </line>
+      <CursorSphere position={cursorLocalPos} showTooltip={false} />
     </group>
   )
 }
 
-export default CeilingMoveTool
+function createCeilingPreviewGeometry(
+  polygon: Array<[number, number]>,
+  holes: Array<Array<[number, number]>>,
+): BufferGeometry {
+  if (polygon.length < 3) return new BufferGeometry()
+
+  const shape = new Shape()
+  const [firstX, firstZ] = polygon[0]!
+  shape.moveTo(firstX, -firstZ)
+
+  for (let i = 1; i < polygon.length; i++) {
+    const [x, z] = polygon[i]!
+    shape.lineTo(x, -z)
+  }
+  shape.closePath()
+
+  for (const holePolygon of holes) {
+    if (holePolygon.length < 3) continue
+    const hole = new Path()
+    const [hx, hz] = holePolygon[0]!
+    hole.moveTo(hx, -hz)
+    for (let i = 1; i < holePolygon.length; i++) {
+      const [x, z] = holePolygon[i]!
+      hole.lineTo(x, -z)
+    }
+    hole.closePath()
+    shape.holes.push(hole)
+  }
+
+  const geometry = new ShapeGeometry(shape)
+  geometry.rotateX(-Math.PI / 2)
+  geometry.computeVertexNormals()
+  return geometry
+}
+
+function createCeilingOutlineGeometry(polygon: Array<[number, number]>): BufferGeometry {
+  const geometry = new BufferGeometry()
+  if (polygon.length < 2) return geometry
+
+  const points = polygon.map(([x, z]) => new Vector3(x, 0, z))
+  const [firstX, firstZ] = polygon[0]!
+  points.push(new Vector3(firstX, 0, firstZ))
+  geometry.setFromPoints(points)
+  return geometry
+}
+
+export default MoveCeilingTool