@pascal-app/editor 1.0.7 → 1.1.1

package/src/components/editor/room-webgpu-materials.test.ts

@@ -6,7 +6,7 @@ import { readFileSync } from 'node:fs'
 // draft instead, so it only has to stay clear of drei fat lines.
 for (const [file, drawsLines] of [
   ['./room-controls.tsx', false],
-  ['./room-highlight.tsx', true],
+  ['../../../../viewer/src/ui/components/rooms/room-highlight.tsx', true],
   ['../../../../nodes/src/separator/renderer.tsx', true],
 ] as const) {
   test(`${file} uses WebGPU node materials instead of drei fat lines`, () => {

package/src/components/editor/selection-manager.tsx

@@ -35,6 +35,11 @@ import {
   tintEmissive,
   useViewer,
 } from '@pascal-app/viewer'
+import {
+  type SelectionModifierKeys,
+  sameRoom,
+  selectionModifiersFromEvent,
+} from '@pascal-app/viewer/ui'
 import { useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useRef } from 'react'
 import { type BufferGeometry, Color, type Material, type Mesh, type Object3D, Vector3 } from 'three'
@@ -105,7 +110,6 @@ import {
   usePaintOutline,
 } from '../../lib/plate-paint-affected'
 import { getHoveredRoofSegmentOutlineProxy } from '../../lib/roof-hover-outline-proxy'
-import { sameRoom } from '../../lib/room-selection'
 import { selectRoom, shouldInterceptRoom } from '../../lib/room-selection-commands'
 import { roomKeyForZone } from '../../lib/room-zone-routing'
 import {
@@ -114,8 +118,6 @@ import {
   resolveCanvasBuildingId,
   resolveCanvasSelectionNode,
   resolveSelectedIdsForNodeClick,
-  type SelectionModifierKeys,
-  selectionModifiersFromEvent,
   shouldPreserveSelectedRoofHostTarget,
 } from '../../lib/selection-routing'
 import { emitDeleteSFX, sfxEmitter } from '../../lib/sfx-bus'

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

@@ -1,16 +1,20 @@
 'use client'
 
 import type { SiteNode } from '@pascal-app/core'
-import { sceneRegistry, useLiveNodeOverrides, useScene } from '@pascal-app/core'
+import {
+  formatLinearMeasurement,
+  sceneRegistry,
+  useLiveNodeOverrides,
+  useScene,
+} from '@pascal-app/core'
 import { getSceneTheme, useViewer } from '@pascal-app/viewer'
+import { LocalizedHtml as Html } from '@pascal-app/viewer/ui'
 import { createPortal, useFrame, useThree } from '@react-three/fiber'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { type Camera, type Object3D, Vector3 } from 'three'
 import { groundHeightAt } from '../../lib/ground-surface'
-import { formatLinearMeasurement } from '../../lib/measurements'
 import { SITE_BOUNDARY_DRAG_LABEL } from '../../lib/site-boundary'
 import { useActiveHandleDrag } from '../../store/use-interaction-scope'
-import { Html } from './localized-html'
 
 type ViewportSize = {
   width: number

package/src/components/editor/snapshot-capture-overlay.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import { emitter, type SnapshotSavedEvent } from '@pascal-app/core'
-import { SNAPSHOT_MAX_EDGE } from '@pascal-app/viewer'
+import { isTypingTarget, SNAPSHOT_MAX_EDGE } from '@pascal-app/viewer'
+import { useFirstPersonHud, useIsMobile, WalkthroughCrosshair } from '@pascal-app/viewer/ui'
 import {
   Check,
   Crop,
@@ -16,9 +17,7 @@ import {
 } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { flushSync } from 'react-dom'
-import { useIsMobile } from '../../hooks/use-mobile'
 import { triggerSFX } from '../../lib/sfx-bus'
-import { isTypingTarget } from '../../lib/typing-target'
 import { requestWalkthroughPointerLock } from '../../lib/walkthrough-pointer-lock'
 import useEditor, {
   CAPTURE_FOV_MAX,
@@ -27,9 +26,7 @@ import useEditor, {
   type SnapshotCropMode,
   type SnapshotStandardAspect,
 } from '../../store/use-editor'
-import { useFirstPersonHud } from '../../store/use-first-person-hud'
 import { Slider } from '../ui/slider'
-import { WalkthroughCrosshair } from '../walkthrough-hud'
 import { CaptureLevelPicker } from './capture-level-picker'
 import { isOverlaySnapshotSave } from './snapshot-capture'
 

package/src/components/editor/use-floorplan-background-placement.ts

@@ -3,6 +3,7 @@
 import {
   emitter,
   type FenceNode,
+  getPlanPointDistance,
   isCurvedWall,
   nodeRegistry,
   type WallNode,
@@ -14,7 +15,7 @@ import {
   useSyncExternalStore,
 } from 'react'
 import { resolveCeilingPlanPointSnap } from '../../lib/ceiling-plan-snap'
-import { alignFloorplanDraftPoint, getPlanPointDistance } from '../../lib/floorplan'
+import { alignFloorplanDraftPoint } from '../../lib/floorplan'
 import { resolveGenericFloorplanGridEventPoint } from '../../lib/floorplan-grid-event-point'
 import { snapRegisteredDraftPoint } from '../../lib/registered-draft-snap'
 import { resolveSlabPlanPointSnap } from '../../lib/slab-plan-snap'

package/src/components/editor/views/plugins-view.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useScene } from '@pascal-app/core'
+import { Button } from '@pascal-app/viewer/ui'
 import {
   Check,
   ChevronRight,
@@ -31,7 +32,6 @@ import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
 import { IconRefGlyph } from '../../ui/icon-ref'
 import { Badge } from '../../ui/primitives/badge'
-import { Button } from '../../ui/primitives/button'
 import { PLUGINS_VIEW_ID } from './use-editor-views'
 
 const PLUGIN_AUTHORING_URL = 'https://editor.pascal.app/docs/developers/plugins'

package/src/components/editor/views/view-bar.tsx

@@ -2,14 +2,6 @@
 
 import { type MessageDescriptor, type PascalI18n, usePascalI18n } from '@pascal-app/core'
 import { type GroundMode, useViewer } from '@pascal-app/viewer'
-import { ArrowLeftRight, Check, Columns2, MoreHorizontal, Pin, PinOff, X } from 'lucide-react'
-import { type ReactNode, useEffect, useRef } from 'react'
-import { useIsMobile } from '../../../hooks/use-mobile'
-import { type EditorViewDescriptor, isSceneView, isViewPinned } from '../../../lib/editor-views'
-import { cn } from '../../../lib/utils'
-import useEditor from '../../../store/use-editor'
-import { VIEW_2D, VIEW_3D, type ViewPaneIndex } from '../../../store/view-layout'
-import { IconRefGlyph } from '../../ui/icon-ref'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,7 +9,15 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '../../ui/primitives/dropdown-menu'
+  useIsMobile,
+} from '@pascal-app/viewer/ui'
+import { ArrowLeftRight, Check, Columns2, MoreHorizontal, Pin, PinOff, X } from 'lucide-react'
+import { type ReactNode, useEffect, useRef } from 'react'
+import { type EditorViewDescriptor, isSceneView, isViewPinned } from '../../../lib/editor-views'
+import { cn } from '../../../lib/utils'
+import useEditor from '../../../store/use-editor'
+import { VIEW_2D, VIEW_3D, type ViewPaneIndex } from '../../../store/view-layout'
+import { IconRefGlyph } from '../../ui/icon-ref'
 import { PLUGINS_VIEW_ID, useActiveViewLayout, useEditorViews } from './use-editor-views'
 
 const GROUP = cn(

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

@@ -4,6 +4,7 @@ import {
   type AnyNode,
   type AnyNodeId,
   calculateLevelMiters,
+  formatLinearMeasurement,
   getWallCurveLength,
   getWallEffectiveHeightForNodes,
   getWallMiterBoundaryPoints,
@@ -20,11 +21,10 @@ import {
   type WallNode,
 } from '@pascal-app/core'
 import { getSceneTheme, useViewer } from '@pascal-app/viewer'
+import { LocalizedHtml as Html } from '@pascal-app/viewer/ui'
 import { createPortal, useFrame } from '@react-three/fiber'
 import { useMemo, useState } from 'react'
 import * as THREE from 'three'
-import { formatLinearMeasurement } from '../../lib/measurements'
-import { Html } from './localized-html'
 
 const GUIDE_Y_OFFSET = 0.08
 const LABEL_LIFT = 0.08
@@ -315,16 +315,25 @@ function buildMeasurementGuide(
   const measurementPoints = measurementLine ?? fallbackMiddlePoints
   if (!measurementPoints) return null
 
-  const height = getWallEffectiveHeightForNodes(wall, nodes)
+  const heightStart = getWallEffectiveHeightForNodes(wall, nodes, 0)
+  const heightEnd = getWallEffectiveHeightForNodes(wall, nodes, 1)
   const startLocal = worldPointToWallLocal(wall, measurementPoints.start)
   const endLocal = worldPointToWallLocal(wall, measurementPoints.end)
   const curvedMeasurementPath = isCurvedWall(wall)
     ? getCurvedWallMeasurementPath(wall, miterData, levelWalls)
     : null
+  const dx = wall.end[0] - wall.start[0]
+  const dz = wall.end[1] - wall.start[1]
+  const wallChordLength = Math.hypot(dx, dz)
+  const getChordT = (localX: number) =>
+    wallChordLength > 1e-6 ? Math.max(0, Math.min(1, localX / wallChordLength)) : 0
+
   const guidePath: Vec3[] = curvedMeasurementPath
     ? curvedMeasurementPath.map((point) => {
         const localPoint = worldPointToWallLocal(wall, point)
-        return [localPoint[0], height + GUIDE_Y_OFFSET, localPoint[2]]
+        const t = getChordT(localPoint[0])
+        const h = getWallEffectiveHeightForNodes(wall, nodes, t)
+        return [localPoint[0], h + GUIDE_Y_OFFSET, localPoint[2]]
       })
     : isCurvedWall(wall)
       ? sampleWallCenterline(wall, 24).map((point, index, points) => {
@@ -334,12 +343,14 @@ function buildMeasurementGuide(
               : index === points.length - 1
                 ? endLocal
                 : worldPointToWallLocal(wall, point)
+          const t = getChordT(localPoint[0])
+          const h = getWallEffectiveHeightForNodes(wall, nodes, t)
 
-          return [localPoint[0], height + GUIDE_Y_OFFSET, localPoint[2]]
+          return [localPoint[0], h + GUIDE_Y_OFFSET, localPoint[2]]
         })
       : [
-          [startLocal[0], height + GUIDE_Y_OFFSET, startLocal[2]],
-          [endLocal[0], height + GUIDE_Y_OFFSET, endLocal[2]],
+          [startLocal[0], heightStart + GUIDE_Y_OFFSET, startLocal[2]],
+          [endLocal[0], heightEnd + GUIDE_Y_OFFSET, endLocal[2]],
         ]
 
   if (guidePath.length < 2) return null
@@ -397,26 +408,30 @@ function buildMeasurementGuide(
     ],
   })
   const bottomHeightTick = getHorizontalHeightTick(0)
-  const topHeightTick = getHorizontalHeightTick(height)
+  const topHeightTick = getHorizontalHeightTick(heightEnd)
 
   return {
     guidePath,
-    extStartStart: [extensionStartBase[0], height, extensionStartBase[2]],
+    extStartStart: [extensionStartBase[0], heightStart, extensionStartBase[2]],
     extStartEnd: [
       extensionStartBase[0],
-      height + GUIDE_Y_OFFSET + extOvershoot,
+      heightStart + GUIDE_Y_OFFSET + extOvershoot,
       extensionStartBase[2],
     ],
-    extEndStart: [extensionEndBase[0], height, extensionEndBase[2]],
-    extEndEnd: [extensionEndBase[0], height + GUIDE_Y_OFFSET + extOvershoot, extensionEndBase[2]],
+    extEndStart: [extensionEndBase[0], heightEnd, extensionEndBase[2]],
+    extEndEnd: [
+      extensionEndBase[0],
+      heightEnd + 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]],
+    heightEnd: [heightGuidePosition[0], heightEnd, heightGuidePosition[2]],
     heightBottomTickStart: bottomHeightTick.start,
     heightBottomTickEnd: bottomHeightTick.end,
     heightTopTickStart: topHeightTick.start,
     heightTopTickEnd: topHeightTick.end,
-    heightLabelPosition: [heightGuidePosition[0], height / 2, heightGuidePosition[2]],
+    heightLabelPosition: [heightGuidePosition[0], heightEnd / 2, heightGuidePosition[2]],
   }
 }
 
@@ -530,7 +545,8 @@ function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
     return total
   }, [guide, wall])
   const label = formatLinearMeasurement(length, unit, metricNotation)
-  const height = useMemo(() => getWallEffectiveHeightForNodes(wall, nodes), [nodes, wall])
+  // Height annotation uses t=1 (wall end) because the vertical guide is drawn at the endpoint
+  const height = useMemo(() => getWallEffectiveHeightForNodes(wall, nodes, 1), [nodes, wall])
   const heightLabel = `H ${formatLinearMeasurement(height, unit, metricNotation)}`
 
   if (!(guide && Number.isFinite(length) && length >= 0.01)) return null

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

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

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

@@ -1,13 +1,13 @@
 'use client'
 
-import { nodeRegistry, type WallNode } from '@pascal-app/core'
+import { nodeRegistry, WALL_PULL_GRIP_TITLE, type WallNode, wallPullSeed } from '@pascal-app/core'
 import { type ThreeEvent, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useState } from 'react'
 import { Color, DoubleSide, ExtrudeGeometry, OrthographicCamera, Shape } from 'three'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
 import { sfxEmitter } from '../../lib/sfx-bus'
-import { startWallPull, WALL_PULL_GRIP_TITLE, wallPullSeed } from '../../lib/wall-pull'
+import { startWallPull } from '../../lib/wall-pull'
 import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
 import {
   createEndpointHitAreaGeometry,

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

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

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

@@ -165,9 +165,10 @@ type WallTopHighlightSegment = {
   angle: number
   center: [number, number]
   length: number
+  tCenter: number
 }
 
-function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>) {
+function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>, t = 0.5): number {
   const levelId = resolveLevelId(wall, nodes as Record<string, AnyNode>)
   const support = spatialGridManager.getSlabSupportForWall(
     levelId,
@@ -181,12 +182,16 @@ function getWallTopY(wall: WallNode, nodes: Readonly<Record<string, AnyNode>>) {
     wall.justification,
   )
   return (
-    getWallTop(wall, levelId, nodes as Record<string, AnyNode>, support.elevation) +
+    getWallTop(wall, levelId, nodes as Record<string, AnyNode>, support.elevation, t) +
     WALL_TOP_HIGHLIGHT_LIFT
   )
 }
 
-function buildHighlightSegment(start: [number, number], end: [number, number]) {
+function buildHighlightSegment(
+  start: [number, number],
+  end: [number, number],
+  tCenter = 0.5,
+): WallTopHighlightSegment | null {
   const dx = end[0] - start[0]
   const dz = end[1] - start[1]
   const length = Math.hypot(dx, dz)
@@ -196,15 +201,20 @@ function buildHighlightSegment(start: [number, number], end: [number, number]) {
     angle: -Math.atan2(dz, dx),
     center: [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2] as [number, number],
     length,
+    tCenter,
   }
 }
 
 function buildWallTopHighlightSegments(wall: WallNode): WallTopHighlightSegment[] {
   if (!isCurvedWall(wall)) {
-    const segment = buildHighlightSegment(wall.start, wall.end)
+    const segment = buildHighlightSegment(wall.start, wall.end, 0.5)
     return segment ? [segment] : []
   }
 
+  const dx = wall.end[0] - wall.start[0]
+  const dz = wall.end[1] - wall.start[1]
+  const chordLenSq = dx * dx + dz * dz
+
   const sampleCount = Math.max(
     8,
     Math.ceil(getWallCurveLength(wall) / CURVED_WALL_HIGHLIGHT_SEGMENT_LENGTH),
@@ -213,7 +223,16 @@ function buildWallTopHighlightSegments(wall: WallNode): WallTopHighlightSegment[
   let previous = getWallCurveFrameAt(wall, 0).point
   for (let index = 1; index <= sampleCount; index += 1) {
     const current = getWallCurveFrameAt(wall, index / sampleCount).point
-    const segment = buildHighlightSegment([previous.x, previous.y], [current.x, current.y])
+    const midX = (previous.x + current.x) / 2
+    const midY = (previous.y + current.y) / 2
+    const tCenter =
+      chordLenSq > 1e-12
+        ? Math.max(
+            0,
+            Math.min(1, ((midX - wall.start[0]) * dx + (midY - wall.start[1]) * dz) / chordLenSq),
+          )
+        : 0.5
+    const segment = buildHighlightSegment([previous.x, previous.y], [current.x, current.y], tCenter)
     if (segment) segments.push(segment)
     previous = current
   }
@@ -228,38 +247,40 @@ function WallTopHighlight({
   wall: WallNode
 }) {
   const segments = useMemo(() => buildWallTopHighlightSegments(wall), [wall])
-  const y = getWallTopY(wall, nodes)
   const width = Math.max(getWallThickness(wall) + WALL_TOP_HIGHLIGHT_OVERHANG, 0.24)
   const glowWidth = Math.max(getWallThickness(wall) + WALL_TOP_GLOW_OVERHANG, 0.42)
 
   return (
     <>
-      {segments.map((segment, index) => (
-        <group key={`${wall.id}:${index}`}>
-          <mesh
-            frustumCulled={false}
-            geometry={WALL_TOP_HIGHLIGHT_GEOMETRY}
-            layers={EDITOR_LAYER}
-            material={wallTopHighlightGlowMaterial}
-            position={[segment.center[0], y - 0.003, segment.center[1]]}
-            raycast={NO_RAYCAST}
-            renderOrder={1003}
-            rotation={[0, segment.angle, 0]}
-            scale={[segment.length + WALL_TOP_END_OVERHANG, WALL_TOP_GLOW_HEIGHT, glowWidth]}
-          />
-          <mesh
-            frustumCulled={false}
-            geometry={WALL_TOP_HIGHLIGHT_GEOMETRY}
-            layers={EDITOR_LAYER}
-            material={wallTopHighlightMaterial}
-            position={[segment.center[0], y + 0.002, segment.center[1]]}
-            raycast={NO_RAYCAST}
-            renderOrder={1004}
-            rotation={[0, segment.angle, 0]}
-            scale={[segment.length + WALL_TOP_END_OVERHANG, WALL_TOP_HIGHLIGHT_HEIGHT, width]}
-          />
-        </group>
-      ))}
+      {segments.map((segment, index) => {
+        const y = getWallTopY(wall, nodes, segment.tCenter)
+        return (
+          <group key={`${wall.id}:${index}`}>
+            <mesh
+              frustumCulled={false}
+              geometry={WALL_TOP_HIGHLIGHT_GEOMETRY}
+              layers={EDITOR_LAYER}
+              material={wallTopHighlightGlowMaterial}
+              position={[segment.center[0], y - 0.003, segment.center[1]]}
+              raycast={NO_RAYCAST}
+              renderOrder={1003}
+              rotation={[0, segment.angle, 0]}
+              scale={[segment.length + WALL_TOP_END_OVERHANG, WALL_TOP_GLOW_HEIGHT, glowWidth]}
+            />
+            <mesh
+              frustumCulled={false}
+              geometry={WALL_TOP_HIGHLIGHT_GEOMETRY}
+              layers={EDITOR_LAYER}
+              material={wallTopHighlightMaterial}
+              position={[segment.center[0], y + 0.002, segment.center[1]]}
+              raycast={NO_RAYCAST}
+              renderOrder={1004}
+              rotation={[0, segment.angle, 0]}
+              scale={[segment.length + WALL_TOP_END_OVERHANG, WALL_TOP_HIGHLIGHT_HEIGHT, width]}
+            />
+          </group>
+        )
+      })}
     </>
   )
 }

package/src/components/editor-2d/floorplan-group-move.tsx

@@ -8,6 +8,7 @@ import {
   DEFAULT_ANGLE_STEP,
   type FloorplanGeometry,
   type FloorplanPalette,
+  formatLinearMeasurement,
   pauseSceneHistory,
   pauseSpaceDetection,
   resumeSceneHistory,
@@ -16,18 +17,17 @@ import {
   useLiveTransforms,
   useScene,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { isTypingTarget, useViewer } from '@pascal-app/viewer'
+import { FloorplanDimensionRenderer } from '@pascal-app/viewer/ui'
 import { memo, type PointerEvent as ReactPointerEvent, useEffect, useMemo, useState } from 'react'
 import { create } from 'zustand'
 import { GROUP_MOVE_DRAG_LABEL, GROUP_ROTATE_DRAG_LABEL } from '../../lib/contextual-help'
 import { applyFloorplanAlignment } from '../../lib/floorplan/apply-alignment'
 import { clientToPlan } from '../../lib/floorplan/plan-coords'
 import { isHistoryShortcut } from '../../lib/history'
-import { formatLinearMeasurement } from '../../lib/measurements'
 import type { WallGroupPush } from '../../lib/room-handle-drag'
 import { useRoomHandleDrag } from '../../lib/room-handle-drag'
 import { sfxEmitter } from '../../lib/sfx-bus'
-import { isTypingTarget } from '../../lib/typing-target'
 import useAlignmentGuides from '../../store/use-alignment-guides'
 import useEditor, {
   isAlignmentGuideActive,
@@ -55,7 +55,6 @@ import {
 import { swallowNextClick } from '../editor/handles/use-handle-drag'
 import { useMeshSettleEpoch } from '../editor/use-mesh-settle-epoch'
 import { useFloorplanSceneRotation } from './floorplan-render-context'
-import { FloorplanDimensionRenderer } from './renderers/floorplan-dimension-renderer'
 
 // 2D sibling of the 3D body-drag group move (`group-move-3d.ts`): dragging
 // any selected element of a multi-selection slides the whole selection

package/src/components/editor-2d/floorplan-measurement-tool-layer.tsx

@@ -3,11 +3,17 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  buildMeasurementAngleArcPoints,
   closestMeasurementFeatureBinding,
   collectAlignmentAnchors,
   emitter,
+  formatAngleRadians,
+  formatAreaLabel,
+  formatLinearMeasurement,
   formatNumber,
+  formatVolumeLabel,
   type GeometryContext,
+  getLinearUnitLabel,
   type MeasurementFeatureAnchor,
   type MeasurementSnapKind,
   measurementAngle,
@@ -16,23 +22,19 @@ import {
   measurementFeatureLength,
   measurementPerimeter,
   measurementPrismVolume,
+  metersToLinearUnit,
   nodeRegistry,
+  parseLinearMeasurementInput,
   useLocale,
   useScene,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { measurementPolygonLabelAnchor } from '../../lib/measurement-label'
 import {
-  buildMeasurementAngleArcPoints,
-  formatAreaLabel,
-  formatLinearMeasurement,
-  formatVolumeLabel,
-  getLinearUnitLabel,
   MEASUREMENT_ACTIVE_COLOR,
-  metersToLinearUnit,
-  parseLinearMeasurementInput,
-} from '../../lib/measurements'
+  measurementPolygonLabelAnchor,
+  useViewer,
+} from '@pascal-app/viewer'
+import { resolveFloorplanLabelAngle } from '@pascal-app/viewer/ui'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   clearSurfacePlanSnapFeedback,
   resolveSurfacePlanPointSnap,
@@ -45,10 +47,8 @@ import {
   measurementPolygonMidpoints,
   useMeasurementDraft,
 } from '../../store/use-measurement-draft'
-import { formatAngleRadians } from '../tools/shared/segment-angle'
 import { FloorplanQuickMeasureLayer } from './floorplan-quick-measure-layer'
 import { useFloorplanRender } from './floorplan-render-context'
-import { resolveFloorplanLabelAngle } from './renderers/floorplan-label-angle'
 
 const DRAFT_COLOR = MEASUREMENT_ACTIVE_COLOR
 const X_AXIS_COLOR = '#ef4444'

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

@@ -1,7 +1,8 @@
 'use client'
 
 import type { AnyNodeId, OpenWallEnd } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { MEASUREMENT_DANGLING_COLOR, useViewer } from '@pascal-app/viewer'
+import { resolveFloorplanLabelAngle } from '@pascal-app/viewer/ui'
 import { memo, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import {
@@ -10,13 +11,11 @@ import {
   useOpenWallEndsSuppressed,
 } from '../../hooks/use-open-wall-ends'
 import { openWallEndKey, openWallEndLabel } from '../../lib/floorplan/open-wall-ends'
-import { MEASUREMENT_DANGLING_COLOR } from '../../lib/measurements'
 import useEditor from '../../store/use-editor'
 import { isViewVisible, VIEW_2D } from '../../store/view-layout'
 import { JoinWallsPill } from '../editor/join-walls-pill'
 import { OpenWallEndsHint } from '../editor/open-wall-ends-hint'
 import { useFloorplanRender } from './floorplan-render-context'
-import { resolveFloorplanLabelAngle } from './renderers/floorplan-label-angle'
 
 function sceneScreenPoint(point: [number, number]): { left: number; top: number } | null {
   const scene = document.querySelector<SVGGElement>('[data-floorplan-scene]')