@pascal-app/editor 1.0.3 → 1.0.4

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/stair/stair-defaults.ts

@@ -1,8 +1,5 @@
 export const DEFAULT_STAIR_TYPE = 'straight' as const
 export const DEFAULT_STAIR_WIDTH = 1.0
-export const DEFAULT_STAIR_LENGTH = 3.0
-export const DEFAULT_STAIR_HEIGHT = 2.5
-export const DEFAULT_STAIR_STEP_COUNT = 10
 export const DEFAULT_STAIR_ATTACHMENT_SIDE = 'front' as const
 export const DEFAULT_STAIR_FILL_TO_FLOOR = true
 export const DEFAULT_STAIR_THICKNESS = 0.25

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

@@ -1,7 +1,7 @@
 import {
   type AnyNode,
   collectAlignmentAnchors,
-  createDefaultStairSegment,
+  createSizedStairFlight,
   createSurfaceOpeningPreviewController,
   DEFAULT_LEVEL_HEIGHT,
   emitter,
@@ -11,6 +11,8 @@ import {
   type LevelNode,
   movingAlignmentAnchors,
   type NodeEvent,
+  planStairCreation,
+  planStairSizing,
   resolveAlignment,
   resolveFrozenFloorPlacementPatch,
   resolveSupportSlabPatch,
@@ -23,6 +25,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef } from 'react'
 import * as THREE from 'three'
+import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import {
   resolveStairDestinationLevel,
@@ -54,11 +57,9 @@ import {
   DEFAULT_SPIRAL_TOP_LANDING_MODE,
   DEFAULT_STAIR_ATTACHMENT_SIDE,
   DEFAULT_STAIR_FILL_TO_FLOOR,
-  DEFAULT_STAIR_LENGTH,
   DEFAULT_STAIR_OPENING_OFFSET,
   DEFAULT_STAIR_RAILING_HEIGHT,
   DEFAULT_STAIR_RAILING_MODE,
-  DEFAULT_STAIR_STEP_COUNT,
   DEFAULT_STAIR_THICKNESS,
   DEFAULT_STAIR_TYPE,
   DEFAULT_STAIR_WIDTH,
@@ -75,19 +76,18 @@ type MoveTriggerEvent = GridEvent | NodeEvent<AnyNode>
  * Same algorithm as StairSystem's generateStairSegmentGeometry.
  */
 function createStairPreviewGeometry(rise: number): THREE.BufferGeometry {
-  const riserHeight = rise / DEFAULT_STAIR_STEP_COUNT
-  const treadDepth = DEFAULT_STAIR_LENGTH / DEFAULT_STAIR_STEP_COUNT
+  const { stepCount, length, riserHeight, going: treadDepth } = planStairSizing(rise)
 
   const shape = new THREE.Shape()
   shape.moveTo(0, 0)
 
-  for (let i = 0; i < DEFAULT_STAIR_STEP_COUNT; i++) {
+  for (let i = 0; i < stepCount; i++) {
     shape.lineTo(i * treadDepth, (i + 1) * riserHeight)
     shape.lineTo((i + 1) * treadDepth, (i + 1) * riserHeight)
   }
 
   // Fill to floor (absoluteHeight = 0)
-  shape.lineTo(DEFAULT_STAIR_LENGTH, 0)
+  shape.lineTo(length, 0)
   shape.lineTo(0, 0)
 
   const geometry = new THREE.ExtrudeGeometry(shape, {
@@ -110,33 +110,28 @@ function createStairPreviewGeometry(rise: number): THREE.BufferGeometry {
  * dropped on, not a constant: the placed stair has no explicit `totalRise`, so
  * this is the height `syncStairRises` immediately converges it to anyway.
  */
-function resolvePlacedStairRise(
+function resolvePlacedStairBase(
   nodes: Record<string, AnyNode>,
   levelId: LevelNode['id'],
   stair: StairNode,
   supportSurface: PointerSupportSurface | null,
+  seed: StairSegmentNode,
 ): number {
-  // Same contract as `resolveStairTotalRise` for a stair that is not in the
-  // scene yet: the storey height minus whatever slab lifts the drop point,
-  // capped by the surface the pointer actually aims at (a floor under an
-  // overlapping deck must not elect the deck).
+  // Keep the pointer-selected base when an overlapping deck is above the cursor.
   const base = getFloorStackedPosition({
     node: stair,
-    nodes,
+    nodes: { ...nodes, [seed.id]: { ...seed, parentId: stair.id } },
     position: stair.position,
     rotation: stair.rotation,
     levelId,
     maxElevation: supportSurface?.elevation ?? null,
   })[1]
-  return getLevelFloorToFloorHeight(levelId, nodes) - base
+  return base
 }
 
 function createSeedStairSegment(rise: number) {
-  return createDefaultStairSegment({
+  return createSizedStairFlight(rise, {
     width: DEFAULT_STAIR_WIDTH,
-    length: DEFAULT_STAIR_LENGTH,
-    height: rise,
-    stepCount: DEFAULT_STAIR_STEP_COUNT,
     attachmentSide: DEFAULT_STAIR_ATTACHMENT_SIDE,
     fillToFloor: DEFAULT_STAIR_FILL_TO_FLOOR,
     thickness: DEFAULT_STAIR_THICKNESS,
@@ -160,15 +155,16 @@ function createDefaultStairNode({
 }) {
   return StairNode.parse({
     name,
+    parentId: levelId,
     position,
     rotation,
     stairType: DEFAULT_STAIR_TYPE,
+    uniformRisers: true,
     fromLevelId: levelId,
     toLevelId: nextLevelId,
     slabOpeningMode: 'destination',
     openingOffset: DEFAULT_STAIR_OPENING_OFFSET,
     width: DEFAULT_STAIR_WIDTH,
-    stepCount: DEFAULT_STAIR_STEP_COUNT,
     thickness: DEFAULT_STAIR_THICKNESS,
     fillToFloor: DEFAULT_STAIR_FILL_TO_FLOOR,
     innerRadius: DEFAULT_CURVED_STAIR_INNER_RADIUS,
@@ -202,7 +198,9 @@ function commitStairPlacement(
 
   const stairCount = Object.values(nodes).filter((n) => n.type === 'stair').length
   const name = `Staircase ${stairCount + 1}`
-  const seed = createSeedStairSegment(getLevelFloorToFloorHeight(placementLevelId, nodes))
+  const storeyRise = getLevelFloorToFloorHeight(placementLevelId, nodes)
+  if (!(storeyRise > 0)) return
+  const seed = createSeedStairSegment(storeyRise)
 
   const destinationPlan = resolveStairDestinationLevel({
     createMissing: true,
@@ -222,10 +220,28 @@ function commitStairPlacement(
     }),
     parentId: placementLevelId,
   })
-  const segment = {
-    ...seed,
-    height: resolvePlacedStairRise(nodes, placementLevelId, stair, supportSurface),
+  const base = resolvePlacedStairBase(nodes, placementLevelId, stair, supportSurface, seed)
+  let segment: StairSegmentNode
+  try {
+    segment = {
+      ...planStairCreation(
+        stair,
+        nodes,
+        {
+          width: seed.width,
+          attachmentSide: seed.attachmentSide,
+          fillToFloor: seed.fillToFloor,
+          thickness: seed.thickness,
+        },
+        base,
+      ).flight,
+      id: seed.id,
+    }
+  } catch (error) {
+    if (error instanceof RangeError) return
+    throw error
   }
+  stair.stepCount = segment.stepCount
   const prospectiveNodes = {
     ...nodes,
     [stair.id]: stair,
@@ -270,6 +286,7 @@ export const StairTool: React.FC = () => {
   cameraRef.current = camera
   const cursorRef = useRef<THREE.Group>(null)
   const previewRef = useRef<THREE.Group>(null)
+  const previewMeshRef = useRef<THREE.Mesh>(null)
   const rotationRef = useRef(0)
   const supportSurfaceRef = useRef<PointerSupportSurface | null>(null)
   const previousGridPosRef = useRef<[number, number] | null>(null)
@@ -281,8 +298,10 @@ export const StairTool: React.FC = () => {
   )
   const previewRiseRef = useRef(previewRise)
   previewRiseRef.current = previewRise
-  const previewGeometry = useMemo(() => createStairPreviewGeometry(previewRise), [previewRise])
-  useEffect(() => () => previewGeometry.dispose(), [previewGeometry])
+  const previewGeometry = useMemo(() => createStairPreviewGeometry(DEFAULT_LEVEL_HEIGHT), [])
+  const ownedGeometryRef = useRef(previewGeometry)
+  const geometryRiseRef = useRef(DEFAULT_LEVEL_HEIGHT)
+  useEffect(() => () => ownedGeometryRef.current.dispose(), [])
 
   useEffect(() => {
     if (!currentLevelId) return
@@ -321,7 +340,9 @@ export const StairTool: React.FC = () => {
         nodes,
       })
       const nextLevelId = destinationPlan?.toLevel.id ?? placementLevelId
-      const seed = createSeedStairSegment(getLevelFloorToFloorHeight(placementLevelId, nodes))
+      const storeyRise = getLevelFloorToFloorHeight(placementLevelId, nodes)
+      if (!(storeyRise > 0)) return null
+      const seed = createSeedStairSegment(storeyRise)
       const stair = createDefaultStairNode({
         name: 'Staircase Preview',
         levelId: placementLevelId,
@@ -330,10 +351,28 @@ export const StairTool: React.FC = () => {
         rotation,
         segmentId: seed.id,
       })
-      const segment = {
-        ...seed,
-        height: resolvePlacedStairRise(nodes, placementLevelId, stair, supportSurface),
+      const base = resolvePlacedStairBase(nodes, placementLevelId, stair, supportSurface, seed)
+      let segment: StairSegmentNode
+      try {
+        segment = {
+          ...planStairCreation(
+            stair,
+            nodes,
+            {
+              width: seed.width,
+              attachmentSide: seed.attachmentSide,
+              fillToFloor: seed.fillToFloor,
+              thickness: seed.thickness,
+            },
+            base,
+          ).flight,
+          id: seed.id,
+        }
+      } catch (error) {
+        if (error instanceof RangeError) return null
+        throw error
       }
+      stair.stepCount = segment.stepCount
       const previewNodes = {
         ...nodes,
         ...(destinationPlan?.createdLevel
@@ -360,11 +399,13 @@ export const StairTool: React.FC = () => {
       rotation: number,
       supportSurface: PointerSupportSurface | null,
     ) => {
-      const key = `${position[0].toFixed(3)},${position[2].toFixed(3)},${rotation.toFixed(4)},${supportSurface?.elevation.toFixed(3) ?? 'none'},${supportSurface?.sourceNodeId ?? 'floor'}`
+      const key = `${position[0].toFixed(3)},${position[2].toFixed(3)},${rotation.toFixed(4)},${supportSurface?.elevation.toFixed(3) ?? 'none'},${supportSurface?.sourceNodeId ?? 'floor'},${previewRiseRef.current}`
       if (key === lastPreviewKey) return
       lastPreviewKey = key
-      useStairBuildPreview.getState().setPreview([position[0], position[2]], rotation)
       const preview = buildPreviewScene(position, rotation, supportSurface)
+      useStairBuildPreview
+        .getState()
+        .setPreview(preview ? [position[0], position[2]] : null, rotation, preview?.rise ?? null)
       const frozenPatch =
         preview && supportSurface?.sourceNodeId
           ? resolveFrozenFloorPlacementPatch(preview.stair, preview.previewNodes, {
@@ -398,11 +439,17 @@ export const StairTool: React.FC = () => {
       }
 
       if (previewRef.current) {
+        previewRef.current.visible = Boolean(preview)
         previewRef.current.position.set(...visualPosition)
         previewRef.current.rotation.y = rotation
-        // The ghost geometry is built for the storey height; squash it to the
-        // rise the placed flight will get on this surface.
-        previewRef.current.scale.y = preview ? preview.rise / previewRiseRef.current : 1
+        if (preview && previewMeshRef.current && preview.rise !== geometryRiseRef.current) {
+          const previous = previewMeshRef.current.geometry
+          previewMeshRef.current.geometry = createStairPreviewGeometry(preview.rise)
+          previous.dispose()
+          ownedGeometryRef.current = previewMeshRef.current.geometry
+          geometryRiseRef.current = preview.rise
+        }
+        previewRef.current.scale.y = 1
       }
 
       // Forward-facing triangle (editor-side overlay). The run ascends along
@@ -410,19 +457,20 @@ export const StairTool: React.FC = () => {
       // so `reversed` points the triangle out of the entry (where you approach
       // from), sitting just before it — not inside the footprint or at the
       // elevated far end. Centre is the footprint mid-run (origin is the entry).
+      if (!preview) {
+        useFacingPose.getState().clear()
+        openingPreview.clear()
+        return
+      }
+      const sizing = planStairSizing(preview.rise)
       useFacingPose.getState().set({
         position: visualPosition,
         rotationY: rotation,
-        depth: DEFAULT_STAIR_LENGTH,
-        center: [0, DEFAULT_STAIR_LENGTH / 2],
+        depth: sizing.length,
+        center: [0, sizing.length / 2],
         reversed: true,
       })
 
-      if (!preview) {
-        openingPreview.clear()
-        return
-      }
-
       openingPreview.apply(syncAutoStairOpenings(preview.previewNodes))
     }
 
@@ -625,7 +673,7 @@ export const StairTool: React.FC = () => {
           forward-facing triangle is drawn by the editor-side overlay from the
           pose published in `applyDraftPreview`. */}
       <group ref={previewRef}>
-        <mesh castShadow geometry={previewGeometry}>
+        <mesh dispose={null} geometry={previewGeometry} layers={EDITOR_LAYER} ref={previewMeshRef}>
           <meshStandardMaterial color="#818cf8" depthWrite={false} opacity={0.35} transparent />
         </mesh>
       </group>