@pascal-app/editor 1.0.6 → 1.0.7

package/src/components/editor/registry-action-contributions.test.tsx

@@ -1,7 +1,13 @@
 import { afterEach, describe, expect, test } from 'bun:test'
-import { type AnyNode, registerNode, useInteractive } from '@pascal-app/core'
+import { type AnyNode, type MechanismPart, registerNode, useInteractive } from '@pascal-app/core'
+import type { MouseEvent, ReactElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { MechanismButton, selectedMechanismNode } from './registry-action-contributions'
+import {
+  MechanismButton,
+  MechanismPartButton,
+  NodeMechanismActions,
+  soleSelectedNode,
+} from './registry-action-contributions'
 
 const switchMechanism = {
   has: (node: AnyNode) => (node as unknown as { joints: number }).joints > 0,
@@ -23,6 +29,30 @@ function articulated(joints: number): AnyNode {
   return { object: 'node', id: `${kind}_1`, type: kind, joints } as unknown as AnyNode
 }
 
+const shutters: MechanismPart = {
+  id: 'shutters',
+  label: 'Shutters',
+  icon: 'shutters',
+  verb: 'open',
+  has: () => true,
+  isOn: (node, state) => Boolean(state.mechanisms[`${node.id}:shutters` as never]),
+  set: (node, on) => useInteractive.getState().setMechanism(`${node.id}:shutters` as never, on),
+}
+
+function shuttered(): AnyNode {
+  const kind = `test:shuttered-${crypto.randomUUID()}`
+  registerNode({
+    kind,
+    schemaVersion: 1,
+    category: 'structure',
+    defaults: () => ({}),
+    capabilities: {
+      mechanism: { ...switchMechanism, verb: 'open', icon: 'window', parts: [shutters] },
+    },
+  } as never)
+  return { object: 'node', id: `${kind}_1`, type: kind, joints: 1 } as unknown as AnyNode
+}
+
 const byId = (...nodes: AnyNode[]) => Object.fromEntries(nodes.map((node) => [node.id, node]))
 
 afterEach(() => {
@@ -33,17 +63,20 @@ afterEach(() => {
 describe('mechanism action in the action menu', () => {
   test('the only selected node gets Play when its kind declares a mechanism', () => {
     const node = articulated(2)
-    expect(selectedMechanismNode([node.id], byId(node))).toBe(node)
+    expect(soleSelectedNode([node.id], byId(node))).toBe(node)
+    expect(renderToStaticMarkup(<NodeMechanismActions node={node} />)).toContain(
+      'aria-label="Play"',
+    )
   })
 
   test('no Play without moving parts, for a multi-selection, or without the capability', () => {
     const still = articulated(0)
-    expect(selectedMechanismNode([still.id], byId(still))).toBeUndefined()
+    expect(renderToStaticMarkup(<NodeMechanismActions node={still} />)).toBe('')
 
     const node = articulated(2)
     const other = { object: 'node', id: 'other_1', type: 'other' } as unknown as AnyNode
-    expect(selectedMechanismNode([node.id, other.id], byId(node, other))).toBeUndefined()
-    expect(selectedMechanismNode([other.id], byId(other))).toBeUndefined()
+    expect(soleSelectedNode([node.id, other.id], byId(node, other))).toBeUndefined()
+    expect(renderToStaticMarkup(<NodeMechanismActions node={other} />)).toBe('')
   })
 
   test('the button reads Play, then Stop while the mechanism runs', () => {
@@ -61,3 +94,31 @@ describe('mechanism action in the action menu', () => {
     expect(running).toContain('aria-pressed="true"')
   })
 })
+
+describe('mechanism parts in the action menu', () => {
+  test('a window with shutters gets Open shutters beside Open', () => {
+    const markup = renderToStaticMarkup(<NodeMechanismActions node={shuttered()} />)
+    expect(markup.match(/aria-label="[^"]*"/g)).toEqual([
+      'aria-label="Open"',
+      'aria-label="Open shutters"',
+    ])
+  })
+
+  test('the shutters button opens them alone, then reads Close shutters', () => {
+    const node = shuttered()
+    let button: ReactElement<{ onClick: (event: MouseEvent) => void }> | undefined
+    // Rendering the button as a hook call hands over the element it returns, onClick included.
+    function Probe() {
+      button = MechanismPartButton({ node, part: shutters, running: false }) as typeof button
+      return null
+    }
+    renderToStaticMarkup(<Probe />)
+    button?.props.onClick({ stopPropagation: () => {} } as MouseEvent)
+    expect(shutters.isOn(node, useInteractive.getState())).toBe(true)
+    expect(switchMechanism.isOn(node, useInteractive.getState())).toBe(false)
+
+    const open = renderToStaticMarkup(<MechanismPartButton node={node} part={shutters} running />)
+    expect(open).toContain('aria-label="Close shutters"')
+    expect(open).toContain('aria-pressed="true"')
+  })
+})

package/src/components/editor/registry-action-contributions.tsx

@@ -4,10 +4,14 @@ import {
   type AnyNode,
   type AnyNodeId,
   type MechanismCapability,
+  type MechanismPart,
   nodeMechanism,
+  nodeMechanismParts,
   nodeRegistry,
   toggleMechanism,
+  toggleMechanismPart,
   useInteractive,
+  usePascalI18n,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
@@ -16,6 +20,7 @@ import { type ComponentType, lazy, Suspense } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { getFloorplanNodeExtension } from '../../lib/floorplan/floorplan-extension'
 import { ActionMenuButton } from './action-menu-button'
+import { InspectorExtensionActions } from './inspector-extension-actions'
 
 type Loader = () => Promise<{ default: ComponentType }>
 const lazyCache = new WeakMap<Loader, ComponentType>()
@@ -30,13 +35,12 @@ function contribution(kind: string): ComponentType | null {
   return component
 }
 
-/** The node the action menu's Play/Stop runs: the only selected node, when its kind declares a mechanism. */
-export function selectedMechanismNode(
+/** The node the action menu's mechanism buttons run: the only selected node. */
+export function soleSelectedNode(
   selectedIds: readonly string[],
   nodes: Readonly<Record<string, AnyNode>>,
 ): AnyNode | undefined {
-  const node = selectedIds.length === 1 ? nodes[selectedIds[0]!] : undefined
-  return nodeMechanism(node) ? node : undefined
+  return selectedIds.length === 1 ? nodes[selectedIds[0]!] : undefined
 }
 
 function MechanismGlyph({
@@ -61,6 +65,34 @@ function MechanismGlyph({
   return <Glyph className="h-4 w-4" />
 }
 
+/** Two louvred leaves: shut across the window, or swung out to its sides. */
+function ShuttersGlyph({ open }: { open: boolean }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-4 w-4"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+    >
+      {open ? (
+        <>
+          <rect height="16" rx="1" width="8" x="8" y="4" />
+          <path d="M8 4 3 6v12l5 2M16 4l5 2v12l-5 2" />
+        </>
+      ) : (
+        <>
+          <rect height="18" rx="1" width="16" x="4" y="3" />
+          <path d="M12 3v18M7 8h2M7 12h2M7 16h2M15 8h2M15 12h2M15 16h2" />
+        </>
+      )}
+    </svg>
+  )
+}
+
 export function MechanismButton({
   node,
   mechanism,
@@ -70,7 +102,12 @@ export function MechanismButton({
   mechanism: MechanismCapability
   running: boolean
 }) {
-  const label = mechanism.icon ? (running ? 'Close' : 'Open') : running ? 'Stop' : 'Play'
+  const i18n = usePascalI18n()
+  const label = i18n._({
+    id: 'editor.mechanismAction',
+    message: '{action, select, close {Close} open {Open} stop {Stop} other {Play}}',
+    values: { action: mechanism.icon ? (running ? 'close' : 'open') : running ? 'stop' : 'play' },
+  })
   return (
     <ActionMenuButton
       keys={['E']}
@@ -86,21 +123,83 @@ export function MechanismButton({
   )
 }
 
-/** Play/Stop for a single selected node whose kind declares `capabilities.mechanism`. */
-function MechanismAction() {
-  const selected = useViewer((s) => s.selection.selectedIds)
-  const node = useScene((s) => selectedMechanismNode(selected, s.nodes))
+/** A second control beside the main one (a window's shutters), with its own running state. */
+export function MechanismPartButton({
+  node,
+  part,
+  running,
+}: {
+  node: AnyNode
+  part: MechanismPart
+  running: boolean
+}) {
+  const i18n = usePascalI18n()
+  const label =
+    part.icon === 'shutters'
+      ? i18n._({
+          id: 'editor.mechanismPartAction.shutters',
+          message: '{action, select, close {Close shutters} other {Open shutters}}',
+          values: { action: running ? 'close' : 'open' },
+        })
+      : i18n._({
+          id: 'editor.mechanismAction',
+          message: '{action, select, close {Close} open {Open} stop {Stop} other {Play}}',
+          values: {
+            action: part.verb === 'open' ? (running ? 'close' : 'open') : running ? 'stop' : 'play',
+          },
+        })
+  return (
+    <ActionMenuButton
+      label={label}
+      onClick={(event) => {
+        event.stopPropagation()
+        toggleMechanismPart(part, node)
+      }}
+      pressed={running}
+    >
+      {part.icon === 'shutters' ? (
+        <ShuttersGlyph open={!running} />
+      ) : (
+        <MechanismGlyph icon={undefined} running={running} />
+      )}
+    </ActionMenuButton>
+  )
+}
+
+function MechanismPartAction({ node, part }: { node: AnyNode; part: MechanismPart }) {
+  const running = useInteractive((s) => part.isOn(node, s))
+  return <MechanismPartButton node={node} part={part} running={running} />
+}
+
+/**
+ * Play/Stop for a kind declaring `capabilities.mechanism`, then one button per
+ * part the node has. Parts don't need the main mechanism: a fixed window can
+ * still have shutters.
+ */
+export function NodeMechanismActions({ node }: { node: AnyNode }) {
   const mechanism = nodeMechanism(node)
-  const running = useInteractive((s) => (node && mechanism ? mechanism.isOn(node, s) : false))
-  return node && mechanism ? (
-    <MechanismButton mechanism={mechanism} node={node} running={running} />
-  ) : null
+  const running = useInteractive((s) => (mechanism ? mechanism.isOn(node, s) : false))
+  return (
+    <>
+      {mechanism ? <MechanismButton mechanism={mechanism} node={node} running={running} /> : null}
+      {nodeMechanismParts(node).map((part) => (
+        <MechanismPartAction key={part.id} node={node} part={part} />
+      ))}
+    </>
+  )
+}
+
+function MechanismActions() {
+  const selected = useViewer((s) => s.selection.selectedIds)
+  const node = useScene((s) => soleSelectedNode(selected, s.nodes))
+  return node ? <NodeMechanismActions node={node} /> : null
 }
 
 /**
  * The buttons kinds add to the action menu for selections holding them
  * (`extensions['pascal:editor/floorplan'].actionMenu.actions`), in 2D and 3D
- * alike. Each contribution reads the selection and decides its own visibility.
+ * alike, then one per plugin inspector extension of the selected node. Each
+ * contribution reads the selection and decides its own visibility.
  */
 export function RegistryActionContributions() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
@@ -118,7 +217,7 @@ export function RegistryActionContributions() {
   )
   return (
     <>
-      <MechanismAction />
+      <MechanismActions />
       {kinds.map((kind) => {
         const Contribution = contribution(kind)
         return Contribution ? (
@@ -127,6 +226,7 @@ export function RegistryActionContributions() {
           </Suspense>
         ) : null
       })}
+      <InspectorExtensionActions />
     </>
   )
 }

package/src/components/editor/riser-diagram-panel.tsx

@@ -1,9 +1,18 @@
 'use client'
 
-import { type AnyNodeId, buildRiserDiagram, useScene } from '@pascal-app/core'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  buildRiserDiagram,
+  type PascalI18n,
+  type RiserMarker,
+  usePascalI18n,
+  useScene,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { X } from 'lucide-react'
 import { useMemo } from 'react'
+import { inspectorOptionDescriptor } from '../../i18n/node-messages'
 import useEditor from '../../store/use-editor'
 
 // Set per theme on the panel root; the light values are darker so the 9-unit
@@ -33,6 +42,7 @@ export function RiserDiagramPanel() {
 }
 
 function RiserDiagramContent() {
+  const i18n = usePascalI18n()
   const setRiserOpen = useEditor((s) => s.setRiserOpen)
   const nodes = useScene((s) => s.nodes)
   const selectedIds = useViewer((s) => s.selection.selectedIds)
@@ -47,15 +57,30 @@ function RiserDiagramContent() {
   const ty = diagram ? -diagram.bounds.minY * SCALE + PADDING : 0
 
   return (
-    <div className="pointer-events-auto absolute top-4 right-4 z-30 flex max-h-[80vh] w-[26rem] flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 text-foreground shadow-lg backdrop-blur-xl [--riser-vent:#9333ea] [--riser-waste:#0369a1] dark:[--riser-vent:#a855f7] dark:[--riser-waste:#0ea5e9]">
+    <div
+      data-surface="riser-diagram"
+      className="pointer-events-auto absolute top-4 right-4 z-30 flex max-h-[80vh] w-[26rem] flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 text-foreground shadow-lg backdrop-blur-xl [--riser-vent:#9333ea] [--riser-waste:#0369a1] dark:[--riser-vent:#a855f7] dark:[--riser-waste:#0ea5e9]"
+    >
       <div className="flex items-center justify-between border-border/40 border-b px-4 py-2.5">
         <div className="flex flex-col">
-          <span className="font-medium text-sm">Riser Diagram</span>
-          <span className="text-muted-foreground text-xs">DWV plumbing isometric</span>
+          <span className="font-medium text-sm">
+            {i18n._({ id: 'editor.riserDiagramPanel.riserDiagram', message: 'Riser Diagram' })}
+          </span>
+          <span className="text-muted-foreground text-xs">
+            {i18n._({
+              id: 'editor.riserDiagramPanel.dwvPlumbingIsometric',
+              message: 'DWV plumbing isometric',
+            })}
+          </span>
         </div>
         <button
+          aria-label={i18n._({
+            id: 'editor.riserDiagramPanel.close',
+            message: 'Close riser diagram',
+          })}
           className="flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-black/6 dark:hover:bg-white/10"
           onClick={() => setRiserOpen(false)}
+          title={i18n._({ id: 'editor.riserDiagramPanel.close', message: 'Close riser diagram' })}
         >
           <X className="h-4 w-4 text-muted-foreground" />
         </button>
@@ -63,11 +88,12 @@ function RiserDiagramContent() {
 
       <div className="flex items-center gap-3 border-border/40 border-b px-4 py-2 text-xs">
         <span className="flex items-center gap-1.5">
-          <span className="h-0.5 w-4" style={{ background: WASTE_COLOR }} /> Waste
+          <span className="h-0.5 w-4" style={{ background: WASTE_COLOR }} />{' '}
+          {i18n._({ id: 'editor.riserDiagramPanel.waste', message: 'Waste' })}
         </span>
         <span className="flex items-center gap-1.5">
           <span className="h-0 w-4 border-t-2 border-dashed" style={{ borderColor: VENT_COLOR }} />{' '}
-          Vent
+          {i18n._({ id: 'editor.riserDiagramPanel.vent', message: 'Vent' })}
         </span>
       </div>
 
@@ -76,7 +102,10 @@ function RiserDiagramContent() {
           <svg
             height={Math.max(height, 120)}
             role="img"
-            aria-label="DWV riser diagram"
+            aria-label={i18n._({
+              id: 'editor.riserDiagramPanel.dwvRiserDiagram',
+              message: 'DWV riser diagram',
+            })}
             viewBox={`0 0 ${Math.max(width, 200)} ${Math.max(height, 120)}`}
             width="100%"
           >
@@ -127,7 +156,7 @@ function RiserDiagramContent() {
                     <circle fill={MARKER_COLOR} r={3} stroke={MARKER_COLOR} strokeWidth={1.5} />
                   )}
                   <text fill={MARKER_COLOR} fontSize={9} x={8} y={3}>
-                    {marker.label}
+                    {markerLabel(marker, nodes, i18n)}
                   </text>
                 </g>
               ))}
@@ -135,10 +164,31 @@ function RiserDiagramContent() {
           </svg>
         ) : (
           <div className="flex h-32 items-center justify-center px-6 text-center text-muted-foreground text-sm">
-            No drain, waste, or vent pipes yet. Draw plumbing to see the riser diagram.
+            {i18n._({
+              id: 'editor.riserDiagramPanel.noDrainWasteOrVentPipes',
+              message:
+                'No drain, waste, or vent pipes yet. Draw plumbing to see the riser diagram.',
+            })}
           </div>
         )}
       </div>
     </div>
   )
 }
+
+/** Core's marker labels are English ("2\" P-trap"); the panel words them in the UI language. */
+function markerLabel(marker: RiserMarker, nodes: Record<string, AnyNode>, i18n: PascalI18n) {
+  const node = nodes[marker.nodeId]
+  if (marker.kind === 'fitting' && node?.type === 'pipe-fitting')
+    return i18n._(inspectorOptionDescriptor(node.fittingType))
+  if (!(node && 'diameter' in node && typeof node.diameter === 'number')) return marker.label
+  const values = { diameter: String(node.diameter) }
+  return marker.kind === 'trap'
+    ? i18n._({ id: 'editor.riserDiagramPanel.trap', message: '{diameter}" P-trap', values })
+    : i18n._({
+        id: 'editor.riserDiagramPanel.ventTermination',
+        message: '{diameter}" VTR',
+        comment: 'Vent through roof: where a plumbing vent stack exits the roof.',
+        values,
+      })
+}

package/src/components/editor/room-controls.tsx

@@ -12,7 +12,6 @@ import {
   useScene,
 } from '@pascal-app/core'
 import { getSceneTheme, setSurfaceRaycastLayers, useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { useFrame, useThree } from '@react-three/fiber'
 import { SquareSplitHorizontal } from 'lucide-react'
 import Image from 'next/image'
@@ -69,6 +68,7 @@ import {
 } from '../tools/shared/draft-measurement-label'
 import { ActionMenuButton } from './action-menu-button'
 import { getMenuYOffset } from './floating-action-menu'
+import { Html } from './localized-html'
 import { NodeActionMenu } from './node-action-menu'
 import { RoomFloorHighlight3D } from './room-floor-highlight'
 import { RoomHandleDragPreview3D, RoomHandles3D } from './room-handles'

package/src/components/editor/room-handles-2d.tsx

@@ -1,10 +1,20 @@
 'use client'
 
-import { type FloorplanGeometry, type Point, roomDrawnFloor, useScene } from '@pascal-app/core'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type FloorplanGeometry,
+  nodeRegistry,
+  type Point,
+  roomDrawnFloor,
+  useScene,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Minus, Plus } from 'lucide-react'
 import { type PointerEvent as ReactPointerEvent, useMemo, useState } from 'react'
-import { useSelectedRoom } from '../../hooks/use-selected-room'
+import { useShallow } from 'zustand/react/shallow'
+import { useRoomRecords, useSelectedRoom } from '../../hooks/use-selected-room'
+import { getFloorplanNodeExtension } from '../../lib/floorplan/floorplan-extension'
 import { formatLinearMeasurement, MEASUREMENT_FLOORPLAN_COLOR } from '../../lib/measurements'
 import {
   commitRoomFloorElevation,
@@ -21,8 +31,13 @@ import {
   useRoomHandleDrag,
   type WallPushHandle,
 } from '../../lib/room-handle-drag'
-import type { RoomDimension } from '../../lib/room-push-dimensions'
+import {
+  mergeSelectionDimensions,
+  type OwnedSelectionDimension,
+  type RoomDimension,
+} from '../../lib/room-push-dimensions'
 import useEditor from '../../store/use-editor'
+import useFloorplanAnnotationVisibility from '../../store/use-floorplan-annotation-visibility'
 import useInteractionScope from '../../store/use-interaction-scope'
 import { useFloorplanRender } from '../editor-2d/floorplan-render-context'
 import { FloorplanGeometryRenderer } from '../editor-2d/renderers/floorplan-geometry-renderer'
@@ -158,9 +173,10 @@ function startArrow(event: ReactPointerEvent<SVGPathElement>, run: () => unknown
 
 /**
  * The selected room's arrows on the plan: one push/pull chevron per boundary
- * span (on the far face, along the normal the handle supplies) and, for a
- * mezzanine, one per plate edge. Mounted after every node's handles so a
- * wall outline never takes the press. The drags are the 3D arrows' own.
+ * wall span (on the far face, along the normal the handle supplies), one per
+ * straight edge of invisible walls and, for a mezzanine, one per plate edge.
+ * Mounted after every node's handles so a wall outline never takes the press.
+ * The drags are the 3D arrows' own.
  */
 export function RoomHandles2D({ levelId }: { levelId: string | null }) {
   const room = useRoomControls()
@@ -327,6 +343,13 @@ export function RoomHandleDragPreview2D({ levelId }: { levelId: string | null })
   const unit = useViewer((s) => s.unit)
   const metricNotation = useViewer((s) => s.metricNotation)
   if (!drag || drag.levelId !== levelId || drag.kind === 'elevation') return null
+  if (drag.kind === 'wall-group-push')
+    return (
+      <g data-room-drag-preview-2d pointerEvents="none">
+        <PlanRoomDimensions dimensions={drag.dimensions} />
+        {drag.message && <PlanReadout at={drag.anchor} refused text={drag.message} />}
+      </g>
+    )
   const plan = drag as PlanDrag
   const at: Point = [
     plan.anchor[0] + plan.outward[0] * plan.distance,
@@ -352,3 +375,130 @@ export function RoomHandleDragPreview2D({ levelId }: { levelId: string | null })
     </g>
   )
 }
+
+function selectionDimensionsOf(node: AnyNode | undefined) {
+  return node
+    ? getFloorplanNodeExtension(nodeRegistry.get(node.type))?.selectionDimensions
+    : undefined
+}
+
+const NO_NODES: readonly AnyNode[] = []
+
+/**
+ * The selected nodes that show their temporary dimensions now: Select mode,
+ * nothing in progress, Display → Dimensions on, kinds with `selectionDimensions`
+ * only (a wall among other selected things still shows its own), on the first
+ * one's level. A new array only when one of them changes.
+ */
+export function useSelectionDimensionNodes(): readonly AnyNode[] {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const enabled = useEditor((s) => s.mode === 'select')
+  const idle = useInteractionScope((s) => s.scope.kind === 'idle')
+  const dragging = useRoomHandleDrag((s) => s.drag !== null)
+  const shown = useFloorplanAnnotationVisibility((s) => s.showDimensions)
+  const active = enabled && idle && !dragging && shown
+  return useScene(
+    useShallow((s) => {
+      if (!active) return NO_NODES
+      const found: AnyNode[] = []
+      for (const id of selectedIds) {
+        const node = s.nodes[id as AnyNodeId]
+        if (!node || !selectionDimensionsOf(node)) continue
+        if (found.length && node.parentId !== found[0]!.parentId) continue
+        found.push(node)
+      }
+      return found
+    }),
+  )
+}
+
+/**
+ * The selected nodes' temporary dimensions (`useSelectionDimensionNodes`),
+ * from each kind's `selectionDimensions` (a wall: the room widths its push
+ * shows and, for an exterior wall, the outside size, as Display → Measure
+ * walls asks). Several selected walls show each one's, a room two of them
+ * bound measured once. Shared by the plan and the 3D view; typing into one
+ * drives the node it runs from. Recomputed only when a measured node or its
+ * level's rooms change (the room index keeps its records while unrelated
+ * nodes edit).
+ */
+export function useSelectedWallDimensions(): {
+  levelId: string
+  dimensions: readonly OwnedSelectionDimension[]
+} | null {
+  const measured = useSelectionDimensionNodes()
+  const faces = useFloorplanAnnotationVisibility((s) => s.wallDimensionFaces)
+  const levelId = measured[0]?.parentId ?? null
+  const rooms = useRoomRecords(levelId)
+  return useMemo(() => {
+    // `rooms` is the invalidation key: it changes when the level's room
+    // topology, slabs, ceilings or zones do.
+    if (!levelId || !rooms) return null
+    const nodes = useScene.getState().nodes
+    const dimensions = mergeSelectionDimensions(
+      measured.map((node) => ({
+        ownerId: node.id,
+        dimensions: selectionDimensionsOf(node)?.({ node, nodes, faces }) ?? [],
+      })),
+    )
+    return dimensions.length ? { levelId, dimensions } : null
+  }, [faces, levelId, measured, rooms])
+}
+
+/**
+ * The selected walls' temporary dimensions on the plan, drawn as the push
+ * drag draws its room widths (indigo line, end dots). Each is a `dimension`
+ * owned by the wall it runs from, so a click on its value opens the plan's
+ * type-a-value box (`FloorplanDimensionEditOverlay`) and the typed size slides
+ * that wall.
+ */
+export function SelectedWallDimensions2D({ levelId }: { levelId: string | null }) {
+  const selection = useSelectedWallDimensions()
+  const context = useFloorplanRender()
+  const unit = useViewer((s) => s.unit)
+  const metricNotation = useViewer((s) => s.metricNotation)
+  const owners = useMemo(() => {
+    const byOwner = new Map<string, FloorplanGeometry[]>()
+    for (const { from, to, distance, ownerId } of selection?.dimensions ?? []) {
+      const length = Math.hypot(to[0] - from[0], to[1] - from[1]) || 1
+      const geometry: FloorplanGeometry = {
+        kind: 'dimension',
+        start: from,
+        end: to,
+        offsetNormal: [-(to[1] - from[1]) / length, (to[0] - from[0]) / length],
+        offsetDistance: 0,
+        extensionOvershoot: 0,
+        extensionStartGap: 0,
+        terminator: 'dot',
+        text: formatLinearMeasurement(distance, unit, metricNotation),
+        stroke: MEASUREMENT_FLOORPLAN_COLOR,
+      }
+      const list = byOwner.get(ownerId)
+      if (list) list.push(geometry)
+      else byOwner.set(ownerId, [geometry])
+    }
+    return [...byOwner].map(([ownerId, children]) => ({
+      ownerId,
+      geometry: { kind: 'group', children } satisfies FloorplanGeometry,
+    }))
+  }, [metricNotation, selection, unit])
+  if (!selection || selection.levelId !== levelId) return null
+  return (
+    <g
+      data-selected-wall-dimensions-2d=""
+      // A press on a value is the type-a-value box's, not the plan's marquee or pan.
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      {owners.map(({ ownerId, geometry }) => (
+        <g data-node-id={ownerId} key={ownerId}>
+          <FloorplanGeometryRenderer
+            geometry={geometry}
+            pointerEventsOverride="none"
+            sceneRotationDeg={context?.sceneRotationDeg ?? 0}
+            screenUnitsPerPixel={context?.unitsPerPixel}
+          />
+        </g>
+      ))}
+    </g>
+  )
+}