@pascal-app/editor 1.0.0-beta.4 → 1.0.0

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

@@ -39,10 +39,13 @@ import {
   collectParticipants,
   computeGroupBox,
   expandToComponent,
+  type GroupPlanBounds,
+  groupPlanBounds,
   levelFrame,
-  participantExtents,
+  planBoundsCenter,
   rotateGroupPatches,
   rotateGroupSnapshots,
+  rotatePlanBounds,
   translateGroupPatches,
   type Vec2,
 } from '../editor/group-transform-shared'
@@ -112,6 +115,9 @@ export function startFloorplanGroupMove(
     affectedIds: AnyNodeId[]
     candidates: ReturnType<typeof collectAlignmentAnchors>
     restAnchors: ReturnType<typeof bboxCornerAnchors>
+    startBounds: GroupPlanBounds
+    restBounds: GroupPlanBounds
+    rotation: number
     restCenter: Vec2
     lastDelta: Vec2 | null
   }
@@ -140,20 +146,16 @@ export function startFloorplanGroupMove(
     // The group aligns as one rigid footprint: its bbox corners + center are
     // the moving anchors. `computeGroupBox` is world-space (the 3D scene stays
     // mounted under every view mode); plan coords are level-frame, so convert.
-    const restBox = computeGroupBox(fullIds)
     const { inverse: frameInv } = levelFrame(levelId)
-    const boxMin = restBox ? restBox.min.clone().applyMatrix4(frameInv) : null
-    const boxMax = restBox ? restBox.max.clone().applyMatrix4(frameInv) : null
-    const restAnchors =
-      boxMin && boxMax
-        ? bboxCornerAnchors(
-            'group-move',
-            Math.min(boxMin.x, boxMax.x),
-            Math.min(boxMin.z, boxMax.z),
-            Math.max(boxMin.x, boxMax.x),
-            Math.max(boxMin.z, boxMax.z),
-          )
-        : []
+    const restBounds = groupPlanBounds(computeGroupBox(fullIds), starts, frameInv)
+    if (!restBounds) return null
+    const restAnchors = bboxCornerAnchors(
+      'group-move',
+      restBounds.minX,
+      restBounds.minZ,
+      restBounds.maxX,
+      restBounds.maxZ,
+    )
 
     for (const id of affectedIds) {
       useLiveTransforms.getState().clear(id)
@@ -169,12 +171,23 @@ export function startFloorplanGroupMove(
       nodeId,
       handle: GROUP_MOVE_DRAG_LABEL,
     })
-    // Rotation pivot for mid-drag R/T — the participant DATA extents' center
-    // (stable across the drag; rotations re-seed around the same point).
-    const ext = participantExtents(starts)
-    const restCenter: Vec2 = ext ? [(ext.minX + ext.maxX) / 2, (ext.minZ + ext.maxZ) / 2] : [0, 0]
+    // Rotation pivot for mid-drag R/T — the START footprint's center, the same
+    // point the 3D body drag, the idle keyboard rotate and the rotate gizmos
+    // orbit. Stable across the drag; rotations re-seed around the same point.
+    const restCenter = planBoundsCenter(restBounds)
 
-    return { starts, links, affectedIds, candidates, restAnchors, restCenter, lastDelta: null }
+    return {
+      starts,
+      links,
+      affectedIds,
+      candidates,
+      restAnchors,
+      startBounds: restBounds,
+      restBounds,
+      rotation: 0,
+      restCenter,
+      lastDelta: null,
+    }
   }
 
   const applyMove = (e: PointerEvent, s: Session) => {
@@ -241,18 +254,20 @@ export function startFloorplanGroupMove(
   // current delta — the carried group turns exactly like the idle keyboard
   // rotate, and the commit stays a single updateNodes.
   const rotateSession = (s: Session, direction: 1 | -1) => {
-    const rotated = rotateGroupSnapshots(
-      s.starts,
-      s.links,
-      { x: s.restCenter[0], z: s.restCenter[1] },
-      -direction * (Math.PI / 4),
-    )
+    const pivot = { x: s.restCenter[0], z: s.restCenter[1] }
+    const delta = -direction * (Math.PI / 4)
+    const rotated = rotateGroupSnapshots(s.starts, s.links, pivot, delta)
     s.starts = rotated.starts
     s.links = rotated.links
-    const ext = participantExtents(rotated.starts)
-    if (ext) {
-      s.restAnchors = bboxCornerAnchors('group-move', ext.minX, ext.minZ, ext.maxX, ext.maxZ)
-    }
+    s.rotation += delta
+    s.restBounds = rotatePlanBounds(s.startBounds, pivot, s.rotation)
+    s.restAnchors = bboxCornerAnchors(
+      'group-move',
+      s.restBounds.minX,
+      s.restBounds.minZ,
+      s.restBounds.maxX,
+      s.restBounds.maxZ,
+    )
     sfxEmitter.emit('sfx:item-rotate')
     applyDelta(s, s.lastDelta?.[0] ?? 0, s.lastDelta?.[1] ?? 0)
   }
@@ -358,7 +373,22 @@ export function startFloorplanGroupMove(
   const onKeyDown = (e: KeyboardEvent) => {
     const key = e.key.toLowerCase()
     if ((key === 'r' || key === 't') && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) {
-      if (!session) return
+      // Armed but still under the drag threshold: engage first (exactly what
+      // the next pointer-move would do) so the rotation lands inside this
+      // session. Falling through to the global idle arm instead would write
+      // the scene behind snapshots already captured here, and the first
+      // `applyDelta` would republish them — undoing the rotation.
+      if (!session) {
+        session = engage()
+        if (!session) {
+          // No plane hit yet: swallow the chord and keep the gesture armed so
+          // the next pointer-move can still engage; the idle arm must not run
+          // behind the snapshots captured here.
+          e.preventDefault()
+          e.stopPropagation()
+          return
+        }
+      }
       e.preventDefault()
       e.stopPropagation()
       rotateSession(session, key === 'r' ? 1 : -1)
@@ -415,9 +445,13 @@ export function startFloorplanGroupRotate(event: {
   const { starts, links } = collectParticipants(fullIds, nodes, levelId)
   if (starts.length === 0) return false
   const affectedIds: AnyNodeId[] = [...starts.map((s) => s.id), ...links.map((l) => l.id)]
-  const ext = participantExtents(starts)
-  if (!ext) return false
-  const pivot = { x: (ext.minX + ext.maxX) / 2, z: (ext.minZ + ext.maxZ) / 2 }
+  const { inverse: frameInv } = levelFrame(levelId)
+  const bounds = groupPlanBounds(computeGroupBox(fullIds), starts, frameInv)
+  if (!bounds) return false
+  // Same pivot as the dashed box the handles hang off (and as the 3D rotate
+  // gizmo): its centre, not the anchor points' centre.
+  const [pivotX, pivotZ] = planBoundsCenter(bounds)
+  const pivot = { x: pivotX, z: pivotZ }
   const startPlan = clientToPlan(event.clientX, event.clientY)
   if (!startPlan) return false
   // Bearing around the pivot in the plan frame — the same atan2 x→z sense

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

@@ -3,6 +3,7 @@
 import { createSceneApi, nodeRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { type ComponentType, lazy, Suspense, useCallback, useMemo } from 'react'
+import { useRegisteredToolEnabled } from '../../hooks/use-registered-tool-enabled'
 import {
   type FloorplanToolContext,
   getFloorplanNodeExtension,
@@ -35,6 +36,7 @@ function registeredFloorplanTool(
 export function FloorplanRegisteredToolLayer() {
   const mode = useEditor((state) => state.mode)
   const tool = useEditor((state) => state.tool)
+  const registeredToolEnabled = useRegisteredToolEnabled(tool)
   const floorplanMode = useFloorplanMode((state) => state.mode)
   const gridSnapStep = useEditor((state) => state.gridSnapStep)
   const toolDefaults = useEditor((state) =>
@@ -54,7 +56,7 @@ export function FloorplanRegisteredToolLayer() {
     useEditor.getState().setMode('select')
   }, [])
   if (mode !== 'build') return null
-  const Tool = registeredFloorplanTool(tool, floorplanMode)
+  const Tool = registeredToolEnabled ? registeredFloorplanTool(tool, floorplanMode) : null
   return Tool ? (
     <Suspense fallback={null}>
       <Tool

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

@@ -6,8 +6,11 @@ import {
   type AnyNodeId,
   bboxAnchors,
   bboxCornerAnchors,
+  createSceneApi,
   emitter,
   type FloorplanMoveTargetSession,
+  type GroupMoveSnapResult,
+  type MovableConfig,
   nodeRegistry,
   pauseSceneHistory,
   resumeSceneHistory,
@@ -20,7 +23,11 @@ import { useEffect } from 'react'
 import { commitFreshPlacementSubtree } from '../../lib/fresh-planar-placement'
 import { isHistoryShortcut } from '../../lib/history'
 import { isFreshPlacementMetadata, stripPlacementMetadataFlags } from '../../lib/placement-metadata'
-import { resolvePlanarCursorPosition } from '../../lib/planar-cursor-placement'
+import { resolvePrioritizedPlanarCursorPosition } from '../../lib/planar-cursor-placement'
+import {
+  resolveAttachmentPreviewRotation,
+  rigidPlanSvgTransform,
+} from '../../lib/rigid-plan-svg-transform'
 import { movementSfxStepKey } from '../../lib/sfx/movement-tick'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import { resolveAlignmentForFloorplanView } from '../../lib/world-grid-snap'
@@ -104,12 +111,14 @@ export function FloorplanRegistryMoveOverlay() {
     // ── Path 1 — kind-owned `floorplanMoveTarget` ───────────────────
     if (hasMoveTarget && def?.floorplanMoveTarget) {
       const sceneNodes = useScene.getState().nodes
+      const sceneApi = createSceneApi(useScene)
       const session: FloorplanMoveTargetSession = (
         def.floorplanMoveTarget as (a: {
           node: AnyNode
           nodes: Record<AnyNodeId, AnyNode>
+          sceneApi: ReturnType<typeof createSceneApi>
         }) => FloorplanMoveTargetSession
-      )({ node: movingNode, nodes: sceneNodes })
+      )({ node: movingNode, nodes: sceneNodes, sceneApi })
 
       // Capture snapshots of every affected node BEFORE the first apply
       // so the single-undo dance has a clean baseline to revert to.
@@ -544,8 +553,19 @@ export function FloorplanRegistryMoveOverlay() {
       candidateAnchors.push(...bboxAnchors(otherId, b.x, b.y, b.x + b.width, b.y + b.height))
     }
 
-    let lastSnapped: [number, number] | null = null
+    const storedRotation = (movingNode as { rotation?: unknown }).rotation
+    const originalRotation =
+      typeof storedRotation === 'number'
+        ? storedRotation
+        : Array.isArray(storedRotation)
+          ? ((storedRotation as [number?, number?, number?])[1] ?? 0)
+          : 0
+    let currentRotation = originalRotation
+    let lastSnapped: { point: [number, number]; rotation: number } | null = null
     let dragAnchor: [number, number] | null = null
+    let lastPositionValid = true
+    let forcePlace = false
+    const movableValidityConfig = (def?.capabilities?.movable as MovableConfig | undefined) ?? null
 
     // Footprint bounding box drawn around the dragged entry — the 2D
     // counterpart of the 3D `DragBoundingBox`, so a moved / duplicated node
@@ -572,22 +592,74 @@ export function FloorplanRegistryMoveOverlay() {
       if (!isPointerOverFloorplanScene(event.clientX, event.clientY)) return
       const m = toMeters(event.clientX, event.clientY)
       if (!m) return
+      forcePlace = event.altKey
 
-      // 1) Grid snap baseline. Fresh catalog placement is absolute under
-      // the cursor; existing moves preserve the cursor's grab offset. Grid
-      // follows the active snapping mode (Shift cycles it); raw cursor in
-      // any non-grid mode.
+      // 1) Wall attachment gets the raw proposal before grid/alignment. If no
+      // attachment is available, fresh placement is absolute under the cursor
+      // and existing moves preserve the cursor's grab offset before grid snap.
       const gridStep = useEditor.getState().gridSnapStep
       const snap = (value: number) =>
         isGridSnapActive() ? Math.round(value / gridStep) * gridStep : value
-      const resolved = resolvePlanarCursorPosition({
+      const groupMoveSnap = def?.capabilities?.movable?.groupMoveSnap
+      const groupMoveSnapPose = def?.capabilities?.movable?.groupMoveSnapPose
+      const gridSnapPosition = def?.capabilities?.movable?.gridSnapPosition
+      const attachmentEnabled = isGridSnapActive() || isMagneticSnapActive()
+      let attachmentRotation: number | null = null
+      const resolved = resolvePrioritizedPlanarCursorPosition({
         cursor: [m[0], m[1]],
         original: [originalPosition[0], originalPosition[2]],
         anchor: dragAnchor,
         mode: isFreshPlacement ? 'absolute' : 'relative',
-        snap,
+        snap: gridSnapPosition ? undefined : snap,
+        snapPoint:
+          isGridSnapActive() && gridSnapPosition
+            ? ([planX, planZ]) => {
+                const snappedPosition = gridSnapPosition({
+                  node: movingNode,
+                  candidatePosition: [planX, originalPosition[1], planZ],
+                  candidateRotation: originalRotation,
+                  movingIds: [movingNode.id as AnyNodeId],
+                  nodes: useScene.getState().nodes as Record<string, AnyNode>,
+                  levelId:
+                    (useViewer.getState().selection.levelId as AnyNodeId | null) ??
+                    (movingNode.parentId as AnyNodeId | undefined) ??
+                    null,
+                  gridStep,
+                })
+                return [snappedPosition[0], snappedPosition[2]]
+              }
+            : undefined,
+        resolveAttachment:
+          attachmentEnabled && (groupMoveSnapPose || groupMoveSnap)
+            ? ([planX, planZ]) => {
+                const snapArgs: Parameters<NonNullable<typeof groupMoveSnapPose>>[0] = {
+                  node: movingNode,
+                  candidatePosition: [planX, originalPosition[1], planZ],
+                  candidateRotation: currentRotation,
+                  movingIds: [movingNode.id as AnyNodeId],
+                  nodes: useScene.getState().nodes as Record<string, AnyNode>,
+                  levelId:
+                    (useViewer.getState().selection.levelId as AnyNodeId | null) ??
+                    (movingNode.parentId as AnyNodeId | undefined) ??
+                    null,
+                }
+                const snappedPosition: GroupMoveSnapResult | null = groupMoveSnapPose
+                  ? groupMoveSnapPose(snapArgs)
+                  : (() => {
+                      const position = groupMoveSnap?.(snapArgs)
+                      return position ? { position } : null
+                    })()
+                if (!snappedPosition) return null
+                attachmentRotation = snappedPosition.rotation ?? null
+                return [snappedPosition.position[0], snappedPosition.position[2]]
+              }
+            : undefined,
       })
       dragAnchor = resolved.anchor
+      currentRotation = resolveAttachmentPreviewRotation(
+        originalRotation,
+        resolved.attachmentSnapped ? attachmentRotation : null,
+      )
       const [gridX, gridZ] = resolved.point
 
       // 2) Alignment snap layered on top. Treat the grid-snapped point
@@ -598,7 +670,7 @@ export function FloorplanRegistryMoveOverlay() {
       // force-place, not a snap bypass.
       let finalX = gridX
       let finalZ = gridZ
-      if (isAlignmentGuideActive() && candidateAnchors.length > 0) {
+      if (!resolved.attachmentSnapped && isAlignmentGuideActive() && candidateAnchors.length > 0) {
         // Translate the cached local bbox to the proposed pos to get the
         // moving anchors at that location. The entry's untransformed
         // bbox is in world meters relative to the node's origin, so a
@@ -635,35 +707,35 @@ export function FloorplanRegistryMoveOverlay() {
         useAlignmentGuides.getState().clear()
       }
 
-      // 3) Kind-owned attachment snap (cabinet → wall) — 2D parity with the
-      // 3D move tool's `groupMoveSnap` pass. An attach behavior, not an
-      // alignment guide, so it runs in every snapping mode except Off.
-      const groupMoveSnap = def?.capabilities?.movable?.groupMoveSnap
-      if (groupMoveSnap && (isGridSnapActive() || isMagneticSnapActive())) {
-        const snappedPosition = groupMoveSnap({
-          node: movingNode,
-          candidatePosition: [finalX, originalPosition[1], finalZ],
-          movingIds: [movingNode.id as AnyNodeId],
-          nodes: useScene.getState().nodes as Record<string, AnyNode>,
-          levelId:
-            (useViewer.getState().selection.levelId as AnyNodeId | null) ??
-            (movingNode.parentId as AnyNodeId | undefined) ??
-            null,
-        })
-        if (snappedPosition) {
-          finalX = snappedPosition[0]
-          finalZ = snappedPosition[2]
-          useAlignmentGuides.getState().clear()
-        }
-      }
-
-      const dx = finalX - originalPosition[0]
-      const dz = finalZ - originalPosition[2]
+      const transform = rigidPlanSvgTransform({
+        from: [originalPosition[0], originalPosition[2]],
+        fromRotation: originalRotation,
+        to: [finalX, finalZ],
+        toRotation: currentRotation,
+      })
       for (const relatedEntry of relatedEntries) {
-        relatedEntry.setAttribute('transform', `translate(${dx} ${dz})`)
+        relatedEntry.setAttribute('transform', transform)
       }
-      boxEl.setAttribute('transform', `translate(${dx} ${dz})`)
-      lastSnapped = [finalX, finalZ]
+      boxEl.setAttribute('transform', transform)
+      const oldY = originalPosition[1]
+      lastPositionValid = movableValidityConfig?.isValidPosition
+        ? movableValidityConfig.isValidPosition({
+            node: {
+              ...movingNode,
+              position: [finalX, oldY, finalZ],
+              rotation: currentRotation,
+            } as AnyNode,
+            position: [finalX, oldY, finalZ],
+            rotation: currentRotation,
+            levelId:
+              (useViewer.getState().selection.levelId as AnyNodeId | null) ??
+              (movingNode.parentId as AnyNodeId | null) ??
+              null,
+            nodes: useScene.getState().nodes as Record<string, AnyNode>,
+          })
+        : true
+      boxEl.setAttribute('stroke', lastPositionValid || forcePlace ? '#22c55e' : '#ef4444')
+      lastSnapped = { point: [finalX, finalZ], rotation: currentRotation }
     }
 
     const onPointerUp = (event: PointerEvent) => {
@@ -672,9 +744,26 @@ export function FloorplanRegistryMoveOverlay() {
 
       const snapped = lastSnapped
       if (!snapped) return
-      const [sx, sz] = snapped
+      const [sx, sz] = snapped.point
       const [, oldY] = originalPosition
+      const rotation = Array.isArray(storedRotation)
+        ? [
+            (storedRotation as [number?, number?, number?])[0] ?? 0,
+            snapped.rotation,
+            (storedRotation as [number?, number?, number?])[2] ?? 0,
+          ]
+        : snapped.rotation
+      const rotationPatch = 'rotation' in movingNode ? { rotation } : {}
       setMovingNodeOrigin('2d')
+      if (!lastPositionValid && !forcePlace) {
+        for (const relatedEntry of relatedEntries) {
+          relatedEntry.removeAttribute('transform')
+        }
+        useAlignmentGuides.getState().clear()
+        setMovingNode(null)
+        swallowNextClick()
+        return
+      }
       let selectedId = movingNode.id as AnyNodeId
       if (originalPath) {
         // Polyline kinds: shift every point by the committed delta and
@@ -711,6 +800,7 @@ export function FloorplanRegistryMoveOverlay() {
             movingNode.id as AnyNodeId,
             {
               position: [sx, oldY, sz],
+              ...rotationPatch,
               metadata: stripPlacementMetadataFlags(
                 (movingNode as { metadata?: unknown }).metadata,
               ),
@@ -722,6 +812,7 @@ export function FloorplanRegistryMoveOverlay() {
           movingNode.id as AnyNodeId,
           {
             position: [sx, oldY, sz],
+            ...rotationPatch,
           } as Partial<AnyNode>,
         )
       }

package/src/components/editor-2d/renderers/floorplan-dimension-renderer.tsx

@@ -161,12 +161,14 @@ export function FloorplanDimensionRenderer({
   stroke = geometry.stroke ?? '#334155',
   annotationUnitsPerPoint,
   renderMode = 'screen',
+  onSelect,
 }: {
   geometry: DimensionGeometry
   sceneRotationDeg?: number
   stroke?: string
   annotationUnitsPerPoint?: number
   renderMode?: FloorplanDimensionRenderMode
+  onSelect?: () => void
 }): React.ReactElement | null {
   const layout = computeArchitecturalDimensionLayout(
     geometry,
@@ -200,7 +202,18 @@ export function FloorplanDimensionRenderer({
     : undefined
 
   return (
-    <g data-floorplan-dimension="" pointerEvents="none">
+    <g
+      data-floorplan-dimension=""
+      onClick={
+        onSelect
+          ? (event) => {
+              event.stopPropagation()
+              onSelect()
+            }
+          : undefined
+      }
+      pointerEvents={onSelect ? 'auto' : 'none'}
+    >
       <line
         {...lineProps}
         x1={layout.extensionStart[0]}

package/src/components/editor-2d/renderers/floorplan-geometry-renderer.test.tsx

@@ -366,4 +366,20 @@ describe('FloorplanGeometryRenderer static labels', () => {
     expect(markup).toContain('data-floorplan-annotation-obstacle="bounds"')
     expect(markup).toContain('data-floorplan-annotation-obstacle="outline"')
   })
+  test('forwards even-odd fill rules for compound plugin paths', () => {
+    const geometry = {
+      kind: 'path',
+      d: 'M0,0H4V4H0ZM1,1H3V3H1Z',
+      fill: '#3f6b2f',
+      fillRule: 'evenodd',
+    } satisfies FloorplanGeometry
+
+    const markup = renderToStaticMarkup(
+      <svg>
+        <FloorplanGeometryRenderer geometry={geometry} />
+      </svg>,
+    )
+
+    expect(markup).toContain('fill-rule="evenodd"')
+  })
 })

package/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx

@@ -83,6 +83,7 @@ function styleAttrs(
   // filtered out by the caller's type bound).
   const s = g as unknown as {
     fill?: string
+    fillRule?: 'nonzero' | 'evenodd'
     fillOpacity?: number
     stroke?: string
     strokeWidth?: number
@@ -109,6 +110,7 @@ function styleAttrs(
     'data-floorplan-annotation-obstacle': floorplanAnnotationObstacleMode(g),
     'data-floorplan-annotation-role': annotationMetadata.annotationRole,
     fill: documentStyle.fill ?? s.fill ?? 'none',
+    fillRule: s.fillRule,
     fillOpacity: s.fillOpacity,
     stroke: documentStyle.stroke ?? s.stroke,
     strokeWidth,

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

@@ -10,13 +10,16 @@ import {
 } 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 { useFloorplanRender } from '../floorplan-render-context'
+import { useFloorplanRender, useFloorplanSceneRotation } from '../floorplan-render-context'
+import { FloorplanDimensionRenderer } from './floorplan-dimension-renderer'
 import { FloorplanGeometryRenderer } from './floorplan-geometry-renderer'
 
 export interface FloorplanNodePreviewProps {
   node: AnyNode
   parentNode?: AnyNode | null
+  contextNodes?: AnyNode[]
   opacity?: number
   className?: string
   selected?: boolean
@@ -33,6 +36,7 @@ export interface FloorplanNodePreviewProps {
 export const FloorplanNodePreview = memo(function FloorplanNodePreview({
   node,
   parentNode = null,
+  contextNodes: previewContextNodes = [],
   opacity = 0.5,
   className,
   selected = false,
@@ -53,6 +57,9 @@ export const FloorplanNodePreview = memo(function FloorplanNodePreview({
       ...(nodes as Record<string, AnyNode>),
       [node.id]: node,
     }
+    for (const previewNode of previewContextNodes) {
+      contextNodes[previewNode.id] = previewNode
+    }
     if (parentNode) contextNodes[parentNode.id] = parentNode
     const resolvedParent =
       parentNode ?? (node.parentId ? (contextNodes[node.parentId] ?? null) : null)
@@ -90,7 +97,18 @@ export const FloorplanNodePreview = memo(function FloorplanNodePreview({
     }
 
     return (builder as (n: AnyNode, c: GeometryContext) => FloorplanGeometry | null)(node, ctx)
-  }, [highlighted, hovered, moving, node, nodes, parentNode, renderContext, selected, unit])
+  }, [
+    highlighted,
+    hovered,
+    moving,
+    node,
+    nodes,
+    parentNode,
+    previewContextNodes,
+    renderContext,
+    selected,
+    unit,
+  ])
   if (!geometry) return null
 
   return (
@@ -117,11 +135,42 @@ export const FloorplanNodePreview = memo(function FloorplanNodePreview({
 export const FloorplanPlacementPreviewLayer = memo(function FloorplanPlacementPreviewLayer() {
   const node = usePlacementPreview((s) => s.node)
   const parentNode = usePlacementPreview((s) => s.parentNode)
+  const contextNodes = usePlacementPreview((s) => s.contextNodes)
+  const dimensions = usePlacementPreview((s) => s.dimensions)
+  const activeDimensionId = usePlacementPreview((s) => s.activeDimensionId)
+  const dimensionInput = usePlacementPreview((s) => s.dimensionInput)
+  const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
+  const sceneRotationDeg = useFloorplanSceneRotation()
   if (!node) return null
 
   return (
     <g data-floorplan-placement-preview>
-      <FloorplanNodePreview node={node} parentNode={parentNode} />
+      <FloorplanNodePreview contextNodes={contextNodes} node={node} parentNode={parentNode} />
+      <g data-floorplan-placement-dimensions>
+        {dimensions
+          .filter((dimension) => dimension.renderInFloorplan !== false)
+          .map((dimension) => (
+            <FloorplanDimensionRenderer
+              geometry={{
+                kind: 'dimension',
+                start: [dimension.start[0], dimension.start[2]],
+                end: [dimension.end[0], dimension.end[2]],
+                offsetNormal: dimension.offsetNormal,
+                offsetDistance: dimension.offsetDistance,
+                extensionOvershoot: 0.04,
+                text:
+                  dimension.id === activeDimensionId && dimensionInput
+                    ? dimensionInput
+                    : formatLinearMeasurement(dimension.value, unit, metricNotation),
+                stroke: '#6366f1',
+              }}
+              key={dimension.id}
+              onSelect={() => usePlacementPreview.getState().selectDimension(dimension.id)}
+              sceneRotationDeg={sceneRotationDeg}
+            />
+          ))}
+      </g>
     </g>
   )
 })