@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/tools/registry/item-surface-resolver.test.ts

@@ -7,7 +7,6 @@ import {
   ItemNode,
   LevelNode,
   nodeRegistry,
-  registerNode,
   type SurfacePlacement,
   sceneRegistry,
   useLiveTransforms,
@@ -17,6 +16,7 @@ import { Group, Vector3 } from 'three'
 import { commitFreshPlacementSubtree } from '../../../lib/fresh-planar-placement'
 import useEditor from '../../../store/use-editor'
 import useInteractionScope from '../../../store/use-interaction-scope'
+import { registerHostingTestNode } from '../__fixtures__/hosting'
 import { createRegistryItemSurfaceMove } from './item-surface-move'
 
 const level = LevelNode.parse({ id: 'level_resolver' })
@@ -69,7 +69,7 @@ beforeEach(() => {
   savedRoots = useScene.getState().rootNodeIds
   restoreRegistry = nodeRegistry._snapshot()
   nodeRegistry._reset()
-  registerNode({
+  registerHostingTestNode({
     kind: 'item',
     schemaVersion: 1,
     schema: ItemNode,

package/src/components/tools/registry/move-registry-node-tool.tsx

@@ -13,6 +13,7 @@ import {
   createSceneApi,
   emitter,
   findLevelAncestorId,
+  floorPlacedCollides,
   footprintAABBFrom,
   type GridEvent,
   type GroupMoveSnapResult,
@@ -42,7 +43,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { type Group, Vector3 } from 'three'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { commitFreshPlacementSubtree } from '../../../lib/fresh-planar-placement'
-import { stripPlacementMetadataFlags } from '../../../lib/placement-metadata'
+import {
+  isFreshPlacementMetadata,
+  stripPlacementMetadataFlags,
+} from '../../../lib/placement-metadata'
 import {
   offsetPlanPositionByLocalCenter,
   resolvePrioritizedPlanarCursorPosition,
@@ -64,6 +68,7 @@ import useEditor, {
   isMagneticSnapActive,
 } from '../../../store/use-editor'
 import useFacingPose from '../../../store/use-facing-pose'
+import useInteractionScope from '../../../store/use-interaction-scope'
 import { swallowNextClick } from '../../editor/node-arrow-handles'
 import { CursorSphere } from '../shared/cursor-sphere'
 import { DragBoundingBox } from '../shared/drag-bounding-box'
@@ -218,7 +223,14 @@ const ALIGNMENT_THRESHOLD_M = 0.08
  */
 type ClickTriggerEvent = GridEvent | NodeEvent<AnyNode>
 
-export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
+export function MoveRegistryNodeTool({ node: source }: { node: AnyNode }) {
+  const node = useMemo(
+    () =>
+      isFreshPlacementMetadata(source.metadata)
+        ? (useScene.getState().nodes[source.id] ?? source)
+        : source,
+    [source],
+  )
   const itemSurfaceMove = useMemo(() => createRegistryItemSurfaceMove(node), [node])
   const suppressRaycastsRef = useRef<(() => void) | null>(null)
   const previewGroupRef = useRef<Group>(null)
@@ -329,7 +341,8 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
   // position isn't in the level frame the spatial grid indexes. They may
   // still provide a parent-frame collision check and use the same bounds box.
   const collides =
-    !frameParent && nodeRegistry.get(node.type)?.capabilities?.floorPlaced?.collides === true
+    !frameParent &&
+    floorPlacedCollides(nodeRegistry.get(node.type)?.capabilities?.floorPlaced, node)
   // Snapshot the scene once at drag-start — bounds depend on `node` (locked
   // for the lifetime of this tool) and any sibling state the kind reads. If a
   // future kind needs live sibling state mid-drag, switch to a subscribed
@@ -432,6 +445,7 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
   }, [])
 
   useEffect(() => {
+    const ownsSubtree = useInteractionScope.getState().adoptSubtree(node.id)
     useScene.temporal.getState().pause()
     const movementSfx = createMovementSfxTick()
     dragAnchorRef.current = null
@@ -1114,11 +1128,13 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
         } as Partial<AnyNode>
 
         if (isNew) {
-          const finalId = commitFreshPlacementSubtree(node.id as AnyNodeId, data)
-          if (finalId) {
-            committed = true
-            committedId = finalId
-          }
+          const finalId = commitFreshPlacementSubtree(node.id as AnyNodeId, data, (reason) => {
+            setSurfaceRejection(reason)
+            setValid(false)
+          })
+          if (!finalId) return
+          committed = true
+          committedId = finalId
         } else {
           // Fold the connected-ductwork follow-updates into the SAME
           // batch as the moved node so the whole thing is one undo step.
@@ -1339,7 +1355,7 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
       clearParentFramePreview()
       if (isNew) {
         updateSurfaceNode(node.id, {}, null)
-        useScene.getState().deleteNode(node.id as AnyNodeId)
+        if (!ownsSubtree) useScene.getState().deleteNode(node.id)
       } else {
         itemSurfaceMove?.restore()
         applyMeshPose(originalPosition, originalRotationY)
@@ -1376,7 +1392,7 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
       // unmount / commit paths uniformly.
       useAlignmentGuides.getState().clear()
       const finalisedBy2D = useEditor.getState().movingNodeOrigin === '2d'
-      if (!committed && !finalisedBy2D && (!isNew || itemSurfaceMove)) {
+      if (!committed && !finalisedBy2D && (!isNew || (!ownsSubtree && itemSurfaceMove))) {
         useLiveTransforms.getState().clear(node.id)
         clearConnectivityOverrides()
         clearParentFramePreview()

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

@@ -1,4 +1,4 @@
-import { sceneRegistry, useScene, type ZoneNode } from '@pascal-app/core'
+import { sceneRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useRef } from 'react'
@@ -248,18 +248,8 @@ function collectNodeIdsInScreenRect(
 
 function commitBoxSelection(ids: string[], event: PointerEvent) {
   const shouldAppend = event.metaKey || event.ctrlKey || event.shiftKey
-  const { phase, structureLayer } = useEditor.getState()
   const viewer = useViewer.getState()
 
-  if (phase === 'structure' && structureLayer === 'zones') {
-    if (ids.length > 0) {
-      viewer.setSelection({ zoneId: ids[0] as ZoneNode['id'] })
-    } else if (!shouldAppend) {
-      viewer.setSelection({ zoneId: null })
-    }
-    return
-  }
-
   if (shouldAppend) {
     viewer.setSelection({
       selectedIds: Array.from(new Set([...viewer.selection.selectedIds, ...ids])),
@@ -274,7 +264,7 @@ export const BoxSelectTool: React.FC = () => {
   const phase = useEditor((s) => s.phase)
   const mode = useEditor((s) => s.mode)
   const selectionTool = useEditor((s) => s.floorplanSelectionTool)
-  const isActive = mode === 'select' && (phase === 'structure' || phase === 'furnish')
+  const isActive = mode === 'select' && phase === 'building'
 
   if (!isActive) return null
 

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

@@ -0,0 +1,79 @@
+import { expect, test } from 'bun:test'
+import { emitter, type GridEvent } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { act } from '@react-three/fiber'
+import { cancelActiveTool } from '../../../hooks/use-keyboard'
+import { selectionEnabled } from '../../../lib/interaction/scope'
+import useEditor from '../../../store/use-editor'
+import useInteractionScope from '../../../store/use-interaction-scope'
+import { withSelectionHarness } from '../../../test-utils/selection-harness'
+import { PlaneBoxSelectTool } from './plane-box-select-tool'
+
+for (const exit of ['Escape', 'unmount', 'pointercancel'] as const) {
+  test(`plane marquee resets its drag and scope on ${exit}`, async () => {
+    await withSelectionHarness(async ({ render, canvas }) => {
+      useEditor.setState({
+        phase: 'building',
+        mode: 'select',
+        floorplanSelectionTool: 'marquee',
+        isFloorplanHovered: true,
+      })
+      useViewer.setState({ inputDragging: false, cameraDragging: false })
+      useInteractionScope.getState().end()
+      await render(<PlaneBoxSelectTool />)
+      await act(async () => {
+        canvas.dispatchEvent(
+          Object.assign(new Event('pointerdown'), { button: 0, clientX: 200, clientY: 200 }),
+        )
+        emitter.emit('grid:move', {
+          position: [4, 0, 4],
+          nativeEvent: { clientX: 800, clientY: 800 },
+        } as GridEvent)
+      })
+      expect(useInteractionScope.getState().scope.kind).toBe('box-select')
+      if (exit === 'unmount') await render(null)
+      else
+        await act(async () => {
+          if (exit === 'Escape') cancelActiveTool()
+          else window.dispatchEvent(new Event('pointercancel'))
+        })
+      expect(selectionEnabled(useInteractionScope.getState().scope)).toBe(true)
+      expect(useViewer.getState().previewSelectedIds).toEqual([])
+      if (exit === 'Escape') expect(useEditor.getState().floorplanSelectionTool).toBe('marquee')
+      await act(async () => {
+        emitter.emit('grid:move', {
+          position: [6, 0, 6],
+          nativeEvent: { clientX: 900, clientY: 900 },
+        } as GridEvent)
+        canvas.dispatchEvent(
+          Object.assign(new Event('pointerup'), { button: 0, clientX: 900, clientY: 900 }),
+        )
+      })
+      expect(useInteractionScope.getState().scope.kind).toBe('idle')
+    })
+  })
+}
+
+test('plane marquee cleanup cannot release a replacement box-select owner', async () => {
+  await withSelectionHarness(async ({ render, canvas }) => {
+    useEditor.setState({ isFloorplanHovered: true })
+    useViewer.setState({ inputDragging: false, cameraDragging: false })
+    await render(<PlaneBoxSelectTool />)
+    await act(async () => {
+      canvas.dispatchEvent(
+        Object.assign(new Event('pointerdown'), { button: 0, clientX: 200, clientY: 200 }),
+      )
+      emitter.emit('grid:move', {
+        position: [4, 0, 4],
+        nativeEvent: { clientX: 800, clientY: 800 },
+      } as GridEvent)
+    })
+    const ownGesture = useInteractionScope.getState().gesture
+    useInteractionScope.getState().begin({ kind: 'box-select' })
+    const replacement = useInteractionScope.getState().gesture
+    expect(replacement).not.toBe(ownGesture)
+    await render(null)
+    expect(useInteractionScope.getState().scope.kind).toBe('box-select')
+    expect(useInteractionScope.getState().gesture).toBe(replacement)
+  })
+})

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/affordance-dispatch.test.ts

@@ -0,0 +1,24 @@
+import { afterAll, afterEach, expect, spyOn, test } from 'bun:test'
+import { type AnyNodeDefinition, nodeRegistry } from '@pascal-app/core'
+import { getRegistryAffordanceTool, preloadRegistryAffordanceTools } from './affordance-dispatch'
+
+const get = spyOn(nodeRegistry, 'get')
+afterEach(() => get.mockReset())
+afterAll(() => get.mockRestore())
+
+test('a preloaded drag tool mounts directly without first-gesture suspense', async () => {
+  const Tool = () => null
+  const loader = async () => ({ default: Tool })
+  get.mockReturnValue({ affordanceTools: { move: loader } } as unknown as AnyNodeDefinition)
+  await preloadRegistryAffordanceTools('wall')
+  expect(getRegistryAffordanceTool('wall', 'move')).toBe(Tool)
+  expect(getRegistryAffordanceTool('wall', 'move')).toBe(Tool)
+})
+
+test('preloading does not change an already mounted lazy component identity', async () => {
+  const loader = async () => ({ default: () => null })
+  get.mockReturnValue({ affordanceTools: { move: loader } } as unknown as AnyNodeDefinition)
+  const mounted = getRegistryAffordanceTool('wall', 'move')
+  await preloadRegistryAffordanceTools('wall')
+  expect(getRegistryAffordanceTool('wall', 'move')).toBe(mounted)
+})

package/src/components/tools/shared/affordance-dispatch.ts

@@ -15,6 +15,19 @@ import { type ComponentType, lazy } from 'react'
  */
 const lazyToolCache = new WeakMap<() => Promise<unknown>, ComponentType>()
 
+export async function preloadRegistryAffordanceTools(kind: string): Promise<void> {
+  const tools = nodeRegistry.get(kind)?.affordanceTools
+  await Promise.allSettled(
+    Object.values(tools ?? {}).map(async (loader) => {
+      if (!loader || lazyToolCache.has(loader)) return
+      const module = (await loader()) as { default: ComponentType<any> }
+      // Keep an already-mounted lazy component stable. Otherwise use the resolved
+      // component directly so grabbing a preloaded handle never suspends its tool.
+      if (!lazyToolCache.has(loader)) lazyToolCache.set(loader, module.default)
+    }),
+  )
+}
+
 export function getRegistryAffordanceTool(
   kind: string,
   affordance: string,

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/shared/draft-measurement-label.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { Html } from '@react-three/drei'
+
+/** Lift of a draft's readout above the top of what it measures, in metres. */
+export const DRAFT_LABEL_Y_OFFSET = 0.22
+
+/** Screen-space readout for a draft in 3D (lengths, angles, split segments). */
+export function DraftMeasurementLabel({
+  color,
+  label,
+  position,
+  shadowColor,
+}: {
+  color: string
+  label: string
+  position: [number, number, number]
+  shadowColor: string
+}) {
+  return (
+    <Html
+      center
+      position={position}
+      style={{ pointerEvents: 'none', userSelect: 'none' }}
+      zIndexRange={[100, 0]}
+    >
+      <div
+        className="whitespace-nowrap font-bold font-mono text-[15px]"
+        style={{
+          color,
+          textShadow: `-1.5px -1.5px 0 ${shadowColor}, 1.5px -1.5px 0 ${shadowColor}, -1.5px 1.5px 0 ${shadowColor}, 1.5px 1.5px 0 ${shadowColor}, 0 0 4px ${shadowColor}, 0 0 4px ${shadowColor}`,
+        }}
+      >
+        {label}
+      </div>
+    </Html>
+  )
+}