@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/tools/item/use-placement-coordinator.tsx

@@ -9,6 +9,7 @@ import {
   collectAlignmentAnchors,
   emitter,
   findLevelAncestorId,
+  formatLinearMeasurement,
   type GridEvent,
   getScaledDimensions,
   getWallBodyCenterOffset,
@@ -30,7 +31,6 @@ import {
   type WallEvent,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { useFrame, useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
@@ -50,7 +50,6 @@ import {
   publishPlacementSurface,
 } from '../../../lib/active-placement-surface'
 import { EDITOR_LAYER } from '../../../lib/constants'
-import { formatLinearMeasurement } from '../../../lib/measurements'
 import { isFreshPlacementMetadata } from '../../../lib/placement-metadata'
 import { createMovementSfxTick } from '../../../lib/sfx/movement-tick'
 import { sfxEmitter } from '../../../lib/sfx-bus'
@@ -74,6 +73,7 @@ import useEditor, {
 import useFacingPose from '../../../store/use-facing-pose'
 import { getMovingNode } from '../../../store/use-interaction-scope'
 import usePlacementPreview from '../../../store/use-placement-preview'
+import { Html } from '../../editor/localized-html'
 import {
   createItemSurfaceGridDispatch,
   createItemSurfacePointerArbitration,
@@ -1008,9 +1008,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
     // Floor grab-offset: the item tracks the grabbed point instead of snapping
     // its origin under the cursor. The offset is computed in building-local space
-    // (`event.localPosition`), but `floorStrategy.move` snaps on the WORLD grid
-    // (`event.position`), so the corrected local point is re-projected to a
-    // corrected world point and both frames carry the offset to stay consistent.
+    // (`event.localPosition`, which `floorStrategy.move` snaps), and the corrected
+    // local point is re-projected to a corrected world point so both frames carry
+    // the offset and stay consistent.
     const applyFloorGrabOffset = (event: GridEvent): GridEvent => {
       if (relativeFloorStart === null) return event
       const rawX = event.localPosition[0]
@@ -1871,6 +1871,11 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
           position: floorPos,
           rotation,
         })
+        // The surface moves published a building-space cursor (the host's top, level height
+        // included) as the live transform. Back on the floor the item renders level-local, so
+        // that stale height lifted it by its level's elevation (a bedside left on a 4th-floor bed
+        // floated ~10 m up) until the next floor move: publish the floor pose now.
+        useLiveTransforms.getState().set(draft.id, { position: floorPos, rotation: rotation[1] })
       }
 
       revalidate()
@@ -2717,13 +2722,31 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
     // ---- Subscribe ----
 
+    // With a level selected, surfaces on other floors don't capture the draft: past the building
+    // edge, through a window or over a stairwell the ray finds a lower floor's furniture, slab or
+    // wall, and adopting it re-parented the item to that floor mid-gesture (and paid a level
+    // change each time). The floor cursor keeps following the selected level instead.
+    const onActiveLevel = (node: AnyNode | undefined) => {
+      const levelId = useViewer.getState().selection.levelId
+      if (!levelId || !node) return true
+      return resolveLevelId(node, useScene.getState().nodes) === levelId
+    }
     const specializedKinds = new Set<string>()
-    const subscribeSpecialized = <E,>(key: string, handler: (event: E) => void) => {
+    const unsubscribeSpecialized: (() => void)[] = []
+    const subscribeSpecialized = <E extends { node?: AnyNode }>(
+      key: string,
+      handler: (event: E) => void,
+    ) => {
       specializedKinds.add(key.slice(0, key.lastIndexOf(':')))
-      emitter.on(key as never, handler as never)
+      const gated = (event: E) => {
+        if (onActiveLevel(event.node)) handler(event)
+      }
+      emitter.on(key as never, gated as never)
+      unsubscribeSpecialized.push(() => emitter.off(key as never, gated as never))
     }
     const genericRoute = (phase: 'enter' | 'move' | 'click' | 'leave') => (event: NodeEvent) => {
       if (specializedKinds.has(event.node.type)) return
+      if (!onActiveLevel(event.node)) return
       if (
         !surfaceOwnership.allows(event.node.id, event.nativeEvent.nativeEvent ?? event.nativeEvent)
       )
@@ -2820,38 +2843,11 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       gridDispatch.cancel()
       emitter.off('grid:move', gridDispatch.schedule)
       emitter.off('grid:click', onGridClick)
-      emitter.off('item:enter', onItemEnter)
-      emitter.off('item:move', onItemMove)
-      emitter.off('item:leave', onItemLeave)
-      emitter.off('item:click', onItemClick)
-      emitter.off('wall:enter', onWallEnter)
-      emitter.off('wall:move', onWallMove)
-      emitter.off('wall:click', onWallClick)
-      emitter.off('wall:leave', onWallLeave)
-      emitter.off('roof:enter', onRoofWallEnter)
-      emitter.off('roof:move', onRoofWallMove)
-      emitter.off('roof:click', onRoofWallClick)
-      emitter.off('roof:leave', onRoofWallLeave)
+      for (const unsubscribe of unsubscribeSpecialized) unsubscribe()
       emitter.off('node:enter', onNodeEnter)
       emitter.off('node:move', onNodeMove)
       emitter.off('node:click', onNodeClick)
       emitter.off('node:leave', onNodeLeave)
-      emitter.off('ceiling:enter', onCeilingEnter)
-      emitter.off('ceiling:move', onCeilingMove)
-      emitter.off('ceiling:click', onCeilingClick)
-      emitter.off('ceiling:leave', onCeilingLeave)
-      emitter.off('cabinet:enter', onItemEnter)
-      emitter.off('procedural-item:enter' as never, onItemEnter)
-      emitter.off('cabinet:move', onItemMove)
-      emitter.off('procedural-item:move' as never, onItemMove)
-      emitter.off('cabinet:click', onItemClick)
-      emitter.off('procedural-item:click' as never, onItemClick)
-      emitter.off('cabinet:leave', onItemLeave)
-      emitter.off('procedural-item:leave' as never, onItemLeave)
-      emitter.off('shelf:enter', onShelfEnter)
-      emitter.off('shelf:move', onShelfMove)
-      emitter.off('shelf:click', onShelfClick)
-      emitter.off('shelf:leave', onShelfLeave)
       emitter.off('node:click', commitFloorOnSurfaceClick as never)
       emitter.off('tool:cancel', onCancel)
       window.removeEventListener('keydown', onKeyDown)

package/src/components/tools/paint-region/wall-paint-region-tool.tsx

@@ -4,6 +4,7 @@ import {
   type AnyNode,
   type AnyNodeId,
   emitter,
+  formatLinearMeasurement,
   sceneRegistry,
   useScene,
   type WallFace,
@@ -27,7 +28,6 @@ import {
 import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { EDITOR_LAYER } from '../../../lib/constants'
-import { formatLinearMeasurement } from '../../../lib/measurements'
 import { paintRegionTargets, usePaintRegionMode } from '../../../lib/paint-region-mode'
 import { isTypingTarget } from '../../../lib/typing-target'
 import {

package/src/components/tools/registry/item-surface-move.test.ts

@@ -22,6 +22,7 @@ import {
 } from '@pascal-app/core/procedural-items'
 import { Group, Vector3 } from 'three'
 import { commitFreshPlacementSubtree } from '../../../lib/fresh-planar-placement'
+import useEditor from '../../../store/use-editor'
 import { registerHostingTestNode } from '../__fixtures__/hosting'
 import {
   createItemSurfaceGridDispatch,
@@ -62,6 +63,7 @@ const host = ItemNode.parse({
 let restoreRegistry: () => void
 let oldNodes: ReturnType<typeof useScene.getState>['nodes']
 let oldRoots: AnyNodeId[]
+let oldSnapping: ReturnType<typeof useEditor.getState>['snappingModeByContext']
 
 beforeEach(() => {
   globalThis.requestAnimationFrame = (callback) => {
@@ -69,6 +71,14 @@ beforeEach(() => {
     return 0
   }
   globalThis.cancelAnimationFrame = () => {}
+  // Poses are asserted raw: whatever context a previous suite left active
+  // (a tool, a scope, its snapping mode) must not snap them to the grid.
+  oldSnapping = useEditor.getState().snappingModeByContext
+  useEditor.setState({
+    snappingModeByContext: Object.fromEntries(
+      Object.keys(oldSnapping).map((context) => [context, 'off']),
+    ) as typeof oldSnapping,
+  })
   restoreRegistry = nodeRegistry._snapshot()
   oldNodes = useScene.getState().nodes
   oldRoots = useScene.getState().rootNodeIds
@@ -119,6 +129,7 @@ afterEach(() => {
   globalThis.requestAnimationFrame = originalRaf
   globalThis.cancelAnimationFrame = originalCancelRaf
   restoreRegistry()
+  useEditor.setState({ snappingModeByContext: oldSnapping })
   useLiveTransforms.getState().clear(original.id)
   for (const id of ['level_surface-move', host.id, 'item_second-host'])
     sceneRegistry.nodes.delete(id)

package/src/components/tools/registry/move-registry-node-tool.test.ts

@@ -107,6 +107,7 @@ test('focus completion: mounted registry mover owns only outside R T and Alt', a
       cancelAnimationFrame: { configurable: true, value: (key: number) => frames.delete(key) },
       IS_REACT_ACT_ENVIRONMENT: { configurable: true, value: true },
     })
+    let supportY = 0
     core.registerNode({
       kind: node.type,
       schemaVersion: 1,
@@ -114,7 +115,14 @@ test('focus completion: mounted registry mover owns only outside R T and Alt', a
       schema: z.object({ type: z.literal(node.type) }).passthrough(),
       defaults: () => ({}),
       capabilities: {
-        movable: { isValidPosition: () => false },
+        movable: {
+          isValidPosition: () => false,
+          resolvePosition: ({ position }: { position: [number, number, number] }) => [
+            position[0],
+            supportY,
+            position[2],
+          ],
+        },
         floorPlaced: {
           collides: true,
           footprint: (candidate: AnyNode) => ({
@@ -251,6 +259,39 @@ test('focus completion: mounted registry mover owns only outside R T and Alt', a
     expect((await key('t', false)).defaultPrevented).toBe(true)
     expect(mesh.rotation.y).toBeCloseTo(0.25)
     expect(core.useLiveTransforms.getState().transforms.get(id)?.rotation).toBeCloseTo(0.25)
+    supportY = 0.75
+    await act(async () => {
+      core.emitter.emit('grid:move', {
+        nativeEvent: {
+          target: { closest: () => null },
+        } as unknown as import('@pascal-app/core').GridEvent['nativeEvent'],
+        position: [7, 0, 3],
+        localPosition: [7, 0, 3],
+        stopPropagation() {},
+      } as import('@pascal-app/core').GridEvent)
+      flushFrames()
+    })
+    expect(mesh.position.y).toBeCloseTo(0.75)
+    expect(core.useLiveTransforms.getState().transforms.get(id)?.position?.[1]).toBeCloseTo(0.75)
+    expect(
+      (core.useScene.getState().nodes[id] as unknown as { position: number[] }).position[1],
+    ).toBe(0)
+    supportY = 1.25
+    await key('Alt', false)
+    await act(async () => {
+      core.emitter.emit('grid:click', {
+        nativeEvent: {
+          target: { closest: () => null },
+        } as unknown as import('@pascal-app/core').GridEvent['nativeEvent'],
+        position: [7, 0, 3],
+        localPosition: [7, 0, 3],
+        stopPropagation() {},
+      } as import('@pascal-app/core').GridEvent)
+      flushFrames()
+    })
+    expect(
+      (core.useScene.getState().nodes[id] as unknown as { position: number[] }).position[1],
+    ).toBeCloseTo(1.25)
   } finally {
     if (root)
       await act(async () => {

package/src/components/tools/registry/move-registry-node-tool.tsx

@@ -484,6 +484,18 @@ export function MoveRegistryNodeTool({ node: source }: { node: AnyNode }) {
       return Array.isArray(rotation) ? [rotation[0] ?? 0, y, rotation[2] ?? 0] : y
     }
 
+    const resolvePosition = (position: [number, number, number]) => {
+      const nodes = useScene.getState().nodes
+      const current = nodes[node.id] ?? node
+      return (
+        nodeRegistry.get(current.type)?.capabilities?.movable?.resolvePosition?.({
+          node: current,
+          position,
+          nodes,
+        }) ?? position
+      )
+    }
+
     const keepStartingElevation = (position: [number, number, number], yaw: number) => {
       if (!preserveLevelAndElevation) return position
       const rotation = toCommitRotation(yaw)
@@ -534,14 +546,19 @@ export function MoveRegistryNodeTool({ node: source }: { node: AnyNode }) {
     // them through `useLiveNodeOverrides` (transient — no history churn;
     // GeometrySystem merges overrides via getEffectiveNode). Each connected
     // node is re-dirtied so its geometry rebuilds against the new override.
-    const previewConnectivity = (position: [number, number, number], rotationY: number) => {
+    // False, previewing nothing, when the connected joints cannot follow.
+    const previewConnectivity = (
+      position: [number, number, number],
+      rotationY: number,
+    ): boolean => {
       const connectivity = connectivityRef.current
-      if (!connectivity) return
+      if (!connectivity) return true
       const updates = resolveConnectivityUpdates(
         connectivity,
         buildPreviewNode(position, rotationY),
       )
-      if (updates.length === 0) return
+      if (!updates) return false
+      if (updates.length === 0) return true
       useLiveNodeOverrides
         .getState()
         .setMany(updates.map((u) => [u.id, u.data as Record<string, unknown>] as const))
@@ -549,6 +566,7 @@ export function MoveRegistryNodeTool({ node: source }: { node: AnyNode }) {
       for (const u of updates) {
         if (useScene.getState().nodes[u.id]) useScene.getState().markDirty(u.id)
       }
+      return true
     }
 
     const clearConnectivityOverrides = () => {
@@ -1026,7 +1044,11 @@ export function MoveRegistryNodeTool({ node: source }: { node: AnyNode }) {
           },
         ).position
       }
-      position = keepStartingElevation(position, rotationRef.current)
+      position = resolvePosition(keepStartingElevation(position, rotationRef.current))
+      // Carry connected ductwork along (preview only — committed on drop). A
+      // position the connected joints cannot follow holds the last frame,
+      // which is what the drop commits.
+      if (!previewConnectivity(position, rotationRef.current)) return
       const visualPosition = getVisualPosition(position)
       hasMovedRef.current = true
       setCursorPosition(visualPosition)
@@ -1054,8 +1076,6 @@ export function MoveRegistryNodeTool({ node: source }: { node: AnyNode }) {
       })
       syncParentFramePreview(position)
       markMovedNodeDirty()
-      // Carry connected ductwork along (preview only — committed on drop).
-      previewConnectivity(position, rotationRef.current)
 
       const soundStep = {
         coords: [x, z],
@@ -1116,7 +1136,7 @@ export function MoveRegistryNodeTool({ node: source }: { node: AnyNode }) {
       // tool — unless Alt (free place) is held to force placement. Other kinds
       // carry no validity box (`validRef` stays true), so they're never blocked.
       if (!validRef.current && !altRef.current) return
-      const position: [number, number, number] = [...lastCursorRef.current]
+      const position = resolvePosition([...lastCursorRef.current])
 
       const rotation = toCommitRotation(rotationRef.current)
       let committedId = node.id as AnyNodeId
@@ -1171,8 +1191,9 @@ export function MoveRegistryNodeTool({ node: source }: { node: AnyNode }) {
             ? resolveConnectivityUpdates(
                 connectivityRef.current,
                 buildPreviewNode(position, rotationRef.current),
-              ).filter((u) => useScene.getState().nodes[u.id])
+              )?.filter((u) => useScene.getState().nodes[u.id])
             : []
+          if (!connectivityUpdates) return
           const surfaceId = surfaceAttachmentId(effectiveNode)
           itemSurfaceMove?.restore()
           useScene.temporal.getState().resume()
@@ -1298,7 +1319,6 @@ export function MoveRegistryNodeTool({ node: source }: { node: AnyNode }) {
         attachmentRotationRef.current,
       )
       if (nextFreeRotation === null) return
-      sfxEmitter.emit('sfx:item-rotate')
       const hostedPose = itemSurfaceMove?.rotate(nextFreeRotation)
       let position = hostedPose?.position ?? lastCursorRef.current
       if (
@@ -1319,10 +1339,16 @@ export function MoveRegistryNodeTool({ node: source }: { node: AnyNode }) {
         )
         position = canonicalPositionFromPlan(planOrigin[0], position[1], planOrigin[2])
       }
-      position = keepStartingElevation(position, hostedPose?.rotationY ?? nextFreeRotation)
+      const rotationY = hostedPose?.rotationY ?? nextFreeRotation
+      position = keepStartingElevation(position, rotationY)
+      // Rotating the fitting swings its collars — connected ducts follow. A
+      // swing they cannot follow holds the last frame; a surface-hosted node
+      // has already turned with its host, so its drop refuses instead.
+      if (!previewConnectivity(position, rotationY) && !hostedPose) return
+      sfxEmitter.emit('sfx:item-rotate')
       lastCursorRef.current = position
-      freeRotationRef.current = hostedPose?.rotationY ?? nextFreeRotation
-      rotationRef.current = freeRotationRef.current
+      freeRotationRef.current = rotationY
+      rotationRef.current = rotationY
       setCursorRotationY(previewRotationY(rotationRef.current))
       const visualPosition = getVisualPosition(position)
       setCursorPosition(visualPosition)
@@ -1335,8 +1361,6 @@ export function MoveRegistryNodeTool({ node: source }: { node: AnyNode }) {
         })
       syncParentFramePreview(position)
       markMovedNodeDirty()
-      // Rotating the fitting swings its collars — connected ducts follow.
-      previewConnectivity(position, rotationRef.current)
       // Rotation changes the footprint's collision span — re-check validity.
       if (!itemSurfaceMove?.hosted && itemSurfaceMove?.rejection && lastSurfaceEvent)
         onItemMove(lastSurfaceEvent)

package/src/components/tools/select/select-candidates.test.ts

@@ -139,4 +139,49 @@ describe('selectable candidates', () => {
     })
     expect(collectSelectableCandidateIds().sort()).toEqual(['item_pick', 'wall_pick'])
   })
+
+  test("a box leaves a room's automatic floor plate and ceiling to the room, keeping what hangs from it", () => {
+    const restore = nodeRegistry._snapshot()
+    try {
+      for (const kind of ['slab', 'ceiling', 'box-select-test-light'] as const)
+        if (!nodeRegistry.has(kind))
+          registerNode({
+            kind,
+            schemaVersion: 1,
+            schema: z.object({ type: z.literal(kind) }) as never,
+            category: 'structure',
+            defaults: () => ({}),
+            capabilities: { selectable: {} },
+          } as AnyNodeDefinition)
+      useScene.setState({
+        nodes: {
+          level_test: {
+            id: 'level_test',
+            type: 'level',
+            parentId: 'building_test',
+            children: ['slab_shared', 'slab_drawn', 'ceiling_auto'],
+          },
+          slab_shared: {
+            id: 'slab_shared',
+            type: 'slab',
+            parentId: 'level_test',
+            boundary: 'auto',
+            plateRole: 'base',
+          },
+          slab_drawn: { id: 'slab_drawn', type: 'slab', parentId: 'level_test' },
+          ceiling_auto: {
+            id: 'ceiling_auto',
+            type: 'ceiling',
+            parentId: 'level_test',
+            boundary: 'auto',
+            children: ['light_hung'],
+          },
+          light_hung: { id: 'light_hung', type: 'box-select-test-light', parentId: 'ceiling_auto' },
+        } as unknown as Record<string, AnyNode>,
+      })
+      expect(collectSelectableCandidateIds().sort()).toEqual(['light_hung', 'slab_drawn'])
+    } finally {
+      restore()
+    }
+  })
 })

package/src/components/tools/select/select-candidates.ts

@@ -1,6 +1,7 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  isDerivedNode,
   isRegistrySelectable,
   type LevelNode,
   nodeRegistry,
@@ -16,6 +17,14 @@ function isVisibleSelectableNode(node: AnyNode): boolean {
   return isRegistrySelectable(node.type)
 }
 
+/**
+ * Derived construction (a room's automatic floor plate or ceiling) belongs to its rooms, so a box
+ * never takes it along: a box round a porch would otherwise catch the house's shared floor plate,
+ * and deleting the selection took the floor out from under every room on it. A click still selects
+ * one on its own.
+ */
+const boxSelectable = (node: AnyNode) => !isDerivedNode(node)
+
 export function collectSelectableCandidateIds(): string[] {
   const { levelId } = useViewer.getState().selection
   const { nodes } = useScene.getState()
@@ -43,7 +52,8 @@ export function collectSelectableCandidateIds(): string[] {
     )
       return
 
-    if (isRegistrySelectable(node.type)) {
+    // A ceiling's hung lights and fans are still the box's; the ceiling is not.
+    if (isRegistrySelectable(node.type) && boxSelectable(node)) {
       addNode(node)
     }
 
@@ -70,7 +80,8 @@ export function collectSelectableCandidateIds(): string[] {
 
   const buildingId = resolveBuildingForLevel(levelId as AnyNodeId, nodes)
   for (const node of Object.values(nodes)) {
-    if (!node || node.type === 'level' || !isVisibleSelectableNode(node)) continue
+    if (!node || node.type === 'level' || !isVisibleSelectableNode(node) || !boxSelectable(node))
+      continue
 
     const def = nodeRegistry.get(node.type)
     const isBuildingScoped = def?.floorplanScope === 'building'

package/src/components/tools/shared/cursor-sphere.tsx

@@ -1,4 +1,4 @@
-import { Html } from '@react-three/drei'
+import { type MessageDescriptor, usePascalI18n } from '@pascal-app/core'
 import type { ThreeElements } from '@react-three/fiber'
 import { forwardRef } from 'react'
 import { CircleGeometry, CylinderGeometry, type Group, SphereGeometry } from 'three'
@@ -8,6 +8,7 @@ import { EDITOR_LAYER } from '../../../lib/constants'
 import { wallCursorIcon } from '../../../lib/tool-cursor-icon'
 import useEditor from '../../../store/use-editor'
 import useWallSnapIndicator from '../../../store/use-wall-snap-indicator'
+import { Html } from '../../editor/localized-html'
 
 interface CursorSphereProps extends Omit<ThreeElements['group'], 'ref'> {
   color?: string
@@ -51,6 +52,7 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
   },
   ref,
 ) {
+  const i18n = usePascalI18n()
   const tool = useEditor((s) => s.tool)
   const mode = useEditor((s) => s.mode)
   const catalogCategory = useEditor((s) => s.catalogCategory)
@@ -62,7 +64,8 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
   const wallMode = useEditor((s) => s.continuationByContext.wall)
 
   // Find the icon for the current tool — the wall shows its Rooms variant.
-  let activeToolConfig: { label: string; iconSrc: string } | null | undefined = null
+  let activeToolConfig: { label: string | MessageDescriptor; iconSrc: string } | null | undefined =
+    null
   if (mode === 'build' && tool) {
     if (tool === 'wall') {
       activeToolConfig = wallCursorIcon(wallMode)
@@ -162,7 +165,11 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
           {tooltipContent || (
             // eslint-disable-next-line @next/next/no-img-element
             <img
-              alt={activeToolConfig!.label}
+              alt={
+                typeof activeToolConfig!.label === 'string'
+                  ? activeToolConfig!.label
+                  : i18n._(activeToolConfig!.label)
+              }
               src={activeToolConfig!.iconSrc}
               style={{
                 width: '100%',

package/src/components/tools/shared/draft-measurement-label.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Html } from '@react-three/drei'
+import { Html } from '../../editor/localized-html'
 
 /** Lift of a draft's readout above the top of what it measures, in metres. */
 export const DRAFT_LABEL_Y_OFFSET = 0.22

package/src/components/tools/shared/placement-box.tsx

@@ -2,17 +2,13 @@
 
 import '../../../three-types'
 
-import { Html } from '@react-three/drei'
+import { formatLinearMeasurement, type LinearUnit, type MetricNotation } from '@pascal-app/core'
 import { useEffect, useMemo } from 'react'
 import { PlaneGeometry } from 'three'
 import { distance, smoothstep, uv, vec2 } from 'three/tsl'
 import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
-import {
-  formatLinearMeasurement,
-  type LinearUnit,
-  type MetricNotation,
-} from '../../../lib/measurements'
+import { Html } from '../../editor/localized-html'
 import { createLineGeometry, getBoxEdgePoints } from './placement-box-geometry'
 
 const VALID_COLOR = 0x22_c5_5e // green-500

package/src/components/tools/shared/placement-coordinate-input.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import { usePascalI18n } from '@pascal-app/core'
+import { type PlacementTypingField, usePlacementTyping } from '../../../store/use-placement-typing'
+
+export type PlacementCoordinateInputProps = {
+  /** What each empty field stands for; defaults to the session's `fieldDefaults`. */
+  placeholders?: readonly string[]
+}
+
+/**
+ * The typed-entry HUD, one box per field of the session. It only displays the
+ * session: keys reach the active tool's own handler (`routePlacementTypingKey`),
+ * so the same HUD can sit in the 3D view and the plan at once without
+ * competing for focus. Clicking a field makes it the active one.
+ */
+export function PlacementCoordinateInput({ placeholders }: PlacementCoordinateInputProps) {
+  const i18n = usePascalI18n()
+  const isActive = usePlacementTyping((state) => state.isActive)
+  const labels = usePlacementTyping((state) => state.labels)
+  const fields = usePlacementTyping((state) => state.fields)
+  const fieldDefaults = usePlacementTyping((state) => state.fieldDefaults)
+  const activeField = usePlacementTyping((state) => state.activeField)
+
+  if (!isActive) return null
+
+  return (
+    <div
+      data-placement-coordinate-entry
+      onClick={(event) => event.stopPropagation()}
+      onPointerDown={(event) => event.stopPropagation()}
+      style={{
+        alignItems: 'center',
+        background: 'rgba(15, 23, 42, 0.94)',
+        border: '1px solid rgba(148, 163, 184, 0.55)',
+        borderRadius: 6,
+        boxShadow: '0 4px 14px rgba(15, 23, 42, 0.28)',
+        color: '#f8fafc',
+        display: 'flex',
+        gap: 6,
+        padding: '5px 7px',
+        pointerEvents: 'auto',
+        userSelect: 'none',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {labels.map((descriptor, index) => {
+        const field = index as PlacementTypingField
+        const label = i18n._(descriptor)
+        const active = field === activeField
+        const value = fields[field]
+        return (
+          <div
+            data-placement-coordinate-field={descriptor.id}
+            key={descriptor.id}
+            onPointerDown={(event) => {
+              event.stopPropagation()
+              usePlacementTyping.getState().setActiveField(field)
+            }}
+            style={{
+              alignItems: 'center',
+              display: 'flex',
+              flexDirection: 'column',
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+              fontSize: 9,
+              gap: 2,
+              textTransform: 'uppercase',
+            }}
+          >
+            <span style={{ color: active ? '#a5b4fc' : '#94a3b8' }}>{label}</span>
+            <span
+              aria-label={label}
+              role="status"
+              style={{
+                background: active ? '#eef2ff' : '#e2e8f0',
+                borderRadius: 3,
+                color: value ? '#0f172a' : '#64748b',
+                fontSize: 12,
+                fontWeight: 600,
+                minWidth: 76,
+                outline: active ? '2px solid #818cf8' : 'none',
+                padding: '3px 5px',
+                textAlign: 'right',
+                textTransform: 'none',
+              }}
+            >
+              {value || placeholders?.[field] || fieldDefaults[field] || '\u00a0'}
+            </span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/tools/shared/placement-dimension-guides.tsx

@@ -1,13 +1,13 @@
 'use client'
 
 import { useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { useLayoutEffect, useMemo } from 'react'
 import { BufferGeometry, Float32BufferAttribute, Line as ThreeLine } from 'three'
 import { LineBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import type { PlacementPreviewDimension } from '../../../store/use-placement-preview'
 import usePlacementPreview from '../../../store/use-placement-preview'
+import { Html } from '../../editor/localized-html'
 import { formatMeasurement } from '../../editor/measurement-pill'
 
 const DIMENSION_COLOR = 0x63_66_f1

package/src/components/tools/shared/segment-angle.ts

@@ -83,10 +83,6 @@ function getCurveTangentAtPoint(point: PlanPoint, segment: SegmentAngleLike): Pl
   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])