@pascal-app/editor 0.8.0 → 0.9.2

package/src/components/editor/wall-opening-highlights.tsx

@@ -0,0 +1,181 @@
+'use client'
+
+import { type AnyNodeId, sceneRegistry, useLiveNodeOverrides, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createPortal, useFrame, useThree } from '@react-three/fiber'
+import { useEffect, useMemo, useRef } from 'react'
+import { BoxGeometry, type BufferGeometry, EdgesGeometry, type Group, Vector3 } from 'three'
+import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../lib/constants'
+
+// How far the outline sits outside the opening's own extents, so it reads as
+// a frame *around* the opening rather than coinciding with its edges.
+const PAD = 0.05
+
+const ACCENT = 0x83_81_ed
+
+const NO_RAYCAST = () => null
+const scratchScale = new Vector3()
+
+// Indigo accent matching the resize-arrow handles — deliberately distinct
+// from the white selection outline so the highlight reads as "editable child
+// here", not "this is selected". `depthTest: false` keeps both layers drawn
+// on top of the wall so frameless openings (which have no visible geometry)
+// are still located. Shared across every box; never disposed.
+const outlineMaterial = new LineBasicNodeMaterial({
+  color: ACCENT,
+  depthTest: false,
+  depthWrite: false,
+})
+
+// Translucent block that fills the opening volume so the cutout reads as an
+// occupied slot from every angle — the front face shows it head-on, the top
+// face shows it from a top-down floorplan view (a single vertical pane would
+// be edge-on, hence invisible, when looking straight down). Front-side culling
+// keeps the translucency even instead of doubling up on overlapping back faces.
+const fillMaterial = new MeshBasicNodeMaterial({
+  color: ACCENT,
+  transparent: true,
+  opacity: 0.5,
+  depthTest: false,
+  depthWrite: false,
+})
+
+function makeOutlineGeometry(width: number, height: number, depth: number): BufferGeometry {
+  const box = new BoxGeometry(width + PAD, height + PAD, depth + PAD)
+  const edges = new EdgesGeometry(box)
+  box.dispose()
+  return edges
+}
+
+/**
+ * When a wall is selected, draws a translucent indigo highlight (filled block
+ * + outline) over each door / window it hosts. Openings whose `openingKind`
+ * is `'opening'` have no visible geometry, so without this affordance the
+ * user can't tell an editable cutout lives there — the fill marks it (and
+ * stays out of the way of clicking the opening itself, which selects it).
+ *
+ * Highlights are portalled to the scene root so they sit outside the wall's
+ * selection-outline subtree and keep their own accent colour.
+ */
+export function WallOpeningHighlights() {
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const { scene } = useThree()
+
+  if (selectedIds.length === 0) return null
+
+  return createPortal(
+    <>
+      {selectedIds.map((id) => (
+        <SelectionOpeningHighlights key={id} selectedId={id} />
+      ))}
+    </>,
+    scene,
+  )
+}
+
+// Resolves a selected node into the opening highlight(s) to draw:
+//  - a selected wall → a hint over each door / window it hosts ("editable
+//    child here").
+//  - a directly-selected frameless opening (a `door` whose `openingKind` is
+//    `'opening'`) → a fill over its own cutout, so the selection reads as
+//    occupied even though the opening renders no geometry of its own.
+function SelectionOpeningHighlights({ selectedId }: { selectedId: string }) {
+  const node = useScene((state) => state.nodes[selectedId as AnyNodeId])
+
+  if (node?.type === 'wall') {
+    const depth = node.thickness ?? 0.1
+    return (
+      <>
+        {(node.children ?? []).map((childId) => (
+          <OpeningHighlight depth={depth} key={childId} openingId={childId} />
+        ))}
+      </>
+    )
+  }
+
+  if (node?.type === 'door' && node.openingKind === 'opening') {
+    return <SelectedOpeningHighlight openingId={selectedId} parentId={node.parentId} />
+  }
+
+  return null
+}
+
+// A frameless opening selected on its own. Pulls the cutout depth from its
+// host wall's thickness so the fill block matches the wall it sits in.
+function SelectedOpeningHighlight({
+  openingId,
+  parentId,
+}: {
+  openingId: string
+  parentId: string | null
+}) {
+  const parent = useScene((state) => (parentId ? state.nodes[parentId as AnyNodeId] : undefined))
+  const depth = parent?.type === 'wall' ? (parent.thickness ?? 0.1) : 0.1
+  return <OpeningHighlight depth={depth} openingId={openingId} />
+}
+
+function OpeningHighlight({ openingId, depth }: { openingId: string; depth: number }) {
+  const node = useScene((state) => state.nodes[openingId as AnyNodeId])
+  // Resize arrows publish width/height to the live-override store during the
+  // drag and only commit to the scene node on pointer-up, so read the
+  // override-merged dimensions to keep the highlight box tracking the resize.
+  const override = useLiveNodeOverrides((s) => s.overrides.get(openingId))
+  const groupRef = useRef<Group>(null)
+
+  const isOpening = node?.type === 'door' || node?.type === 'window'
+  const width = isOpening ? ((override?.width as number | undefined) ?? node.width) : 0
+  const height = isOpening ? ((override?.height as number | undefined) ?? node.height) : 0
+
+  const outlineGeometry = useMemo(
+    () => (isOpening ? makeOutlineGeometry(width, height, depth) : null),
+    [isOpening, width, height, depth],
+  )
+  const fillGeometry = useMemo(
+    () => (isOpening ? new BoxGeometry(width, height, depth) : null),
+    [isOpening, width, height, depth],
+  )
+  useEffect(() => () => outlineGeometry?.dispose(), [outlineGeometry])
+  useEffect(() => () => fillGeometry?.dispose(), [fillGeometry])
+
+  // The opening's mesh (registered by its renderer) already carries the wall
+  // transform + its own local pose baked into `matrixWorld`. Copy that
+  // straight onto the highlight each frame so it tracks moves, resizes, and
+  // wall rotation without any wall-local maths here.
+  useFrame(() => {
+    const group = groupRef.current
+    if (!group) return
+    const obj = sceneRegistry.nodes.get(openingId as AnyNodeId)
+    if (!obj) {
+      group.visible = false
+      return
+    }
+    group.visible = true
+    obj.matrixWorld.decompose(group.position, group.quaternion, scratchScale)
+  })
+
+  if (!isOpening || !outlineGeometry || !fillGeometry) return null
+
+  return (
+    <group ref={groupRef}>
+      <mesh
+        frustumCulled={false}
+        geometry={fillGeometry}
+        layers={EDITOR_LAYER}
+        material={fillMaterial}
+        raycast={NO_RAYCAST}
+        renderOrder={1004}
+      />
+      <lineSegments
+        frustumCulled={false}
+        geometry={outlineGeometry}
+        layers={EDITOR_LAYER}
+        material={outlineMaterial}
+        raycast={NO_RAYCAST}
+        renderOrder={1005}
+      />
+    </group>
+  )
+}
+
+export default WallOpeningHighlights

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

@@ -0,0 +1,304 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  DEFAULT_WALL_HEIGHT,
+  getWallCurveFrameAt,
+  getWallCurveLength,
+  getWallThickness,
+  isCurvedWall,
+  resolveLevelId,
+  sceneRegistry,
+  spatialGridManager,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
+import { useWallSnapIndicator, type WallSnapKind } from '@pascal-app/editor'
+import { useViewer } from '@pascal-app/viewer'
+import { useFrame } from '@react-three/fiber'
+import { memo, useMemo, useRef } from 'react'
+import { BoxGeometry, CircleGeometry, CylinderGeometry, type Group } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../lib/constants'
+
+/**
+ * "Magnetic" wall-snap beacon for the 3D editor — a vertical marker that
+ * stands at the draft / move endpoint while it's locked onto existing wall
+ * geometry. It's the spatial cue from the design reference: a standing pillar
+ * so you can see *where* the snap caught even at an angle, plus a floor marker
+ * whose shape tells you *what* it caught (CAD-style osnap glyphs):
+ *
+ *   endpoint (corner) → square    midpoint → triangle
+ *   intersection      → ✕ cross   wall body (edge) → circle
+ *
+ * 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.
+ *
+ * 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
+ * stands on the floor being edited when floors are stacked. Mounted inside
+ * ToolManager's building-local group.
+ */
+
+const BEACON_COLOR = 0x81_8c_f8 // indigo-400 — matches the alignment guide accent
+const MARKER_GREEN = 0x22_c5_5e // green-500 — vertical mouse marker + corner (endpoint) glyph
+const BEACON_HEIGHT = 2.5 // world-meter height of the pillar
+const BEACON_RADIUS = 0.018 // world-meter radius of the pillar
+const MARKER = 0.13 // world-meter base size of the floor glyph
+const FLOOR_LIFT = 0.012 // tiny lift so the marker reads above the floor grid
+const WALL_TOP_HIGHLIGHT_LIFT = 0.035
+const WALL_TOP_HIGHLIGHT_HEIGHT = 0.018
+const WALL_TOP_HIGHLIGHT_OVERHANG = 0.14
+const WALL_TOP_GLOW_HEIGHT = 0.026
+const WALL_TOP_GLOW_OVERHANG = 0.36
+const WALL_TOP_END_OVERHANG = 0.08
+const CURVED_WALL_HIGHLIGHT_SEGMENT_LENGTH = 0.45
+const NO_RAYCAST = () => null
+
+// Shared resources — one material + unit geometries, so snap churn during a
+// drag doesn't rebuild GPU buffers (mirrors the alignment guide layer).
+const beaconMaterial = new MeshBasicNodeMaterial({
+  color: BEACON_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+  opacity: 0.9,
+})
+const greenMarkerMaterial = new MeshBasicNodeMaterial({
+  color: MARKER_GREEN,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+  opacity: 0.9,
+})
+const wallTopHighlightMaterial = new MeshBasicNodeMaterial({
+  color: BEACON_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+  opacity: 0.88,
+})
+const wallTopHighlightGlowMaterial = new MeshBasicNodeMaterial({
+  color: BEACON_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+  opacity: 0.26,
+})
+const PILLAR_GEOMETRY = new CylinderGeometry(BEACON_RADIUS, BEACON_RADIUS, BEACON_HEIGHT, 8)
+// Flat unit geometries scaled per marker. Boxes are 0.002 tall so they read as
+// a flat plate; circles/triangles lie flat via an X rotation at the mesh.
+const FLAT_BOX_GEOMETRY = new BoxGeometry(1, 0.002, 1)
+const WALL_TOP_HIGHLIGHT_GEOMETRY = new BoxGeometry(1, 1, 1)
+const TRIANGLE_GEOMETRY = new CircleGeometry(1, 3)
+const CIRCLE_GEOMETRY = new CircleGeometry(1, 28)
+
+export const WallSnapBeaconLayer = memo(function WallSnapBeaconLayer() {
+  const point = useWallSnapIndicator((s) => s.point)
+  const levelId = useViewer((s) => s.selection.levelId)
+  const nodes = useScene((s) => s.nodes)
+  const groupRef = useRef<Group>(null)
+  const highlightedWalls = useMemo(() => {
+    if (!point?.wallIds?.length) return []
+    return point.wallIds
+      .map((wallId) => nodes[wallId as AnyNodeId])
+      .filter((node): node is WallNode => node?.type === 'wall' && node.visible !== false)
+  }, [nodes, point?.wallIds])
+
+  // Track the active level's building-local Y each frame so the beacon stands
+  // on the floor being edited, not the building base — same source the
+  // alignment guide layer and `grid.tsx` read.
+  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 (!point) return null
+  return (
+    <group ref={groupRef}>
+      {highlightedWalls.map((wall) => (
+        <WallTopHighlight key={wall.id} nodes={nodes} wall={wall} />
+      ))}
+      <mesh
+        geometry={PILLAR_GEOMETRY}
+        layers={EDITOR_LAYER}
+        material={greenMarkerMaterial}
+        position={[point.x, BEACON_HEIGHT / 2, point.z]}
+        renderOrder={1002}
+      />
+      <SnapMarker kind={point.kind} x={point.x} z={point.z} />
+    </group>
+  )
+})
+
+type WallTopHighlightSegment = {
+  angle: number
+  center: [number, number]
+  length: number
+}
+
+function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>) {
+  const levelId = resolveLevelId(wall, nodes as Record<string, AnyNode>)
+  const slabElevation = spatialGridManager.getSlabElevationForWall(
+    levelId,
+    wall.start,
+    wall.end,
+    wall.curveOffset ?? 0,
+    wall.thickness,
+  )
+  const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT
+  return (slabElevation > 0 ? slabElevation + wallHeight : wallHeight) + WALL_TOP_HIGHLIGHT_LIFT
+}
+
+function buildHighlightSegment(start: [number, number], end: [number, number]) {
+  const dx = end[0] - start[0]
+  const dz = end[1] - start[1]
+  const length = Math.hypot(dx, dz)
+  if (length < 1e-6) return null
+
+  return {
+    angle: -Math.atan2(dz, dx),
+    center: [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2] as [number, number],
+    length,
+  }
+}
+
+function buildWallTopHighlightSegments(wall: WallNode): WallTopHighlightSegment[] {
+  if (!isCurvedWall(wall)) {
+    const segment = buildHighlightSegment(wall.start, wall.end)
+    return segment ? [segment] : []
+  }
+
+  const sampleCount = Math.max(
+    8,
+    Math.ceil(getWallCurveLength(wall) / CURVED_WALL_HIGHLIGHT_SEGMENT_LENGTH),
+  )
+  const segments: 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])
+    if (segment) segments.push(segment)
+    previous = current
+  }
+  return segments
+}
+
+function WallTopHighlight({
+  nodes,
+  wall,
+}: {
+  nodes: Readonly<Record<string, AnyNode>>
+  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>
+      ))}
+    </>
+  )
+}
+
+/** Floor glyph whose shape encodes which kind of geometry the point snapped to. */
+function SnapMarker({ kind, x, z }: { kind: WallSnapKind; x: number; z: number }) {
+  const y = FLOOR_LIFT
+  if (kind === 'endpoint') {
+    return (
+      <mesh
+        geometry={FLAT_BOX_GEOMETRY}
+        layers={EDITOR_LAYER}
+        material={greenMarkerMaterial}
+        position={[x, y, z]}
+        renderOrder={1001}
+        scale={[MARKER * 2, 1, MARKER * 2]}
+      />
+    )
+  }
+  if (kind === 'midpoint') {
+    return (
+      <mesh
+        geometry={TRIANGLE_GEOMETRY}
+        layers={EDITOR_LAYER}
+        material={beaconMaterial}
+        position={[x, y, z]}
+        renderOrder={1001}
+        rotation={[-Math.PI / 2, 0, 0]}
+        scale={[MARKER * 1.4, MARKER * 1.4, MARKER * 1.4]}
+      />
+    )
+  }
+  if (kind === 'intersection') {
+    // Two crossed bars → an ✕, the universal "crossing" glyph.
+    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 * 2.6, 1, MARKER * 0.5]}
+        />
+        <mesh
+          geometry={FLAT_BOX_GEOMETRY}
+          layers={EDITOR_LAYER}
+          material={beaconMaterial}
+          position={[x, y, z]}
+          renderOrder={1001}
+          rotation={[0, -Math.PI / 4, 0]}
+          scale={[MARKER * 2.6, 1, MARKER * 0.5]}
+        />
+      </>
+    )
+  }
+  // 'wall' (edge / along-wall) → circle
+  return (
+    <mesh
+      geometry={CIRCLE_GEOMETRY}
+      layers={EDITOR_LAYER}
+      material={beaconMaterial}
+      position={[x, y, z]}
+      renderOrder={1001}
+      rotation={[-Math.PI / 2, 0, 0]}
+      scale={[MARKER, MARKER, MARKER]}
+    />
+  )
+}

package/src/components/editor-2d/floorplan-action-menu-layer.tsx

@@ -2,6 +2,11 @@
 
 import { memo, type MouseEvent as ReactMouseEvent } from 'react'
 import useEditor from '../../store/use-editor'
+import {
+  useEndpointReshape,
+  useIsCurveReshape,
+  useMovingNode,
+} from '../../store/use-interaction-scope'
 import { NodeActionMenu } from '../editor/node-action-menu'
 
 type SvgPoint = {
@@ -14,12 +19,14 @@ export type FloorplanActionMenuHandler = (event: ReactMouseEvent<HTMLButtonEleme
 export type FloorplanActionMenuEntry = {
   position: SvgPoint | null
   onDelete: FloorplanActionMenuHandler
-  onMove: FloorplanActionMenuHandler
+  onMove?: FloorplanActionMenuHandler
   onAddHole?: FloorplanActionMenuHandler
+  onCurve?: FloorplanActionMenuHandler
   onDuplicate?: FloorplanActionMenuHandler
 }
 
 type FloorplanActionMenuLayerProps = {
+  elevator: FloorplanActionMenuEntry
   item: FloorplanActionMenuEntry
   wall: FloorplanActionMenuEntry
   fence: FloorplanActionMenuEntry
@@ -33,6 +40,7 @@ type FloorplanActionMenuLayerProps = {
 }
 
 export const FloorplanActionMenuLayer = memo(function FloorplanActionMenuLayer({
+  elevator,
   item,
   wall,
   fence,
@@ -45,16 +53,16 @@ export const FloorplanActionMenuLayer = memo(function FloorplanActionMenuLayer({
   offsetY = 10,
 }: FloorplanActionMenuLayerProps) {
   const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
-  const movingNode = useEditor((state) => state.movingNode)
-  const movingFenceEndpoint = useEditor((state) => state.movingFenceEndpoint)
-  const curvingWall = useEditor((state) => state.curvingWall)
-  const curvingFence = useEditor((state) => state.curvingFence)
+  const movingNode = useMovingNode()
+  const endpointReshape = useEndpointReshape()
+  const isCurveReshape = useIsCurveReshape()
 
-  if (!isFloorplanHovered || movingNode || movingFenceEndpoint || curvingWall || curvingFence) {
+  if (!isFloorplanHovered || movingNode || endpointReshape || isCurveReshape) {
     return null
   }
 
   const entries: FloorplanActionMenuEntry[] = [
+    elevator,
     item,
     wall,
     fence,
@@ -81,6 +89,7 @@ export const FloorplanActionMenuLayer = memo(function FloorplanActionMenuLayer({
           >
             <NodeActionMenu
               onAddHole={entry.onAddHole}
+              onCurve={entry.onCurve}
               onDelete={entry.onDelete}
               onDuplicate={entry.onDuplicate}
               onMove={entry.onMove}

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

@@ -0,0 +1,142 @@
+'use client'
+
+import { useViewer } from '@pascal-app/viewer'
+import { memo } from 'react'
+import useAlignmentGuides from '../../store/use-alignment-guides'
+import { formatMeasurement } from '../editor/measurement-pill'
+import { useFloorplanRender } from './floorplan-render-context'
+
+/**
+ * Figma-style alignment guides for the 2D floor plan.
+ *
+ * Subscribes to the editor-local `useAlignmentGuides` store (separate
+ * from the core store the 3D layer reads). Guides come in
+ * building-local meters, so the layer is mounted INSIDE the rotated
+ * `<g data-floorplan-scene>` — the SVG transform that takes the rest
+ * of the floor-plan geometry from local → screen carries the guide
+ * lines too. Pill labels are counter-rotated by `sceneRotationDeg`
+ * (from `FloorplanRenderProvider`) so they stay upright even when the
+ * scene `<g>` is rotated by building rotation.
+ *
+ * Each guide renders as a red line between the moving and matched
+ * candidate anchors with small `×` end-caps. A distance pill is drawn
+ * at the midpoint when the perpendicular gap is non-zero.
+ *
+ * Stroke widths and handle radii are scaled by `unitsPerPixel` so they
+ * stay a constant size on screen no matter the zoom.
+ */
+export const FloorplanAlignmentGuideLayer = memo(function FloorplanAlignmentGuideLayer() {
+  const guides = useAlignmentGuides((s) => s.guides)
+  const unit = useViewer((s) => s.unit)
+  const ctx = useFloorplanRender()
+
+  if (guides.length === 0) return null
+
+  const upp = ctx?.unitsPerPixel ?? 0.01
+  const sceneRot = ctx?.sceneRotationDeg ?? 0
+
+  // Pixel-budgeted sizes converted to world meters so visuals stay
+  // constant across zoom. Numbers picked to mirror Figma's snap chrome.
+  const stroke = 1 * upp
+  const xCapSize = 4 * upp
+  const pillFontSize = 11 * upp
+  const pillPadX = 5 * upp
+  const pillPadY = 3 * upp
+  const pillRadius = 3 * upp
+  const pillOffset = 8 * upp
+
+  const color = '#ef4444' // tailwind red-500 — matches Figma's snap red
+
+  return (
+    <g pointerEvents="none">
+      {guides.map((guide, i) => {
+        const { from, to, axis } = guide
+        const midX = (from.x + to.x) / 2
+        const midZ = (from.z + to.z) / 2
+        const distMeters = guide.distance
+
+        // Pill placed offset perpendicular to the guide's axis so it
+        // doesn't sit on top of the line itself. For an X-axis guide
+        // (vertical line) we offset along Z; for a Z-axis guide we
+        // offset along X.
+        const pillX = axis === 'x' ? midX + pillOffset : midX
+        const pillZ = axis === 'z' ? midZ + pillOffset : midZ
+        const distLabel = formatMeasurement(distMeters, unit)
+        const charWidth = pillFontSize * 0.55
+        const pillWidth = distLabel.length * charWidth + pillPadX * 2
+        const pillHeight = pillFontSize + pillPadY * 2
+
+        return (
+          <g key={i}>
+            <line stroke={color} strokeWidth={stroke} x1={from.x} x2={to.x} y1={from.z} y2={to.z} />
+            <XCap color={color} size={xCapSize} stroke={stroke} x={from.x} y={from.z} />
+            <XCap color={color} size={xCapSize} stroke={stroke} x={to.x} y={to.z} />
+            {distMeters > 1e-4 && (
+              // Counter-rotate the pill so it stays upright when the
+              // scene `<g>` is rotated by building rotation. SVG's
+              // `transform` runs in the local coord system, so the
+              // rotation pivots around the pill's center.
+              <g transform={`rotate(${-sceneRot} ${pillX} ${pillZ})`}>
+                <rect
+                  fill={color}
+                  height={pillHeight}
+                  rx={pillRadius}
+                  ry={pillRadius}
+                  width={pillWidth}
+                  x={pillX - pillWidth / 2}
+                  y={pillZ - pillHeight / 2}
+                />
+                <text
+                  fill="#ffffff"
+                  fontFamily="-apple-system, system-ui, sans-serif"
+                  fontSize={pillFontSize}
+                  fontWeight={500}
+                  textAnchor="middle"
+                  x={pillX}
+                  y={pillZ + pillFontSize * 0.35}
+                >
+                  {distLabel}
+                </text>
+              </g>
+            )}
+          </g>
+        )
+      })}
+    </g>
+  )
+})
+
+function XCap({
+  color,
+  size,
+  stroke,
+  x,
+  y,
+}: {
+  color: string
+  size: number
+  stroke: number
+  x: number
+  y: number
+}) {
+  return (
+    <g>
+      <line
+        stroke={color}
+        strokeWidth={stroke}
+        x1={x - size}
+        x2={x + size}
+        y1={y - size}
+        y2={y + size}
+      />
+      <line
+        stroke={color}
+        strokeWidth={stroke}
+        x1={x - size}
+        x2={x + size}
+        y1={y + size}
+        y2={y - size}
+      />
+    </g>
+  )
+}