@pascal-app/editor 1.0.0-beta.5 → 1.0.0

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

@@ -387,12 +387,11 @@ export function rotateGroupSnapshots(
   return { starts: rotatedStarts, links: rotatedLinks }
 }
 
+export type GroupPlanBounds = { minX: number; minZ: number; maxX: number; maxZ: number }
+
 // 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 {
+// `computeGroupBox`, used when meshes aren't mounted yet.
+function participantExtents(starts: ParticipantStart[]): GroupPlanBounds | null {
   let minX = Number.POSITIVE_INFINITY
   let minZ = Number.POSITIVE_INFINITY
   let maxX = Number.NEGATIVE_INFINITY
@@ -419,8 +418,73 @@ export function participantExtents(
   return { minX, minZ, maxX, maxZ }
 }
 
+// The one footprint every group transform measures itself against: the
+// selection's mounted meshes (world box, converted into the level frame) with
+// the participant DATA extents as the fallback when the meshes aren't up yet
+// (Duplicate picks up its clones a frame before their renderers mount). Anchor
+// points alone sit metres inside a wide selection's real footprint, so a
+// gesture that pivots on the data extents orbits a different point than the
+// idle keyboard rotate and the rotate gizmos, which both use the mesh box.
+export function groupPlanBounds(
+  box: Box3 | null,
+  starts: ParticipantStart[],
+  frameInv: Matrix4,
+): GroupPlanBounds | null {
+  if (!box) return participantExtents(starts)
+  const min = box.min.clone().applyMatrix4(frameInv)
+  const max = box.max.clone().applyMatrix4(frameInv)
+  return {
+    minX: Math.min(min.x, max.x),
+    minZ: Math.min(min.z, max.z),
+    maxX: Math.max(min.x, max.x),
+    maxZ: Math.max(min.z, max.z),
+  }
+}
+
+export const planBoundsCenter = (b: GroupPlanBounds): Vec2 => [
+  (b.minX + b.maxX) / 2,
+  (b.minZ + b.maxZ) / 2,
+]
+
+// Re-seed the footprint after a mid-gesture rotation by orbiting the box
+// corners and re-fitting an axis-aligned box. Re-measuring the rotated DATA
+// extents instead would slide the centre off the pivot the snapshots turned
+// around, dragging the alignment anchors away from the group under the cursor.
+export function rotatePlanBounds(
+  b: GroupPlanBounds,
+  center: { x: number; z: number },
+  delta: number,
+): GroupPlanBounds {
+  const cos = Math.cos(delta)
+  const sin = Math.sin(delta)
+  let minX = Number.POSITIVE_INFINITY
+  let minZ = Number.POSITIVE_INFINITY
+  let maxX = Number.NEGATIVE_INFINITY
+  let maxZ = Number.NEGATIVE_INFINITY
+  const corners: Vec2[] = [
+    [b.minX, b.minZ],
+    [b.maxX, b.minZ],
+    [b.maxX, b.maxZ],
+    [b.minX, b.maxZ],
+  ]
+  for (const [x, z] of corners) {
+    const dx = x - center.x
+    const dz = z - center.z
+    const rx = center.x + dx * cos - dz * sin
+    const rz = center.z + dx * sin + dz * cos
+    minX = Math.min(minX, rx)
+    minZ = Math.min(minZ, rz)
+    maxX = Math.max(maxX, rx)
+    maxZ = Math.max(maxZ, rz)
+  }
+  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.
+// shared endpoint) by the same level-frame XZ delta. Y is untouched; the
+// snapshot's rotation rides along because a mid-gesture R/T turns the
+// SNAPSHOTS — dropping it here would republish (and commit) the pre-rotation
+// facing, orbiting the layout while every member keeps its old bearing.
 export function translateGroupPatches(
   starts: ParticipantStart[],
   links: LinkedNeighbor[],
@@ -437,7 +501,10 @@ export function translateGroupPatches(
       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] }])
+      const position: Vec3 = [s.position[0] + dx, s.position[1], s.position[2] + dz]
+      const rotation =
+        s.kind === 'vec3' ? ([s.rotation[0], s.rotation[1], s.rotation[2]] as Vec3) : s.rotation
+      patches.push([s.id, { position, rotation }])
     }
   }
   for (const l of links) {

package/src/components/editor/handles/handle-arrow-raycast.test.ts

@@ -0,0 +1,86 @@
+import { expect, test } from 'bun:test'
+import { _roots, act, createRoot, extend } from '@react-three/fiber'
+import { createElement } from 'react'
+import { BoxGeometry, Mesh, MeshBasicMaterial, Raycaster, Vector3, type WebGLRenderer } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import useEditor from '../../../store/use-editor'
+import { hitAreaRaycast, InvisibleHandleHitArea } from './handle-arrow'
+
+extend({ Mesh })
+
+test('an occluded handle does not sort ahead of a nearer scene body', () => {
+  const geometry = new BoxGeometry(0.5, 0.5, 0.5)
+  const material = new MeshBasicMaterial()
+  const body = new Mesh(geometry, material)
+  body.position.z = 1
+  body.updateMatrixWorld()
+  const handle = new Mesh(geometry, material)
+  handle.position.z = 2
+  handle.raycast = hitAreaRaycast
+  handle.updateMatrixWorld()
+
+  const raycaster = new Raycaster(new Vector3(0, 0, 0), new Vector3(0, 0, 1))
+  const hits = raycaster.intersectObjects([body, handle], false)
+
+  expect(hits[0]?.object).toBe(body)
+  expect(hits.find((hit) => hit.object === handle)?.distance).toBeGreaterThan(
+    hits.find((hit) => hit.object === body)?.distance ?? Number.POSITIVE_INFINITY,
+  )
+
+  geometry.dispose()
+  material.dispose()
+})
+
+test('mounted handles disable synchronously during placement drags and restore after release', async () => {
+  const previousDragMode = useEditor.getState().placementDragMode
+  const actGlobal = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+  const previousAct = actGlobal.IS_REACT_ACT_ENVIRONMENT
+  actGlobal.IS_REACT_ACT_ENVIRONMENT = true
+  const canvas = new EventTarget() as HTMLCanvasElement
+  const root = createRoot(canvas)
+  const geometry = new BoxGeometry(1, 1, 1)
+  const material = new MeshBasicNodeMaterial()
+  try {
+    useEditor.setState({ placementDragMode: true })
+    await root.configure({
+      gl: { render() {}, setSize() {}, setPixelRatio() {} } as unknown as WebGLRenderer,
+      frameloop: 'never',
+      dpr: 1,
+      size: { width: 100, height: 100, top: 0, left: 0 },
+    })
+    const render = (scale: number) =>
+      createElement(InvisibleHandleHitArea, {
+        geometry,
+        material,
+        scale,
+        onPointerDown() {},
+        onPointerEnter() {},
+        onPointerLeave() {},
+      })
+    await act(async () => root.render(render(1)))
+    const scene = _roots.get(canvas)!.store.getState().scene
+    const handle = scene.children[0] as Mesh
+    scene.updateMatrixWorld(true)
+    const raycaster = new Raycaster(new Vector3(0, 0, 2), new Vector3(0, 0, -1))
+    raycaster.layers.enableAll()
+    expect(raycaster.intersectObject(handle)).toHaveLength(0)
+    useEditor.setState({ placementDragMode: false })
+    expect(handle.raycast).toBe(hitAreaRaycast)
+    expect(raycaster.intersectObject(handle).length).toBeGreaterThan(0)
+    useEditor.setState({ placementDragMode: true })
+    expect(raycaster.intersectObject(handle)).toHaveLength(0)
+    await act(async () => root.render(render(2)))
+    expect(raycaster.intersectObject(handle)).toHaveLength(0)
+    await act(async () => root.render(null))
+    const detachedRaycast = handle.raycast
+    useEditor.setState({ placementDragMode: false })
+    expect(handle.raycast).toBe(detachedRaycast)
+  } finally {
+    await act(async () => root.render(null))
+    _roots.delete(canvas)
+    geometry.dispose()
+    material.dispose()
+    useEditor.setState({ placementDragMode: previousDragMode })
+    actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
+  }
+})

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

@@ -21,6 +21,7 @@ import {
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
+import { EDITOR_HANDLE_HIT_AREA_USER_DATA_KEY } from '../../../lib/direct-manipulation'
 import useEditor from '../../../store/use-editor'
 
 // While a press-drag move is in flight (`placementDragMode`), the move tool
@@ -29,7 +30,7 @@ import useEditor from '../../../store/use-editor'
 // (`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 {
+export function hitAreaRaycast(this: Mesh, raycaster: Raycaster, intersects: Intersection[]): void {
   if (useEditor.getState().placementDragMode) return
   Mesh.prototype.raycast.call(this, raycaster, intersects)
 }
@@ -66,6 +67,12 @@ const MOVE_CROSS_DEPTH = 0.06
 const MOVE_CROSS_BEVEL_THICKNESS = 0.018
 const MOVE_CROSS_BEVEL_SIZE = 0.012
 const MOVE_CROSS_BEVEL_SEGMENTS = 6
+const PLUS_HALF_LENGTH = 0.18
+const PLUS_HALF_WIDTH = 0.045
+const PLUS_DEPTH = 0.06
+const PLUS_BEVEL_THICKNESS = 0.018
+const PLUS_BEVEL_SIZE = 0.012
+const PLUS_BEVEL_SEGMENTS = 6
 const ROTATE_HANDLE_RADIUS = 0.2
 const ROTATE_HANDLE_HALF_SWEEP = Math.PI / 3
 const ROTATE_RIBBON_HALF_WIDTH = 0.02
@@ -73,7 +80,13 @@ const ROTATE_HEAD_HALF_WIDTH = 0.045
 const TRACKER_CUBE_SIZE = 0.16
 export const CORNER_HEX_RADIUS = 0.11
 
-export type HandleArrowShape = 'chevron' | 'cross' | 'curved-arrow' | 'tracker' | 'corner-picker'
+export type HandleArrowShape =
+  | 'chevron'
+  | 'cross'
+  | 'plus'
+  | 'curved-arrow'
+  | 'tracker'
+  | 'corner-picker'
 export type HandleArrowInputShape = HandleArrowShape | 'arrow' | 'move-cross'
 
 export type HandleArrowPlacement = {
@@ -304,6 +317,54 @@ function createMoveCrossHitAreaGeometry() {
   return merged
 }
 
+function createPlusHandleGeometry() {
+  const shape = new Shape()
+  shape.moveTo(-PLUS_HALF_WIDTH, PLUS_HALF_LENGTH)
+  shape.lineTo(PLUS_HALF_WIDTH, PLUS_HALF_LENGTH)
+  shape.lineTo(PLUS_HALF_WIDTH, PLUS_HALF_WIDTH)
+  shape.lineTo(PLUS_HALF_LENGTH, PLUS_HALF_WIDTH)
+  shape.lineTo(PLUS_HALF_LENGTH, -PLUS_HALF_WIDTH)
+  shape.lineTo(PLUS_HALF_WIDTH, -PLUS_HALF_WIDTH)
+  shape.lineTo(PLUS_HALF_WIDTH, -PLUS_HALF_LENGTH)
+  shape.lineTo(-PLUS_HALF_WIDTH, -PLUS_HALF_LENGTH)
+  shape.lineTo(-PLUS_HALF_WIDTH, -PLUS_HALF_WIDTH)
+  shape.lineTo(-PLUS_HALF_LENGTH, -PLUS_HALF_WIDTH)
+  shape.lineTo(-PLUS_HALF_LENGTH, PLUS_HALF_WIDTH)
+  shape.lineTo(-PLUS_HALF_WIDTH, PLUS_HALF_WIDTH)
+  shape.closePath()
+  const geometry = new ExtrudeGeometry(shape, {
+    depth: PLUS_DEPTH,
+    bevelEnabled: true,
+    bevelThickness: PLUS_BEVEL_THICKNESS,
+    bevelSize: PLUS_BEVEL_SIZE,
+    bevelOffset: 0,
+    bevelSegments: PLUS_BEVEL_SEGMENTS,
+    curveSegments: 8,
+    steps: 1,
+  })
+  geometry.translate(0, 0, -PLUS_DEPTH / 2)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
+
+function createPlusHitAreaGeometry() {
+  const length = (PLUS_HALF_LENGTH + HIT_AREA_MARGIN) * 2
+  const width = (PLUS_HALF_WIDTH + HIT_AREA_MARGIN) * 2
+  const horizontal = new BoxGeometry(length, width, HIT_AREA_THICKNESS)
+  const vertical = new BoxGeometry(width, length, HIT_AREA_THICKNESS)
+  const merged = mergeGeometries([horizontal, vertical], false)
+  if (!merged) {
+    vertical.dispose()
+    horizontal.computeBoundingSphere()
+    return horizontal
+  }
+  horizontal.dispose()
+  vertical.dispose()
+  merged.computeBoundingSphere()
+  return merged
+}
+
 export function createRotateArrowHitAreaGeometry() {
   const halfSweep = ROTATE_HANDLE_HALF_SWEEP + HIT_AREA_MARGIN / ROTATE_HANDLE_RADIUS
   const geometry = new TorusGeometry(
@@ -345,6 +406,7 @@ 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 === 'plus') return createPlusHandleGeometry()
   if (shape === 'curved-arrow') return createRotateArrowHandleGeometry()
   if (shape === 'tracker') {
     const geometry = new BoxGeometry(TRACKER_CUBE_SIZE, TRACKER_CUBE_SIZE, TRACKER_CUBE_SIZE)
@@ -362,6 +424,7 @@ function createHandleArrowGeometry(shape: HandleArrowShape, thin = false, round
 function createHandleArrowHitGeometry(shape: HandleArrowShape, round = false) {
   if (shape === 'chevron') return createArrowHitAreaGeometry()
   if (shape === 'cross') return createMoveCrossHitAreaGeometry()
+  if (shape === 'plus') return createPlusHitAreaGeometry()
   if (shape === 'curved-arrow') return createRotateArrowHitAreaGeometry()
   if (shape === 'tracker') return createTrackerHitAreaGeometry()
   const geometry = new CircleGeometry(
@@ -373,7 +436,29 @@ function createHandleArrowHitGeometry(shape: HandleArrowShape, round = false) {
 }
 
 let sharedHitAreaMaterial: MeshBasicNodeMaterial | null = null
-let sharedHitAreaMaterialRefs = 0
+const sharedHandleGeometries = new Map<string, BufferGeometry>()
+const sharedHandleHitGeometries = new Map<string, BufferGeometry>()
+const sharedHandleMaterials = new Map<string, MeshBasicNodeMaterial>()
+
+function sharedHandleGeometry(shape: HandleArrowShape, thin: boolean, round: boolean) {
+  const key = `${shape}:${thin}:${round}`
+  let geometry = sharedHandleGeometries.get(key)
+  if (!geometry) {
+    geometry = createHandleArrowGeometry(shape, thin, round)
+    sharedHandleGeometries.set(key, geometry)
+  }
+  return geometry
+}
+
+function sharedHandleHitGeometry(shape: HandleArrowShape, round: boolean) {
+  const key = `${shape}:${round}`
+  let geometry = sharedHandleHitGeometries.get(key)
+  if (!geometry) {
+    geometry = createHandleArrowHitGeometry(shape, round)
+    sharedHandleHitGeometries.set(key, geometry)
+  }
+  return geometry
+}
 
 function createInvisibleHitAreaMaterial() {
   return new MeshBasicNodeMaterial({
@@ -388,23 +473,8 @@ function createInvisibleHitAreaMaterial() {
 }
 
 export function useInvisibleHitAreaMaterial(): MeshBasicNodeMaterial {
-  const materialRef = useRef<MeshBasicNodeMaterial | null>(null)
-  if (!materialRef.current) {
-    sharedHitAreaMaterial ??= createInvisibleHitAreaMaterial()
-    materialRef.current = sharedHitAreaMaterial
-  }
-  useEffect(() => {
-    sharedHitAreaMaterialRefs += 1
-    return () => {
-      sharedHitAreaMaterialRefs -= 1
-      if (sharedHitAreaMaterialRefs <= 0 && sharedHitAreaMaterial) {
-        sharedHitAreaMaterial.dispose()
-        sharedHitAreaMaterial = null
-        sharedHitAreaMaterialRefs = 0
-      }
-    }
-  }, [])
-  return materialRef.current
+  sharedHitAreaMaterial ??= createInvisibleHitAreaMaterial()
+  return sharedHitAreaMaterial
 }
 
 export function InvisibleHandleHitArea({
@@ -434,6 +504,7 @@ export function InvisibleHandleHitArea({
       raycast={hitAreaRaycast}
       renderOrder={HIT_AREA_RENDER_ORDER}
       scale={scale}
+      userData={{ [EDITOR_HANDLE_HIT_AREA_USER_DATA_KEY]: true }}
     />
   )
 }
@@ -461,19 +532,21 @@ export function useArrowMaterial(): MeshBasicNodeMaterial {
   )
 }
 
-function useHandleArrowMaterial(shape: HandleArrowShape): MeshBasicNodeMaterial {
-  return useMemo(
-    () =>
-      new MeshBasicNodeMaterial({
-        color: new Color(ARROW_COLOR),
-        side: DoubleSide,
-        transparent: true,
-        opacity: shape === 'corner-picker' ? 0.95 : 1,
-        depthTest: false,
-        depthWrite: shape !== 'corner-picker',
-      }),
-    [shape],
-  )
+function useHandleArrowMaterial(shape: HandleArrowShape, hover: boolean): MeshBasicNodeMaterial {
+  const key = `${shape}:${hover}`
+  let material = sharedHandleMaterials.get(key)
+  if (!material) {
+    material = new MeshBasicNodeMaterial({
+      color: new Color(hover ? ARROW_HOVER_COLOR : ARROW_COLOR),
+      side: DoubleSide,
+      transparent: true,
+      opacity: shape === 'corner-picker' ? 0.95 : 1,
+      depthTest: false,
+      depthWrite: shape !== 'corner-picker',
+    })
+    sharedHandleMaterials.set(key, material)
+  }
+  return material
 }
 
 function indicatorRenderOrder(shape: HandleArrowShape) {
@@ -497,15 +570,9 @@ export function HandleArrow({
   round = false,
 }: HandleArrowProps) {
   const visualShape = normalizeHandleArrowShape(shape, cursor)
-  const geometry = useMemo(
-    () => createHandleArrowGeometry(visualShape, thin, round),
-    [visualShape, thin, round],
-  )
-  const hitGeometry = useMemo(
-    () => createHandleArrowHitGeometry(visualShape, round),
-    [visualShape, round],
-  )
-  const indicatorMaterial = useHandleArrowMaterial(visualShape)
+  const geometry = sharedHandleGeometry(visualShape, thin, round)
+  const hitGeometry = sharedHandleHitGeometry(visualShape, round)
+  const indicatorMaterial = useHandleArrowMaterial(visualShape, hover)
   const hitMaterial = useInvisibleHitAreaMaterial()
   const rootRef = useRef<Group>(null)
   const rotation: [number, number, number] = placement.rotation
@@ -517,9 +584,6 @@ export function HandleArrow({
   const scale = (hover ? hoverScale : 1) * placement.baseScale
   const hitScale = visualShape === 'corner-picker' ? scale : placement.baseScale
 
-  useEffect(() => {
-    indicatorMaterial.color.set(hover ? ARROW_HOVER_COLOR : ARROW_COLOR)
-  }, [indicatorMaterial, hover])
   useEffect(() => {
     const hideForCapture = () => {
       if (rootRef.current) rootRef.current.visible = false
@@ -534,9 +598,6 @@ export function HandleArrow({
       emitter.off('thumbnail:after-capture', restoreAfterCapture)
     }
   }, [])
-  useEffect(() => () => geometry.dispose(), [geometry])
-  useEffect(() => () => hitGeometry.dispose(), [hitGeometry])
-  useEffect(() => () => indicatorMaterial.dispose(), [indicatorMaterial])
 
   const handleEnter: PointerHandler = (event) => {
     event.stopPropagation()

package/src/components/editor/handles/linear-resize-drag.ts

@@ -0,0 +1,67 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type HandleDragModifiers,
+  type LinearResizeHandle,
+  type SceneApi,
+  useLiveNodeOverrides,
+  useScene,
+} from '@pascal-app/core'
+import { replacePreviewOverrideIds } from './preview-overrides'
+
+export function createLinearResizeDragBinding({
+  descriptor,
+  initialNode,
+  nodeId,
+  sceneApi,
+  initialModifiers,
+}: {
+  descriptor: LinearResizeHandle<AnyNode>
+  initialNode: AnyNode
+  nodeId: AnyNodeId
+  sceneApi: SceneApi
+  initialModifiers: HandleDragModifiers
+}) {
+  const overrideId = descriptor.overrideTarget?.(initialNode, sceneApi) ?? nodeId
+  let lastModifiers = initialModifiers
+  let previewOverrideIds = new Set<AnyNodeId>()
+
+  return {
+    overrideId,
+    commit: descriptor.commit
+      ? (patch: Partial<AnyNode>) =>
+          descriptor.commit?.(initialNode, patch, sceneApi, lastModifiers)
+      : undefined,
+    apply(next: number, modifiers: HandleDragModifiers): Partial<AnyNode> {
+      lastModifiers = modifiers
+      const patch = descriptor.apply(initialNode, next, sceneApi, modifiers) as Partial<AnyNode>
+      const previewEntries = descriptor.previewOverrides?.(initialNode, next, sceneApi, modifiers)
+      if (!previewEntries) return patch
+
+      previewOverrideIds = replacePreviewOverrideIds(
+        previewOverrideIds,
+        previewEntries,
+        (previewId) => {
+          useLiveNodeOverrides.getState().clear(previewId)
+          useScene.getState().markDirty(previewId)
+        },
+      )
+      useLiveNodeOverrides
+        .getState()
+        .setMany(
+          previewEntries.map(([id, previewPatch]) => [id, previewPatch as Record<string, unknown>]),
+        )
+      for (const [previewId] of previewEntries) {
+        useScene.getState().markDirty(previewId)
+      }
+      return patch
+    },
+    clearPreview(): void {
+      for (const previewId of previewOverrideIds) {
+        useLiveNodeOverrides.getState().clear(previewId)
+        useScene.getState().markDirty(previewId)
+      }
+      previewOverrideIds = new Set()
+    },
+  }
+}

package/src/components/editor/handles/resize-snap.test.ts

@@ -49,4 +49,50 @@ describe('resolveResizeSnapValue', () => {
     ).toBe(0.56)
     expect(magneticSnap).not.toHaveBeenCalled()
   })
+
+  it('applies a structural connection snap independently of the active mode', () => {
+    const connectionSnap = mock(() => 0.6)
+
+    expect(
+      resolveResizeSnapValue({
+        rawValue: 0.59,
+        gridSnapEnabled: false,
+        gridSnapActive: false,
+        gridSnapStep: 0.1,
+        magneticSnapActive: false,
+        connectionSnap,
+      }),
+    ).toBe(0.6)
+    expect(connectionSnap).toHaveBeenCalledWith(0.59)
+  })
+
+  it('bypasses a structural connection snap while force-moving', () => {
+    const connectionSnap = mock(() => 0.6)
+
+    expect(
+      resolveResizeSnapValue({
+        rawValue: 0.59,
+        gridSnapEnabled: false,
+        gridSnapActive: false,
+        gridSnapStep: 0.1,
+        magneticSnapActive: false,
+        connectionSnapActive: false,
+        connectionSnap,
+      }),
+    ).toBe(0.59)
+    expect(connectionSnap).not.toHaveBeenCalled()
+  })
+
+  it('keeps the last valid value when pointer projection is non-finite', () => {
+    expect(
+      resolveResizeSnapValue({
+        rawValue: Number.NaN,
+        fallbackValue: 12.3,
+        gridSnapEnabled: false,
+        gridSnapActive: false,
+        gridSnapStep: 0.5,
+        magneticSnapActive: false,
+      }),
+    ).toBe(12.3)
+  })
 })

package/src/components/editor/handles/resize-snap.ts

@@ -2,22 +2,31 @@ import { snapScalar } from '@pascal-app/core'
 
 export function resolveResizeSnapValue({
   rawValue,
+  fallbackValue = rawValue,
   gridSnapEnabled,
   gridSnapActive,
   gridSnapStep,
   magneticSnapActive,
   magneticSnap,
+  connectionSnapActive = true,
+  connectionSnap,
 }: {
   rawValue: number
+  fallbackValue?: number
   gridSnapEnabled: boolean
   gridSnapActive: boolean
   gridSnapStep: number
   magneticSnapActive: boolean
   magneticSnap?: (value: number) => number
+  connectionSnapActive?: boolean
+  connectionSnap?: (value: number) => number
 }): number {
+  if (!Number.isFinite(rawValue)) return fallbackValue
   const gridValue =
     gridSnapEnabled && gridSnapActive && gridSnapStep > 0
       ? snapScalar(rawValue, gridSnapStep)
       : rawValue
-  return magneticSnapActive && magneticSnap ? magneticSnap(gridValue) : gridValue
+  const modeValue = magneticSnapActive && magneticSnap ? magneticSnap(gridValue) : gridValue
+  const resolved = connectionSnapActive && connectionSnap ? connectionSnap(modeValue) : modeValue
+  return Number.isFinite(resolved) ? resolved : fallbackValue
 }

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

@@ -5,6 +5,7 @@ import {
   type AnyNodeId,
   type Cursor,
   createSceneApi,
+  type HandleDragModifiers,
   runAsSingleSceneHistoryStep,
   useLiveNodeOverrides,
   useScene,
@@ -46,6 +47,7 @@ export type HandleDragStartContext = {
 
 export type HandleDragMoveContext = {
   event: PointerEvent
+  modifiers: HandleDragModifiers
   getPointerRay: GetPointerRay
   intersectPlane: IntersectPlane
 }
@@ -177,6 +179,7 @@ export function useHandleDrag(args: UseHandleDragArgs) {
 
     let lastPatch: Partial<AnyNode> | null = null
     let historyPaused = true
+    let altKey = event.nativeEvent.altKey
 
     const resumeHistory = () => {
       if (!historyPaused) return
@@ -185,7 +188,12 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     }
 
     const onMove = (moveEvent: PointerEvent) => {
-      const patch = session.move({ event: moveEvent, getPointerRay, intersectPlane })
+      const patch = session.move({
+        event: moveEvent,
+        modifiers: { altKey },
+        getPointerRay,
+        intersectPlane,
+      })
       if (!patch) return
       lastPatch = patch
       useLiveNodeOverrides.getState().set(overrideId, patch as Record<string, unknown>)
@@ -199,6 +207,7 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       window.removeEventListener('pointerup', onUp)
       window.removeEventListener('pointercancel', onCancel)
       window.removeEventListener('keydown', onKeyDown, true)
+      window.removeEventListener('keyup', onKeyUp, true)
       if (document.body.style.cursor === cursor) {
         document.body.style.cursor = ''
       }
@@ -240,17 +249,25 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     // Escape / ⌘Z abort the drag — capture phase so they win over the global
     // use-keyboard arms (⌘Z must never history-jump under a live pointer).
     const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Alt') {
+        altKey = true
+        return
+      }
       if (e.key !== 'Escape' && !isHistoryShortcut(e)) return
       e.preventDefault()
       e.stopPropagation()
       swallowNextClick()
       onCancel()
     }
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.key === 'Alt') altKey = false
+    }
 
     dragCleanupRef.current = onCancel
     window.addEventListener('pointermove', onMove)
     window.addEventListener('pointerup', onUp)
     window.addEventListener('pointercancel', onCancel)
     window.addEventListener('keydown', onKeyDown, true)
+    window.addEventListener('keyup', onKeyUp, true)
   }
 }