@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/editor-2d/floorplan-adjacent-walls-layer.tsx

@@ -0,0 +1,186 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  calculateLevelMiters,
+  getLevelAbove,
+  getLevelBelow,
+  getWallPlanFootprint,
+  type LevelNode,
+  type Point2D,
+  servesAsRoofLevel,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
+import { memo, useMemo } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import useEditor from '../../store/use-editor'
+import { useLevelWallCopyOffer } from '../ui/level-wall-copy-prompt'
+
+/** Walls below read blue, walls above magenta: told apart at a glance and from the active walls. */
+export const ADJACENT_WALL_COLORS = { below: '#2563eb', above: '#c026d3' } as const
+
+export type AdjacentWallOutline = { id: string; points: string }
+
+/**
+ * Each visible wall of `levelId` as the outline of its full thickness (both faces, joined at the
+ * corners as the level draws them), in plan metres.
+ */
+export function adjacentWallOutlines(
+  nodes: Record<string, AnyNode>,
+  levelId: string | null | undefined,
+): AdjacentWallOutline[] {
+  if (!levelId) return []
+  const walls = Object.values(nodes).filter(
+    (node): node is WallNode =>
+      node.type === 'wall' && node.parentId === levelId && node.visible !== false,
+  )
+  if (!walls.length) return []
+  const miters = calculateLevelMiters(walls)
+  return walls.flatMap((wall) => {
+    const polygon: Point2D[] = getWallPlanFootprint(wall, miters)
+    return polygon.length >= 3
+      ? [{ id: wall.id, points: polygon.map((point) => `${point.x},${point.y}`).join(' ') }]
+      : []
+  })
+}
+
+/**
+ * The levels directly below and above `levelId` in its building's stack (by ordinal, as the
+ * storey stack orders them): on a roof level, "below" is the top storey, the walls the roof bears
+ * on. Reads only the building's levels, so a plan selector can call it on every scene change.
+ */
+export function adjacentLevelIds(
+  nodes: Record<string, AnyNode>,
+  levelId: string | null | undefined,
+): { below: string | null; above: string | null } {
+  const level = levelId ? nodes[levelId] : undefined
+  if (level?.type !== 'level') return { below: null, above: null }
+  const building = level.parentId ? nodes[level.parentId] : undefined
+  if (building?.type !== 'building') {
+    const graph = nodes as Record<AnyNodeId, AnyNode>
+    return {
+      below: getLevelBelow(level.id, graph)?.id ?? null,
+      above: getLevelAbove(level.id, graph)?.id ?? null,
+    }
+  }
+  let below: LevelNode | null = null
+  let above: LevelNode | null = null
+  for (const id of building.children) {
+    const other = nodes[id]
+    if (other?.type !== 'level' || other.id === level.id) continue
+    if (other.level < level.level && (!below || other.level > below.level)) below = other
+    if (other.level > level.level && (!above || other.level < above.level)) above = other
+  }
+  return { below: below?.id ?? null, above: above?.id ?? null }
+}
+
+/** The adjacent levels whose walls the plan traces: each only while it is shown. */
+export function adjacentWallLevels(
+  nodes: Record<string, AnyNode>,
+  levelId: string | null | undefined,
+  show: { below: boolean; above: boolean },
+): { below: string | null; above: string | null } {
+  const levels = adjacentLevelIds(nodes, levelId)
+  return { below: show.below ? levels.below : null, above: show.above ? levels.above : null }
+}
+
+/**
+ * The "Walls below" setting that applies on `levelId`: the roof plan's, on until turned off, on a
+ * roof level; the floor plans', off until turned on, on a storey.
+ */
+export function useWallsBelowSetting(levelId: string | null | undefined): {
+  onRoofLevel: boolean
+  shown: boolean
+  setShown: (show: boolean) => void
+} {
+  const onRoofLevel = useScene((state) => {
+    const level = levelId ? state.nodes[levelId as AnyNodeId] : undefined
+    return level?.type === 'level' && servesAsRoofLevel(state.nodes, level)
+  })
+  const shown = useEditor((state) =>
+    onRoofLevel ? state.showRoofWallsBelow : state.showWallsBelow,
+  )
+  const setRoof = useEditor((state) => state.setShowRoofWallsBelow)
+  const setFloor = useEditor((state) => state.setShowWallsBelow)
+  return { onRoofLevel, shown, setShown: onRoofLevel ? setRoof : setFloor }
+}
+
+/** The level's own walls, read through its children rather than the whole scene. */
+function useLevelWalls(levelId: string | null) {
+  return useScene(
+    useShallow((state) => {
+      const level = levelId ? state.nodes[levelId as AnyNodeId] : undefined
+      if (level?.type !== 'level') return [] as WallNode[]
+      return level.children.flatMap((id) => {
+        const node = state.nodes[id as AnyNodeId]
+        return node?.type === 'wall' ? [node] : []
+      })
+    }),
+  )
+}
+
+function Outlines({ color, outlines }: { color: string; outlines: AdjacentWallOutline[] }) {
+  return (
+    <>
+      {outlines.map((outline) => (
+        <polygon
+          fill={color}
+          fillOpacity={0.05}
+          key={outline.id}
+          points={outline.points}
+          stroke={color}
+          strokeDasharray="7 5"
+          strokeLinejoin="miter"
+          strokeOpacity={0.9}
+          strokeWidth={1.4}
+          vectorEffect="non-scaling-stroke"
+        />
+      ))}
+    </>
+  )
+}
+
+/**
+ * "Walls below / above": dashed outlines of the walls on the neighbouring levels, drawn over the
+ * active level's plan so second-storey walls line up with the ones under them and a roof outline
+ * can be checked against the walls it covers — while its toggle is on, or while a new level's
+ * "Copy exterior walls?" offer is open. Display only: never hit-tested, never snapped to.
+ */
+export const FloorplanAdjacentWallsLayer = memo(function FloorplanAdjacentWallsLayer({
+  levelId,
+}: {
+  levelId: string | null | undefined
+}) {
+  const offer = useLevelWallCopyOffer((state) =>
+    state.offer && state.offer.levelId === levelId ? state.offer.direction : null,
+  )
+  const showBelow = useWallsBelowSetting(levelId).shown || offer === 'below'
+  const showAbove = useEditor((state) => state.showWallsAbove) || offer === 'above'
+  const levels = useScene(
+    useShallow((state) =>
+      adjacentWallLevels(state.nodes as Record<string, AnyNode>, levelId, {
+        below: showBelow,
+        above: showAbove,
+      }),
+    ),
+  )
+  const belowWalls = useLevelWalls(levels.below)
+  const aboveWalls = useLevelWalls(levels.above)
+  const below = useMemo(
+    () => adjacentWallOutlines(Object.fromEntries(belowWalls.map((w) => [w.id, w])), levels.below),
+    [belowWalls, levels.below],
+  )
+  const above = useMemo(
+    () => adjacentWallOutlines(Object.fromEntries(aboveWalls.map((w) => [w.id, w])), levels.above),
+    [aboveWalls, levels.above],
+  )
+  if (!(below.length || above.length)) return null
+  return (
+    <g data-adjacent-walls pointerEvents="none">
+      <Outlines color={ADJACENT_WALL_COLORS.below} outlines={below} />
+      <Outlines color={ADJACENT_WALL_COLORS.above} outlines={above} />
+    </g>
+  )
+})

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

@@ -2,7 +2,7 @@
 
 import { useViewer } from '@pascal-app/viewer'
 import { memo } from 'react'
-import useAlignmentGuides from '../../store/use-alignment-guides'
+import useAlignmentGuides, { type DraftGuideLine } from '../../store/use-alignment-guides'
 import { formatMeasurement } from '../editor/measurement-pill'
 import { useFloorplanRender } from './floorplan-render-context'
 
@@ -24,16 +24,29 @@ import { useFloorplanRender } from './floorplan-render-context'
  *
  * Stroke widths and handle radii are scaled by `unitsPerPixel` so they
  * stay a constant size on screen no matter the zoom.
+ *
+ * A wall pulled from a wall end (and the run it continues) publishes its
+ * projection guides beside them (`useAlignmentGuides.draft`): dashed lines —
+ * the extension of the wall it comes from in amber, lines through other walls'
+ * ends in indigo, lines through the run's start in emerald — and a ringed ✕
+ * where two of them cross, matching the 3D layer.
  */
-export const FloorplanAlignmentGuideLayer = memo(function FloorplanAlignmentGuideLayer() {
+export const FloorplanAlignmentGuideLayer = memo(function FloorplanAlignmentGuideLayer({
+  unitsPerPixel,
+}: {
+  /** The plan's live scale, which keeps a wall draft's guides screen-sized. */
+  unitsPerPixel?: number
+}) {
   const guides = useAlignmentGuides((s) => s.guides)
+  const draft = useAlignmentGuides((s) => s.draft)
   const unit = useViewer((s) => s.unit)
   const metricNotation = useViewer((s) => s.metricNotation)
   const ctx = useFloorplanRender()
 
-  if (guides.length === 0) return null
+  if (guides.length === 0 && !draft) return null
 
   const upp = ctx?.unitsPerPixel ?? 0.01
+  const draftUpp = unitsPerPixel ?? upp
   const sceneRot = ctx?.sceneRotationDeg ?? 0
 
   // Pixel-budgeted sizes converted to world meters so visuals stay
@@ -50,6 +63,47 @@ export const FloorplanAlignmentGuideLayer = memo(function FloorplanAlignmentGuid
 
   return (
     <g pointerEvents="none">
+      {draft?.lines.map((line, i) => (
+        <line
+          key={`draft-${i}`}
+          stroke={DRAFT_GUIDE_COLORS[line.kind]}
+          strokeDasharray={`${6 * draftUpp} ${4 * draftUpp}`}
+          strokeLinecap="round"
+          strokeWidth={1.5 * draftUpp}
+          x1={line.from[0]}
+          x2={line.to[0]}
+          y1={line.from[1]}
+          y2={line.to[1]}
+        />
+      ))}
+      {draft?.intersections.map((point, i) => (
+        <g
+          key={`draft-x-${i}`}
+          stroke={DRAFT_GUIDE_COLORS.alignment}
+          strokeLinecap="round"
+          strokeWidth={1.5 * draftUpp}
+        >
+          <circle
+            cx={point[0]}
+            cy={point[1]}
+            fill="#ffffff"
+            fillOpacity={0.85}
+            r={5.5 * draftUpp}
+          />
+          <line
+            x1={point[0] - 3 * draftUpp}
+            x2={point[0] + 3 * draftUpp}
+            y1={point[1] - 3 * draftUpp}
+            y2={point[1] + 3 * draftUpp}
+          />
+          <line
+            x1={point[0] - 3 * draftUpp}
+            x2={point[0] + 3 * draftUpp}
+            y1={point[1] + 3 * draftUpp}
+            y2={point[1] - 3 * draftUpp}
+          />
+        </g>
+      ))}
       {guides.map((guide, i) => {
         const { from, to, axis } = guide
         const midX = (from.x + to.x) / 2
@@ -107,6 +161,12 @@ export const FloorplanAlignmentGuideLayer = memo(function FloorplanAlignmentGuid
   )
 })
 
+const DRAFT_GUIDE_COLORS: Record<DraftGuideLine['kind'], string> = {
+  extension: '#f59e0b', // amber-500
+  alignment: '#6366f1', // indigo-500 — the snap marker's colour
+  'run-start': '#10b981', // emerald-500 — the pull grip's colour
+}
+
 function XCap({
   color,
   size,

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,8 @@ 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'
 import { isTypingTarget } from '../../lib/typing-target'
 import useAlignmentGuides from '../../store/use-alignment-guides'
@@ -36,6 +38,7 @@ import useEditor, {
 import useFloorplanMode from '../../store/use-floorplan-mode'
 import useInteractionScope, { useMovingNode } from '../../store/use-interaction-scope'
 import {
+  beginGroupWallPush,
   classifyParticipant,
   collectParticipants,
   computeGroupPlanBox,
@@ -120,6 +123,8 @@ export function startFloorplanGroupMove(
     rotation: number
     restCenter: Vec2
     lastDelta: Vec2 | null
+    /** Walls alone: each moves as its push arrow does instead of the rigid slide. */
+    push: WallGroupPush | null
   }
   let session: Session | null = null
 
@@ -185,6 +190,7 @@ export function startFloorplanGroupMove(
       rotation: 0,
       restCenter,
       lastDelta: null,
+      push: beginGroupWallPush(starts, levelId),
     }
   }
 
@@ -201,8 +207,14 @@ export function startFloorplanGroupMove(
     let dz = snap ? Math.round((plan[1] - startPlan[1]) / step) * step : plan[1] - startPlan[1]
 
     // Figma-style alignment layered on top: guides display in every mode
-    // except Off; the magnetic pull applies only in 'lines' mode.
-    if (isAlignmentGuideActive() && s.candidates.length > 0 && s.restAnchors.length > 0) {
+    // except Off; the magnetic pull applies only in 'lines' mode. Pushed walls
+    // don't move as one footprint, so they have no box to align.
+    if (
+      !s.push &&
+      isAlignmentGuideActive() &&
+      s.candidates.length > 0 &&
+      s.restAnchors.length > 0
+    ) {
       const proposed: [number, number] = [startPlan[0] + dx, startPlan[1] + dz]
       const aligned = applyFloorplanAlignment(
         proposed,
@@ -225,6 +237,10 @@ export function startFloorplanGroupMove(
       sfxEmitter.emit('sfx:grid-snap')
       s.lastDelta = [dx, dz]
     }
+    if (s.push) {
+      s.push.preview([dx, dz])
+      return
+    }
 
     const entries = translateGroupPatches(s.starts, s.links, dx, dz)
     const patchById = new Map(entries)
@@ -252,6 +268,8 @@ 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) => {
+    // Pushed walls keep their bearing: there is nothing to turn.
+    if (s.push) return
     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)
@@ -271,6 +289,7 @@ export function startFloorplanGroupMove(
   }
 
   const clearLivePreviews = (s: Session) => {
+    s.push?.cancel()
     const overrides = useLiveNodeOverrides.getState()
     const liveTransforms = useLiveTransforms.getState()
     for (const id of s.affectedIds) {
@@ -330,6 +349,13 @@ export function startFloorplanGroupMove(
     // doesn't clear the multi-selection the drag is preserving.
     swallowNextClick()
     sfxEmitter.emit('sfx:item-place')
+    if (session.push) {
+      resumeSceneHistory(useScene)
+      session.push.commit()
+      session = null
+      teardown()
+      return
+    }
     const overrides = useLiveNodeOverrides.getState()
     const updates: { id: AnyNodeId; data: Partial<AnyNode> }[] = []
     for (const id of session.affectedIds) {
@@ -632,6 +658,8 @@ export const FloorplanGroupSelectionBox = memo(function FloorplanGroupSelectionB
   const delta = useFloorplanGroupDrag((s) => s.delta)
   const liveRotation = useFloorplanGroupDrag((s) => s.rotation)
   const movingNode = useMovingNode()
+  // Pushed walls don't move as one box: the room widths they show take its place.
+  const wallPush = useRoomHandleDrag((s) => s.drag?.kind === 'wall-group-push')
   const mode = useEditor((s) => s.mode)
   const floorplanMode = useFloorplanMode((s) => s.mode)
   const sceneRotationDeg = useFloorplanSceneRotation()
@@ -673,7 +701,7 @@ export const FloorplanGroupSelectionBox = memo(function FloorplanGroupSelectionB
     }
   }, [selectedIds, levelId, nodes, meshEpoch])
 
-  if (!box || movingNode || mode === 'delete') return null
+  if (!box || movingNode || wallPush || mode === 'delete') return null
 
   const pad = 6 * unitsPerPixel
   const stroke = palette?.selectedStroke ?? '#3b82f6'

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

@@ -1,10 +1,16 @@
 import { describe, expect, test } from 'bun:test'
 import {
+  formatMeasurementInputValue,
   isProjectedFloorplanAxisPointVerified,
   resolveFloorplanMeasurementAxisSnap,
   resolveProjectedFloorplanSnap,
 } from './floorplan-measurement-tool-layer'
 
+test('extrusion inputs write values back with the scoped decimal separator', () => {
+  expect(formatMeasurementInputValue(2.75, 'fr')).toBe('2,75')
+  expect(formatMeasurementInputValue(2.75, 'en')).toBe('2.75')
+})
+
 describe('resolveFloorplanMeasurementAxisSnap', () => {
   test('snaps to the closest X or Z axis inside the screen-space threshold', () => {
     expect(resolveFloorplanMeasurementAxisSnap([3, 0, 2], [1, 0, 1], 4, 9)).toEqual({

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

@@ -3,10 +3,17 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  buildMeasurementAngleArcPoints,
   closestMeasurementFeatureBinding,
   collectAlignmentAnchors,
   emitter,
+  formatAngleRadians,
+  formatAreaLabel,
+  formatLinearMeasurement,
+  formatNumber,
+  formatVolumeLabel,
   type GeometryContext,
+  getLinearUnitLabel,
   type MeasurementFeatureAnchor,
   type MeasurementSnapKind,
   measurementAngle,
@@ -15,22 +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,
-  linearUnitToMeters,
   MEASUREMENT_ACTIVE_COLOR,
-  metersToLinearUnit,
-} from '../../lib/measurements'
+  measurementPolygonLabelAnchor,
+  useViewer,
+} from '@pascal-app/viewer'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   clearSurfacePlanSnapFeedback,
   resolveSurfacePlanPointSnap,
@@ -43,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'
@@ -77,6 +79,10 @@ export type ProjectedFloorplanSnap = {
 const MAX_REGISTERED_SNAP_ELEMENTS = 512
 const MAX_REGISTERED_SNAP_SEGMENTS = 4096
 const MAX_SAMPLED_PATH_SEGMENTS = 48
+
+export function formatMeasurementInputValue(value: number, locale: string): string {
+  return formatNumber(value, { locale, max: 3 })
+}
 const VERTEX_SNAP_DISTANCE_PX = 16
 const EDGE_SNAP_DISTANCE_PX = 10
 const SEMANTIC_FEATURE_SNAP_DISTANCE = 0.2
@@ -636,17 +642,22 @@ function FloorplanExtrusionControl({
   unitsPerPixel: number
 }) {
   const unit = useViewer((state) => state.unit)
+  const locale = useLocale()
   const extrusionHeight = useMeasurementDraft((state) => state.extrusionHeight)
   const points = useMeasurementDraft((state) => state.points)
   const baseNormal = useMeasurementDraft((state) => state.baseNormal)
   const [value, setValue] = useState(() =>
-    extrusionHeight === 0 ? '' : String(metersToLinearUnit(extrusionHeight, unit)),
+    extrusionHeight === 0
+      ? ''
+      : formatMeasurementInputValue(metersToLinearUnit(extrusionHeight, unit), locale),
   )
 
   useEffect(() => {
     const height = useMeasurementDraft.getState().extrusionHeight
-    setValue(height === 0 ? '' : String(Number(metersToLinearUnit(height, unit).toFixed(3))))
-  }, [unit])
+    setValue(
+      height === 0 ? '' : formatMeasurementInputValue(metersToLinearUnit(height, unit), locale),
+    )
+  }, [locale, unit])
 
   const width = 260 * unitsPerPixel
   const height = 72 * unitsPerPixel
@@ -654,12 +665,12 @@ function FloorplanExtrusionControl({
   const y = center[2] - height / 2
 
   const commit = () => {
-    const numericValue = Number.parseFloat(value)
-    if (!Number.isFinite(numericValue)) {
+    const meters = parseLinearMeasurementInput(value, unit, locale)
+    if (meters === null) {
       useMeasurementDraft.getState().setExtrusionHeight('2d', 0)
       return
     }
-    useMeasurementDraft.getState().setExtrusionHeight('2d', linearUnitToMeters(numericValue, unit))
+    useMeasurementDraft.getState().setExtrusionHeight('2d', meters)
     const draft = useMeasurementDraft.getState()
     if (draft.finishExtrusion('2d')) commitMeasurementDraft('2d')
   }
@@ -710,11 +721,9 @@ function FloorplanExtrusionControl({
               onChange={(event) => {
                 const next = event.target.value
                 setValue(next)
-                const numericValue = Number.parseFloat(next)
-                if (Number.isFinite(numericValue)) {
-                  useMeasurementDraft
-                    .getState()
-                    .setExtrusionHeight('2d', linearUnitToMeters(numericValue, unit))
+                const meters = parseLinearMeasurementInput(next, unit, locale)
+                if (meters !== null) {
+                  useMeasurementDraft.getState().setExtrusionHeight('2d', meters)
                 } else {
                   useMeasurementDraft.getState().setExtrusionHeight('2d', 0)
                 }
@@ -728,7 +737,7 @@ function FloorplanExtrusionControl({
               }}
               placeholder="0"
               step="0.1"
-              type="number"
+              type="text"
               value={value}
             />
             <span className="pointer-events-none absolute inset-y-0 right-2 flex items-center text-muted-foreground text-xs">

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

@@ -1,7 +1,7 @@
 'use client'
 
-import type { OpenWallEnd } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import type { AnyNodeId, OpenWallEnd } from '@pascal-app/core'
+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'
@@ -31,7 +30,8 @@ function sceneScreenPoint(point: [number, number]): { left: number; top: number
  * Shows where walls look joined but are not, so a room can't close: a red dot
  * on each open end, a dashed line to the wall it nearly meets with what is
  * wrong ("4 cm gap"), and — while drawing — the walls that bound no room dimmed. Hover or click a
- * dot for "Join walls", which applies core's join planner as one undo step.
+ * dot for "Join walls", which applies core's join planner as one undo step; a
+ * click on a dot also selects its wall.
  *
  * On while walls or rooms are being drawn (the wall tool's variants, Divide);
  * otherwise only when a wall that bounds no room has a near miss.
@@ -76,7 +76,14 @@ const ActiveOpenWallEndsLayer = memo(function ActiveOpenWallEndsLayer() {
             label={openWallEndLabel(end, unit)}
             onHoverEnd={focus.releaseHover}
             onHoverStart={() => focus.keepHover(key)}
-            onPin={() => focus.togglePin(key)}
+            onPin={() => {
+              focus.togglePin(key)
+              // The dot can cover all of a wall a few centimetres long: its
+              // click selects that wall too, so it can be fixed or deleted.
+              if (!drawing && useEditor.getState().mode === 'select') {
+                useViewer.getState().setSelection({ selectedIds: [end.wallId as AnyNodeId] })
+              }
+            }}
             sceneRotationDeg={sceneRotationDeg}
             unitsPerPixel={unitsPerPixel}
           />

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'