@pascal-app/editor 0.9.1 → 0.9.2

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

@@ -6,24 +6,45 @@ import { furnishTools } from '../../../components/ui/action-menu/furnish-tools'
 import { tools } from '../../../components/ui/action-menu/structure-tools'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import useEditor from '../../../store/use-editor'
+import useWallSnapIndicator from '../../../store/use-wall-snap-indicator'
 
 interface CursorSphereProps extends Omit<ThreeElements['group'], 'ref'> {
   color?: string
   depthWrite?: boolean
   showTooltip?: boolean
   height?: number
+  /**
+   * Put the bright marker dot at the TIP of the vertical line (y = height)
+   * instead of on the ground ring. Used when the point being placed hangs
+   * above the floor (e.g. duct drawn against the ceiling): the dot rides at
+   * the cursor / placement point while the line drops to a floor ring that
+   * keeps the plan position readable.
+   */
+  dotAtTip?: boolean
   /** Custom tooltip content — overrides the auto-detected build tool icon */
   tooltipContent?: React.ReactNode
 }
 
 export const CursorSphere = forwardRef<Group, CursorSphereProps>(function CursorSphere(
-  { color = '#818cf8', showTooltip = true, height = 2.5, visible = true, tooltipContent, ...props },
+  {
+    color = '#818cf8',
+    showTooltip = true,
+    height = 2.5,
+    dotAtTip = false,
+    visible = true,
+    tooltipContent,
+    ...props
+  },
   ref,
 ) {
   const tool = useEditor((s) => s.tool)
   const mode = useEditor((s) => s.mode)
   const catalogCategory = useEditor((s) => s.catalogCategory)
   const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
+  // While a wall snap is active the beacon layer already marks the point
+  // (green square at a corner); hide the cursor's ground dot/ring so it
+  // doesn't sit on top of that glyph.
+  const isSnapping = useWallSnapIndicator((s) => s.point !== null)
 
   // Find the icon for the current tool
   let activeToolConfig = null
@@ -39,32 +60,38 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
 
   return (
     <group ref={ref} {...props} visible={isVisible}>
-      {/* Flat marker on the ground */}
-      <group rotation={[-Math.PI / 2, 0, 0]}>
-        {/* Center dot */}
-        <mesh layers={EDITOR_LAYER} renderOrder={2}>
-          <circleGeometry args={[0.06, 32]} />
-          <meshBasicMaterial
-            color={color}
-            depthTest={false}
-            depthWrite={false}
-            opacity={0.9}
-            transparent
-          />
-        </mesh>
+      {/* Flat marker on the ground. The bright center dot moves to the tip
+          of the line in `dotAtTip` mode (the placement point hangs above the
+          floor), leaving a faint ring here so the plan position stays read. */}
+      {!isSnapping && (
+        <group rotation={[-Math.PI / 2, 0, 0]}>
+          {/* Center dot — at the ground unless the placement point is elevated */}
+          {!dotAtTip && (
+            <mesh layers={EDITOR_LAYER} renderOrder={2}>
+              <circleGeometry args={[0.06, 32]} />
+              <meshBasicMaterial
+                color={color}
+                depthTest={false}
+                depthWrite={false}
+                opacity={0.9}
+                transparent
+              />
+            </mesh>
+          )}
 
-        {/* Outer ring / glow */}
-        <mesh layers={EDITOR_LAYER} renderOrder={2}>
-          <circleGeometry args={[0.2, 32]} />
-          <meshBasicMaterial
-            color={color}
-            depthTest={false}
-            depthWrite={false}
-            opacity={0.25}
-            transparent
-          />
-        </mesh>
-      </group>
+          {/* Outer ring / glow */}
+          <mesh layers={EDITOR_LAYER} renderOrder={2}>
+            <circleGeometry args={[0.2, 32]} />
+            <meshBasicMaterial
+              color={color}
+              depthTest={false}
+              depthWrite={false}
+              opacity={dotAtTip ? 0.2 : 0.25}
+              transparent
+            />
+          </mesh>
+        </group>
+      )}
 
       {/* Vertical line */}
       {height > 0 && (
@@ -80,6 +107,15 @@ export const CursorSphere = forwardRef<Group, CursorSphereProps>(function Cursor
         </mesh>
       )}
 
+      {/* Bright marker dot at the tip of the line — the actual placement
+          point, riding at the cursor while the line drops to the floor. */}
+      {dotAtTip && height > 0 && (
+        <mesh layers={EDITOR_LAYER} position={[0, height, 0]} renderOrder={2}>
+          <sphereGeometry args={[0.08, 20, 14]} />
+          <meshBasicMaterial color={color} depthTest={false} depthWrite={false} />
+        </mesh>
+      )}
+
       {/* Tool Icon Tooltip at the top of the line */}
       {isVisible && showTooltip && (activeToolConfig || tooltipContent) && (
         <Html

package/src/components/tools/shared/drag-bounding-box.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { sceneRegistry } from '@pascal-app/core'
+import { type AnyNodeId, resolveFacingIndicator, sceneRegistry, useScene } from '@pascal-app/core'
 import { useEffect, useMemo } from 'react'
 import {
   Box3,
@@ -15,6 +15,7 @@ import {
 import { distance, smoothstep, uv, vec2 } from 'three/tsl'
 import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
+import useFacingPose from '../../../store/use-facing-pose'
 
 const NO_RAYCAST = () => null
 
@@ -71,6 +72,8 @@ interface DragBoundingBoxProps {
    * includes per-level landings outside the shaft footprint).
    */
   size?: [number, number, number]
+  /** Local center of `size`. Defaults to the node origin plus half-height. */
+  center?: [number, number, number]
   /** Y center of the box in the node's local frame. Defaults to `size[1] / 2`. */
   centerY?: number
   color?: number
@@ -90,9 +93,13 @@ export function DragBoundingBox({
   rotationY = 0,
   fallbackSize = [0, 0, 0],
   size,
+  center,
   centerY,
   color = DEFAULT_COLOR,
 }: DragBoundingBoxProps) {
+  const nodeType = useScene((state) => state.nodes[nodeId as AnyNodeId]?.type)
+  const facing = nodeType ? resolveFacingIndicator(nodeType) : null
+
   const measured = useMemo(() => {
     if (size) return null
     const obj = sceneRegistry.nodes.get(nodeId)
@@ -101,9 +108,10 @@ export function DragBoundingBox({
 
   const [w, h, d] = size ?? measured?.size ?? fallbackSize
   const [cx, cy, cz] = size
-    ? [0, centerY ?? size[1] / 2, 0]
+    ? (center ?? [0, centerY ?? size[1] / 2, 0])
     : (measured?.center ?? [0, fallbackSize[1] / 2, 0])
   const minY = cy - h / 2
+  const groundY = minY + 0.01
 
   const edgeGeometry = useMemo(() => {
     const box = new BoxGeometry(w, h, d)
@@ -117,9 +125,9 @@ export function DragBoundingBox({
   const planeGeometry = useMemo(() => {
     const plane = new PlaneGeometry(w, d)
     plane.rotateX(-Math.PI / 2)
-    plane.translate(cx, minY + 0.01, cz)
+    plane.translate(cx, groundY, cz)
     return plane
-  }, [w, d, cx, minY, cz])
+  }, [w, d, cx, groundY, cz])
 
   const edgeMaterial = useMemo(
     () => new LineBasicNodeMaterial({ color, linewidth: 3, depthTest: false, depthWrite: false }),
@@ -147,6 +155,22 @@ export function DragBoundingBox({
     [edgeGeometry, planeGeometry, edgeMaterial, planeMaterial],
   )
 
+  // Publish the facing pose to the editor-side overlay (the single triangle
+  // renderer) rather than drawing it here. The node origin is `position`; the
+  // footprint centre is `[cx, cz]` in the node's local frame. Runs each drag
+  // frame so the triangle follows; a separate mount/unmount effect clears it.
+  useEffect(() => {
+    if (!facing || d <= 0) return
+    useFacingPose.getState().set({
+      position: [position[0], position[1] + groundY, position[2]],
+      rotationY,
+      depth: d,
+      center: [cx, cz],
+      reversed: facing.reversed,
+    })
+  }, [facing, position, rotationY, d, cx, cz, groundY])
+  useEffect(() => () => useFacingPose.getState().clear(), [])
+
   if (w <= 0 || h <= 0 || d <= 0) return null
 
   return (

package/src/components/tools/shared/facing-indicator.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useMemo } from 'react'
+import { BufferGeometry, DoubleSide, Float32BufferAttribute } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../../lib/constants'
+
+// A flat forward-pointing triangle drawn on the floor just in front of a
+// placement ghost, so the direction the node will face is obvious. Tip at local
+// +Z (every kind's forward face); render it inside the ghost's rotated group so
+// it inherits the node's yaw. Matches the item coordinator / drag-bounding-box
+// indicators (same size, colour, double-sided so it shows from above).
+const FACING_INDICATOR_WIDTH = 0.4
+const FACING_INDICATOR_LENGTH = 0.46
+const FACING_INDICATOR_GAP = 0.45
+
+/**
+ * @param depth    bbox depth (along local Z) of the ghost — positions the
+ *                 triangle just past the front edge.
+ * @param center   optional [x, z] of the bbox centre in the ghost's local frame.
+ * @param reversed point along local -Z (the front is the -Z side, e.g. a stair
+ *                 entry) instead of +Z.
+ * @param y        small lift off the floor to avoid z-fighting.
+ */
+export function FacingIndicator({
+  depth,
+  center = [0, 0],
+  reversed = false,
+  y = 0.02,
+}: {
+  depth: number
+  center?: [number, number]
+  reversed?: boolean
+  y?: number
+}) {
+  const dir = reversed ? -1 : 1
+  // Per-instance geometry/material (not module singletons) so this works no
+  // matter which package mounts it (the tools live in `nodes`, imported via
+  // `@pascal-app/editor`). Disposed on unmount.
+  const geometry = useMemo(() => {
+    const g = new BufferGeometry()
+    g.setAttribute(
+      'position',
+      new Float32BufferAttribute(
+        [
+          0,
+          0,
+          dir * FACING_INDICATOR_LENGTH,
+          FACING_INDICATOR_WIDTH / 2,
+          0,
+          0,
+          -FACING_INDICATOR_WIDTH / 2,
+          0,
+          0,
+        ],
+        3,
+      ),
+    )
+    return g
+  }, [dir])
+  const material = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: 0x22_c5_5e, // green-500 (forward)
+        depthTest: false,
+        depthWrite: false,
+        side: DoubleSide,
+      }),
+    [],
+  )
+  useEffect(
+    () => () => {
+      geometry.dispose()
+      material.dispose()
+    },
+    [geometry, material],
+  )
+
+  return (
+    <mesh
+      frustumCulled={false}
+      geometry={geometry}
+      layers={EDITOR_LAYER}
+      material={material}
+      position={[center[0], y, center[1] + dir * (depth / 2 + FACING_INDICATOR_GAP)]}
+      renderOrder={1001}
+    />
+  )
+}

package/src/components/tools/shared/facing-pose-indicator.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react'
+import type { Group } from 'three'
+import useFacingPose, { type FacingPose } from '../../../store/use-facing-pose'
+import { FacingIndicator } from './facing-indicator'
+
+// The single editor-side renderer for the placement/move facing triangle.
+// Mounted once inside ToolManager's building-local group; every tool publishes
+// its ghost pose to `useFacingPose` and this draws the triangle. The pose
+// (position/yaw) is applied imperatively to a ref so the per-frame cursor
+// updates don't re-render React — only a change in footprint shape (depth /
+// centre), which is constant per tool session, triggers a re-render.
+export function FacingPoseIndicator() {
+  const groupRef = useRef<Group>(null)
+  const [shape, setShape] = useState<Pick<FacingPose, 'depth' | 'center' | 'reversed'> | null>(null)
+
+  useEffect(() => {
+    const apply = (pose: FacingPose | null) => {
+      const group = groupRef.current
+      if (group) {
+        if (pose) {
+          group.visible = true
+          group.position.set(...pose.position)
+          group.rotation.y = pose.rotationY
+        } else {
+          group.visible = false
+        }
+      }
+      setShape((prev) => {
+        if (!pose) return null
+        const center = pose.center ?? [0, 0]
+        if (
+          prev &&
+          prev.depth === pose.depth &&
+          prev.reversed === pose.reversed &&
+          (prev.center ?? [0, 0])[0] === center[0] &&
+          (prev.center ?? [0, 0])[1] === center[1]
+        ) {
+          return prev
+        }
+        return { depth: pose.depth, center, reversed: pose.reversed }
+      })
+    }
+    apply(useFacingPose.getState().pose)
+    return useFacingPose.subscribe((state) => apply(state.pose))
+  }, [])
+
+  return (
+    <group ref={groupRef} visible={false}>
+      {shape ? (
+        <FacingIndicator center={shape.center} depth={shape.depth} reversed={shape.reversed} />
+      ) : null}
+    </group>
+  )
+}

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

@@ -2,15 +2,131 @@
 
 import '../../../three-types'
 
+import { Html } from '@react-three/drei'
 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 } from '../../../lib/measurements'
 import { createLineGeometry, getBoxEdgePoints } from './placement-box-geometry'
 
 const VALID_COLOR = 0x22_c5_5e // green-500
 const INVALID_COLOR = 0xef_44_44 // red-500
+const MEASUREMENT_COLOR = 0x0f_17_2a
+
+type PlacementBoxMeasurements = {
+  unit: LinearUnit
+}
+
+function getMeasurementGuidePoints(width: number, height: number, depth: number) {
+  const minX = -width / 2
+  const maxX = width / 2
+  const minZ = -depth / 2
+  const maxZ = depth / 2
+  const guideOffset = 0.18
+  const tick = 0.08
+  const y = 0.02
+
+  return {
+    depth: [
+      maxX + guideOffset,
+      y,
+      minZ,
+      maxX + guideOffset,
+      y,
+      maxZ,
+
+      maxX + guideOffset - tick,
+      y,
+      minZ,
+      maxX + guideOffset + tick,
+      y,
+      minZ,
+
+      maxX + guideOffset - tick,
+      y,
+      maxZ,
+      maxX + guideOffset + tick,
+      y,
+      maxZ,
+    ],
+    height: [
+      minX - guideOffset,
+      0,
+      minZ,
+      minX - guideOffset,
+      height,
+      minZ,
+
+      minX - guideOffset - tick,
+      0,
+      minZ,
+      minX - guideOffset + tick,
+      0,
+      minZ,
+
+      minX - guideOffset - tick,
+      height,
+      minZ,
+      minX - guideOffset + tick,
+      height,
+      minZ,
+    ],
+    width: [
+      minX,
+      y,
+      maxZ + guideOffset,
+      maxX,
+      y,
+      maxZ + guideOffset,
+
+      minX,
+      y,
+      maxZ + guideOffset - tick,
+      minX,
+      y,
+      maxZ + guideOffset + tick,
+
+      maxX,
+      y,
+      maxZ + guideOffset - tick,
+      maxX,
+      y,
+      maxZ + guideOffset + tick,
+    ],
+  }
+}
+
+function MeasurementPill({
+  label,
+  position,
+}: {
+  label: string
+  position: [number, number, number]
+}) {
+  return (
+    <Html center position={position} style={{ pointerEvents: 'none' }}>
+      <div
+        style={{
+          background: 'rgba(15, 23, 42, 0.86)',
+          border: '1px solid rgba(15, 23, 42, 0.65)',
+          borderRadius: '999px',
+          color: '#f8fafc',
+          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+          fontSize: '11px',
+          fontWeight: 600,
+          lineHeight: 1,
+          padding: '4px 8px',
+          pointerEvents: 'none',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {label}
+      </div>
+    </Html>
+  )
+}
 
 /**
  * Green/red placement footprint shown while a node follows the cursor — the
@@ -27,12 +143,15 @@ const INVALID_COLOR = 0xef_44_44 // red-500
  */
 export function PlacementBox({
   dimensions,
+  measurements,
   position,
   rotationY = 0,
   valid,
 }: {
   /** Footprint extent `[width, height, depth]` (unrotated). */
   dimensions: [number, number, number]
+  /** Optional dimension guide labels matching the GLB item placement cursor. */
+  measurements?: PlacementBoxMeasurements
   /** World-plan position of the footprint centre (floor level). */
   position: [number, number, number]
   /** Y-rotation in radians, applied to the whole box. */
@@ -61,6 +180,14 @@ export function PlacementBox({
     geometry.translate(0, 0.01, 0)
     return geometry
   }, [width, depth])
+  const measurementGuideGeometries = useMemo(() => {
+    const points = getMeasurementGuidePoints(width, height, depth)
+    return {
+      depth: createLineGeometry(points.depth),
+      height: createLineGeometry(points.height),
+      width: createLineGeometry(points.width),
+    }
+  }, [width, height, depth])
 
   const edgeMaterial = useMemo(
     () => new LineBasicNodeMaterial({ linewidth: 3, depthTest: false, depthWrite: false }),
@@ -77,6 +204,16 @@ export function PlacementBox({
     material.opacityNode = smoothstep(0, 0.7, distance(uv(), vec2(0.5, 0.5))).mul(0.6)
     return material
   }, [])
+  const measurementMaterial = useMemo(
+    () =>
+      new LineBasicNodeMaterial({
+        color: MEASUREMENT_COLOR,
+        linewidth: 2,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    [],
+  )
 
   useEffect(() => {
     const color = valid ? VALID_COLOR : INVALID_COLOR
@@ -90,6 +227,14 @@ export function PlacementBox({
     },
     [edgeGeometry],
   )
+  useEffect(
+    () => () => {
+      measurementGuideGeometries.depth.dispose()
+      measurementGuideGeometries.height.dispose()
+      measurementGuideGeometries.width.dispose()
+    },
+    [measurementGuideGeometries],
+  )
   useEffect(
     () => () => {
       basePlaneGeometry.dispose()
@@ -100,10 +245,46 @@ export function PlacementBox({
     () => () => {
       edgeMaterial.dispose()
       basePlaneMaterial.dispose()
+      measurementMaterial.dispose()
     },
-    [edgeMaterial, basePlaneMaterial],
+    [edgeMaterial, basePlaneMaterial, measurementMaterial],
   )
 
+  const measurementContent = measurements ? (
+    <>
+      <lineSegments
+        geometry={measurementGuideGeometries.width}
+        layers={EDITOR_LAYER}
+        material={measurementMaterial}
+        renderOrder={998}
+      />
+      <lineSegments
+        geometry={measurementGuideGeometries.depth}
+        layers={EDITOR_LAYER}
+        material={measurementMaterial}
+        renderOrder={998}
+      />
+      <lineSegments
+        geometry={measurementGuideGeometries.height}
+        layers={EDITOR_LAYER}
+        material={measurementMaterial}
+        renderOrder={998}
+      />
+      <MeasurementPill
+        label={formatLinearMeasurement(width, measurements.unit)}
+        position={[0, 0.04, depth / 2 + 0.24]}
+      />
+      <MeasurementPill
+        label={formatLinearMeasurement(depth, measurements.unit)}
+        position={[width / 2 + 0.24, 0.04, 0]}
+      />
+      <MeasurementPill
+        label={formatLinearMeasurement(height, measurements.unit)}
+        position={[-width / 2 - 0.24, height / 2, -depth / 2]}
+      />
+    </>
+  ) : null
+
   return (
     <group position={position} rotation={[0, rotationY, 0]}>
       <lineSegments
@@ -112,6 +293,7 @@ export function PlacementBox({
         material={edgeMaterial}
         renderOrder={999}
       />
+      {measurementContent}
       <mesh
         geometry={basePlaneGeometry}
         layers={EDITOR_LAYER}