@pascal-app/editor 1.0.3 → 1.0.4

package/src/components/editor/join-walls-pill.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { Link2 } from 'lucide-react'
+
+/**
+ * The "Join walls" action on an open wall end — shared by the floor plan and
+ * the 3D view so both offer the same pill. A refusal ("A door or window is in
+ * the way") sits in front of the button.
+ */
+export function JoinWallsPill({
+  onHoverEnd,
+  onHoverStart,
+  onJoin,
+  refusal,
+}: {
+  onHoverEnd: () => void
+  onHoverStart: () => void
+  onJoin: () => void
+  refusal: string | null
+}) {
+  return (
+    <div
+      className="pointer-events-auto flex items-center gap-1 whitespace-nowrap rounded-full border border-border bg-background/95 p-1 text-xs shadow-xl backdrop-blur-md"
+      data-open-wall-end=""
+      onPointerDown={(event) => event.stopPropagation()}
+      onPointerEnter={onHoverStart}
+      onPointerLeave={onHoverEnd}
+      onPointerUp={(event) => event.stopPropagation()}
+    >
+      {refusal ? <span className="px-2 text-muted-foreground">{refusal}</span> : null}
+      <button
+        className="flex items-center gap-1.5 rounded-full px-3 py-1.5 font-medium text-foreground transition-colors hover:bg-accent"
+        onClick={(event) => {
+          event.stopPropagation()
+          onJoin()
+        }}
+        type="button"
+      >
+        <Link2 className="h-3.5 w-3.5" />
+        Join walls
+      </button>
+    </div>
+  )
+}

package/src/components/editor/node-action-menu.tsx

@@ -1,8 +1,20 @@
 'use client'
 
 import { Icon } from '@iconify/react'
-import { Copy, Group, Move, PencilRuler, Search, Spline, Trash2, Ungroup } from 'lucide-react'
-import type { MouseEventHandler, PointerEventHandler } from 'react'
+import {
+  Copy,
+  Group,
+  Move,
+  PencilRuler,
+  RotateCcw,
+  RotateCw,
+  Search,
+  Spline,
+  Trash2,
+  Ungroup,
+} from 'lucide-react'
+import type { MouseEventHandler, PointerEventHandler, ReactNode } from 'react'
+import { ActionMenuButton } from './action-menu-button'
 import { RegistryActionContributions } from './registry-action-contributions'
 
 type NodeActionMenuProps = {
@@ -13,6 +25,9 @@ type NodeActionMenuProps = {
   onMove?: MouseEventHandler<HTMLButtonElement>
   onEditMesh?: MouseEventHandler<HTMLButtonElement>
   onCurve?: MouseEventHandler<HTMLButtonElement>
+  /** Quarter turns (a room); sit in the Curve slot (a room has no curve). */
+  onRotateLeft?: MouseEventHandler<HTMLButtonElement>
+  onRotateRight?: MouseEventHandler<HTMLButtonElement>
   /** Session group (Ctrl/Cmd+G) — multi-selection floating pill. */
   onGroup?: MouseEventHandler<HTMLButtonElement>
   /** Dissolve session group (Ctrl/Cmd+Shift+G). */
@@ -21,6 +36,16 @@ type NodeActionMenuProps = {
   onPointerUp?: PointerEventHandler<HTMLDivElement>
   onPointerEnter?: PointerEventHandler<HTMLDivElement>
   onPointerLeave?: PointerEventHandler<HTMLDivElement>
+  /**
+   * Buttons a caller contributes next to the registry contributions — for a
+   * selection that is not a scene-node selection (the room), whose actions the
+   * registry cannot find.
+   */
+  children?: ReactNode
+  /** Tooltip / accessible name of the delete button. */
+  deleteLabel?: string
+  /** Shows the delete button greyed out, its tooltip saying why. */
+  deleteDisabledReason?: string
 }
 
 export function NodeActionMenu({
@@ -31,12 +56,17 @@ export function NodeActionMenu({
   onMove,
   onEditMesh,
   onCurve,
+  onRotateLeft,
+  onRotateRight,
   onGroup,
   onUngroup,
   onPointerDown,
   onPointerUp,
   onPointerEnter,
   onPointerLeave,
+  children,
+  deleteLabel = 'Delete',
+  deleteDisabledReason,
 }: NodeActionMenuProps) {
   return (
     <div
@@ -47,104 +77,72 @@ export function NodeActionMenu({
       onPointerUp={onPointerUp}
     >
       {onFind && (
-        <button
-          aria-label="Find in catalog"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          onClick={onFind}
-          title="Find in catalog"
-          type="button"
-        >
+        <ActionMenuButton label="Find in catalog" onClick={onFind}>
           <Search className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
       {onMove && (
-        <button
-          aria-label="Move"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          onClick={onMove}
-          title="Move"
-          type="button"
-        >
+        <ActionMenuButton label="Move" onClick={onMove}>
           <Move className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
       {onEditMesh && (
-        <button
-          aria-label="Edit mesh"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          onClick={onEditMesh}
-          title="Edit mesh"
-          type="button"
-        >
+        <ActionMenuButton label="Edit mesh" onClick={onEditMesh}>
           <PencilRuler className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
       {onGroup && (
-        <button
-          aria-label="Group selection"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          onClick={onGroup}
-          title="Group (Ctrl/Cmd+G)"
-          type="button"
-        >
+        <ActionMenuButton keys={['Cmd/Ctrl', 'G']} label="Group selection" onClick={onGroup}>
           <Group className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
       {onUngroup && (
-        <button
-          aria-label="Ungroup selection"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+        <ActionMenuButton
+          keys={['Cmd/Ctrl', 'Shift', 'G']}
+          label="Ungroup selection"
           onClick={onUngroup}
-          title="Ungroup (Ctrl/Cmd+Shift+G)"
-          type="button"
         >
           <Ungroup className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
       {onCurve && (
-        <button
-          aria-label="Curve"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          onClick={onCurve}
-          title="Curve"
-          type="button"
-        >
+        <ActionMenuButton label="Curve" onClick={onCurve}>
           <Spline className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
+      )}
+      {onRotateLeft && (
+        <ActionMenuButton label="Rotate left" onClick={onRotateLeft}>
+          <RotateCcw className="h-4 w-4" />
+        </ActionMenuButton>
+      )}
+      {onRotateRight && (
+        <ActionMenuButton label="Rotate right" onClick={onRotateRight}>
+          <RotateCw className="h-4 w-4" />
+        </ActionMenuButton>
       )}
       <RegistryActionContributions />
+      {children}
       {onDuplicate && (
-        <button
-          aria-label="Duplicate"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          onClick={onDuplicate}
-          title="Duplicate"
-          type="button"
-        >
+        <ActionMenuButton label="Duplicate" onClick={onDuplicate}>
           <Copy className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
       {onAddHole && (
-        <button
-          aria-label="Cut Out"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          onClick={onAddHole}
-          title="Cut Out"
-          type="button"
-        >
+        <ActionMenuButton label="Cut out" onClick={onAddHole}>
           <Icon height={16} icon="carbon:cut-out" width={16} />
-        </button>
+        </ActionMenuButton>
       )}
       {onDelete && (
-        <button
-          aria-label="Delete"
-          className="tooltip-trigger rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+        <ActionMenuButton
+          destructive
+          disabled={!!deleteDisabledReason}
+          disabledReason={deleteDisabledReason}
+          keys={['Delete / Backspace']}
+          label={deleteLabel}
           onClick={onDelete}
-          title="Delete"
-          type="button"
         >
           <Trash2 className="h-4 w-4" />
-        </button>
+        </ActionMenuButton>
       )}
     </div>
   )

package/src/components/editor/node-arrow-handles.tsx

@@ -6,6 +6,7 @@ import {
   type ArcResizeHandle,
   type CornerRadiusHandle,
   type Cursor,
+  createAngleAccumulator,
   createSceneApi,
   DEFAULT_ANGLE_STEP,
   type HandleDescriptor,
@@ -42,6 +43,7 @@ import {
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 
 import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { useCeilingEditCeilingId } from '../../lib/ceiling-edit-session'
 import { EDITOR_LAYER } from '../../lib/constants'
 import { RESIZE_HANDLE_DRAG_LABEL, ROTATE_HANDLE_DRAG_LABEL } from '../../lib/contextual-help'
 import { createEditorApi } from '../../lib/editor-api'
@@ -241,7 +243,12 @@ export function NodeArrowHandles() {
   const activeGroup = useHandleGroup((s) =>
     s.active && s.active.nodeId === node?.id ? s.active.group : null,
   )
-  const def = node ? nodeRegistry.get(node.type) : null
+  // A ceiling's handles belong to its Edit ceiling session; a plain selection shows none.
+  const editCeilingId = useCeilingEditCeilingId()
+  const def =
+    node && (node.type !== 'ceiling' || node.id === editCeilingId)
+      ? nodeRegistry.get(node.type)
+      : null
   const descriptorSceneApi = useMemo(() => createSceneApi(useScene), [])
   const descriptors = useMemo(() => {
     if (!(node && def?.handles)) return null
@@ -816,8 +823,16 @@ function LinearArrow({
     }) => {
       dragRideObject.matrixWorld.decompose(_resizePositionW, _resizeQuaternion, _resizeScale)
       _resizeOriginW.set(...position).applyMatrix4(dragRideObject.matrixWorld)
-      axisVector(descriptor.axis, _resizeAxisW).applyQuaternion(_resizeQuaternion).normalize()
-      const localToWorldScale = axisScale(descriptor.axis, _resizeScale)
+      const dragAxis =
+        descriptor.kind === 'linear-resize'
+          ? descriptor.dragAxis?.(initialNode as never, sceneApi)
+          : undefined
+      if (dragAxis) _resizeAxisW.set(...dragAxis).normalize()
+      else axisVector(descriptor.axis, _resizeAxisW)
+      const localToWorldScale = dragAxis
+        ? _resizeAxisW.clone().multiply(_resizeScale).length()
+        : axisScale(descriptor.axis, _resizeScale)
+      _resizeAxisW.applyQuaternion(_resizeQuaternion).normalize()
       if (Math.abs(localToWorldScale) < 1e-6 || _resizeAxisW.lengthSq() === 0) return null
 
       const initialPointer =
@@ -1350,6 +1365,7 @@ function ArcArrow({
         return null
       }
       const initialAngle = angleOf(hitWorld)
+      const accumulateAngle = createAngleAccumulator(initialAngle)
 
       // A distinct label selects rotation snapping instead of resize measurements.
       if (isRotateShape) {
@@ -1369,9 +1385,12 @@ function ArcArrow({
           const hit = new Vector3()
           if (!intersectMovePlane(moveEvent.clientX, moveEvent.clientY, plane, hit)) return null
           const currentAngle = angleOf(hit)
-          let delta = currentAngle - initialAngle
-          while (delta > Math.PI) delta -= 2 * Math.PI
-          while (delta < -Math.PI) delta += 2 * Math.PI
+          let delta = isRotateShape
+            ? Math.atan2(
+                Math.sin(currentAngle - initialAngle),
+                Math.cos(currentAngle - initialAngle),
+              )
+            : accumulateAngle(currentAngle)
 
           if (
             !descriptor.continuous &&

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

@@ -0,0 +1,273 @@
+'use client'
+
+import { type OpenWallEnd, sceneRegistry } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
+import { useFrame } from '@react-three/fiber'
+import { memo, useEffect, useMemo, useRef } from 'react'
+import { BoxGeometry, CircleGeometry, type Group, RingGeometry } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import {
+  useOpenWallEndFocus,
+  useOpenWallEnds,
+  useOpenWallEndsSuppressed,
+} from '../../hooks/use-open-wall-ends'
+import { EDITOR_LAYER } from '../../lib/constants'
+import { openWallEndKey, openWallEndLabel } from '../../lib/floorplan/open-wall-ends'
+import { MEASUREMENT_DANGLING_COLOR } from '../../lib/measurements'
+import { cn } from '../../lib/utils'
+import useEditor from '../../store/use-editor'
+import { isViewVisible, VIEW_3D, visibleScene } from '../../store/view-layout'
+import { JoinWallsPill } from './join-walls-pill'
+import { OpenWallEndsHint } from './open-wall-ends-hint'
+
+/**
+ * The 3D twin of `FloorplanOpenWallEndsLayer`: at each wall end that isn't
+ * joined, a red disc on the floor with a dashed ribbon to the wall it nearly
+ * meets, and a screen-space dot carrying the same label ("4 cm gap") and, on
+ * hover or click, the same "Join walls" pill. The floor geometry ignores depth
+ * so it reads through cutaway walls like the snap beacon; the dot is DOM, so
+ * it stays clickable where a wall stands between it and the camera.
+ *
+ * Shares the analysis with the floor plan (`useOpenWallEnds`). Mounted inside
+ * ToolManager's building-local group — wall points are building-local plan
+ * coordinates — and lifted to the active level's floor each frame.
+ */
+
+const FLOOR_LIFT = 0.02
+const DISC_RADIUS = 0.07
+const DISC_OUTLINE = 0.095
+const DASH_LEN = 0.06
+const DASH_GAP = 0.04
+const LINE_WIDTH = 0.025
+const MAX_DASHES = 40
+const NO_RAYCAST = () => null
+
+function createMarkerResources() {
+  const materialOptions = {
+    depthTest: false,
+    depthWrite: false,
+    toneMapped: false,
+    transparent: true,
+  }
+  return {
+    redMaterial: new MeshBasicNodeMaterial({
+      ...materialOptions,
+      color: MEASUREMENT_DANGLING_COLOR,
+    }),
+    outlineMaterial: new MeshBasicNodeMaterial({ ...materialOptions, color: 0xff_ff_ff }),
+    discGeometry: new CircleGeometry(1, 24),
+    ringGeometry: new RingGeometry(0.7, 1, 24),
+    dashGeometry: new BoxGeometry(1, 1, 1),
+  }
+}
+
+type MarkerResources = ReturnType<typeof createMarkerResources>
+
+type Vec3 = [number, number, number]
+
+export const OpenWallEnds3DLayer = memo(function OpenWallEnds3DLayer() {
+  const visible = useEditor((state) => isViewVisible(state, VIEW_3D))
+  const suppressed = useOpenWallEndsSuppressed()
+  return visible && !suppressed ? <ActiveOpenWallEnds3DLayer /> : null
+})
+
+const ActiveOpenWallEnds3DLayer = memo(function ActiveOpenWallEnds3DLayer() {
+  const levelId = useViewer((state) => state.selection.levelId)
+  const unit = useViewer((state) => state.unit)
+  const { drafting, ends } = useOpenWallEnds()
+  // Split view shows the hint once, over the floor plan.
+  const hintHere = useEditor((state) => visibleScene(state) === '3d')
+  const focus = useOpenWallEndFocus(ends, drafting)
+  const groupRef = useRef<Group>(null)
+  const hasEnds = ends.length > 0
+  const resources = useMemo(() => (hasEnds ? createMarkerResources() : null), [hasEnds])
+  // Resources passed as mesh props are shared and aren't disposed by R3F.
+  useEffect(
+    () => () => {
+      if (resources) for (const resource of Object.values(resources)) resource.dispose()
+    },
+    [resources],
+  )
+
+  useFrame(() => {
+    const group = groupRef.current
+    if (!group) return
+    const levelMesh = levelId ? sceneRegistry.nodes.get(levelId) : null
+    group.position.y = levelMesh ? levelMesh.position.y : 0
+  })
+
+  if (!resources) return null
+  return (
+    <group ref={groupRef}>
+      {ends.map((end) => {
+        const key = openWallEndKey(end)
+        const active = focus.activeEnd !== null && key === focus.activeKey
+        return (
+          <OpenWallEndMarker3D
+            active={active}
+            end={end}
+            interactive={!!end.candidate && !drafting}
+            key={key}
+            label={openWallEndLabel(end, unit)}
+            onHoverEnd={focus.releaseHover}
+            onHoverStart={() => focus.keepHover(key)}
+            onJoin={() => focus.join(end)}
+            onPin={() => focus.togglePin(key)}
+            refusal={active ? focus.refusal : null}
+            resources={resources}
+          />
+        )
+      })}
+      {hintHere ? (
+        // Html only to reach the DOM from inside the canvas; the hint portals
+        // itself to the body and centres on the 3D view.
+        <Html style={{ pointerEvents: 'none' }}>
+          <OpenWallEndsHint ends={ends} onShow={(end) => focus.pin(openWallEndKey(end))} />
+        </Html>
+      ) : null}
+    </group>
+  )
+})
+
+function OpenWallEndMarker3D({
+  active,
+  end,
+  interactive,
+  label,
+  onHoverEnd,
+  onHoverStart,
+  onJoin,
+  onPin,
+  refusal,
+  resources,
+}: {
+  active: boolean
+  end: OpenWallEnd
+  interactive: boolean
+  label: string | null
+  onHoverEnd: () => void
+  onHoverStart: () => void
+  onJoin: () => void
+  onPin: () => void
+  refusal: string | null
+  resources: MarkerResources
+}) {
+  const { dashGeometry, discGeometry, ringGeometry, redMaterial, outlineMaterial } = resources
+  const [x, z] = end.point
+  const target = end.candidate?.point
+  const { dashes, angleY, dashLength } = useMemo(() => {
+    if (!target) return { dashes: [] as Vec3[], angleY: 0, dashLength: 0 }
+    const dx = target[0] - x
+    const dz = target[1] - z
+    const length = Math.hypot(dx, dz)
+    const angle = -Math.atan2(dz, dx)
+    if (length < 1e-4) return { dashes: [] as Vec3[], angleY: angle, dashLength: 0 }
+    const period = Math.max(DASH_LEN + DASH_GAP, length / MAX_DASHES)
+    const centres: Vec3[] = []
+    for (let d = Math.min(period, length) / 2; d < length; d += period) {
+      centres.push([x + (dx / length) * d, FLOOR_LIFT, z + (dz / length) * d])
+    }
+    return { dashes: centres, angleY: angle, dashLength: Math.min(DASH_LEN, length) }
+  }, [target, x, z])
+  const stop = (event: { stopPropagation: () => void }) => event.stopPropagation()
+
+  return (
+    <>
+      {dashes.map((centre, index) => (
+        <mesh
+          geometry={dashGeometry}
+          key={index}
+          layers={EDITOR_LAYER}
+          material={redMaterial}
+          position={centre}
+          raycast={NO_RAYCAST}
+          renderOrder={1005}
+          rotation={[0, angleY, 0]}
+          scale={[dashLength, 0.002, LINE_WIDTH]}
+        />
+      ))}
+      {target ? (
+        <mesh
+          geometry={ringGeometry}
+          layers={EDITOR_LAYER}
+          material={redMaterial}
+          position={[target[0], FLOOR_LIFT + 0.001, target[1]]}
+          raycast={NO_RAYCAST}
+          renderOrder={1006}
+          rotation={[-Math.PI / 2, 0, 0]}
+          scale={[DISC_RADIUS * 0.8, DISC_RADIUS * 0.8, 1]}
+        />
+      ) : null}
+      <mesh
+        geometry={discGeometry}
+        layers={EDITOR_LAYER}
+        material={outlineMaterial}
+        position={[x, FLOOR_LIFT + 0.002, z]}
+        raycast={NO_RAYCAST}
+        renderOrder={1006}
+        rotation={[-Math.PI / 2, 0, 0]}
+        scale={[DISC_OUTLINE, DISC_OUTLINE, 1]}
+      />
+      <mesh
+        geometry={discGeometry}
+        layers={EDITOR_LAYER}
+        material={redMaterial}
+        position={[x, FLOOR_LIFT + 0.003, z]}
+        raycast={NO_RAYCAST}
+        renderOrder={1007}
+        rotation={[-Math.PI / 2, 0, 0]}
+        scale={[DISC_RADIUS, DISC_RADIUS, 1]}
+      />
+      <Html
+        center
+        position={[x, FLOOR_LIFT, z]}
+        style={{ pointerEvents: 'none', userSelect: 'none' }}
+        zIndexRange={[25, 0]}
+      >
+        <div className="relative flex items-center justify-center">
+          <div className="pointer-events-none absolute bottom-full left-1/2 mb-1.5 flex -translate-x-1/2 flex-col items-center gap-1.5">
+            {active ? (
+              <JoinWallsPill
+                onHoverEnd={onHoverEnd}
+                onHoverStart={onHoverStart}
+                onJoin={onJoin}
+                refusal={refusal}
+              />
+            ) : null}
+            {label ? (
+              <div
+                className="whitespace-nowrap rounded-[3px] px-[5px] py-[2px] font-medium font-sans text-[11px] text-white"
+                style={{ backgroundColor: MEASUREMENT_DANGLING_COLOR }}
+              >
+                {label}
+              </div>
+            ) : null}
+          </div>
+          <button
+            aria-label={label ?? 'Wall end not joined'}
+            className={cn(
+              'h-3.5 w-3.5 rounded-full border-2 border-white shadow-sm transition-transform',
+              interactive
+                ? 'pointer-events-auto cursor-pointer hover:scale-125'
+                : 'pointer-events-none',
+              active && 'scale-125',
+            )}
+            data-open-wall-end=""
+            onClick={(event) => {
+              event.stopPropagation()
+              onPin()
+            }}
+            onPointerDown={stop}
+            onPointerEnter={interactive ? onHoverStart : undefined}
+            onPointerLeave={interactive ? onHoverEnd : undefined}
+            onPointerUp={stop}
+            style={{ backgroundColor: MEASUREMENT_DANGLING_COLOR }}
+            tabIndex={interactive ? 0 : -1}
+            type="button"
+          />
+        </div>
+      </Html>
+    </>
+  )
+}

package/src/components/editor/open-wall-ends-hint.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { type AnyNodeId, emitter, type OpenWallEnd } from '@pascal-app/core'
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { openWallEndsSummary } from '../../lib/floorplan/open-wall-ends'
+import { MEASUREMENT_DANGLING_COLOR } from '../../lib/measurements'
+
+// The viewer area holds the floor plan and the 3D view side by side, so its
+// top centre clears both views' corner controls in 2D, 3D and split alike.
+const viewerArea = () => document.querySelector('[data-pascal-viewer-3d]')?.parentElement ?? null
+
+// The views slide in and out without resizing, so the anchor's box is read
+// per frame while the hint is up, like the Join pill's anchor.
+function useViewerAreaTopCenter(): { left: number; top: number } | null {
+  const [anchor, setAnchor] = useState<{ left: number; top: number } | null>(null)
+  useEffect(() => {
+    let raf = 0
+    const tick = () => {
+      raf = requestAnimationFrame(tick)
+      const rect = viewerArea()?.getBoundingClientRect()
+      const next =
+        rect && rect.width > 0 ? { left: rect.left + rect.width / 2, top: rect.top } : null
+      setAnchor((current) =>
+        current && next && current.left === next.left && current.top === next.top ? current : next,
+      )
+    }
+    tick()
+    return () => cancelAnimationFrame(raf)
+  }, [])
+  return anchor
+}
+
+/**
+ * "2 wall ends aren't joined — rooms can't close", centred at the top of the
+ * viewer area. Mounted by one view only (the floor plan when it shows, else
+ * the 3D view), so split view shows it once.
+ * Show walks the joinable ends one by one: it focuses the 3D camera on the
+ * wall and asks the view to pin that end's Join pill.
+ */
+export function OpenWallEndsHint({
+  ends,
+  onShow,
+}: {
+  ends: readonly OpenWallEnd[]
+  onShow: (end: OpenWallEnd) => void
+}) {
+  const anchor = useViewerAreaTopCenter()
+  const [cursor, setCursor] = useState(0)
+  const joinable = ends.filter((end) => end.candidate)
+  const summary = openWallEndsSummary(joinable.length)
+  if (!(anchor && summary)) return null
+
+  const showNext = () => {
+    const target = joinable[cursor % joinable.length]
+    if (!target) return
+    setCursor((value) => value + 1)
+    onShow(target)
+    emitter.emit('camera-controls:focus', { nodeId: target.wallId as AnyNodeId })
+  }
+
+  return createPortal(
+    <div
+      className="pointer-events-auto fixed z-30 flex -translate-x-1/2 items-center gap-2 whitespace-nowrap rounded-full border border-border bg-background/95 py-1 pr-1 pl-3 text-xs shadow-lg backdrop-blur-md"
+      data-open-wall-end=""
+      onPointerDown={(event) => event.stopPropagation()}
+      onPointerUp={(event) => event.stopPropagation()}
+      style={{ left: anchor.left, top: anchor.top + 16 }}
+    >
+      <span
+        aria-hidden
+        className="h-2 w-2 shrink-0 rounded-full"
+        style={{ backgroundColor: MEASUREMENT_DANGLING_COLOR }}
+      />
+      <span className="text-foreground">{summary}</span>
+      <button
+        className="rounded-full px-3 py-1 font-medium text-foreground transition-colors hover:bg-accent"
+        onClick={(event) => {
+          event.stopPropagation()
+          showNext()
+        }}
+        type="button"
+      >
+        Show
+      </button>
+    </div>,
+    document.body,
+  )
+}