@pascal-app/editor 1.0.3 → 1.0.5

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

@@ -1,14 +1,7 @@
 import '../../../three-types'
 
 import { Icon } from '@iconify/react'
-import {
-  type AnyNodeId,
-  emitter,
-  type GridEvent,
-  sceneRegistry,
-  useScene,
-  type ZoneNode,
-} from '@pascal-app/core'
+import { type AnyNodeId, emitter, type GridEvent, sceneRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useRef } from 'react'
@@ -26,9 +19,10 @@ import {
   Vector2,
   Vector3,
 } from 'three'
+import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
-import useEditor from '../../../store/use-editor'
+import useInteractionScope from '../../../store/use-interaction-scope'
 import { CursorSphere } from '../shared/cursor-sphere'
 import { isBoxSelectPointerSuppressed, markBoxSelectHandled } from './box-select-state'
 import { collectSelectableCandidateIds } from './select-candidates'
@@ -297,6 +291,7 @@ export const PlaneBoxSelectTool: React.FC = () => {
   const currentPoint = useRef(new Vector3())
   const pointerDown = useRef(false)
   const isDragging = useRef(false)
+  const ownedGesture = useRef<object | null>(null)
   const startClientX = useRef(0)
   const startClientY = useRef(0)
   const gridY = useRef(0)
@@ -320,11 +315,36 @@ export const PlaneBoxSelectTool: React.FC = () => {
   const resetDrag = useCallback(() => {
     pointerDown.current = false
     isDragging.current = false
-    rectFillRef.current.visible = false
+    const gesture = ownedGesture.current
+    if (gesture)
+      useInteractionScope.getState().endIf(() => useInteractionScope.getState().gesture === gesture)
+    ownedGesture.current = null
+    previousGridPosition.current = null
+    if (rectFillRef.current) rectFillRef.current.visible = false
     outlineRef.current.visible = false
     syncPreviewSelectedIds([])
   }, [syncPreviewSelectedIds])
 
+  useEffect(() => {
+    const onCancel = () => {
+      if (!pointerDown.current) return
+      if (
+        (!ownedGesture.current && useInteractionScope.getState().scope.kind === 'idle') ||
+        (ownedGesture.current && useInteractionScope.getState().gesture === ownedGesture.current)
+      ) {
+        markToolCancelConsumed()
+      }
+      resetDrag()
+    }
+    emitter.on('tool:cancel', onCancel)
+    window.addEventListener('pointercancel', resetDrag)
+    return () => {
+      emitter.off('tool:cancel', onCancel)
+      window.removeEventListener('pointercancel', resetDrag)
+      resetDrag()
+    }
+  }, [resetDrag])
+
   const raycastToGround = useCallback(
     (event: PointerEvent): Vector3 | null => {
       const rect = gl.domElement.getBoundingClientRect()
@@ -342,12 +362,11 @@ export const PlaneBoxSelectTool: React.FC = () => {
   useEffect(() => {
     const outline = outlineRef.current
     return () => {
-      previewSelectedIdsRef.current = []
-      setPreviewSelectedIds([])
+      resetDrag()
       outline.geometry.dispose()
       ;(outline.material as LineBasicMaterial).dispose()
     }
-  }, [setPreviewSelectedIds])
+  }, [resetDrag])
 
   useEffect(() => {
     const unsubscribe = useViewer.subscribe((state) => {
@@ -440,15 +459,7 @@ export const PlaneBoxSelectTool: React.FC = () => {
 
         const ids = collectNodeIdsInPlaneBounds(bounds)
         const shouldAppend = event.metaKey || event.ctrlKey || event.shiftKey
-        const { phase, structureLayer } = useEditor.getState()
-
-        if (phase === 'structure' && structureLayer === 'zones') {
-          if (ids.length > 0) {
-            useViewer.getState().setSelection({ zoneId: ids[0] as ZoneNode['id'] })
-          } else if (!shouldAppend) {
-            useViewer.getState().setSelection({ zoneId: null })
-          }
-        } else if (shouldAppend) {
+        if (shouldAppend) {
           const currentIds = useViewer.getState().selection.selectedIds
           useViewer.getState().setSelection({
             selectedIds: Array.from(new Set([...currentIds, ...ids])),
@@ -507,6 +518,8 @@ export const PlaneBoxSelectTool: React.FC = () => {
       const dy = nativeEvent.clientY - startClientY.current
       if (!isDragging.current && Math.hypot(dx, dy) >= DRAG_THRESHOLD_PX) {
         isDragging.current = true
+        useInteractionScope.getState().begin({ kind: 'box-select' })
+        ownedGesture.current = useInteractionScope.getState().gesture
       }
 
       if (isDragging.current && rectFillRef.current && outlineRef.current) {

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

@@ -47,10 +47,7 @@ describe('selectable candidates', () => {
       },
       previewSelectedIds: [],
     })
-    useEditor.setState({
-      phase: 'structure',
-      structureLayer: 'elements',
-    })
+    useEditor.setState({ phase: 'building' })
   })
 
   test('includes building-scoped elevators for the active level building', () => {
@@ -106,4 +103,40 @@ describe('selectable candidates', () => {
 
     expect(collectSelectableCandidateIds()).toContain('elevator_test')
   })
+
+  test('Building box selection includes structural and furnishing kinds on the active level', () => {
+    for (const category of ['structure', 'furnish'] as const) {
+      const kind = `box-select-test-${category}`
+      if (!nodeRegistry.has(kind)) {
+        registerNode({
+          kind,
+          schemaVersion: 1,
+          schema: z.object({ type: z.literal(kind) }) as never,
+          category,
+          defaults: () => ({}),
+          capabilities: { selectable: {} },
+        } as AnyNodeDefinition)
+      }
+    }
+    useScene.setState({
+      nodes: {
+        level_test: {
+          id: 'level_test',
+          type: 'level',
+          parentId: 'building_test',
+          children: ['wall_pick', 'item_pick', 'item_hidden'],
+        },
+        wall_pick: { id: 'wall_pick', type: 'box-select-test-structure', parentId: 'level_test' },
+        item_pick: { id: 'item_pick', type: 'box-select-test-furnish', parentId: 'level_test' },
+        item_hidden: {
+          id: 'item_hidden',
+          type: 'box-select-test-furnish',
+          parentId: 'level_test',
+          visible: false,
+        },
+        item_other: { id: 'item_other', type: 'box-select-test-furnish', parentId: 'level_other' },
+      } as unknown as Record<string, AnyNode>,
+    })
+    expect(collectSelectableCandidateIds().sort()).toEqual(['item_pick', 'wall_pick'])
+  })
 })

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

@@ -19,17 +19,29 @@ function isVisibleSelectableNode(node: AnyNode): boolean {
 export function collectSelectableCandidateIds(): string[] {
   const { levelId } = useViewer.getState().selection
   const { nodes } = useScene.getState()
-  const { phase, structureLayer } = useEditor.getState()
+  const { phase } = useEditor.getState()
   const result: string[] = []
   const seen = new Set<string>()
   const addNode = (node: AnyNode | undefined) => {
-    if (!node || seen.has(node.id) || (node as { visible?: boolean }).visible === false) return
+    if (
+      !node ||
+      node.type === 'zone' ||
+      seen.has(node.id) ||
+      (node as { visible?: boolean }).visible === false
+    )
+      return
     seen.add(node.id)
     result.push(node.id)
   }
   const visitLevelDescendant = (id: AnyNodeId) => {
     const node = nodes[id]
-    if (!node || seen.has(node.id) || (node as { visible?: boolean }).visible === false) return
+    if (
+      !node ||
+      node.type === 'zone' ||
+      seen.has(node.id) ||
+      (node as { visible?: boolean }).visible === false
+    )
+      return
 
     if (isRegistrySelectable(node.type)) {
       addNode(node)
@@ -52,14 +64,6 @@ export function collectSelectableCandidateIds(): string[] {
   const levelNode = nodes[levelId as AnyNodeId] as LevelNode | undefined
   if (levelNode?.type !== 'level') return []
 
-  if (phase === 'structure' && structureLayer === 'zones') {
-    for (const childId of levelNode.children) {
-      const node = nodes[childId as AnyNodeId]
-      if (node?.type === 'zone') addNode(node)
-    }
-    return result
-  }
-
   for (const childId of levelNode.children) {
     visitLevelDescendant(childId as AnyNodeId)
   }

package/src/components/tools/shared/cursor-sphere.tsx

@@ -1,10 +1,11 @@
 import { Html } from '@react-three/drei'
 import type { ThreeElements } from '@react-three/fiber'
 import { forwardRef } from 'react'
-import type { Group } from 'three'
+import { CircleGeometry, CylinderGeometry, type Group, SphereGeometry } from 'three'
 import { furnishTools } from '../../../components/ui/action-menu/furnish-tools'
 import { tools } from '../../../components/ui/action-menu/structure-tools'
 import { EDITOR_LAYER } from '../../../lib/constants'
+import { wallCursorIcon } from '../../../lib/tool-cursor-icon'
 import useEditor from '../../../store/use-editor'
 import useWallSnapIndicator from '../../../store/use-wall-snap-indicator'
 
@@ -25,6 +26,19 @@ interface CursorSphereProps extends Omit<ThreeElements['group'], 'ref'> {
   tooltipContent?: React.ReactNode
 }
 
+// One geometry each for the life of the module: the vertical line used to
+// be a `<cylinderGeometry args={[…, height, 8]}>` rebuilt on EVERY height
+// change (the cursor's drop to the floor moves with the pointer), and the
+// ring / dot / tip were built and disposed on every toggle — WebGPU then
+// drew a frame whose vertex buffers had just been destroyed ("Vertex
+// buffer slot 0 required by [RenderPipeline "renderPipeline_MeshBasicMaterial_…"]
+// was not set … DrawIndexed(96 …)" — the 8-segment cylinder's 96 indices).
+// The line is a unit cylinder scaled to `height` instead.
+const DOT_GEOMETRY = new CircleGeometry(0.06, 32)
+const RING_GEOMETRY = new CircleGeometry(0.2, 32)
+const LINE_GEOMETRY = new CylinderGeometry(0.01, 0.01, 1, 8)
+const TIP_GEOMETRY = new SphereGeometry(0.08, 20, 14)
+
 export const CursorSphere = forwardRef<Group, CursorSphereProps>(function CursorSphere(
   {
     color = '#818cf8',
@@ -45,11 +59,14 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
   // (green square at a corner); hide the cursor's ground dot/ring so it
   // doesn't sit on top of that glyph.
   const isSnapping = useWallSnapIndicator((s) => s.point !== null)
+  const wallMode = useEditor((s) => s.continuationByContext.wall)
 
-  // Find the icon for the current tool
-  let activeToolConfig = null
+  // Find the icon for the current tool — the wall shows its Rooms variant.
+  let activeToolConfig: { label: string; iconSrc: string } | null | undefined = null
   if (mode === 'build' && tool) {
-    if (tool === 'item' && catalogCategory) {
+    if (tool === 'wall') {
+      activeToolConfig = wallCursorIcon(wallMode)
+    } else if (tool === 'item' && catalogCategory) {
       activeToolConfig = furnishTools.find((t) => t.catalogCategory === catalogCategory)
     } else {
       activeToolConfig = tools.find((t) => t.id === tool)
@@ -67,8 +84,7 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
         <group rotation={[-Math.PI / 2, 0, 0]}>
           {/* Center dot — at the ground unless the placement point is elevated */}
           {!dotAtTip && (
-            <mesh layers={EDITOR_LAYER} renderOrder={2}>
-              <circleGeometry args={[0.06, 32]} />
+            <mesh geometry={DOT_GEOMETRY} layers={EDITOR_LAYER} renderOrder={2}>
               <meshBasicMaterial
                 color={color}
                 depthTest={false}
@@ -80,8 +96,7 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
           )}
 
           {/* Outer ring / glow */}
-          <mesh layers={EDITOR_LAYER} renderOrder={2}>
-            <circleGeometry args={[0.2, 32]} />
+          <mesh geometry={RING_GEOMETRY} layers={EDITOR_LAYER} renderOrder={2}>
             <meshBasicMaterial
               color={color}
               depthTest={false}
@@ -95,8 +110,13 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
 
       {/* Vertical line */}
       {height > 0 && (
-        <mesh layers={EDITOR_LAYER} position={[0, height / 2, 0]} renderOrder={2}>
-          <cylinderGeometry args={[0.01, 0.01, height, 8]} />
+        <mesh
+          geometry={LINE_GEOMETRY}
+          layers={EDITOR_LAYER}
+          position={[0, height / 2, 0]}
+          renderOrder={2}
+          scale={[1, height, 1]}
+        >
           <meshBasicMaterial
             color={color}
             depthTest={false}
@@ -110,8 +130,12 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
       {/* Bright marker dot at the tip of the line — the actual placement
           point, riding at the cursor while the line drops to the floor. */}
       {dotAtTip && height > 0 && (
-        <mesh layers={EDITOR_LAYER} position={[0, height, 0]} renderOrder={2}>
-          <sphereGeometry args={[0.08, 20, 14]} />
+        <mesh
+          geometry={TIP_GEOMETRY}
+          layers={EDITOR_LAYER}
+          position={[0, height, 0]}
+          renderOrder={2}
+        >
           <meshBasicMaterial color={color} depthTest={false} depthWrite={false} />
         </mesh>
       )}

package/src/components/tools/site/site-boundary-editor.tsx

@@ -458,8 +458,7 @@ export const SiteBoundaryEditor: React.FC = () => {
 
   const exitSiteEditing = useCallback(() => {
     const editor = useEditor.getState()
-    editor.setPhase('structure')
-    editor.setStructureLayer('elements')
+    editor.setPhase('building')
     editor.setMode('select')
   }, [])
 

package/src/components/tools/tool-manager.tsx

@@ -5,17 +5,24 @@ import {
   type CeilingNode,
   createSceneApi,
   type FenceNode,
+  isStoreyContent,
+  type LevelNode,
   nodeRegistry,
   type SlabNode,
+  storeyOf,
   useScene,
   type WallNode,
+  type ZoneNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { type ComponentType, lazy, Suspense, useMemo } from 'react'
+import { type ComponentType, lazy, Suspense, useEffect, useMemo } from 'react'
 import { useRegisteredToolEnabled } from '../../hooks/use-registered-tool-enabled'
+import { useCeilingEditCeilingId } from '../../lib/ceiling-edit-session'
 import type { ReshapeKind } from '../../lib/interaction/scope'
+import { selectPlacedNode } from '../../lib/level-selection'
+import { paintRegionTargets, usePaintRegionMode } from '../../lib/paint-region-mode'
 import { siteBoundaryHandlesEnabled } from '../../lib/site-boundary'
-import useEditor, { type Phase, type Tool } from '../../store/use-editor'
+import useEditor, { type Tool } from '../../store/use-editor'
 import useInteractionScope, {
   useControlPointReshape,
   useEditingHole,
@@ -29,10 +36,14 @@ import useInteractionScope, {
 } from '../../store/use-interaction-scope'
 import { Alignment3DGuideLayer } from '../editor/alignment-3d-guide-layer'
 import { Elevation3DGuideLayer } from '../editor/elevation-3d-guide-layer'
+import { FloorOpeningsOverlay3D } from '../editor/floor-openings-overlay'
+import { FloorRegionControls3D } from '../editor/floor-region-controls'
+import { OpenWallEnds3DLayer } from '../editor/open-wall-ends-3d-layer'
 import { OpeningGuides3DLayer } from '../editor/opening-guides-3d-layer'
 import { WallSnapBeaconLayer } from '../editor/wall-snap-beacon-layer'
 import { ElevatorTool } from './elevator/elevator-tool'
 import { MoveTool } from './item/move-tool'
+import { WallPaintRegionTool } from './paint-region/wall-paint-region-tool'
 import { RegistryToolProvider } from './registry-tool-context'
 import {
   getRegistryAffordanceTool,
@@ -41,7 +52,6 @@ import {
 import { FacingPoseIndicator } from './shared/facing-pose-indicator'
 import { SiteBoundaryEditor } from './site/site-boundary-editor'
 import { TerrainSculptTool } from './site/terrain-sculpt-tool'
-import { StairTool } from './stair/stair-tool'
 import { ZoneBoundaryEditor } from './zone/zone-boundary-editor'
 import { ZoneTool } from './zone/zone-tool'
 
@@ -100,21 +110,16 @@ function getRegistryTool(tool: Tool | null): ComponentType | null {
 // Legacy tool fallbacks — kinds whose placement tools haven't migrated
 // to `def.tool` yet. Wall / fence / slab / ceiling / door / window /
 // item / shelf / spawn now go through the registry path above.
-const tools: Record<Phase, Partial<Record<Tool, React.FC>>> = {
-  site: {
-    'property-line': SiteBoundaryEditor,
-  },
-  structure: {
-    stair: StairTool,
-    zone: ZoneTool,
-  },
-  furnish: {},
+const tools: Partial<Record<Tool, React.FC>> = {
+  'property-line': SiteBoundaryEditor,
+  zone: ZoneTool,
 }
 
 export const ToolManager: React.FC = () => {
   const phase = useEditor((state) => state.phase)
   const mode = useEditor((state) => state.mode)
   const tool = useEditor((state) => state.tool)
+  const paintsWallRegions = usePaintRegionMode((state) => paintRegionTargets(state.mode).wall)
   const registeredToolEnabled = useRegisteredToolEnabled(tool)
   const movingNode = useMovingNode()
   const registryToolOwnsPlacement = useInteractionScope(
@@ -157,23 +162,41 @@ export const ToolManager: React.FC = () => {
     }
   }, [reshapingNode, tangentReshape])
   const editingHole = useEditingHole()
-  const selectedZoneId = useViewer((state) => state.selection.zoneId)
+  const editCeilingId = useCeilingEditCeilingId()
+  // A zone picked as a zone, from the Scene list (zoneId) or its area or pill (sole selection).
+  const zoneSelectionId = useViewer((state) => state.selection.zoneId)
+  const soleSelectedId = useViewer((state) =>
+    state.selection.selectedIds.length === 1 ? state.selection.selectedIds[0] : undefined,
+  )
+  const soleSelectedZone = useScene((state) =>
+    soleSelectedId && state.nodes[soleSelectedId as AnyNodeId]?.type === 'zone'
+      ? (soleSelectedId as ZoneNode['id'])
+      : null,
+  )
+  const selectedZoneId = zoneSelectionId ?? soleSelectedZone
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const buildingId = useViewer((state) => state.selection.buildingId)
   const activeLevelId = useViewer((state) => state.selection.levelId)
   const unit = useViewer((state) => state.unit)
   const setSelection = useViewer((state) => state.setSelection)
   const nodes = useScene((state) => state.nodes)
+  // Placing a roof makes its level active (selectPlacedNode); a wall, room, slab, stair or item tool
+  // armed there, then or after a level change, draws on the storey the roof level covers.
+  useEffect(() => {
+    if (!(tool && activeLevelId && isStoreyContent(tool, undefined))) return
+    const storeyId = storeyOf(useScene.getState().nodes, activeLevelId)
+    if (storeyId !== activeLevelId) setSelection({ levelId: storeyId as LevelNode['id'] })
+  }, [tool, activeLevelId, setSelection])
   const registrySceneApi = useMemo(() => createSceneApi(useScene), [])
   const registryToolContext = useMemo(
     () => ({
       activeLevelId: activeLevelId ?? null,
       isCameraDragging: () => useViewer.getState().cameraDragging,
       sceneApi: registrySceneApi,
-      selectNode: (nodeId: AnyNodeId) => setSelection({ selectedIds: [nodeId] }),
+      selectNode: selectPlacedNode,
       unit,
     }),
-    [activeLevelId, registrySceneApi, setSelection, unit],
+    [activeLevelId, registrySceneApi, unit],
   )
 
   // Building transform for the local group — all building-relative tools live inside this group
@@ -213,12 +236,14 @@ export const ToolManager: React.FC = () => {
   // edge handles — mounts only for a sole selection.
   const isSoleSelection = selectedIds.length === 1
 
-  // Show slab boundary editor when in structure/select mode with a slab selected (but not editing a hole)
+  // Show slab boundary editor in select mode with a slab selected (but not editing a hole)
   const showSlabBoundaryEditor =
-    phase === 'structure' &&
     mode === 'select' &&
     isSoleSelection &&
     selectedSlabId !== undefined &&
+    // Derived plates (a footprint's floor, a room's raised plate) follow their
+    // rooms; only user-drawn slabs get the outline editor.
+    !selectedSlab?.plateRole &&
     !isFloorplanDrivenReshape &&
     !editingSlabHoleIsManual
 
@@ -230,26 +255,28 @@ export const ToolManager: React.FC = () => {
     !isFloorplanDrivenReshape &&
     editingSlabHoleIsManual
 
-  // Show ceiling boundary editor when in structure/select mode with a ceiling selected (but not editing a hole)
+  // Show ceiling boundary editor only inside the ceiling's Edit ceiling session (not while editing a hole)
   const showCeilingBoundaryEditor =
-    phase === 'structure' &&
     mode === 'select' &&
     isSoleSelection &&
     selectedCeilingId !== undefined &&
+    selectedCeilingId === editCeilingId &&
     !isFloorplanDrivenReshape &&
     (!editingHole || editingHole.nodeId !== selectedCeilingId)
 
-  // Show ceiling hole editor when editing a hole on the selected ceiling
+  // Show ceiling hole editor when editing a manual hole inside the ceiling's Edit ceiling session
   const showCeilingHoleEditor =
     selectedCeilingId !== undefined &&
+    selectedCeilingId === editCeilingId &&
     editingHole !== null &&
     editingHole.nodeId === selectedCeilingId &&
+    ((nodes[selectedCeilingId as AnyNodeId] as CeilingNode).holeMetadata?.[editingHole.holeIndex]
+      ?.source ?? 'manual') === 'manual' &&
     !isFloorplanDrivenReshape
 
-  // Show zone boundary editor when in structure/select mode with a zone selected
+  // Show zone boundary editor in select mode with a zone selected
   // Hide when editing a slab or ceiling to avoid overlapping handles
   const showZoneBoundaryEditor =
-    phase === 'structure' &&
     mode === 'select' &&
     selectedZoneId !== null &&
     !isFloorplanDrivenReshape &&
@@ -274,7 +301,7 @@ export const ToolManager: React.FC = () => {
   const RegistryToolComponent = showBuildTool ? getRegistryTool(tool) : null
   const useRegistryTool = RegistryToolComponent != null
 
-  const BuildToolComponent = showBuildTool && !useRegistryTool ? tools[phase]?.[tool] : null
+  const BuildToolComponent = showBuildTool && !useRegistryTool ? tools[tool] : null
   const handlePlacedNodeSelected = (nodeId: AnyNodeId) => {
     setSelection({ selectedIds: [nodeId] })
   }
@@ -298,10 +325,16 @@ export const ToolManager: React.FC = () => {
     <RegistryToolProvider value={registryToolContext}>
       {/* World-space tools: site boundary and building movement operate in world coordinates */}
       {showSiteBoundaryEditor && <SiteBoundaryEditor />}
-      {/* Terrain sculpting is a mode rather than a `tools[phase][tool]` entry —
+      {/* Terrain sculpting is a mode rather than a `tools[tool]` entry —
           it places no node — so it gets its own gate here. World-space, because
           the ground is not building-local. */}
       {sculpting && <TerrainSculptTool />}
+      {/* "Paint part of the floor": level-space, follows the level matrix itself. */}
+      <FloorRegionControls3D />
+      {/* Floor and ceiling openings: level-space, follows the level matrix itself. */}
+      <FloorOpeningsOverlay3D />
+      {/* "Paint part of the wall": follows the wall mesh's own matrix. */}
+      {mode === 'material-paint' && paintsWallRegions && <WallPaintRegionTool />}
       {showMover && movingNode?.type === 'building' && (
         <MoveTool onNodeMoved={handlePlacedNodeSelected} onSpawnMoved={handlePlacedNodeSelected} />
       )}
@@ -454,6 +487,8 @@ export const ToolManager: React.FC = () => {
         <Elevation3DGuideLayer />
         {/* "Magnetic" beacon at the active wall-draft snap point. */}
         <WallSnapBeaconLayer />
+        {/* Wall ends that aren't joined, with a one-click join — twin of the floor plan's. */}
+        <OpenWallEnds3DLayer />
       </group>
     </RegistryToolProvider>
   )