npm - @pascal-app/editor - Versions diffs - 0.4.0 - Mend

@pascal-app/editor 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (165) hide show

package/package.json +62 -0
package/src/components/editor/custom-camera-controls.tsx +387 -0
package/src/components/editor/editor-layout-v2.tsx +220 -0
package/src/components/editor/export-manager.tsx +78 -0
package/src/components/editor/first-person-controls.tsx +249 -0
package/src/components/editor/floating-action-menu.tsx +231 -0
package/src/components/editor/floorplan-panel.tsx +9609 -0
package/src/components/editor/grid.tsx +161 -0
package/src/components/editor/index.tsx +928 -0
package/src/components/editor/node-action-menu.tsx +66 -0
package/src/components/editor/preset-thumbnail-generator.tsx +125 -0
package/src/components/editor/selection-manager.tsx +897 -0
package/src/components/editor/site-edge-labels.tsx +90 -0
package/src/components/editor/thumbnail-generator.tsx +166 -0
package/src/components/editor/wall-measurement-label.tsx +258 -0
package/src/components/feedback-dialog.tsx +265 -0
package/src/components/pascal-radio.tsx +280 -0
package/src/components/preview-button.tsx +16 -0
package/src/components/systems/ceiling/ceiling-system.tsx +77 -0
package/src/components/systems/roof/roof-edit-system.tsx +69 -0
package/src/components/systems/stair/stair-edit-system.tsx +69 -0
package/src/components/systems/zone/zone-label-editor-system.tsx +320 -0
package/src/components/systems/zone/zone-system.tsx +87 -0
package/src/components/tools/ceiling/ceiling-boundary-editor.tsx +42 -0
package/src/components/tools/ceiling/ceiling-hole-editor.tsx +47 -0
package/src/components/tools/ceiling/ceiling-tool.tsx +465 -0
package/src/components/tools/door/door-math.ts +110 -0
package/src/components/tools/door/door-tool.tsx +293 -0
package/src/components/tools/door/move-door-tool.tsx +373 -0
package/src/components/tools/item/item-tool.tsx +26 -0
package/src/components/tools/item/move-tool.tsx +90 -0
package/src/components/tools/item/placement-math.ts +85 -0
package/src/components/tools/item/placement-strategies.ts +556 -0
package/src/components/tools/item/placement-types.ts +117 -0
package/src/components/tools/item/use-draft-node.ts +227 -0
package/src/components/tools/item/use-placement-coordinator.tsx +877 -0
package/src/components/tools/roof/move-roof-tool.tsx +288 -0
package/src/components/tools/roof/roof-tool.tsx +318 -0
package/src/components/tools/select/box-select-tool.tsx +626 -0
package/src/components/tools/shared/cursor-sphere.tsx +119 -0
package/src/components/tools/shared/polygon-editor.tsx +361 -0
package/src/components/tools/site/site-boundary-editor.tsx +42 -0
package/src/components/tools/slab/slab-boundary-editor.tsx +42 -0
package/src/components/tools/slab/slab-hole-editor.tsx +47 -0
package/src/components/tools/slab/slab-tool.tsx +322 -0
package/src/components/tools/stair/stair-defaults.ts +7 -0
package/src/components/tools/stair/stair-tool.tsx +194 -0
package/src/components/tools/tool-manager.tsx +120 -0
package/src/components/tools/wall/wall-drafting.ts +140 -0
package/src/components/tools/wall/wall-tool.tsx +210 -0
package/src/components/tools/window/move-window-tool.tsx +410 -0
package/src/components/tools/window/window-math.ts +117 -0
package/src/components/tools/window/window-tool.tsx +303 -0
package/src/components/tools/zone/zone-boundary-editor.tsx +39 -0
package/src/components/tools/zone/zone-tool.tsx +364 -0
package/src/components/ui/action-menu/action-button.tsx +59 -0
package/src/components/ui/action-menu/camera-actions.tsx +74 -0
package/src/components/ui/action-menu/control-modes.tsx +240 -0
package/src/components/ui/action-menu/furnish-tools.tsx +102 -0
package/src/components/ui/action-menu/index.tsx +152 -0
package/src/components/ui/action-menu/structure-tools.tsx +100 -0
package/src/components/ui/action-menu/view-toggles.tsx +397 -0
package/src/components/ui/command-palette/editor-commands.tsx +396 -0
package/src/components/ui/command-palette/index.tsx +730 -0
package/src/components/ui/controls/action-button.tsx +33 -0
package/src/components/ui/controls/material-picker.tsx +194 -0
package/src/components/ui/controls/metric-control.tsx +262 -0
package/src/components/ui/controls/panel-section.tsx +65 -0
package/src/components/ui/controls/segmented-control.tsx +45 -0
package/src/components/ui/controls/slider-control.tsx +245 -0
package/src/components/ui/controls/toggle-control.tsx +38 -0
package/src/components/ui/floating-level-selector.tsx +355 -0
package/src/components/ui/helpers/ceiling-helper.tsx +20 -0
package/src/components/ui/helpers/helper-manager.tsx +33 -0
package/src/components/ui/helpers/item-helper.tsx +40 -0
package/src/components/ui/helpers/roof-helper.tsx +16 -0
package/src/components/ui/helpers/slab-helper.tsx +20 -0
package/src/components/ui/helpers/wall-helper.tsx +20 -0
package/src/components/ui/item-catalog/catalog-items.tsx +1580 -0
package/src/components/ui/item-catalog/item-catalog.tsx +219 -0
package/src/components/ui/panels/ceiling-panel.tsx +230 -0
package/src/components/ui/panels/collections/collections-popover.tsx +356 -0
package/src/components/ui/panels/door-panel.tsx +600 -0
package/src/components/ui/panels/item-panel.tsx +306 -0
package/src/components/ui/panels/panel-manager.tsx +59 -0
package/src/components/ui/panels/panel-wrapper.tsx +80 -0
package/src/components/ui/panels/presets/presets-popover.tsx +511 -0
package/src/components/ui/panels/reference-panel.tsx +177 -0
package/src/components/ui/panels/roof-panel.tsx +262 -0
package/src/components/ui/panels/roof-segment-panel.tsx +326 -0
package/src/components/ui/panels/slab-panel.tsx +228 -0
package/src/components/ui/panels/stair-panel.tsx +304 -0
package/src/components/ui/panels/stair-segment-panel.tsx +339 -0
package/src/components/ui/panels/wall-panel.tsx +123 -0
package/src/components/ui/panels/window-panel.tsx +441 -0
package/src/components/ui/primitives/button.tsx +69 -0
package/src/components/ui/primitives/card.tsx +75 -0
package/src/components/ui/primitives/color-dot.tsx +61 -0
package/src/components/ui/primitives/context-menu.tsx +227 -0
package/src/components/ui/primitives/dialog.tsx +129 -0
package/src/components/ui/primitives/dropdown-menu.tsx +228 -0
package/src/components/ui/primitives/error-boundary.tsx +52 -0
package/src/components/ui/primitives/input.tsx +21 -0
package/src/components/ui/primitives/number-input.tsx +187 -0
package/src/components/ui/primitives/opacity-control.tsx +79 -0
package/src/components/ui/primitives/popover.tsx +42 -0
package/src/components/ui/primitives/separator.tsx +28 -0
package/src/components/ui/primitives/sheet.tsx +130 -0
package/src/components/ui/primitives/shortcut-token.tsx +64 -0
package/src/components/ui/primitives/sidebar.tsx +855 -0
package/src/components/ui/primitives/skeleton.tsx +13 -0
package/src/components/ui/primitives/slider.tsx +58 -0
package/src/components/ui/primitives/switch.tsx +29 -0
package/src/components/ui/primitives/tooltip.tsx +57 -0
package/src/components/ui/scene-loader.tsx +40 -0
package/src/components/ui/sidebar/app-sidebar.tsx +103 -0
package/src/components/ui/sidebar/icon-rail.tsx +147 -0
package/src/components/ui/sidebar/panels/settings-panel/audio-settings-dialog.tsx +100 -0
package/src/components/ui/sidebar/panels/settings-panel/index.tsx +438 -0
package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx +188 -0
package/src/components/ui/sidebar/panels/site-panel/building-tree-node.tsx +80 -0
package/src/components/ui/sidebar/panels/site-panel/ceiling-tree-node.tsx +126 -0
package/src/components/ui/sidebar/panels/site-panel/door-tree-node.tsx +64 -0
package/src/components/ui/sidebar/panels/site-panel/index.tsx +1543 -0
package/src/components/ui/sidebar/panels/site-panel/inline-rename-input.tsx +98 -0
package/src/components/ui/sidebar/panels/site-panel/item-tree-node.tsx +117 -0
package/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx +65 -0
package/src/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx +214 -0
package/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx +96 -0
package/src/components/ui/sidebar/panels/site-panel/stair-tree-node.tsx +216 -0
package/src/components/ui/sidebar/panels/site-panel/tree-node-actions.tsx +115 -0
package/src/components/ui/sidebar/panels/site-panel/tree-node-drag.tsx +342 -0
package/src/components/ui/sidebar/panels/site-panel/tree-node.tsx +271 -0
package/src/components/ui/sidebar/panels/site-panel/wall-tree-node.tsx +106 -0
package/src/components/ui/sidebar/panels/site-panel/window-tree-node.tsx +64 -0
package/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx +87 -0
package/src/components/ui/sidebar/panels/zone-panel/index.tsx +167 -0
package/src/components/ui/sidebar/tab-bar.tsx +39 -0
package/src/components/ui/slider-demo.tsx +36 -0
package/src/components/ui/slider.tsx +81 -0
package/src/components/ui/viewer-toolbar.tsx +342 -0
package/src/components/viewer-overlay.tsx +499 -0
package/src/components/viewer-zone-system.tsx +48 -0
package/src/contexts/presets-context.tsx +121 -0
package/src/hooks/use-auto-save.ts +194 -0
package/src/hooks/use-contextual-tools.ts +52 -0
package/src/hooks/use-grid-events.ts +106 -0
package/src/hooks/use-keyboard.ts +214 -0
package/src/hooks/use-mobile.ts +19 -0
package/src/hooks/use-reduced-motion.ts +20 -0
package/src/index.tsx +33 -0
package/src/lib/constants.ts +3 -0
package/src/lib/level-selection.ts +31 -0
package/src/lib/scene.ts +394 -0
package/src/lib/sfx/index.ts +2 -0
package/src/lib/sfx-bus.ts +49 -0
package/src/lib/sfx-player.ts +60 -0
package/src/lib/utils.ts +43 -0
package/src/store/use-audio.tsx +45 -0
package/src/store/use-command-registry.ts +36 -0
package/src/store/use-editor.tsx +522 -0
package/src/store/use-palette-view-registry.ts +45 -0
package/src/store/use-upload.ts +90 -0
package/src/three-types.ts +3 -0
package/tsconfig.json +9 -0

package/src/components/editor/site-edge-labels.tsx ADDED Viewed

@@ -0,0 +1,90 @@
+'use client'
+import type { SiteNode } from '@pascal-app/core'
+import { sceneRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
+import { createPortal, useFrame } from '@react-three/fiber'
+import { useMemo, useRef, useState } from 'react'
+import type { Object3D } from 'three'
+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`
+}
+export function SiteEdgeLabels() {
+  const rootNodeIds = useScene((state) => state.rootNodeIds)
+  const nodes = useScene((state) => state.nodes)
+  const unit = useViewer((state) => state.unit)
+  const theme = useViewer((state) => state.theme)
+  const siteNode = rootNodeIds[0] ? (nodes[rootNodeIds[0]] as SiteNode) : null
+  const siteNodeId = siteNode?.id
+  const isNight = theme === 'dark'
+  const color = isNight ? '#ffffff' : '#111111'
+  const shadowColor = isNight ? '#111111' : '#ffffff'
+  const [siteObj, setSiteObj] = useState<Object3D | null>(null)
+  const prevSiteNodeIdRef = useRef<string | undefined>(undefined)
+  // Poll each frame until the site group is registered.
+  // Also resets when the site node ID changes (new project loaded).
+  useFrame(() => {
+    if (siteNodeId !== prevSiteNodeIdRef.current) {
+      prevSiteNodeIdRef.current = siteNodeId
+      setSiteObj(null)
+      return
+    }
+    if (siteObj || !siteNodeId) return
+    const obj = sceneRegistry.nodes.get(siteNodeId)
+    if (obj) setSiteObj(obj)
+  })
+  const edges = useMemo(() => {
+    const polygon = siteNode?.polygon?.points ?? []
+    if (polygon.length < 2) return []
+    return polygon.map(([x1, z1], i) => {
+      const [x2, z2] = polygon[(i + 1) % polygon.length]!
+      const midX = (x1! + x2) / 2
+      const midZ = (z1! + z2) / 2
+      const dist = Math.sqrt((x2 - x1!) ** 2 + (z2 - z1!) ** 2)
+      return { midX, midZ, dist }
+    })
+  }, [siteNode?.polygon?.points])
+  if (!siteObj || edges.length === 0) return null
+  return createPortal(
+    <>
+      {edges.map((edge, i) => (
+        <Html
+          center
+          key={`edge-${i}`}
+          occlude
+          position={[edge.midX, 0.5, edge.midZ]}
+          style={{ pointerEvents: 'none', userSelect: 'none' }}
+          zIndexRange={[10, 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}`,
+            }}
+          >
+            {formatMeasurement(edge.dist, unit)}
+          </div>
+        </Html>
+      ))}
+    </>,
+    siteObj,
+  )
+}

package/src/components/editor/thumbnail-generator.tsx ADDED Viewed

@@ -0,0 +1,166 @@
+'use client'
+import { emitter, sceneRegistry, useScene } from '@pascal-app/core'
+import { snapLevelsToTruePositions } from '@pascal-app/viewer'
+import { useThree } from '@react-three/fiber'
+import { useCallback, useEffect, useRef } from 'react'
+import * as THREE from 'three'
+import { EDITOR_LAYER } from '../../lib/constants'
+const THUMBNAIL_WIDTH = 1920
+const THUMBNAIL_HEIGHT = 1080
+const AUTO_SAVE_DELAY = 10_000
+interface ThumbnailGeneratorProps {
+  onThumbnailCapture?: (blob: Blob) => void
+}
+export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorProps) => {
+  const gl = useThree((state) => state.gl)
+  const scene = useThree((state) => state.scene)
+  const isGenerating = useRef(false)
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const pendingAutoRef = useRef(false)
+  const onThumbnailCaptureRef = useRef(onThumbnailCapture)
+  useEffect(() => {
+    onThumbnailCaptureRef.current = onThumbnailCapture
+  }, [onThumbnailCapture])
+  const generate = useCallback(async () => {
+    if (isGenerating.current) return
+    if (!onThumbnailCaptureRef.current) return
+    isGenerating.current = true
+    try {
+      const thumbnailCamera = new THREE.PerspectiveCamera(
+        60,
+        THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT,
+        0.1,
+        1000,
+      )
+      const nodes = useScene.getState().nodes
+      const siteNode = Object.values(nodes).find((n) => n.type === 'site')
+      if (siteNode?.camera) {
+        const { position, target } = siteNode.camera
+        thumbnailCamera.position.set(position[0], position[1], position[2])
+        thumbnailCamera.lookAt(target[0], target[1], target[2])
+      } else {
+        thumbnailCamera.position.set(8, 8, 8)
+        thumbnailCamera.lookAt(0, 0, 0)
+      }
+      thumbnailCamera.layers.disable(EDITOR_LAYER)
+      const { width, height } = gl.domElement
+      thumbnailCamera.aspect = width / height
+      thumbnailCamera.updateProjectionMatrix()
+      const restoreLevels = snapLevelsToTruePositions()
+      const visibilitySnapshot = new Map<string, boolean>()
+      for (const type of ['scan', 'guide'] as const) {
+        sceneRegistry.byType[type].forEach((id) => {
+          const obj = sceneRegistry.nodes.get(id)
+          if (obj) {
+            visibilitySnapshot.set(id, obj.visible)
+            obj.visible = false
+          }
+        })
+      }
+      gl.render(scene, thumbnailCamera)
+      restoreLevels()
+      visibilitySnapshot.forEach((wasVisible, id) => {
+        const obj = sceneRegistry.nodes.get(id)
+        if (obj) obj.visible = wasVisible
+      })
+      const srcAspect = width / height
+      const dstAspect = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT
+      let sx = 0,
+        sy = 0,
+        sWidth = width,
+        sHeight = height
+      if (srcAspect > dstAspect) {
+        sWidth = Math.round(height * dstAspect)
+        sx = Math.round((width - sWidth) / 2)
+      } else if (srcAspect < dstAspect) {
+        sHeight = Math.round(width / dstAspect)
+        sy = Math.round((height - sHeight) / 2)
+      }
+      const offscreen = document.createElement('canvas')
+      offscreen.width = THUMBNAIL_WIDTH
+      offscreen.height = THUMBNAIL_HEIGHT
+      const ctx = offscreen.getContext('2d')!
+      ctx.drawImage(gl.domElement, sx, sy, sWidth, sHeight, 0, 0, THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT)
+      offscreen.toBlob((blob) => {
+        if (blob) {
+          onThumbnailCaptureRef.current?.(blob)
+        } else {
+          console.error('❌ Failed to create blob from canvas')
+        }
+        isGenerating.current = false
+      }, 'image/png')
+    } catch (error) {
+      console.error('❌ Failed to generate thumbnail:', error)
+      isGenerating.current = false
+    }
+  }, [gl, scene])
+  // Manual trigger via emitter
+  useEffect(() => {
+    const handleGenerateThumbnail = async () => {
+      await generate()
+    }
+    emitter.on('camera-controls:generate-thumbnail', handleGenerateThumbnail)
+    return () => emitter.off('camera-controls:generate-thumbnail', handleGenerateThumbnail)
+  }, [generate])
+  // Auto-trigger: debounced on scene changes, deferred if tab is hidden
+  useEffect(() => {
+    if (!onThumbnailCapture) return
+    const triggerNow = () => generate()
+    const scheduleOrDefer = () => {
+      if (document.visibilityState === 'visible') {
+        triggerNow()
+      } else {
+        pendingAutoRef.current = true
+      }
+    }
+    const onSceneChange = () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
+      debounceTimerRef.current = setTimeout(scheduleOrDefer, AUTO_SAVE_DELAY)
+    }
+    const onVisibilityChange = () => {
+      if (document.visibilityState === 'visible' && pendingAutoRef.current) {
+        pendingAutoRef.current = false
+        triggerNow()
+      }
+    }
+    const unsubscribe = useScene.subscribe((state, prevState) => {
+      if (state.nodes !== prevState.nodes) onSceneChange()
+    })
+    document.addEventListener('visibilitychange', onVisibilityChange)
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
+      unsubscribe()
+      document.removeEventListener('visibilitychange', onVisibilityChange)
+    }
+  }, [onThumbnailCapture, generate])
+  return null
+}

package/src/components/editor/wall-measurement-label.tsx ADDED Viewed

@@ -0,0 +1,258 @@
+'use client'
+import {
+  type AnyNodeId,
+  calculateLevelMiters,
+  DEFAULT_WALL_HEIGHT,
+  getWallPlanFootprint,
+  type Point2D,
+  pointToKey,
+  sceneRegistry,
+  useScene,
+  type WallMiterData,
+  type WallNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
+import { createPortal, useFrame } from '@react-three/fiber'
+import { useEffect, useMemo, useState } from 'react'
+import * as THREE from 'three'
+const GUIDE_Y_OFFSET = 0.08
+const LABEL_LIFT = 0.08
+const BAR_THICKNESS = 0.012
+const LINE_OPACITY = 0.95
+const BAR_AXIS = new THREE.Vector3(0, 1, 0)
+type Vec3 = [number, number, number]
+type MeasurementGuide = {
+  guideStart: Vec3
+  guideEnd: Vec3
+  extStartStart: Vec3
+  extStartEnd: Vec3
+  extEndStart: Vec3
+  extEndEnd: Vec3
+  labelPosition: Vec3
+}
+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`
+}
+export function WallMeasurementLabel() {
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const nodes = useScene((state) => state.nodes)
+  const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
+  const selectedNode = selectedId ? nodes[selectedId as WallNode['id']] : null
+  const wall = selectedNode?.type === 'wall' ? selectedNode : null
+  const [wallObject, setWallObject] = useState<THREE.Object3D | null>(null)
+  useEffect(() => {
+    setWallObject(null)
+  }, [selectedId])
+  useFrame(() => {
+    if (!selectedId || wallObject) return
+    const nextWallObject = sceneRegistry.nodes.get(selectedId)
+    if (nextWallObject) {
+      setWallObject(nextWallObject)
+    }
+  })
+  if (!(wall && wallObject)) return null
+  return createPortal(<WallMeasurementAnnotation wall={wall} />, wallObject)
+}
+function getLevelWalls(
+  wall: WallNode,
+  nodes: Record<string, WallNode | { type: string; children?: string[] }>,
+): WallNode[] {
+  if (!wall.parentId) return [wall]
+  const levelNode = nodes[wall.parentId as AnyNodeId]
+  if (!(levelNode && levelNode.type === 'level' && Array.isArray(levelNode.children))) {
+    return [wall]
+  }
+  return levelNode.children
+    .map((childId) => nodes[childId as AnyNodeId])
+    .filter((node): node is WallNode => Boolean(node && node.type === 'wall'))
+}
+function getWallMiddlePoints(
+  wall: WallNode,
+  miterData: WallMiterData,
+): { start: Point2D; end: Point2D } | null {
+  const footprint = getWallPlanFootprint(wall, miterData)
+  if (footprint.length < 4) return null
+  const startKey = pointToKey({ x: wall.start[0], y: wall.start[1] })
+  const startJunction = miterData.junctionData.get(startKey)?.get(wall.id)
+  const rightStart = footprint[0]
+  const rightEnd = footprint[1]
+  const leftEnd = footprint[startJunction ? footprint.length - 3 : footprint.length - 2]
+  const leftStart = footprint[startJunction ? footprint.length - 2 : footprint.length - 1]
+  if (!(leftStart && leftEnd && rightStart && rightEnd)) return null
+  return {
+    start: {
+      x: (leftStart.x + rightStart.x) / 2,
+      y: (leftStart.y + rightStart.y) / 2,
+    },
+    end: {
+      x: (leftEnd.x + rightEnd.x) / 2,
+      y: (leftEnd.y + rightEnd.y) / 2,
+    },
+  }
+}
+function worldPointToWallLocal(wall: WallNode, point: Point2D): Vec3 {
+  const dx = point.x - wall.start[0]
+  const dz = point.y - wall.start[1]
+  const angle = Math.atan2(wall.end[1] - wall.start[1], wall.end[0] - wall.start[0])
+  const cosA = Math.cos(-angle)
+  const sinA = Math.sin(-angle)
+  return [dx * cosA - dz * sinA, 0, dx * sinA + dz * cosA]
+}
+function buildMeasurementGuide(
+  wall: WallNode,
+  nodes: Record<string, WallNode | { type: string; children?: string[] }>,
+): MeasurementGuide | null {
+  const levelWalls = getLevelWalls(wall, nodes)
+  const miterData = calculateLevelMiters(levelWalls)
+  const middlePoints = getWallMiddlePoints(wall, miterData)
+  if (!middlePoints) return null
+  const height = wall.height ?? DEFAULT_WALL_HEIGHT
+  const startLocal = worldPointToWallLocal(wall, middlePoints.start)
+  const endLocal = worldPointToWallLocal(wall, middlePoints.end)
+  const guideStart: Vec3 = [startLocal[0], height + GUIDE_Y_OFFSET, startLocal[2]]
+  const guideEnd: Vec3 = [endLocal[0], height + GUIDE_Y_OFFSET, endLocal[2]]
+  const dirX = guideEnd[0] - guideStart[0]
+  const dirZ = guideEnd[2] - guideStart[2]
+  const dirLength = Math.hypot(dirX, dirZ)
+  if (!Number.isFinite(dirLength) || dirLength < 0.001) return null
+  // Extension lines coming out of the extremity markers of the wall
+  const extOvershoot = 0.04
+  return {
+    guideStart,
+    guideEnd,
+    extStartStart: [startLocal[0], height, startLocal[2]],
+    extStartEnd: [startLocal[0], height + GUIDE_Y_OFFSET + extOvershoot, startLocal[2]],
+    extEndStart: [endLocal[0], height, endLocal[2]],
+    extEndEnd: [endLocal[0], height + GUIDE_Y_OFFSET + extOvershoot, endLocal[2]],
+    labelPosition: [
+      (guideStart[0] + guideEnd[0]) / 2,
+      guideStart[1] + LABEL_LIFT,
+      (guideStart[2] + guideEnd[2]) / 2,
+    ],
+  }
+}
+function MeasurementBar({ start, end, color }: { start: Vec3; end: Vec3; color: string }) {
+  const segment = useMemo(() => {
+    const startVector = new THREE.Vector3(...start)
+    const endVector = new THREE.Vector3(...end)
+    const direction = endVector.clone().sub(startVector)
+    const length = direction.length()
+    if (!Number.isFinite(length) || length < 0.0001) return null
+    return {
+      length,
+      position: startVector.clone().add(endVector).multiplyScalar(0.5),
+      quaternion: new THREE.Quaternion().setFromUnitVectors(BAR_AXIS, direction.normalize()),
+    }
+  }, [end, start])
+  if (!segment) return null
+  return (
+    <mesh
+      position={[segment.position.x, segment.position.y, segment.position.z]}
+      quaternion={segment.quaternion}
+      renderOrder={1000}
+    >
+      <boxGeometry args={[BAR_THICKNESS, segment.length, BAR_THICKNESS]} />
+      <meshBasicMaterial
+        color={color}
+        depthTest={false}
+        depthWrite={false}
+        opacity={LINE_OPACITY}
+        toneMapped={false}
+        transparent
+      />
+    </mesh>
+  )
+}
+function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
+  const nodes = useScene((state) => state.nodes)
+  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 dx = wall.end[0] - wall.start[0]
+  const dz = wall.end[1] - wall.start[1]
+  const length = Math.hypot(dx, dz)
+  const label = formatMeasurement(length, unit)
+  const guide = useMemo(
+    () =>
+      buildMeasurementGuide(
+        wall,
+        nodes as Record<string, WallNode | { type: string; children?: string[] }>,
+      ),
+    [nodes, wall],
+  )
+  if (!(guide && Number.isFinite(length) && length >= 0.01)) return null
+  return (
+    <group>
+      <MeasurementBar color={color} end={guide.guideEnd} start={guide.guideStart} />
+      <MeasurementBar color={color} end={guide.extStartEnd} start={guide.extStartStart} />
+      <MeasurementBar color={color} end={guide.extEndEnd} start={guide.extEndStart} />
+      <Html
+        center
+        position={guide.labelPosition}
+        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>
+    </group>
+  )
+}