@pascal-app/editor 0.8.0 → 0.9.1

package/src/store/use-wall-move-ghosts.ts

@@ -0,0 +1,36 @@
+import { create } from 'zustand'
+
+/**
+ * Ephemeral preview state for wall move's bridge walls.
+ *
+ * When the user drags a wall whose corner neighbours are off-axis to
+ * the move direction, the junction planner emits a `bridgePlan` for
+ * each — a new wall that would be inserted between the original and
+ * new corner on commit. The 3D `MoveWallTool` already renders these
+ * as translucent ghost meshes mid-drag; the 2D `wallFloorplanMoveTarget`
+ * writes here so the floor-plan SVG layer can render the same hint.
+ *
+ * Writer: `packages/nodes/src/wall/floorplan-move.ts` (on each `apply`,
+ * cleared on `commit` and by the move overlay's cleanup).
+ * Reader: `packages/editor/src/components/editor-2d/floorplan-wall-move-ghost-layer.tsx`.
+ */
+export type WallMoveGhostBridge = {
+  id: string
+  start: [number, number]
+  end: [number, number]
+  /** Plan-space thickness already passed through `getFloorplanWallThickness`. */
+  thickness: number
+  color: string
+}
+
+type WallMoveGhostsState = {
+  bridges: WallMoveGhostBridge[]
+  setBridges: (bridges: WallMoveGhostBridge[]) => void
+  clear: () => void
+}
+
+export const useWallMoveGhosts = create<WallMoveGhostsState>((set) => ({
+  bridges: [],
+  setBridges: (bridges) => set({ bridges }),
+  clear: () => set({ bridges: [] }),
+}))

package/src/store/use-wall-snap-indicator.ts

@@ -0,0 +1,32 @@
+// Ephemeral store for the "magnetic" wall-snap beacon shown during wall
+// drafting. The wall tool writes the active snap point on pointermove when
+// the draft endpoint locks onto existing wall geometry (a corner or a point
+// along a wall); the 3D beacon layer subscribes and draws a vertical marker
+// there. Cleared on commit, cancel, and unmount — same lifecycle as
+// `use-alignment-guides`.
+
+import { create } from 'zustand'
+
+/** Which kind of wall geometry the draft point snapped to. */
+export type WallSnapKind = 'endpoint' | 'midpoint' | 'intersection' | 'wall'
+
+export type WallSnapPoint = {
+  /** Building-local plan coordinates (XZ meters). */
+  x: number
+  z: number
+  kind: WallSnapKind
+}
+
+type WallSnapIndicatorState = {
+  point: WallSnapPoint | null
+  set(point: WallSnapPoint | null): void
+  clear(): void
+}
+
+const useWallSnapIndicator = create<WallSnapIndicatorState>((set) => ({
+  point: null,
+  set: (point) => set({ point }),
+  clear: () => set({ point: null }),
+}))
+
+export default useWallSnapIndicator

package/src/components/editor/preset-thumbnail-generator.tsx

@@ -1,125 +0,0 @@
-'use client'
-
-import { emitter, sceneRegistry } from '@pascal-app/core'
-import { useThree } from '@react-three/fiber'
-import { useCallback, useEffect } from 'react'
-import * as THREE from 'three'
-import { usePresetsAdapter } from '../../contexts/presets-context'
-
-const THUMBNAIL_SIZE = 1080
-const CAMERA_FOV = 45
-
-export const PresetThumbnailGenerator = () => {
-  const gl = useThree((state) => state.gl)
-  const scene = useThree((state) => state.scene)
-  const adapter = usePresetsAdapter()
-
-  const generate = useCallback(
-    async ({ presetId, nodeId }: { presetId: string; nodeId: string }) => {
-      const target = sceneRegistry.nodes.get(nodeId)
-      if (!target) {
-        console.error('❌ PresetThumbnail: node not found', nodeId)
-        return
-      }
-
-      // Compute each mesh's transform relative to the target node (cancels world
-      // position/rotation), so the item is always rendered at origin with a known
-      // neutral orientation regardless of where it's placed in the scene.
-      target.updateWorldMatrix(true, true)
-      const targetInverse = new THREE.Matrix4().copy(target.matrixWorld).invert()
-      const relMatrix = new THREE.Matrix4()
-
-      const clones: THREE.Object3D[] = []
-      target.traverse((obj) => {
-        if (
-          !(obj instanceof THREE.Mesh || obj instanceof THREE.Line || obj instanceof THREE.Points)
-        )
-          return
-        const c = obj.clone(false) // shallow clone: copies geometry, material, visible — no children
-        relMatrix.multiplyMatrices(targetInverse, obj.matrixWorld)
-        relMatrix.decompose(c.position, c.quaternion, c.scale)
-        scene.add(c)
-        clones.push(c)
-      })
-
-      if (clones.length === 0) {
-        console.error('❌ PresetThumbnail: no renderable objects found', nodeId)
-        return
-      }
-
-      // Combined bounding box across all clones
-      const box = new THREE.Box3()
-      for (const c of clones) box.expandByObject(c)
-
-      if (box.isEmpty()) {
-        for (const c of clones) scene.remove(c)
-        console.error('❌ PresetThumbnail: empty bounding box', nodeId)
-        return
-      }
-
-      const sphere = new THREE.Sphere()
-      box.getBoundingSphere(sphere)
-
-      // Camera: aspect matches canvas (center-cropped to square after render)
-      const { width, height } = gl.domElement
-      const camera = new THREE.PerspectiveCamera(CAMERA_FOV, width / height, 0.01, 1000)
-      const dir = new THREE.Vector3(-0.5, 0.5, 0.5).normalize()
-      const fovRad = (CAMERA_FOV * Math.PI) / 180
-      const dist = (sphere.radius / Math.tan(fovRad / 2)) * 1.3
-      camera.position.copy(sphere.center).addScaledVector(dir, dist)
-      camera.lookAt(sphere.center)
-      camera.updateProjectionMatrix()
-
-      // Hide all scene geometry except the clones — leave lights, cameras, etc. intact
-      const cloneSet = new Set<THREE.Object3D>(clones)
-      const snapshot = new Map<THREE.Object3D, boolean>()
-      scene.traverse((obj) => {
-        if (cloneSet.has(obj)) return
-        if (
-          !(obj instanceof THREE.Mesh || obj instanceof THREE.Line || obj instanceof THREE.Points)
-        )
-          return
-        snapshot.set(obj, obj.visible)
-        obj.visible = false
-      })
-
-      gl.render(scene, camera)
-
-      // Restore visibility and remove clones
-      snapshot.forEach((wasVisible, obj) => {
-        obj.visible = wasVisible
-      })
-      for (const c of clones) scene.remove(c)
-
-      // Center-crop to square and scale to THUMBNAIL_SIZE
-      const minDim = Math.min(width, height)
-      const sx = Math.round((width - minDim) / 2)
-      const sy = Math.round((height - minDim) / 2)
-      const offscreen = document.createElement('canvas')
-      offscreen.width = THUMBNAIL_SIZE
-      offscreen.height = THUMBNAIL_SIZE
-      const ctx = offscreen.getContext('2d')!
-      ctx.drawImage(gl.domElement, sx, sy, minDim, minDim, 0, 0, THUMBNAIL_SIZE, THUMBNAIL_SIZE)
-
-      offscreen.toBlob(async (blob) => {
-        if (!blob) {
-          console.error('❌ PresetThumbnail: failed to create blob')
-          return
-        }
-        if (!adapter.uploadPresetThumbnail) return
-        const thumbnailUrl = await adapter.uploadPresetThumbnail(presetId, blob)
-        if (thumbnailUrl) {
-          emitter.emit('preset:thumbnail-updated', { presetId, thumbnailUrl })
-        }
-      }, 'image/png')
-    },
-    [gl, scene, adapter],
-  )
-
-  useEffect(() => {
-    emitter.on('preset:generate-thumbnail', generate)
-    return () => emitter.off('preset:generate-thumbnail', generate)
-  }, [generate])
-
-  return null
-}

package/src/components/editor-2d/renderers/floorplan-roof-layer.tsx

@@ -1,113 +0,0 @@
-'use client'
-
-import type { Point2D, RoofNode, RoofSegmentNode } from '@pascal-app/core'
-import { memo } from 'react'
-import { toSvgX, toSvgY } from '../svg-paths'
-
-type FloorplanLineSegment = {
-  start: Point2D
-  end: Point2D
-}
-
-type FloorplanRoofSegmentEntry = {
-  segment: RoofSegmentNode
-  points: string
-  ridgeLine: FloorplanLineSegment | null
-}
-
-type FloorplanRoofEntry = {
-  roof: RoofNode
-  segments: FloorplanRoofSegmentEntry[]
-}
-
-type FloorplanRoofPalette = {
-  roofFill: string
-  roofActiveFill: string
-  roofSelectedFill: string
-  roofStroke: string
-  roofActiveStroke: string
-  roofSelectedStroke: string
-  roofRidgeStroke: string
-  roofSelectedRidgeStroke: string
-}
-
-type FloorplanRoofLayerProps = {
-  highlightedIdSet: ReadonlySet<string>
-  palette: FloorplanRoofPalette
-  roofEntries: FloorplanRoofEntry[]
-  selectedIdSet: ReadonlySet<string>
-}
-
-export const FloorplanRoofLayer = memo(function FloorplanRoofLayer({
-  highlightedIdSet,
-  palette,
-  roofEntries,
-  selectedIdSet,
-}: FloorplanRoofLayerProps) {
-  if (roofEntries.length === 0) {
-    return null
-  }
-
-  return (
-    <>
-      {roofEntries.map(({ roof, segments }) => {
-        const roofSelected = selectedIdSet.has(roof.id)
-        const roofHighlighted = highlightedIdSet.has(roof.id)
-        const hasSelectedSegment = segments.some(({ segment }) => selectedIdSet.has(segment.id))
-        const hasHighlightedSegment = segments.some(({ segment }) =>
-          highlightedIdSet.has(segment.id),
-        )
-        const isRoofActive =
-          roofSelected || roofHighlighted || hasSelectedSegment || hasHighlightedSegment
-
-        return (
-          <g key={roof.id} pointerEvents="none">
-            {segments.map(({ points, ridgeLine, segment }) => {
-              const isSegmentSelected = selectedIdSet.has(segment.id)
-              const isSegmentHighlighted = highlightedIdSet.has(segment.id)
-              const isSegmentActive = isSegmentSelected || isSegmentHighlighted
-
-              return (
-                <g key={segment.id}>
-                  <polygon
-                    fill={
-                      isSegmentActive
-                        ? palette.roofSelectedFill
-                        : isRoofActive
-                          ? palette.roofActiveFill
-                          : palette.roofFill
-                    }
-                    points={points}
-                    stroke={
-                      isSegmentActive
-                        ? palette.roofSelectedStroke
-                        : isRoofActive
-                          ? palette.roofActiveStroke
-                          : palette.roofStroke
-                    }
-                    strokeWidth={isSegmentActive ? '2.25' : isRoofActive ? '1.75' : '1.1'}
-                    vectorEffect="non-scaling-stroke"
-                  />
-                  {ridgeLine ? (
-                    <line
-                      fill="none"
-                      stroke={
-                        isSegmentActive ? palette.roofSelectedRidgeStroke : palette.roofRidgeStroke
-                      }
-                      strokeWidth={isSegmentActive ? '2' : '1.4'}
-                      vectorEffect="non-scaling-stroke"
-                      x1={toSvgX(ridgeLine.start.x)}
-                      x2={toSvgX(ridgeLine.end.x)}
-                      y1={toSvgY(ridgeLine.start.y)}
-                      y2={toSvgY(ridgeLine.end.y)}
-                    />
-                  ) : null}
-                </g>
-              )
-            })}
-          </g>
-        )
-      })}
-    </>
-  )
-})

package/src/components/tools/building/move-building-tool.tsx

@@ -1,157 +0,0 @@
-'use client'
-
-import {
-  type BuildingNode,
-  emitter,
-  type GridEvent,
-  sceneRegistry,
-  useScene,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useFrame } from '@react-three/fiber'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import * as THREE from 'three'
-import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
-import { sfxEmitter } from '../../../lib/sfx-bus'
-import useEditor from '../../../store/use-editor'
-import { CursorSphere } from '../shared/cursor-sphere'
-
-export function MoveBuildingContent({ node }: { node: BuildingNode }) {
-  const previousGridPosRef = useRef<[number, number] | null>(null)
-
-  // Stable refs so the effect never needs node in its dependency array
-  const nodeIdRef = useRef(node.id)
-  const originalPositionRef = useRef<[number, number, number]>([...node.position] as [
-    number,
-    number,
-    number,
-  ])
-  const originalRotationRef = useRef<number>(node.rotation[1] ?? 0)
-  const pendingRotationRef = useRef<number>(node.rotation[1] ?? 0)
-
-  const [cursorWorldPos, setCursorWorldPos] = useState<[number, number, number]>(() => {
-    const obj = sceneRegistry.nodes.get(node.id)
-    if (obj) {
-      const pos = new THREE.Vector3()
-      obj.getWorldPosition(pos)
-      return [pos.x, pos.y, pos.z]
-    }
-    return [node.position[0], node.position[1], node.position[2]]
-  })
-
-  const exitMoveMode = useCallback(() => {
-    useEditor.getState().setMovingNode(null)
-  }, [])
-
-  useEffect(() => {
-    const nodeId = nodeIdRef.current
-    const originalPosition = originalPositionRef.current
-
-    useScene.temporal.getState().pause()
-
-    let wasCommitted = false
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
-        return
-      }
-
-      const ROTATION_STEP = Math.PI / 2
-      let rotationDelta = 0
-      if (event.key === 'r' || event.key === 'R') rotationDelta = ROTATION_STEP
-      else if (event.key === 't' || event.key === 'T') rotationDelta = -ROTATION_STEP
-
-      if (rotationDelta !== 0) {
-        event.preventDefault()
-        sfxEmitter.emit('sfx:item-rotate')
-        pendingRotationRef.current += rotationDelta
-
-        const mesh = sceneRegistry.nodes.get(nodeId)
-        if (mesh) mesh.rotation.y = pendingRotationRef.current
-      }
-    }
-
-    const onGridMove = (event: GridEvent) => {
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
-
-      if (
-        previousGridPosRef.current &&
-        (gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])
-      ) {
-        sfxEmitter.emit('sfx:grid-snap')
-      }
-
-      previousGridPosRef.current = [gridX, gridZ]
-      setCursorWorldPos([gridX, 0, gridZ])
-
-      // Directly update the Three.js group — no store update during drag
-      const mesh = sceneRegistry.nodes.get(nodeId)
-      if (mesh) {
-        mesh.position.x = gridX
-        mesh.position.z = gridZ
-      }
-    }
-
-    const onGridClick = (event: GridEvent) => {
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
-
-      wasCommitted = true
-
-      useScene.temporal.getState().resume()
-      useScene.getState().updateNode(nodeId, {
-        position: [gridX, originalPosition[1], gridZ],
-        rotation: [0, pendingRotationRef.current, 0],
-      })
-      useScene.temporal.getState().pause()
-
-      sfxEmitter.emit('sfx:item-place')
-      useViewer.getState().setSelection({ buildingId: nodeId as BuildingNode['id'] })
-      exitMoveMode()
-      event.nativeEvent?.stopPropagation?.()
-    }
-
-    const onCancel = () => {
-      // Revert mesh position and rotation immediately
-      const mesh = sceneRegistry.nodes.get(nodeId)
-      if (mesh) {
-        mesh.position.x = originalPosition[0]
-        mesh.position.z = originalPosition[2]
-        mesh.rotation.y = originalRotationRef.current
-      }
-      pendingRotationRef.current = originalRotationRef.current
-      // Restore building selection
-      useViewer.getState().setSelection({ buildingId: nodeId as BuildingNode['id'] })
-      useScene.temporal.getState().resume()
-      // Tell the keyboard handler we handled this, so it doesn't also clear the selection
-      markToolCancelConsumed()
-      exitMoveMode()
-    }
-
-    emitter.on('grid:move', onGridMove)
-    emitter.on('grid:click', onGridClick)
-    emitter.on('tool:cancel', onCancel)
-    window.addEventListener('keydown', onKeyDown)
-
-    return () => {
-      if (!wasCommitted) {
-        useScene.getState().updateNode(nodeId, {
-          position: originalPosition,
-          rotation: [0, originalRotationRef.current, 0],
-        })
-      }
-      useScene.temporal.getState().resume()
-      emitter.off('grid:move', onGridMove)
-      emitter.off('grid:click', onGridClick)
-      emitter.off('tool:cancel', onCancel)
-      window.removeEventListener('keydown', onKeyDown)
-    }
-  }, [exitMoveMode]) // stable — node values captured via refs at mount
-
-  return (
-    <group>
-      <CursorSphere position={cursorWorldPos} showTooltip={false} />
-    </group>
-  )
-}

package/src/components/tools/ceiling/ceiling-boundary-editor.tsx

@@ -1,43 +0,0 @@
-import { type CeilingNode, resolveLevelId, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useCallback } from 'react'
-import { PolygonEditor } from '../shared/polygon-editor'
-
-interface CeilingBoundaryEditorProps {
-  ceilingId: CeilingNode['id']
-}
-
-/**
- * Ceiling boundary editor - allows editing ceiling polygon vertices for a specific ceiling
- * Uses the generic PolygonEditor component
- */
-export const CeilingBoundaryEditor: React.FC<CeilingBoundaryEditorProps> = ({ ceilingId }) => {
-  const ceilingNode = useScene((state) => state.nodes[ceilingId])
-  const updateNode = useScene((state) => state.updateNode)
-  const setSelection = useViewer((state) => state.setSelection)
-
-  const ceiling = ceilingNode?.type === 'ceiling' ? (ceilingNode as CeilingNode) : null
-
-  const handlePolygonChange = useCallback(
-    (newPolygon: Array<[number, number]>) => {
-      updateNode(ceilingId, { polygon: newPolygon })
-      // Re-assert selection so the ceiling stays selected after the edit
-      setSelection({ selectedIds: [ceilingId] })
-    },
-    [ceilingId, updateNode, setSelection],
-  )
-
-  if (!ceiling?.polygon || ceiling.polygon.length < 3) return null
-
-  return (
-    <PolygonEditor
-      allowEdgeMove
-      color="#d4d4d4"
-      levelId={resolveLevelId(ceiling, useScene.getState().nodes)}
-      minVertices={3}
-      onPolygonChange={handlePolygonChange}
-      polygon={ceiling.polygon}
-      surfaceHeight={ceiling.height ?? 2.5}
-    />
-  )
-}

package/src/components/tools/ceiling/ceiling-hole-editor.tsx

@@ -1,49 +0,0 @@
-import { type CeilingNode, resolveLevelId, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useCallback } from 'react'
-import { PolygonEditor } from '../shared/polygon-editor'
-
-interface CeilingHoleEditorProps {
-  ceilingId: CeilingNode['id']
-  holeIndex: number
-}
-
-/**
- * Ceiling hole editor - allows editing a specific hole polygon within a ceiling
- * Uses the generic PolygonEditor component
- */
-export const CeilingHoleEditor: React.FC<CeilingHoleEditorProps> = ({ ceilingId, holeIndex }) => {
-  const ceilingNode = useScene((state) => state.nodes[ceilingId])
-  const updateNode = useScene((state) => state.updateNode)
-  const setSelection = useViewer((state) => state.setSelection)
-
-  const ceiling = ceilingNode?.type === 'ceiling' ? (ceilingNode as CeilingNode) : null
-  const holes = ceiling?.holes || []
-  const hole = holes[holeIndex]
-
-  const handlePolygonChange = useCallback(
-    (newPolygon: Array<[number, number]>) => {
-      const updatedHoles = [...holes]
-      updatedHoles[holeIndex] = newPolygon
-      updateNode(ceilingId, { holes: updatedHoles })
-      // Re-assert selection so the ceiling stays selected after the edit
-      setSelection({ selectedIds: [ceilingId] })
-    },
-    [ceilingId, holeIndex, holes, updateNode, setSelection],
-  )
-
-  if (!(ceiling && hole) || hole.length < 3) return null
-
-  return (
-    <PolygonEditor
-      allowEdgeMove
-      allowPolygonMove
-      color="#ef4444"
-      levelId={resolveLevelId(ceiling, useScene.getState().nodes)} // red for holes
-      minVertices={3}
-      onPolygonChange={handlePolygonChange}
-      polygon={hole}
-      surfaceHeight={ceiling.height ?? 2.5}
-    />
-  )
-}