@pascal-app/editor 0.9.1 → 1.0.0-beta.1

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/floor-stack-preview.ts

@@ -6,6 +6,8 @@ type FloorStackPreviewArgs = {
   rotation?: unknown
   levelId?: string | null
   nodes?: Record<AnyNodeId, AnyNode>
+  /** Pointer-decided support cap — see `FloorPlacedElevationArgs.maxElevation`. */
+  maxElevation?: number | null
 }
 
 export function getFloorStackPreviewPosition({
@@ -14,6 +16,7 @@ export function getFloorStackPreviewPosition({
   rotation,
   levelId,
   nodes,
+  maxElevation,
 }: FloorStackPreviewArgs): [number, number, number] {
   return getFloorStackedPosition({
     node,
@@ -21,5 +24,6 @@ export function getFloorStackPreviewPosition({
     position,
     rotation,
     levelId,
+    maxElevation,
   })
 }

package/src/components/tools/shared/horizontal-construction-plane.ts

@@ -0,0 +1,123 @@
+import {
+  type AnyNodeId,
+  GROUND_SUPPORT_ID,
+  type GridEvent,
+  sceneRegistry,
+  terrainSupportLift,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Vector3 } from 'three'
+import { publishPlacementSurface } from '../../../lib/active-placement-surface'
+import type { PointerSupportSurface } from './pointer-support-cap'
+
+const SURFACE_UP = new Vector3(0, 1, 0)
+const worldScratch = new Vector3()
+const localScratch = new Vector3()
+const surfacePointScratch = new Vector3()
+
+export type HorizontalConstructionPlane = {
+  /** Building-local Y used by the cursor and draft preview. */
+  localY: number
+  /** World Y used by the shared placement grid. */
+  worldY: number
+  /** Level-local base elevation used when the node is committed. */
+  elevation: number | null
+  /** Support source selected at the first click. */
+  supportSlabId: string | null
+  /** Optional scene node from which this frozen plane was derived. */
+  sourceNodeId: AnyNodeId | null
+}
+
+export function resolveEventConstructionPlane(
+  event: GridEvent,
+  pointed: PointerSupportSurface | null,
+): HorizontalConstructionPlane {
+  if (pointed) {
+    return {
+      localY: pointed.localPoint?.[1] ?? event.localPosition[1],
+      worldY: pointed.worldY,
+      elevation: pointed.elevation,
+      supportSlabId: pointed.supportSlabId,
+      sourceNodeId: pointed.sourceNodeId,
+    }
+  }
+
+  let elevation: number | null = null
+  const levelId = useViewer.getState().selection.levelId
+  const levelMesh = levelId ? sceneRegistry.nodes.get(levelId as AnyNodeId) : undefined
+  if (levelMesh) {
+    localScratch.set(event.position[0], event.position[1], event.position[2])
+    levelMesh.worldToLocal(localScratch)
+    elevation = localScratch.y
+  }
+
+  return {
+    localY: event.localPosition[1],
+    worldY: event.position[1],
+    elevation,
+    supportSlabId: null,
+    sourceNodeId: null,
+  }
+}
+
+export function resolveLevelConstructionPlane(): HorizontalConstructionPlane | null {
+  const { buildingId, levelId } = useViewer.getState().selection
+  if (!levelId) return null
+
+  const levelMesh = sceneRegistry.nodes.get(levelId as AnyNodeId)
+  worldScratch.set(0, 0, 0)
+  if (levelMesh) levelMesh.localToWorld(worldScratch)
+
+  const buildingMesh = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : undefined
+  localScratch.copy(worldScratch)
+  if (buildingMesh) buildingMesh.worldToLocal(localScratch)
+
+  return {
+    localY: localScratch.y,
+    worldY: worldScratch.y,
+    elevation: 0,
+    supportSlabId: null,
+    sourceNodeId: null,
+  }
+}
+
+export function resampleTerrainConstructionPlane(
+  plane: HorizontalConstructionPlane,
+  point: readonly [number, number],
+): HorizontalConstructionPlane {
+  if (plane.supportSlabId !== GROUND_SUPPORT_ID || plane.sourceNodeId) return plane
+
+  const levelId = useViewer.getState().selection.levelId
+  if (!levelId) return plane
+  const elevation = terrainSupportLift(useScene.getState().nodes, levelId, point[0], point[1])
+  if (elevation == null) return plane
+
+  const levelMesh = sceneRegistry.nodes.get(levelId as AnyNodeId)
+  worldScratch.set(point[0], elevation, point[1])
+  if (levelMesh) levelMesh.localToWorld(worldScratch)
+
+  const buildingId = useViewer.getState().selection.buildingId
+  const buildingMesh = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : undefined
+  localScratch.copy(worldScratch)
+  if (buildingMesh) buildingMesh.worldToLocal(localScratch)
+
+  return {
+    localY: localScratch.y,
+    worldY: worldScratch.y,
+    elevation,
+    supportSlabId: GROUND_SUPPORT_ID,
+    sourceNodeId: null,
+  }
+}
+
+export function publishHorizontalConstructionPlane(
+  event: GridEvent,
+  plane: HorizontalConstructionPlane,
+): void {
+  publishPlacementSurface(
+    surfacePointScratch.set(event.position[0], plane.worldY, event.position[2]),
+    SURFACE_UP,
+    'fixed-plane',
+  )
+}