@pascal-app/editor 0.7.0 → 0.9.1

package/src/components/editor/wall-opening-highlights.tsx

@@ -0,0 +1,181 @@
+'use client'
+
+import { type AnyNodeId, sceneRegistry, useLiveNodeOverrides, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createPortal, useFrame, useThree } from '@react-three/fiber'
+import { useEffect, useMemo, useRef } from 'react'
+import { BoxGeometry, type BufferGeometry, EdgesGeometry, type Group, Vector3 } from 'three'
+import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../lib/constants'
+
+// How far the outline sits outside the opening's own extents, so it reads as
+// a frame *around* the opening rather than coinciding with its edges.
+const PAD = 0.05
+
+const ACCENT = 0x83_81_ed
+
+const NO_RAYCAST = () => null
+const scratchScale = new Vector3()
+
+// Indigo accent matching the resize-arrow handles — deliberately distinct
+// from the white selection outline so the highlight reads as "editable child
+// here", not "this is selected". `depthTest: false` keeps both layers drawn
+// on top of the wall so frameless openings (which have no visible geometry)
+// are still located. Shared across every box; never disposed.
+const outlineMaterial = new LineBasicNodeMaterial({
+  color: ACCENT,
+  depthTest: false,
+  depthWrite: false,
+})
+
+// Translucent block that fills the opening volume so the cutout reads as an
+// occupied slot from every angle — the front face shows it head-on, the top
+// face shows it from a top-down floorplan view (a single vertical pane would
+// be edge-on, hence invisible, when looking straight down). Front-side culling
+// keeps the translucency even instead of doubling up on overlapping back faces.
+const fillMaterial = new MeshBasicNodeMaterial({
+  color: ACCENT,
+  transparent: true,
+  opacity: 0.5,
+  depthTest: false,
+  depthWrite: false,
+})
+
+function makeOutlineGeometry(width: number, height: number, depth: number): BufferGeometry {
+  const box = new BoxGeometry(width + PAD, height + PAD, depth + PAD)
+  const edges = new EdgesGeometry(box)
+  box.dispose()
+  return edges
+}
+
+/**
+ * When a wall is selected, draws a translucent indigo highlight (filled block
+ * + outline) over each door / window it hosts. Openings whose `openingKind`
+ * is `'opening'` have no visible geometry, so without this affordance the
+ * user can't tell an editable cutout lives there — the fill marks it (and
+ * stays out of the way of clicking the opening itself, which selects it).
+ *
+ * Highlights are portalled to the scene root so they sit outside the wall's
+ * selection-outline subtree and keep their own accent colour.
+ */
+export function WallOpeningHighlights() {
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const { scene } = useThree()
+
+  if (selectedIds.length === 0) return null
+
+  return createPortal(
+    <>
+      {selectedIds.map((id) => (
+        <SelectionOpeningHighlights key={id} selectedId={id} />
+      ))}
+    </>,
+    scene,
+  )
+}
+
+// Resolves a selected node into the opening highlight(s) to draw:
+//  - a selected wall → a hint over each door / window it hosts ("editable
+//    child here").
+//  - a directly-selected frameless opening (a `door` whose `openingKind` is
+//    `'opening'`) → a fill over its own cutout, so the selection reads as
+//    occupied even though the opening renders no geometry of its own.
+function SelectionOpeningHighlights({ selectedId }: { selectedId: string }) {
+  const node = useScene((state) => state.nodes[selectedId as AnyNodeId])
+
+  if (node?.type === 'wall') {
+    const depth = node.thickness ?? 0.1
+    return (
+      <>
+        {(node.children ?? []).map((childId) => (
+          <OpeningHighlight depth={depth} key={childId} openingId={childId} />
+        ))}
+      </>
+    )
+  }
+
+  if (node?.type === 'door' && node.openingKind === 'opening') {
+    return <SelectedOpeningHighlight openingId={selectedId} parentId={node.parentId} />
+  }
+
+  return null
+}
+
+// A frameless opening selected on its own. Pulls the cutout depth from its
+// host wall's thickness so the fill block matches the wall it sits in.
+function SelectedOpeningHighlight({
+  openingId,
+  parentId,
+}: {
+  openingId: string
+  parentId: string | null
+}) {
+  const parent = useScene((state) => (parentId ? state.nodes[parentId as AnyNodeId] : undefined))
+  const depth = parent?.type === 'wall' ? (parent.thickness ?? 0.1) : 0.1
+  return <OpeningHighlight depth={depth} openingId={openingId} />
+}
+
+function OpeningHighlight({ openingId, depth }: { openingId: string; depth: number }) {
+  const node = useScene((state) => state.nodes[openingId as AnyNodeId])
+  // Resize arrows publish width/height to the live-override store during the
+  // drag and only commit to the scene node on pointer-up, so read the
+  // override-merged dimensions to keep the highlight box tracking the resize.
+  const override = useLiveNodeOverrides((s) => s.overrides.get(openingId))
+  const groupRef = useRef<Group>(null)
+
+  const isOpening = node?.type === 'door' || node?.type === 'window'
+  const width = isOpening ? ((override?.width as number | undefined) ?? node.width) : 0
+  const height = isOpening ? ((override?.height as number | undefined) ?? node.height) : 0
+
+  const outlineGeometry = useMemo(
+    () => (isOpening ? makeOutlineGeometry(width, height, depth) : null),
+    [isOpening, width, height, depth],
+  )
+  const fillGeometry = useMemo(
+    () => (isOpening ? new BoxGeometry(width, height, depth) : null),
+    [isOpening, width, height, depth],
+  )
+  useEffect(() => () => outlineGeometry?.dispose(), [outlineGeometry])
+  useEffect(() => () => fillGeometry?.dispose(), [fillGeometry])
+
+  // The opening's mesh (registered by its renderer) already carries the wall
+  // transform + its own local pose baked into `matrixWorld`. Copy that
+  // straight onto the highlight each frame so it tracks moves, resizes, and
+  // wall rotation without any wall-local maths here.
+  useFrame(() => {
+    const group = groupRef.current
+    if (!group) return
+    const obj = sceneRegistry.nodes.get(openingId as AnyNodeId)
+    if (!obj) {
+      group.visible = false
+      return
+    }
+    group.visible = true
+    obj.matrixWorld.decompose(group.position, group.quaternion, scratchScale)
+  })
+
+  if (!isOpening || !outlineGeometry || !fillGeometry) return null
+
+  return (
+    <group ref={groupRef}>
+      <mesh
+        frustumCulled={false}
+        geometry={fillGeometry}
+        layers={EDITOR_LAYER}
+        material={fillMaterial}
+        raycast={NO_RAYCAST}
+        renderOrder={1004}
+      />
+      <lineSegments
+        frustumCulled={false}
+        geometry={outlineGeometry}
+        layers={EDITOR_LAYER}
+        material={outlineMaterial}
+        raycast={NO_RAYCAST}
+        renderOrder={1005}
+      />
+    </group>
+  )
+}
+
+export default WallOpeningHighlights

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

@@ -0,0 +1,150 @@
+'use client'
+
+import { sceneRegistry } from '@pascal-app/core'
+import { useWallSnapIndicator, type WallSnapKind } from '@pascal-app/editor'
+import { useViewer } from '@pascal-app/viewer'
+import { useFrame } from '@react-three/fiber'
+import { memo, useRef } from 'react'
+import { BoxGeometry, CircleGeometry, CylinderGeometry, type Group } from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../lib/constants'
+
+/**
+ * "Magnetic" wall-snap beacon for the 3D editor — a vertical marker that
+ * stands at the draft / move endpoint while it's locked onto existing wall
+ * geometry. It's the spatial cue from the design reference: a standing pillar
+ * so you can see *where* the snap caught even at an angle, plus a floor marker
+ * whose shape tells you *what* it caught (CAD-style osnap glyphs):
+ *
+ *   endpoint (corner) → square    midpoint → triangle
+ *   intersection      → ✕ cross   wall body (edge) → circle
+ *
+ * Subscribes to the shared `useWallSnapIndicator` store (published by the wall
+ * draft + endpoint-move tools). Shares the indigo accent of
+ * `Alignment3DGuideLayer` for visual consistency.
+ *
+ * The point carries only XZ (building-local plan coords); like the alignment
+ * guides it's lifted to the active level's building-local Y each frame so it
+ * stands on the floor being edited when floors are stacked. Mounted inside
+ * ToolManager's building-local group.
+ */
+
+const BEACON_COLOR = 0x81_8c_f8 // indigo-400 — matches the alignment guide accent
+const BEACON_HEIGHT = 2.5 // world-meter height of the pillar
+const BEACON_RADIUS = 0.018 // world-meter radius of the pillar
+const MARKER = 0.13 // world-meter base size of the floor glyph
+const FLOOR_LIFT = 0.012 // tiny lift so the marker reads above the floor grid
+
+// Shared resources — one material + unit geometries, so snap churn during a
+// drag doesn't rebuild GPU buffers (mirrors the alignment guide layer).
+const beaconMaterial = new MeshBasicNodeMaterial({
+  color: BEACON_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+  opacity: 0.9,
+})
+const PILLAR_GEOMETRY = new CylinderGeometry(BEACON_RADIUS, BEACON_RADIUS, BEACON_HEIGHT, 8)
+// Flat unit geometries scaled per marker. Boxes are 0.002 tall so they read as
+// a flat plate; circles/triangles lie flat via an X rotation at the mesh.
+const FLAT_BOX_GEOMETRY = new BoxGeometry(1, 0.002, 1)
+const TRIANGLE_GEOMETRY = new CircleGeometry(1, 3)
+const CIRCLE_GEOMETRY = new CircleGeometry(1, 28)
+
+export const WallSnapBeaconLayer = memo(function WallSnapBeaconLayer() {
+  const point = useWallSnapIndicator((s) => s.point)
+  const levelId = useViewer((s) => s.selection.levelId)
+  const groupRef = useRef<Group>(null)
+
+  // Track the active level's building-local Y each frame so the beacon stands
+  // on the floor being edited, not the building base — same source the
+  // alignment guide layer and `grid.tsx` read.
+  useFrame(() => {
+    const group = groupRef.current
+    if (!group) return
+    const levelMesh = levelId ? sceneRegistry.nodes.get(levelId) : null
+    group.position.y = levelMesh ? levelMesh.position.y : 0
+  })
+
+  if (!point) return null
+  return (
+    <group ref={groupRef}>
+      <mesh
+        geometry={PILLAR_GEOMETRY}
+        layers={EDITOR_LAYER}
+        material={beaconMaterial}
+        position={[point.x, BEACON_HEIGHT / 2, point.z]}
+        renderOrder={1002}
+      />
+      <SnapMarker kind={point.kind} x={point.x} z={point.z} />
+    </group>
+  )
+})
+
+/** Floor glyph whose shape encodes which kind of geometry the point snapped to. */
+function SnapMarker({ kind, x, z }: { kind: WallSnapKind; x: number; z: number }) {
+  const y = FLOOR_LIFT
+  if (kind === 'endpoint') {
+    return (
+      <mesh
+        geometry={FLAT_BOX_GEOMETRY}
+        layers={EDITOR_LAYER}
+        material={beaconMaterial}
+        position={[x, y, z]}
+        renderOrder={1001}
+        scale={[MARKER * 2, 1, MARKER * 2]}
+      />
+    )
+  }
+  if (kind === 'midpoint') {
+    return (
+      <mesh
+        geometry={TRIANGLE_GEOMETRY}
+        layers={EDITOR_LAYER}
+        material={beaconMaterial}
+        position={[x, y, z]}
+        renderOrder={1001}
+        rotation={[-Math.PI / 2, 0, 0]}
+        scale={[MARKER * 1.4, MARKER * 1.4, MARKER * 1.4]}
+      />
+    )
+  }
+  if (kind === 'intersection') {
+    // Two crossed bars → an ✕, the universal "crossing" glyph.
+    return (
+      <>
+        <mesh
+          geometry={FLAT_BOX_GEOMETRY}
+          layers={EDITOR_LAYER}
+          material={beaconMaterial}
+          position={[x, y, z]}
+          renderOrder={1001}
+          rotation={[0, Math.PI / 4, 0]}
+          scale={[MARKER * 2.6, 1, MARKER * 0.5]}
+        />
+        <mesh
+          geometry={FLAT_BOX_GEOMETRY}
+          layers={EDITOR_LAYER}
+          material={beaconMaterial}
+          position={[x, y, z]}
+          renderOrder={1001}
+          rotation={[0, -Math.PI / 4, 0]}
+          scale={[MARKER * 2.6, 1, MARKER * 0.5]}
+        />
+      </>
+    )
+  }
+  // 'wall' (edge / along-wall) → circle
+  return (
+    <mesh
+      geometry={CIRCLE_GEOMETRY}
+      layers={EDITOR_LAYER}
+      material={beaconMaterial}
+      position={[x, y, z]}
+      renderOrder={1001}
+      rotation={[-Math.PI / 2, 0, 0]}
+      scale={[MARKER, MARKER, MARKER]}
+    />
+  )
+}

package/src/components/editor-2d/floorplan-action-menu-layer.tsx

@@ -14,12 +14,14 @@ export type FloorplanActionMenuHandler = (event: ReactMouseEvent<HTMLButtonEleme
 export type FloorplanActionMenuEntry = {
   position: SvgPoint | null
   onDelete: FloorplanActionMenuHandler
-  onMove: FloorplanActionMenuHandler
+  onMove?: FloorplanActionMenuHandler
   onAddHole?: FloorplanActionMenuHandler
+  onCurve?: FloorplanActionMenuHandler
   onDuplicate?: FloorplanActionMenuHandler
 }
 
 type FloorplanActionMenuLayerProps = {
+  elevator: FloorplanActionMenuEntry
   item: FloorplanActionMenuEntry
   wall: FloorplanActionMenuEntry
   fence: FloorplanActionMenuEntry
@@ -33,6 +35,7 @@ type FloorplanActionMenuLayerProps = {
 }
 
 export const FloorplanActionMenuLayer = memo(function FloorplanActionMenuLayer({
+  elevator,
   item,
   wall,
   fence,
@@ -55,6 +58,7 @@ export const FloorplanActionMenuLayer = memo(function FloorplanActionMenuLayer({
   }
 
   const entries: FloorplanActionMenuEntry[] = [
+    elevator,
     item,
     wall,
     fence,
@@ -81,6 +85,7 @@ export const FloorplanActionMenuLayer = memo(function FloorplanActionMenuLayer({
           >
             <NodeActionMenu
               onAddHole={entry.onAddHole}
+              onCurve={entry.onCurve}
               onDelete={entry.onDelete}
               onDuplicate={entry.onDuplicate}
               onMove={entry.onMove}

package/src/components/editor-2d/floorplan-alignment-guide-layer.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import { useViewer } from '@pascal-app/viewer'
+import { memo } from 'react'
+import useAlignmentGuides from '../../store/use-alignment-guides'
+import { formatMeasurement } from '../editor/measurement-pill'
+import { useFloorplanRender } from './floorplan-render-context'
+
+/**
+ * Figma-style alignment guides for the 2D floor plan.
+ *
+ * Subscribes to the editor-local `useAlignmentGuides` store (separate
+ * from the core store the 3D layer reads). Guides come in
+ * building-local meters, so the layer is mounted INSIDE the rotated
+ * `<g data-floorplan-scene>` — the SVG transform that takes the rest
+ * of the floor-plan geometry from local → screen carries the guide
+ * lines too. Pill labels are counter-rotated by `sceneRotationDeg`
+ * (from `FloorplanRenderProvider`) so they stay upright even when the
+ * scene `<g>` is rotated by building rotation.
+ *
+ * Each guide renders as a red line between the moving and matched
+ * candidate anchors with small `×` end-caps. A distance pill is drawn
+ * at the midpoint when the perpendicular gap is non-zero.
+ *
+ * Stroke widths and handle radii are scaled by `unitsPerPixel` so they
+ * stay a constant size on screen no matter the zoom.
+ */
+export const FloorplanAlignmentGuideLayer = memo(function FloorplanAlignmentGuideLayer() {
+  const guides = useAlignmentGuides((s) => s.guides)
+  const unit = useViewer((s) => s.unit)
+  const ctx = useFloorplanRender()
+
+  if (guides.length === 0) return null
+
+  const upp = ctx?.unitsPerPixel ?? 0.01
+  const sceneRot = ctx?.sceneRotationDeg ?? 0
+
+  // Pixel-budgeted sizes converted to world meters so visuals stay
+  // constant across zoom. Numbers picked to mirror Figma's snap chrome.
+  const stroke = 1 * upp
+  const xCapSize = 4 * upp
+  const pillFontSize = 11 * upp
+  const pillPadX = 5 * upp
+  const pillPadY = 3 * upp
+  const pillRadius = 3 * upp
+  const pillOffset = 8 * upp
+
+  const color = '#ef4444' // tailwind red-500 — matches Figma's snap red
+
+  return (
+    <g pointerEvents="none">
+      {guides.map((guide, i) => {
+        const { from, to, axis } = guide
+        const midX = (from.x + to.x) / 2
+        const midZ = (from.z + to.z) / 2
+        const distMeters = guide.distance
+
+        // Pill placed offset perpendicular to the guide's axis so it
+        // doesn't sit on top of the line itself. For an X-axis guide
+        // (vertical line) we offset along Z; for a Z-axis guide we
+        // offset along X.
+        const pillX = axis === 'x' ? midX + pillOffset : midX
+        const pillZ = axis === 'z' ? midZ + pillOffset : midZ
+        const distLabel = formatMeasurement(distMeters, unit)
+        const charWidth = pillFontSize * 0.55
+        const pillWidth = distLabel.length * charWidth + pillPadX * 2
+        const pillHeight = pillFontSize + pillPadY * 2
+
+        return (
+          <g key={i}>
+            <line stroke={color} strokeWidth={stroke} x1={from.x} x2={to.x} y1={from.z} y2={to.z} />
+            <XCap color={color} size={xCapSize} stroke={stroke} x={from.x} y={from.z} />
+            <XCap color={color} size={xCapSize} stroke={stroke} x={to.x} y={to.z} />
+            {distMeters > 1e-4 && (
+              // Counter-rotate the pill so it stays upright when the
+              // scene `<g>` is rotated by building rotation. SVG's
+              // `transform` runs in the local coord system, so the
+              // rotation pivots around the pill's center.
+              <g transform={`rotate(${-sceneRot} ${pillX} ${pillZ})`}>
+                <rect
+                  fill={color}
+                  height={pillHeight}
+                  rx={pillRadius}
+                  ry={pillRadius}
+                  width={pillWidth}
+                  x={pillX - pillWidth / 2}
+                  y={pillZ - pillHeight / 2}
+                />
+                <text
+                  fill="#ffffff"
+                  fontFamily="-apple-system, system-ui, sans-serif"
+                  fontSize={pillFontSize}
+                  fontWeight={500}
+                  textAnchor="middle"
+                  x={pillX}
+                  y={pillZ + pillFontSize * 0.35}
+                >
+                  {distLabel}
+                </text>
+              </g>
+            )}
+          </g>
+        )
+      })}
+    </g>
+  )
+})
+
+function XCap({
+  color,
+  size,
+  stroke,
+  x,
+  y,
+}: {
+  color: string
+  size: number
+  stroke: number
+  x: number
+  y: number
+}) {
+  return (
+    <g>
+      <line
+        stroke={color}
+        strokeWidth={stroke}
+        x1={x - size}
+        x2={x + size}
+        y1={y - size}
+        y2={y + size}
+      />
+      <line
+        stroke={color}
+        strokeWidth={stroke}
+        x1={x - size}
+        x2={x + size}
+        y1={y + size}
+        y2={y - size}
+      />
+    </g>
+  )
+}

package/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx

@@ -23,7 +23,6 @@ type FloorplanCursorIndicator =
 
 type FloorplanCursorIndicatorOverlayProps = {
   cursorPosition: SvgPoint | null
-  cursorAnchorPosition: SvgPoint | null
   floorplanSelectionTool: FloorplanSelectionTool
   movingOpeningType: 'door' | 'window' | null
   isPanning: boolean
@@ -35,7 +34,6 @@ type FloorplanCursorIndicatorOverlayProps = {
 
 export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndicatorOverlay({
   cursorPosition,
-  cursorAnchorPosition,
   floorplanSelectionTool,
   movingOpeningType,
   isPanning,
@@ -78,10 +76,14 @@ export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndi
       return { kind: 'icon', icon: 'mdi:trash-can-outline' }
     }
 
+    if (mode === 'material-paint') {
+      return { kind: 'asset', iconSrc: '/icons/paint.png' }
+    }
+
     return null
   }, [activeFloorplanToolConfig, floorplanSelectionTool, mode, structureLayer])
 
-  const position = mode === 'delete' ? cursorPosition : cursorAnchorPosition
+  const position = cursorPosition
 
   if (!(indicator && position) || isPanning) {
     return null