@pascal-app/editor 0.9.1 → 0.9.2

package/src/components/editor/use-floorplan-scene-data.ts

@@ -36,7 +36,7 @@ function useLevelChildren<TNode extends AnyNode>(
       }
 
       const levelNode = state.nodes[levelId]
-      if (!levelNode || levelNode.type !== 'level') {
+      if (levelNode?.type !== 'level') {
         return [] as TNode[]
       }
 
@@ -105,7 +105,7 @@ export function useFloorplanSceneData({
       }
 
       const buildingNode = state.nodes[currentBuildingId]
-      if (!buildingNode || buildingNode.type !== 'building') {
+      if (buildingNode?.type !== 'building') {
         return [] as LevelNode[]
       }
 
@@ -133,7 +133,7 @@ export function useFloorplanSceneData({
       }
 
       const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+      if (nextLevelNode?.type !== 'level') {
         return [] as RoofNode[]
       }
 
@@ -149,7 +149,7 @@ export function useFloorplanSceneData({
       }
 
       const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+      if (nextLevelNode?.type !== 'level') {
         return [] as OpeningNode[]
       }
 
@@ -171,7 +171,7 @@ export function useFloorplanSceneData({
       }
 
       const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+      if (nextLevelNode?.type !== 'level') {
         return [] as AnyNode[]
       }
 

package/src/components/editor/use-mesh-settle-epoch.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Bumps after the 3D meshes have had a chance to settle following a scene
+ * change. `computeGroupBox` reads mesh WORLD bounds, but a scene commit
+ * (undo/redo included) reaches the meshes asynchronously — renderers
+ * reconcile on the next React commit and the geometry systems rebuild in the
+ * next frame — so anything that derives geometry from the meshes in the same
+ * render as the `nodes` change reads STALE positions. Depend on this epoch
+ * (alongside `nodes`) to recompute once more after two animation frames,
+ * when transforms and rebuilt geometry are in place.
+ */
+export function useMeshSettleEpoch(nodes: unknown): number {
+  const [epoch, setEpoch] = useState(0)
+  useEffect(() => {
+    let raf2 = 0
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setEpoch((e) => e + 1))
+    })
+    return () => {
+      cancelAnimationFrame(raf1)
+      cancelAnimationFrame(raf2)
+    }
+  }, [nodes])
+  return epoch
+}

package/src/components/editor/wall-measurement-label.tsx

@@ -23,6 +23,7 @@ import { Html } from '@react-three/drei'
 import { createPortal, useFrame } from '@react-three/fiber'
 import { useMemo, useState } from 'react'
 import * as THREE from 'three'
+import { formatLinearMeasurement } from '../../lib/measurements'
 
 const GUIDE_Y_OFFSET = 0.08
 const LABEL_LIFT = 0.08
@@ -62,17 +63,6 @@ type WallFaceLine = {
   end: Point2D
 }
 
-function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
-  if (unit === 'imperial') {
-    const feet = value * 3.280_84
-    const wholeFeet = Math.floor(feet)
-    const inches = Math.round((feet - wholeFeet) * 12)
-    if (inches === 12) return `${wholeFeet + 1}'0"`
-    return `${wholeFeet}'${inches}"`
-  }
-  return `${Number.parseFloat(value.toFixed(2))}m`
-}
-
 export function WallMeasurementLabel() {
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const nodes = useScene((state) => state.nodes)
@@ -547,8 +537,8 @@ function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
     }
     return total
   }, [guide, wall])
-  const label = formatMeasurement(length, unit)
-  const heightLabel = `H ${formatMeasurement(wall.height ?? DEFAULT_WALL_HEIGHT, unit)}`
+  const label = formatLinearMeasurement(length, unit)
+  const heightLabel = `H ${formatLinearMeasurement(wall.height ?? DEFAULT_WALL_HEIGHT, unit)}`
 
   if (!(guide && Number.isFinite(length) && length >= 0.01)) return null
 

package/src/components/editor/wall-move-side-handles.tsx

@@ -32,8 +32,15 @@ import {
 } from 'three'
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { isHistoryShortcut } from '../../lib/history'
+import { endpointReshapeScope } from '../../lib/interaction/scope'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
+import useInteractionScope, {
+  useEndpointReshape,
+  useIsCurveReshape,
+  useMovingNode,
+} from '../../store/use-interaction-scope'
 import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
 import {
   createArrowHitAreaGeometry,
@@ -54,7 +61,7 @@ const ARROW_HOVER_COLOR = '#a5b4fc'
 // Match the door arrows: scale the rendered chevron down to ~two-thirds
 // so the in-world handles read as a single UI family.
 const ARROW_SCALE = 0.65
-const CORNER_HEX_RADIUS = 0.16
+const CORNER_HEX_RADIUS = 0.11
 const CORNER_DASH_SIZE = 0.1
 const CORNER_GAP_SIZE = 0.07
 const CORNER_DASH_THICKNESS = 0.006
@@ -118,11 +125,9 @@ export function WallMoveSideHandles() {
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const mode = useEditor((state) => state.mode)
   const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
-  const movingNode = useEditor((state) => state.movingNode)
-  const movingWallEndpoint = useEditor((state) => state.movingWallEndpoint)
-  const movingFenceEndpoint = useEditor((state) => state.movingFenceEndpoint)
-  const curvingWall = useEditor((state) => state.curvingWall)
-  const curvingFence = useEditor((state) => state.curvingFence)
+  const movingNode = useMovingNode()
+  const endpointReshape = useEndpointReshape()
+  const isCurveReshape = useIsCurveReshape()
 
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
   // Fence side-move / height / corner-pickers now flow through the
@@ -140,10 +145,8 @@ export function WallMoveSideHandles() {
     !isFloorplanHovered &&
     mode !== 'delete' &&
     !movingNode &&
-    !movingWallEndpoint &&
-    !movingFenceEndpoint &&
-    !curvingWall &&
-    !curvingFence
+    !endpointReshape &&
+    !isCurveReshape
 
   if (!shouldRender || !selectedNode) return null
 
@@ -329,11 +332,12 @@ function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint:
   }, [])
 
   const activateEndpointMove = (event: ThreeEvent<PointerEvent>) => {
+    if (event.button !== 0) return
     event.stopPropagation()
     suppressBoxSelectForPointer(event)
     sfxEmitter.emit('sfx:item-pick')
     document.body.style.cursor = 'grabbing'
-    useEditor.getState().setMovingWallEndpoint({ wall, endpoint })
+    useInteractionScope.getState().begin(endpointReshapeScope(wall.id, endpoint))
   }
 
   return (
@@ -433,6 +437,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
   const handleY = wallHeight + HEIGHT_HANDLE_OFFSET
 
   const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
+    if (event.button !== 0) return
     event.stopPropagation()
     suppressBoxSelectForPointer(event)
     const levelObject = wall.parentId ? sceneRegistry.nodes.get(wall.parentId) : null
@@ -468,7 +473,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
 
     document.body.style.cursor = 'ns-resize'
     sfxEmitter.emit('sfx:item-pick')
-    useEditor.getState().setActiveHandleDrag({ nodeId: wallId, label: 'height' })
+    useInteractionScope.getState().begin({ kind: 'handle-drag', nodeId: wallId, handle: 'height' })
     // Suppress R3F node pointer events until pointerup completes so the
     // synthesized click doesn't reroute selection to whatever mesh sits
     // under the cursor at release.
@@ -494,11 +499,12 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       window.removeEventListener('pointermove', onMove)
       window.removeEventListener('pointerup', onUp)
       window.removeEventListener('pointercancel', onCancel)
+      window.removeEventListener('keydown', onKeyDown, true)
       if (document.body.style.cursor === 'ns-resize') {
         document.body.style.cursor = ''
       }
       useScene.temporal.getState().resume()
-      useEditor.getState().setActiveHandleDrag(null)
+      useInteractionScope.getState().endIf((sc) => sc.kind === 'handle-drag')
       useViewer.getState().setInputDragging(false)
       dragCleanupRef.current = null
     }
@@ -523,10 +529,21 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
       cleanup()
     }
 
+    // Escape / ⌘Z abort the drag — capture phase so they win over the global
+    // use-keyboard arms (⌘Z must never history-jump under a live pointer).
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape' && !isHistoryShortcut(e)) return
+      e.preventDefault()
+      e.stopPropagation()
+      swallowNextClick()
+      onCancel()
+    }
+
     dragCleanupRef.current = cleanup
     window.addEventListener('pointermove', onMove)
     window.addEventListener('pointerup', onUp)
     window.addEventListener('pointercancel', onCancel)
+    window.addEventListener('keydown', onKeyDown, true)
   }
 
   return (
@@ -605,16 +622,15 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
   useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
 
   const activateWallMove = (event: ThreeEvent<PointerEvent>) => {
+    if (event.button !== 0) return
     event.stopPropagation()
     suppressBoxSelectForPointer(event)
     document.body.style.cursor = 'grabbing'
 
     sfxEmitter.emit('sfx:item-pick')
     useEditor.getState().setMovingNode(wall)
-    useEditor.getState().setMovingWallEndpoint(null)
-    useEditor.getState().setMovingFenceEndpoint(null)
-    useEditor.getState().setCurvingWall(null)
-    useEditor.getState().setCurvingFence(null)
+    useInteractionScope.getState().endIf((s) => s.kind === 'reshaping' && s.reshape === 'endpoint')
+    useInteractionScope.getState().endIf((s) => s.kind === 'reshaping' && s.reshape === 'curve')
     // Keep the wall selected so it stays the active item once the move
     // commits; the `!movingNode` guard on the handles hides them mid-drag.
   }
@@ -696,16 +712,15 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
   useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial])
 
   const activateFenceMove = (event: ThreeEvent<PointerEvent>) => {
+    if (event.button !== 0) return
     event.stopPropagation()
     suppressBoxSelectForPointer(event)
     document.body.style.cursor = 'grabbing'
 
     sfxEmitter.emit('sfx:item-pick')
     useEditor.getState().setMovingNode(fence)
-    useEditor.getState().setMovingWallEndpoint(null)
-    useEditor.getState().setMovingFenceEndpoint(null)
-    useEditor.getState().setCurvingWall(null)
-    useEditor.getState().setCurvingFence(null)
+    useInteractionScope.getState().endIf((s) => s.kind === 'reshaping' && s.reshape === 'endpoint')
+    useInteractionScope.getState().endIf((s) => s.kind === 'reshaping' && s.reshape === 'curve')
     // Keep the fence selected so it stays active once the move commits.
   }
 

package/src/components/editor/wall-snap-beacon-layer.tsx

@@ -1,10 +1,23 @@
 'use client'
 
-import { sceneRegistry } from '@pascal-app/core'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  DEFAULT_WALL_HEIGHT,
+  getWallCurveFrameAt,
+  getWallCurveLength,
+  getWallThickness,
+  isCurvedWall,
+  resolveLevelId,
+  sceneRegistry,
+  spatialGridManager,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
 import { useWallSnapIndicator, type WallSnapKind } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
 import { useFrame } from '@react-three/fiber'
-import { memo, useRef } from 'react'
+import { memo, useMemo, useRef } from 'react'
 import { BoxGeometry, CircleGeometry, CylinderGeometry, type Group } from 'three'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
@@ -20,8 +33,8 @@ import { EDITOR_LAYER } from '../../lib/constants'
  *   intersection      → ✕ cross   wall body (edge) → circle
  *
  * Subscribes to the shared `useWallSnapIndicator` store (published by the wall
- * draft + endpoint-move tools). Shares the indigo accent of
- * `Alignment3DGuideLayer` for visual consistency.
+ * draft + endpoint-move tools). The vertical mouse pillar and the corner
+ * (endpoint) square are green; the other floor glyphs are indigo.
  *
  * The point carries only XZ (building-local plan coords); like the alignment
  * guides it's lifted to the active level's building-local Y each frame so it
@@ -30,10 +43,19 @@ import { EDITOR_LAYER } from '../../lib/constants'
  */
 
 const BEACON_COLOR = 0x81_8c_f8 // indigo-400 — matches the alignment guide accent
+const MARKER_GREEN = 0x22_c5_5e // green-500 — vertical mouse marker + corner (endpoint) glyph
 const BEACON_HEIGHT = 2.5 // world-meter height of the pillar
 const BEACON_RADIUS = 0.018 // world-meter radius of the pillar
 const MARKER = 0.13 // world-meter base size of the floor glyph
 const FLOOR_LIFT = 0.012 // tiny lift so the marker reads above the floor grid
+const WALL_TOP_HIGHLIGHT_LIFT = 0.035
+const WALL_TOP_HIGHLIGHT_HEIGHT = 0.018
+const WALL_TOP_HIGHLIGHT_OVERHANG = 0.14
+const WALL_TOP_GLOW_HEIGHT = 0.026
+const WALL_TOP_GLOW_OVERHANG = 0.36
+const WALL_TOP_END_OVERHANG = 0.08
+const CURVED_WALL_HIGHLIGHT_SEGMENT_LENGTH = 0.45
+const NO_RAYCAST = () => null
 
 // Shared resources — one material + unit geometries, so snap churn during a
 // drag doesn't rebuild GPU buffers (mirrors the alignment guide layer).
@@ -45,17 +67,49 @@ const beaconMaterial = new MeshBasicNodeMaterial({
   transparent: true,
   opacity: 0.9,
 })
+const greenMarkerMaterial = new MeshBasicNodeMaterial({
+  color: MARKER_GREEN,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+  opacity: 0.9,
+})
+const wallTopHighlightMaterial = new MeshBasicNodeMaterial({
+  color: BEACON_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+  opacity: 0.88,
+})
+const wallTopHighlightGlowMaterial = new MeshBasicNodeMaterial({
+  color: BEACON_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+  opacity: 0.26,
+})
 const PILLAR_GEOMETRY = new CylinderGeometry(BEACON_RADIUS, BEACON_RADIUS, BEACON_HEIGHT, 8)
 // Flat unit geometries scaled per marker. Boxes are 0.002 tall so they read as
 // a flat plate; circles/triangles lie flat via an X rotation at the mesh.
 const FLAT_BOX_GEOMETRY = new BoxGeometry(1, 0.002, 1)
+const WALL_TOP_HIGHLIGHT_GEOMETRY = new BoxGeometry(1, 1, 1)
 const TRIANGLE_GEOMETRY = new CircleGeometry(1, 3)
 const CIRCLE_GEOMETRY = new CircleGeometry(1, 28)
 
 export const WallSnapBeaconLayer = memo(function WallSnapBeaconLayer() {
   const point = useWallSnapIndicator((s) => s.point)
   const levelId = useViewer((s) => s.selection.levelId)
+  const nodes = useScene((s) => s.nodes)
   const groupRef = useRef<Group>(null)
+  const highlightedWalls = useMemo(() => {
+    if (!point?.wallIds?.length) return []
+    return point.wallIds
+      .map((wallId) => nodes[wallId as AnyNodeId])
+      .filter((node): node is WallNode => node?.type === 'wall' && node.visible !== false)
+  }, [nodes, point?.wallIds])
 
   // Track the active level's building-local Y each frame so the beacon stands
   // on the floor being edited, not the building base — same source the
@@ -70,10 +124,13 @@ export const WallSnapBeaconLayer = memo(function WallSnapBeaconLayer() {
   if (!point) return null
   return (
     <group ref={groupRef}>
+      {highlightedWalls.map((wall) => (
+        <WallTopHighlight key={wall.id} nodes={nodes} wall={wall} />
+      ))}
       <mesh
         geometry={PILLAR_GEOMETRY}
         layers={EDITOR_LAYER}
-        material={beaconMaterial}
+        material={greenMarkerMaterial}
         position={[point.x, BEACON_HEIGHT / 2, point.z]}
         renderOrder={1002}
       />
@@ -82,6 +139,103 @@ export const WallSnapBeaconLayer = memo(function WallSnapBeaconLayer() {
   )
 })
 
+type WallTopHighlightSegment = {
+  angle: number
+  center: [number, number]
+  length: number
+}
+
+function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>) {
+  const levelId = resolveLevelId(wall, nodes as Record<string, AnyNode>)
+  const slabElevation = spatialGridManager.getSlabElevationForWall(
+    levelId,
+    wall.start,
+    wall.end,
+    wall.curveOffset ?? 0,
+    wall.thickness,
+  )
+  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+  return (slabElevation > 0 ? slabElevation + wallHeight : wallHeight) + WALL_TOP_HIGHLIGHT_LIFT
+}
+
+function buildHighlightSegment(start: [number, number], end: [number, number]) {
+  const dx = end[0] - start[0]
+  const dz = end[1] - start[1]
+  const length = Math.hypot(dx, dz)
+  if (length < 1e-6) return null
+
+  return {
+    angle: -Math.atan2(dz, dx),
+    center: [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2] as [number, number],
+    length,
+  }
+}
+
+function buildWallTopHighlightSegments(wall: WallNode): WallTopHighlightSegment[] {
+  if (!isCurvedWall(wall)) {
+    const segment = buildHighlightSegment(wall.start, wall.end)
+    return segment ? [segment] : []
+  }
+
+  const sampleCount = Math.max(
+    8,
+    Math.ceil(getWallCurveLength(wall) / CURVED_WALL_HIGHLIGHT_SEGMENT_LENGTH),
+  )
+  const segments: WallTopHighlightSegment[] = []
+  let previous = getWallCurveFrameAt(wall, 0).point
+  for (let index = 1; index <= sampleCount; index += 1) {
+    const current = getWallCurveFrameAt(wall, index / sampleCount).point
+    const segment = buildHighlightSegment([previous.x, previous.y], [current.x, current.y])
+    if (segment) segments.push(segment)
+    previous = current
+  }
+  return segments
+}
+
+function WallTopHighlight({
+  nodes,
+  wall,
+}: {
+  nodes: Readonly<Record<string, AnyNode>>
+  wall: WallNode
+}) {
+  const segments = useMemo(() => buildWallTopHighlightSegments(wall), [wall])
+  const y = getWallTopY(wall, nodes)
+  const width = Math.max(getWallThickness(wall) + WALL_TOP_HIGHLIGHT_OVERHANG, 0.24)
+  const glowWidth = Math.max(getWallThickness(wall) + WALL_TOP_GLOW_OVERHANG, 0.42)
+
+  return (
+    <>
+      {segments.map((segment, index) => (
+        <group key={`${wall.id}:${index}`}>
+          <mesh
+            frustumCulled={false}
+            geometry={WALL_TOP_HIGHLIGHT_GEOMETRY}
+            layers={EDITOR_LAYER}
+            material={wallTopHighlightGlowMaterial}
+            position={[segment.center[0], y - 0.003, segment.center[1]]}
+            raycast={NO_RAYCAST}
+            renderOrder={1003}
+            rotation={[0, segment.angle, 0]}
+            scale={[segment.length + WALL_TOP_END_OVERHANG, WALL_TOP_GLOW_HEIGHT, glowWidth]}
+          />
+          <mesh
+            frustumCulled={false}
+            geometry={WALL_TOP_HIGHLIGHT_GEOMETRY}
+            layers={EDITOR_LAYER}
+            material={wallTopHighlightMaterial}
+            position={[segment.center[0], y + 0.002, segment.center[1]]}
+            raycast={NO_RAYCAST}
+            renderOrder={1004}
+            rotation={[0, segment.angle, 0]}
+            scale={[segment.length + WALL_TOP_END_OVERHANG, WALL_TOP_HIGHLIGHT_HEIGHT, width]}
+          />
+        </group>
+      ))}
+    </>
+  )
+}
+
 /** Floor glyph whose shape encodes which kind of geometry the point snapped to. */
 function SnapMarker({ kind, x, z }: { kind: WallSnapKind; x: number; z: number }) {
   const y = FLOOR_LIFT
@@ -90,7 +244,7 @@ function SnapMarker({ kind, x, z }: { kind: WallSnapKind; x: number; z: number }
       <mesh
         geometry={FLAT_BOX_GEOMETRY}
         layers={EDITOR_LAYER}
-        material={beaconMaterial}
+        material={greenMarkerMaterial}
         position={[x, y, z]}
         renderOrder={1001}
         scale={[MARKER * 2, 1, MARKER * 2]}

package/src/components/editor-2d/floorplan-action-menu-layer.tsx

@@ -2,6 +2,11 @@
 
 import { memo, type MouseEvent as ReactMouseEvent } from 'react'
 import useEditor from '../../store/use-editor'
+import {
+  useEndpointReshape,
+  useIsCurveReshape,
+  useMovingNode,
+} from '../../store/use-interaction-scope'
 import { NodeActionMenu } from '../editor/node-action-menu'
 
 type SvgPoint = {
@@ -48,12 +53,11 @@ export const FloorplanActionMenuLayer = memo(function FloorplanActionMenuLayer({
   offsetY = 10,
 }: FloorplanActionMenuLayerProps) {
   const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
-  const movingNode = useEditor((state) => state.movingNode)
-  const movingFenceEndpoint = useEditor((state) => state.movingFenceEndpoint)
-  const curvingWall = useEditor((state) => state.curvingWall)
-  const curvingFence = useEditor((state) => state.curvingFence)
+  const movingNode = useMovingNode()
+  const endpointReshape = useEndpointReshape()
+  const isCurveReshape = useIsCurveReshape()
 
-  if (!isFloorplanHovered || movingNode || movingFenceEndpoint || curvingWall || curvingFence) {
+  if (!isFloorplanHovered || movingNode || endpointReshape || isCurveReshape) {
     return null
   }
 

package/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx

@@ -77,7 +77,7 @@ export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndi
     }
 
     if (mode === 'material-paint') {
-      return { kind: 'asset', iconSrc: '/icons/paint.png' }
+      return { kind: 'asset', iconSrc: '/icons/paint.webp' }
     }
 
     return null

package/src/components/editor-2d/floorplan-group-action-menu.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { useViewer } from '@pascal-app/viewer'
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { isActive } from '../../lib/interaction/scope'
+import useEditor from '../../store/use-editor'
+import useInteractionScope, { useMovingNode } from '../../store/use-interaction-scope'
+import {
+  deleteSelection,
+  duplicateSelectionAndPickUp,
+  startGroupPickUp,
+} from '../editor/group-actions'
+import { NodeActionMenu } from '../editor/node-action-menu'
+
+/**
+ * Floating Move / Duplicate / Delete pill for a MULTI-selection in the 2D
+ * floor plan — the group sibling of `FloorplanRegistryActionMenu` (which is
+ * sole-selection only). Anchored above the dashed group selection box; every
+ * action targets the whole selection: Move picks the group up (it rides the
+ * cursor until a click places it), Duplicate clones the selection and picks
+ * the clones up, Delete removes everything selected.
+ *
+ * Gated on floorplan hover so it never coexists with the 3D group menu in
+ * split view (that one hides while the floor plan is hovered), and hidden
+ * during any active interaction so it never competes with a live drag.
+ */
+export function FloorplanGroupActionMenu() {
+  const isMultiSelect = useViewer((s) => s.selection.selectedIds.length > 1)
+  const movingNode = useMovingNode()
+  const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
+  const scopeActive = useInteractionScope((s) => isActive(s.scope))
+
+  const [position, setPosition] = useState<{ left: number; top: number } | null>(null)
+
+  const isVisible = isMultiSelect && !movingNode && isFloorplanHovered && !scopeActive
+
+  useEffect(() => {
+    if (!isVisible) {
+      setPosition(null)
+      return
+    }
+    let raf = 0
+    const tick = () => {
+      raf = requestAnimationFrame(tick)
+      // The dashed group box exists exactly while the multi-selection has
+      // transformable participants — anchor to its top edge. Only publish
+      // actual changes so the idle poll doesn't re-render every frame.
+      const box = document.querySelector('[data-group-selection-box]') as SVGGElement | null
+      if (!box) {
+        setPosition((prev) => (prev === null ? prev : null))
+        return
+      }
+      const rect = box.getBoundingClientRect()
+      const next = { left: rect.left + rect.width / 2, top: rect.top }
+      setPosition((prev) =>
+        prev && Math.abs(prev.left - next.left) < 0.5 && Math.abs(prev.top - next.top) < 0.5
+          ? prev
+          : next,
+      )
+    }
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+  }, [isVisible])
+
+  if (!(isVisible && position)) return null
+
+  return createPortal(
+    <div
+      className="pointer-events-none fixed z-30"
+      style={{
+        left: position.left,
+        top: position.top,
+        transform: 'translate(-50%, calc(-100% - 12px))',
+      }}
+    >
+      <NodeActionMenu
+        onDelete={() => deleteSelection()}
+        onDuplicate={() => duplicateSelectionAndPickUp()}
+        onMove={() => startGroupPickUp()}
+        onPointerDown={(event) => event.stopPropagation()}
+        onPointerUp={(event) => event.stopPropagation()}
+      />
+    </div>,
+    document.body,
+  )
+}