@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/editor/wall-move-side-handles.tsx

@@ -19,7 +19,6 @@ import {
   type WallNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
@@ -61,6 +60,7 @@ import useInteractionScope, {
 import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
 import { resolveResizeSnapValue } from './handles/resize-snap'
 import { type HandleDragControls, useHandleDrag } from './handles/use-handle-drag'
+import { Html } from './localized-html'
 import { MeasurementPill } from './measurement-pill'
 import {
   createArrowHitAreaGeometry,
@@ -70,6 +70,7 @@ import {
   NO_RAYCAST,
   useInvisibleHitAreaMaterial,
 } from './node-arrow-handles'
+import { WallPullGrip } from './wall-pull-grip'
 import { WallPushArrow } from './wall-push-arrow'
 
 const HANDLE_OFFSET = 0.27
@@ -251,6 +252,9 @@ function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) {
         />
         <WallCornerLeaderHandle endpoint="start" wall={effectiveWall} />
         <WallCornerLeaderHandle endpoint="end" wall={effectiveWall} />
+        {/* Past each end, the grip that pulls the next wall out of it. */}
+        <WallPullGrip endpoint="start" wall={effectiveWall} />
+        <WallPullGrip endpoint="end" wall={effectiveWall} />
       </group>
       <WallBaseElevationHandle
         baseElevation={baseElevation}
@@ -297,7 +301,7 @@ function StructureThicknessHandle({
   const structureHeight =
     node.type === 'fence'
       ? (node.height ?? 1.8)
-      : getWallEffectiveHeightForNodes(node, useScene.getState().nodes)
+      : getWallEffectiveHeightForNodes(node, useScene.getState().nodes, 0.5)
   const outward = new Vector2(frame.normal.x * side, frame.normal.y * side)
   const faceOffset = getWallLocalFaceZ({ ...node, thickness }, side > 0 ? 'a' : 'b') * side + 0.006
   const position: [number, number, number] = [
@@ -371,7 +375,7 @@ function StructureThicknessHandle({
       const initialStructureHeight =
         initialNode.type === 'fence'
           ? (initialNode.height ?? 1.8)
-          : getWallEffectiveHeightForNodes(initialNode, useScene.getState().nodes)
+          : getWallEffectiveHeightForNodes(initialNode, useScene.getState().nodes, 0.5)
       const initialStructureThickness =
         initialNode.type === 'fence'
           ? (initialNode.thickness ?? 0.08)
@@ -574,7 +578,11 @@ function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint:
   const corner = endpoint === 'start' ? wall.start : wall.end
   const x = corner[0]
   const z = corner[1]
-  const wallHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes)
+  const wallHeight = getWallEffectiveHeightForNodes(
+    wall,
+    useScene.getState().nodes,
+    endpoint === 'start' ? 0 : 1,
+  )
 
   const dashedGeometry = useMemo(() => buildDashedVerticalGeometry(wallHeight), [wallHeight])
   const hitGeometry = useMemo(() => createEndpointHitAreaGeometry(CORNER_HEX_RADIUS), [])
@@ -780,7 +788,7 @@ function WallBaseElevationHandle({
       levelObject.updateWorldMatrix(true, false)
       const initialBase = getWallBaseElevationForNodes(initialNode, sceneApi.nodes())
       const supportBase = initialBase - (initialNode.supportOffset ?? 0)
-      const initialHeight = getWallEffectiveHeightForNodes(initialNode, sceneApi.nodes())
+      const initialHeight = getWallEffectiveHeightForNodes(initialNode, sceneApi.nodes(), 0)
       const midpointWorld = new Vector3(midpoint[0], initialBase, midpoint[1]).applyMatrix4(
         levelObject.matrixWorld,
       )
@@ -916,7 +924,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
   const wallAngle = Math.atan2(-dirZ, dirX)
   // `wall` is the override-merged effective wall (see
   // WallMoveSideHandlesForWall), so this height is already live during a drag.
-  const wallHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes)
+  const wallHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes, 0.5)
   const handleY = wallHeight + HEIGHT_HANDLE_OFFSET
 
   const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
@@ -969,7 +977,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
 
     // Dragging the top makes the wall custom-height; seed from the resolved
     // effective height so a plane-bound wall's drag starts at its real top.
-    const initialHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes)
+    const initialHeight = getWallEffectiveHeightForNodes(wall, useScene.getState().nodes, 0)
     const wallId = wall.id as AnyNodeId
     let pendingHeight = initialHeight
     let releaseSpatialCapture: (() => void) | null = null

package/src/components/editor/wall-pull-grip.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+import { nodeRegistry, type WallNode } from '@pascal-app/core'
+import { type ThreeEvent, useThree } from '@react-three/fiber'
+import { useEffect, useMemo, useState } from 'react'
+import { Color, DoubleSide, ExtrudeGeometry, OrthographicCamera, Shape } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../lib/constants'
+import { sfxEmitter } from '../../lib/sfx-bus'
+import { startWallPull, WALL_PULL_GRIP_TITLE, wallPullSeed } from '../../lib/wall-pull'
+import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
+import {
+  createEndpointHitAreaGeometry,
+  InvisibleHandleHitArea,
+  NO_RAYCAST,
+  useInvisibleHitAreaMaterial,
+} from './handles/handle-arrow'
+
+const PULL_FILL = '#10b981' // emerald-500 — the 2D grip's colour
+const PULL_HOVER_FILL = '#34d399' // emerald-400
+// Out from the wall end (m, before zoom): clear of the corner picker's hex.
+const PULL_ARROW_OFFSET = 0.2
+const PULL_ARROW_LENGTH = 0.34
+const PULL_ARROW_HALF_WIDTH = 0.11
+const PULL_ARROW_SHAFT_HALF_WIDTH = 0.04
+const PULL_HIT_RADIUS = 0.17
+const PULL_FLOOR_LIFT = 0.02
+
+// The grip's tooltip: one plain DOM element beside the pointer, so it never
+// lives in (or unmounts with) the R3F tree.
+let tooltip: HTMLDivElement | null = null
+
+function showGripTooltip(clientX: number, clientY: number) {
+  if (typeof document === 'undefined') return
+  if (!tooltip) {
+    tooltip = document.createElement('div')
+    tooltip.textContent = WALL_PULL_GRIP_TITLE
+    tooltip.setAttribute('role', 'tooltip')
+    Object.assign(tooltip.style, {
+      position: 'fixed',
+      zIndex: '60',
+      pointerEvents: 'none',
+      whiteSpace: 'nowrap',
+      borderRadius: '6px',
+      background: 'rgba(24, 24, 27, 0.92)',
+      color: '#fff',
+      font: '500 11px/1.4 system-ui, -apple-system, sans-serif',
+      padding: '4px 8px',
+      boxShadow: '0 1px 3px rgba(0, 0, 0, 0.25)',
+    })
+  }
+  tooltip.style.left = `${clientX + 14}px`
+  tooltip.style.top = `${clientY + 18}px`
+  if (!tooltip.isConnected) document.body.appendChild(tooltip)
+}
+
+function hideGripTooltip() {
+  tooltip?.remove()
+}
+
+/** A flat outward arrow (tip along +X), lying in the XZ plane from x = 0. */
+function createPullArrowGeometry() {
+  const head = PULL_ARROW_LENGTH * 0.45
+  const shape = new Shape()
+  shape.moveTo(0, -PULL_ARROW_SHAFT_HALF_WIDTH)
+  shape.lineTo(PULL_ARROW_LENGTH - head, -PULL_ARROW_SHAFT_HALF_WIDTH)
+  shape.lineTo(PULL_ARROW_LENGTH - head, -PULL_ARROW_HALF_WIDTH)
+  shape.lineTo(PULL_ARROW_LENGTH, 0)
+  shape.lineTo(PULL_ARROW_LENGTH - head, PULL_ARROW_HALF_WIDTH)
+  shape.lineTo(PULL_ARROW_LENGTH - head, PULL_ARROW_SHAFT_HALF_WIDTH)
+  shape.lineTo(0, PULL_ARROW_SHAFT_HALF_WIDTH)
+  shape.lineTo(0, -PULL_ARROW_SHAFT_HALF_WIDTH)
+  const geometry = new ExtrudeGeometry(shape, {
+    depth: 0.03,
+    bevelEnabled: true,
+    bevelThickness: 0.01,
+    bevelSize: 0.012,
+    bevelSegments: 4,
+  })
+  geometry.translate(0, 0, -0.015)
+  geometry.rotateX(-Math.PI / 2)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
+
+/**
+ * A selected wall end's "pull to continue" grip in 3D — the twin of the floor
+ * plan's: an emerald arrow lying on the floor just past the end, pointing out
+ * along the wall (along its tangent when curved), titled "Drag to draw the next
+ * wall" while the pointer rests on it. Pressing it starts
+ * `startWallPull`: the wall tool's Walls run opens at that end, the drag shows
+ * the next wall, and the release (the canvas click) places it. Screen-sized
+ * like the corner picker beside it; rendered in the wall's level frame at its
+ * base, by `WallMoveSideHandles`.
+ */
+export function WallPullGrip({ wall, endpoint }: { wall: WallNode; endpoint: 'start' | 'end' }) {
+  const [hover, setHover] = useState(false)
+  const { camera } = useThree()
+  const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1
+  const seed = wallPullSeed(wall, endpoint)
+  const geometry = useMemo(() => createPullArrowGeometry(), [])
+  const hitGeometry = useMemo(() => createEndpointHitAreaGeometry(PULL_HIT_RADIUS), [])
+  const hitMaterial = useInvisibleHitAreaMaterial()
+  const material = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(PULL_FILL),
+        side: DoubleSide,
+        transparent: true,
+        opacity: 0.95,
+        depthTest: false,
+        depthWrite: false,
+        toneMapped: false,
+      }),
+    [],
+  )
+  useEffect(() => {
+    material.color.set(hover ? PULL_HOVER_FILL : PULL_FILL)
+  }, [hover, material])
+  useEffect(() => () => geometry.dispose(), [geometry])
+  useEffect(() => () => hitGeometry.dispose(), [hitGeometry])
+  useEffect(() => () => material.dispose(), [material])
+  // Warm the wall tool's module so the press starts drawing at once.
+  useEffect(() => {
+    void nodeRegistry
+      .get('wall')
+      ?.tool?.()
+      .catch(() => {})
+  }, [])
+  useEffect(
+    () => () => {
+      hideGripTooltip()
+      if (document.body.style.cursor === 'grab') document.body.style.cursor = ''
+    },
+    [],
+  )
+
+  if (!seed) return null
+  const [dx, dz] = seed.reference
+  const offset = PULL_ARROW_OFFSET * zoom
+  const position: [number, number, number] = [
+    seed.start[0] + dx * offset,
+    PULL_FLOOR_LIFT,
+    seed.start[1] + dz * offset,
+  ]
+  const rotationY = Math.atan2(-dz, dx)
+
+  const onPointerDown = (event: ThreeEvent<PointerEvent>) => {
+    if (event.button !== 0) return
+    event.stopPropagation()
+    suppressBoxSelectForPointer(event)
+    sfxEmitter.emit('sfx:item-pick')
+    setHover(false)
+    hideGripTooltip()
+    if (document.body.style.cursor === 'grab') document.body.style.cursor = ''
+    startWallPull({ wallId: wall.id, endpoint, origin: '3d' })
+  }
+
+  return (
+    <group position={position} rotation={[0, rotationY, 0]} scale={zoom}>
+      <group position={[PULL_ARROW_LENGTH / 2, 0, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+        <InvisibleHandleHitArea
+          geometry={hitGeometry}
+          material={hitMaterial}
+          onPointerDown={onPointerDown}
+          onPointerEnter={(event) => {
+            event.stopPropagation()
+            setHover(true)
+            showGripTooltip(event.nativeEvent.clientX, event.nativeEvent.clientY)
+            document.body.style.cursor = 'grab'
+          }}
+          onPointerLeave={(event) => {
+            event.stopPropagation()
+            setHover(false)
+            hideGripTooltip()
+            if (document.body.style.cursor === 'grab') document.body.style.cursor = ''
+          }}
+          scale={1}
+        />
+      </group>
+      <mesh
+        frustumCulled={false}
+        geometry={geometry}
+        layers={EDITOR_LAYER}
+        material={material}
+        raycast={NO_RAYCAST}
+        renderOrder={1003}
+        scale={hover ? 1.15 : 1}
+      />
+    </group>
+  )
+}

package/src/components/editor/wall-region-handles.tsx

@@ -203,7 +203,7 @@ function WallRegionHandlesForWall({ wall }: { wall: WallNode }) {
   const frame: WallFrame = {
     wall: effectiveWall,
     baseElevation: getWallBaseElevationForNodes(effectiveWall, nodes),
-    wallHeight: getWallEffectiveHeightForNodes(effectiveWall, nodes),
+    wallHeight: getWallEffectiveHeightForNodes(effectiveWall, nodes, 0.5),
     angle: Math.atan2(
       effectiveWall.end[1] - effectiveWall.start[1],
       effectiveWall.end[0] - effectiveWall.start[0],
@@ -426,7 +426,7 @@ function RegionEdgeHandle({
       const face = region.face
       const faceSurface = getWallFaceSurface(initialNode, face)
       const baseAt = faceBaseSampler(initialNode.id, face)
-      const wallHeight = getWallEffectiveHeightForNodes(initialNode, nodes)
+      const wallHeight = getWallEffectiveHeightForNodes(initialNode, nodes, 0.5)
       const faceHeight = regionFaceHeight(region, faceSurface.length, wallHeight, baseAt)
       const bounds = resolveRegionBounds(region, faceSurface.length, faceHeight)
       const midU = (bounds.u0 + bounds.u1) / 2

package/src/components/editor/wall-snap-beacon-layer.tsx

@@ -16,6 +16,7 @@ import {
 } from '@pascal-app/core'
 import { useWallSnapIndicator, type WallSnapKind } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
 import { memo, useMemo, useRef } from 'react'
 import { BoxGeometry, CircleGeometry, CylinderGeometry, type Group } from 'three'
@@ -31,10 +32,14 @@ import { EDITOR_LAYER } from '../../lib/constants'
  *
  *   endpoint (corner) → square    midpoint → triangle
  *   intersection      → ✕ cross   wall body (edge) → circle
+ *   perpendicular     → ⊥ corner  projection guide → diamond
+ *   grid length       → small +
  *
  * Subscribes to the shared `useWallSnapIndicator` store (published by the wall
  * draft + endpoint-move tools). The vertical mouse pillar and the corner
- * (endpoint) square are green; the other floor glyphs are indigo.
+ * (endpoint) square are green; the other floor glyphs are indigo. A point that
+ * carries a `label` (a wall pulled from a wall end) also names what it caught
+ * in a pill beside the foot of the pillar.
  *
  * The point carries only XZ (building-local plan coords); like the alignment
  * guides it's lifted to the active level's building-local Y each frame so it
@@ -135,6 +140,23 @@ export const WallSnapBeaconLayer = memo(function WallSnapBeaconLayer() {
         renderOrder={1002}
       />
       <SnapMarker kind={point.kind} x={point.x} z={point.z} />
+      {point.label ? (
+        <Html
+          position={[point.x, 0.05, point.z]}
+          style={{ pointerEvents: 'none', userSelect: 'none' }}
+          zIndexRange={[24, 0]}
+        >
+          <div
+            className="whitespace-nowrap rounded-[3px] px-[5px] py-[2px] font-sans font-semibold text-[11px] text-white"
+            style={{
+              backgroundColor: point.kind === 'endpoint' ? '#16a34a' : '#6366f1',
+              transform: 'translate(12px, 8px)',
+            }}
+          >
+            {point.label}
+          </div>
+        </Html>
+      ) : null}
     </group>
   )
 })
@@ -143,9 +165,10 @@ type WallTopHighlightSegment = {
   angle: number
   center: [number, number]
   length: number
+  tCenter: number
 }
 
-function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>) {
+function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>, t = 0.5): number {
   const levelId = resolveLevelId(wall, nodes as Record<string, AnyNode>)
   const support = spatialGridManager.getSlabSupportForWall(
     levelId,
@@ -159,12 +182,16 @@ function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>) {
     wall.justification,
   )
   return (
-    getWallTop(wall, levelId, nodes as Record<string, AnyNode>, support.elevation) +
+    getWallTop(wall, levelId, nodes as Record<string, AnyNode>, support.elevation, t) +
     WALL_TOP_HIGHLIGHT_LIFT
   )
 }
 
-function buildHighlightSegment(start: [number, number], end: [number, number]) {
+function buildHighlightSegment(
+  start: [number, number],
+  end: [number, number],
+  tCenter = 0.5,
+): WallTopHighlightSegment | null {
   const dx = end[0] - start[0]
   const dz = end[1] - start[1]
   const length = Math.hypot(dx, dz)
@@ -174,15 +201,20 @@ function buildHighlightSegment(start: [number, number], end: [number, number]) {
     angle: -Math.atan2(dz, dx),
     center: [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2] as [number, number],
     length,
+    tCenter,
   }
 }
 
 function buildWallTopHighlightSegments(wall: WallNode): WallTopHighlightSegment[] {
   if (!isCurvedWall(wall)) {
-    const segment = buildHighlightSegment(wall.start, wall.end)
+    const segment = buildHighlightSegment(wall.start, wall.end, 0.5)
     return segment ? [segment] : []
   }
 
+  const dx = wall.end[0] - wall.start[0]
+  const dz = wall.end[1] - wall.start[1]
+  const chordLenSq = dx * dx + dz * dz
+
   const sampleCount = Math.max(
     8,
     Math.ceil(getWallCurveLength(wall) / CURVED_WALL_HIGHLIGHT_SEGMENT_LENGTH),
@@ -191,7 +223,16 @@ function buildWallTopHighlightSegments(wall: WallNode): WallTopHighlightSegment[
   let previous = getWallCurveFrameAt(wall, 0).point
   for (let index = 1; index <= sampleCount; index += 1) {
     const current = getWallCurveFrameAt(wall, index / sampleCount).point
-    const segment = buildHighlightSegment([previous.x, previous.y], [current.x, current.y])
+    const midX = (previous.x + current.x) / 2
+    const midY = (previous.y + current.y) / 2
+    const tCenter =
+      chordLenSq > 1e-12
+        ? Math.max(
+            0,
+            Math.min(1, ((midX - wall.start[0]) * dx + (midY - wall.start[1]) * dz) / chordLenSq),
+          )
+        : 0.5
+    const segment = buildHighlightSegment([previous.x, previous.y], [current.x, current.y], tCenter)
     if (segment) segments.push(segment)
     previous = current
   }
@@ -206,38 +247,40 @@ function WallTopHighlight({
   wall: WallNode
 }) {
   const segments = useMemo(() => buildWallTopHighlightSegments(wall), [wall])
-  const y = getWallTopY(wall, nodes)
   const width = Math.max(getWallThickness(wall) + WALL_TOP_HIGHLIGHT_OVERHANG, 0.24)
   const glowWidth = Math.max(getWallThickness(wall) + WALL_TOP_GLOW_OVERHANG, 0.42)
 
   return (
     <>
-      {segments.map((segment, index) => (
-        <group key={`${wall.id}:${index}`}>
-          <mesh
-            frustumCulled={false}
-            geometry={WALL_TOP_HIGHLIGHT_GEOMETRY}
-            layers={EDITOR_LAYER}
-            material={wallTopHighlightGlowMaterial}
-            position={[segment.center[0], y - 0.003, segment.center[1]]}
-            raycast={NO_RAYCAST}
-            renderOrder={1003}
-            rotation={[0, segment.angle, 0]}
-            scale={[segment.length + WALL_TOP_END_OVERHANG, WALL_TOP_GLOW_HEIGHT, glowWidth]}
-          />
-          <mesh
-            frustumCulled={false}
-            geometry={WALL_TOP_HIGHLIGHT_GEOMETRY}
-            layers={EDITOR_LAYER}
-            material={wallTopHighlightMaterial}
-            position={[segment.center[0], y + 0.002, segment.center[1]]}
-            raycast={NO_RAYCAST}
-            renderOrder={1004}
-            rotation={[0, segment.angle, 0]}
-            scale={[segment.length + WALL_TOP_END_OVERHANG, WALL_TOP_HIGHLIGHT_HEIGHT, width]}
-          />
-        </group>
-      ))}
+      {segments.map((segment, index) => {
+        const y = getWallTopY(wall, nodes, segment.tCenter)
+        return (
+          <group key={`${wall.id}:${index}`}>
+            <mesh
+              frustumCulled={false}
+              geometry={WALL_TOP_HIGHLIGHT_GEOMETRY}
+              layers={EDITOR_LAYER}
+              material={wallTopHighlightGlowMaterial}
+              position={[segment.center[0], y - 0.003, segment.center[1]]}
+              raycast={NO_RAYCAST}
+              renderOrder={1003}
+              rotation={[0, segment.angle, 0]}
+              scale={[segment.length + WALL_TOP_END_OVERHANG, WALL_TOP_GLOW_HEIGHT, glowWidth]}
+            />
+            <mesh
+              frustumCulled={false}
+              geometry={WALL_TOP_HIGHLIGHT_GEOMETRY}
+              layers={EDITOR_LAYER}
+              material={wallTopHighlightMaterial}
+              position={[segment.center[0], y + 0.002, segment.center[1]]}
+              raycast={NO_RAYCAST}
+              renderOrder={1004}
+              rotation={[0, segment.angle, 0]}
+              scale={[segment.length + WALL_TOP_END_OVERHANG, WALL_TOP_HIGHLIGHT_HEIGHT, width]}
+            />
+          </group>
+        )
+      })}
     </>
   )
 }
@@ -295,6 +338,64 @@ function SnapMarker({ kind, x, z }: { kind: WallSnapKind; x: number; z: number }
       </>
     )
   }
+  if (kind === 'perpendicular') {
+    // ⊥ — a base bar with an upright from its middle.
+    return (
+      <>
+        <mesh
+          geometry={FLAT_BOX_GEOMETRY}
+          layers={EDITOR_LAYER}
+          material={beaconMaterial}
+          position={[x, y, z]}
+          renderOrder={1001}
+          scale={[MARKER * 2.6, 1, MARKER * 0.45]}
+        />
+        <mesh
+          geometry={FLAT_BOX_GEOMETRY}
+          layers={EDITOR_LAYER}
+          material={beaconMaterial}
+          position={[x, y, z - MARKER * 0.8]}
+          renderOrder={1001}
+          scale={[MARKER * 0.45, 1, MARKER * 1.6]}
+        />
+      </>
+    )
+  }
+  if (kind === 'alignment') {
+    return (
+      <mesh
+        geometry={FLAT_BOX_GEOMETRY}
+        layers={EDITOR_LAYER}
+        material={beaconMaterial}
+        position={[x, y, z]}
+        renderOrder={1001}
+        rotation={[0, Math.PI / 4, 0]}
+        scale={[MARKER * 1.4, 1, MARKER * 1.4]}
+      />
+    )
+  }
+  if (kind === 'grid') {
+    return (
+      <>
+        <mesh
+          geometry={FLAT_BOX_GEOMETRY}
+          layers={EDITOR_LAYER}
+          material={beaconMaterial}
+          position={[x, y, z]}
+          renderOrder={1001}
+          scale={[MARKER * 1.8, 1, MARKER * 0.35]}
+        />
+        <mesh
+          geometry={FLAT_BOX_GEOMETRY}
+          layers={EDITOR_LAYER}
+          material={beaconMaterial}
+          position={[x, y, z]}
+          renderOrder={1001}
+          scale={[MARKER * 0.35, 1, MARKER * 1.8]}
+        />
+      </>
+    )
+  }
   // 'wall' (edge / along-wall) → circle
   return (
     <mesh

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

@@ -0,0 +1,76 @@
+import { expect, test } from 'bun:test'
+import { type AnyNode, BuildingNode, LevelNode, WallNode } from '@pascal-app/core'
+import { normalizePersistedEditorLayoutState } from '../../store/use-editor'
+import { adjacentWallLevels, adjacentWallOutlines } from './floorplan-adjacent-walls-layer'
+
+function house() {
+  const building = BuildingNode.parse({ id: 'building_adj' })
+  const levels = ['ground', 'upper', 'roof'].map((name, level) =>
+    LevelNode.parse({
+      id: `level_adj_${name}`,
+      parentId: building.id,
+      level,
+      height: 3,
+      ...(name === 'roof' ? { metadata: { role: 'roof' } } : {}),
+    }),
+  )
+  building.children = levels.map((level) => level.id)
+  const walls = [
+    WallNode.parse({
+      id: 'wall_adj_a',
+      parentId: levels[1]!.id,
+      start: [0, 0],
+      end: [6, 0],
+      thickness: 0.2,
+    }),
+    WallNode.parse({
+      id: 'wall_adj_b',
+      parentId: levels[1]!.id,
+      start: [6, 0],
+      end: [6, 4],
+      thickness: 0.2,
+    }),
+    WallNode.parse({ id: 'wall_adj_c', parentId: levels[0]!.id, start: [0, 0], end: [6, 0] }),
+  ]
+  return Object.fromEntries(
+    [building, ...levels, ...walls].map((node) => [node.id, node]),
+  ) as Record<string, AnyNode>
+}
+
+test('the roof plan traces the top storey’s walls below, both faces, joined at the corner', () => {
+  const nodes = house()
+  expect(adjacentWallLevels(nodes, 'level_adj_roof', { below: true, above: true })).toEqual({
+    below: 'level_adj_upper',
+    above: null,
+  })
+  expect(adjacentWallLevels(nodes, 'level_adj_upper', { below: true, above: false })).toEqual({
+    below: 'level_adj_ground',
+    above: null,
+  })
+  const outlines = adjacentWallOutlines(nodes, 'level_adj_upper')
+  expect(outlines.map((outline) => outline.id).sort()).toEqual(['wall_adj_a', 'wall_adj_b'])
+  const points = outlines
+    .find((outline) => outline.id === 'wall_adj_a')!
+    .points.split(' ')
+    .map((pair) => pair.split(',').map(Number) as [number, number])
+  const zs = points.map(([, z]) => z)
+  // Both faces of the 0.2 m wall, and mitred into the corner at x = 6 (past the centreline).
+  expect(Math.max(...zs) - Math.min(...zs)).toBeCloseTo(0.2)
+  expect(Math.max(...points.map(([x]) => x))).toBeCloseTo(6.1)
+})
+
+test('walls below start on for the roof plan and off for the floor plans, each kept as set', () => {
+  const fresh = normalizePersistedEditorLayoutState(undefined)
+  expect(fresh.showRoofWallsBelow).toBe(true)
+  expect(fresh.showWallsBelow).toBe(false)
+  // Saved before the roof plan had its own setting: the roof plan still starts on.
+  expect(normalizePersistedEditorLayoutState({ showWallsBelow: false }).showRoofWallsBelow).toBe(
+    true,
+  )
+  const turnedOff = normalizePersistedEditorLayoutState({
+    showRoofWallsBelow: false,
+    showWallsBelow: true,
+  })
+  expect(turnedOff.showRoofWallsBelow).toBe(false)
+  expect(turnedOff.showWallsBelow).toBe(true)
+})