@pascal-app/editor 0.8.0 → 0.9.1

package/src/components/editor/floating-action-menu.tsx

@@ -5,16 +5,24 @@ import {
   type AnyNodeId,
   type CeilingNode,
   ColumnNode,
+  DEFAULT_WALL_HEIGHT,
   DoorNode,
+  ElevatorNode,
   FenceNode,
   generateId,
+  getWallCurveLength,
+  getWallThickness,
   ItemNode,
+  isRegistryMovable,
+  isRegistrySelectable,
+  nodeRegistry,
   RoofSegmentNode,
   type SlabNode,
   SpawnNode,
   StairNode,
   StairSegmentNode,
   sceneRegistry,
+  useLiveNodeOverrides,
   useScene,
   WallNode,
   WindowNode,
@@ -22,19 +30,20 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
-import { Move } from 'lucide-react'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useRef } from 'react'
 import * as THREE from 'three'
 import { duplicateRoofSubtree } from '../../lib/roof-duplication'
-import { sfxEmitter } from '../../lib/sfx-bus'
+import { emitDeleteSFX, sfxEmitter } from '../../lib/sfx-bus'
 import { duplicateStairSubtree } from '../../lib/stair-duplication'
 import useEditor from '../../store/use-editor'
+import { formatMeasurement, MeasurementPill } from './measurement-pill'
 import { NodeActionMenu } from './node-action-menu'
 
 const ALLOWED_TYPES = [
   'item',
   'door',
   'window',
+  'elevator',
   'roof',
   'roof-segment',
   'stair',
@@ -49,6 +58,85 @@ const ALLOWED_TYPES = [
 const DELETE_ONLY_TYPES: string[] = []
 const HOLE_TYPES = ['slab', 'ceiling']
 
+// Menu scales with camera zoom so it feels anchored to the object, but is
+// clamped on both ends so it stays readable when zoomed way out and doesn't
+// dominate the screen when zoomed in close. Reference values are picked so
+// scale = 1 lands near the editor's default framing.
+const MIN_MENU_SCALE = 0.5
+// Cap at 1 so zooming in doesn't grow the menu past its default pixel size —
+// only zoom-out shrinks it (down to MIN_MENU_SCALE).
+const MAX_MENU_SCALE = 1
+const REF_ORTHO_ZOOM = 20
+const REF_CAMERA_DISTANCE = 12
+
+// World-space Y distance from a node's bbox top to the floating menu anchor.
+// Per-type because in-world chrome above the node (height-resize arrows,
+// measurement labels) varies in vertical reach.
+// `EXTRA_MENU_LIFT` is a uniform global nudge — easier to tune one
+// constant than to bump every per-type entry below.
+const EXTRA_MENU_LIFT = 0.35
+const MENU_Y_OFFSET_DEFAULT = 0.3
+const MENU_Y_OFFSETS: Record<string, number> = {
+  wall: 0.5,
+  door: 0.6,
+  window: 0.6,
+  column: 0.6,
+  // Fence: still clears the height-resize arrow (sits at fence.height +
+  // 0.45) plus the chevron's visual size, but kept low so the menu sits
+  // close to the fence rather than floating well above it.
+  fence: 0.7,
+  // Elevator: clears the cab-height arrow which sits above the SHAFT
+  // top (resolved through level entries), so the menu floats above it.
+  elevator: 0.9,
+  stair: 0.2,
+  'stair-stair': 1.1,
+  'stair-landing': 0.9,
+  // Slab: clears the height arrow that sits at elevation + 0.22 plus the
+  // chevron's own visual reach, so the menu floats just above it.
+  slab: 0.7,
+  // Ceiling: clears the upward height arrow that sits ~0.22 above the
+  // ceiling plane, plus extra headroom so the menu doesn't crowd the
+  // chevron at any zoom level.
+  ceiling: 1.0,
+  // Shelf: clears the height arrow that sits at shelf.height + 0.22
+  // plus the chevron's visual reach.
+  shelf: 0.6,
+}
+
+function getMenuYOffset(node: AnyNode | null): number {
+  if (!node) return MENU_Y_OFFSET_DEFAULT + EXTRA_MENU_LIFT
+  if (node.type === 'stair-segment') {
+    return (MENU_Y_OFFSETS[`stair-${node.segmentType}`] ?? MENU_Y_OFFSET_DEFAULT) + EXTRA_MENU_LIFT
+  }
+  return (MENU_Y_OFFSETS[node.type] ?? MENU_Y_OFFSET_DEFAULT) + EXTRA_MENU_LIFT
+}
+
+// Fence schema defaults — mirror packages/nodes/src/fence/definition.ts so the
+// pill reads sensibly before an explicit height / thickness is set.
+const FENCE_DEFAULT_HEIGHT = 1.8
+const FENCE_DEFAULT_THICKNESS = 0.08
+
+// Dimensions for the height-drag pill. Walls and fences both carry
+// start/end/curveOffset, so getWallCurveLength covers length for either.
+function getHeightPillDimensions(node: WallNode | FenceNode): {
+  height: number
+  length: number
+  thickness: number
+} {
+  if (node.type === 'wall') {
+    return {
+      height: node.height ?? DEFAULT_WALL_HEIGHT,
+      length: getWallCurveLength(node),
+      thickness: getWallThickness(node),
+    }
+  }
+  return {
+    height: node.height ?? FENCE_DEFAULT_HEIGHT,
+    length: getWallCurveLength(node),
+    thickness: node.thickness ?? FENCE_DEFAULT_THICKNESS,
+  }
+}
+
 export function FloatingActionMenu() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const updateNode = useScene((s) => s.updateNode)
@@ -58,17 +146,35 @@ export function FloatingActionMenu() {
   const movingFenceEndpoint = useEditor((s) => s.movingFenceEndpoint)
   const curvingFence = useEditor((s) => s.curvingFence)
   const setMovingNode = useEditor((s) => s.setMovingNode)
-  const setMovingWallEndpoint = useEditor((s) => s.setMovingWallEndpoint)
-  const setMovingFenceEndpoint = useEditor((s) => s.setMovingFenceEndpoint)
   const setCurvingWall = useEditor((s) => s.setCurvingWall)
   const setCurvingFence = useEditor((s) => s.setCurvingFence)
   const setSelection = useViewer((s) => s.setSelection)
   const setEditingHole = useEditor((s) => s.setEditingHole)
+  const unit = useViewer((s) => s.unit)
+  // Drives the height-drag dimension pill below the menu. `activeHandleDrag`
+  // flips only at drag start / end, so subscribing here is cheap — the live
+  // height value is written imperatively in the useFrame below.
+  const activeHandleDrag = useEditor((s) => s.activeHandleDrag)
 
   const groupRef = useRef<THREE.Group>(null)
-  const startEndpointGroupRef = useRef<THREE.Group>(null)
-  const endEndpointGroupRef = useRef<THREE.Group>(null)
-  const [altPressed, setAltPressed] = useState(false)
+  const menuScaleRef = useRef<HTMLDivElement>(null)
+  const pillHeightRef = useRef<HTMLSpanElement>(null)
+
+  // Cached world anchor. The anchor is derived from `Box3.setFromObject`,
+  // which traverses the selected object's children — so a node with a
+  // continuously-animating child (the spinning turbine-vent head) makes the
+  // AABB wobble a few millimetres every frame, and the menu drifts even with
+  // a still camera. We instead recompute the box only when the selection,
+  // the object's world transform, or its geometry actually changes, and
+  // reuse the cached anchor otherwise. (Also removes a per-frame
+  // `setFromObject` for every selection.)
+  const anchorRef = useRef(new THREE.Vector3())
+  const hasAnchorRef = useRef(false)
+  const lastMatrixRef = useRef(new THREE.Matrix4())
+  const lastAnchorKeyRef = useRef<{ id: string | null; node: AnyNode | null }>({
+    id: null,
+    node: null,
+  })
 
   // Only show for single selection of specific types
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
@@ -76,7 +182,23 @@ export function FloatingActionMenu() {
   // Subscribe just to the selected node so unrelated scene updates do not
   // re-render this menu.
   const node = useScene((s) => (selectedId ? (s.nodes[selectedId as AnyNodeId] ?? null) : null))
-  const isValidType = node ? ALLOWED_TYPES.includes(node.type) : false
+  // ALLOWED_TYPES is the hardcoded set; registry-driven kinds (any
+  // NodeDefinition with `capabilities.selectable`) get the floating menu
+  // by default too. Phase 4 collapses these into a single registry check.
+  const isValidType = node
+    ? ALLOWED_TYPES.includes(node.type) || isRegistrySelectable(node.type)
+    : false
+
+  // Height-drag pill: shown just above the menu only while the selected
+  // wall/fence height arrow is being dragged. Length + thickness are fixed
+  // during a height drag, so they're computed here; the live height value
+  // is updated imperatively in the useFrame (same pattern as the scale).
+  const pillNode = node?.type === 'wall' || node?.type === 'fence' ? node : null
+  const isHeightDragPill =
+    pillNode !== null &&
+    activeHandleDrag?.nodeId === selectedId &&
+    activeHandleDrag?.label === 'height'
+  const pillDims = pillNode ? getHeightPillDimensions(pillNode) : null
 
   // Boolean selector, only re-renders when curving availability actually flips.
   const canCurveSelectedWall = useScene((s) => {
@@ -95,111 +217,73 @@ export function FloatingActionMenu() {
     })
   })
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Alt') {
-        setAltPressed(true)
-      }
-    }
-
-    const handleKeyUp = (event: KeyboardEvent) => {
-      if (event.key === 'Alt') {
-        setAltPressed(false)
-      }
-    }
+  useFrame((state) => {
+    if (!(selectedId && isValidType && groupRef.current)) return
 
-    const handleBlur = () => {
-      setAltPressed(false)
+    // Scale the HTML menu with camera zoom (ortho) or inverse distance
+    // (perspective) so it feels anchored to the world, clamped on both ends
+    // so it stays readable at extreme zoom-out and doesn't fill the screen
+    // when zoomed in close.
+    if (menuScaleRef.current) {
+      const raw =
+        state.camera instanceof THREE.OrthographicCamera
+          ? state.camera.zoom / REF_ORTHO_ZOOM
+          : REF_CAMERA_DISTANCE /
+            Math.max(state.camera.position.distanceTo(groupRef.current.position), 0.001)
+      const scale = Math.min(MAX_MENU_SCALE, Math.max(MIN_MENU_SCALE, raw))
+      menuScaleRef.current.style.transform = `scale(${scale})`
     }
 
-    window.addEventListener('keydown', handleKeyDown)
-    window.addEventListener('keyup', handleKeyUp)
-    window.addEventListener('blur', handleBlur)
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown)
-      window.removeEventListener('keyup', handleKeyUp)
-      window.removeEventListener('blur', handleBlur)
+    // Live height readout for the drag pill. The dragged height lands in
+    // `useLiveNodeOverrides` (not the scene store) each frame, so read it
+    // imperatively here instead of forcing a per-frame React re-render.
+    if (
+      pillHeightRef.current &&
+      (node?.type === 'wall' || node?.type === 'fence') &&
+      activeHandleDrag?.nodeId === selectedId &&
+      activeHandleDrag?.label === 'height'
+    ) {
+      const override = useLiveNodeOverrides.getState().overrides.get(selectedId) as
+        | { height?: number }
+        | undefined
+      const fallbackHeight = node.type === 'wall' ? DEFAULT_WALL_HEIGHT : FENCE_DEFAULT_HEIGHT
+      const liveHeight = override?.height ?? node.height ?? fallbackHeight
+      pillHeightRef.current.textContent = `H ${formatMeasurement(liveHeight, unit)}`
     }
-  }, [])
-
-  useFrame(() => {
-    if (!(selectedId && isValidType && groupRef.current)) return
 
     const obj = sceneRegistry.nodes.get(selectedId)
     if (obj) {
-      // Calculate bounding box in world space
-      const box = new THREE.Box3().setFromObject(obj)
-      if (!box.isEmpty()) {
-        const center = box.getCenter(new THREE.Vector3())
-        // Position above the object, with extra offset for walls/slabs to avoid covering measurement labels
-        const isStructural = node && [...DELETE_ONLY_TYPES, ...HOLE_TYPES].includes(node.type)
-        const yOffset = isStructural ? 0.8 : 0.3
-        groupRef.current.position.set(center.x, box.max.y + yOffset, center.z)
-      }
+      // Recompute the anchor only when the object genuinely changes —
+      // reselected, moved (its own world matrix changed), or resized
+      // (a fresh store node on commit, or a live override / handle drag
+      // mid-resize). A spinning child changes the head's matrix, not the
+      // registered group's, so it never triggers a recompute → the menu
+      // holds still.
+      const overrideActive = useLiveNodeOverrides.getState().overrides.get(selectedId) != null
+      const dragActive = activeHandleDrag?.nodeId === selectedId
+      const selectionChanged =
+        lastAnchorKeyRef.current.id !== selectedId || lastAnchorKeyRef.current.node !== node
+      const matrixChanged = !lastMatrixRef.current.equals(obj.matrixWorld)
 
-      if (node?.type === 'wall' || node?.type === 'fence') {
-        const segment = node as WallNode | FenceNode
-        const endpointYOffset = 0.35
-        const startWorld =
-          node.type === 'wall'
-            ? obj.localToWorld(new THREE.Vector3(0, 0, 0))
-            : obj.localToWorld(new THREE.Vector3(segment.start[0], 0, segment.start[1]))
-        const endWorld =
-          node.type === 'wall'
-            ? obj.localToWorld(
-                new THREE.Vector3(
-                  Math.hypot(segment.end[0] - segment.start[0], segment.end[1] - segment.start[1]),
-                  0,
-                  0,
-                ),
-              )
-            : obj.localToWorld(new THREE.Vector3(segment.end[0], 0, segment.end[1]))
-
-        if (startEndpointGroupRef.current) {
-          startEndpointGroupRef.current.position.set(
-            startWorld.x,
-            startWorld.y + endpointYOffset,
-            startWorld.z,
-          )
-        }
-        if (endEndpointGroupRef.current) {
-          endEndpointGroupRef.current.position.set(
-            endWorld.x,
-            endWorld.y + endpointYOffset,
-            endWorld.z,
-          )
+      if (selectionChanged || matrixChanged || overrideActive || dragActive) {
+        const box = new THREE.Box3().setFromObject(obj)
+        if (!box.isEmpty()) {
+          const center = box.getCenter(new THREE.Vector3())
+          // Position above the object. Per-type offsets clear each kind's
+          // in-world chrome (height-resize arrows, measurement labels).
+          anchorRef.current.set(center.x, box.max.y + getMenuYOffset(node), center.z)
+          hasAnchorRef.current = true
         }
+        lastMatrixRef.current.copy(obj.matrixWorld)
+        lastAnchorKeyRef.current = { id: selectedId, node }
+      }
+
+      if (hasAnchorRef.current) {
+        groupRef.current.position.copy(anchorRef.current)
       }
     }
   })
 
-  const handleMove = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation()
-      if (!node) return
-      sfxEmitter.emit('sfx:item-pick')
-      if (
-        node.type === 'item' ||
-        node.type === 'window' ||
-        node.type === 'door' ||
-        node.type === 'wall' ||
-        node.type === 'fence' ||
-        node.type === 'column' ||
-        node.type === 'slab' ||
-        node.type === 'ceiling' ||
-        node.type === 'spawn' ||
-        node.type === 'roof' ||
-        node.type === 'roof-segment' ||
-        node.type === 'stair' ||
-        node.type === 'stair-segment'
-      ) {
-        setMovingNode(node as any)
-      }
-      setSelection({ selectedIds: [] })
-    },
-    [node, setMovingNode, setSelection],
-  )
   const handleCurve = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
@@ -217,23 +301,16 @@ export function FloatingActionMenu() {
     },
     [canCurveSelectedWall, node, setCurvingFence, setCurvingWall, setSelection],
   )
-  const handleEndpointMove = useCallback(
-    (endpoint: 'start' | 'end', e: React.MouseEvent) => {
+  const handleMove = useCallback(
+    (e: React.MouseEvent) => {
       e.stopPropagation()
       if (!node) return
       sfxEmitter.emit('sfx:item-pick')
-      if (node.type === 'wall') {
-        setMovingWallEndpoint({ wall: node, endpoint })
-      } else if (node.type === 'fence') {
-        setMovingFenceEndpoint({ fence: node, endpoint })
-      } else {
-        return
-      }
+      setMovingNode(node as any)
       setSelection({ selectedIds: [] })
     },
-    [node, setMovingFenceEndpoint, setMovingWallEndpoint, setSelection],
+    [node, setMovingNode, setSelection],
   )
-
   const handleDuplicate = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
@@ -263,6 +340,8 @@ export function FloatingActionMenu() {
           duplicate = WindowNode.parse(duplicateInfo)
         } else if (node.type === 'item') {
           duplicate = ItemNode.parse(duplicateInfo)
+        } else if (node.type === 'elevator') {
+          duplicate = ElevatorNode.parse(duplicateInfo)
         } else if (node.type === 'column') {
           duplicate = ColumnNode.parse(duplicateInfo)
         } else if (node.type === 'wall') {
@@ -284,6 +363,16 @@ export function FloatingActionMenu() {
         } else if (node.type === 'spawn') {
           duplicate = SpawnNode.parse(duplicateInfo)
         }
+
+        // Registry-driven fallback: any kind with a NodeDefinition can be
+        // duplicated through its schema's parse(). Future built-in kinds
+        // get duplicate for free.
+        if (!duplicate) {
+          const def = nodeRegistry.get(node.type)
+          if (def) {
+            duplicate = def.schema.parse(duplicateInfo) as AnyNode
+          }
+        }
       } catch (error) {
         console.error('Failed to parse duplicate', error)
         useScene.temporal.getState().resume()
@@ -296,7 +385,11 @@ export function FloatingActionMenu() {
       }
 
       if (duplicate) {
-        if (duplicate.type === 'door' || duplicate.type === 'window') {
+        if (
+          duplicate.type === 'door' ||
+          duplicate.type === 'window' ||
+          duplicate.type === 'elevator'
+        ) {
           useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
         } else if (duplicate.type === 'wall') {
           useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
@@ -322,9 +415,39 @@ export function FloatingActionMenu() {
           }
 
           // Duplicate children for stair nodes
+        } else if (
+          duplicate.type === 'item' ||
+          duplicate.type === 'chimney' ||
+          duplicate.type === 'dormer'
+        ) {
+          // Items, chimneys & dormers use pure drag-to-place: NO node is
+          // inserted into the scene until the user clicks to commit. The
+          // `setMovingNode` call below hands the clone (with
+          // `metadata.isNew = true` + no id) to its move tool —
+          // `MoveItemTool` / `MoveChimneyTool` / `MoveDormerTool` — which
+          // create a draft and call `createNode` on the commit click.
+          // Pre-creating here would drop a second copy into the scene
+          // before any click — the furnish-tab "duplicate auto-places an
+          // item without clicking" bug. (Item has its own
+          // draft-committing move tool, so it must skip the generic
+          // registry auto-create branch below.)
+        } else if (nodeRegistry.has(duplicate.type)) {
+          // Registry-driven kinds: offset the position slightly so the
+          // duplicate doesn't overlap exactly, then create + hand to the
+          // move tool. Mirrors the roof-segment / stair-segment behavior.
+          if ('position' in duplicate && Array.isArray((duplicate as any).position)) {
+            const pos = (duplicate as { position: [number, number, number] }).position
+            ;(duplicate as { position: [number, number, number] }).position = [
+              pos[0] + 1,
+              pos[1],
+              pos[2] + 1,
+            ]
+          }
+          useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
         }
         if (
           duplicate.type === 'item' ||
+          duplicate.type === 'elevator' ||
           duplicate.type === 'column' ||
           duplicate.type === 'wall' ||
           duplicate.type === 'fence' ||
@@ -332,7 +455,10 @@ export function FloatingActionMenu() {
           duplicate.type === 'door' ||
           duplicate.type === 'roof-segment' ||
           duplicate.type === 'spawn' ||
-          duplicate.type === 'stair-segment'
+          duplicate.type === 'stair-segment' ||
+          // Registry-driven kinds get picked up by MoveTool's generic
+          // fallback (MoveRegistryNodeTool) so the user can reposition.
+          nodeRegistry.has(duplicate.type)
         ) {
           setMovingNode(duplicate as any)
         } else if (duplicate.type === 'stair') {
@@ -388,11 +514,7 @@ export function FloatingActionMenu() {
     (e: React.MouseEvent) => {
       e.stopPropagation()
       if (!selectedId) return
-      if (node?.type === 'item') {
-        sfxEmitter.emit('sfx:item-delete')
-      } else {
-        sfxEmitter.emit('sfx:structure-delete')
-      }
+      emitDeleteSFX(node?.type)
       setSelection({ selectedIds: [] })
       useScene.getState().deleteNode(selectedId as AnyNodeId)
     },
@@ -416,86 +538,55 @@ export function FloatingActionMenu() {
             pointerEvents: 'auto',
             touchAction: 'none',
           }}
-          zIndexRange={[100, 0]}
+          zIndexRange={[25, 0]}
         >
-          <NodeActionMenu
-            onAddHole={node && HOLE_TYPES.includes(node.type) ? handleAddHole : undefined}
-            onCurve={
-              node?.type === 'fence' || (node?.type === 'wall' && canCurveSelectedWall)
-                ? handleCurve
-                : undefined
-            }
-            onDelete={handleDelete}
-            onDuplicate={
-              node &&
-              node.type !== 'spawn' &&
-              !DELETE_ONLY_TYPES.includes(node.type) &&
-              !HOLE_TYPES.includes(node.type)
-                ? handleDuplicate
-                : undefined
-            }
-            onMove={node && !DELETE_ONLY_TYPES.includes(node.type) ? handleMove : undefined}
-            onPointerDown={(e) => e.stopPropagation()}
-            onPointerUp={(e) => e.stopPropagation()}
-          />
+          <div className="relative" ref={menuScaleRef} style={{ transformOrigin: 'center center' }}>
+            <NodeActionMenu
+              onAddHole={node && HOLE_TYPES.includes(node.type) ? handleAddHole : undefined}
+              onCurve={
+                node?.type === 'fence' || (node?.type === 'wall' && canCurveSelectedWall)
+                  ? handleCurve
+                  : undefined
+              }
+              onMove={
+                // Fully registry-driven: any kind that declares
+                // `capabilities.movable`, a `floorplanMoveTarget`, or a
+                // 3D `affordanceTools.move` mover gets the Move button.
+                // Adding a new movable kind never touches this file.
+                node && isRegistryMovable(node.type) ? handleMove : undefined
+              }
+              onDelete={handleDelete}
+              onDuplicate={
+                node &&
+                node.type !== 'spawn' &&
+                !DELETE_ONLY_TYPES.includes(node.type) &&
+                !HOLE_TYPES.includes(node.type)
+                  ? handleDuplicate
+                  : undefined
+              }
+              onPointerDown={(e) => e.stopPropagation()}
+              onPointerUp={(e) => e.stopPropagation()}
+            />
+            {/* Height-drag dimension pill. Absolutely positioned just above
+                the menu (away from the height arrow below it) so it rides the
+                same scale transform + anchor, never overlaps the menu, and
+                needs no menu lift — which is what caused the click flicker.
+                Non-interactive. */}
+            {isHeightDragPill && pillDims ? (
+              <div className="-translate-x-1/2 pointer-events-none absolute bottom-full left-1/2 mb-2">
+                <MeasurementPill
+                  height={pillDims.height}
+                  length={pillDims.length}
+                  primary="height"
+                  ref={pillHeightRef}
+                  thickness={pillDims.thickness}
+                  unit={unit}
+                />
+              </div>
+            ) : null}
+          </div>
         </Html>
       </group>
-      {(node?.type === 'wall' || node?.type === 'fence') && (
-        <>
-          <group ref={startEndpointGroupRef}>
-            <Html
-              center
-              style={{ pointerEvents: 'auto', touchAction: 'none' }}
-              zIndexRange={[100, 0]}
-            >
-              <button
-                aria-label={node.type === 'wall' ? 'Move wall start' : 'Move fence start'}
-                className={`pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full border bg-background/95 shadow-lg backdrop-blur-md transition-colors ${
-                  altPressed
-                    ? 'border-amber-500/80 bg-amber-500/15 text-amber-100 hover:bg-amber-500/20 hover:text-white'
-                    : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
-                }`}
-                onClick={(e) => handleEndpointMove('start', e)}
-                onPointerDown={(e) => e.stopPropagation()}
-                title={
-                  node.type === 'wall'
-                    ? 'Move wall start (Alt to detach)'
-                    : 'Move fence start (Alt to detach)'
-                }
-                type="button"
-              >
-                <Move className="h-4 w-4" />
-              </button>
-            </Html>
-          </group>
-          <group ref={endEndpointGroupRef}>
-            <Html
-              center
-              style={{ pointerEvents: 'auto', touchAction: 'none' }}
-              zIndexRange={[100, 0]}
-            >
-              <button
-                aria-label={node.type === 'wall' ? 'Move wall end' : 'Move fence end'}
-                className={`pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full border bg-background/95 shadow-lg backdrop-blur-md transition-colors ${
-                  altPressed
-                    ? 'border-amber-500/80 bg-amber-500/15 text-amber-100 hover:bg-amber-500/20 hover:text-white'
-                    : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
-                }`}
-                onClick={(e) => handleEndpointMove('end', e)}
-                onPointerDown={(e) => e.stopPropagation()}
-                title={
-                  node.type === 'wall'
-                    ? 'Move wall end (Alt to detach)'
-                    : 'Move fence end (Alt to detach)'
-                }
-                type="button"
-              >
-                <Move className="h-4 w-4" />
-              </button>
-            </Html>
-          </group>
-        </>
-      )}
     </group>
   )
 }

package/src/components/editor/floating-building-action-menu.tsx

@@ -57,7 +57,7 @@ export function FloatingBuildingActionMenu() {
           pointerEvents: 'auto',
           touchAction: 'none',
         }}
-        zIndexRange={[100, 0]}
+        zIndexRange={[25, 0]}
       >
         <NodeActionMenu
           onMove={handleMove}