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

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/handle-placement.test.ts

@@ -0,0 +1,111 @@
+import { expect, test } from 'bun:test'
+import { type AnyNode, createSceneApi, type LinearResizeHandle, useScene } from '@pascal-app/core'
+import { Euler, Vector3 } from 'three'
+import { createArrowHandleGeometry } from './handle-arrow'
+import {
+  computeFreezeOffset,
+  resolveLinearHandlePosition,
+  resolveLinearHandleRotation,
+} from './handle-placement'
+
+const scene = createSceneApi(useScene)
+for (const axis of ['x', 'y', 'z'] as const) {
+  test(`${axis} clearance preserves sufficient offsets and keeps even hovered arrow tails clear at different scales`, () => {
+    const index = axis === 'x' ? 0 : axis === 'y' ? 1 : 2
+    const geometry = createArrowHandleGeometry(true)
+    geometry.computeBoundingBox()
+    const tail = geometry.boundingBox!.min.x * 1.12
+    for (const edge of [0.06, 1.2, -0.4]) {
+      const position: [number, number, number] = [0, 0, 0]
+      position[index] = edge + 0.15
+      const descriptor: LinearResizeHandle<null> = {
+        kind: 'linear-resize',
+        axis,
+        anchor: 'center',
+        currentValue: () => 1,
+        apply: () => null,
+        placement: { position: () => position, clearance: { edge: () => edge, distance: 0.4 } },
+      }
+      for (const scale of [0.1, 0.325, 0.65, 1.3, 3]) {
+        const resolved = resolveLinearHandlePosition(descriptor, null, scene, scale)
+        expect(resolved[index] + tail * scale - edge).toBeGreaterThan(0.1 * scale)
+        if (0.4 * scale <= 0.15) expect(resolved).toEqual(position)
+        resolved.forEach((value, i) => {
+          if (i !== index) expect(value).toBe(position[i]!)
+        })
+      }
+      delete descriptor.placement.clearance
+      expect(resolveLinearHandlePosition(descriptor, null, scene, 3)).toBe(position)
+    }
+    geometry.dispose()
+  })
+}
+
+test('array rotations keep sibling handles finite during rotation and resize', () => {
+  const initial = { position: [1, 2, 3], rotation: [0, Math.PI / 2, 0] } as unknown as AnyNode
+  const rotated = { ...initial, rotation: [0, Math.PI, 0] } as unknown as AnyNode
+  expect(computeFreezeOffset(rotated, initial)).toEqual([0, 0, 0])
+  const moved = { ...initial, position: [2, 4, 3] } as unknown as AnyNode
+  const offset = computeFreezeOffset(moved, initial)
+  expect(offset[0]).toBeCloseTo(0)
+  expect(offset[1]).toBe(2)
+  expect(offset[2]).toBeCloseTo(1)
+  expect(
+    computeFreezeOffset(moved, { ...initial, rotation: Math.PI / 2 } as unknown as AnyNode),
+  ).toEqual(offset)
+})
+
+for (const axis of ['x', 'y', 'z'] as const) {
+  test(`${axis} negative direction keeps hovered arrow above its lower-edge clearance`, () => {
+    const index = axis === 'x' ? 0 : axis === 'y' ? 1 : 2
+    const geometry = createArrowHandleGeometry(true)
+    geometry.computeBoundingBox()
+    const tail = -geometry.boundingBox!.min.x * 1.12
+    for (const edge of [-2, 0, 2]) {
+      const position: [number, number, number] = [0, 0, 0]
+      position[index] = edge - 0.15
+      const descriptor: LinearResizeHandle<null> = {
+        kind: 'linear-resize',
+        axis,
+        anchor: 'max',
+        direction: -1,
+        currentValue: () => 1,
+        apply: () => null,
+        placement: { position: () => position, clearance: { edge: () => edge, distance: 0.4 } },
+      }
+      for (const scale of [0.1, 0.325, 0.65, 1.3, 3]) {
+        const resolved = resolveLinearHandlePosition(descriptor, null, scene, scale)
+        expect(edge - (resolved[index] + tail * scale)).toBeGreaterThan(0.1 * scale)
+        if (0.4 * scale <= 0.15) expect(resolved).toEqual(position)
+        const pointing = new Vector3(1, 0, 0)
+          .applyEuler(new Euler(...resolveLinearHandleRotation(descriptor, resolved)))
+          .applyAxisAngle(new Vector3(0, 1, 0), axis === 'z' ? -Math.PI / 2 : 0)
+        expect(pointing.getComponent(index)).toBeCloseTo(-1)
+      }
+    }
+    geometry.dispose()
+  })
+}
+
+test('unspecified direction preserves vertical position heuristic and wall-facing blade', () => {
+  const descriptor: LinearResizeHandle<null> = {
+    kind: 'linear-resize',
+    axis: 'y',
+    anchor: 'min',
+    currentValue: () => 1,
+    apply: () => null,
+    placement: { position: () => [0, 0, 0] },
+  }
+  expect(resolveLinearHandleRotation(descriptor, [0, -1, 0])).toEqual([
+    0,
+    Math.PI / 2,
+    -Math.PI / 2,
+  ])
+  expect(resolveLinearHandleRotation(descriptor, [0, 1, 0])).toEqual([0, Math.PI / 2, Math.PI / 2])
+  expect(
+    resolveLinearHandleRotation({ ...descriptor, axis: 'x', faceNormal: true }, [0, 0, 0]),
+  ).toEqual([Math.PI / 2, 0, 0])
+  expect(
+    resolveLinearHandleRotation({ ...descriptor, axis: 'z', faceNormal: true }, [0, 0, 0]),
+  ).toEqual([0, 0, 0])
+})

package/src/components/editor/handles/handle-placement.ts

@@ -0,0 +1,69 @@
+import type { AnyNode, LinearResizeHandle, RadialResizeHandle, SceneApi } from '@pascal-app/core'
+
+export function resolveLinearHandlePosition<N>(
+  descriptor: LinearResizeHandle<N> | RadialResizeHandle<N>,
+  node: N,
+  scene: SceneApi,
+  baseScale: number,
+): readonly [number, number, number] {
+  const position = descriptor.placement.position(node, scene)
+  const clearance = descriptor.kind === 'linear-resize' ? descriptor.placement.clearance : undefined
+  if (!clearance) return position
+  const index = descriptor.axis === 'x' ? 0 : descriptor.axis === 'y' ? 1 : 2
+  const result: [number, number, number] = [...position]
+  const direction = descriptor.kind === 'linear-resize' ? (descriptor.direction ?? 1) : 1
+  const edge = clearance.edge(node, scene) + direction * clearance.distance * baseScale
+  result[index] = direction === -1 ? Math.min(result[index], edge) : Math.max(result[index], edge)
+  return result
+}
+
+export function resolveLinearHandleRotation<N>(
+  descriptor: LinearResizeHandle<N> | RadialResizeHandle<N>,
+  position: readonly [number, number, number],
+): [number, number, number] {
+  const direction = descriptor.kind === 'linear-resize' ? descriptor.direction : undefined
+  if (descriptor.axis === 'y') {
+    const sign = direction ?? (position[1] < 0 ? -1 : 1)
+    return [0, Math.PI / 2, (sign * Math.PI) / 2]
+  }
+  const faceNormal =
+    descriptor.kind === 'linear-resize' && descriptor.axis === 'x' && descriptor.faceNormal
+  return [faceNormal ? Math.PI / 2 : 0, 0, direction === -1 ? Math.PI : 0]
+}
+
+// Offset, in node-local frame, that compensates for `position` drift on
+// the mesh during an asymmetric resize. Width/length L+R recompute
+// `position` so the anchored edge stays world-fixed — the renderer
+// follows that override, the ride object moves, and every arrow under
+// it would drift along with the mesh center. Subtracting this offset
+// from a non-active arrow's local placement undoes that drift so it
+// stays at its pre-drag world position.
+//
+// Rotation drags don't change `position`, so the offset collapses to
+// zero and non-active arrows naturally rotate with the mesh — which is
+// the desired behaviour (the whole rig rotates as a unit).
+export function computeFreezeOffset(
+  liveNode: AnyNode,
+  preDragNode: AnyNode,
+): [number, number, number] {
+  // Not every node in the union carries a `position` field (sites are the
+  // notable holdout — they don't have handles anyway, but TypeScript still
+  // requires us to discriminate). Guarded access keeps the freeze logic
+  // safe for the few node kinds that lack the field.
+  const liveP = (liveNode as { position?: readonly [number, number, number] }).position ?? [0, 0, 0]
+  const preP = (preDragNode as { position?: readonly [number, number, number] }).position ?? [
+    0, 0, 0,
+  ]
+  const deltaWorldX = liveP[0] - preP[0]
+  const deltaWorldY = liveP[1] - preP[1]
+  const deltaWorldZ = liveP[2] - preP[2]
+  const rotation = (preDragNode as { rotation?: number | readonly number[] }).rotation
+  const rotY = typeof rotation === 'number' ? rotation : (rotation?.[1] ?? 0)
+  // World → node-local for Y-axis rotation by rotY (THREE.Object3D
+  // rotation-y convention): inverse is rotation by -rotY around +Y.
+  const cosR = Math.cos(rotY)
+  const sinR = Math.sin(rotY)
+  const deltaLocalX = cosR * deltaWorldX - sinR * deltaWorldZ
+  const deltaLocalZ = sinR * deltaWorldX + cosR * deltaWorldZ
+  return [deltaLocalX, deltaWorldY, deltaLocalZ]
+}