Fix curved wall and fence angle measurements

packages/editor/src/components/editor/wall-measurement-label.tsx

@@ -4,10 +4,12 @@ import {
   type AnyNodeId,
   calculateLevelMiters,
   DEFAULT_WALL_HEIGHT,
+  getScaledDimensions,
   getWallCurveLength,
   getWallMiterBoundaryPoints,
   getWallPlanFootprint,
   getWallSurfacePolygon,
+  type ItemNode,
   isCurvedWall,
   type Point2D,
   pointToKey,
@@ -27,6 +29,8 @@ const GUIDE_Y_OFFSET = 0.08
 const LABEL_LIFT = 0.08
 const BAR_THICKNESS = 0.012
 const LINE_OPACITY = 0.95
+const HEIGHT_TICK_HALF_LENGTH = 0.14
+const HEIGHT_GUIDE_OUTSIDE_OFFSET = 0.16
 
 const BAR_AXIS = new THREE.Vector3(0, 1, 0)
 
@@ -39,6 +43,18 @@ type MeasurementGuide = {
   extEndStart: Vec3
   extEndEnd: Vec3
   labelPosition: Vec3
+  heightStart: Vec3
+  heightEnd: Vec3
+  heightBottomTickStart: Vec3
+  heightBottomTickEnd: Vec3
+  heightTopTickStart: Vec3
+  heightTopTickEnd: Vec3
+  heightLabelPosition: Vec3
+}
+
+type WallFaceLine = {
+  start: Point2D
+  end: Point2D
 }
 
 function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
@@ -57,28 +73,28 @@ export function WallMeasurementLabel() {
   const nodes = useScene((state) => state.nodes)
 
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
-  const selectedNode = selectedId ? nodes[selectedId as WallNode['id']] : null
+  const selectedNode = selectedId ? nodes[selectedId as AnyNodeId] : null
-  const wall = selectedNode?.type === 'wall' ? selectedNode : null
+  const measurableNode =
+    selectedNode?.type === 'wall' || selectedNode?.type === 'item' ? selectedNode : null
 
-  const [wallObjectState, setWallObjectState] = useState<{
+  const [objectState, setObjectState] = useState<{
-    id: WallNode['id']
+    id: AnyNodeId
     object: THREE.Object3D
   } | null>(null)
-  const wallObject =
+  const selectedObject = selectedId && objectState?.id === selectedId ? objectState.object : null
-    selectedId && wallObjectState?.id === selectedId ? wallObjectState.object : null
 
   useFrame(() => {
-    if (!selectedId || wallObject) return
+    if (!selectedId || selectedObject) return
 
-    const nextWallObject = sceneRegistry.nodes.get(selectedId)
+    const nextObject = sceneRegistry.nodes.get(selectedId)
-    if (nextWallObject) {
+    if (nextObject) {
-      setWallObjectState({ id: selectedId as WallNode['id'], object: nextWallObject })
+      setObjectState({ id: selectedId as AnyNodeId, object: nextObject })
     }
   })
 
-  if (!(wall && wallObject)) return null
+  if (!(measurableNode && selectedObject)) return null
 
-  return createPortal(<WallMeasurementAnnotation wall={wall} />, wallObject)
+  return createPortal(<SelectedMeasurementAnnotation node={measurableNode} />, selectedObject)
 }
 
 function getLevelWalls(
@@ -97,6 +113,114 @@ function getLevelWalls(
     .filter((node): node is WallNode => Boolean(node && node.type === 'wall'))
 }
 
+function pointMatchesWallPlanPoint(point: Point2D | undefined, planPoint: [number, number]) {
+  if (!point) return false
+
+  return Math.abs(point.x - planPoint[0]) < 1e-6 && Math.abs(point.y - planPoint[1]) < 1e-6
+}
+
+function getWallFaceLines(
+  wall: WallNode,
+  miterData: WallMiterData,
+): { left: WallFaceLine; right: WallFaceLine } | null {
+  if (isCurvedWall(wall)) return null
+
+  const footprint = getWallPlanFootprint(wall, miterData)
+  if (footprint.length < 4) return null
+
+  const startRight = footprint[0]
+  const endRight = footprint[1]
+  const hasEndCenterPoint = pointMatchesWallPlanPoint(footprint[2], wall.end)
+  const endLeft = footprint[hasEndCenterPoint ? 3 : 2]
+  const lastPoint = footprint[footprint.length - 1]
+  const hasStartCenterPoint = pointMatchesWallPlanPoint(lastPoint, wall.start)
+  const startLeft = footprint[hasStartCenterPoint ? footprint.length - 2 : footprint.length - 1]
+
+  if (!(startRight && endRight && endLeft && startLeft)) return null
+
+  return {
+    left: {
+      start: startLeft,
+      end: endLeft,
+    },
+    right: {
+      start: startRight,
+      end: endRight,
+    },
+  }
+}
+
+function getLineMidpoint(line: WallFaceLine): Point2D {
+  return {
+    x: (line.start.x + line.end.x) / 2,
+    y: (line.start.y + line.end.y) / 2,
+  }
+}
+
+function getLevelWallsCenter(levelWalls: WallNode[]): Point2D {
+  let minX = Number.POSITIVE_INFINITY
+  let maxX = Number.NEGATIVE_INFINITY
+  let minY = Number.POSITIVE_INFINITY
+  let maxY = Number.NEGATIVE_INFINITY
+
+  for (const candidateWall of levelWalls) {
+    minX = Math.min(minX, candidateWall.start[0], candidateWall.end[0])
+    maxX = Math.max(maxX, candidateWall.start[0], candidateWall.end[0])
+    minY = Math.min(minY, candidateWall.start[1], candidateWall.end[1])
+    maxY = Math.max(maxY, candidateWall.start[1], candidateWall.end[1])
+  }
+
+  return {
+    x: minX === Number.POSITIVE_INFINITY ? 0 : (minX + maxX) / 2,
+    y: minY === Number.POSITIVE_INFINITY ? 0 : (minY + maxY) / 2,
+  }
+}
+
+function getWallOuterFaceLine(
+  wall: WallNode,
+  miterData: WallMiterData,
+  levelWalls: WallNode[],
+): WallFaceLine | null {
+  const faceLines = getWallFaceLines(wall, miterData)
+  if (!faceLines) return null
+
+  if (wall.frontSide === 'exterior' && wall.backSide !== 'exterior') {
+    return faceLines.left
+  }
+
+  if (wall.backSide === 'exterior' && wall.frontSide !== 'exterior') {
+    return faceLines.right
+  }
+
+  const dx = wall.end[0] - wall.start[0]
+  const dy = wall.end[1] - wall.start[1]
+  const length = Math.hypot(dx, dy)
+  if (length < 1e-6) return null
+
+  const wallMidpoint = {
+    x: (wall.start[0] + wall.end[0]) / 2,
+    y: (wall.start[1] + wall.end[1]) / 2,
+  }
+  const levelCenter = getLevelWallsCenter(levelWalls)
+  const normal = { x: -dy / length, y: dx / length }
+  const fromCenter = {
+    x: wallMidpoint.x - levelCenter.x,
+    y: wallMidpoint.y - levelCenter.y,
+  }
+  const outwardNormal =
+    fromCenter.x * normal.x + fromCenter.y * normal.y >= 0 ? normal : { x: -normal.x, y: -normal.y }
+  const rightMidpoint = getLineMidpoint(faceLines.right)
+  const leftMidpoint = getLineMidpoint(faceLines.left)
+  const rightScore =
+    (rightMidpoint.x - wallMidpoint.x) * outwardNormal.x +
+    (rightMidpoint.y - wallMidpoint.y) * outwardNormal.y
+  const leftScore =
+    (leftMidpoint.x - wallMidpoint.x) * outwardNormal.x +
+    (leftMidpoint.y - wallMidpoint.y) * outwardNormal.y
+
+  return rightScore >= leftScore ? faceLines.right : faceLines.left
+}
+
 function getWallMiddlePoints(
   wall: WallNode,
   miterData: WallMiterData,
@@ -136,7 +260,10 @@ function worldPointToWallLocal(wall: WallNode, point: Point2D): Vec3 {
   return [dx * cosA - dz * sinA, 0, dx * sinA + dz * cosA]
 }
 
-function getWallExteriorOffsetSign(wall: Pick<WallNode, 'frontSide' | 'backSide'>) {
+function getWallExteriorOffsetSign(
+  wall: Pick<WallNode, 'start' | 'end' | 'frontSide' | 'backSide'>,
+  levelWalls: WallNode[],
+) {
   if (wall.frontSide === 'exterior' && wall.backSide !== 'exterior') {
     return 1
   }
@@ -145,10 +272,31 @@ function getWallExteriorOffsetSign(wall: Pick<WallNode, 'frontSide' | 'backSide'
     return -1
   }
 
-  return 1
+  const dx = wall.end[0] - wall.start[0]
+  const dy = wall.end[1] - wall.start[1]
+  const length = Math.hypot(dx, dy)
+
+  if (length < 1e-6) return 1
+
+  const wallMidpoint = {
+    x: (wall.start[0] + wall.end[0]) / 2,
+    y: (wall.start[1] + wall.end[1]) / 2,
+  }
+  const levelCenter = getLevelWallsCenter(levelWalls)
+  const normal = { x: -dy / length, y: dx / length }
+  const fromCenter = {
+    x: wallMidpoint.x - levelCenter.x,
+    y: wallMidpoint.y - levelCenter.y,
   }
 
-function getCurvedWallMeasurementPath(wall: WallNode, miterData: WallMiterData): Point2D[] | null {
+  return fromCenter.x * normal.x + fromCenter.y * normal.y >= 0 ? 1 : -1
+}
+
+function getCurvedWallMeasurementPath(
+  wall: WallNode,
+  miterData: WallMiterData,
+  levelWalls: WallNode[],
+): Point2D[] | null {
   const boundaryPoints = getWallMiterBoundaryPoints(wall, miterData)
   if (!boundaryPoints) return null
 
@@ -156,7 +304,7 @@ function getCurvedWallMeasurementPath(wall: WallNode, miterData: WallMiterData):
   const sidePointCount = 25
   if (surface.length < sidePointCount * 2) return null
 
-  const offsetSign = getWallExteriorOffsetSign(wall)
+  const offsetSign = getWallExteriorOffsetSign(wall, levelWalls)
   if (offsetSign >= 0) {
     return surface.slice(sidePointCount).reverse()
   }
@@ -170,14 +318,16 @@ function buildMeasurementGuide(
 ): MeasurementGuide | null {
   const levelWalls = getLevelWalls(wall, nodes)
   const miterData = calculateLevelMiters(levelWalls)
-  const middlePoints = getWallMiddlePoints(wall, miterData)
+  const measurementLine = getWallOuterFaceLine(wall, miterData, levelWalls)
-  if (!middlePoints) return null
+  const fallbackMiddlePoints = measurementLine ? null : getWallMiddlePoints(wall, miterData)
+  const measurementPoints = measurementLine ?? fallbackMiddlePoints
+  if (!measurementPoints) return null
 
   const height = wall.height ?? DEFAULT_WALL_HEIGHT
-  const startLocal = worldPointToWallLocal(wall, middlePoints.start)
+  const startLocal = worldPointToWallLocal(wall, measurementPoints.start)
-  const endLocal = worldPointToWallLocal(wall, middlePoints.end)
+  const endLocal = worldPointToWallLocal(wall, measurementPoints.end)
   const curvedMeasurementPath = isCurvedWall(wall)
-    ? getCurvedWallMeasurementPath(wall, miterData)
+    ? getCurvedWallMeasurementPath(wall, miterData, levelWalls)
     : null
   const guidePath: Vec3[] = curvedMeasurementPath
     ? curvedMeasurementPath.map((point) => {
@@ -224,6 +374,38 @@ function buildMeasurementGuide(
         guideStart[1],
         (guideStart[2] + guideEnd[2]) / 2,
       ] as Vec3)
+  const rawHeightGuidePosition = [guideEnd[0], 0, guideEnd[2]] as Vec3
+  const beforeGuideEnd = guidePath[guidePath.length - 2] ?? guideStart
+  const tickDx = guideEnd[0] - beforeGuideEnd[0]
+  const tickDz = guideEnd[2] - beforeGuideEnd[2]
+  const tickLength = Math.hypot(tickDx, tickDz)
+  const tangentX = tickLength > 1e-6 ? tickDx / tickLength : 1
+  const tangentZ = tickLength > 1e-6 ? tickDz / tickLength : 0
+  const tickUnitX = -tangentZ
+  const tickUnitZ = tangentX
+  const wallEndLocal = worldPointToWallLocal(wall, { x: wall.end[0], y: wall.end[1] })
+  const endOutwardX = rawHeightGuidePosition[0] - wallEndLocal[0]
+  const endOutwardZ = rawHeightGuidePosition[2] - wallEndLocal[2]
+  const outsideSign = endOutwardX * tickUnitX + endOutwardZ * tickUnitZ >= 0 ? 1 : -1
+  const heightGuidePosition = [
+    rawHeightGuidePosition[0] + tickUnitX * outsideSign * HEIGHT_GUIDE_OUTSIDE_OFFSET,
+    0,
+    rawHeightGuidePosition[2] + tickUnitZ * outsideSign * HEIGHT_GUIDE_OUTSIDE_OFFSET,
+  ] as Vec3
+  const getHorizontalHeightTick = (y: number): { start: Vec3; end: Vec3 } => ({
+    start: [
+      heightGuidePosition[0] - tickUnitX * HEIGHT_TICK_HALF_LENGTH,
+      y,
+      heightGuidePosition[2] - tickUnitZ * HEIGHT_TICK_HALF_LENGTH,
+    ],
+    end: [
+      heightGuidePosition[0] + tickUnitX * HEIGHT_TICK_HALF_LENGTH,
+      y,
+      heightGuidePosition[2] + tickUnitZ * HEIGHT_TICK_HALF_LENGTH,
+    ],
+  })
+  const bottomHeightTick = getHorizontalHeightTick(0)
+  const topHeightTick = getHorizontalHeightTick(height)
 
   return {
     guidePath,
@@ -236,6 +418,37 @@ function buildMeasurementGuide(
     extEndStart: [extensionEndBase[0], height, extensionEndBase[2]],
     extEndEnd: [extensionEndBase[0], height + GUIDE_Y_OFFSET + extOvershoot, extensionEndBase[2]],
     labelPosition: [midpoint[0], midpoint[1] + LABEL_LIFT, midpoint[2]],
+    heightStart: [heightGuidePosition[0], 0, heightGuidePosition[2]],
+    heightEnd: [heightGuidePosition[0], height, heightGuidePosition[2]],
+    heightBottomTickStart: bottomHeightTick.start,
+    heightBottomTickEnd: bottomHeightTick.end,
+    heightTopTickStart: topHeightTick.start,
+    heightTopTickEnd: topHeightTick.end,
+    heightLabelPosition: [heightGuidePosition[0], height / 2, heightGuidePosition[2]],
+  }
+}
+
+type HeightGuide = {
+  start: Vec3
+  end: Vec3
+  labelPosition: Vec3
+}
+
+function buildItemHeightGuide(item: ItemNode): { guide: HeightGuide; height: number } | null {
+  const [width, height, depth] = getScaledDimensions(item)
+
+  if (!Number.isFinite(height) || height < 0.01) return null
+
+  const x = Number.isFinite(width) ? width / 2 + 0.18 : 0.18
+  const z = Number.isFinite(depth) ? depth / 2 + 0.18 : 0.18
+
+  return {
+    height,
+    guide: {
+      start: [x, 0, z],
+      end: [x, height, z],
+      labelPosition: [x, height / 2, z],
+    },
   }
 }
 
@@ -286,6 +499,45 @@ function MeasurementPath({ path, color }: { path: Vec3[]; color: string }) {
   )
 }
 
+function MeasurementLabel({
+  label,
+  position,
+  color,
+  shadowColor,
+}: {
+  label: string
+  position: Vec3
+  color: string
+  shadowColor: string
+}) {
+  return (
+    <Html
+      center
+      position={position}
+      style={{ pointerEvents: 'none', userSelect: 'none' }}
+      zIndexRange={[20, 0]}
+    >
+      <div
+        className="whitespace-nowrap font-bold font-mono text-[15px]"
+        style={{
+          color,
+          textShadow: `-1.5px -1.5px 0 ${shadowColor}, 1.5px -1.5px 0 ${shadowColor}, -1.5px 1.5px 0 ${shadowColor}, 1.5px 1.5px 0 ${shadowColor}, 0 0 4px ${shadowColor}, 0 0 4px ${shadowColor}`,
+        }}
+      >
+        {label}
+      </div>
+    </Html>
+  )
+}
+
+function SelectedMeasurementAnnotation({ node }: { node: WallNode | ItemNode }) {
+  if (node.type === 'wall') {
+    return <WallMeasurementAnnotation wall={node} />
+  }
+
+  return <ItemHeightMeasurementAnnotation item={node} />
+}
+
 function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
   const nodes = useScene((state) => state.nodes)
   const theme = useViewer((state) => state.theme)
@@ -316,6 +568,7 @@ function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
     return total
   }, [guide, wall])
   const label = formatMeasurement(length, unit)
+  const heightLabel = `H ${formatMeasurement(wall.height ?? DEFAULT_WALL_HEIGHT, unit)}`
 
   if (!(guide && Number.isFinite(length) && length >= 0.01)) return null
 
@@ -324,23 +577,50 @@ function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
       <MeasurementPath color={color} path={guide.guidePath} />
       <MeasurementBar color={color} end={guide.extStartEnd} start={guide.extStartStart} />
       <MeasurementBar color={color} end={guide.extEndEnd} start={guide.extEndStart} />
+      <MeasurementBar color={color} end={guide.heightEnd} start={guide.heightStart} />
+      <MeasurementBar
+        color={color}
+        end={guide.heightBottomTickEnd}
+        start={guide.heightBottomTickStart}
+      />
+      <MeasurementBar color={color} end={guide.heightTopTickEnd} start={guide.heightTopTickStart} />
 
-      <Html
+      <MeasurementLabel
-        center
+        color={color}
+        label={label}
         position={guide.labelPosition}
-        style={{ pointerEvents: 'none', userSelect: 'none' }}
+        shadowColor={shadowColor}
-        zIndexRange={[20, 0]}
+      />
-      >
+      <MeasurementLabel
-        <div
+        color={color}
-          className="whitespace-nowrap font-bold font-mono text-[15px]"
+        label={heightLabel}
-          style={{
+        position={guide.heightLabelPosition}
-            color,
+        shadowColor={shadowColor}
-            textShadow: `-1.5px -1.5px 0 ${shadowColor}, 1.5px -1.5px 0 ${shadowColor}, -1.5px 1.5px 0 ${shadowColor}, 1.5px 1.5px 0 ${shadowColor}, 0 0 4px ${shadowColor}, 0 0 4px ${shadowColor}`,
+      />
-          }}
+    </group>
-        >
+  )
-          {label}
+}
-        </div>
+
-      </Html>
+function ItemHeightMeasurementAnnotation({ item }: { item: ItemNode }) {
+  const theme = useViewer((state) => state.theme)
+  const unit = useViewer((state) => state.unit)
+  const isNight = theme === 'dark'
+  const color = isNight ? '#ffffff' : '#111111'
+  const shadowColor = isNight ? '#111111' : '#ffffff'
+
+  const measurement = useMemo(() => buildItemHeightGuide(item), [item])
+
+  if (!measurement) return null
+
+  return (
+    <group>
+      <MeasurementBar color={color} end={measurement.guide.end} start={measurement.guide.start} />
+      <MeasurementLabel
+        color={color}
+        label={`H ${formatMeasurement(measurement.height, unit)}`}
+        position={measurement.guide.labelPosition}
+        shadowColor={shadowColor}
+      />
     </group>
   )
 }

packages/editor/src/components/tools/fence/fence-drafting.ts

@@ -1,14 +1,21 @@
-import { FenceNode, getWallCurveFrameAt, getWallCurveLength, isCurvedWall, useScene, type WallNode } from '@pascal-app/core'
+import {
+  FenceNode,
+  getWallCurveFrameAt,
+  getWallCurveLength,
+  isCurvedWall,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import {
+  findWallSnapTarget,
   getWallAngleSnapStep,
   getWallGridStep,
-  type WallPlanPoint,
-  findWallSnapTarget,
   isWallLongEnough,
   snapPointTo45Degrees,
   snapPointToGrid,
+  type WallPlanPoint,
 } from '../wall/wall-drafting'
 
 export type FencePlanPoint = WallPlanPoint

packages/editor/src/components/tools/fence/fence-tool.tsx

@@ -7,19 +7,129 @@ import {
   type WallNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useRef } from 'react'
+import { Html } from '@react-three/drei'
+import { useEffect, useRef, useState } from 'react'
 import { DoubleSide, type Group, type Mesh, Shape, ShapeGeometry, Vector3 } from 'three'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { CursorSphere } from '../shared/cursor-sphere'
+import {
+  formatAngleRadians,
+  getAngleToSegmentReference,
+  getSegmentAngleReferenceAtPoint,
+} from '../shared/segment-angle'
 import {
   createFenceOnCurrentLevel,
-  snapFenceDraftPoint,
   type FencePlanPoint,
+  snapFenceDraftPoint,
 } from './fence-drafting'
 
 const FENCE_PREVIEW_HEIGHT = 1.8
+const DRAFT_LABEL_Y = FENCE_PREVIEW_HEIGHT + 0.22
+const DRAFT_ANGLE_LABEL_Y = 0.28
+
+type DraftAngleLabel = {
+  id: string
+  label: string
+  position: [number, number, number]
+}
+
+type DraftMeasurementState = {
+  lengthLabel: string
+  lengthPosition: [number, number, number]
+  angleLabels: DraftAngleLabel[]
+} | null
+
+type SegmentLike = {
+  id: string
+  start: FencePlanPoint
+  end: FencePlanPoint
+  curveOffset?: number
+}
+
+function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
+  if (unit === 'imperial') {
+    const feet = value * 3.280_84
+    const wholeFeet = Math.floor(feet)
+    const inches = Math.round((feet - wholeFeet) * 12)
+    if (inches === 12) return `${wholeFeet + 1}'0"`
+    return `${wholeFeet}'${inches}"`
+  }
+
+  return `${Number.parseFloat(value.toFixed(2))}m`
+}
+
+function getDraftAngleLabels(
+  start: FencePlanPoint,
+  end: FencePlanPoint,
+  segments: SegmentLike[],
+): DraftAngleLabel[] {
+  const draftFromStart: FencePlanPoint = [end[0] - start[0], end[1] - start[1]]
+  const draftFromEnd: FencePlanPoint = [start[0] - end[0], start[1] - end[1]]
+  const endpoints = [
+    { id: 'start', point: start, draftVector: draftFromStart },
+    { id: 'end', point: end, draftVector: draftFromEnd },
+  ]
+  const labels: DraftAngleLabel[] = []
+
+  for (const endpoint of endpoints) {
+    const connectedSegment = segments.find((segment) =>
+      Boolean(getSegmentAngleReferenceAtPoint(endpoint.point, segment)),
+    )
+    if (!connectedSegment) continue
+
+    const connectedReference = getSegmentAngleReferenceAtPoint(endpoint.point, connectedSegment)
+    if (!connectedReference) continue
+
+    const angle = getAngleToSegmentReference(endpoint.draftVector, connectedReference)
+    if (angle === null) continue
+
+    labels.push({
+      id: endpoint.id,
+      label: formatAngleRadians(angle),
+      position: [endpoint.point[0], DRAFT_ANGLE_LABEL_Y, endpoint.point[1]],
+    })
+  }
+
+  return labels
+}
+
+function getDraftMeasurementState(
+  start: FencePlanPoint,
+  end: FencePlanPoint,
+  segments: SegmentLike[],
+  unit: 'metric' | 'imperial',
+): DraftMeasurementState {
+  const dx = end[0] - start[0]
+  const dz = end[1] - start[1]
+  const length = Math.hypot(dx, dz)
+
+  if (length < 0.01) return null
+
+  return {
+    lengthLabel: formatMeasurement(length, unit),
+    lengthPosition: [(start[0] + end[0]) / 2, DRAFT_LABEL_Y, (start[1] + end[1]) / 2],
+    angleLabels: getDraftAngleLabels(start, end, segments),
+  }
+}
+
+function getReferenceSegments(walls: WallNode[], fences: FenceNode[]): SegmentLike[] {
+  return [
+    ...walls.map((wall) => ({
+      id: wall.id,
+      start: wall.start,
+      end: wall.end,
+      curveOffset: wall.curveOffset,
+    })),
+    ...fences.map((fence) => ({
+      id: fence.id,
+      start: fence.start,
+      end: fence.end,
+      curveOffset: fence.curveOffset,
+    })),
+  ]
+}
 
 const updateFencePreview = (mesh: Mesh, start: Vector3, end: Vector3) => {
   const direction = new Vector3(end.x - start.x, 0, end.z - start.z)
@@ -70,12 +180,14 @@ const getCurrentLevelElements = (): { walls: WallNode[]; fences: FenceNode[] } =
 }
 
 export const FenceTool: React.FC = () => {
+  const unit = useViewer((state) => state.unit)
   const cursorRef = useRef<Group>(null)
   const previewRef = useRef<Mesh>(null!)
   const startingPoint = useRef(new Vector3(0, 0, 0))
   const endingPoint = useRef(new Vector3(0, 0, 0))
   const buildingState = useRef(0)
   const shiftPressed = useRef(false)
+  const [draftMeasurement, setDraftMeasurement] = useState<DraftMeasurementState>(null)
 
   useEffect(() => {
     let previousFenceEnd: [number, number] | null = null
@@ -107,9 +219,18 @@ export const FenceTool: React.FC = () => {
         previousFenceEnd = currentFenceEnd
 
         updateFencePreview(previewRef.current, startingPoint.current, endingPoint.current)
+        setDraftMeasurement(
+          getDraftMeasurementState(
+            [startingPoint.current.x, startingPoint.current.z],
+            snappedLocal,
+            getReferenceSegments(walls, fences),
+            unit,
+          ),
+        )
       } else {
         const snappedPoint = snapFenceDraftPoint({ point: localPoint, walls, fences })
         cursorRef.current.position.set(snappedPoint[0], event.localPosition[1], snappedPoint[1])
+        setDraftMeasurement(null)
       }
     }
 
@@ -123,6 +244,7 @@ export const FenceTool: React.FC = () => {
         endingPoint.current.copy(startingPoint.current)
         buildingState.current = 1
         previewRef.current.visible = true
+        setDraftMeasurement(null)
       } else {
         const snappedEnd = snapFenceDraftPoint({
           point: localClick,
@@ -137,6 +259,7 @@ export const FenceTool: React.FC = () => {
         createFenceOnCurrentLevel([startingPoint.current.x, startingPoint.current.z], snappedEnd)
         previewRef.current.visible = false
         buildingState.current = 0
+        setDraftMeasurement(null)
       }
     }
 
@@ -153,6 +276,7 @@ export const FenceTool: React.FC = () => {
         markToolCancelConsumed()
         buildingState.current = 0
         previewRef.current.visible = false
+        setDraftMeasurement(null)
       }
     }
 
@@ -169,7 +293,7 @@ export const FenceTool: React.FC = () => {
       window.removeEventListener('keydown', onKeyDown)
       window.removeEventListener('keyup', onKeyUp)
     }
-  }, [])
+  }, [unit])
 
   return (
     <group>
@@ -185,6 +309,38 @@ export const FenceTool: React.FC = () => {
           transparent
         />
       </mesh>
+
+      {draftMeasurement && (
+        <>
+          <DraftMeasurementLabel
+            label={draftMeasurement.lengthLabel}
+            position={draftMeasurement.lengthPosition}
+          />
+          {draftMeasurement.angleLabels.map((angleLabel) => (
+            <DraftMeasurementLabel
+              key={angleLabel.id}
+              label={angleLabel.label}
+              position={angleLabel.position}
+            />
+          ))}
+        </>
+      )}
     </group>
   )
 }
+
+function DraftMeasurementLabel({
+  label,
+  position,
+}: {
+  label: string
+  position: [number, number, number]
+}) {
+  return (
+    <Html center position={position} style={{ pointerEvents: 'none' }} zIndexRange={[100, 0]}>
+      <div className="whitespace-nowrap rounded-full border border-border bg-background/95 px-2 py-1 font-mono text-[11px] font-semibold text-foreground shadow-lg backdrop-blur-md">
+        {label}
+      </div>
+    </Html>
+  )
+}

packages/editor/src/components/tools/fence/move-fence-endpoint-tool.tsx

@@ -2,32 +2,113 @@
 
 import {
   type AnyNodeId,
-  type FenceNode,
-  type WallNode,
   emitter,
+  type FenceNode,
   type GridEvent,
   pauseSceneHistory,
   resumeSceneHistory,
   useScene,
+  type WallNode,
 } from '@pascal-app/core'
-import { Html } from '@react-three/drei'
 import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor, { type MovingFenceEndpoint } from '../../../store/use-editor'
 import { CursorSphere } from '../shared/cursor-sphere'
-import { snapFenceDraftPoint, type FencePlanPoint } from './fence-drafting'
+import {
+  formatAngleRadians,
+  getAngleToSegmentReference,
+  getSegmentAngleReferenceAtPoint,
+} from '../shared/segment-angle'
 import { isWallLongEnough } from '../wall/wall-drafting'
+import { type FencePlanPoint, snapFenceDraftPoint } from './fence-drafting'
 
 function samePoint(a: FencePlanPoint, b: FencePlanPoint) {
   return a[0] === b[0] && a[1] === b[1]
 }
 
+type SegmentLike = {
+  id: string
+  start: FencePlanPoint
+  end: FencePlanPoint
+  curveOffset?: number
+}
+
+type AngleLabelState = {
+  label: string
+  position: [number, number, number]
+} | null
+
+function getEndpointAngleLabel(args: {
+  preview: { start: FencePlanPoint; end: FencePlanPoint; curveOffset?: number }
+  segments: SegmentLike[]
+  nodeId: FenceNode['id']
+}): AngleLabelState {
+  const { preview, segments, nodeId } = args
+  const endpoints = [
+    {
+      point: preview.start,
+    },
+    {
+      point: preview.end,
+    },
+  ]
+  const targetSegment: SegmentLike = {
+    id: nodeId,
+    start: preview.start,
+    end: preview.end,
+    curveOffset: preview.curveOffset,
+  }
+
+  for (const endpoint of endpoints) {
+    const targetReference = getSegmentAngleReferenceAtPoint(endpoint.point, targetSegment)
+    if (!targetReference) continue
+
+    const connectedSegment = segments.find(
+      (segment) =>
+        segment.id !== nodeId && Boolean(getSegmentAngleReferenceAtPoint(endpoint.point, segment)),
+    )
+    if (!connectedSegment) continue
+
+    const connectedReference = getSegmentAngleReferenceAtPoint(endpoint.point, connectedSegment)
+    if (!connectedReference) continue
+
+    const angle = getAngleToSegmentReference(targetReference.vector, connectedReference)
+    if (angle === null) continue
+
+    return {
+      label: formatAngleRadians(angle),
+      position: [endpoint.point[0], 0.34, endpoint.point[1]],
+    }
+  }
+
+  return null
+}
+
+function getReferenceSegments(walls: WallNode[], fences: FenceNode[]): SegmentLike[] {
+  return [
+    ...walls.map((wall) => ({
+      id: wall.id,
+      start: wall.start,
+      end: wall.end,
+      curveOffset: wall.curveOffset,
+    })),
+    ...fences.map((fence) => ({
+      id: fence.id,
+      start: fence.start,
+      end: fence.end,
+      curveOffset: fence.curveOffset,
+    })),
+  ]
+}
+
 type LinkedFenceSnapshot = {
   id: FenceNode['id']
   start: FencePlanPoint
   end: FencePlanPoint
+  curveOffset?: number
 }
 
 function getLinkedFenceSnapshots(args: {
@@ -62,6 +143,7 @@ function getLinkedFenceSnapshots(args: {
       id: node.id,
       start: [...node.start] as FencePlanPoint,
       end: [...node.end] as FencePlanPoint,
+      curveOffset: node.curveOffset,
     })
   }
 
@@ -77,6 +159,7 @@ function getLinkedFenceUpdates(
 ) {
   return linkedFences.map((fence) => ({
     id: fence.id,
+    curveOffset: fence.curveOffset,
     start: samePoint(fence.start, originalStart)
       ? nextStart
       : samePoint(fence.start, originalEnd)
@@ -112,6 +195,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
     }),
   )
   const previewRef = useRef<{ start: FencePlanPoint; end: FencePlanPoint } | null>(null)
+  const [angleLabel, setAngleLabel] = useState<AngleLabelState>(null)
 
   const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>(() => {
     const point = target.endpoint === 'start' ? target.fence.start : target.fence.end
@@ -158,11 +242,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
     const applyPreview = (movingPoint: FencePlanPoint, detachLinkedFences = false) => {
       const nextStart = target.endpoint === 'start' ? movingPoint : fixedPoint
       const nextEnd = target.endpoint === 'end' ? movingPoint : fixedPoint
-      previewRef.current = { start: nextStart, end: nextEnd }
+      const linkedUpdates = detachLinkedFences
-      setCursorLocalPos([movingPoint[0], 0, movingPoint[1]])
-      applyNodePreview([
-        { id: nodeId, start: nextStart, end: nextEnd },
-        ...(detachLinkedFences
         ? []
         : getLinkedFenceUpdates(
             linkedOriginalsRef.current,
@@ -170,15 +250,27 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
             originalEnd,
             nextStart,
             nextEnd,
-            )),
+          )
-      ])
+      previewRef.current = { start: nextStart, end: nextEnd }
+      setCursorLocalPos([movingPoint[0], 0, movingPoint[1]])
+      setAngleLabel(
+        getEndpointAngleLabel({
+          preview: { start: nextStart, end: nextEnd, curveOffset: target.fence.curveOffset },
+          segments: [...getReferenceSegments(levelWalls, levelFences), ...linkedUpdates],
+          nodeId,
+        }),
+      )
+      applyNodePreview([{ id: nodeId, start: nextStart, end: nextEnd }, ...linkedUpdates])
     }
 
-    const restoreOriginal = () => {
+    const restoreOriginal = (clearAngleLabel = true) => {
       applyNodePreview([
         { id: nodeId, start: originalStart, end: originalEnd },
         ...linkedOriginalsRef.current,
       ])
+      if (clearAngleLabel) {
+        setAngleLabel(null)
+      }
     }
 
     const onGridMove = (event: GridEvent) => {
@@ -240,6 +332,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
       }
 
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
+      setAngleLabel(null)
       exitMoveMode()
       event.nativeEvent?.stopPropagation?.()
     }
@@ -248,6 +341,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
       restoreOriginal()
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
       resumeSceneHistory(useScene)
+      setAngleLabel(null)
       markToolCancelConsumed()
       exitMoveMode()
     }
@@ -290,7 +384,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
 
     return () => {
       if (!wasCommitted) {
-        restoreOriginal()
+        restoreOriginal(false)
       }
       resumeSceneHistory(useScene)
       emitter.off('grid:move', onGridMove)
@@ -322,6 +416,23 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
           </div>
         </div>
       </Html>
+      {angleLabel && <EndpointAngleLabel label={angleLabel.label} position={angleLabel.position} />}
     </group>
   )
 }
+
+function EndpointAngleLabel({
+  label,
+  position,
+}: {
+  label: string
+  position: [number, number, number]
+}) {
+  return (
+    <Html center position={position} style={{ pointerEvents: 'none' }} zIndexRange={[100, 0]}>
+      <div className="whitespace-nowrap rounded-full border border-border bg-background/95 px-2 py-1 font-mono text-[11px] font-semibold text-foreground shadow-lg backdrop-blur-md">
+        {label}
+      </div>
+    </Html>
+  )
+}

packages/editor/src/components/tools/shared/segment-angle.ts

@@ -0,0 +1,156 @@
+import {
+  type FenceNode,
+  getWallCurveFrameAt,
+  getWallCurveLength,
+  isCurvedWall,
+  type WallNode,
+} from '@pascal-app/core'
+
+export type PlanPoint = [number, number]
+
+export type SegmentAngleLike = Pick<WallNode | FenceNode, 'start' | 'end' | 'curveOffset'>
+
+export type SegmentAngleReference = {
+  vector: PlanPoint
+  orientation: 'directed' | 'axis'
+}
+
+const POINT_MATCH_TOLERANCE = 1e-5
+const SEGMENT_POINT_TOLERANCE = 0.15
+const CURVE_TANGENT_SAMPLE_SPACING = 0.08
+
+function distanceSquared(a: PlanPoint, b: PlanPoint) {
+  const dx = a[0] - b[0]
+  const dz = a[1] - b[1]
+
+  return dx * dx + dz * dz
+}
+
+function pointsMatch(a: PlanPoint, b: PlanPoint, tolerance = POINT_MATCH_TOLERANCE) {
+  return distanceSquared(a, b) <= tolerance * tolerance
+}
+
+function getProjectedPointOnSegment(point: PlanPoint, segment: SegmentAngleLike): PlanPoint | null {
+  const [x1, z1] = segment.start
+  const [x2, z2] = segment.end
+  const dx = x2 - x1
+  const dz = z2 - z1
+  const lengthSquared = dx * dx + dz * dz
+
+  if (lengthSquared < 1e-9) {
+    return null
+  }
+
+  const t = ((point[0] - x1) * dx + (point[1] - z1) * dz) / lengthSquared
+  if (t <= 0 || t >= 1) {
+    return null
+  }
+
+  return [x1 + dx * t, z1 + dz * t]
+}
+
+function getCurveTangentAtPoint(point: PlanPoint, segment: SegmentAngleLike): PlanPoint | null {
+  const curveLength = getWallCurveLength(segment)
+  const sampleCount = Math.max(24, Math.ceil(curveLength / CURVE_TANGENT_SAMPLE_SPACING))
+  let best: { distance: number; tangent: PlanPoint } | null = null
+
+  for (let index = 0; index <= sampleCount; index += 1) {
+    const frame = getWallCurveFrameAt(segment, index / sampleCount)
+    const candidate: PlanPoint = [frame.point.x, frame.point.y]
+    const distance = distanceSquared(point, candidate)
+
+    if (best && distance >= best.distance) {
+      continue
+    }
+
+    best = {
+      distance,
+      tangent: [frame.tangent.x, frame.tangent.y],
+    }
+  }
+
+  if (!best || best.distance > SEGMENT_POINT_TOLERANCE * SEGMENT_POINT_TOLERANCE) {
+    return null
+  }
+
+  return best.tangent
+}
+
+export function formatAngleRadians(angle: number) {
+  return `${Math.round((angle * 180) / Math.PI)}°`
+}
+
+export function getAngleBetweenVectors(first: PlanPoint, second: PlanPoint): number | null {
+  const firstLength = Math.hypot(first[0], first[1])
+  const secondLength = Math.hypot(second[0], second[1])
+
+  if (firstLength < 1e-6 || secondLength < 1e-6) return null
+
+  const dot = first[0] * second[0] + first[1] * second[1]
+  const cosine = Math.min(1, Math.max(-1, dot / (firstLength * secondLength)))
+
+  return Math.acos(cosine)
+}
+
+export function getAngleToSegmentReference(
+  vector: PlanPoint,
+  reference: SegmentAngleReference,
+): number | null {
+  const angle = getAngleBetweenVectors(vector, reference.vector)
+
+  if (angle === null || reference.orientation === 'directed') {
+    return angle
+  }
+
+  const reverseAngle = getAngleBetweenVectors(vector, [-reference.vector[0], -reference.vector[1]])
+
+  if (reverseAngle === null) {
+    return angle
+  }
+
+  return Math.min(angle, reverseAngle)
+}
+
+export function getSegmentAngleReferenceAtPoint(
+  point: PlanPoint,
+  segment: SegmentAngleLike,
+): SegmentAngleReference | null {
+  if (pointsMatch(point, segment.start)) {
+    const frame = getWallCurveFrameAt(segment, 0)
+
+    return {
+      vector: [frame.tangent.x, frame.tangent.y],
+      orientation: 'directed',
+    }
+  }
+
+  if (pointsMatch(point, segment.end)) {
+    const frame = getWallCurveFrameAt(segment, 1)
+
+    return {
+      vector: [-frame.tangent.x, -frame.tangent.y],
+      orientation: 'directed',
+    }
+  }
+
+  if (isCurvedWall(segment)) {
+    const tangent = getCurveTangentAtPoint(point, segment)
+
+    return tangent
+      ? {
+          vector: tangent,
+          orientation: 'axis',
+        }
+      : null
+  }
+
+  const projected = getProjectedPointOnSegment(point, segment)
+  if (!projected || !pointsMatch(point, projected, SEGMENT_POINT_TOLERANCE)) {
+    return null
+  }
+
+  return {
+    vector: [segment.end[0] - segment.start[0], segment.end[1] - segment.start[1]],
+    orientation: 'axis',
+  }
+}

packages/editor/src/components/tools/wall/move-wall-endpoint-tool.tsx

@@ -9,27 +9,87 @@ import {
   useScene,
   type WallNode,
 } from '@pascal-app/core'
-import { Html } from '@react-three/drei'
 import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor, { type MovingWallEndpoint } from '../../../store/use-editor'
 import { CursorSphere } from '../shared/cursor-sphere'
 import {
-  isWallLongEnough,
+  formatAngleRadians,
-  snapWallDraftPoint,
+  getAngleToSegmentReference,
-  type WallPlanPoint,
+  getSegmentAngleReferenceAtPoint,
-} from './wall-drafting'
+} from '../shared/segment-angle'
+import { isWallLongEnough, snapWallDraftPoint, type WallPlanPoint } from './wall-drafting'
 
 function samePoint(a: WallPlanPoint, b: WallPlanPoint) {
   return a[0] === b[0] && a[1] === b[1]
 }
 
+type WallSegmentLike = {
+  id: WallNode['id']
+  start: WallPlanPoint
+  end: WallPlanPoint
+  curveOffset?: number
+}
+
+type AngleLabelState = {
+  label: string
+  position: [number, number, number]
+} | null
+
+function getEndpointAngleLabel(args: {
+  preview: { start: WallPlanPoint; end: WallPlanPoint; curveOffset?: number }
+  walls: WallSegmentLike[]
+  nodeId: WallNode['id']
+}): AngleLabelState {
+  const { preview, walls, nodeId } = args
+  const endpoints = [
+    {
+      point: preview.start,
+    },
+    {
+      point: preview.end,
+    },
+  ]
+  const targetSegment: WallSegmentLike = {
+    id: nodeId,
+    start: preview.start,
+    end: preview.end,
+    curveOffset: preview.curveOffset,
+  }
+
+  for (const endpoint of endpoints) {
+    const targetReference = getSegmentAngleReferenceAtPoint(endpoint.point, targetSegment)
+    if (!targetReference) continue
+
+    const connectedWall = walls.find(
+      (wall) =>
+        wall.id !== nodeId && Boolean(getSegmentAngleReferenceAtPoint(endpoint.point, wall)),
+    )
+    if (!connectedWall) continue
+
+    const connectedReference = getSegmentAngleReferenceAtPoint(endpoint.point, connectedWall)
+    if (!connectedReference) continue
+
+    const angle = getAngleToSegmentReference(targetReference.vector, connectedReference)
+    if (angle === null) continue
+
+    return {
+      label: formatAngleRadians(angle),
+      position: [endpoint.point[0], 0.34, endpoint.point[1]],
+    }
+  }
+
+  return null
+}
+
 type LinkedWallSnapshot = {
   id: WallNode['id']
   start: WallPlanPoint
   end: WallPlanPoint
+  curveOffset?: number
 }
 
 function getLinkedWallSnapshots(args: {
@@ -64,6 +124,7 @@ function getLinkedWallSnapshots(args: {
       id: node.id,
       start: [...node.start] as WallPlanPoint,
       end: [...node.end] as WallPlanPoint,
+      curveOffset: node.curveOffset,
     })
   }
 
@@ -79,6 +140,7 @@ function getLinkedWallUpdates(
 ) {
   return linkedWalls.map((wall) => ({
     id: wall.id,
+    curveOffset: wall.curveOffset,
     start: samePoint(wall.start, originalStart)
       ? nextStart
       : samePoint(wall.start, originalEnd)
@@ -114,6 +176,7 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
     }),
   )
   const previewRef = useRef<{ start: WallPlanPoint; end: WallPlanPoint } | null>(null)
+  const [angleLabel, setAngleLabel] = useState<AngleLabelState>(null)
 
   const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>(() => {
     const point = target.endpoint === 'start' ? target.wall.start : target.wall.end
@@ -155,11 +218,7 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
     const applyPreview = (movingPoint: WallPlanPoint, detachLinkedWalls = false) => {
       const nextStart = target.endpoint === 'start' ? movingPoint : fixedPoint
       const nextEnd = target.endpoint === 'end' ? movingPoint : fixedPoint
-      previewRef.current = { start: nextStart, end: nextEnd }
+      const linkedUpdates = detachLinkedWalls
-      setCursorLocalPos([movingPoint[0], 0, movingPoint[1]])
-      applyNodePreview([
-        { id: nodeId, start: nextStart, end: nextEnd },
-        ...(detachLinkedWalls
         ? []
         : getLinkedWallUpdates(
             linkedOriginalsRef.current,
@@ -167,12 +226,35 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
             originalEnd,
             nextStart,
             nextEnd,
-            )),
+          )
-      ])
+      previewRef.current = { start: nextStart, end: nextEnd }
+      setCursorLocalPos([movingPoint[0], 0, movingPoint[1]])
+      setAngleLabel(
+        getEndpointAngleLabel({
+          preview: { start: nextStart, end: nextEnd, curveOffset: target.wall.curveOffset },
+          walls: [
+            ...levelWalls.map((wall) => ({
+              id: wall.id,
+              start: wall.start,
+              end: wall.end,
+              curveOffset: wall.curveOffset,
+            })),
+            ...linkedUpdates,
+          ],
+          nodeId,
+        }),
+      )
+      applyNodePreview([{ id: nodeId, start: nextStart, end: nextEnd }, ...linkedUpdates])
     }
 
-    const restoreOriginal = () => {
+    const restoreOriginal = (clearAngleLabel = true) => {
-      applyNodePreview([{ id: nodeId, start: originalStart, end: originalEnd }, ...linkedOriginalsRef.current])
+      applyNodePreview([
+        { id: nodeId, start: originalStart, end: originalEnd },
+        ...linkedOriginalsRef.current,
+      ])
+      if (clearAngleLabel) {
+        setAngleLabel(null)
+      }
     }
 
     const onGridMove = (event: GridEvent) => {
@@ -235,6 +317,7 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
       }
 
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
+      setAngleLabel(null)
       exitMoveMode()
       event.nativeEvent?.stopPropagation?.()
     }
@@ -243,6 +326,7 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
       restoreOriginal()
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
       resumeSceneHistory(useScene)
+      setAngleLabel(null)
       markToolCancelConsumed()
       exitMoveMode()
     }
@@ -285,7 +369,7 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
 
     return () => {
       if (!wasCommitted) {
-        restoreOriginal()
+        restoreOriginal(false)
       }
       resumeSceneHistory(useScene)
       emitter.off('grid:move', onGridMove)
@@ -317,6 +401,23 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
           </div>
         </div>
       </Html>
+      {angleLabel && <EndpointAngleLabel label={angleLabel.label} position={angleLabel.position} />}
     </group>
   )
 }
+
+function EndpointAngleLabel({
+  label,
+  position,
+}: {
+  label: string
+  position: [number, number, number]
+}) {
+  return (
+    <Html center position={position} style={{ pointerEvents: 'none' }} zIndexRange={[100, 0]}>
+      <div className="whitespace-nowrap rounded-full border border-border bg-background/95 px-2 py-1 font-mono text-[11px] font-semibold text-foreground shadow-lg backdrop-blur-md">
+        {label}
+      </div>
+    </Html>
+  )
+}

packages/editor/src/components/tools/wall/wall-drafting.ts

@@ -3,7 +3,10 @@ import {
   type AnyNodeId,
   type DoorNode,
   getScaledDimensions,
+  getWallCurveFrameAt,
+  getWallCurveLength,
   type ItemNode,
+  isCurvedWall,
   useScene,
   type WallNode,
   WallNode as WallSchema,
@@ -62,10 +65,10 @@ export function snapPointTo45Degrees(
   const snappedAngle = Math.round(angle / angleStep) * angleStep
   const distance = Math.sqrt(dx * dx + dz * dz)
 
-  return snapPointToGrid([
+  return snapPointToGrid(
-    start[0] + Math.cos(snappedAngle) * distance,
+    [start[0] + Math.cos(snappedAngle) * distance, start[1] + Math.sin(snappedAngle) * distance],
-    start[1] + Math.sin(snappedAngle) * distance,
+    step,
-  ], step)
+  )
 }
 
 export function getWallAngleSnapStep(step = getWallGridStep()): number {
@@ -336,11 +339,17 @@ export function findWallSnapTarget(
       continue
     }
 
-    const candidates: Array<WallPlanPoint | null> = [
+    const candidates: Array<WallPlanPoint | null> = [wall.start, wall.end]
-      wall.start,
+
-      wall.end,
+    if (isCurvedWall(wall)) {
-      projectPointOntoWall(point, wall),
+      const sampleCount = Math.max(8, Math.ceil(getWallCurveLength(wall) / 0.3))
-    ]
+      for (let index = 0; index <= sampleCount; index += 1) {
+        const frame = getWallCurveFrameAt(wall, index / sampleCount)
+        candidates.push([frame.point.x, frame.point.y])
+      }
+    } else {
+      candidates.push(projectPointOntoWall(point, wall))
+    }
     for (const candidate of candidates) {
       if (!candidate) {
         continue

packages/editor/src/components/tools/wall/wall-tool.tsx

@@ -1,14 +1,100 @@
 import { emitter, type GridEvent, type LevelNode, useScene, type WallNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useRef } from 'react'
+import { Html } from '@react-three/drei'
+import { useEffect, useRef, useState } from 'react'
 import { DoubleSide, type Group, type Mesh, Shape, ShapeGeometry, Vector3 } from 'three'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { CursorSphere } from '../shared/cursor-sphere'
+import {
+  formatAngleRadians,
+  getAngleToSegmentReference,
+  getSegmentAngleReferenceAtPoint,
+} from '../shared/segment-angle'
 import { createWallOnCurrentLevel, snapWallDraftPoint, type WallPlanPoint } from './wall-drafting'
 
 const WALL_HEIGHT = 2.5
+const DRAFT_LABEL_Y = WALL_HEIGHT + 0.22
+const DRAFT_ANGLE_LABEL_Y = 0.28
+
+type DraftAngleLabel = {
+  id: string
+  label: string
+  position: [number, number, number]
+}
+
+type DraftMeasurementState = {
+  lengthLabel: string
+  lengthPosition: [number, number, number]
+  angleLabels: DraftAngleLabel[]
+} | null
+
+function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
+  if (unit === 'imperial') {
+    const feet = value * 3.280_84
+    const wholeFeet = Math.floor(feet)
+    const inches = Math.round((feet - wholeFeet) * 12)
+    if (inches === 12) return `${wholeFeet + 1}'0"`
+    return `${wholeFeet}'${inches}"`
+  }
+
+  return `${Number.parseFloat(value.toFixed(2))}m`
+}
+
+function getDraftAngleLabels(
+  start: WallPlanPoint,
+  end: WallPlanPoint,
+  walls: WallNode[],
+): DraftAngleLabel[] {
+  const draftFromStart: WallPlanPoint = [end[0] - start[0], end[1] - start[1]]
+  const draftFromEnd: WallPlanPoint = [start[0] - end[0], start[1] - end[1]]
+  const endpoints = [
+    { id: 'start', point: start, draftVector: draftFromStart },
+    { id: 'end', point: end, draftVector: draftFromEnd },
+  ]
+  const labels: DraftAngleLabel[] = []
+
+  for (const endpoint of endpoints) {
+    const connectedWall = walls.find((wall) =>
+      Boolean(getSegmentAngleReferenceAtPoint(endpoint.point, wall)),
+    )
+    if (!connectedWall) continue
+
+    const connectedReference = getSegmentAngleReferenceAtPoint(endpoint.point, connectedWall)
+    if (!connectedReference) continue
+
+    const angle = getAngleToSegmentReference(endpoint.draftVector, connectedReference)
+    if (angle === null) continue
+
+    labels.push({
+      id: endpoint.id,
+      label: formatAngleRadians(angle),
+      position: [endpoint.point[0], DRAFT_ANGLE_LABEL_Y, endpoint.point[1]],
+    })
+  }
+
+  return labels
+}
+
+function getDraftMeasurementState(
+  start: WallPlanPoint,
+  end: WallPlanPoint,
+  walls: WallNode[],
+  unit: 'metric' | 'imperial',
+): DraftMeasurementState {
+  const dx = end[0] - start[0]
+  const dz = end[1] - start[1]
+  const length = Math.hypot(dx, dz)
+
+  if (length < 0.01) return null
+
+  return {
+    lengthLabel: formatMeasurement(length, unit),
+    lengthPosition: [(start[0] + end[0]) / 2, DRAFT_LABEL_Y, (start[1] + end[1]) / 2],
+    angleLabels: getDraftAngleLabels(start, end, walls),
+  }
+}
 
 /**
  * Update wall preview mesh geometry to create a vertical plane between two points
@@ -67,12 +153,14 @@ const getCurrentLevelWalls = (): WallNode[] => {
 }
 
 export const WallTool: React.FC = () => {
+  const unit = useViewer((state) => state.unit)
   const cursorRef = useRef<Group>(null)
   const wallPreviewRef = useRef<Mesh>(null!)
   const startingPoint = useRef(new Vector3(0, 0, 0))
   const endingPoint = useRef(new Vector3(0, 0, 0))
   const buildingState = useRef(0)
   const shiftPressed = useRef(false)
+  const [draftMeasurement, setDraftMeasurement] = useState<DraftMeasurementState>(null)
 
   useEffect(() => {
     let gridPosition: WallPlanPoint = [0, 0]
@@ -109,9 +197,18 @@ export const WallTool: React.FC = () => {
         previousWallEnd = currentWallEnd
 
         updateWallPreview(wallPreviewRef.current, startingPoint.current, endingPoint.current)
+        setDraftMeasurement(
+          getDraftMeasurementState(
+            [startingPoint.current.x, startingPoint.current.z],
+            snappedLocal,
+            walls,
+            unit,
+          ),
+        )
       } else {
         // Not drawing a wall yet, show the snapped anchor point.
         cursorRef.current.position.set(gridPosition[0], event.localPosition[1], gridPosition[1])
+        setDraftMeasurement(null)
       }
     }
 
@@ -126,6 +223,7 @@ export const WallTool: React.FC = () => {
         endingPoint.current.copy(startingPoint.current)
         buildingState.current = 1
         wallPreviewRef.current.visible = true
+        setDraftMeasurement(null)
       } else if (buildingState.current === 1) {
         const snappedEnd = snapWallDraftPoint({
           point: localClick,
@@ -140,6 +238,7 @@ export const WallTool: React.FC = () => {
         createWallOnCurrentLevel([startingPoint.current.x, startingPoint.current.z], snappedEnd)
         wallPreviewRef.current.visible = false
         buildingState.current = 0
+        setDraftMeasurement(null)
       }
     }
 
@@ -160,6 +259,7 @@ export const WallTool: React.FC = () => {
         markToolCancelConsumed()
         buildingState.current = 0
         wallPreviewRef.current.visible = false
+        setDraftMeasurement(null)
       }
     }
 
@@ -176,7 +276,7 @@ export const WallTool: React.FC = () => {
       window.removeEventListener('keydown', onKeyDown)
       window.removeEventListener('keyup', onKeyUp)
     }
-  }, [])
+  }, [unit])
 
   return (
     <group>
@@ -195,6 +295,38 @@ export const WallTool: React.FC = () => {
           transparent
         />
       </mesh>
+
+      {draftMeasurement && (
+        <>
+          <DraftMeasurementLabel
+            label={draftMeasurement.lengthLabel}
+            position={draftMeasurement.lengthPosition}
+          />
+          {draftMeasurement.angleLabels.map((angleLabel) => (
+            <DraftMeasurementLabel
+              key={angleLabel.id}
+              label={angleLabel.label}
+              position={angleLabel.position}
+            />
+          ))}
+        </>
+      )}
     </group>
   )
 }
+
+function DraftMeasurementLabel({
+  label,
+  position,
+}: {
+  label: string
+  position: [number, number, number]
+}) {
+  return (
+    <Html center position={position} style={{ pointerEvents: 'none' }} zIndexRange={[100, 0]}>
+      <div className="whitespace-nowrap rounded-full border border-border bg-background/95 px-2 py-1 font-mono text-[11px] font-semibold text-foreground shadow-lg backdrop-blur-md">
+        {label}
+      </div>
+    </Html>
+  )
+}

packages/editor/src/components/ui/panels/door-panel.tsx

@@ -254,6 +254,7 @@ export function DoorPanel() {
   const normHeights = node.segments.map((seg) => seg.heightRatio / hSum)
   const isOpening = node.openingKind === 'opening'
   const openingShape = node.openingShape ?? 'rectangle'
+  const doorShape = openingShape === 'arch' || openingShape === 'rounded' ? openingShape : 'rectangle'
   const openingRadiusMode = node.openingRadiusMode ?? 'all'
   const openingTopRadii = node.openingTopRadii ?? [0.15, 0.15]
   const cornerRadius = node.cornerRadius ?? 0.15
@@ -380,6 +381,108 @@ export function DoorPanel() {
         />
       </PanelSection>
 
+      {!isOpening && (
+        <PanelSection title="Top Shape">
+          <div className="flex flex-col gap-2 px-1 pb-1">
+            <SegmentedControl
+              onChange={(v) =>
+                handleUpdate({
+                  openingShape: v as DoorNode['openingShape'],
+                  ...(v === 'rounded'
+                    ? {
+                        openingRadiusMode,
+                        openingTopRadii,
+                        cornerRadius: Math.min(cornerRadius, maxRoundedRadius),
+                        openingRevealRadius,
+                      }
+                    : {}),
+                  ...(v === 'arch' ? { archHeight } : {}),
+                })
+              }
+              options={[
+                { label: 'Rect', value: 'rectangle' },
+                { label: 'Rounded', value: 'rounded' },
+                { label: 'Arch', value: 'arch' },
+              ]}
+              value={doorShape}
+            />
+          </div>
+          {doorShape === 'rounded' && (
+            <>
+              <div className="flex flex-col gap-2 px-1 pb-1">
+                <SegmentedControl
+                  onChange={(v) =>
+                    handleUpdate({ openingRadiusMode: v as DoorNode['openingRadiusMode'] })
+                  }
+                  options={[
+                    { label: 'All', value: 'all' },
+                    { label: 'Individual', value: 'individual' },
+                  ]}
+                  value={openingRadiusMode}
+                />
+              </div>
+              {openingRadiusMode === 'all' ? (
+                <SliderControl
+                  label="Corner Radius"
+                  max={maxRoundedRadius}
+                  min={0}
+                  onChange={(v) => previewDoorUpdate('cornerRadius', v)}
+                  onCommit={(v) => commitDoorPreview('cornerRadius', v)}
+                  precision={2}
+                  step={0.05}
+                  unit="m"
+                  value={Math.round(cornerRadius * 100) / 100}
+                />
+              ) : (
+                <>
+                  {[
+                    ['Top Left', 0],
+                    ['Top Right', 1],
+                  ].map(([label, index]) => (
+                    <SliderControl
+                      key={label}
+                      label={label}
+                      max={maxRoundedRadius}
+                      min={0}
+                      onChange={(v) => setOpeningTopRadius(index as number, v)}
+                      onCommit={(v) => setOpeningTopRadius(index as number, v, true)}
+                      precision={2}
+                      step={0.05}
+                      unit="m"
+                      value={Math.round((openingTopRadii[index as number] ?? 0) * 100) / 100}
+                    />
+                  ))}
+                </>
+              )}
+              <SliderControl
+                label="Reveal Radius"
+                max={0.08}
+                min={0}
+                onChange={(v) => previewDoorUpdate('openingRevealRadius', v)}
+                onCommit={(v) => commitDoorPreview('openingRevealRadius', v)}
+                precision={3}
+                step={0.005}
+                unit="m"
+                value={Math.round(openingRevealRadius * 1000) / 1000}
+              />
+            </>
+          )}
+          {doorShape === 'arch' && (
+            <SliderControl
+              label="Arch Height"
+              max={node.height}
+              min={0.05}
+              onChange={(v) => handleUpdate({ archHeight: v })}
+              precision={2}
+              restoreOnCommit={false}
+              step={0.05}
+              unit="m"
+              value={Math.round(archHeight * 100) / 100}
+            />
+          )}
+        </PanelSection>
+      )}
+
       {isOpening && (
         <PanelSection title="Opening Shape">
           <div className="flex flex-col gap-2 px-1 pb-1">
@@ -468,6 +571,7 @@ export function DoorPanel() {
               min={0.05}
               onChange={(v) => handleUpdate({ archHeight: v })}
               precision={2}
+              restoreOnCommit={false}
               step={0.05}
               unit="m"
               value={Math.round(archHeight * 100) / 100}

packages/editor/src/components/ui/panels/window-panel.tsx

@@ -64,7 +64,7 @@ function isSameRadiusTuple(
   current: [number, number, number, number],
   next: [number, number, number, number],
 ) {
-  return current.every((value, index) => Math.abs(value - next[index]) < 1e-6)
+  return current.every((value, index) => Math.abs(value - (next[index] ?? 0)) < 1e-6)
 }
 
 export function WindowPanel() {
@@ -267,6 +267,7 @@ export function WindowPanel() {
   const normRows = node.rowRatios.map((r) => r / rowSum)
   const isOpening = node.openingKind === 'opening'
   const openingShape = node.openingShape ?? 'rectangle'
+  const windowShape = openingShape === 'arch' || openingShape === 'rounded' ? openingShape : 'rectangle'
   const openingRadiusMode = node.openingRadiusMode ?? 'all'
   const openingCornerRadii = node.openingCornerRadii ?? [0.15, 0.15, 0.15, 0.15]
   const cornerRadius = node.cornerRadius ?? 0.15
@@ -457,6 +458,108 @@ export function WindowPanel() {
         />
       </PanelSection>
 
+      {!isOpening && (
+        <PanelSection title="Corner Shape">
+          <SegmentedControl
+            onChange={(value) =>
+              handleUpdate({
+                openingShape: value as WindowNode['openingShape'],
+                ...(value === 'rounded'
+                  ? {
+                      openingRadiusMode,
+                      openingCornerRadii,
+                      cornerRadius: Math.min(cornerRadius, maxRoundedRadius),
+                      openingRevealRadius,
+                    }
+                  : {}),
+                ...(value === 'arch' ? { archHeight } : {}),
+              })
+            }
+            options={[
+              { value: 'rectangle', label: 'Rect' },
+              { value: 'rounded', label: 'Rounded' },
+              { value: 'arch', label: 'Arch' },
+            ]}
+            value={windowShape}
+          />
+          {windowShape === 'rounded' && (
+            <div className="mt-2 flex flex-col gap-1">
+              <SegmentedControl
+                onChange={(value) =>
+                  handleUpdate({ openingRadiusMode: value as WindowNode['openingRadiusMode'] })
+                }
+                options={[
+                  { value: 'all', label: 'All' },
+                  { value: 'individual', label: 'Individual' },
+                ]}
+                value={openingRadiusMode}
+              />
+              {openingRadiusMode === 'all' ? (
+                <SliderControl
+                  label="Corner Radius"
+                  max={maxRoundedRadius}
+                  min={0}
+                  onChange={(value) => previewWindowUpdate('cornerRadius', value)}
+                  onCommit={(value) => commitWindowPreview('cornerRadius', value)}
+                  precision={2}
+                  step={0.05}
+                  unit="m"
+                  value={Math.round(cornerRadius * 100) / 100}
+                />
+              ) : (
+                <>
+                  {[
+                    ['Top Left', 0],
+                    ['Top Right', 1],
+                    ['Bottom Right', 2],
+                    ['Bottom Left', 3],
+                  ].map(([label, index]) => (
+                    <SliderControl
+                      key={label}
+                      label={label}
+                      max={maxRoundedRadius}
+                      min={0}
+                      onChange={(value) => setOpeningCornerRadius(index as number, value)}
+                      onCommit={(value) => setOpeningCornerRadius(index as number, value, true)}
+                      precision={2}
+                      step={0.05}
+                      unit="m"
+                      value={Math.round((openingCornerRadii[index as number] ?? 0) * 100) / 100}
+                    />
+                  ))}
+                </>
+              )}
+              <SliderControl
+                label="Reveal Radius"
+                max={0.08}
+                min={0}
+                onChange={(value) => previewWindowUpdate('openingRevealRadius', value)}
+                onCommit={(value) => commitWindowPreview('openingRevealRadius', value)}
+                precision={3}
+                step={0.005}
+                unit="m"
+                value={Math.round(openingRevealRadius * 1000) / 1000}
+              />
+            </div>
+          )}
+          {windowShape === 'arch' && (
+            <div className="mt-2 flex flex-col gap-1">
+              <SliderControl
+                label="Arch Height"
+                max={Math.max(0.05, node.height)}
+                min={0.05}
+                onChange={(value) => handleUpdate({ archHeight: value })}
+                precision={2}
+                restoreOnCommit={false}
+                step={0.05}
+                unit="m"
+                value={Math.round(archHeight * 100) / 100}
+              />
+            </div>
+          )}
+        </PanelSection>
+      )}
+
       {isOpening && (
         <PanelSection title="Opening Shape">
           <SegmentedControl
@@ -538,6 +641,7 @@ export function WindowPanel() {
                 min={0.05}
                 onChange={(value) => handleUpdate({ archHeight: value })}
                 precision={2}
+                restoreOnCommit={false}
                 step={0.05}
                 unit="m"
                 value={Math.round(archHeight * 100) / 100}

packages/viewer/src/systems/door/door-system.tsx

@@ -1,10 +1,5 @@
+import { type AnyNodeId, type DoorNode, sceneRegistry, useScene } from '@pascal-app/core'
 import { useFrame } from '@react-three/fiber'
-import {
-  type AnyNodeId,
-  type DoorNode,
-  sceneRegistry,
-  useScene,
-} from '@pascal-app/core'
 import * as THREE from 'three'
 import { baseMaterial, glassMaterial } from '../../lib/materials'
 
@@ -55,6 +50,300 @@ function addBox(
   parent.add(m)
 }
 
+function addShape(
+  parent: THREE.Object3D,
+  material: THREE.Material,
+  shape: THREE.Shape,
+  depth: number,
+) {
+  const geometry = new THREE.ExtrudeGeometry(shape, {
+    depth,
+    bevelEnabled: false,
+    curveSegments: 24,
+  })
+  geometry.translate(0, 0, -depth / 2)
+  const mesh = new THREE.Mesh(geometry, material)
+  parent.add(mesh)
+}
+
+function getClampedArchHeight(width: number, height: number, archHeight: number | undefined) {
+  return Math.min(Math.max(archHeight ?? width / 2, 0.01), Math.max(height, 0.01))
+}
+
+function createArchShape(
+  left: number,
+  right: number,
+  bottom: number,
+  top: number,
+  archHeight: number,
+) {
+  const centerX = (left + right) / 2
+  const halfWidth = (right - left) / 2
+  const clampedArchHeight = getClampedArchHeight(right - left, top - bottom, archHeight)
+  const springY = top - clampedArchHeight
+  const shape = new THREE.Shape()
+  const segments = 32
+
+  shape.moveTo(left, bottom)
+  shape.lineTo(right, bottom)
+  shape.lineTo(right, springY)
+  for (let index = 1; index <= segments; index += 1) {
+    const x = right + (left - right) * (index / segments)
+    shape.lineTo(x, getArchBoundaryY(x - centerX, halfWidth, springY, clampedArchHeight))
+  }
+  shape.lineTo(left, bottom)
+  shape.closePath()
+  return shape
+}
+
+function getArchBoundaryY(x: number, halfWidth: number, springY: number, archHeight: number) {
+  if (halfWidth <= 1e-6) return springY
+  const t = Math.min(Math.abs(x) / halfWidth, 1)
+  return springY + archHeight * Math.sqrt(Math.max(1 - t * t, 0))
+}
+
+function createArchBandShape(
+  width: number,
+  outerSpringY: number,
+  outerTopY: number,
+  innerSpringY: number,
+  innerTopY: number,
+  insetX: number,
+) {
+  const halfWidth = width / 2
+  const innerHalfWidth = Math.max(halfWidth - insetX, 0)
+  const outerArchHeight = Math.max(outerTopY - outerSpringY, 0)
+  const safeInnerTopY = Math.min(innerTopY, outerTopY - 0.001)
+  const safeInnerSpringY = Math.min(innerSpringY, safeInnerTopY - 0.001)
+  const innerArchHeight = Math.max(safeInnerTopY - safeInnerSpringY, 0)
+  const shape = new THREE.Shape()
+  const segments = 32
+  const getSafeInnerBoundaryY = (x: number) =>
+    Math.min(
+      getArchBoundaryY(x, innerHalfWidth, safeInnerSpringY, innerArchHeight),
+      getArchBoundaryY(x, halfWidth, outerSpringY, outerArchHeight) - 0.001,
+    )
+
+  shape.moveTo(-halfWidth, outerSpringY)
+  for (let index = 1; index <= segments; index += 1) {
+    const x = -halfWidth + width * (index / segments)
+    shape.lineTo(x, getArchBoundaryY(x, halfWidth, outerSpringY, outerArchHeight))
+  }
+
+  if (innerHalfWidth <= 0.001 || safeInnerTopY <= safeInnerSpringY + 0.001) {
+    shape.lineTo(halfWidth, outerSpringY)
+    shape.closePath()
+    return shape
+  }
+
+  shape.lineTo(innerHalfWidth, outerSpringY)
+  shape.lineTo(innerHalfWidth, getSafeInnerBoundaryY(innerHalfWidth))
+  for (let index = segments - 1; index >= 0; index -= 1) {
+    const x = -innerHalfWidth + innerHalfWidth * 2 * (index / segments)
+    shape.lineTo(x, getSafeInnerBoundaryY(x))
+  }
+  shape.lineTo(-innerHalfWidth, outerSpringY)
+  shape.lineTo(-halfWidth, outerSpringY)
+  shape.closePath()
+
+  return shape
+}
+
+function createArchHeadBarShape(width: number, bottomY: number, springY: number, topY: number) {
+  const halfWidth = width / 2
+  const archHeight = Math.max(topY - springY, 0)
+  const shape = new THREE.Shape()
+  const segments = 32
+
+  shape.moveTo(-halfWidth, bottomY)
+  shape.lineTo(halfWidth, bottomY)
+  shape.lineTo(halfWidth, springY)
+  for (let index = 1; index <= segments; index += 1) {
+    const x = halfWidth - width * (index / segments)
+    shape.lineTo(x, getArchBoundaryY(x, halfWidth, springY, archHeight))
+  }
+  shape.lineTo(-halfWidth, bottomY)
+  shape.closePath()
+
+  return shape
+}
+
+type TopCornerRadii = {
+  topLeft: number
+  topRight: number
+}
+
+function normalizeTopCornerRadii(
+  radii: TopCornerRadii,
+  width: number,
+  height: number,
+): TopCornerRadii {
+  const next = { ...radii }
+  const scale = Math.min(
+    1,
+    width / Math.max(next.topLeft + next.topRight, 1e-6),
+    height / Math.max(next.topLeft, 1e-6),
+    height / Math.max(next.topRight, 1e-6),
+  )
+
+  if (scale < 1) {
+    next.topLeft *= scale
+    next.topRight *= scale
+  }
+
+  return next
+}
+
+function getDoorTopRadii(node: DoorNode, width: number, height: number): TopCornerRadii {
+  if (node.openingRadiusMode === 'individual') {
+    const [topLeft = 0, topRight = 0] = node.openingTopRadii ?? [0.15, 0.15]
+    return normalizeTopCornerRadii(
+      {
+        topLeft: Math.max(topLeft, 0),
+        topRight: Math.max(topRight, 0),
+      },
+      width,
+      height,
+    )
+  }
+
+  const maxRadius = Math.min(width / 2, height)
+  const radius = Math.min(Math.max(node.cornerRadius ?? 0.15, 0), maxRadius)
+  return { topLeft: radius, topRight: radius }
+}
+
+function createRoundedTopShape(
+  left: number,
+  right: number,
+  bottom: number,
+  top: number,
+  radii: TopCornerRadii,
+) {
+  const shape = new THREE.Shape()
+  const { topLeft, topRight } = normalizeTopCornerRadii(radii, right - left, top - bottom)
+
+  shape.moveTo(left, bottom)
+  shape.lineTo(right, bottom)
+  shape.lineTo(right, top - topRight)
+  if (topRight > 1e-6) {
+    shape.absarc(right - topRight, top - topRight, topRight, 0, Math.PI / 2, false)
+  } else {
+    shape.lineTo(right, top)
+  }
+
+  shape.lineTo(left + topLeft, top)
+  if (topLeft > 1e-6) {
+    shape.absarc(left + topLeft, top - topLeft, topLeft, Math.PI / 2, Math.PI, false)
+  } else {
+    shape.lineTo(left, top)
+  }
+
+  shape.lineTo(left, bottom)
+  shape.closePath()
+  return shape
+}
+
+function createRoundedDoorFrameShape(
+  width: number,
+  height: number,
+  frameThickness: number,
+  radii: TopCornerRadii,
+) {
+  const halfWidth = width / 2
+  const bottom = -height / 2
+  const top = height / 2
+  const outerRadii = normalizeTopCornerRadii(radii, width, height)
+  const outer = createRoundedTopShape(-halfWidth, halfWidth, bottom, top, outerRadii)
+  const inset = Math.min(frameThickness, width / 2 - 0.005, height - 0.005)
+
+  if (inset <= 0.001) return outer
+
+  const innerLeft = -halfWidth + inset
+  const innerRight = halfWidth - inset
+  const innerTop = top - inset
+  const innerRadii = normalizeTopCornerRadii(
+    {
+      topLeft: Math.max(outerRadii.topLeft - inset, 0),
+      topRight: Math.max(outerRadii.topRight - inset, 0),
+    },
+    innerRight - innerLeft,
+    innerTop - bottom,
+  )
+  const holeShape = createRoundedTopShape(innerLeft, innerRight, bottom, innerTop, innerRadii)
+  const hole = new THREE.Path(holeShape.getPoints(32).reverse())
+  outer.holes.push(hole)
+
+  return outer
+}
+
+function shapeToReversedPath(shape: THREE.Shape) {
+  return new THREE.Path(shape.getPoints(40).reverse())
+}
+
+function createRoundedLeafFrameShape(
+  width: number,
+  bottom: number,
+  top: number,
+  radii: TopCornerRadii,
+  insetX: number,
+  insetY: number,
+) {
+  const halfWidth = width / 2
+  const outerRadii = normalizeTopCornerRadii(radii, width, top - bottom)
+  const outer = createRoundedTopShape(-halfWidth, halfWidth, bottom, top, outerRadii)
+  const innerLeft = -halfWidth + insetX
+  const innerRight = halfWidth - insetX
+  const innerBottom = bottom + insetY
+  const innerTop = top - insetY
+
+  if (innerRight <= innerLeft + 0.01 || innerTop <= innerBottom + 0.01) return outer
+
+  const innerRadii = normalizeTopCornerRadii(
+    {
+      topLeft: Math.max(outerRadii.topLeft - Math.max(insetX, insetY), 0),
+      topRight: Math.max(outerRadii.topRight - Math.max(insetX, insetY), 0),
+    },
+    innerRight - innerLeft,
+    innerTop - innerBottom,
+  )
+  outer.holes.push(
+    shapeToReversedPath(
+      createRoundedTopShape(innerLeft, innerRight, innerBottom, innerTop, innerRadii),
+    ),
+  )
+
+  return outer
+}
+
+function createTopClippedRectShape(
+  left: number,
+  right: number,
+  bottom: number,
+  top: number,
+  getBoundaryY: (x: number) => number,
+) {
+  const segments = 20
+  const points: { x: number; y: number }[] = []
+
+  for (let index = 0; index <= segments; index += 1) {
+    const t = index / segments
+    const x = right + (left - right) * t
+    const y = Math.min(top, getBoundaryY(x))
+    if (y > bottom + 0.001) points.push({ x, y })
+  }
+
+  if (points.length < 2) return null
+
+  const shape = new THREE.Shape()
+  shape.moveTo(left, bottom)
+  shape.lineTo(right, bottom)
+  for (const point of points) {
+    shape.lineTo(point.x, point.y)
+  }
+  shape.closePath()
+  return shape
+}
+
 function disposeObject(object: THREE.Object3D) {
   object.traverse((child) => {
     if (child instanceof THREE.Mesh) child.geometry.dispose()
@@ -82,6 +371,7 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
     width,
     height,
     openingKind,
+    openingShape,
     frameThickness,
     frameDepth,
     threshold,
@@ -129,8 +419,77 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
     y: number,
     z: number,
   ) => addBox(leafGroup, material, w, h, d, x - hingeX, y, z)
+  const addLeafShape = (shape: THREE.Shape, material: THREE.Material, depth: number, z = 0) => {
+    const geometry = new THREE.ExtrudeGeometry(shape, {
+      depth,
+      bevelEnabled: false,
+      curveSegments: 24,
+    })
+    geometry.translate(-hingeX, 0, -depth / 2 + z)
+    const leafMesh = new THREE.Mesh(geometry, material)
+    leafGroup.add(leafMesh)
+  }
 
   // ── Frame members ──
+  if (openingShape === 'arch') {
+    const frameBottom = -height / 2
+    const frameTop = height / 2
+    const frameArchHeight = getClampedArchHeight(width, height, node.archHeight)
+    const frameSpringY = frameTop - frameArchHeight
+    const frameInnerTopY = frameTop - frameThickness
+    const frameInnerSpringY = Math.min(frameSpringY + frameThickness, frameInnerTopY)
+    const useShallowHeadBar = frameArchHeight <= frameThickness * 2
+    const frameHeadBottomY = useShallowHeadBar ? frameSpringY - frameThickness : frameSpringY
+    const postHeight = Math.max(frameHeadBottomY - frameBottom, 0.01)
+
+    addBox(
+      mesh,
+      baseMaterial,
+      frameThickness,
+      postHeight,
+      frameDepth,
+      -width / 2 + frameThickness / 2,
+      frameBottom + postHeight / 2,
+      0,
+    )
+    addBox(
+      mesh,
+      baseMaterial,
+      frameThickness,
+      postHeight,
+      frameDepth,
+      width / 2 - frameThickness / 2,
+      frameBottom + postHeight / 2,
+      0,
+    )
+    addShape(
+      mesh,
+      baseMaterial,
+      useShallowHeadBar
+        ? createArchHeadBarShape(width, frameHeadBottomY, frameSpringY, frameTop)
+        : createArchBandShape(
+            width,
+            frameSpringY,
+            frameTop,
+            frameInnerSpringY,
+            frameInnerTopY,
+            frameThickness,
+          ),
+      frameDepth,
+    )
+  } else if (openingShape === 'rounded') {
+    addShape(
+      mesh,
+      baseMaterial,
+      createRoundedDoorFrameShape(
+        width,
+        height,
+        frameThickness,
+        getDoorTopRadii(node, width, height),
+      ),
+      frameDepth,
+    )
+  } else {
     // Left post — full height
     addBox(
       mesh,
@@ -164,6 +523,7 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
       height / 2 - frameThickness / 2,
       0,
     )
+  }
 
   // ── Threshold (inside the frame) ──
   if (threshold) {
@@ -179,16 +539,139 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
     )
   }
 
-  // ── Leaf — contentPadding border strips (no full backing; glass areas are open) ──
+  const usesShapedLeaf = openingShape === 'arch' || openingShape === 'rounded'
+  const leafBottom = leafCenterY - leafH / 2
+  const leafTop = leafCenterY + leafH / 2
+  const leafArchHeight = getClampedArchHeight(
+    leafW,
+    leafH,
+    Math.max((node.archHeight ?? leafW / 2) - frameThickness, 0.01),
+  )
+  const leafArchSpringY = leafTop - leafArchHeight
+  const frameRadii = getDoorTopRadii(node, width, height)
+  const leafTopRadii = normalizeTopCornerRadii(
+    {
+      topLeft: Math.max(frameRadii.topLeft - frameThickness, 0),
+      topRight: Math.max(frameRadii.topRight - frameThickness, 0),
+    },
+    leafW,
+    leafH,
+  )
   const cpX = contentPadding[0]
   const cpY = contentPadding[1]
-  if (hasLeafContent && cpY > 0) {
+  const useShallowLeafHeadBar = openingShape === 'arch' && cpY > 0 && leafArchHeight <= cpY * 2
+  const shallowLeafHeadBottomY = leafArchSpringY - cpY
+  const getLeafBoundaryY = (x: number) => {
+    if (openingShape === 'arch') {
+      if (useShallowLeafHeadBar) return shallowLeafHeadBottomY
+
+      const innerTop = leafTop - cpY
+      const innerSpringY = Math.min(Math.max(leafArchSpringY + cpY, leafBottom + cpY), innerTop)
+      const innerArchHeight = Math.max(innerTop - innerSpringY, 0.001)
+      const halfContentW = Math.max((leafW - 2 * cpX) / 2, 0.001)
+      const outerBoundaryY = getArchBoundaryY(x, leafW / 2, leafArchSpringY, leafArchHeight)
+      return Math.min(
+        getArchBoundaryY(x, halfContentW, innerSpringY, innerArchHeight),
+        outerBoundaryY - 0.001,
+      )
+    }
+
+    if (openingShape === 'rounded') {
+      const left = -leafW / 2 + cpX
+      const right = leafW / 2 - cpX
+      const top = leafTop - cpY
+      const innerRadii = normalizeTopCornerRadii(
+        {
+          topLeft: Math.max(leafTopRadii.topLeft - Math.max(cpX, cpY), 0),
+          topRight: Math.max(leafTopRadii.topRight - Math.max(cpX, cpY), 0),
+        },
+        right - left,
+        top - (leafBottom + cpY),
+      )
+
+      if (innerRadii.topLeft > 1e-6 && x < left + innerRadii.topLeft) {
+        const centerX = left + innerRadii.topLeft
+        const centerY = top - innerRadii.topLeft
+        const dx = x - centerX
+        return centerY + Math.sqrt(Math.max(innerRadii.topLeft * innerRadii.topLeft - dx * dx, 0))
+      }
+
+      if (innerRadii.topRight > 1e-6 && x > right - innerRadii.topRight) {
+        const centerX = right - innerRadii.topRight
+        const centerY = top - innerRadii.topRight
+        const dx = x - centerX
+        return centerY + Math.sqrt(Math.max(innerRadii.topRight * innerRadii.topRight - dx * dx, 0))
+      }
+
+      return top
+    }
+
+    return leafTop
+  }
+  const createLeafCellShape = (left: number, right: number, bottom: number, top: number) =>
+    createTopClippedRectShape(left, right, bottom, top, getLeafBoundaryY)
+
+  // ── Leaf — contentPadding border strips (no full backing; glass areas are open) ──
+  if (hasLeafContent && openingShape === 'arch') {
+    const leafInnerTopY = leafTop - cpY
+    const leafInnerSpringY = Math.min(
+      Math.max(leafArchSpringY + cpY, leafBottom + cpY),
+      leafInnerTopY,
+    )
+    const sideBottom = leafBottom + cpY
+    const sideTop = useShallowLeafHeadBar ? shallowLeafHeadBottomY : leafArchSpringY
+    const sideHeight = Math.max(sideTop - sideBottom, 0)
+
+    if (cpY > 0) {
+      addLeafBox(baseMaterial, leafW, cpY, leafDepth, 0, leafBottom + cpY / 2, 0)
+    }
+    if (cpX > 0 && sideHeight > 0.01) {
+      addLeafBox(
+        baseMaterial,
+        cpX,
+        sideHeight,
+        leafDepth,
+        -leafW / 2 + cpX / 2,
+        sideBottom + sideHeight / 2,
+        0,
+      )
+      addLeafBox(
+        baseMaterial,
+        cpX,
+        sideHeight,
+        leafDepth,
+        leafW / 2 - cpX / 2,
+        sideBottom + sideHeight / 2,
+        0,
+      )
+    }
+    addLeafShape(
+      useShallowLeafHeadBar
+        ? createArchHeadBarShape(leafW, shallowLeafHeadBottomY, leafArchSpringY, leafTop)
+        : createArchBandShape(
+            leafW,
+            leafArchSpringY,
+            leafTop,
+            leafInnerSpringY,
+            leafInnerTopY,
+            cpX,
+          ),
+      baseMaterial,
+      leafDepth,
+    )
+  } else if (hasLeafContent && openingShape === 'rounded') {
+    addLeafShape(
+      createRoundedLeafFrameShape(leafW, leafBottom, leafTop, leafTopRadii, cpX, cpY),
+      baseMaterial,
+      leafDepth,
+    )
+  } else if (hasLeafContent && cpY > 0) {
     // Top strip
     addLeafBox(baseMaterial, leafW, cpY, leafDepth, 0, leafCenterY + leafH / 2 - cpY / 2, 0)
     // Bottom strip
     addLeafBox(baseMaterial, leafW, cpY, leafDepth, 0, leafCenterY - leafH / 2 + cpY / 2, 0)
   }
-  if (hasLeafContent && cpX > 0) {
+  if (hasLeafContent && !usesShapedLeaf && cpX > 0) {
     const innerH = leafH - 2 * cpY
     // Left strip
     addLeafBox(baseMaterial, cpX, innerH, leafDepth, -leafW / 2 + cpX / 2, leafCenterY, 0)
@@ -205,9 +688,12 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
   const contentTop = leafCenterY + contentH / 2
 
   let segY = contentTop
-  for (const seg of segments) {
+  for (let segIndex = 0; segIndex < segments.length; segIndex += 1) {
+    const seg = segments[segIndex]!
     const segH = (seg.heightRatio / totalRatio) * contentH
     const segCenterY = segY - segH / 2
+    const segTop = segY
+    const segBottom = segY - segH
 
     const numCols = seg.columnRatios.length
     const colSum = seg.columnRatios.reduce((a, b) => a + b, 0)
@@ -228,6 +714,14 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
       cx = -contentW / 2
       for (let c = 0; c < numCols - 1; c++) {
         cx += colWidths[c]!
+        if (usesShapedLeaf) {
+          const dividerLeft = cx
+          const dividerRight = cx + seg.dividerThickness
+          const dividerShape = createLeafCellShape(dividerLeft, dividerRight, segBottom, segTop)
+          if (dividerShape) {
+            addLeafShape(dividerShape, baseMaterial, 0.012, leafDepth / 2 + 0.006)
+          }
+        } else {
           addLeafBox(
             baseMaterial,
             seg.dividerThickness,
@@ -237,6 +731,7 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
             segCenterY,
             0,
           )
+        }
         cx += seg.dividerThickness
       }
     }
@@ -245,27 +740,61 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
     for (let c = 0; c < numCols; c++) {
       const colW = colWidths[c]!
       const colX = colXCenters[c]!
+      const cellLeft = colX - colW / 2
+      const cellRight = colX + colW / 2
 
       if (seg.type === 'glass') {
-        // Glass only — no opaque backing so it's truly transparent
         const glassDepth = Math.max(0.004, leafDepth * 0.15)
+        if (usesShapedLeaf) {
+          const shape = createLeafCellShape(cellLeft, cellRight, segBottom, segTop)
+          if (shape)
+            addLeafShape(shape, glassMaterial, glassDepth, leafDepth / 2 + glassDepth / 2 + 0.004)
+        } else {
+          // Glass only — no opaque backing so it's truly transparent
           addLeafBox(glassMaterial, colW, segH, glassDepth, colX, segCenterY, 0)
+        }
       } else if (seg.type === 'panel') {
+        if (usesShapedLeaf) {
+          const shape = createLeafCellShape(cellLeft, cellRight, segBottom, segTop)
+          if (shape) addLeafShape(shape, baseMaterial, leafDepth)
+        } else {
           // Opaque leaf backing for this column
           addLeafBox(baseMaterial, colW, segH, leafDepth, colX, segCenterY, 0)
+        }
         // Raised panel detail
         const panelW = colW - 2 * seg.panelInset
         const panelH = segH - 2 * seg.panelInset
         if (panelW > 0.01 && panelH > 0.01) {
           const effectiveDepth = Math.abs(seg.panelDepth) < 0.002 ? 0.005 : Math.abs(seg.panelDepth)
           const panelZ = leafDepth / 2 + effectiveDepth / 2
+          if (usesShapedLeaf) {
+            const shape = createLeafCellShape(
+              colX - panelW / 2,
+              colX + panelW / 2,
+              segCenterY - panelH / 2,
+              segCenterY + panelH / 2,
+            )
+            if (shape) addLeafShape(shape, baseMaterial, effectiveDepth, panelZ)
+          } else {
             addLeafBox(baseMaterial, panelW, panelH, effectiveDepth, colX, segCenterY, panelZ)
           }
+        }
       } else {
         // 'empty' leaves the opening unfilled
       }
     }
 
+    if (usesShapedLeaf && segIndex < segments.length - 1) {
+      const railThickness = Math.min(Math.max(cpY, 0.02), Math.max(segH * 0.35, 0.02))
+      const railShape = createLeafCellShape(
+        -contentW / 2,
+        contentW / 2,
+        segBottom - railThickness / 2,
+        segBottom + railThickness / 2,
+      )
+      if (railShape) addLeafShape(railShape, baseMaterial, 0.012, leafDepth / 2 + 0.006)
+    }
+
     segY -= segH
   }
 
@@ -308,8 +837,6 @@ function updateDoorMesh(node: DoorNode, mesh: THREE.Mesh) {
     const hingeW = 0.024
     const hingeD = leafDepth + 0.016
     // Bottom hinge ~0.25m from floor, middle hinge, top hinge ~0.25m from top
-    const leafBottom = leafCenterY - leafH / 2
-    const leafTop = leafCenterY + leafH / 2
     addBox(mesh, baseMaterial, hingeW, hingeH, hingeD, hingeX, leafBottom + 0.25, hingeZ)
     addBox(mesh, baseMaterial, hingeW, hingeH, hingeD, hingeX, (leafBottom + leafTop) / 2, hingeZ)
     addBox(mesh, baseMaterial, hingeW, hingeH, hingeD, hingeX, leafTop - 0.25, hingeZ)
@@ -327,6 +854,40 @@ function syncDoorCutout(node: DoorNode, mesh: THREE.Mesh) {
     mesh.add(cutout)
   }
   cutout.geometry.dispose()
+  if (node.openingShape === 'arch') {
+    cutout.geometry = new THREE.ExtrudeGeometry(
+      createArchShape(
+        -node.width / 2,
+        node.width / 2,
+        -node.height / 2,
+        node.height / 2,
+        getClampedArchHeight(node.width, node.height, node.archHeight),
+      ),
+      {
+        depth: 1,
+        bevelEnabled: false,
+        curveSegments: 24,
+      },
+    )
+    cutout.geometry.translate(0, 0, -0.5)
+  } else if (node.openingShape === 'rounded') {
+    cutout.geometry = new THREE.ExtrudeGeometry(
+      createRoundedTopShape(
+        -node.width / 2,
+        node.width / 2,
+        -node.height / 2,
+        node.height / 2,
+        getDoorTopRadii(node, node.width, node.height),
+      ),
+      {
+        depth: 1,
+        bevelEnabled: false,
+        curveSegments: 24,
+      },
+    )
+    cutout.geometry.translate(0, 0, -0.5)
+  } else {
     cutout.geometry = new THREE.BoxGeometry(node.width, node.height, 1.0)
+  }
   cutout.visible = false
 }

packages/viewer/src/systems/wall/wall-system.tsx

@@ -1,14 +1,10 @@
-import { useFrame } from '@react-three/fiber'
-import * as THREE from 'three'
-import { Brush, Evaluator, SUBTRACTION } from 'three-bvh-csg'
-import { computeBoundsTree } from 'three-mesh-bvh'
 import {
-  calculateLevelMiters,
   type AnyNode,
   type AnyNodeId,
+  calculateLevelMiters,
+  DEFAULT_WALL_HEIGHT,
   type DoorNode,
   getAdjacentWallIds,
-  DEFAULT_WALL_HEIGHT,
   getWallCurveFrameAt,
   getWallMiterBoundaryPoints,
   getWallPlanFootprint,
@@ -21,10 +17,14 @@ import {
   sceneRegistry,
   spatialGridManager,
   useScene,
-  type WallNode,
   type WallMiterData,
+  type WallNode,
   type WindowNode,
 } from '@pascal-app/core'
+import { useFrame } from '@react-three/fiber'
+import * as THREE from 'three'
+import { Brush, Evaluator, SUBTRACTION } from 'three-bvh-csg'
+import { computeBoundsTree } from 'three-mesh-bvh'
 
 // Reusable CSG evaluator for better performance
 const csgEvaluator = new Evaluator()
@@ -560,7 +560,13 @@ function collectCutoutBrushes(
 
     if (
       (child.type === 'door' && child.openingKind === 'opening') ||
-      (child.type === 'window' && child.openingKind === 'opening')
+      (child.type === 'door' &&
+        child.openingKind === 'door' &&
+        (child.openingShape === 'arch' || child.openingShape === 'rounded')) ||
+      (child.type === 'window' && child.openingKind === 'opening') ||
+      (child.type === 'window' &&
+        child.openingKind === 'window' &&
+        (child.openingShape === 'arch' || child.openingShape === 'rounded'))
     ) {
       brushes.push(createShapedOpeningCutoutBrush(child, wallThickness))
       continue
@@ -668,11 +674,17 @@ function createShapedOpeningCutoutShape(opening: ShapedOpeningNode): THREE.Shape
   if (opening.openingShape === 'arch') {
     const archHeight = Math.min(Math.max(opening.archHeight ?? width / 2, 0.01), height)
     const springY = top - archHeight
+    const segments = 32
 
     shape.moveTo(left, bottom)
     shape.lineTo(right, bottom)
     shape.lineTo(right, springY)
-    shape.quadraticCurveTo(centerX, top, left, springY)
+    for (let index = 1; index <= segments; index += 1) {
+      const x = right + (left - right) * (index / segments)
+      const normalizedX = Math.min(Math.abs((x - centerX) / halfWidth), 1)
+      const y = springY + archHeight * Math.sqrt(Math.max(1 - normalizedX * normalizedX, 0))
+      shape.lineTo(x, y)
+    }
     shape.lineTo(left, bottom)
     shape.closePath()
     return shape

packages/viewer/src/systems/window/window-system.tsx

@@ -1,10 +1,5 @@
+import { type AnyNodeId, sceneRegistry, useScene, type WindowNode } from '@pascal-app/core'
 import { useFrame } from '@react-three/fiber'
-import {
-  type AnyNodeId,
-  sceneRegistry,
-  useScene,
-  type WindowNode,
-} from '@pascal-app/core'
 import * as THREE from 'three'
 import { baseMaterial, glassMaterial } from '../../lib/materials'
 
@@ -55,6 +50,521 @@ function addBox(
   parent.add(m)
 }
 
+function addShape(
+  parent: THREE.Object3D,
+  material: THREE.Material,
+  shape: THREE.Shape,
+  depth: number,
+  z = 0,
+) {
+  const geometry = new THREE.ExtrudeGeometry(shape, {
+    depth,
+    bevelEnabled: false,
+    curveSegments: 24,
+  })
+  geometry.translate(0, 0, -depth / 2 + z)
+  const mesh = new THREE.Mesh(geometry, material)
+  parent.add(mesh)
+}
+
+function createRectShape(left: number, right: number, bottom: number, top: number) {
+  const shape = new THREE.Shape()
+  shape.moveTo(left, bottom)
+  shape.lineTo(right, bottom)
+  shape.lineTo(right, top)
+  shape.lineTo(left, top)
+  shape.closePath()
+  return shape
+}
+
+type CornerRadii = {
+  topLeft: number
+  topRight: number
+  bottomRight: number
+  bottomLeft: number
+}
+
+function normalizeCornerRadii(radii: CornerRadii, width: number, height: number): CornerRadii {
+  const next = { ...radii }
+  const scale = Math.min(
+    1,
+    width / Math.max(next.topLeft + next.topRight, 1e-6),
+    width / Math.max(next.bottomLeft + next.bottomRight, 1e-6),
+    height / Math.max(next.topLeft + next.bottomLeft, 1e-6),
+    height / Math.max(next.topRight + next.bottomRight, 1e-6),
+  )
+
+  if (scale < 1) {
+    next.topLeft *= scale
+    next.topRight *= scale
+    next.bottomRight *= scale
+    next.bottomLeft *= scale
+  }
+
+  return next
+}
+
+function getWindowRoundedRadii(node: WindowNode, width: number, height: number): CornerRadii {
+  if (node.openingRadiusMode === 'individual') {
+    const [topLeft = 0, topRight = 0, bottomRight = 0, bottomLeft = 0] =
+      node.openingCornerRadii ?? [0.15, 0.15, 0.15, 0.15]
+    return normalizeCornerRadii(
+      {
+        topLeft: Math.max(topLeft, 0),
+        topRight: Math.max(topRight, 0),
+        bottomRight: Math.max(bottomRight, 0),
+        bottomLeft: Math.max(bottomLeft, 0),
+      },
+      width,
+      height,
+    )
+  }
+
+  const maxRadius = Math.min(width / 2, height / 2)
+  const radius = Math.min(Math.max(node.cornerRadius ?? 0.15, 0), maxRadius)
+  return { topLeft: radius, topRight: radius, bottomRight: radius, bottomLeft: radius }
+}
+
+function insetCornerRadii(radii: CornerRadii, inset: number, width: number, height: number) {
+  return normalizeCornerRadii(
+    {
+      topLeft: Math.max(radii.topLeft - inset, 0),
+      topRight: Math.max(radii.topRight - inset, 0),
+      bottomRight: Math.max(radii.bottomRight - inset, 0),
+      bottomLeft: Math.max(radii.bottomLeft - inset, 0),
+    },
+    width,
+    height,
+  )
+}
+
+function createRoundedShape(
+  left: number,
+  right: number,
+  bottom: number,
+  top: number,
+  radii: CornerRadii,
+) {
+  const shape = new THREE.Shape()
+  const { topLeft, topRight, bottomRight, bottomLeft } = radii
+
+  shape.moveTo(left + bottomLeft, bottom)
+  shape.lineTo(right - bottomRight, bottom)
+  if (bottomRight > 1e-6) {
+    shape.absarc(right - bottomRight, bottom + bottomRight, bottomRight, -Math.PI / 2, 0, false)
+  } else {
+    shape.lineTo(right, bottom)
+  }
+
+  shape.lineTo(right, top - topRight)
+  if (topRight > 1e-6) {
+    shape.absarc(right - topRight, top - topRight, topRight, 0, Math.PI / 2, false)
+  } else {
+    shape.lineTo(right, top)
+  }
+
+  shape.lineTo(left + topLeft, top)
+  if (topLeft > 1e-6) {
+    shape.absarc(left + topLeft, top - topLeft, topLeft, Math.PI / 2, Math.PI, false)
+  } else {
+    shape.lineTo(left, top)
+  }
+
+  shape.lineTo(left, bottom + bottomLeft)
+  if (bottomLeft > 1e-6) {
+    shape.absarc(left + bottomLeft, bottom + bottomLeft, bottomLeft, Math.PI, Math.PI * 1.5, false)
+  } else {
+    shape.lineTo(left, bottom)
+  }
+
+  shape.closePath()
+  return shape
+}
+
+function createRoundedFrameShape(
+  width: number,
+  height: number,
+  frameThickness: number,
+  outerRadii: CornerRadii,
+) {
+  const halfWidth = width / 2
+  const bottom = -height / 2
+  const top = height / 2
+  const outer = createRoundedShape(-halfWidth, halfWidth, bottom, top, outerRadii)
+  const inset = Math.min(frameThickness, width / 2 - 0.005, height / 2 - 0.005)
+
+  if (inset <= 0.001) return outer
+
+  const innerLeft = -halfWidth + inset
+  const innerRight = halfWidth - inset
+  const innerBottom = bottom + inset
+  const innerTop = top - inset
+  const innerRadii = insetCornerRadii(
+    outerRadii,
+    inset,
+    innerRight - innerLeft,
+    innerTop - innerBottom,
+  )
+  const holeShape = createRoundedShape(innerLeft, innerRight, innerBottom, innerTop, innerRadii)
+  const hole = new THREE.Path(holeShape.getPoints(32).reverse())
+  outer.holes.push(hole)
+
+  return outer
+}
+
+function getClampedArchHeight(width: number, height: number, archHeight: number | undefined) {
+  return Math.min(Math.max(archHeight ?? width / 2, 0.01), Math.max(height, 0.01))
+}
+
+function createArchShape(
+  left: number,
+  right: number,
+  bottom: number,
+  top: number,
+  archHeight: number,
+) {
+  const centerX = (left + right) / 2
+  const halfWidth = (right - left) / 2
+  const clampedArchHeight = getClampedArchHeight(right - left, top - bottom, archHeight)
+  const springY = top - clampedArchHeight
+  const shape = new THREE.Shape()
+  const segments = 32
+
+  shape.moveTo(left, bottom)
+  shape.lineTo(right, bottom)
+  shape.lineTo(right, springY)
+  for (let index = 1; index <= segments; index += 1) {
+    const x = right + (left - right) * (index / segments)
+    shape.lineTo(x, getArchBoundaryY(x - centerX, halfWidth, springY, clampedArchHeight))
+  }
+  shape.lineTo(left, bottom)
+  shape.closePath()
+  return shape
+}
+
+function createArchedFrameShape(
+  width: number,
+  height: number,
+  archHeight: number,
+  frameThickness: number,
+) {
+  const halfWidth = width / 2
+  const bottom = -height / 2
+  const top = height / 2
+  const outer = createArchShape(-halfWidth, halfWidth, bottom, top, archHeight)
+  const inset = Math.min(frameThickness, width / 2 - 0.005, height / 2 - 0.005)
+
+  if (inset <= 0.001) return outer
+
+  const innerLeft = -halfWidth + inset
+  const innerRight = halfWidth - inset
+  const innerBottom = bottom + inset
+  const innerTop = top - inset
+  const innerArchHeight = getClampedArchHeight(
+    innerRight - innerLeft,
+    innerTop - innerBottom,
+    archHeight - inset,
+  )
+  const hole = new THREE.Path(
+    createArchShape(innerLeft, innerRight, innerBottom, innerTop, innerArchHeight)
+      .getPoints(32)
+      .reverse(),
+  )
+  outer.holes.push(hole)
+
+  return outer
+}
+
+function getArchBoundaryY(x: number, halfWidth: number, springY: number, archHeight: number) {
+  if (halfWidth <= 1e-6) return springY
+  const t = Math.min(Math.abs(x) / halfWidth, 1)
+  return springY + archHeight * Math.sqrt(Math.max(1 - t * t, 0))
+}
+
+function getArchedOpeningHalfWidthAtY(
+  y: number,
+  halfWidth: number,
+  springY: number,
+  archHeight: number,
+) {
+  if (y <= springY || archHeight <= 1e-6) return halfWidth
+  const normalizedY = Math.min(Math.max((y - springY) / archHeight, 0), 1)
+  return halfWidth * Math.sqrt(Math.max(1 - normalizedY * normalizedY, 0))
+}
+
+function getRoundedBoundaryYAtX(
+  x: number,
+  left: number,
+  right: number,
+  top: number,
+  radii: CornerRadii,
+) {
+  if (radii.topLeft > 1e-6 && x < left + radii.topLeft) {
+    const centerX = left + radii.topLeft
+    const centerY = top - radii.topLeft
+    const dx = x - centerX
+    return centerY + Math.sqrt(Math.max(radii.topLeft * radii.topLeft - dx * dx, 0))
+  }
+
+  if (radii.topRight > 1e-6 && x > right - radii.topRight) {
+    const centerX = right - radii.topRight
+    const centerY = top - radii.topRight
+    const dx = x - centerX
+    return centerY + Math.sqrt(Math.max(radii.topRight * radii.topRight - dx * dx, 0))
+  }
+
+  return top
+}
+
+function getRoundedHorizontalBoundsAtY(
+  y: number,
+  left: number,
+  right: number,
+  top: number,
+  radii: CornerRadii,
+) {
+  let minX = left
+  let maxX = right
+
+  if (radii.topLeft > 1e-6 && y > top - radii.topLeft) {
+    const centerX = left + radii.topLeft
+    const centerY = top - radii.topLeft
+    const dy = y - centerY
+    minX = centerX - Math.sqrt(Math.max(radii.topLeft * radii.topLeft - dy * dy, 0))
+  }
+
+  if (radii.topRight > 1e-6 && y > top - radii.topRight) {
+    const centerX = right - radii.topRight
+    const centerY = top - radii.topRight
+    const dy = y - centerY
+    maxX = centerX + Math.sqrt(Math.max(radii.topRight * radii.topRight - dy * dy, 0))
+  }
+
+  return { minX, maxX }
+}
+
+function addRoundedWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
+  const {
+    width,
+    height,
+    frameDepth,
+    frameThickness,
+    columnRatios,
+    rowRatios,
+    columnDividerThickness,
+    rowDividerThickness,
+    sill,
+    sillDepth,
+    sillThickness,
+  } = node
+  const halfWidth = width / 2
+  const bottom = -height / 2
+  const top = height / 2
+  const outerRadii = getWindowRoundedRadii(node, width, height)
+  const inset = Math.max(0, Math.min(frameThickness, width / 2 - 0.005, height / 2 - 0.005))
+  const innerLeft = -halfWidth + inset
+  const innerRight = halfWidth - inset
+  const innerBottom = bottom + inset
+  const innerTop = top - inset
+  const innerW = innerRight - innerLeft
+  const innerH = innerTop - innerBottom
+  const innerRadii = insetCornerRadii(outerRadii, inset, innerW, innerH)
+
+  addShape(
+    mesh,
+    baseMaterial,
+    createRoundedFrameShape(width, height, inset, outerRadii),
+    frameDepth,
+  )
+
+  if (innerW > 0.01 && innerH > 0.01) {
+    const glassDepth = Math.max(0.004, frameDepth * 0.08)
+    addShape(
+      mesh,
+      glassMaterial,
+      createRoundedShape(innerLeft, innerRight, innerBottom, innerTop, innerRadii),
+      glassDepth,
+    )
+
+    const numCols = columnRatios.length
+    const numRows = rowRatios.length
+    const usableW = innerW - (numCols - 1) * columnDividerThickness
+    const usableH = innerH - (numRows - 1) * rowDividerThickness
+    const colSum = columnRatios.reduce((a, b) => a + b, 0)
+    const rowSum = rowRatios.reduce((a, b) => a + b, 0)
+    const colWidths = columnRatios.map((r) => (r / colSum) * usableW)
+    const rowHeights = rowRatios.map((r) => (r / rowSum) * usableH)
+
+    let x = innerLeft
+    for (let c = 0; c < numCols - 1; c++) {
+      x += colWidths[c]!
+      const x1 = x
+      const x2 = x + columnDividerThickness
+      const dividerTop = Math.min(
+        getRoundedBoundaryYAtX(x1, innerLeft, innerRight, innerTop, innerRadii),
+        getRoundedBoundaryYAtX(x2, innerLeft, innerRight, innerTop, innerRadii),
+      )
+      if (dividerTop > innerBottom + 0.01) {
+        addShape(
+          mesh,
+          baseMaterial,
+          createRectShape(x1, x2, innerBottom, dividerTop),
+          frameDepth + 0.001,
+        )
+      }
+      x += columnDividerThickness
+    }
+
+    let y = innerTop
+    for (let r = 0; r < numRows - 1; r++) {
+      y -= rowHeights[r]!
+      const yTop = y
+      const yBottom = y - rowDividerThickness
+      const { minX, maxX } = getRoundedHorizontalBoundsAtY(
+        yTop,
+        innerLeft,
+        innerRight,
+        innerTop,
+        innerRadii,
+      )
+      if (maxX - minX > 0.01 && yTop > innerBottom) {
+        addShape(
+          mesh,
+          baseMaterial,
+          createRectShape(minX, maxX, Math.max(yBottom, innerBottom), yTop),
+          frameDepth + 0.001,
+        )
+      }
+      y -= rowDividerThickness
+    }
+  }
+
+  if (sill) {
+    const sillW = width + sillDepth * 0.4
+    const sillZ = frameDepth / 2 + sillDepth / 2
+    addBox(
+      mesh,
+      baseMaterial,
+      sillW,
+      sillThickness,
+      sillDepth,
+      0,
+      -height / 2 - sillThickness / 2,
+      sillZ,
+    )
+  }
+}
+
+function addArchedWindowVisuals(node: WindowNode, mesh: THREE.Mesh) {
+  const {
+    width,
+    height,
+    frameDepth,
+    frameThickness,
+    columnRatios,
+    rowRatios,
+    columnDividerThickness,
+    rowDividerThickness,
+    sill,
+    sillDepth,
+    sillThickness,
+  } = node
+  const halfWidth = width / 2
+  const bottom = -height / 2
+  const top = height / 2
+  const archHeight = getClampedArchHeight(width, height, node.archHeight)
+  const inset = Math.max(0, Math.min(frameThickness, width / 2 - 0.005, height / 2 - 0.005))
+  const innerLeft = -halfWidth + inset
+  const innerRight = halfWidth - inset
+  const innerBottom = bottom + inset
+  const innerTop = top - inset
+  const innerW = innerRight - innerLeft
+  const innerH = innerTop - innerBottom
+  const innerArchHeight = getClampedArchHeight(innerW, innerH, archHeight - inset)
+  const innerSpringY = innerTop - innerArchHeight
+
+  addShape(mesh, baseMaterial, createArchedFrameShape(width, height, archHeight, inset), frameDepth)
+
+  if (innerW > 0.01 && innerH > 0.01) {
+    const glassDepth = Math.max(0.004, frameDepth * 0.08)
+    addShape(
+      mesh,
+      glassMaterial,
+      createArchShape(innerLeft, innerRight, innerBottom, innerTop, innerArchHeight),
+      glassDepth,
+    )
+
+    const numCols = columnRatios.length
+    const numRows = rowRatios.length
+    const usableW = innerW - (numCols - 1) * columnDividerThickness
+    const usableH = innerH - (numRows - 1) * rowDividerThickness
+    const colSum = columnRatios.reduce((a, b) => a + b, 0)
+    const rowSum = rowRatios.reduce((a, b) => a + b, 0)
+    const colWidths = columnRatios.map((r) => (r / colSum) * usableW)
+    const rowHeights = rowRatios.map((r) => (r / rowSum) * usableH)
+    const innerHalfWidth = innerW / 2
+
+    let x = innerLeft
+    for (let c = 0; c < numCols - 1; c++) {
+      x += colWidths[c]!
+      const x1 = x
+      const x2 = x + columnDividerThickness
+      const dividerTop = Math.min(
+        getArchBoundaryY(x1, innerHalfWidth, innerSpringY, innerArchHeight),
+        getArchBoundaryY(x2, innerHalfWidth, innerSpringY, innerArchHeight),
+      )
+      if (dividerTop > innerBottom + 0.01) {
+        addShape(
+          mesh,
+          baseMaterial,
+          createRectShape(x1, x2, innerBottom, dividerTop),
+          frameDepth + 0.001,
+        )
+      }
+      x += columnDividerThickness
+    }
+
+    let y = innerTop
+    for (let r = 0; r < numRows - 1; r++) {
+      y -= rowHeights[r]!
+      const yTop = y
+      const yBottom = y - rowDividerThickness
+      const halfAtTop = getArchedOpeningHalfWidthAtY(
+        yTop,
+        innerHalfWidth,
+        innerSpringY,
+        innerArchHeight,
+      )
+      const x1 = -halfAtTop
+      const x2 = halfAtTop
+      if (x2 - x1 > 0.01 && yTop > innerBottom) {
+        addShape(
+          mesh,
+          baseMaterial,
+          createRectShape(x1, x2, Math.max(yBottom, innerBottom), yTop),
+          frameDepth + 0.001,
+        )
+      }
+      y -= rowDividerThickness
+    }
+  }
+
+  if (sill) {
+    const sillW = width + sillDepth * 0.4
+    const sillZ = frameDepth / 2 + sillDepth / 2
+    addBox(
+      mesh,
+      baseMaterial,
+      sillW,
+      sillThickness,
+      sillDepth,
+      0,
+      -height / 2 - sillThickness / 2,
+      sillZ,
+    )
+  }
+}
+
 function updateWindowMesh(node: WindowNode, mesh: THREE.Mesh) {
   // Root mesh is an invisible hitbox; all visuals live in child meshes
   mesh.geometry.dispose()
@@ -85,6 +595,7 @@ function updateWindowMesh(node: WindowNode, mesh: THREE.Mesh) {
     sillDepth,
     sillThickness,
     openingKind,
+    openingShape,
   } = node
 
   if (openingKind === 'opening') {
@@ -92,6 +603,18 @@ function updateWindowMesh(node: WindowNode, mesh: THREE.Mesh) {
     return
   }
 
+  if (openingShape === 'arch') {
+    addArchedWindowVisuals(node, mesh)
+    syncWindowCutout(node, mesh)
+    return
+  }
+
+  if (openingShape === 'rounded') {
+    addRoundedWindowVisuals(node, mesh)
+    syncWindowCutout(node, mesh)
+    return
+  }
+
   const innerW = width - 2 * frameThickness
   const innerH = height - 2 * frameThickness
 
@@ -252,6 +775,40 @@ function syncWindowCutout(node: WindowNode, mesh: THREE.Mesh) {
     mesh.add(cutout)
   }
   cutout.geometry.dispose()
+  if (node.openingShape === 'arch') {
+    cutout.geometry = new THREE.ExtrudeGeometry(
+      createArchShape(
+        -node.width / 2,
+        node.width / 2,
+        -node.height / 2,
+        node.height / 2,
+        getClampedArchHeight(node.width, node.height, node.archHeight),
+      ),
+      {
+        depth: 1,
+        bevelEnabled: false,
+        curveSegments: 24,
+      },
+    )
+    cutout.geometry.translate(0, 0, -0.5)
+  } else if (node.openingShape === 'rounded') {
+    cutout.geometry = new THREE.ExtrudeGeometry(
+      createRoundedShape(
+        -node.width / 2,
+        node.width / 2,
+        -node.height / 2,
+        node.height / 2,
+        getWindowRoundedRadii(node, node.width, node.height),
+      ),
+      {
+        depth: 1,
+        bevelEnabled: false,
+        curveSegments: 24,
+      },
+    )
+    cutout.geometry.translate(0, 0, -0.5)
+  } else {
     cutout.geometry = new THREE.BoxGeometry(node.width, node.height, 1.0)
+  }
   cutout.visible = false
 }