@pascal-app/editor 0.9.2 → 1.0.0-beta.1

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

@@ -1,12 +1,15 @@
 'use client'
 
 import {
+  type AnyNode,
   type AnyNodeId,
-  DEFAULT_WALL_HEIGHT,
   type FenceNode,
+  getWallBaseElevationForNodes,
   getWallCurveFrameAt,
+  getWallEffectiveHeightForNodes,
   getWallThickness,
   isCurvedWall,
+  MIN_WALL_HEIGHT,
   sceneRegistry,
   useLiveNodeOverrides,
   useScene,
@@ -32,19 +35,27 @@ import {
 } from 'three'
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
+import {
+  clearStructuralElevationGuide,
+  publishStructuralElevationGuide,
+  resolveStructuralElevationSnap,
+} from '../../lib/elevation-guides'
 import { isHistoryShortcut } from '../../lib/history'
 import { endpointReshapeScope } from '../../lib/interaction/scope'
 import { sfxEmitter } from '../../lib/sfx-bus'
-import useEditor from '../../store/use-editor'
+import useEditor, { isGridSnapActive, isMagneticSnapActive } from '../../store/use-editor'
 import useInteractionScope, {
   useEndpointReshape,
   useIsCurveReshape,
   useMovingNode,
 } from '../../store/use-interaction-scope'
 import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
+import { resolveResizeSnapValue } from './handles/resize-snap'
+import { type HandleDragControls, useHandleDrag } from './handles/use-handle-drag'
 import {
   createArrowHitAreaGeometry,
   createEndpointHitAreaGeometry,
+  HandleArrow,
   InvisibleHandleHitArea,
   NO_RAYCAST,
   useInvisibleHitAreaMaterial,
@@ -55,7 +66,6 @@ const HANDLE_MIN_OFFSET = 0.33
 const HANDLE_MIN_HEIGHT = 0.4
 const HANDLE_TOP_INSET = 0.08
 const HEIGHT_HANDLE_OFFSET = 0.26
-const MIN_WALL_HEIGHT = 0.5
 const ARROW_COLOR = '#8381ed'
 const ARROW_HOVER_COLOR = '#a5b4fc'
 // Match the door arrows: scale the rendered chevron down to ~two-thirds
@@ -154,6 +164,7 @@ export function WallMoveSideHandles() {
 }
 
 function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
+  const nodes = useScene((state) => state.nodes)
   // Merge the in-flight drag override so every handle (side-move arrows,
   // height arrow, corner leaders) tracks the live height in real time
   // during a height drag — the scene store stays at the pre-drag value
@@ -197,24 +208,34 @@ function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
     }
   }, [wall.parentId])
 
-  const handles = useMemo(() => getWallMoveHandles(effectiveWall), [effectiveWall])
+  const baseElevation = getWallBaseElevationForNodes(effectiveWall, nodes)
+  const handles = useMemo(() => getWallMoveHandles(effectiveWall, nodes), [effectiveWall, nodes])
 
   if (!levelObject || handles.length === 0) return null
 
   return createPortal(
-    <group>
-      {handles.map((handle) => (
-        <WallMoveArrowHandle handle={handle} key={handle.key} wall={effectiveWall} />
-      ))}
-      <WallHeightArrowHandle wall={effectiveWall} />
-      <WallCornerLeaderHandle endpoint="start" wall={effectiveWall} />
-      <WallCornerLeaderHandle endpoint="end" wall={effectiveWall} />
-    </group>,
+    <>
+      <group position={[0, baseElevation, 0]}>
+        {handles.map((handle) => (
+          <WallMoveArrowHandle handle={handle} key={handle.key} wall={effectiveWall} />
+        ))}
+        <WallHeightArrowHandle wall={effectiveWall} />
+        <WallCornerLeaderHandle endpoint="start" wall={effectiveWall} />
+        <WallCornerLeaderHandle endpoint="end" wall={effectiveWall} />
+      </group>
+      <WallBaseElevationHandle
+        baseElevation={baseElevation}
+        levelObject={levelObject}
+        wall={effectiveWall}
+      />
+    </>,
     levelObject,
   )
 }
 
 function buildDashedVerticalGeometry(height: number) {
+  if (!(Number.isFinite(height) && height > 0)) return new BufferGeometry()
+
   // Build each dash as a thin cylinder section so thickness is
   // controllable — native `lineSegments` lock to 1px on WebGL/WebGPU.
   const dashes: BufferGeometry[] = []
@@ -227,7 +248,10 @@ function buildDashedVerticalGeometry(height: number) {
     dashes.push(cylinder)
     y = end + CORNER_GAP_SIZE
   }
-  const merged = mergeGeometries(dashes, false) ?? new BufferGeometry()
+  const merged =
+    dashes.length > 0
+      ? (mergeGeometries(dashes, false) ?? new BufferGeometry())
+      : new BufferGeometry()
   for (const dash of dashes) dash.dispose()
   return merged
 }
@@ -244,7 +268,7 @@ function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint:
   const corner = endpoint === 'start' ? wall.start : wall.end
   const x = corner[0]
   const z = corner[1]
-  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+  const wallHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes)
 
   const dashedGeometry = useMemo(() => buildDashedVerticalGeometry(wallHeight), [wallHeight])
   const hitGeometry = useMemo(() => createEndpointHitAreaGeometry(CORNER_HEX_RADIUS), [])
@@ -381,6 +405,155 @@ function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint:
   )
 }
 
+function WallBaseElevationHandle({
+  wall,
+  baseElevation,
+  levelObject,
+}: {
+  wall: WallNode
+  baseElevation: number
+  levelObject: Object3D
+}) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const curveFrame = isCurvedWall(wall) ? getWallCurveFrameAt(wall, 0.5) : null
+  const midpoint: [number, number] = curveFrame
+    ? [curveFrame.point.x, curveFrame.point.y]
+    : [(wall.start[0] + wall.end[0]) / 2, (wall.start[1] + wall.end[1]) / 2]
+  const elevationGuideSource = {
+    nodeId: wall.id,
+    levelId: wall.parentId,
+    anchor: midpoint,
+  }
+  const leaderBottom = Math.min(0, baseElevation)
+  const leaderHeight = Math.abs(baseElevation)
+  const dashedGeometry = useMemo(
+    () => (leaderHeight > 0.0001 ? buildDashedVerticalGeometry(leaderHeight) : null),
+    [leaderHeight],
+  )
+  const dashMaterial = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(ARROW_COLOR),
+        transparent: true,
+        opacity: 0.85,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
+
+  const isActive = isHovered || isDragging
+  useEffect(() => {
+    dashMaterial.color.set(isActive ? ARROW_HOVER_COLOR : ARROW_COLOR)
+  }, [dashMaterial, isActive])
+  useEffect(() => () => dashedGeometry?.dispose(), [dashedGeometry])
+  useEffect(() => () => dashMaterial.dispose(), [dashMaterial])
+  const dragControls = useMemo<HandleDragControls>(
+    () => ({
+      onStart: () => {},
+      onEnd: () => {},
+    }),
+    [],
+  )
+
+  const activateElevationMove = useHandleDrag({
+    kind: 'drag',
+    cursor: 'ns-resize',
+    dragControls,
+    handleIndex: 0,
+    node: wall,
+    rideObject: levelObject,
+    setIsDragging,
+    onStart: ({ event, initialNode, intersectPlane, nodeId, sceneApi }) => {
+      if (initialNode.type !== 'wall') return null
+
+      levelObject.updateWorldMatrix(true, false)
+      const initialBase = getWallBaseElevationForNodes(initialNode, sceneApi.nodes())
+      const supportBase = initialBase - (initialNode.supportOffset ?? 0)
+      const initialHeight = getWallEffectiveHeightForNodes(initialNode, sceneApi.nodes())
+      const midpointWorld = new Vector3(midpoint[0], initialBase, midpoint[1]).applyMatrix4(
+        levelObject.matrixWorld,
+      )
+      const planeNormal = new Vector3().subVectors(camera.position, midpointWorld).setY(0)
+      if (planeNormal.lengthSq() === 0) return null
+      planeNormal.normalize()
+      const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, midpointWorld)
+      const initialHit = new Vector3()
+      if (
+        !intersectPlane(event.nativeEvent.clientX, event.nativeEvent.clientY, plane, initialHit)
+      ) {
+        return null
+      }
+      const initialPointerY = levelObject.worldToLocal(initialHit).y
+
+      return {
+        onBegin: () => {
+          useInteractionScope.getState().begin({ kind: 'handle-drag', nodeId, handle: 'elevation' })
+        },
+        onEnd: () => {
+          useInteractionScope.getState().endIf((scope) => scope.kind === 'handle-drag')
+          clearStructuralElevationGuide(initialNode.id)
+        },
+        move: ({ event: moveEvent, intersectPlane: intersectMovePlane }) => {
+          const hit = new Vector3()
+          if (!intersectMovePlane(moveEvent.clientX, moveEvent.clientY, plane, hit)) return null
+          const pointerY = levelObject.worldToLocal(hit).y
+          const nextBase = resolveResizeSnapValue({
+            rawValue: initialBase + pointerY - initialPointerY,
+            gridSnapEnabled: true,
+            gridSnapActive: isGridSnapActive(),
+            gridSnapStep: useEditor.getState().gridSnapStep,
+            magneticSnapActive: isMagneticSnapActive(),
+            magneticSnap: (value) =>
+              resolveStructuralElevationSnap(elevationGuideSource, value, sceneApi.nodes()),
+          })
+          publishStructuralElevationGuide(elevationGuideSource, nextBase, sceneApi.nodes())
+          if (Math.abs(nextBase - initialBase) < 1e-6) {
+            return {
+              supportOffset: initialNode.supportOffset,
+              height: initialNode.height,
+            }
+          }
+          const nextOffset = nextBase - supportBase
+          return {
+            supportOffset: Math.abs(nextOffset) < 1e-6 ? undefined : nextOffset,
+            height: initialHeight,
+          }
+        },
+      }
+    },
+  })
+
+  return (
+    <>
+      {dashedGeometry ? (
+        <mesh
+          frustumCulled={false}
+          geometry={dashedGeometry}
+          material={dashMaterial}
+          position={[midpoint[0], leaderBottom, midpoint[1]]}
+          renderOrder={1001}
+        />
+      ) : null}
+      <HandleArrow
+        cursor="ns-resize"
+        hover={isActive}
+        hoverScale={1.25}
+        onHoverChange={setIsHovered}
+        onPointerDown={activateElevationMove}
+        placement={{
+          position: [midpoint[0], baseElevation, midpoint[1]],
+          baseScale: zoom,
+        }}
+        shape="tracker"
+      />
+    </>
+  )
+}
+
 function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
   const [isHovered, setIsHovered] = useState(false)
   const arrowGeometry = useMemo(() => createArrowHandleGeometry(), [])
@@ -433,7 +606,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
   const wallAngle = Math.atan2(-dirZ, dirX)
   // `wall` is the override-merged effective wall (see
   // WallMoveSideHandlesForWall), so this height is already live during a drag.
-  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+  const wallHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes)
   const handleY = wallHeight + HEIGHT_HANDLE_OFFSET
 
   const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
@@ -466,7 +639,9 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
     const hit = new Vector3()
     if (!raycaster.ray.intersectPlane(plane, hit)) return
 
-    const initialHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+    // Dragging the top makes the wall custom-height; seed from the resolved
+    // effective height so a plane-bound wall's drag starts at its real top.
+    const initialHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes)
     const initialY = hit.y
     const wallId = wall.id as AnyNodeId
     let pendingHeight = initialHeight
@@ -758,7 +933,7 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
   )
 }
 
-function getWallMoveHandles(wall: WallNode): WallMoveHandle[] {
+function getWallMoveHandles(wall: WallNode, nodes: Record<string, AnyNode>): WallMoveHandle[] {
   const dx = wall.end[0] - wall.start[0]
   const dz = wall.end[1] - wall.start[1]
   const length = Math.hypot(dx, dz)
@@ -774,7 +949,7 @@ function getWallMoveHandles(wall: WallNode): WallMoveHandle[] {
   const midpoint: [number, number] = frame
     ? [frame.point.x, frame.point.y]
     : [(wall.start[0] + wall.end[0]) / 2, (wall.start[1] + wall.end[1]) / 2]
-  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+  const wallHeight = getWallEffectiveHeightForNodes(wall, nodes)
   const handleHeight = Math.max(wallHeight - HANDLE_TOP_INSET, HANDLE_MIN_HEIGHT)
   const offset = Math.max(getWallThickness(wall) / 2 + HANDLE_OFFSET, HANDLE_MIN_OFFSET)
 

package/src/components/editor/wall-opening-highlights.tsx

@@ -3,8 +3,16 @@
 import { type AnyNodeId, sceneRegistry, useLiveNodeOverrides, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { createPortal, useFrame, useThree } from '@react-three/fiber'
-import { useEffect, useMemo, useRef } from 'react'
-import { BoxGeometry, type BufferGeometry, EdgesGeometry, type Group, Vector3 } from 'three'
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react'
+import {
+  BoxGeometry,
+  type BufferGeometry,
+  EdgesGeometry,
+  type Group,
+  type Mesh,
+  MeshBasicMaterial,
+  Vector3,
+} from 'three'
 import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
 
@@ -41,6 +49,13 @@ const fillMaterial = new MeshBasicNodeMaterial({
   depthWrite: false,
 })
 
+// Keep the cutout in the render list for the outliner's override material
+// without letting its source material alter the normal scene pass.
+const outlineProxyMaterial = new MeshBasicMaterial({
+  colorWrite: false,
+  depthWrite: false,
+})
+
 function makeOutlineGeometry(width: number, height: number, depth: number): BufferGeometry {
   const box = new BoxGeometry(width + PAD, height + PAD, depth + PAD)
   const edges = new EdgesGeometry(box)
@@ -60,26 +75,60 @@ function makeOutlineGeometry(width: number, height: number, depth: number): Buff
  */
 export function WallOpeningHighlights() {
   const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const hoveredId = useViewer((state) => state.hoveredId)
   const { scene } = useThree()
+  const outlineProxyIds = Array.from(new Set(hoveredId ? [...selectedIds, hoveredId] : selectedIds))
 
-  if (selectedIds.length === 0) return null
+  if (selectedIds.length === 0 && !hoveredId) return null
 
-  return createPortal(
+  return (
     <>
-      {selectedIds.map((id) => (
-        <SelectionOpeningHighlights key={id} selectedId={id} />
+      {outlineProxyIds.map((id) => (
+        <OpeningOutlineProxy key={id} openingId={id} />
       ))}
-    </>,
-    scene,
+      {selectedIds.length > 0 &&
+        createPortal(
+          <>
+            {selectedIds.map((id) => (
+              <SelectionOpeningHighlights key={id} selectedId={id} />
+            ))}
+          </>,
+          scene,
+        )}
+    </>
   )
 }
 
-// Resolves a selected node into the opening highlight(s) to draw:
-//  - a selected wall → a hint over each door / window it hosts ("editable
-//    child here").
-//  - a directly-selected frameless opening (a `door` whose `openingKind` is
-//    `'opening'`) → a fill over its own cutout, so the selection reads as
-//    occupied even though the opening renders no geometry of its own.
+function OpeningOutlineProxy({ openingId }: { openingId: string }) {
+  const node = useScene((state) => state.nodes[openingId as AnyNodeId])
+  const geometryRevision = useViewer((state) => state.geometryRevision)
+  const proxyRef = useRef<Mesh | null>(null)
+  const isFramelessOpening = node?.type === 'door' && node.openingKind === 'opening'
+
+  useLayoutEffect(() => {
+    void geometryRevision
+    if (!isFramelessOpening) return
+    const root = sceneRegistry.nodes.get(openingId as AnyNodeId)
+    const proxy = root?.getObjectByName('cutout') as Mesh | undefined
+    if (!proxy) return
+
+    proxy.material = outlineProxyMaterial
+    proxy.visible = true
+    proxyRef.current = proxy
+
+    return () => {
+      proxy.visible = false
+      proxyRef.current = null
+    }
+  }, [geometryRevision, isFramelessOpening, openingId])
+
+  useFrame(() => {
+    if (proxyRef.current) proxyRef.current.visible = true
+  })
+
+  return null
+}
+
 function SelectionOpeningHighlights({ selectedId }: { selectedId: string }) {
   const node = useScene((state) => state.nodes[selectedId as AnyNodeId])
 
@@ -94,27 +143,9 @@ function SelectionOpeningHighlights({ selectedId }: { selectedId: string }) {
     )
   }
 
-  if (node?.type === 'door' && node.openingKind === 'opening') {
-    return <SelectedOpeningHighlight openingId={selectedId} parentId={node.parentId} />
-  }
-
   return null
 }
 
-// A frameless opening selected on its own. Pulls the cutout depth from its
-// host wall's thickness so the fill block matches the wall it sits in.
-function SelectedOpeningHighlight({
-  openingId,
-  parentId,
-}: {
-  openingId: string
-  parentId: string | null
-}) {
-  const parent = useScene((state) => (parentId ? state.nodes[parentId as AnyNodeId] : undefined))
-  const depth = parent?.type === 'wall' ? (parent.thickness ?? 0.1) : 0.1
-  return <OpeningHighlight depth={depth} openingId={openingId} />
-}
-
 function OpeningHighlight({ openingId, depth }: { openingId: string; depth: number }) {
   const node = useScene((state) => state.nodes[openingId as AnyNodeId])
   // Resize arrows publish width/height to the live-override store during the

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

@@ -3,12 +3,13 @@
 import {
   type AnyNode,
   type AnyNodeId,
-  DEFAULT_WALL_HEIGHT,
   getWallCurveFrameAt,
   getWallCurveLength,
+  getWallPlaneTop,
   getWallThickness,
   isCurvedWall,
   resolveLevelId,
+  resolveWallTop,
   sceneRegistry,
   spatialGridManager,
   useScene,
@@ -147,15 +148,16 @@ type WallTopHighlightSegment = {
 
 function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>) {
   const levelId = resolveLevelId(wall, nodes as Record<string, AnyNode>)
-  const slabElevation = spatialGridManager.getSlabElevationForWall(
+  const support = spatialGridManager.getSlabSupportForWall(
     levelId,
     wall.start,
     wall.end,
     wall.curveOffset ?? 0,
     wall.thickness,
+    wall.supportSlabId,
   )
-  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
-  return (slabElevation > 0 ? slabElevation + wallHeight : wallHeight) + WALL_TOP_HIGHLIGHT_LIFT
+  const planeTop = getWallPlaneTop(wall, levelId, nodes as Record<string, AnyNode>)
+  return resolveWallTop(wall, planeTop, support.elevation) + WALL_TOP_HIGHLIGHT_LIFT
 }
 
 function buildHighlightSegment(start: [number, number], end: [number, number]) {

package/src/components/editor-2d/floorplan-alignment-guide-layer.tsx

@@ -28,6 +28,7 @@ import { useFloorplanRender } from './floorplan-render-context'
 export const FloorplanAlignmentGuideLayer = memo(function FloorplanAlignmentGuideLayer() {
   const guides = useAlignmentGuides((s) => s.guides)
   const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
   const ctx = useFloorplanRender()
 
   if (guides.length === 0) return null
@@ -61,7 +62,7 @@ export const FloorplanAlignmentGuideLayer = memo(function FloorplanAlignmentGuid
         // offset along X.
         const pillX = axis === 'x' ? midX + pillOffset : midX
         const pillZ = axis === 'z' ? midZ + pillOffset : midZ
-        const distLabel = formatMeasurement(distMeters, unit)
+        const distLabel = formatMeasurement(distMeters, unit, metricNotation)
         const charWidth = pillFontSize * 0.55
         const pillWidth = distLabel.length * charWidth + pillPadX * 2
         const pillHeight = pillFontSize + pillPadY * 2

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

@@ -1,15 +1,16 @@
 'use client'
 
 import { Icon } from '@iconify/react'
-import { memo, useMemo } from 'react'
+import { memo, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import useEditor, { type FloorplanSelectionTool } from '../../store/use-editor'
+import { useFloorplanDraftPreview } from '../../store/use-floorplan-draft-preview'
 import { furnishTools } from '../ui/action-menu/furnish-tools'
 import { tools as structureTools } from '../ui/action-menu/structure-tools'
-
-type SvgPoint = {
-  x: number
-  y: number
-}
+import {
+  type FloorplanCursorPoint,
+  projectFloorplanCursorPoint,
+  resolveFloorplanCursorIndicatorPosition,
+} from './floorplan-cursor-indicator-position'
 
 type FloorplanCursorIndicator =
   | {
@@ -22,7 +23,7 @@ type FloorplanCursorIndicator =
     }
 
 type FloorplanCursorIndicatorOverlayProps = {
-  cursorPosition: SvgPoint | null
+  cursorPosition: FloorplanCursorPoint | null
   floorplanSelectionTool: FloorplanSelectionTool
   movingOpeningType: 'door' | 'window' | null
   isPanning: boolean
@@ -46,6 +47,10 @@ export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndi
   const tool = useEditor((state) => state.tool)
   const structureLayer = useEditor((state) => state.structureLayer)
   const catalogCategory = useEditor((state) => state.catalogCategory)
+  const cursorPoint = useFloorplanDraftPreview((state) => state.cursorPoint)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const [projectedCursorPosition, setProjectedCursorPosition] =
+    useState<FloorplanCursorPoint | null>(null)
 
   const activeFloorplanToolConfig = useMemo(() => {
     if (movingOpeningType) {
@@ -83,7 +88,32 @@ export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndi
     return null
   }, [activeFloorplanToolConfig, floorplanSelectionTool, mode, structureLayer])
 
-  const position = cursorPosition
+  useLayoutEffect(() => {
+    const anchor = anchorRef.current
+    const overlayHost = anchor?.parentElement
+    const scene = overlayHost?.querySelector<SVGGElement>('[data-floorplan-scene]')
+    const sceneToViewport = scene?.getScreenCTM()
+
+    if (!(cursorPoint && cursorPosition && overlayHost && sceneToViewport)) {
+      setProjectedCursorPosition(null)
+      return
+    }
+
+    const overlayRect = overlayHost.getBoundingClientRect()
+    const nextPosition = projectFloorplanCursorPoint(cursorPoint, sceneToViewport, {
+      x: overlayRect.left,
+      y: overlayRect.top,
+    })
+    setProjectedCursorPosition((currentPosition) =>
+      currentPosition &&
+      currentPosition.x === nextPosition.x &&
+      currentPosition.y === nextPosition.y
+        ? currentPosition
+        : nextPosition,
+    )
+  }, [cursorPoint, cursorPosition])
+
+  const position = resolveFloorplanCursorIndicatorPosition(cursorPosition, projectedCursorPosition)
 
   if (!(indicator && position) || isPanning) {
     return null
@@ -93,6 +123,7 @@ export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndi
     <div
       aria-hidden="true"
       className="pointer-events-none absolute z-20"
+      ref={anchorRef}
       style={{ left: position.x, top: position.y }}
     >
       {mode === 'delete' ? (

package/src/components/editor-2d/floorplan-cursor-indicator-position.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'bun:test'
+import {
+  projectFloorplanCursorPoint,
+  resolveFloorplanCursorIndicatorPosition,
+} from './floorplan-cursor-indicator-position'
+
+describe('projectFloorplanCursorPoint', () => {
+  test('projects a snapped plan point into overlay-local screen coordinates', () => {
+    expect(
+      projectFloorplanCursorPoint(
+        [3, 4],
+        {
+          a: 0,
+          b: 10,
+          c: -10,
+          d: 0,
+          e: 128,
+          f: 40,
+        },
+        { x: 30, y: 20 },
+      ),
+    ).toEqual({ x: 58, y: 50 })
+  })
+
+  test('anchors the placement pin to the projected snap point instead of the raw pointer', () => {
+    expect(resolveFloorplanCursorIndicatorPosition({ x: 88, y: 97 }, { x: 58, y: 70 })).toEqual({
+      x: 58,
+      y: 70,
+    })
+  })
+})

package/src/components/editor-2d/floorplan-cursor-indicator-position.ts

@@ -0,0 +1,39 @@
+export type FloorplanCursorPoint = {
+  x: number
+  y: number
+}
+
+type Matrix2D = {
+  a: number
+  b: number
+  c: number
+  d: number
+  e: number
+  f: number
+}
+
+export function projectFloorplanCursorPoint(
+  point: readonly [number, number],
+  sceneToViewport: Matrix2D,
+  overlayOrigin: FloorplanCursorPoint,
+): FloorplanCursorPoint {
+  return {
+    x:
+      sceneToViewport.a * point[0] +
+      sceneToViewport.c * point[1] +
+      sceneToViewport.e -
+      overlayOrigin.x,
+    y:
+      sceneToViewport.b * point[0] +
+      sceneToViewport.d * point[1] +
+      sceneToViewport.f -
+      overlayOrigin.y,
+  }
+}
+
+export function resolveFloorplanCursorIndicatorPosition(
+  cursorPosition: FloorplanCursorPoint | null,
+  projectedCursorPosition: FloorplanCursorPoint | null,
+): FloorplanCursorPoint | null {
+  return projectedCursorPosition ?? cursorPosition
+}