@pascal-app/editor 0.9.1 → 1.0.0-beta.1

package/src/components/editor/group-transform-shared.ts

@@ -25,12 +25,15 @@ const isVec3 = (v: unknown): v is Vec3 =>
   Array.isArray(v) && v.length === 3 && v.every((n) => typeof n === 'number')
 const isVec2 = (v: unknown): v is Vec2 =>
   Array.isArray(v) && v.length === 2 && v.every((n) => typeof n === 'number')
+const isVec2Array = (v: unknown): v is Vec2[] => Array.isArray(v) && v.length > 0 && v.every(isVec2)
 
 // How a participant's placement transforms rigidly around / with the group:
 //   - 'vec3'     position + [x,y,z] rotation (items, …)
 //   - 'scalar'   position + numeric rotation (columns)
 //   - 'endpoint' start/end tuples (walls, fences)
-export type ParticipantKind = 'vec3' | 'scalar' | 'endpoint'
+//   - 'polygon'  [x,z] vertex arrays (slabs, ceilings, zones) — the placement
+//                lives in the vertices themselves (plus optional hole rings)
+export type ParticipantKind = 'vec3' | 'scalar' | 'endpoint' | 'polygon'
 
 // A selected node qualifies when it belongs to the active level's horizontal
 // frame: either parented to that level, or declared building-scoped and parented
@@ -75,27 +78,39 @@ function getParticipantScalarRotation(node: AnyNode): number | null {
   return sceneRegistry.nodes.get(node.id)?.rotation.y ?? 0
 }
 
+// Shape-only classification of a positioned placement (no level-scope check).
+// Used for polygon hosts' attached children, whose parent is the host rather
+// than the level.
+function classifyPlacementShape(node: AnyNode): 'vec3' | 'scalar' | null {
+  const p = getParticipantPosition(node)
+  const r = (node as { rotation?: unknown }).rotation
+  if (isVec3(p) && isVec3(r)) return 'vec3'
+  if (isVec3(p) && getParticipantScalarRotation(node) !== null) return 'scalar'
+  return null
+}
+
 export function classifyParticipant(
   node: AnyNode | undefined,
   levelId: string | null,
   sceneNodes: Record<string, AnyNode | undefined>,
 ): ParticipantKind | null {
   if (!node || !isInGroupTransformScope(node, levelId, sceneNodes)) return null
-  const p = getParticipantPosition(node)
-  const r = (node as { rotation?: unknown }).rotation
+  const shape = classifyPlacementShape(node)
+  if (shape) return shape
   const start = (node as { start?: unknown }).start
   const end = (node as { end?: unknown }).end
-  if (isVec3(p) && isVec3(r)) return 'vec3'
-  if (isVec3(p) && getParticipantScalarRotation(node) !== null) return 'scalar'
   if (isVec2(start) && isVec2(end)) return 'endpoint'
+  if (isVec2Array((node as { polygon?: unknown }).polygon)) return 'polygon'
   return null
 }
 
-// Pre-drag placement snapshot + how to transform it.
+// Pre-drag placement snapshot + how to transform it. `holes` is null when the
+// kind carries no holes field (zone), so patches never write one onto it.
 export type ParticipantStart =
   | { id: AnyNodeId; kind: 'vec3'; position: Vec3; rotation: Vec3 }
   | { id: AnyNodeId; kind: 'scalar'; position: Vec3; rotation: number }
   | { id: AnyNodeId; kind: 'endpoint'; start: Vec2; end: Vec2 }
+  | { id: AnyNodeId; kind: 'polygon'; polygon: Vec2[]; holes: Vec2[][] | null }
 
 // An unselected wall/fence sharing a junction with a transforming endpoint. Only
 // the touching endpoint(s) follow, so the neighbour stays attached while its far
@@ -143,7 +158,7 @@ export function collectParticipants(
         position: [position[0], position[1], position[2]],
         rotation,
       })
-    } else {
+    } else if (kind === 'endpoint') {
       const n = node as AnyNode & { start: Vec2; end: Vec2 }
       starts.push({
         id: id as AnyNodeId,
@@ -151,6 +166,56 @@ export function collectParticipants(
         start: [n.start[0], n.start[1]],
         end: [n.end[0], n.end[1]],
       })
+    } else {
+      const n = node as AnyNode & { polygon: Vec2[]; holes?: Vec2[][] }
+      starts.push({
+        id: id as AnyNodeId,
+        kind,
+        polygon: n.polygon.map(([x, z]) => [x, z] as Vec2),
+        holes: Array.isArray(n.holes)
+          ? n.holes.map((hole) => hole.map(([x, z]) => [x, z] as Vec2))
+          : null,
+      })
+    }
+  }
+
+  // Polygon hosts (slab/ceiling) rebuild their geometry from vertices rather
+  // than transforming a group, so — unlike wall children, which ride the wall
+  // mesh — their attached children (ceiling-mounted items) must transform
+  // explicitly. Their positions are stored in the level frame (the host group
+  // sits at the origin), so the same rigid patches apply.
+  const includedIds = new Set<string>(starts.map((s) => s.id))
+  for (const s of [...starts]) {
+    if (s.kind !== 'polygon') continue
+    const host = sceneNodes[s.id]
+    const childIds = (host as { children?: string[] } | undefined)?.children
+    if (!Array.isArray(childIds)) continue
+    for (const childId of childIds) {
+      if (includedIds.has(childId)) continue
+      const child = sceneNodes[childId]
+      if (!child) continue
+      const shape = classifyPlacementShape(child)
+      const position = child ? getParticipantPosition(child) : null
+      if (!(shape && position)) continue
+      if (shape === 'vec3') {
+        const c = child as AnyNode & { rotation: Vec3 }
+        starts.push({
+          id: childId as AnyNodeId,
+          kind: 'vec3',
+          position: [position[0], position[1], position[2]],
+          rotation: [c.rotation[0], c.rotation[1], c.rotation[2]],
+        })
+      } else {
+        const rotation = getParticipantScalarRotation(child)
+        if (rotation === null) continue
+        starts.push({
+          id: childId as AnyNodeId,
+          kind: 'scalar',
+          position: [position[0], position[1], position[2]],
+          rotation,
+        })
+      }
+      includedIds.add(childId)
     }
   }
 
@@ -219,6 +284,174 @@ export function expandToComponent(
   return Array.from(included)
 }
 
+// Per-node field patch, keyed for `useLiveNodeOverrides.setMany` during a live
+// preview and for the single batched `updateNodes` on commit.
+export type GroupPatch = readonly [AnyNodeId, Record<string, unknown>]
+
+// Rigid group rotation: orbit each participant's anchor point(s) CCW by
+// `delta` (atan2 x→z sense) around `center` (level-frame XZ) and turn yaws by
+// `-delta` to match three.js Y-rotation handedness (same convention as the
+// single-item rotate handle in item/definition.ts). Endpoint nodes
+// (walls/fences) have no yaw — swinging both endpoints around the pivot
+// rotates them rigidly; their curveOffset sagitta is rotation-invariant, so
+// arcs are preserved. Linked neighbours' shared endpoints land exactly on the
+// selected wall's rotated endpoint (rot is deterministic), keeping junctions
+// welded while the far end stays put.
+export function rotateGroupPatches(
+  starts: ParticipantStart[],
+  links: LinkedNeighbor[],
+  center: { x: number; z: number },
+  delta: number,
+): GroupPatch[] {
+  const cos = Math.cos(delta)
+  const sin = Math.sin(delta)
+  const rot = (x: number, z: number): Vec2 => {
+    const dx = x - center.x
+    const dz = z - center.z
+    return [center.x + dx * cos - dz * sin, center.z + dx * sin + dz * cos]
+  }
+  const patches: GroupPatch[] = []
+  for (const s of starts) {
+    if (s.kind === 'endpoint') {
+      patches.push([s.id, { start: rot(s.start[0], s.start[1]), end: rot(s.end[0], s.end[1]) }])
+    } else if (s.kind === 'polygon') {
+      const patch: Record<string, unknown> = { polygon: s.polygon.map(([x, z]) => rot(x, z)) }
+      if (s.holes) patch.holes = s.holes.map((hole) => hole.map(([x, z]) => rot(x, z)))
+      patches.push([s.id, patch])
+    } else {
+      const [px, pz] = rot(s.position[0], s.position[2])
+      const position: Vec3 = [px, s.position[1], pz]
+      const rotation =
+        s.kind === 'vec3'
+          ? ([s.rotation[0], s.rotation[1] - delta, s.rotation[2]] as Vec3)
+          : s.rotation - delta
+      patches.push([s.id, { position, rotation }])
+    }
+  }
+  for (const l of links) {
+    patches.push([
+      l.id,
+      {
+        start: l.startLinked ? rot(l.start[0], l.start[1]) : l.start,
+        end: l.endLinked ? rot(l.end[0], l.end[1]) : l.end,
+      },
+    ])
+  }
+  return patches
+}
+
+// Rotate the SNAPSHOTS themselves (same math as `rotateGroupPatches`, but
+// producing new snapshot shapes instead of node patches). Lets an in-flight
+// group move re-seed its rest state after a mid-drag R/T: subsequent
+// translate patches then place the rotated layout at the live delta.
+export function rotateGroupSnapshots(
+  starts: ParticipantStart[],
+  links: LinkedNeighbor[],
+  center: { x: number; z: number },
+  delta: number,
+): { starts: ParticipantStart[]; links: LinkedNeighbor[] } {
+  const cos = Math.cos(delta)
+  const sin = Math.sin(delta)
+  const rot = (x: number, z: number): Vec2 => {
+    const dx = x - center.x
+    const dz = z - center.z
+    return [center.x + dx * cos - dz * sin, center.z + dx * sin + dz * cos]
+  }
+  const rotatedStarts = starts.map((s): ParticipantStart => {
+    if (s.kind === 'endpoint') {
+      return { ...s, start: rot(s.start[0], s.start[1]), end: rot(s.end[0], s.end[1]) }
+    }
+    if (s.kind === 'polygon') {
+      return {
+        ...s,
+        polygon: s.polygon.map(([x, z]) => rot(x, z)),
+        holes: s.holes ? s.holes.map((hole) => hole.map(([x, z]) => rot(x, z))) : null,
+      }
+    }
+    const [px, pz] = rot(s.position[0], s.position[2])
+    const position: Vec3 = [px, s.position[1], pz]
+    if (s.kind === 'vec3') {
+      return { ...s, position, rotation: [s.rotation[0], s.rotation[1] - delta, s.rotation[2]] }
+    }
+    return { ...s, position, rotation: s.rotation - delta }
+  })
+  // Only the welded (linked) endpoints follow the rotation; the far ends
+  // stay put, exactly like the per-tick patch path.
+  const rotatedLinks = links.map(
+    (l): LinkedNeighbor => ({
+      ...l,
+      start: l.startLinked ? rot(l.start[0], l.start[1]) : l.start,
+      end: l.endLinked ? rot(l.end[0], l.end[1]) : l.end,
+    }),
+  )
+  return { starts: rotatedStarts, links: rotatedLinks }
+}
+
+// Level-frame XZ extents of the participant DATA — the mesh-free sibling of
+// `computeGroupBox`, used when meshes aren't mounted yet and to re-seed
+// alignment anchors after a mid-drag rotation.
+export function participantExtents(
+  starts: ParticipantStart[],
+): { minX: number; minZ: number; maxX: number; maxZ: number } | null {
+  let minX = Number.POSITIVE_INFINITY
+  let minZ = Number.POSITIVE_INFINITY
+  let maxX = Number.NEGATIVE_INFINITY
+  let maxZ = Number.NEGATIVE_INFINITY
+  const reach = (x: number, z: number) => {
+    minX = Math.min(minX, x)
+    minZ = Math.min(minZ, z)
+    maxX = Math.max(maxX, x)
+    maxZ = Math.max(maxZ, z)
+  }
+  for (const s of starts) {
+    if (s.kind === 'endpoint') {
+      reach(s.start[0], s.start[1])
+      reach(s.end[0], s.end[1])
+    } else if (s.kind === 'polygon') {
+      for (const [x, z] of s.polygon) {
+        reach(x, z)
+      }
+    } else {
+      reach(s.position[0], s.position[2])
+    }
+  }
+  if (!Number.isFinite(minX)) return null
+  return { minX, minZ, maxX, maxZ }
+}
+
+// Rigid group slide: shift every participant (and each linked neighbour's
+// shared endpoint) by the same level-frame XZ delta. Y and rotations untouched.
+export function translateGroupPatches(
+  starts: ParticipantStart[],
+  links: LinkedNeighbor[],
+  dx: number,
+  dz: number,
+): GroupPatch[] {
+  const patches: GroupPatch[] = []
+  const shift = ([x, z]: Vec2): Vec2 => [x + dx, z + dz]
+  for (const s of starts) {
+    if (s.kind === 'endpoint') {
+      patches.push([s.id, { start: shift(s.start), end: shift(s.end) }])
+    } else if (s.kind === 'polygon') {
+      const patch: Record<string, unknown> = { polygon: s.polygon.map(shift) }
+      if (s.holes) patch.holes = s.holes.map((hole) => hole.map(shift))
+      patches.push([s.id, patch])
+    } else {
+      patches.push([s.id, { position: [s.position[0] + dx, s.position[1], s.position[2] + dz] }])
+    }
+  }
+  for (const l of links) {
+    patches.push([
+      l.id,
+      {
+        start: l.startLinked ? [l.start[0] + dx, l.start[1] + dz] : l.start,
+        end: l.endLinked ? [l.end[0] + dx, l.end[1] + dz] : l.end,
+      },
+    ])
+  }
+  return patches
+}
+
 // Frozen world matrix of the level group + its inverse. A node's placement
 // (`position` / `start` / `end`) is stored in its parent level's frame, but the
 // gizmos raycast the ground plane in WORLD space. When the building is rotated

package/src/components/editor/handles/handle-arrow.tsx

@@ -12,12 +12,27 @@ import {
   DoubleSide,
   ExtrudeGeometry,
   type Group,
+  type Intersection,
+  Mesh,
+  type Raycaster,
   Shape,
   TorusGeometry,
 } from 'three'
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
+import useEditor from '../../../store/use-editor'
+
+// While a press-drag move is in flight (`placementDragMode`), the move tool
+// owns the pointer and the handle rig rides the moving node — so a handle hit
+// area would sit under the cursor and starve the tool's surface raycast
+// (`wall:move` for openings, `grid:move` for free movers), freezing the drag.
+// Make every handle hit area inert for the duration; the indicator mesh still
+// renders (it's already NO_RAYCAST + depthTest off) so the grip stays visible.
+function hitAreaRaycast(this: Mesh, raycaster: Raycaster, intersects: Intersection[]): void {
+  if (useEditor.getState().placementDragMode) return
+  Mesh.prototype.raycast.call(this, raycaster, intersects)
+}
 
 export const ARROW_SCALE = 0.65
 export const ARROW_COLOR = '#8381ed'
@@ -36,6 +51,13 @@ const CHEVRON_DEPTH = 0.08
 const CHEVRON_BEVEL_THICKNESS = 0.035
 const CHEVRON_BEVEL_SIZE = 0.03
 const CHEVRON_BEVEL_SEGMENTS = 10
+// Slimmer extrude profile matching the legacy wall side handles
+// (`wall-move-side-handles.tsx`) — opt-in via the `thin` prop so the chunkier
+// default is preserved for every other handle that uses the shared chevron.
+const CHEVRON_THIN_DEPTH = 0.045
+const CHEVRON_THIN_BEVEL_THICKNESS = 0.018
+const CHEVRON_THIN_BEVEL_SIZE = 0.02
+const CHEVRON_THIN_BEVEL_SEGMENTS = 8
 const MOVE_CROSS_HALF_LENGTH = 0.36
 const MOVE_CROSS_SHAFT_HALF_WIDTH = 0.03
 const MOVE_CROSS_HEAD_HALF_WIDTH = 0.12
@@ -49,7 +71,7 @@ const ROTATE_HANDLE_HALF_SWEEP = Math.PI / 3
 const ROTATE_RIBBON_HALF_WIDTH = 0.02
 const ROTATE_HEAD_HALF_WIDTH = 0.045
 const TRACKER_CUBE_SIZE = 0.16
-export const CORNER_HEX_RADIUS = 0.16
+export const CORNER_HEX_RADIUS = 0.11
 
 export type HandleArrowShape = 'chevron' | 'cross' | 'curved-arrow' | 'tracker' | 'corner-picker'
 export type HandleArrowInputShape = HandleArrowShape | 'arrow' | 'move-cross'
@@ -75,6 +97,10 @@ export type HandleArrowProps = {
   indicatorRotation?: readonly [number, number, number]
   onPointerEnter?: PointerHandler
   onPointerLeave?: PointerHandler
+  // Extrude the slimmer wall-handle chevron profile (chevron shape only).
+  thin?: boolean
+  // Render the corner-picker disc as a smooth circle instead of a hexagon.
+  round?: boolean
 }
 
 function normalizeHandleArrowShape(shape: HandleArrowInputShape, cursor: Cursor): HandleArrowShape {
@@ -164,8 +190,9 @@ export function createRotateArrowHandleGeometry() {
 
 // Reused chevron+shaft silhouette. The chevron points along +X by default;
 // callers rotate it around Y for Z-axis handles and into a vertical frame for
-// Y-axis handles.
-export function createArrowHandleGeometry() {
+// Y-axis handles. `thin` extrudes the slimmer wall-handle profile.
+export function createArrowHandleGeometry(thin = false) {
+  const depth = thin ? CHEVRON_THIN_DEPTH : CHEVRON_DEPTH
   const shape = new Shape()
   shape.moveTo(CHEVRON_MAX_X, 0)
   shape.lineTo(CHEVRON_NOTCH_X, CHEVRON_HALF_WIDTH)
@@ -176,16 +203,16 @@ export function createArrowHandleGeometry() {
   shape.lineTo(CHEVRON_NOTCH_X, -CHEVRON_HALF_WIDTH)
   shape.lineTo(CHEVRON_MAX_X, 0)
   const geometry = new ExtrudeGeometry(shape, {
-    depth: CHEVRON_DEPTH,
+    depth,
     bevelEnabled: true,
-    bevelThickness: CHEVRON_BEVEL_THICKNESS,
-    bevelSize: CHEVRON_BEVEL_SIZE,
+    bevelThickness: thin ? CHEVRON_THIN_BEVEL_THICKNESS : CHEVRON_BEVEL_THICKNESS,
+    bevelSize: thin ? CHEVRON_THIN_BEVEL_SIZE : CHEVRON_BEVEL_SIZE,
     bevelOffset: 0,
-    bevelSegments: CHEVRON_BEVEL_SEGMENTS,
+    bevelSegments: thin ? CHEVRON_THIN_BEVEL_SEGMENTS : CHEVRON_BEVEL_SEGMENTS,
     curveSegments: 16,
     steps: 1,
   })
-  geometry.translate(0, 0, -CHEVRON_DEPTH / 2)
+  geometry.translate(0, 0, -depth / 2)
   geometry.rotateX(-Math.PI / 2)
   geometry.computeVertexNormals()
   geometry.computeBoundingSphere()
@@ -254,15 +281,27 @@ export function createArrowHitAreaGeometry() {
   return geometry
 }
 
+// The move cross is a plus, not a disk. A disk-shaped hit area fills the four
+// corner gaps between the arms, so a neighbouring node sitting next to the
+// selected node (a lamp by a door, a slab beside a wall) gets swallowed by the
+// invisible grip and can't be picked. Wrap the visible arms instead: two flat
+// arm boxes (length/width + margin) merged into a plus, leaving the corners
+// empty so co-located neighbours stay selectable while the grip stays grabbable.
 function createMoveCrossHitAreaGeometry() {
-  const geometry = new CylinderGeometry(
-    MOVE_CROSS_HALF_LENGTH + HIT_AREA_MARGIN,
-    MOVE_CROSS_HALF_LENGTH + HIT_AREA_MARGIN,
-    HIT_AREA_THICKNESS,
-    32,
-  )
-  geometry.computeBoundingSphere()
-  return geometry
+  const armLength = (MOVE_CROSS_HALF_LENGTH + HIT_AREA_MARGIN) * 2
+  const armWidth = (MOVE_CROSS_HEAD_HALF_WIDTH + HIT_AREA_MARGIN) * 2
+  const armX = new BoxGeometry(armLength, HIT_AREA_THICKNESS, armWidth)
+  const armZ = new BoxGeometry(armWidth, HIT_AREA_THICKNESS, armLength)
+  const merged = mergeGeometries([armX, armZ], false)
+  if (!merged) {
+    armZ.dispose()
+    armX.computeBoundingSphere()
+    return armX
+  }
+  armX.dispose()
+  armZ.dispose()
+  merged.computeBoundingSphere()
+  return merged
 }
 
 export function createRotateArrowHitAreaGeometry() {
@@ -299,8 +338,12 @@ export function createEndpointHitAreaGeometry(radius: number) {
   return geometry
 }
 
-function createHandleArrowGeometry(shape: HandleArrowShape) {
-  if (shape === 'chevron') return createArrowHandleGeometry()
+// Hexagon (6 segments) by default; a smooth circle (32 segments) when `round`.
+const CORNER_DISC_SEGMENTS = 6
+const CORNER_DISC_ROUND_SEGMENTS = 32
+
+function createHandleArrowGeometry(shape: HandleArrowShape, thin = false, round = false) {
+  if (shape === 'chevron') return createArrowHandleGeometry(thin)
   if (shape === 'cross') return createMoveCrossHandleGeometry()
   if (shape === 'curved-arrow') return createRotateArrowHandleGeometry()
   if (shape === 'tracker') {
@@ -308,17 +351,23 @@ function createHandleArrowGeometry(shape: HandleArrowShape) {
     geometry.computeBoundingSphere()
     return geometry
   }
-  const geometry = new CircleGeometry(CORNER_HEX_RADIUS, 6)
+  const geometry = new CircleGeometry(
+    CORNER_HEX_RADIUS,
+    round ? CORNER_DISC_ROUND_SEGMENTS : CORNER_DISC_SEGMENTS,
+  )
   geometry.computeBoundingSphere()
   return geometry
 }
 
-function createHandleArrowHitGeometry(shape: HandleArrowShape) {
+function createHandleArrowHitGeometry(shape: HandleArrowShape, round = false) {
   if (shape === 'chevron') return createArrowHitAreaGeometry()
   if (shape === 'cross') return createMoveCrossHitAreaGeometry()
   if (shape === 'curved-arrow') return createRotateArrowHitAreaGeometry()
   if (shape === 'tracker') return createTrackerHitAreaGeometry()
-  const geometry = new CircleGeometry(CORNER_HEX_RADIUS, 6)
+  const geometry = new CircleGeometry(
+    CORNER_HEX_RADIUS,
+    round ? CORNER_DISC_ROUND_SEGMENTS : CORNER_DISC_SEGMENTS,
+  )
   geometry.computeBoundingSphere()
   return geometry
 }
@@ -382,6 +431,7 @@ export function InvisibleHandleHitArea({
       onPointerDown={onPointerDown}
       onPointerEnter={onPointerEnter}
       onPointerLeave={onPointerLeave}
+      raycast={hitAreaRaycast}
       renderOrder={HIT_AREA_RENDER_ORDER}
       scale={scale}
     />
@@ -443,10 +493,18 @@ export function HandleArrow({
   onPointerDown,
   onPointerEnter,
   onPointerLeave,
+  thin = false,
+  round = false,
 }: HandleArrowProps) {
   const visualShape = normalizeHandleArrowShape(shape, cursor)
-  const geometry = useMemo(() => createHandleArrowGeometry(visualShape), [visualShape])
-  const hitGeometry = useMemo(() => createHandleArrowHitGeometry(visualShape), [visualShape])
+  const geometry = useMemo(
+    () => createHandleArrowGeometry(visualShape, thin, round),
+    [visualShape, thin, round],
+  )
+  const hitGeometry = useMemo(
+    () => createHandleArrowHitGeometry(visualShape, round),
+    [visualShape, round],
+  )
   const indicatorMaterial = useHandleArrowMaterial(visualShape)
   const hitMaterial = useInvisibleHitAreaMaterial()
   const rootRef = useRef<Group>(null)

package/src/components/editor/handles/handle-drag-history.test.ts

@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, test } from 'bun:test'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  runAsSingleSceneHistoryStep,
+  useScene,
+} from '@pascal-app/core'
+import { commitHandleDragPatch } from './handle-drag-history'
+
+type RafFn = (callback: (time: number) => void) => number
+;(globalThis as { requestAnimationFrame?: RafFn }).requestAnimationFrame ??= (callback) => {
+  callback(0)
+  return 0
+}
+;(globalThis as { cancelAnimationFrame?: (id: number) => void }).cancelAnimationFrame ??= () => {}
+
+const NODE_ID = 'shelf_handle-drag-history' as AnyNodeId
+const COMPANION_NODE_ID = 'shelf_handle-drag-history-companion' as AnyNodeId
+
+function shelf(depth: number, id = NODE_ID): AnyNode {
+  return {
+    id,
+    type: 'shelf',
+    object: 'node',
+    parentId: null,
+    visible: true,
+    metadata: {},
+    children: [],
+    position: [0, 0, 0],
+    rotation: [0, 0, 0],
+    width: 1,
+    depth,
+    thickness: 0.04,
+    height: 0.9,
+    style: 'wall-shelf',
+    rows: 1,
+    columns: 1,
+    withBack: false,
+    withSides: true,
+    withBottom: false,
+    bracketStyle: 'minimal',
+  } as AnyNode
+}
+
+describe('commitHandleDragPatch', () => {
+  beforeEach(() => {
+    useScene.setState({ nodes: {}, rootNodeIds: [], dirtyNodes: new Set() } as never)
+    useScene.temporal.getState().clear()
+    useScene.temporal.getState().resume()
+  })
+
+  test('records the final patch as one undo step after preview history is resumed', () => {
+    useScene.getState().createNode(shelf(0.3))
+    const pastCount = useScene.temporal.getState().pastStates.length
+    useScene.temporal.getState().pause()
+
+    commitHandleDragPatch({
+      patch: { depth: 0.7 },
+      resumeHistory: () => useScene.temporal.getState().resume(),
+      runAsSingleHistoryStep: (run) => runAsSingleSceneHistoryStep(useScene, run),
+      commit: (patch) => useScene.getState().updateNode(NODE_ID, patch),
+    })
+
+    expect(useScene.temporal.getState().pastStates).toHaveLength(pastCount + 1)
+    expect((useScene.getState().nodes[NODE_ID] as { depth: number }).depth).toBe(0.7)
+
+    useScene.temporal.getState().undo()
+    expect(useScene.getState().nodes[NODE_ID]).toBeDefined()
+    expect((useScene.getState().nodes[NODE_ID] as { depth: number }).depth).toBe(0.3)
+  })
+
+  test('records a composite multi-node commit as one undo step', () => {
+    useScene.getState().createNode(shelf(0.3))
+    useScene.getState().createNode(shelf(0.4, COMPANION_NODE_ID))
+    useScene.temporal.getState().clear()
+    useScene.temporal.getState().pause()
+
+    commitHandleDragPatch({
+      patch: { selectedDepth: 0.7, companionDepth: 0.2 },
+      resumeHistory: () => useScene.temporal.getState().resume(),
+      runAsSingleHistoryStep: (run) => runAsSingleSceneHistoryStep(useScene, run),
+      commit: ({ selectedDepth, companionDepth }) => {
+        useScene.getState().updateNode(NODE_ID, { depth: selectedDepth })
+        useScene.getState().updateNode(COMPANION_NODE_ID, { depth: companionDepth })
+      },
+    })
+
+    expect(useScene.temporal.getState().pastStates).toHaveLength(1)
+    expect((useScene.getState().nodes[NODE_ID] as { depth: number }).depth).toBe(0.7)
+    expect((useScene.getState().nodes[COMPANION_NODE_ID] as { depth: number }).depth).toBe(0.2)
+
+    useScene.temporal.getState().undo()
+    expect((useScene.getState().nodes[NODE_ID] as { depth: number }).depth).toBe(0.3)
+    expect((useScene.getState().nodes[COMPANION_NODE_ID] as { depth: number }).depth).toBe(0.4)
+  })
+})

package/src/components/editor/handles/handle-drag-history.ts

@@ -0,0 +1,14 @@
+export function commitHandleDragPatch<T>({
+  commit,
+  patch,
+  resumeHistory,
+  runAsSingleHistoryStep,
+}: {
+  commit: (patch: T) => void
+  patch: T
+  resumeHistory: () => void
+  runAsSingleHistoryStep: (run: () => void) => void
+}) {
+  resumeHistory()
+  runAsSingleHistoryStep(() => commit(patch))
+}

package/src/components/editor/handles/preview-overrides.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, mock, test } from 'bun:test'
+import type { AnyNodeId } from '@pascal-app/core'
+import { replacePreviewOverrideIds } from './preview-overrides'
+
+const FIRST_ID = 'cabinet_first' as AnyNodeId
+const SECOND_ID = 'cabinet_second' as AnyNodeId
+const THIRD_ID = 'cabinet_third' as AnyNodeId
+
+describe('replacePreviewOverrideIds', () => {
+  test('clears companion overrides that leave the active preview', () => {
+    const clear = mock(() => {})
+
+    const nextIds = replacePreviewOverrideIds(
+      new Set([FIRST_ID, SECOND_ID]),
+      [
+        [SECOND_ID, { width: 0.7 }],
+        [THIRD_ID, { width: 0.5 }],
+      ],
+      clear,
+    )
+
+    expect(clear).toHaveBeenCalledTimes(1)
+    expect(clear).toHaveBeenCalledWith(FIRST_ID)
+    expect(nextIds).toEqual(new Set([SECOND_ID, THIRD_ID]))
+  })
+})

package/src/components/editor/handles/preview-overrides.ts

@@ -0,0 +1,13 @@
+import type { AnyNode, AnyNodeId } from '@pascal-app/core'
+
+export function replacePreviewOverrideIds(
+  activeIds: ReadonlySet<AnyNodeId>,
+  entries: ReadonlyArray<readonly [AnyNodeId, Partial<AnyNode>]>,
+  clear: (id: AnyNodeId) => void,
+): Set<AnyNodeId> {
+  const nextIds = new Set(entries.map(([id]) => id))
+  for (const id of activeIds) {
+    if (!nextIds.has(id)) clear(id)
+  }
+  return nextIds
+}