fix(editor): harden editor interactions and WebGPU rendering

Fix editor bug sweep regressions, WebGPU CSG/material crashes, Shift snap bypass behavior, arrow handle drag projection, and the wall preview null guard covered by the Sentry follow-up PRs.

packages/nodes/src/slab/boundary-editor.tsx

@@ -73,6 +73,7 @@ export const SlabBoundaryEditor: React.FC<{ slabId: SlabNode['id'] }> = ({ slabI
         levelId: slabLevelId,
         excludeId: slabId,
         altKey: context.nativeEvent?.altKey === true,
+        shiftKey: context.nativeEvent?.shiftKey === true,
       }).point,
     [slabId, slabLevelId],
   )

packages/nodes/src/slab/definition.ts

@@ -166,7 +166,7 @@ export const slabDefinition: NodeDefinition<typeof SlabNode> = {
   handles: slabHandles,
 
   // Stage D: kind-owned placement tool. Multi-click polygon drawing
-  // with axis/45° snap (Shift to defeat).
+  // with 15° angle snap (Shift to defeat).
   tool: () => import('./tool'),
 
   // Stage D — all four slab drag-affordances live in this folder.

packages/nodes/src/slab/floorplan-affordances.ts

@@ -37,6 +37,7 @@ const slabSnapOptions = {
       excludeId: node.id,
       nodes: sceneNodes,
       altKey: modifiers.altKey,
+      shiftKey: modifiers.shiftKey,
     }).point
   },
 }

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

@@ -167,14 +167,17 @@ export const MoveSlabTool: React.FC<{ node: SlabNode }> = ({ node }) => {
     const onGridMove = (event: GridEvent) => {
       if (isFloorplanSourcedEvent(event)) return
       const gridStep = getSegmentGridStep()
+      const bypassSnap = event.nativeEvent?.shiftKey === true
       const [localX, localZ] = snapFenceDraftPoint({
         point: [event.localPosition[0], event.localPosition[2]],
         walls: levelWalls,
         fences: levelFences,
+        bypassSnap,
         gridSnap: (p) => snapBuildingLocalToWorldGrid(p, gridStep),
       })
 
       if (
+        !bypassSnap &&
         previousGridPosRef.current &&
         (localX !== previousGridPosRef.current[0] || localZ !== previousGridPosRef.current[1])
       ) {
@@ -190,8 +193,8 @@ export const MoveSlabTool: React.FC<{ node: SlabNode }> = ({ node }) => {
 
       // Figma-style alignment snap: align the slab's translated polygon
       // vertices to other objects' anchors; fold the snap into the delta and
-      // publish a guide. Alt bypasses.
-      const bypass = event.nativeEvent?.altKey === true
+      // publish a guide. Alt bypasses alignment; Shift bypasses all snap.
+      const bypass = event.nativeEvent?.altKey === true || bypassSnap
       if (!bypass && alignmentCandidates.length > 0) {
         const result = resolveAlignmentForActiveBuilding({
           moving: polygonAnchors(slabId, translatePolygon(originalPolygon, deltaX, deltaZ)),

packages/nodes/src/slab/tool.tsx

@@ -1,6 +1,13 @@
 'use client'
 
-import { emitter, type GridEvent, type LevelNode, useScene } from '@pascal-app/core'
+import {
+  DEFAULT_ANGLE_STEP,
+  emitter,
+  type GridEvent,
+  type LevelNode,
+  snapPointAlongAngleRay,
+  useScene,
+} from '@pascal-app/core'
 import {
   CursorSphere,
   clearSlabSnapFeedback,
@@ -20,7 +27,7 @@ import { SlabNode } from './schema'
  *
  * Multi-click polygon drawing: each click adds a vertex; clicking near
  * the first vertex (or double-clicking) closes the polygon and creates
- * the slab. Shift-modifier defeats the axis/45° snap during drag.
+ * the slab. Shift-modifier defeats the 15° angle snap during drag.
  *
  * Not a `DragAction` — same reasoning as `tool.tsx` for fence: this is
  * a stateful sequence of grid:click events with preview state, not a
@@ -29,28 +36,6 @@ import { SlabNode } from './schema'
 
 const Y_OFFSET = 0.02
 
-function calculateSnapPoint(
-  lastPoint: [number, number],
-  currentPoint: [number, number],
-): [number, number] {
-  const [x1, y1] = lastPoint
-  const [x, y] = currentPoint
-  const dx = x - x1
-  const dy = y - y1
-  const absDx = Math.abs(dx)
-  const absDy = Math.abs(dy)
-  const horizontalDist = absDy
-  const verticalDist = absDx
-  const diagonalDist = Math.abs(absDx - absDy)
-  const minDist = Math.min(horizontalDist, verticalDist, diagonalDist)
-  if (minDist === diagonalDist) {
-    const diagonalLength = Math.min(absDx, absDy)
-    return [x1 + Math.sign(dx) * diagonalLength, y1 + Math.sign(dy) * diagonalLength]
-  }
-  if (minDist === horizontalDist) return [x, y1]
-  return [x1, y]
-}
-
 function commitSlabDrawing(levelId: LevelNode['id'], points: Array<[number, number]>): string {
   const { createNode, nodes } = useScene.getState()
   const slabCount = Object.values(nodes).filter((n) => n.type === 'slab').length
@@ -90,24 +75,36 @@ export const SlabTool: React.FC = () => {
     const onGridMove = (event: GridEvent) => {
       if (!cursorRef.current) return
       const rawPoint: [number, number] = [event.localPosition[0], event.localPosition[2]]
+      const bypassSnap = shiftPressed.current || event.nativeEvent?.shiftKey === true
       const gridX = Math.round(rawPoint[0] * 2) / 2
       const gridZ = Math.round(rawPoint[1] * 2) / 2
-      const gridPosition: [number, number] = [gridX, gridZ]
+      const gridPosition: [number, number] = bypassSnap ? rawPoint : [gridX, gridZ]
       setCursorPosition(gridPosition)
       setLevelY(event.localPosition[1])
       const lastPoint = points[points.length - 1]
-      const orthoPoint =
-        shiftPressed.current || !lastPoint
+      // 15° angle snap from the raw cursor (matching the 2D floorplan
+      // pipeline) with the distance snapped along the ray to the grid step.
+      const orthoPoint: [number, number] =
+        bypassSnap || !lastPoint
           ? gridPosition
-          : calculateSnapPoint(lastPoint, gridPosition)
+          : [
+              ...snapPointAlongAngleRay(
+                lastPoint,
+                rawPoint,
+                DEFAULT_ANGLE_STEP,
+                useEditor.getState().gridSnapStep,
+              ),
+            ]
       const displayPoint = resolveSlabPlanPointSnap({
         rawPoint,
         fallbackPoint: orthoPoint,
         levelId: currentLevelId,
         altKey: event.nativeEvent?.altKey === true,
+        shiftKey: bypassSnap,
       }).point
       setSnappedCursorPosition(displayPoint)
       if (
+        !bypassSnap &&
         points.length > 0 &&
         previousSnappedPointRef.current &&
         (displayPoint[0] !== previousSnappedPointRef.current[0] ||
@@ -163,8 +160,12 @@ export const SlabTool: React.FC = () => {
     const onKeyUp = (e: KeyboardEvent) => {
       if (e.key === 'Shift') shiftPressed.current = false
     }
+    const onWindowBlur = () => {
+      shiftPressed.current = false
+    }
     document.addEventListener('keydown', onKeyDown)
     document.addEventListener('keyup', onKeyUp)
+    window.addEventListener('blur', onWindowBlur)
 
     emitter.on('grid:move', onGridMove)
     emitter.on('grid:click', onGridClick)
@@ -174,6 +175,7 @@ export const SlabTool: React.FC = () => {
     return () => {
       document.removeEventListener('keydown', onKeyDown)
       document.removeEventListener('keyup', onKeyUp)
+      window.removeEventListener('blur', onWindowBlur)
       emitter.off('grid:move', onGridMove)
       emitter.off('grid:click', onGridClick)
       emitter.off('grid:double-click', onGridDoubleClick)