@pascal-app/editor 1.0.7 → 1.1.0

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

@@ -301,7 +301,7 @@ function StructureThicknessHandle({
   const structureHeight =
     node.type === 'fence'
       ? (node.height ?? 1.8)
-      : getWallEffectiveHeightForNodes(node, useScene.getState().nodes)
+      : getWallEffectiveHeightForNodes(node, useScene.getState().nodes, 0.5)
   const outward = new Vector2(frame.normal.x * side, frame.normal.y * side)
   const faceOffset = getWallLocalFaceZ({ ...node, thickness }, side > 0 ? 'a' : 'b') * side + 0.006
   const position: [number, number, number] = [
@@ -375,7 +375,7 @@ function StructureThicknessHandle({
       const initialStructureHeight =
         initialNode.type === 'fence'
           ? (initialNode.height ?? 1.8)
-          : getWallEffectiveHeightForNodes(initialNode, useScene.getState().nodes)
+          : getWallEffectiveHeightForNodes(initialNode, useScene.getState().nodes, 0.5)
       const initialStructureThickness =
         initialNode.type === 'fence'
           ? (initialNode.thickness ?? 0.08)
@@ -578,7 +578,11 @@ 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 = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes)
+  const wallHeight = getWallEffectiveHeightForNodes(
+    wall,
+    useScene.getState().nodes,
+    endpoint === 'start' ? 0 : 1,
+  )
 
   const dashedGeometry = useMemo(() => buildDashedVerticalGeometry(wallHeight), [wallHeight])
   const hitGeometry = useMemo(() => createEndpointHitAreaGeometry(CORNER_HEX_RADIUS), [])
@@ -784,7 +788,7 @@ function WallBaseElevationHandle({
       levelObject.updateWorldMatrix(true, false)
       const initialBase = getWallBaseElevationForNodes(initialNode, sceneApi.nodes())
       const supportBase = initialBase - (initialNode.supportOffset ?? 0)
-      const initialHeight = getWallEffectiveHeightForNodes(initialNode, sceneApi.nodes())
+      const initialHeight = getWallEffectiveHeightForNodes(initialNode, sceneApi.nodes(), 0)
       const midpointWorld = new Vector3(midpoint[0], initialBase, midpoint[1]).applyMatrix4(
         levelObject.matrixWorld,
       )
@@ -920,7 +924,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 = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes)
+  const wallHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes, 0.5)
   const handleY = wallHeight + HEIGHT_HANDLE_OFFSET
 
   const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
@@ -973,7 +977,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
 
     // 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 initialHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes, 0)
     const wallId = wall.id as AnyNodeId
     let pendingHeight = initialHeight
     let releaseSpatialCapture: (() => void) | null = null

package/src/components/editor/wall-region-handles.tsx

@@ -203,7 +203,7 @@ function WallRegionHandlesForWall({ wall }: { wall: WallNode }) {
   const frame: WallFrame = {
     wall: effectiveWall,
     baseElevation: getWallBaseElevationForNodes(effectiveWall, nodes),
-    wallHeight: getWallEffectiveHeightForNodes(effectiveWall, nodes),
+    wallHeight: getWallEffectiveHeightForNodes(effectiveWall, nodes, 0.5),
     angle: Math.atan2(
       effectiveWall.end[1] - effectiveWall.start[1],
       effectiveWall.end[0] - effectiveWall.start[0],
@@ -426,7 +426,7 @@ function RegionEdgeHandle({
       const face = region.face
       const faceSurface = getWallFaceSurface(initialNode, face)
       const baseAt = faceBaseSampler(initialNode.id, face)
-      const wallHeight = getWallEffectiveHeightForNodes(initialNode, nodes)
+      const wallHeight = getWallEffectiveHeightForNodes(initialNode, nodes, 0.5)
       const faceHeight = regionFaceHeight(region, faceSurface.length, wallHeight, baseAt)
       const bounds = resolveRegionBounds(region, faceSurface.length, faceHeight)
       const midU = (bounds.u0 + bounds.u1) / 2

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

@@ -165,9 +165,10 @@ type WallTopHighlightSegment = {
   angle: number
   center: [number, number]
   length: number
+  tCenter: number
 }
 
-function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>) {
+function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>, t = 0.5): number {
   const levelId = resolveLevelId(wall, nodes as Record<string, AnyNode>)
   const support = spatialGridManager.getSlabSupportForWall(
     levelId,
@@ -181,12 +182,16 @@ function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>) {
     wall.justification,
   )
   return (
-    getWallTop(wall, levelId, nodes as Record<string, AnyNode>, support.elevation) +
+    getWallTop(wall, levelId, nodes as Record<string, AnyNode>, support.elevation, t) +
     WALL_TOP_HIGHLIGHT_LIFT
   )
 }
 
-function buildHighlightSegment(start: [number, number], end: [number, number]) {
+function buildHighlightSegment(
+  start: [number, number],
+  end: [number, number],
+  tCenter = 0.5,
+): WallTopHighlightSegment | null {
   const dx = end[0] - start[0]
   const dz = end[1] - start[1]
   const length = Math.hypot(dx, dz)
@@ -196,15 +201,20 @@ function buildHighlightSegment(start: [number, number], end: [number, number]) {
     angle: -Math.atan2(dz, dx),
     center: [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2] as [number, number],
     length,
+    tCenter,
   }
 }
 
 function buildWallTopHighlightSegments(wall: WallNode): WallTopHighlightSegment[] {
   if (!isCurvedWall(wall)) {
-    const segment = buildHighlightSegment(wall.start, wall.end)
+    const segment = buildHighlightSegment(wall.start, wall.end, 0.5)
     return segment ? [segment] : []
   }
 
+  const dx = wall.end[0] - wall.start[0]
+  const dz = wall.end[1] - wall.start[1]
+  const chordLenSq = dx * dx + dz * dz
+
   const sampleCount = Math.max(
     8,
     Math.ceil(getWallCurveLength(wall) / CURVED_WALL_HIGHLIGHT_SEGMENT_LENGTH),
@@ -213,7 +223,16 @@ function buildWallTopHighlightSegments(wall: WallNode): 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])
+    const midX = (previous.x + current.x) / 2
+    const midY = (previous.y + current.y) / 2
+    const tCenter =
+      chordLenSq > 1e-12
+        ? Math.max(
+            0,
+            Math.min(1, ((midX - wall.start[0]) * dx + (midY - wall.start[1]) * dz) / chordLenSq),
+          )
+        : 0.5
+    const segment = buildHighlightSegment([previous.x, previous.y], [current.x, current.y], tCenter)
     if (segment) segments.push(segment)
     previous = current
   }
@@ -228,38 +247,40 @@ function WallTopHighlight({
   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>
-      ))}
+      {segments.map((segment, index) => {
+        const y = getWallTopY(wall, nodes, segment.tCenter)
+        return (
+          <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>
+        )
+      })}
     </>
   )
 }

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

@@ -8,6 +8,7 @@ import {
   DEFAULT_ANGLE_STEP,
   type FloorplanGeometry,
   type FloorplanPalette,
+  formatLinearMeasurement,
   pauseSceneHistory,
   pauseSpaceDetection,
   resumeSceneHistory,
@@ -23,7 +24,6 @@ import { GROUP_MOVE_DRAG_LABEL, GROUP_ROTATE_DRAG_LABEL } from '../../lib/contex
 import { applyFloorplanAlignment } from '../../lib/floorplan/apply-alignment'
 import { clientToPlan } from '../../lib/floorplan/plan-coords'
 import { isHistoryShortcut } from '../../lib/history'
-import { formatLinearMeasurement } from '../../lib/measurements'
 import type { WallGroupPush } from '../../lib/room-handle-drag'
 import { useRoomHandleDrag } from '../../lib/room-handle-drag'
 import { sfxEmitter } from '../../lib/sfx-bus'

package/src/components/editor-2d/floorplan-measurement-tool-layer.tsx

@@ -3,11 +3,17 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  buildMeasurementAngleArcPoints,
   closestMeasurementFeatureBinding,
   collectAlignmentAnchors,
   emitter,
+  formatAngleRadians,
+  formatAreaLabel,
+  formatLinearMeasurement,
   formatNumber,
+  formatVolumeLabel,
   type GeometryContext,
+  getLinearUnitLabel,
   type MeasurementFeatureAnchor,
   type MeasurementSnapKind,
   measurementAngle,
@@ -16,23 +22,18 @@ import {
   measurementFeatureLength,
   measurementPerimeter,
   measurementPrismVolume,
+  metersToLinearUnit,
   nodeRegistry,
+  parseLinearMeasurementInput,
   useLocale,
   useScene,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { measurementPolygonLabelAnchor } from '../../lib/measurement-label'
 import {
-  buildMeasurementAngleArcPoints,
-  formatAreaLabel,
-  formatLinearMeasurement,
-  formatVolumeLabel,
-  getLinearUnitLabel,
   MEASUREMENT_ACTIVE_COLOR,
-  metersToLinearUnit,
-  parseLinearMeasurementInput,
-} from '../../lib/measurements'
+  measurementPolygonLabelAnchor,
+  useViewer,
+} from '@pascal-app/viewer'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   clearSurfacePlanSnapFeedback,
   resolveSurfacePlanPointSnap,
@@ -45,7 +46,6 @@ import {
   measurementPolygonMidpoints,
   useMeasurementDraft,
 } from '../../store/use-measurement-draft'
-import { formatAngleRadians } from '../tools/shared/segment-angle'
 import { FloorplanQuickMeasureLayer } from './floorplan-quick-measure-layer'
 import { useFloorplanRender } from './floorplan-render-context'
 import { resolveFloorplanLabelAngle } from './renderers/floorplan-label-angle'

package/src/components/editor-2d/floorplan-open-wall-ends-layer.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { AnyNodeId, OpenWallEnd } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { MEASUREMENT_DANGLING_COLOR, useViewer } from '@pascal-app/viewer'
 import { memo, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import {
@@ -10,7 +10,6 @@ import {
   useOpenWallEndsSuppressed,
 } from '../../hooks/use-open-wall-ends'
 import { openWallEndKey, openWallEndLabel } from '../../lib/floorplan/open-wall-ends'
-import { MEASUREMENT_DANGLING_COLOR } from '../../lib/measurements'
 import useEditor from '../../store/use-editor'
 import { isViewVisible, VIEW_2D } from '../../store/view-layout'
 import { JoinWallsPill } from '../editor/join-walls-pill'

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

@@ -7,6 +7,7 @@ import {
   collectionIdsOf,
   createSceneApi,
   getWallMidpointHandlePoint,
+  isNodeDuplicable,
   type NodeQuickAction,
   nodeRegistry,
   runAsSingleSceneHistoryStep,
@@ -255,7 +256,7 @@ export function FloorplanRegistryActionMenu() {
   const canMove =
     !registryMoveDisabled(node) &&
     (!!def.capabilities.movable || !!def.floorplanMoveTarget || !!def.affordanceTools?.move)
-  const canDuplicate = def.capabilities.duplicable !== false
+  const canDuplicate = isNodeDuplicable(node)
   const canDelete = def.capabilities.deletable !== false
   const canAddHole = node.type === 'slab' || node.type === 'ceiling'
 

package/src/components/editor-2d/floorplan-registry-move-overlay.tsx

@@ -850,14 +850,25 @@ export function FloorplanRegistryMoveOverlay() {
       }
       boxEl.setAttribute('transform', transform)
       const oldY = originalPosition[1]
+      const position = nodeRegistry.get(movingNode.type)?.capabilities?.movable?.resolvePosition?.({
+        node: useScene.getState().nodes[movingNode.id] ?? movingNode,
+        position: [finalX, oldY, finalZ],
+        nodes: useScene.getState().nodes,
+      }) ?? [finalX, oldY, finalZ]
+      if (def?.capabilities?.movable?.resolvePosition) {
+        useLiveTransforms.getState().set(movingNode.id, {
+          position: position as [number, number, number],
+          rotation: currentRotation,
+        })
+      }
       lastPositionValid = movableValidityConfig?.isValidPosition
         ? movableValidityConfig.isValidPosition({
             node: {
               ...movingNode,
-              position: [finalX, oldY, finalZ],
+              position,
               rotation: currentRotation,
             } as AnyNode,
-            position: [finalX, oldY, finalZ],
+            position: position as [number, number, number],
             rotation: currentRotation,
             levelId:
               (useViewer.getState().selection.levelId as AnyNodeId | null) ??
@@ -885,6 +896,11 @@ export function FloorplanRegistryMoveOverlay() {
             (storedRotation as [number?, number?, number?])[2] ?? 0,
           ]
         : snapped.rotation
+      const position = nodeRegistry.get(movingNode.type)?.capabilities?.movable?.resolvePosition?.({
+        node: useScene.getState().nodes[movingNode.id] ?? movingNode,
+        position: [sx, oldY, sz],
+        nodes: useScene.getState().nodes,
+      }) ?? [sx, oldY, sz]
       const rotationPatch = 'rotation' in movingNode ? { rotation } : {}
       const atomicPreview =
         isFreshPlacement &&
@@ -937,7 +953,7 @@ export function FloorplanRegistryMoveOverlay() {
         const committedId = commitFreshPlacementSubtree(
           movingNode.id as AnyNodeId,
           {
-            position: [sx, oldY, sz],
+            position,
             ...rotationPatch,
             metadata: stripPlacementMetadataFlags((movingNode as { metadata?: unknown }).metadata),
             visible: true,
@@ -953,7 +969,7 @@ export function FloorplanRegistryMoveOverlay() {
         useScene.getState().updateNode(
           movingNode.id as AnyNodeId,
           {
-            position: [sx, oldY, sz],
+            position,
             ...rotationPatch,
           } as Partial<AnyNode>,
         )
@@ -1005,6 +1021,8 @@ export function FloorplanRegistryMoveOverlay() {
       for (const relatedEntry of relatedEntries) {
         relatedEntry.style.visibility = ''
       }
+      if (def?.capabilities?.movable?.resolvePosition)
+        useLiveTransforms.getState().clear(movingNode.id)
       boxEl.remove()
       useAlignmentGuides.getState().clear()
     }

package/src/components/editor-2d/renderers/floorplan-draft-measurement.tsx

@@ -19,6 +19,7 @@ export type DraftMeasurement = {
 }
 
 export function FloorplanDraftMeasurement({
+  lengthHidden = false,
   measurement,
   measurementStroke,
   labelBackground,
@@ -26,6 +27,8 @@ export function FloorplanDraftMeasurement({
   sceneRotationDeg,
   unitsPerPixel,
 }: {
+  /** Leave the length plate to something drawn in its place (the typed-entry HUD). */
+  lengthHidden?: boolean
   measurement: DraftMeasurement
   measurementStroke: string
   labelBackground: string
@@ -68,7 +71,10 @@ export function FloorplanDraftMeasurement({
 
   return (
     <g pointerEvents="none">
-      <g transform={`translate(${cx} ${cy}) rotate(${labelAngleDeg})`}>
+      <g
+        display={lengthHidden ? 'none' : undefined}
+        transform={`translate(${cx} ${cy}) rotate(${labelAngleDeg})`}
+      >
         <rect
           fill={labelBg}
           height={lengthPlateH}

package/src/components/editor-2d/renderers/floorplan-placement-preview-layer.tsx

@@ -4,17 +4,19 @@ import {
   type AnyNode,
   type AnyNodeId,
   type FloorplanGeometry,
+  formatLinearMeasurement,
   type GeometryContext,
   nodeRegistry,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { memo, useMemo } from 'react'
-import { formatLinearMeasurement } from '../../../lib/measurements'
 import usePlacementPreview from '../../../store/use-placement-preview'
+import { usePlacementTyping } from '../../../store/use-placement-typing'
 import { useFloorplanRender, useFloorplanSceneRotation } from '../floorplan-render-context'
 import { FloorplanDimensionRenderer } from './floorplan-dimension-renderer'
 import { FloorplanGeometryRenderer } from './floorplan-geometry-renderer'
+import { FloorplanPlacementTypingHud } from './floorplan-placement-typing-hud'
 
 export interface FloorplanNodePreviewProps {
   node: AnyNode
@@ -139,14 +141,24 @@ export const FloorplanPlacementPreviewLayer = memo(function FloorplanPlacementPr
   const dimensions = usePlacementPreview((s) => s.dimensions)
   const activeDimensionId = usePlacementPreview((s) => s.activeDimensionId)
   const dimensionInput = usePlacementPreview((s) => s.dimensionInput)
+  const typingProjectedPosition = usePlacementTyping((s) => s.projectedPosition)
   const unit = useViewer((s) => s.unit)
   const metricNotation = useViewer((s) => s.metricNotation)
   const sceneRotationDeg = useFloorplanSceneRotation()
+  const unitsPerPixel = useFloorplanRender()?.unitsPerPixel ?? 1
   if (!node) return null
 
   return (
     <g data-floorplan-placement-preview>
       <FloorplanNodePreview contextNodes={contextNodes} node={node} parentNode={parentNode} />
+      {typingProjectedPosition ? (
+        <FloorplanPlacementTypingHud
+          sceneRotationDeg={sceneRotationDeg}
+          unitsPerPixel={unitsPerPixel}
+          x={typingProjectedPosition[0]}
+          y={typingProjectedPosition[2]}
+        />
+      ) : null}
       <g data-floorplan-placement-dimensions>
         {dimensions
           .filter((dimension) => dimension.renderInFloorplan !== false)

package/src/components/editor-2d/renderers/floorplan-placement-typing-hud.test.tsx

@@ -0,0 +1,35 @@
+import { afterEach, expect, test } from 'bun:test'
+import {
+  PLACEMENT_TYPING_LENGTH_ANGLE,
+  usePlacementTyping,
+} from '../../../store/use-placement-typing'
+import { renderCurrentMarkup } from '../../../test-utils/render-current-markup'
+import { FloorplanPlacementTypingHud } from './floorplan-placement-typing-hud'
+
+afterEach(() => {
+  usePlacementTyping.getState().clear()
+})
+
+test('sizes and counter-rotates the HUD from the props it is given', () => {
+  usePlacementTyping.getState().begin({ labels: PLACEMENT_TYPING_LENGTH_ANGLE, activeField: 0 })
+
+  const markup = renderCurrentMarkup(
+    <svg>
+      <FloorplanPlacementTypingHud sceneRotationDeg={30} unitsPerPixel={0.02} x={1} y={2} />
+    </svg>,
+  )
+
+  expect(markup).toContain('transform="translate(1 2) rotate(-30)"')
+  expect(markup).toMatch(/<foreignObject[^>]*width="4.72"/)
+  expect(markup).toContain('scale(0.02)')
+})
+
+test('renders nothing without a typing session', () => {
+  const markup = renderCurrentMarkup(
+    <svg>
+      <FloorplanPlacementTypingHud sceneRotationDeg={0} unitsPerPixel={0.02} x={0} y={0} />
+    </svg>,
+  )
+
+  expect(markup).not.toContain('foreignObject')
+})

package/src/components/editor-2d/renderers/floorplan-placement-typing-hud.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { usePlacementTyping } from '../../../store/use-placement-typing'
+import { PlacementCoordinateInput } from '../../tools/shared/placement-coordinate-input'
+
+const HUD_WIDTH_PX = 236
+const HUD_HEIGHT_PX = 64
+const HUD_LIFT_PX = 14
+
+/**
+ * The typed-entry HUD placed in the plan at `x`/`y` (level-local metres).
+ * HTML inside a `foreignObject` is laid out in CSS pixels equal to SVG user
+ * units, and the plan's `<g>` is zoomed and rotated, so the box is scaled by
+ * `unitsPerPixel` and counter-rotated to stay screen-sized and upright. Both
+ * come from the caller: the wall draft renders outside `FloorplanRenderProvider`.
+ * It sits just above its anchor, and only the HUD itself takes the pointer, so
+ * clicks on the ghost or the draft under it still land on the plan.
+ */
+export function FloorplanPlacementTypingHud({
+  placeholders,
+  sceneRotationDeg,
+  unitsPerPixel,
+  x,
+  y,
+}: {
+  placeholders?: readonly string[]
+  sceneRotationDeg: number
+  unitsPerPixel: number
+  x: number
+  y: number
+}) {
+  const isActive = usePlacementTyping((state) => state.isActive)
+  const scale = Math.max(unitsPerPixel, 1e-6)
+  if (!isActive) return null
+
+  return (
+    <g transform={`translate(${x} ${y}) rotate(${-sceneRotationDeg})`}>
+      <foreignObject
+        height={HUD_HEIGHT_PX * scale}
+        overflow="visible"
+        pointerEvents="none"
+        style={{ overflow: 'visible' }}
+        width={HUD_WIDTH_PX * scale}
+        x={(-HUD_WIDTH_PX / 2) * scale}
+        y={-(HUD_HEIGHT_PX + HUD_LIFT_PX) * scale}
+      >
+        <div
+          style={{
+            alignItems: 'flex-end',
+            display: 'flex',
+            height: HUD_HEIGHT_PX,
+            justifyContent: 'center',
+            overflow: 'visible',
+            pointerEvents: 'none',
+            transform: `scale(${scale})`,
+            transformOrigin: 'top left',
+            width: HUD_WIDTH_PX,
+          }}
+        >
+          <PlacementCoordinateInput placeholders={placeholders} />
+        </div>
+      </foreignObject>
+    </g>
+  )
+}

package/src/components/editor-2d/renderers/floorplan-registry-layer.test.ts

@@ -11,11 +11,13 @@ import { type AnyNodeDefinition, emitter, nodeRegistry, registerNode } from '@pa
 import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { z } from 'zod'
+import { AXIS_MOVE_DRAG_LABEL, PATH_POINT_DRAG_LABEL } from '../../../lib/contextual-help'
 import {
   FLOORPLAN_NODE_EXTENSION_KEY,
   floorplanGeometryMetadata,
 } from '../../../lib/floorplan/floorplan-extension'
 import type { SessionWrites } from '../../../lib/session-writes'
+import { snapContextOf } from '../../../lib/snapping-mode'
 import {
   buildFloorplanEntryGeometry,
   cancelFloorplanAffordanceDrag,
@@ -276,6 +278,26 @@ describe('floorplan affordance ownership', () => {
       driver: 'floorplan',
     })
   })
+
+  // With no scope, Select mode reads every snap mode as off, so these drags
+  // never snapped to the grid on the plan.
+  test('gives the MEP run point and segment drags a handle-drag scope in the run snap context', () => {
+    const point = floorplanAffordanceReshapeScope('move-path-point', 'duct_1', { pointIndex: 0 })
+    const segment = floorplanAffordanceReshapeScope('move-segment', 'duct_1', { segmentIndex: 0 })
+    expect(point).toEqual({ kind: 'handle-drag', nodeId: 'duct_1', handle: PATH_POINT_DRAG_LABEL })
+    expect(segment).toEqual({ kind: 'handle-drag', nodeId: 'duct_1', handle: AXIS_MOVE_DRAG_LABEL })
+    for (const scope of [point, segment]) {
+      expect(
+        snapContextOf({
+          scope: scope!,
+          mode: 'select',
+          tool: null,
+          profileOf: () => undefined,
+          profileOfNode: () => 'structural',
+        }),
+      ).toBe('polygon')
+    }
+  })
 })
 
 function cabinetRun(id: string, children: string[] = [], parentId: string | null = 'level_test') {

package/src/components/editor-2d/renderers/floorplan-registry-layer.tsx

@@ -59,7 +59,11 @@ import {
   useRoomRecords,
 } from '../../../hooks/use-selected-room'
 import { useCeilingEditSession } from '../../../lib/ceiling-edit-session'
-import { ROTATE_HANDLE_DRAG_LABEL } from '../../../lib/contextual-help'
+import {
+  AXIS_MOVE_DRAG_LABEL,
+  PATH_POINT_DRAG_LABEL,
+  ROTATE_HANDLE_DRAG_LABEL,
+} from '../../../lib/contextual-help'
 import {
   canDirectRotateNode,
   resolveDirectManipulationNode,
@@ -321,7 +325,7 @@ export function subscribeFloorplanAffordanceToolCancel(
 // edits that set a direction/shape map to a scope; resize / rotate / body-move
 // affordances return `null` (no polygon/wall snapping chip). Keyed off the
 // affordance name the kinds register (`move-vertex` / `move-edge` / `add-vertex`
-// / `curve` / `move-endpoint`).
+// / `curve` / `move-endpoint` / `move-path-point` / `move-segment`).
 export function floorplanAffordanceReshapeScope(
   affordance: string,
   nodeId: string,
@@ -362,6 +366,14 @@ export function floorplanAffordanceReshapeScope(
   if (affordance.includes('rotate')) {
     return { kind: 'handle-drag', nodeId, handle: ROTATE_HANDLE_DRAG_LABEL }
   }
+  // MEP run point and run segment drags: the same handle-drag scopes as their
+  // 3D arrows, so they snap in the kind's own context (polygon for runs).
+  if (affordance === 'move-path-point') {
+    return { kind: 'handle-drag', nodeId, handle: PATH_POINT_DRAG_LABEL }
+  }
+  if (affordance === 'move-segment') {
+    return { kind: 'handle-drag', nodeId, handle: AXIS_MOVE_DRAG_LABEL }
+  }
   return null
 }