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/slab/actions/move.ts

@@ -5,10 +5,13 @@ import {
   type FenceNode,
   type LevelNode,
   type SlabNode,
+  sceneRegistry,
+  useLiveTransforms,
   useScene,
   type WallNode,
 } from '@pascal-app/core'
 import { type FencePlanPoint, snapFenceDraftPoint, triggerSFX } from '@pascal-app/editor'
+import type * as THREE from 'three'
 
 function sameSnap(a: FencePlanPoint | null, b: FencePlanPoint): boolean {
   return a !== null && a[0] === b[0] && a[1] === b[1]
@@ -17,17 +20,20 @@ function sameSnap(a: FencePlanPoint | null, b: FencePlanPoint): boolean {
 /**
  * Phase 5 Stage D — whole-slab move drag affordance.
  *
- * Translates the slab's boundary polygon (and any holes) rigidly under
- * the pointer. Snaps to walls / fences / grid at the level. Latches
- * the drag anchor on the first preview tick so the slab doesn't jump
- * to wherever the activation click landed. Emits grid-snap sfx when
- * the snapped position changes between ticks (matches legacy UX).
+ * Uses the **live-drag exception** (same recipe as fence move): the
+ * slab MESH is translated visually via `sceneRegistry.nodes.get(slabId)
+ * .position` plus a mirror entry in `useLiveTransforms`. The scene
+ * store's polygon stays untouched during the drag — no React re-render
+ * per tick, no CSG-with-holes rebuild per frame.
  *
- * Unlike fence move, the slab port does **not** use the live-drag
- * exception — polygon CSG geometry is expensive to rebuild per frame,
- * but the legacy tool already writes the polygon to the scene every
- * pointer tick and the user perceives that as smooth. Matching that
- * for now; optimization is a separate task once we measure.
+ * On commit the final polygon is written to the scene via the single-
+ * undo dance, then the mesh-position offset is cleared. The renderer
+ * picks up the new polygon, the mesh re-mounts at the new world coords,
+ * and zundo records one diff.
+ *
+ * Hosted items don't follow the visual translation (same as legacy —
+ * item.position is independent of slab.polygon). Acceptable: the slab
+ * snaps back into place on commit so the visual mismatch is brief.
  */
 
 function translatePolygon(
@@ -49,10 +55,33 @@ function polygonCenter(polygon: Array<[number, number]>): [number, number] {
   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,
+): void {
+  useLiveTransforms.getState().set(id, {
+    position: [originalCenter[0] + deltaX, 0, originalCenter[1] + deltaZ],
+    rotation: 0,
+  })
+}
+
+function clearLiveState(id: AnyNodeId): void {
+  setMeshOffset(id, 0, 0)
+  useLiveTransforms.getState().clear(id)
+}
+
 export type MoveSlabCtx = {
   slabId: AnyNodeId
   originalPolygon: Array<[number, number]>
   originalHoles: Array<Array<[number, number]>>
+  originalCenter: [number, number]
   parentId: string | null
   levelWalls: WallNode[]
   levelFences: FenceNode[]
@@ -65,7 +94,6 @@ export type MoveSlabDraft = {
   holes: Array<Array<[number, number]>>
   deltaX: number
   deltaZ: number
-  center: [number, number]
 }
 
 export const moveSlabDragAction: DragAction<MoveSlabCtx, MoveSlabDraft> = {
@@ -100,6 +128,7 @@ export const moveSlabDragAction: DragAction<MoveSlabCtx, MoveSlabDraft> = {
       slabId: slab.id as AnyNodeId,
       originalPolygon,
       originalHoles,
+      originalCenter: polygonCenter(originalPolygon),
       parentId,
       levelWalls,
       levelFences,
@@ -114,7 +143,6 @@ export const moveSlabDragAction: DragAction<MoveSlabCtx, MoveSlabDraft> = {
       walls: ctx.levelWalls,
       fences: ctx.levelFences,
     })
-    // Emit grid-snap sfx when the snapped position changes.
     if (!sameSnap(ctx.lastSnapped, snapped)) {
       if (ctx.lastSnapped !== null) triggerSFX('sfx:grid-snap')
       ctx.lastSnapped = snapped
@@ -122,40 +150,42 @@ export const moveSlabDragAction: DragAction<MoveSlabCtx, MoveSlabDraft> = {
     if (!ctx.dragAnchor) ctx.dragAnchor = snapped
     const deltaX = snapped[0] - ctx.dragAnchor[0]
     const deltaZ = snapped[1] - ctx.dragAnchor[1]
-    const polygon = translatePolygon(ctx.originalPolygon, deltaX, deltaZ)
-    const holes = ctx.originalHoles.map((h) => translatePolygon(h, deltaX, deltaZ))
+    // Translation is computed lazily on commit — preview only needs the
+    // deltas for the mesh-offset visual.
     return {
-      polygon,
-      holes,
+      polygon: ctx.originalPolygon,
+      holes: ctx.originalHoles,
       deltaX,
       deltaZ,
-      center: polygonCenter(polygon),
     }
   },
 
-  apply: (draft, ctx, scene) => {
-    scene.update(ctx.slabId, {
-      polygon: draft.polygon,
-      holes: draft.holes,
-    } as Partial<AnyNode>)
-    return [ctx.slabId]
+  apply: (draft, ctx, _scene) => {
+    // Live-drag exception: visual translate via Three.js mesh.position +
+    // useLiveTransforms. No scene.update during the drag, no React
+    // re-render of the slab geometry, no CSG-with-holes rebuild.
+    setMeshOffset(ctx.slabId, draft.deltaX, draft.deltaZ)
+    setLiveTransform(ctx.slabId, ctx.originalCenter, draft.deltaX, draft.deltaZ)
+    return []
   },
 
   commit: (draft, ctx, scene) => {
-    // Always push — see fence/actions/curve.ts. Even on a no-movement
-    // commit, the dance must push a pastState entry so Ctrl-Z doesn't
-    // cancel whatever was on the stack before activation.
+    // Single-undo dance — snapshot is empty (no scene.update during
+    // apply), restoreAll is a no-op. Resume history, write the final
+    // polygon. Zundo records one diff: original → translated.
     scene.restoreAll()
     scene.resumeHistory()
     scene.update(ctx.slabId, {
-      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.slabId)
     return true
   },
 
-  cancel: (_ctx, _scene) => {
-    // No-op — orchestrator's scene.restoreAll() puts the original
-    // polygon/holes back via the snapshot.
+  cancel: (ctx, _scene) => {
+    // Clear live-drag visual state — mesh snaps back to its (unchanged)
+    // scene position.
+    clearLiveState(ctx.slabId)
   },
 }

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

@@ -1,26 +1,24 @@
 'use client'
 
-import { type SlabNode, useScene } from '@pascal-app/core'
+import { emitter, type GridEvent, type SlabNode } from '@pascal-app/core'
 import { CursorSphere, triggerSFX, useDragAction, useEditor } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
+import type { Group } from 'three'
 import { moveSlabDragAction } from './actions/move'
 
 /**
  * Phase 5 Stage D — thin React wrapper around `moveSlabDragAction`.
  *
- * Replaces the legacy `MoveSlabTool` (182 LoC). All math + history
- * dance lives in the action; this wrapper renders the cursor sphere
- * at the live polygon center.
- *
- * NOTE on selector stability: the live polygon center MUST be derived
- * via `useMemo` over the node reference rather than computed inside
- * the `useScene` selector — returning a fresh `[x, z]` tuple from the
- * selector on every call triggers "getSnapshot result not cached"
- * → infinite re-render. Same pattern in fence/ceiling move-tool.
+ * The cursor sphere follows the raw grid pointer via direct ref mutation
+ * (no React state, no per-tick re-render). The slab mesh itself is
+ * translated by the action using `mesh.position` + `useLiveTransforms`
+ * (live-drag exception). Scene polygon is only written on commit.
  */
 export const SlabMoveTool: React.FC<{ node: SlabNode }> = ({ node }) => {
   const slabId = node.id
+  const cursorRef = useRef<Group>(null)
+
   const initialCenter: [number, number] = useMemo(() => {
     if (node.polygon.length === 0) return [0, 0]
     let sx = 0
@@ -32,22 +30,22 @@ export const SlabMoveTool: React.FC<{ node: SlabNode }> = ({ node }) => {
     return [sx / node.polygon.length, sz / node.polygon.length]
   }, [node.polygon])
 
-  // Subscribe to the live node reference (stable across renders when
-  // the node hasn't changed; new reference per scene update). Derive
-  // the center inside `useMemo` so the selector itself stays cached.
-  const liveNode = useScene((s) => s.nodes[slabId])
-  const liveCenter = useMemo<[number, number]>(() => {
-    if (liveNode?.type !== 'slab') return initialCenter
-    const poly = (liveNode as SlabNode).polygon
-    if (poly.length === 0) return initialCenter
-    let sx = 0
-    let sz = 0
-    for (const [x, z] of poly) {
-      sx += x
-      sz += z
+  // Cursor follows the raw grid pointer — direct Three.js mutation,
+  // bypassing React reconciliation for the per-tick position update.
+  useEffect(() => {
+    const onMove = (event: GridEvent) => {
+      if (!cursorRef.current) return
+      cursorRef.current.position.set(
+        event.localPosition[0],
+        event.localPosition[1],
+        event.localPosition[2],
+      )
     }
-    return [sx / poly.length, sz / poly.length]
-  }, [liveNode, initialCenter])
+    emitter.on('grid:move', onMove)
+    return () => {
+      emitter.off('grid:move', onMove)
+    }
+  }, [])
 
   const exitMoveMode = (committed: boolean) => {
     if (committed) triggerSFX('sfx:item-place')
@@ -68,7 +66,7 @@ export const SlabMoveTool: React.FC<{ node: SlabNode }> = ({ node }) => {
 
   return (
     <group>
-      <CursorSphere position={[liveCenter[0], 0, liveCenter[1]]} showTooltip={false} />
+      <CursorSphere ref={cursorRef} showTooltip={false} />
     </group>
   )
 }