editor: green/red placement box for shelf + tool sync for presets

biome.jsonc

@@ -109,7 +109,8 @@
       "!**/dist",
       "!**/build",
       "!**/public",
-      "!**/components/ui"
+      "!**/components/ui",
+      "!**/next-env.d.ts"
     ]
   },
   "overrides": [

packages/core/src/index.ts

@@ -88,6 +88,7 @@ export {
   resetSceneHistoryPauseDepth,
   resumeSceneHistory,
 } from './store/history-control'
+export { default as useAlignmentGuides } from './store/use-alignment-guides'
 export {
   type ControlValue,
   type DoorAnimationState,
@@ -106,7 +107,6 @@ export {
   getEffectiveNode,
   type LiveNodeOverrides,
 } from './store/use-live-node-overrides'
-export { default as useAlignmentGuides } from './store/use-alignment-guides'
 export { default as useLiveTransforms, type LiveTransform } from './store/use-live-transforms'
 export { clearSceneHistory, default as useScene } from './store/use-scene'
 export { resolveElevatorDispatchTarget } from './systems/elevator/elevator-dispatch'

packages/core/src/schema/index.ts

@@ -52,7 +52,6 @@ export {
 } from './nodes/column'
 export { CupolaNode } from './nodes/cupola'
 export { DoorNode, DoorSegment } from './nodes/door'
-export { EyebrowVentNode } from './nodes/eyebrow-vent'
 export {
   DormerNode,
   type DormerSurfaceMaterialRole,
@@ -66,6 +65,7 @@ export {
   ElevatorNode,
   ElevatorShaftStyle,
 } from './nodes/elevator'
+export { EyebrowVentNode } from './nodes/eyebrow-vent'
 export { FenceBaseStyle, FenceNode, FenceStyle } from './nodes/fence'
 export { GuideNode, GuideScaleReference } from './nodes/guide'
 export { GutterNode, GutterOutlet } from './nodes/gutter'

packages/core/src/services/index.ts

@@ -4,9 +4,9 @@ export {
   type AlignmentGuideAxis,
   type AnchorKind,
   bboxAnchors,
-  resolveAlignment,
   type ResolveAlignmentInput,
   type ResolveAlignmentResult,
+  resolveAlignment,
 } from './alignment'
 export {
   createDragSession,

packages/editor/src/components/editor-2d/floorplan-alignment-guide-layer.tsx

@@ -63,14 +63,7 @@ export const FloorplanAlignmentGuideLayer = memo(function FloorplanAlignmentGuid
 
         return (
           <g key={i}>
-            <line
-              stroke={color}
-              strokeWidth={stroke}
-              x1={from.x}
-              x2={to.x}
-              y1={from.z}
-              y2={to.z}
-            />
+            <line stroke={color} strokeWidth={stroke} x1={from.x} x2={to.x} y1={from.z} y2={to.z} />
             <XCap color={color} size={xCapSize} stroke={stroke} x={from.x} y={from.z} />
             <XCap color={color} size={xCapSize} stroke={stroke} x={to.x} y={to.z} />
             {distMeters > 1e-4 && (
@@ -123,8 +116,22 @@ function XCap({
 }) {
   return (
     <g>
-      <line stroke={color} strokeWidth={stroke} x1={x - size} x2={x + size} y1={y - size} y2={y + size} />
-      <line stroke={color} strokeWidth={stroke} x1={x - size} x2={x + size} y1={y + size} y2={y - size} />
+      <line
+        stroke={color}
+        strokeWidth={stroke}
+        x1={x - size}
+        x2={x + size}
+        y1={y - size}
+        y2={y + size}
+      />
+      <line
+        stroke={color}
+        strokeWidth={stroke}
+        x1={x - size}
+        x2={x + size}
+        y1={y + size}
+        y2={y - size}
+      />
     </g>
   )
 }

packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx

@@ -397,9 +397,7 @@ export function FloorplanRegistryMoveOverlay() {
       if (!otherId || otherId === movingNode.id) continue
       const b = (el as SVGGraphicsElement).getBBox()
       if (b.width <= 0 || b.height <= 0) continue
-      candidateAnchors.push(
-        ...bboxAnchors(otherId, b.x, b.y, b.x + b.width, b.y + b.height),
-      )
+      candidateAnchors.push(...bboxAnchors(otherId, b.x, b.y, b.x + b.width, b.y + b.height))
     }
 
     let lastSnapped: [number, number] | null = null

packages/editor/src/components/editor/first-person/build-collider-world.ts

@@ -83,7 +83,10 @@ function cloneWorldGeometry(mesh: THREE.Mesh) {
     ? sourceGeometry.toNonIndexed()
     : sourceGeometry.clone()
   const cleanGeometry = new THREE.BufferGeometry()
-  cleanGeometry.setAttribute('position', toFloat32Attribute(workingGeometry.getAttribute('position')))
+  cleanGeometry.setAttribute(
+    'position',
+    toFloat32Attribute(workingGeometry.getAttribute('position')),
+  )
 
   const normal = workingGeometry.getAttribute('normal')
   if (normal) {

packages/editor/src/components/editor/floorplan-panel.tsx

@@ -7277,10 +7277,7 @@ export function FloorplanPanel() {
   // should stop further pointer-move processing (we either emitted a
   // ceiling event or are between ceilings).
   const handleCeilingItemPlacementMove = useCallback(
-    (
-      planPoint: WallPlanPoint,
-      nativeEvent: ReactPointerEvent<SVGSVGElement>,
-    ): boolean => {
+    (planPoint: WallPlanPoint, nativeEvent: ReactPointerEvent<SVGSVGElement>): boolean => {
       if (!isCeilingItemPlacementActive) return false
 
       const ceiling = findCeilingAtPlanPoint(planPoint)
@@ -7317,10 +7314,7 @@ export function FloorplanPanel() {
   // Click counterpart — used by the background placement click handler.
   // Returns true if the click was a valid ceiling-item placement.
   const handleCeilingItemPlacementClick = useCallback(
-    (
-      planPoint: WallPlanPoint,
-      nativeEvent: ReactMouseEvent<SVGSVGElement>,
-    ): boolean => {
+    (planPoint: WallPlanPoint, nativeEvent: ReactMouseEvent<SVGSVGElement>): boolean => {
       if (!isCeilingItemPlacementActive) return false
       const ceiling = findCeilingAtPlanPoint(planPoint)
       if (!ceiling) return true

packages/editor/src/components/tools/item/use-placement-coordinator.tsx

@@ -21,9 +21,7 @@ import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
-  BufferGeometry,
   Euler,
-  Float32BufferAttribute,
   type Group,
   type LineSegments,
   type Mesh,
@@ -36,6 +34,12 @@ import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
+import {
+  createLineGeometry,
+  getBoxEdgePoints,
+  type PreviewBounds,
+  updateLineGeometry,
+} from '../shared/placement-box-geometry'
 import { getGridAlignedDimensions, snapToGrid, snapUpToGridStep } from './placement-math'
 import {
   ceilingStrategy,
@@ -61,13 +65,6 @@ function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
   return `${Number.parseFloat(value.toFixed(2))}m`
 }
 
-type PreviewBounds = {
-  min: [number, number, number]
-  max: [number, number, number]
-  dimensions: [number, number, number]
-  center: [number, number, number]
-}
-
 /**
  * Expand `bounds` outward so each axis is rounded up to the active grid step.
  * The wireframe stays centered on the original bounds centre on each axis we
@@ -130,114 +127,6 @@ function getFallbackPreviewBounds(
   }
 }
 
-function createLineGeometry(points: number[] = [0, 0, 0, 0, 0, 0]): BufferGeometry {
-  const geometry = new BufferGeometry()
-  geometry.setAttribute('position', new Float32BufferAttribute(points, 3))
-  return geometry
-}
-
-function getBoxEdgePoints(bounds: PreviewBounds): number[] {
-  const [width, height, depth] = bounds.dimensions
-  const [centerX, centerY, centerZ] = bounds.center
-  const minX = centerX - width / 2
-  const maxX = centerX + width / 2
-  const minY = centerY - height / 2
-  const maxY = centerY + height / 2
-  const minZ = centerZ - depth / 2
-  const maxZ = centerZ + depth / 2
-
-  return [
-    minX,
-    minY,
-    minZ,
-    maxX,
-    minY,
-    minZ,
-    maxX,
-    minY,
-    minZ,
-    maxX,
-    minY,
-    maxZ,
-    maxX,
-    minY,
-    maxZ,
-    minX,
-    minY,
-    maxZ,
-    minX,
-    minY,
-    maxZ,
-    minX,
-    minY,
-    minZ,
-
-    minX,
-    maxY,
-    minZ,
-    maxX,
-    maxY,
-    minZ,
-    maxX,
-    maxY,
-    minZ,
-    maxX,
-    maxY,
-    maxZ,
-    maxX,
-    maxY,
-    maxZ,
-    minX,
-    maxY,
-    maxZ,
-    minX,
-    maxY,
-    maxZ,
-    minX,
-    maxY,
-    minZ,
-
-    minX,
-    minY,
-    minZ,
-    minX,
-    maxY,
-    minZ,
-    maxX,
-    minY,
-    minZ,
-    maxX,
-    maxY,
-    minZ,
-    maxX,
-    minY,
-    maxZ,
-    maxX,
-    maxY,
-    maxZ,
-    minX,
-    minY,
-    maxZ,
-    minX,
-    maxY,
-    maxZ,
-  ]
-}
-
-function updateLineGeometry(ref: React.RefObject<LineSegments>, points: number[]) {
-  const geometry = ref.current?.geometry
-  if (!geometry) return
-
-  const attribute = geometry.getAttribute('position') as Float32BufferAttribute | undefined
-  if (!attribute || attribute.array.length !== points.length) {
-    geometry.setAttribute('position', new Float32BufferAttribute(points, 3))
-  } else {
-    attribute.set(points)
-    attribute.needsUpdate = true
-  }
-  geometry.computeBoundingSphere()
-}
-
 // Shared materials for placement cursor - we just change colors, not swap materials
 // Note: EdgesGeometry doesn't work with dashed lines, so using solid lines
 const edgeMaterial = new LineBasicNodeMaterial({