@pascal-app/editor 1.0.6 → 1.1.0

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,
@@ -78,7 +82,7 @@ import { resolveNodeForDrawingType } from '../../../lib/floorplan/drawing-coordi
 import {
   createFloorplanContextExtensions,
   type FloorplanAnnotationRole,
-  type FloorplanWallDimensionReference,
+  type FloorplanWallDimensionFaces,
   getFloorplanNodeExtension,
   readFloorplanGeometryMetadata,
   withFloorplanGeometryMetadata,
@@ -86,7 +90,6 @@ import {
 import {
   type FloorplanMode,
   resolveFloorplanAnnotationVisibility,
-  resolveFloorplanWallDimensionReference,
 } from '../../../lib/floorplan/floorplan-mode'
 import {
   buildFloorplanContext,
@@ -115,6 +118,11 @@ import { createSessionWrites, type SessionWrites } from '../../../lib/session-wr
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { clearSurfacePlanSnapFeedback } from '../../../lib/surface-plan-snap'
 import { paintZoneMembership } from '../../../lib/units'
+import {
+  startWallPull,
+  WALL_PULL_AFFORDANCE,
+  type WallPullGripPayload,
+} from '../../../lib/wall-pull'
 import useDirectManipulationFeedback from '../../../store/use-direct-manipulation-feedback'
 import useDrawingView from '../../../store/use-drawing-view'
 import useEditor, { isAngleSnapActive, type Mode } from '../../../store/use-editor'
@@ -130,7 +138,12 @@ import { isViewVisible, VIEW_2D } from '../../../store/view-layout'
 import { FloorRegionControls2D } from '../../editor/floor-region-controls'
 import { startGroupPickUp } from '../../editor/group-actions'
 import { classifyParticipant } from '../../editor/group-transform-shared'
-import { RoomHandleDragPreview2D, RoomHandles2D } from '../../editor/room-handles-2d'
+import {
+  RoomHandleDragPreview2D,
+  RoomHandles2D,
+  SelectedWallDimensions2D,
+  useSelectionDimensionNodes,
+} from '../../editor/room-handles-2d'
 import { RoomHighlight2D } from '../../editor/room-highlight'
 import { RoomLabels2D } from '../../editor/room-labels'
 import { suppressBoxSelectForPointer } from '../../tools/select/box-select-state'
@@ -150,7 +163,10 @@ import {
   resolveSvgAnnotationCollisions,
   svgAnnotationLabelId,
 } from './floorplan-annotation-layout'
-import { FloorplanDimensionEditOverlay } from './floorplan-dimension-edit-overlay'
+import {
+  FloorplanDimensionEditOverlay,
+  typeableDimensionAt,
+} from './floorplan-dimension-edit-overlay'
 import { FloorplanDimensionRenderer } from './floorplan-dimension-renderer'
 import { FloorplanGeometryRenderer } from './floorplan-geometry-renderer'
 import {
@@ -199,6 +215,15 @@ const DIRECT_DRAG_THRESHOLD_PX = 4
 const DIRECT_ROTATE_EPSILON = 1e-6
 const DIRECT_ROTATE_RADIANS_PER_PIXEL = Math.PI / 180
 const MAX_HANDLE_UNITS_PER_PIXEL = 0.015
+// A wall end's pull grip, in screen pixels out from the end along the wall:
+// clear of the end's move grip (its hit ring reaches ~17 px), a short dashed
+// leader, then a round button with an outward arrow.
+const PULL_GRIP_LEADER_START_PX = 9
+const PULL_GRIP_CENTER_PX = 30
+const PULL_GRIP_RADIUS_PX = 10
+const PULL_GRIP_HIT_RADIUS_PX = 13
+const PULL_GRIP_FILL = '#10b981' // emerald-500
+const PULL_GRIP_HOVER_FILL = '#059669' // emerald-600
 
 export function resolveFloorplanHandleUnitsPerPixel(unitsPerPixel: number): number {
   return Math.min(unitsPerPixel, MAX_HANDLE_UNITS_PER_PIXEL)
@@ -300,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,
@@ -341,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
 }
 
@@ -387,7 +420,7 @@ type NodeDeps = {
   live: LiveTransform | undefined
   unit: 'metric' | 'imperial'
   metricNotation: 'meters' | 'millimeters'
-  wallDimensionReference: FloorplanWallDimensionReference
+  wallDimensionFaces?: FloorplanWallDimensionFaces
   selected: boolean
   highlighted: boolean
   hovered: boolean
@@ -497,6 +530,20 @@ export function floorplanEntryYieldsToTool(state: {
   return state.mode === 'build' || state.openingPlacement
 }
 
+/**
+ * Whether an entry draws its node without edit handles or dimension chrome: a member of a
+ * multi-selection, a ceiling outside its edit session, or anything while a build tool is armed (a
+ * selected roof keeps its selection for a new plane to join it, but a press near its eave must
+ * draw, not resize it).
+ */
+export function floorplanEntryStripsHandles(state: {
+  mode: Mode
+  multiSelected: boolean
+  ceilingWithoutSession: boolean
+}): boolean {
+  return state.multiSelected || state.ceilingWithoutSession || state.mode === 'build'
+}
+
 function floorplanEntryYieldsToToolNow(): boolean {
   const { mode, tool } = useEditor.getState()
   const movingNode = getMovingNode()
@@ -596,6 +643,11 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   // `handleClickStop` / `handleSelect`, so the tool never sees it. Pass
   // clicks through in that case (`floorplanEntryYieldsToToolNow`).
   const editorMode = useEditor((s) => s.mode)
+  const selectionDimensionNodes = useSelectionDimensionNodes()
+  const selectionDimensionIds = useMemo(
+    () => new Set(selectionDimensionNodes.map((node) => node.id)),
+    [selectionDimensionNodes],
+  )
   const floorplanSelectionTool = useEditor((s) => s.floorplanSelectionTool)
   const endpointReshape = useEndpointReshape()
   const isMarqueeSelectionActive =
@@ -609,12 +661,9 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   const floorplanVisible = useEditor((s) => isViewVisible(s, VIEW_2D))
   const drawingType = useDrawingView((s) => s.drawingType)
   const annotationVisibility = useFloorplanAnnotationVisibility((s) => s.visibility)
-  const wallDimensionReference = useFloorplanAnnotationVisibility((s) => s.wallDimensionReference)
+  const showDimensions = useFloorplanAnnotationVisibility((s) => s.showDimensions)
+  const wallDimensionFaces = useFloorplanAnnotationVisibility((s) => s.wallDimensionFaces)
   const floorplanMode = useFloorplanMode((s) => s.mode)
-  const effectiveWallDimensionReference = resolveFloorplanWallDimensionReference(
-    floorplanMode,
-    wallDimensionReference,
-  )
   // Elevator builders read runtime state imperatively, so entries include this
   // rare-changing ref in their cache deps.
   const interactiveElevators = useInteractive((s) => s.elevators)
@@ -981,6 +1030,12 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return false
       if (movingNode) return false
       if (useEditor.getState().mode === 'delete') return false
+      // A press on a member's dimension value is the type-a-value box's: its click opens it.
+      if (!immediate && typeableDimensionAt(event.target, event.clientX, event.clientY)) {
+        event.stopPropagation()
+        suppressBoxSelectForPointer(event)
+        return true
+      }
       const started = startFloorplanGroupMove(id, event, {
         immediate,
         onClickFallthrough: immediate ? undefined : () => startGroupPickUp(),
@@ -1299,6 +1354,16 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
         runFloorplanWallPush(payload, event.clientX, event.clientY)
         return
       }
+      // A wall end's pull grip opens the Walls run at that end; the plan's
+      // wall draft then follows the pointer and the release places the wall.
+      if (affordance === WALL_PULL_AFFORDANCE) {
+        event.preventDefault()
+        event.stopPropagation()
+        suppressBoxSelectForPointer(event)
+        const grip = payload as WallPullGripPayload
+        startWallPull({ wallId: grip.wallId, endpoint: grip.endpoint, origin: '2d' })
+        return
+      }
 
       const sceneNodes = useScene.getState().nodes
       const node = sceneNodes[nodeId]
@@ -1590,6 +1655,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       <FloorplanRegistryEntry
         activeDragId={handleIdForNode(activeDragId, entry.id)}
         annotationVisibility={annotationVisibility}
+        showDimensions={showDimensions}
         floorplanMode={floorplanMode}
         floorplanVisible={floorplanVisible}
         geometryCacheRef={geometryCacheRef}
@@ -1597,6 +1663,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
         hoveredHandleId={handleIdForNode(hoveredHandleId, entry.id)}
         interactiveElevators={interactiveElevators}
         isMarqueeSelectionActive={isMarqueeSelectionActive}
+        keepsSelectionDimensions={selectionDimensionIds.has(entry.id)}
         key={`${pass}-${entry.id}`}
         levelDataCacheRef={levelDataCacheRef}
         levelNodeIdsByType={floorplanData.levelNodeIdsByType}
@@ -1619,7 +1686,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
         siblingEpoch={entry.dependsOnSiblingInputs ? (siblingEpochs.get(entry.id) ?? 0) : 0}
         unit={unit}
         metricNotation={metricNotation}
-        wallDimensionReference={effectiveWallDimensionReference}
+        wallDimensionFaces={wallDimensionFaces}
         visibilityRootId={
           entry.visibilityRootId ?? (entry.ctxOverrides ? undefined : (levelId as AnyNodeId))
         }
@@ -1669,6 +1736,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       <g className="floorplan-registry-handles">{renderEntries('handles')}</g>
       <RoomHandles2D levelId={levelId} />
       <RoomHandleDragPreview2D levelId={levelId} />
+      <SelectedWallDimensions2D levelId={levelId} />
       <FloorplanAnnotationLayoutResolver active={floorplanVisible} />
       {/* Click-to-type dimension labels. Portals its HTML input to
           document.body, so mounting it inside the SVG tree is safe. */}
@@ -1707,9 +1775,8 @@ function FloorplanAnnotationLayoutResolver({ active }: { active: boolean }) {
   const drawingType = useDrawingView((state) => state.drawingType)
   const annotationLayoutOverrides = useDrawingView((state) => state.annotationLayoutOverrides)
   const annotationVisibility = useFloorplanAnnotationVisibility((state) => state.visibility)
-  const wallDimensionReference = useFloorplanAnnotationVisibility(
-    (state) => state.wallDimensionReference,
-  )
+  const showDimensions = useFloorplanAnnotationVisibility((state) => state.showDimensions)
+  const wallDimensionFaces = useFloorplanAnnotationVisibility((state) => state.wallDimensionFaces)
   const floorplanMode = useFloorplanMode((state) => state.mode)
   const layoutInputs = useMemo(
     () => ({
@@ -1718,7 +1785,8 @@ function FloorplanAnnotationLayoutResolver({ active }: { active: boolean }) {
       drawingType,
       interactionIdle,
       settledLayoutEpoch,
-      wallDimensionReference,
+      showDimensions,
+      wallDimensionFaces,
       floorplanMode,
     }),
     [
@@ -1727,7 +1795,8 @@ function FloorplanAnnotationLayoutResolver({ active }: { active: boolean }) {
       drawingType,
       interactionIdle,
       settledLayoutEpoch,
-      wallDimensionReference,
+      showDimensions,
+      wallDimensionFaces,
       floorplanMode,
     ],
   )
@@ -1955,6 +2024,7 @@ function readFloorplanAnnotationLayoutOffset(label: SVGGElement) {
 type FloorplanRegistryEntryProps = {
   activeDragId: string | null
   annotationVisibility: FloorplanAnnotationVisibility
+  showDimensions: boolean
   floorplanMode: FloorplanMode
   ctxOverrides: FloorplanContextOverrides | undefined
   floorplanVisible: boolean
@@ -1963,6 +2033,8 @@ type FloorplanRegistryEntryProps = {
   hoveredHandleId: string | null
   interactiveElevators: unknown
   isMarqueeSelectionActive: boolean
+  /** A wall in a multi-selection still shows its own length (`useSelectionDimensionNodes`). */
+  keepsSelectionDimensions: boolean
   levelDataCacheRef: { current: Map<string, LevelDataCacheEntry> }
   levelNodeIdsByType: ReadonlyMap<string, readonly AnyNodeId[]>
   moving: boolean
@@ -1996,13 +2068,14 @@ type FloorplanRegistryEntryProps = {
   siblingEpoch: number
   unit: 'metric' | 'imperial'
   metricNotation: 'meters' | 'millimeters'
-  wallDimensionReference: FloorplanWallDimensionReference
+  wallDimensionFaces: FloorplanWallDimensionFaces
   visibilityRootId: AnyNodeId | undefined
 }
 
 const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   activeDragId,
   annotationVisibility,
+  showDimensions,
   floorplanMode,
   ctxOverrides,
   floorplanVisible,
@@ -2011,6 +2084,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   hoveredHandleId,
   interactiveElevators,
   isMarqueeSelectionActive,
+  keepsSelectionDimensions,
   levelDataCacheRef,
   levelNodeIdsByType,
   moving,
@@ -2032,7 +2106,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   siblingEpoch,
   unit,
   metricNotation,
-  wallDimensionReference,
+  wallDimensionFaces,
   visibilityRootId,
 }: FloorplanRegistryEntryProps): React.ReactElement | null {
   // A node an agent just built is drawn on its construction-reveal turn, as in 3D.
@@ -2049,7 +2123,12 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   const ceilingWithoutSession = useCeilingEditSession(
     (state) => node.type === 'ceiling' && state.session?.ceilingId !== nodeId,
   )
-  const suppressHandles = multiSelected || ceilingWithoutSession
+  const mode = useEditor((state) => state.mode)
+  const suppressHandles = floorplanEntryStripsHandles({
+    mode,
+    multiSelected,
+    ceilingWithoutSession,
+  })
   const selectedLevelId = useViewer((state) => state.selection.levelId)
   const selectionProxyId = resolveSelectionProxyId(
     node,
@@ -2089,6 +2168,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
       referencedAnnotationRole,
       selected,
       target: 'editor',
+      dimensions: showDimensions,
     },
   )
 
@@ -2220,7 +2300,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
     siblingEpoch,
     unit,
     metricNotation,
-    wallDimensionReference,
+    wallDimensionFaces,
     visibilityRootId,
   })
   const rawGeometry = cacheEntry ? cacheEntry[pass] : null
@@ -2229,10 +2309,10 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
     : null
   // Multi-selection shows highlight only: strip this member's edit handles /
   // dimension chrome (all of which live in the overlay pass) while keeping
-  // its highlighted body geometry.
+  // its highlighted body geometry and, for a wall, its own length.
   const geometry =
     visibleGeometry && suppressHandles && pass !== 'base'
-      ? stripHandleChrome(visibleGeometry)
+      ? stripHandleChrome(visibleGeometry, keepsSelectionDimensions)
       : visibleGeometry
   useFloorplanReveal(nodeId, entryRef, cacheEntry, revealWaiting, revealActive)
   if (revealWaiting || !geometry) return null
@@ -2293,7 +2373,7 @@ type BuildFloorplanEntryGeometryArgs = {
   siblingEpoch: number
   unit: 'metric' | 'imperial'
   metricNotation: 'meters' | 'millimeters'
-  wallDimensionReference: FloorplanWallDimensionReference
+  wallDimensionFaces?: FloorplanWallDimensionFaces
   visibilityRootId: AnyNodeId | undefined
 }
 
@@ -2353,7 +2433,7 @@ export function buildFloorplanEntryGeometry({
   siblingEpoch,
   unit,
   metricNotation,
-  wallDimensionReference,
+  wallDimensionFaces,
   visibilityRootId,
 }: BuildFloorplanEntryGeometryArgs): CacheEntry | null {
   const def = nodeRegistry.get(node.type)
@@ -2381,7 +2461,7 @@ export function buildFloorplanEntryGeometry({
     live,
     unit,
     metricNotation,
-    wallDimensionReference,
+    wallDimensionFaces,
     selected,
     highlighted,
     hovered,
@@ -2468,7 +2548,7 @@ export function buildFloorplanEntryGeometry({
     unit,
     metricNotation,
     roomLabelOverlay: true,
-    wallDimensionReference,
+    wallDimensionFaces,
     highlighted,
     hovered,
     moving,
@@ -2494,7 +2574,7 @@ export function buildFloorplanEntryGeometry({
           metricNotation,
           purpose: 'edit',
           roomLabelOverlay: true,
-          wallDimensionReference,
+          wallDimensionFaces,
         }),
         viewState: palette
           ? {
@@ -2642,6 +2722,87 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
 
   return renderInteractive(geometry, 0)
 
+  /**
+   * A wall end's "pull to continue" grip: screen-sized, just past the end
+   * along the wall, emerald so it reads apart from the end's move grip.
+   */
+  function renderPullGrip(
+    g: Extract<FloorplanGeometry, { kind: 'move-arrow' }>,
+    keyHint: number,
+  ): React.ReactElement {
+    const handleId = `${makeHandleId(nodeId, g.payload)}:pull`
+    const isHovered = hoveredHandleId === handleId
+    const k = handleUnitsPerPixel
+    const c = PULL_GRIP_CENTER_PX * k
+    const r = PULL_GRIP_RADIUS_PX * (isHovered ? 1.12 : 1) * k
+    // Outward arrow inside the button: shaft then head, tip along +x.
+    const arrowD = [
+      `M ${c - 5.5 * k},${-1.4 * k}`,
+      `L ${c + 0.5 * k},${-1.4 * k}`,
+      `L ${c + 0.5 * k},${-4.6 * k}`,
+      `L ${c + 6 * k},0`,
+      `L ${c + 0.5 * k},${4.6 * k}`,
+      `L ${c + 0.5 * k},${1.4 * k}`,
+      `L ${c - 5.5 * k},${1.4 * k}`,
+      'Z',
+    ].join(' ')
+    const affordance = g.affordance
+    const payload = g.payload
+    return (
+      <g
+        data-wall-pull-grip={
+          typeof payload === 'object' && payload && 'endpoint' in payload
+            ? String((payload as { endpoint: unknown }).endpoint)
+            : ''
+        }
+        key={keyHint}
+        onClick={(e) => e.stopPropagation()}
+        transform={`translate(${g.point[0]} ${g.point[1]}) rotate(${(g.angle * 180) / Math.PI})`}
+      >
+        <line
+          pointerEvents="none"
+          stroke={PULL_GRIP_FILL}
+          strokeDasharray={`${3 * k} ${2.5 * k}`}
+          strokeLinecap="round"
+          strokeWidth={1.5 * k}
+          x1={PULL_GRIP_LEADER_START_PX * k}
+          x2={c - r}
+          y1={0}
+          y2={0}
+        />
+        <circle
+          cx={c}
+          cy={0}
+          fill={isHovered ? PULL_GRIP_HOVER_FILL : PULL_GRIP_FILL}
+          pointerEvents="none"
+          r={r}
+          stroke="#ffffff"
+          strokeWidth={1.5 * k}
+        />
+        <path d={arrowD} fill="#ffffff" pointerEvents="none" />
+        <circle
+          cx={c}
+          cy={0}
+          fill="transparent"
+          onPointerDown={(e) => {
+            if (affordance) {
+              onHandlePointerDown(affordance, payload, e as ReactPointerEvent<SVGGElement>)
+            }
+          }}
+          onPointerEnter={() => onHandleHoverChange(handleId)}
+          onPointerLeave={() => onHandleHoverChange(null)}
+          // Fill only: the default stroke is a plan metre wide, and would take
+          // the press meant for the end's move grip.
+          pointerEvents="fill"
+          r={PULL_GRIP_HIT_RADIUS_PX * k}
+          style={{ cursor: 'grab' }}
+        >
+          {g.title ? <title>{g.title}</title> : null}
+        </circle>
+      </g>
+    )
+  }
+
   function renderInteractive(g: FloorplanGeometry, keyHint: number): React.ReactElement {
     switch (g.kind) {
       case 'group': {
@@ -2914,7 +3075,8 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
         const head1 = `M ${t1x} ${t1y} L ${b1ax} ${b1ay} L ${b1bx} ${b1by} Z`
         const head2 = `M ${t2x} ${t2y} L ${b2ax} ${b2ay} L ${b2bx} ${b2by} Z`
         const fill = isHovered ? '#a5b4fc' : '#8381ed'
-        const strokeWidthPx = isHovered ? 2.4 : 1.8
+        const scale = g.scale ?? 1
+        const strokeWidthPx = (isHovered ? 2.4 : 1.8) * Math.sqrt(scale)
         const angleDeg = (g.angle * 180) / Math.PI
         const affordance = g.affordance
         const payload = g.payload
@@ -2923,7 +3085,7 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
           <g
             key={keyHint}
             onClick={(e) => e.stopPropagation()}
-            transform={`translate(${g.point[0]} ${g.point[1]}) rotate(${angleDeg})`}
+            transform={`translate(${g.point[0]} ${g.point[1]}) rotate(${angleDeg}) scale(${scale})`}
           >
             <path
               d={arcPath}
@@ -2978,6 +3140,7 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
       }
       case 'move-arrow': {
         if (!palette) return <></>
+        if (g.variant === 'pull') return renderPullGrip(g, keyHint)
         // Affordance-routed arrows (door width-resize) get a per-payload
         // handle id so each side can hover independently; default
         // (move-flow) arrows share the node's :move id like the dot.
@@ -2987,13 +3150,14 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
         // so it shrinks on zoom-out and grows on zoom-in, matching the
         // wall it accompanies. Composed of a rectangular shaft + triangular
         // head, drawn as a single path for a clean fill + stroke outline.
-        const sl = 0.1 // shaft length (shortened body)
-        const hl = 0.12 // head length
-        const sh = 0.04 // shaft half-height
-        const hh = 0.1 // head half-height
+        const k = g.scale ?? 1
+        const sl = 0.1 * k // shaft length (shortened body)
+        const hl = 0.12 * k // head length
+        const sh = 0.04 * k // shaft half-height
+        const hh = 0.1 * k // head half-height
         // Inset the shaft start so the arrow sits a little off the wall
         // body (matches the 3D `HANDLE_OFFSET`).
-        const bi = 0.03 // base inset
+        const bi = 0.03 * k // base inset
         const arrowD = `M ${bi},${-sh} L ${bi + sl},${-sh} L ${bi + sl},${-hh} L ${bi + sl + hl},0 L ${bi + sl},${hh} L ${bi + sl},${sh} L ${bi},${sh} Z`
         // Indigo palette to match the 3D wall push arrows
         // (`ARROW_COLOR` / `ARROW_HOVER_COLOR`) and the corner-sphere
@@ -3642,11 +3806,19 @@ const HANDLE_CHROME_KINDS = new Set<FloorplanGeometry['kind']>([
   'equal-spacing-badge',
 ])
 
-function stripHandleChrome(g: FloorplanGeometry): FloorplanGeometry | null {
+function stripHandleChrome(
+  g: FloorplanGeometry,
+  keepContextualDimensions = false,
+): FloorplanGeometry | null {
+  if (
+    keepContextualDimensions &&
+    readFloorplanGeometryMetadata(g).annotationRole === 'contextual-dimension'
+  )
+    return g
   if (HANDLE_CHROME_KINDS.has(g.kind)) return null
   if (g.kind === 'group') {
     const children = g.children
-      .map(stripHandleChrome)
+      .map((child) => stripHandleChrome(child, keepContextualDimensions))
       .filter((c): c is FloorplanGeometry => c !== null)
     if (children.length === 0) return null
     return { kind: 'group', children, transform: g.transform }
@@ -3763,7 +3935,7 @@ function nodeDepsEqual(a: NodeDeps, b: NodeDeps): boolean {
     'live',
     'unit',
     'metricNotation',
-    'wallDimensionReference',
+    'wallDimensionFaces',
     'selected',
     'highlighted',
     'hovered',