Phase 5 Stage D moves: live-drag for slab/ceiling + cursor follows pointer

User-reported regressions after the previous Stage D move ports:

1. Slab/ceiling moves were sluggish because the actions wrote
   scene.update(polygon) every grid:move tick → React re-render +
   CSG-with-holes geometry rebuild per frame.

   Apply the live-drag exception (same recipe fence move already used):
   visual translation via `sceneRegistry.nodes.get(id).position` +
   `useLiveTransforms`; scene.polygon is only written on commit. Polygon
   center precomputed in ctx, mesh-offset clears on commit/cancel.

2. Cursor sphere sat at the polygon center (offset from the user's
   actual cursor by `originalCenter - first_cursor`). Move wrappers
   now subscribe to `grid:move` and set `cursorRef.current.position`
   directly — no React state, no per-tick reconcile. Cursor lands on
   the user's pointer.

3. Fence move had the same React-reconcile-per-tick cost via its
   `useLiveTransforms` subscription. Switched to the same direct
   ref-mutation pattern.

Adds a "REAL bend" test pinning that one Ctrl-Z after a real curve
drag undoes only the bend, not the create. The previously reported
"first undo does nothing" outcome reproduces only for no-op bends
(drags within `normalizeWallCurveOffset`'s straight-snap threshold,
≈1.5cm on a 3m fence). For visible bends the dance pushes a real
pastState entry and one undo step rolls back the bend.

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

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

@@ -1,16 +1,25 @@
-import type { AnyNode, AnyNodeId, CeilingNode, DragAction } from '@pascal-app/core'
+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.
  *
- * Mirrors `slab/actions/move.ts` shape but ceiling snaps purely to a
- * 0.5m grid (no wall/fence corner snap — ceilings are typically
- * placed independent of the floor layout). Drag anchor is latched on
- * the first preview tick so the ceiling doesn't jump. Emits a grid-
- * snap sfx when the snapped position changes between ticks.
+ * 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).
  *
- * Single-undo dance on commit, same recipe as slab/fence.
+ * On commit the final polygon is written via the single-undo dance
+ * and the mesh-offset is cleared.
  */
 
 const GRID_STEP = 0.5
@@ -31,17 +40,51 @@ function translatePolygon(
   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 = {
-  polygon: Array<[number, number]>
-  holes: Array<Array<[number, number]>>
   deltaX: number
   deltaZ: number
 }
@@ -50,12 +93,15 @@ 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: ceiling.polygon.map(([x, z]) => [x, z] as [number, number]),
+      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,
     }
@@ -70,38 +116,30 @@ export const moveCeilingDragAction: DragAction<MoveCeilingCtx, MoveCeilingDraft>
       ctx.lastSnapped = snapped
     }
     if (!ctx.dragAnchor) ctx.dragAnchor = snapped
-    const deltaX = sx - ctx.dragAnchor[0]
-    const deltaZ = sz - ctx.dragAnchor[1]
     return {
-      polygon: translatePolygon(ctx.originalPolygon, deltaX, deltaZ),
-      holes: ctx.originalHoles.map((h) => translatePolygon(h, deltaX, deltaZ)),
-      deltaX,
-      deltaZ,
+      deltaX: sx - ctx.dragAnchor[0],
+      deltaZ: sz - ctx.dragAnchor[1],
     }
   },
 
-  apply: (draft, ctx, scene) => {
-    scene.update(ctx.ceilingId, {
-      polygon: draft.polygon,
-      holes: draft.holes,
-    } as Partial<AnyNode>)
-    return [ctx.ceilingId]
+  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) => {
-    // Always push — see fence/actions/curve.ts. No-movement still
-    // records a pastState entry so Ctrl-Z doesn't fall through to the
-    // ceiling-create step.
     scene.restoreAll()
     scene.resumeHistory()
     scene.update(ctx.ceilingId, {
-      polygon: draft.polygon,
-      holes: draft.holes,
+      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) => {
-    // No-op — orchestrator's scene.restoreAll() restores via snapshot.
+  cancel: (ctx, _scene) => {
+    clearLiveState(ctx.ceilingId)
   },
 }

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

@@ -1,46 +1,54 @@
 'use client'
 
-import { type CeilingNode, useScene } from '@pascal-app/core'
+import { type CeilingNode, emitter, type GridEvent } from '@pascal-app/core'
 import { CursorSphere, triggerSFX, useDragAction, useEditor } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
-import { useMemo } from 'react'
-import { BufferGeometry, DoubleSide, Path, Shape, ShapeGeometry, Vector3 } from 'three'
+import { useEffect, useMemo, useRef } from 'react'
+import type { Group } from 'three'
 import { moveCeilingDragAction } from './actions/move'
 
 /**
  * Phase 5 Stage D — thin React wrapper around `moveCeilingDragAction`.
  *
- * Renders the cursor sphere at the ceiling polygon's live center plus
- * a translucent preview fill + outline so the user sees where the
- * ceiling lands before clicking. Polygon + holes are pulled from
- * `useScene` so the wrapper mirrors the action's per-tick writes.
+ * 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.
  */
 export const CeilingMoveTool: React.FC<{ node: CeilingNode }> = ({ node }) => {
   const ceilingId = node.id
-  const height = node.height ?? 2.5
+  const cursorRef = useRef<Group>(null)
 
-  const live = useScene((s) => s.nodes[ceilingId])
-  const liveCeiling = live?.type === 'ceiling' ? (live as CeilingNode) : node
-  const polygon = liveCeiling.polygon
-  // `?? []` would return a NEW empty array per render, busting downstream
-  // useMemo deps and (under StrictMode) potentially triggering the
-  // "getSnapshot result not cached" warning. Memoize against the source.
-  const EMPTY_HOLES = useMemo(() => [] as Array<Array<[number, number]>>, [])
-  const holes = liveCeiling.holes ?? EMPTY_HOLES
-
-  const center: [number, number] = useMemo(() => {
-    if (polygon.length === 0) return [0, 0]
+  const initialCenter: [number, number] = useMemo(() => {
+    if (node.polygon.length === 0) return [0, 0]
     let sx = 0
     let sz = 0
-    for (const [x, z] of polygon) {
+    for (const [x, z] of node.polygon) {
       sx += x
       sz += z
     }
-    return [sx / polygon.length, sz / polygon.length]
-  }, [polygon])
+    return [sx / node.polygon.length, sz / node.polygon.length]
+  }, [node.polygon])
 
-  const previewFillGeometry = useMemo(() => createPreviewFill(polygon, holes), [polygon, holes])
-  const previewOutlineGeometry = useMemo(() => createOutline(polygon), [polygon])
+  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)
+    }
+  }, [])
 
   const exitMoveMode = (committed: boolean) => {
     if (committed) triggerSFX('sfx:item-place')
@@ -53,7 +61,7 @@ export const CeilingMoveTool: React.FC<{ node: CeilingNode }> = ({ node }) => {
     action: moveCeilingDragAction,
     initial: {
       node,
-      point: center,
+      point: initialCenter,
     },
     onCommit: () => exitMoveMode(true),
     onCancel: () => exitMoveMode(false),
@@ -61,63 +69,9 @@ export const CeilingMoveTool: React.FC<{ node: CeilingNode }> = ({ node }) => {
 
   return (
     <group>
-      <mesh geometry={previewFillGeometry} position={[0, height + 0.012, 0]}>
-        <meshBasicMaterial
-          color="#f5f5f4"
-          depthWrite={false}
-          opacity={0.3}
-          side={DoubleSide}
-          transparent
-        />
-      </mesh>
-      {/* @ts-ignore */}
-      <line geometry={previewOutlineGeometry} position={[0, height + 0.02, 0]}>
-        <lineBasicMaterial color="#ffffff" depthWrite={false} opacity={0.95} transparent />
-      </line>
-      <CursorSphere position={[center[0], height, center[1]]} showTooltip={false} />
+      <CursorSphere ref={cursorRef} showTooltip={false} />
     </group>
   )
 }
 
-function createPreviewFill(
-  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 createOutline(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 CeilingMoveTool