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/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