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

package/src/components/tools/select/box-select-tool.tsx

@@ -1,14 +1,31 @@
-import { sceneRegistry, type ZoneNode } from '@pascal-app/core'
+import { sceneRegistry, useScene, type ZoneNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useRef } from 'react'
-import { Box3, type Camera, type Object3D, Vector3 } from 'three'
+import {
+  Box3,
+  type Camera,
+  Matrix4,
+  type Object3D,
+  Plane,
+  Raycaster,
+  Vector2,
+  Vector3,
+} from 'three'
 import useEditor from '../../../store/use-editor'
+import useInteractionScope from '../../../store/use-interaction-scope'
 import {
   clearBoxSelectHandled,
   isBoxSelectPointerSuppressed,
   markBoxSelectHandled,
 } from './box-select-state'
+import {
+  convexHull2D,
+  type Point2,
+  polygonsIntersect,
+  rectIntersectsHull,
+  segmentIntersectsPolygon,
+} from './marquee-geometry'
 import { PlaneBoxSelectTool } from './plane-box-select-tool'
 import {
   createScreenRectangleSelectionElement,
@@ -18,14 +35,20 @@ import {
   SCREEN_RECTANGLE_SELECTION_DRAG_THRESHOLD_PX,
   type ScreenRect,
   screenRectFromDomRect,
-  screenRectsIntersect,
   updateScreenRectangleSelectionElement,
 } from './screen-rectangle-selection'
 import { collectSelectableCandidateIds } from './select-candidates'
 
 const tempBox = new Box3()
+const tempChildBox = new Box3()
+const tempInvWorld = new Matrix4()
+const tempRelMatrix = new Matrix4()
 const tempWorldPoint = new Vector3()
 const tempScreenPoint = new Vector3()
+const tempNDC = new Vector2()
+const tempPlane = new Plane()
+const tempRaycaster = new Raycaster()
+const UP = new Vector3(0, 1, 0)
 const boxCorners = [
   new Vector3(),
   new Vector3(),
@@ -58,55 +81,72 @@ function projectWorldPointToScreen(
   ]
 }
 
-function getObjectScreenRect(
+/**
+ * Union bounding box of the object's mesh geometry in the OBJECT's OWN frame
+ * (an oriented box). The world AABB the previous implementation used inflates
+ * around rotated geometry — a diagonal wall's world AABB spans a whole square
+ * — and projecting THAT to a screen AABB inflates again, which made the
+ * marquee select objects visually far from the cursor.
+ */
+function computeLocalBox(object: Object3D): Box3 | null {
+  tempBox.makeEmpty()
+  tempInvWorld.copy(object.matrixWorld).invert()
+  object.traverse((child) => {
+    const mesh = child as {
+      isMesh?: boolean
+      geometry?: { boundingBox: Box3 | null; computeBoundingBox: () => void }
+      matrixWorld: import('three').Matrix4
+    }
+    if (!mesh.isMesh || !mesh.geometry) return
+    if (!mesh.geometry.boundingBox) mesh.geometry.computeBoundingBox()
+    const bounds = mesh.geometry.boundingBox
+    if (!bounds || bounds.isEmpty()) return
+    tempChildBox.copy(bounds)
+    tempRelMatrix.multiplyMatrices(tempInvWorld, mesh.matrixWorld)
+    tempChildBox.applyMatrix4(tempRelMatrix)
+    tempBox.union(tempChildBox)
+  })
+  return tempBox.isEmpty() ? null : tempBox
+}
+
+/** Screen-space convex hull of the object's oriented bounding box. */
+function getObjectScreenHull(
   object: Object3D,
   camera: Camera,
   canvasRect: DOMRect,
-): ScreenRect | null {
+): Point2[] | null {
   object.updateWorldMatrix(true, true)
-  tempBox.setFromObject(object)
+  const localBox = computeLocalBox(object)
 
-  if (tempBox.isEmpty()) {
+  if (!localBox) {
     object.getWorldPosition(tempWorldPoint)
     const projected = projectWorldPointToScreen(tempWorldPoint, camera, canvasRect)
-    if (!projected) return null
-    const [x, y] = projected
-    return { minX: x, minY: y, maxX: x, maxY: y }
+    return projected ? [projected] : null
   }
 
-  boxCorners[0]!.set(tempBox.min.x, tempBox.min.y, tempBox.min.z)
-  boxCorners[1]!.set(tempBox.min.x, tempBox.min.y, tempBox.max.z)
-  boxCorners[2]!.set(tempBox.min.x, tempBox.max.y, tempBox.min.z)
-  boxCorners[3]!.set(tempBox.min.x, tempBox.max.y, tempBox.max.z)
-  boxCorners[4]!.set(tempBox.max.x, tempBox.min.y, tempBox.min.z)
-  boxCorners[5]!.set(tempBox.max.x, tempBox.min.y, tempBox.max.z)
-  boxCorners[6]!.set(tempBox.max.x, tempBox.max.y, tempBox.min.z)
-  boxCorners[7]!.set(tempBox.max.x, tempBox.max.y, tempBox.max.z)
-
-  let minX = Number.POSITIVE_INFINITY
-  let minY = Number.POSITIVE_INFINITY
-  let maxX = Number.NEGATIVE_INFINITY
-  let maxY = Number.NEGATIVE_INFINITY
+  boxCorners[0]!.set(localBox.min.x, localBox.min.y, localBox.min.z)
+  boxCorners[1]!.set(localBox.min.x, localBox.min.y, localBox.max.z)
+  boxCorners[2]!.set(localBox.min.x, localBox.max.y, localBox.min.z)
+  boxCorners[3]!.set(localBox.min.x, localBox.max.y, localBox.max.z)
+  boxCorners[4]!.set(localBox.max.x, localBox.min.y, localBox.min.z)
+  boxCorners[5]!.set(localBox.max.x, localBox.min.y, localBox.max.z)
+  boxCorners[6]!.set(localBox.max.x, localBox.max.y, localBox.min.z)
+  boxCorners[7]!.set(localBox.max.x, localBox.max.y, localBox.max.z)
 
+  const projectedPoints: Point2[] = []
   for (const corner of boxCorners) {
+    corner.applyMatrix4(object.matrixWorld)
     const projected = projectWorldPointToScreen(corner, camera, canvasRect)
-    if (!projected) continue
-    const [x, y] = projected
-    minX = Math.min(minX, x)
-    minY = Math.min(minY, y)
-    maxX = Math.max(maxX, x)
-    maxY = Math.max(maxY, y)
+    if (projected) projectedPoints.push(projected)
   }
 
-  if (minX !== Number.POSITIVE_INFINITY) {
-    return { minX, minY, maxX, maxY }
+  if (projectedPoints.length === 0) {
+    object.getWorldPosition(tempWorldPoint)
+    const projected = projectWorldPointToScreen(tempWorldPoint, camera, canvasRect)
+    return projected ? [projected] : null
   }
 
-  object.getWorldPosition(tempWorldPoint)
-  const projected = projectWorldPointToScreen(tempWorldPoint, camera, canvasRect)
-  if (!projected) return null
-  const [x, y] = projected
-  return { minX: x, minY: y, maxX: x, maxY: y }
+  return convexHull2D(projectedPoints)
 }
 
 function isObjectVisible(object: Object3D): boolean {
@@ -118,6 +158,46 @@ function isObjectVisible(object: Object3D): boolean {
   return true
 }
 
+const isVec2 = (v: unknown): v is [number, number] =>
+  Array.isArray(v) && v.length === 2 && v.every((n) => typeof n === 'number')
+const isVec2Array = (v: unknown): v is [number, number][] =>
+  Array.isArray(v) && v.length > 0 && v.every(isVec2)
+
+/**
+ * The marquee rect projected onto the active level's floor plane, in the
+ * LEVEL frame — a convex quad (perspective keeps rect convexity). Null when
+ * any corner ray misses the plane (camera near the horizon); callers fall
+ * back to the screen-hull test then.
+ */
+function marqueeGroundQuad(rect: ScreenRect, camera: Camera, canvasRect: DOMRect): Point2[] | null {
+  const levelId = useViewer.getState().selection.levelId
+  const levelObject = levelId ? sceneRegistry.nodes.get(levelId) : null
+  if (!levelObject) return null
+  levelObject.updateWorldMatrix(true, false)
+  tempInvWorld.copy(levelObject.matrixWorld).invert()
+  levelObject.getWorldPosition(tempWorldPoint)
+  tempPlane.set(UP, -tempWorldPoint.y)
+
+  const corners: [number, number][] = [
+    [rect.minX, rect.minY],
+    [rect.maxX, rect.minY],
+    [rect.maxX, rect.maxY],
+    [rect.minX, rect.maxY],
+  ]
+  const quad: Point2[] = []
+  for (const [cx, cy] of corners) {
+    tempNDC.set(
+      ((cx - canvasRect.left) / canvasRect.width) * 2 - 1,
+      -((cy - canvasRect.top) / canvasRect.height) * 2 + 1,
+    )
+    tempRaycaster.setFromCamera(tempNDC, camera)
+    if (!tempRaycaster.ray.intersectPlane(tempPlane, tempWorldPoint)) return null
+    tempWorldPoint.applyMatrix4(tempInvWorld)
+    quad.push([tempWorldPoint.x, tempWorldPoint.z])
+  }
+  return quad
+}
+
 function collectNodeIdsInScreenRect(
   rect: ScreenRect,
   camera: Camera,
@@ -126,11 +206,37 @@ function collectNodeIdsInScreenRect(
   const canvasRect = canvas.getBoundingClientRect()
   const result: string[] = []
 
+  // Plan-footprint membership for the data kinds (walls / fences by their
+  // segment, slabs / ceilings / zones by their polygon) — exact under any
+  // rotation, matching the plane-marquee tool's semantics. Kinds whose
+  // placement lives in mesh transforms (items, columns, …) intersect the
+  // marquee with their oriented bbox projected to a screen hull instead.
+  const quad = marqueeGroundQuad(rect, camera, canvasRect)
+  const nodes = useScene.getState().nodes
+
   for (const id of collectSelectableCandidateIds()) {
     const object = sceneRegistry.nodes.get(id)
     if (!object || !isObjectVisible(object)) continue
-    const objectRect = getObjectScreenRect(object, camera, canvasRect)
-    if (objectRect && screenRectsIntersect(rect, objectRect)) {
+
+    if (quad) {
+      const node = nodes[id as keyof typeof nodes] as
+        | { start?: unknown; end?: unknown; polygon?: unknown }
+        | undefined
+      if (node) {
+        const { start, end, polygon } = node
+        if (isVec2(start) && isVec2(end)) {
+          if (segmentIntersectsPolygon(start, end, quad)) result.push(id)
+          continue
+        }
+        if (isVec2Array(polygon)) {
+          if (polygonsIntersect(polygon, quad)) result.push(id)
+          continue
+        }
+      }
+    }
+
+    const hull = getObjectScreenHull(object, camera, canvasRect)
+    if (hull && rectIntersectsHull(rect, hull)) {
       result.push(id)
     }
   }
@@ -139,7 +245,7 @@ function collectNodeIdsInScreenRect(
 }
 
 function commitBoxSelection(ids: string[], event: PointerEvent) {
-  const shouldAppend = event.metaKey || event.ctrlKey
+  const shouldAppend = event.metaKey || event.ctrlKey || event.shiftKey
   const { phase, structureLayer } = useEditor.getState()
   const viewer = useViewer.getState()
 
@@ -191,6 +297,12 @@ const ScreenRectangleSelectTool: React.FC = () => {
   const currentClientXRef = useRef(0)
   const currentClientYRef = useRef(0)
   const spaceDownRef = useRef(false)
+  // rAF throttle for the expensive marquee preview pass. pointermove can fire
+  // several times per animation frame; the per-node AABB projection in
+  // `collectNodeIdsInScreenRect` only needs to run once per frame. We stash the
+  // latest clamped rect and process it inside the rAF callback.
+  const previewRafRef = useRef<number | null>(null)
+  const pendingPreviewRectRef = useRef<ScreenRect | null>(null)
 
   const syncPreviewSelectedIds = useCallback(
     (nextIds: string[]) => {
@@ -206,6 +318,11 @@ const ScreenRectangleSelectTool: React.FC = () => {
     pointerDownRef.current = false
     isDraggingRef.current = false
     pointerIdRef.current = null
+    if (previewRafRef.current !== null) {
+      cancelAnimationFrame(previewRafRef.current)
+      previewRafRef.current = null
+    }
+    pendingPreviewRectRef.current = null
     hideScreenRectangleSelectionElement(elementRef.current)
     syncPreviewSelectedIds([])
 
@@ -213,6 +330,7 @@ const ScreenRectangleSelectTool: React.FC = () => {
       useViewer.getState().setInputDragging(false)
       ownsInputDraggingRef.current = false
     }
+    useInteractionScope.getState().endIf((s) => s.kind === 'box-select')
   }, [syncPreviewSelectedIds])
 
   useEffect(() => {
@@ -263,6 +381,14 @@ const ScreenRectangleSelectTool: React.FC = () => {
   useEffect(() => {
     const canvas = gl.domElement
 
+    const flushPreview = () => {
+      previewRafRef.current = null
+      const rect = pendingPreviewRectRef.current
+      if (!rect) return
+      pendingPreviewRectRef.current = null
+      syncPreviewSelectedIds(collectNodeIdsInScreenRect(rect, camera, canvas))
+    }
+
     const updateDrag = (event: PointerEvent) => {
       if (!pointerDownRef.current) return
       if (pointerIdRef.current !== null && event.pointerId !== pointerIdRef.current) return
@@ -291,6 +417,7 @@ const ScreenRectangleSelectTool: React.FC = () => {
         isDraggingRef.current = true
         ownsInputDraggingRef.current = true
         useViewer.getState().setInputDragging(true)
+        useInteractionScope.getState().begin({ kind: 'box-select' })
         markBoxSelectHandled()
         try {
           canvas.setPointerCapture(event.pointerId)
@@ -311,13 +438,22 @@ const ScreenRectangleSelectTool: React.FC = () => {
         screenRectFromDomRect(canvas.getBoundingClientRect()),
       )
       if (!clampedRect) {
+        if (previewRafRef.current !== null) {
+          cancelAnimationFrame(previewRafRef.current)
+          previewRafRef.current = null
+        }
+        pendingPreviewRectRef.current = null
         hideScreenRectangleSelectionElement(elementRef.current)
         syncPreviewSelectedIds([])
         return
       }
 
       updateScreenRectangleSelectionElement(elementRef.current!, clampedRect)
-      syncPreviewSelectedIds(collectNodeIdsInScreenRect(clampedRect, camera, canvas))
+      // Coalesce the per-node AABB projection to one run per animation frame.
+      pendingPreviewRectRef.current = clampedRect
+      if (previewRafRef.current === null) {
+        previewRafRef.current = requestAnimationFrame(flushPreview)
+      }
     }
 
     const finishDrag = (event: PointerEvent) => {

package/src/components/tools/select/marquee-geometry.test.ts

@@ -0,0 +1,161 @@
+import { describe, expect, test } from 'bun:test'
+import {
+  convexHull2D,
+  type Point2,
+  polygonsIntersect,
+  rectIntersectsHull,
+  type ScreenRect,
+  segmentIntersectsPolygon,
+} from './marquee-geometry'
+
+const rect = (minX: number, minY: number, maxX: number, maxY: number): ScreenRect => ({
+  minX,
+  minY,
+  maxX,
+  maxY,
+})
+
+describe('convexHull2D', () => {
+  test('drops interior points and keeps the hull', () => {
+    const hull = convexHull2D([
+      [0, 0],
+      [4, 0],
+      [4, 4],
+      [0, 4],
+      [2, 2],
+      [1, 3],
+    ])
+    expect(hull).toHaveLength(4)
+    const set = new Set(hull.map((p) => p.join(',')))
+    expect(set).toEqual(new Set(['0,0', '4,0', '4,4', '0,4']))
+  })
+
+  test('passes degenerate inputs through', () => {
+    expect(convexHull2D([])).toEqual([])
+    expect(convexHull2D([[1, 2]])).toEqual([[1, 2]])
+    expect(
+      convexHull2D([
+        [0, 0],
+        [2, 2],
+      ]),
+    ).toHaveLength(2)
+  })
+})
+
+describe('rectIntersectsHull', () => {
+  // The regression case: a thin diagonal wall. Its world AABB spans the full
+  // square, so the old AABB test matched a marquee sitting in the empty
+  // corner; the hull test must not.
+  const diagonalWall: Point2[] = convexHull2D([
+    [0, 0],
+    [1, 0.6],
+    [10, 9.4],
+    [10, 10],
+    [9, 9.4],
+    [0, 0.6],
+  ])
+
+  test('marquee in the empty corner of a diagonal shape does not match', () => {
+    expect(rectIntersectsHull(rect(7, 0, 9, 2), diagonalWall)).toBe(false)
+    expect(rectIntersectsHull(rect(0, 7, 2, 9), diagonalWall)).toBe(false)
+  })
+
+  test('marquee crossing the diagonal matches', () => {
+    expect(rectIntersectsHull(rect(4, 4, 6, 6), diagonalWall)).toBe(true)
+  })
+
+  test('hull vertex inside the marquee matches', () => {
+    expect(rectIntersectsHull(rect(-1, -1, 0.5, 0.5), diagonalWall)).toBe(true)
+  })
+
+  test('marquee fully inside a large hull matches', () => {
+    const square: Point2[] = [
+      [0, 0],
+      [10, 0],
+      [10, 10],
+      [0, 10],
+    ]
+    expect(rectIntersectsHull(rect(4, 4, 5, 5), square)).toBe(true)
+  })
+
+  test('edge-only crossing (no vertices contained either way) matches', () => {
+    // Tall thin rect crossing a wide thin hull like a plus sign.
+    const bar: Point2[] = [
+      [0, 4],
+      [10, 4],
+      [10, 6],
+      [0, 6],
+    ]
+    expect(rectIntersectsHull(rect(4, 0, 6, 10), bar)).toBe(true)
+  })
+
+  test('disjoint shapes do not match', () => {
+    const tri: Point2[] = [
+      [0, 0],
+      [2, 0],
+      [1, 2],
+    ]
+    expect(rectIntersectsHull(rect(5, 5, 7, 7), tri)).toBe(false)
+  })
+
+  test('single projected point matches only when inside the rect', () => {
+    expect(rectIntersectsHull(rect(0, 0, 2, 2), [[1, 1]])).toBe(true)
+    expect(rectIntersectsHull(rect(0, 0, 2, 2), [[3, 3]])).toBe(false)
+  })
+})
+
+describe('segmentIntersectsPolygon', () => {
+  const quad: Point2[] = [
+    [0, 0],
+    [4, 0],
+    [4, 4],
+    [0, 4],
+  ]
+  test('crossing segment matches', () => {
+    expect(segmentIntersectsPolygon([-1, 2], [5, 2], quad)).toBe(true)
+  })
+  test('fully inside matches', () => {
+    expect(segmentIntersectsPolygon([1, 1], [2, 2], quad)).toBe(true)
+  })
+  test('outside segment does not match', () => {
+    expect(segmentIntersectsPolygon([5, 5], [7, 8], quad)).toBe(false)
+  })
+})
+
+describe('polygonsIntersect', () => {
+  const quad: Point2[] = [
+    [0, 0],
+    [4, 0],
+    [4, 4],
+    [0, 4],
+  ]
+  test('overlapping polygons match', () => {
+    expect(
+      polygonsIntersect(quad, [
+        [3, 3],
+        [6, 3],
+        [6, 6],
+        [3, 6],
+      ]),
+    ).toBe(true)
+  })
+  test('containment matches both ways', () => {
+    const inner: Point2[] = [
+      [1, 1],
+      [2, 1],
+      [2, 2],
+    ]
+    expect(polygonsIntersect(quad, inner)).toBe(true)
+    expect(polygonsIntersect(inner, quad)).toBe(true)
+  })
+  test('a rotated diamond beside the quad does not match', () => {
+    expect(
+      polygonsIntersect(quad, [
+        [7, 2],
+        [9, 0],
+        [11, 2],
+        [9, 4],
+      ]),
+    ).toBe(false)
+  })
+})

package/src/components/tools/select/marquee-geometry.ts

@@ -0,0 +1,155 @@
+// Pure 2D geometry for the screen-rect marquee's membership test. The
+// marquee intersects each node's ORIENTED bounding box projected to screen —
+// a convex hull — instead of a screen-space AABB of the world AABB, whose
+// double inflation (world AABB around rotated geometry, then a 2D AABB
+// around its projection) selected objects visually far from the cursor.
+
+export type ScreenRect = {
+  minX: number
+  minY: number
+  maxX: number
+  maxY: number
+}
+
+export type Point2 = [number, number]
+
+function cross(o: Point2, a: Point2, b: Point2): number {
+  return (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0])
+}
+
+/** Andrew monotone-chain convex hull. Returns CCW hull without the closing
+ *  point; degenerate inputs (0–2 points, collinear sets) pass through. */
+export function convexHull2D(points: readonly Point2[]): Point2[] {
+  if (points.length <= 2) return [...points]
+  const sorted = [...points].sort((a, b) => a[0] - b[0] || a[1] - b[1])
+  const lower: Point2[] = []
+  for (const p of sorted) {
+    while (lower.length >= 2 && cross(lower[lower.length - 2]!, lower[lower.length - 1]!, p) <= 0) {
+      lower.pop()
+    }
+    lower.push(p)
+  }
+  const upper: Point2[] = []
+  for (let i = sorted.length - 1; i >= 0; i--) {
+    const p = sorted[i]!
+    while (upper.length >= 2 && cross(upper[upper.length - 2]!, upper[upper.length - 1]!, p) <= 0) {
+      upper.pop()
+    }
+    upper.push(p)
+  }
+  lower.pop()
+  upper.pop()
+  const hull = [...lower, ...upper]
+  return hull.length > 0 ? hull : [sorted[0]!]
+}
+
+function pointInRect(p: Point2, rect: ScreenRect): boolean {
+  return p[0] >= rect.minX && p[0] <= rect.maxX && p[1] >= rect.minY && p[1] <= rect.maxY
+}
+
+/** Ray-crossing point-in-polygon — works for convex and degenerate hulls. */
+function pointInPolygon(p: Point2, polygon: readonly Point2[]): boolean {
+  let inside = false
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const [xi, yi] = polygon[i]!
+    const [xj, yj] = polygon[j]!
+    if (yi > p[1] !== yj > p[1] && p[0] < ((xj - xi) * (p[1] - yi)) / (yj - yi) + xi) {
+      inside = !inside
+    }
+  }
+  return inside
+}
+
+function orientation(a: Point2, b: Point2, c: Point2): number {
+  const v = cross(a, b, c)
+  if (v > 0) return 1
+  if (v < 0) return -1
+  return 0
+}
+
+function onSegment(a: Point2, b: Point2, p: Point2): boolean {
+  return (
+    Math.min(a[0], b[0]) <= p[0] &&
+    p[0] <= Math.max(a[0], b[0]) &&
+    Math.min(a[1], b[1]) <= p[1] &&
+    p[1] <= Math.max(a[1], b[1])
+  )
+}
+
+function segmentsIntersect(a1: Point2, a2: Point2, b1: Point2, b2: Point2): boolean {
+  const o1 = orientation(a1, a2, b1)
+  const o2 = orientation(a1, a2, b2)
+  const o3 = orientation(b1, b2, a1)
+  const o4 = orientation(b1, b2, a2)
+  if (o1 !== o2 && o3 !== o4) return true
+  if (o1 === 0 && onSegment(a1, a2, b1)) return true
+  if (o2 === 0 && onSegment(a1, a2, b2)) return true
+  if (o3 === 0 && onSegment(b1, b2, a1)) return true
+  if (o4 === 0 && onSegment(b1, b2, a2)) return true
+  return false
+}
+
+/** Segment vs polygon (general, possibly concave): endpoint containment or
+ *  any edge crossing. */
+export function segmentIntersectsPolygon(
+  a: Point2,
+  b: Point2,
+  polygon: readonly Point2[],
+): boolean {
+  if (polygon.length === 0) return false
+  if (polygon.length === 1) return false
+  if (polygon.length >= 3 && (pointInPolygon(a, polygon) || pointInPolygon(b, polygon))) return true
+  for (let i = 0; i < polygon.length; i++) {
+    if (segmentsIntersect(a, b, polygon[i]!, polygon[(i + 1) % polygon.length]!)) return true
+  }
+  return false
+}
+
+/** Polygon vs polygon (general): containment either way or any edge crossing. */
+export function polygonsIntersect(a: readonly Point2[], b: readonly Point2[]): boolean {
+  if (a.length === 0 || b.length === 0) return false
+  if (a.length >= 3 && b.some((p) => pointInPolygon(p, a))) return true
+  if (b.length >= 3 && a.some((p) => pointInPolygon(p, b))) return true
+  for (let i = 0; i < a.length; i++) {
+    const a1 = a[i]!
+    const a2 = a[(i + 1) % a.length]!
+    for (let j = 0; j < b.length; j++) {
+      if (segmentsIntersect(a1, a2, b[j]!, b[(j + 1) % b.length]!)) return true
+    }
+  }
+  return false
+}
+
+/**
+ * Does the axis-aligned marquee rect intersect the (convex) hull polygon?
+ * Covers all cases: hull vertex inside the rect, rect fully inside the hull,
+ * and pure edge crossings.
+ */
+export function rectIntersectsHull(rect: ScreenRect, hull: readonly Point2[]): boolean {
+  if (hull.length === 0) return false
+  for (const p of hull) {
+    if (pointInRect(p, rect)) return true
+  }
+  if (hull.length === 1) return false
+  const rectCorners: Point2[] = [
+    [rect.minX, rect.minY],
+    [rect.maxX, rect.minY],
+    [rect.maxX, rect.maxY],
+    [rect.minX, rect.maxY],
+  ]
+  if (hull.length >= 3) {
+    for (const c of rectCorners) {
+      if (pointInPolygon(c, hull)) return true
+    }
+  }
+  for (let i = 0; i < hull.length; i++) {
+    const h1 = hull[i]!
+    const h2 = hull[(i + 1) % hull.length]!
+    for (let j = 0; j < 4; j++) {
+      const r1 = rectCorners[j]!
+      const r2 = rectCorners[(j + 1) % 4]!
+      if (segmentsIntersect(h1, h2, r1, r2)) return true
+    }
+  }
+  return false
+}

package/src/components/tools/select/plane-box-select-tool.tsx

@@ -10,7 +10,6 @@ import {
   type ZoneNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import type { ThreeElements } from '@react-three/fiber'
 import { useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useRef } from 'react'
 import {
@@ -34,12 +33,6 @@ import { CursorSphere } from '../shared/cursor-sphere'
 import { isBoxSelectPointerSuppressed, markBoxSelectHandled } from './box-select-state'
 import { collectSelectableCandidateIds } from './select-candidates'
 
-declare module 'react/jsx-runtime' {
-  namespace JSX {
-    interface IntrinsicElements extends ThreeElements {}
-  }
-}
-
 type Bounds = { minX: number; maxX: number; minZ: number; maxZ: number }
 
 const BOX_SELECT_ACCENT_COLOR = '#818cf8'
@@ -446,7 +439,7 @@ export const PlaneBoxSelectTool: React.FC = () => {
         }
 
         const ids = collectNodeIdsInPlaneBounds(bounds)
-        const shouldAppend = event.metaKey || event.ctrlKey
+        const shouldAppend = event.metaKey || event.ctrlKey || event.shiftKey
         const { phase, structureLayer } = useEditor.getState()
 
         if (phase === 'structure' && structureLayer === 'zones') {

package/src/components/tools/select/select-candidates.ts

@@ -50,7 +50,7 @@ export function collectSelectableCandidateIds(): string[] {
 
   if (!levelId) return []
   const levelNode = nodes[levelId as AnyNodeId] as LevelNode | undefined
-  if (!levelNode || levelNode.type !== 'level') return []
+  if (levelNode?.type !== 'level') return []
 
   if (phase === 'structure' && structureLayer === 'zones') {
     for (const childId of levelNode.children) {