@pascal-app/editor 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/editor",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Pascal building editor component",
   "type": "module",
   "exports": {
@@ -11,14 +11,14 @@
     "check-types": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pascal-app/core": "*",
-    "@pascal-app/viewer": "*",
+    "@pascal-app/core": "^0.6.0",
+    "@pascal-app/viewer": "^0.6.0",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "next": ">=15",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "three": "^0.183"
+    "three": "^0.184"
   },
   "dependencies": {
     "@iconify/react": "^6.0.2",
@@ -50,13 +50,14 @@
     "zustand": "^5.0.11"
   },
   "devDependencies": {
-    "@pascal-app/core": "*",
-    "@pascal-app/viewer": "*",
+    "@pascal-app/core": "^0.6.0",
+    "@pascal-app/viewer": "^0.6.0",
     "@pascal/typescript-config": "*",
     "@types/howler": "^2.2.12",
+    "@types/node": "^22.19.12",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
-    "@types/three": "^0.183.1",
+    "@types/three": "^0.184.0",
     "typescript": "5.9.3"
   }
 }

package/src/components/editor/editor-layout-v2.tsx

@@ -39,6 +39,15 @@ function LeftColumn({
     }
   }, [tabs, activePanel, setActivePanel])
 
+  // Leaving the items tab while furnishing should drop back to select mode
+  useEffect(() => {
+    if (activePanel === 'items') return
+    const { phase, mode, setMode } = useEditor.getState()
+    if (phase === 'furnish' && mode === 'build') {
+      setMode('select')
+    }
+  }, [activePanel])
+
   const handleResizerDown = useCallback(
     (e: React.PointerEvent) => {
       e.preventDefault()

package/src/components/editor/floating-action-menu.tsx

@@ -3,20 +3,25 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  type CeilingNode,
   DoorNode,
+  FenceNode,
   ItemNode,
   RoofNode,
   RoofSegmentNode,
+  type SlabNode,
   StairNode,
   StairSegmentNode,
   sceneRegistry,
   useScene,
+  WallNode,
   WindowNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
-import { useCallback, useRef } from 'react'
+import { Move } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import * as THREE from 'three'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
@@ -31,26 +36,87 @@ const ALLOWED_TYPES = [
   'stair',
   'stair-segment',
   'wall',
+  'fence',
   'slab',
+  'ceiling',
 ]
-const DELETE_ONLY_TYPES = ['wall', 'slab']
+const DELETE_ONLY_TYPES: string[] = []
+const HOLE_TYPES = ['slab', 'ceiling']
 
 export function FloatingActionMenu() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
-  const nodes = useScene((s) => s.nodes)
+  const updateNode = useScene((s) => s.updateNode)
   const mode = useEditor((s) => s.mode)
-  const setMode = useEditor((s) => s.setMode)
   const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
+  const movingWallEndpoint = useEditor((s) => s.movingWallEndpoint)
+  const movingFenceEndpoint = useEditor((s) => s.movingFenceEndpoint)
+  const curvingFence = useEditor((s) => s.curvingFence)
   const setMovingNode = useEditor((s) => s.setMovingNode)
+  const setMovingWallEndpoint = useEditor((s) => s.setMovingWallEndpoint)
+  const setMovingFenceEndpoint = useEditor((s) => s.setMovingFenceEndpoint)
+  const setCurvingWall = useEditor((s) => s.setCurvingWall)
+  const setCurvingFence = useEditor((s) => s.setCurvingFence)
   const setSelection = useViewer((s) => s.setSelection)
+  const setEditingHole = useEditor((s) => s.setEditingHole)
 
   const groupRef = useRef<THREE.Group>(null)
+  const startEndpointGroupRef = useRef<THREE.Group>(null)
+  const endEndpointGroupRef = useRef<THREE.Group>(null)
+  const [altPressed, setAltPressed] = useState(false)
 
   // Only show for single selection of specific types
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
-  const node = selectedId ? nodes[selectedId as AnyNodeId] : null
+
+  // Subscribe just to the selected node so unrelated scene updates do not
+  // re-render this menu.
+  const node = useScene((s) => (selectedId ? (s.nodes[selectedId as AnyNodeId] ?? null) : null))
   const isValidType = node ? ALLOWED_TYPES.includes(node.type) : false
 
+  // Boolean selector, only re-renders when curving availability actually flips.
+  const canCurveSelectedWall = useScene((s) => {
+    if (!selectedId) return false
+    const selectedNode = s.nodes[selectedId as AnyNodeId]
+    if (selectedNode?.type !== 'wall') return false
+    return !(selectedNode.children ?? []).some((childId) => {
+      const child = s.nodes[childId as AnyNodeId]
+      if (!child) return false
+      if (child.type === 'door' || child.type === 'window') return true
+      if (child.type === 'item') {
+        const attachTo = child.asset?.attachTo
+        return attachTo === 'wall' || attachTo === 'wall-side'
+      }
+      return false
+    })
+  })
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Alt') {
+        setAltPressed(true)
+      }
+    }
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === 'Alt') {
+        setAltPressed(false)
+      }
+    }
+
+    const handleBlur = () => {
+      setAltPressed(false)
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener('keyup', handleKeyUp)
+    window.addEventListener('blur', handleBlur)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('keyup', handleKeyUp)
+      window.removeEventListener('blur', handleBlur)
+    }
+  }, [])
+
   useFrame(() => {
     if (!(selectedId && isValidType && groupRef.current)) return
 
@@ -61,10 +127,47 @@ export function FloatingActionMenu() {
       if (!box.isEmpty()) {
         const center = box.getCenter(new THREE.Vector3())
         // Position above the object, with extra offset for walls/slabs to avoid covering measurement labels
-        const isDeleteOnly = node && DELETE_ONLY_TYPES.includes(node.type)
-        const yOffset = isDeleteOnly ? 0.8 : 0.3
+        const isStructural = node && [...DELETE_ONLY_TYPES, ...HOLE_TYPES].includes(node.type)
+        const yOffset = isStructural ? 0.8 : 0.3
         groupRef.current.position.set(center.x, box.max.y + yOffset, center.z)
       }
+
+      if (node?.type === 'wall' || node?.type === 'fence') {
+        const segment = node as WallNode | FenceNode
+        const endpointYOffset = 0.35
+        const startWorld =
+          node.type === 'wall'
+            ? obj.localToWorld(new THREE.Vector3(0, 0, 0))
+            : obj.localToWorld(new THREE.Vector3(segment.start[0], 0, segment.start[1]))
+        const endWorld =
+          node.type === 'wall'
+            ? obj.localToWorld(
+                new THREE.Vector3(
+                  Math.hypot(
+                    segment.end[0] - segment.start[0],
+                    segment.end[1] - segment.start[1],
+                  ),
+                  0,
+                  0,
+                ),
+              )
+            : obj.localToWorld(new THREE.Vector3(segment.end[0], 0, segment.end[1]))
+
+        if (startEndpointGroupRef.current) {
+          startEndpointGroupRef.current.position.set(
+            startWorld.x,
+            startWorld.y + endpointYOffset,
+            startWorld.z,
+          )
+        }
+        if (endEndpointGroupRef.current) {
+          endEndpointGroupRef.current.position.set(
+            endWorld.x,
+            endWorld.y + endpointYOffset,
+            endWorld.z,
+          )
+        }
+      }
     }
   })
 
@@ -77,6 +180,10 @@ export function FloatingActionMenu() {
         node.type === 'item' ||
         node.type === 'window' ||
         node.type === 'door' ||
+        node.type === 'wall' ||
+        node.type === 'fence' ||
+        node.type === 'slab' ||
+        node.type === 'ceiling' ||
         node.type === 'roof' ||
         node.type === 'roof-segment' ||
         node.type === 'stair' ||
@@ -88,6 +195,39 @@ export function FloatingActionMenu() {
     },
     [node, setMovingNode, setSelection],
   )
+  const handleCurve = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (!node) return
+      sfxEmitter.emit('sfx:item-pick')
+      if (node.type === 'wall') {
+        if (!canCurveSelectedWall) return
+        setCurvingWall(node)
+      } else if (node.type === 'fence') {
+        setCurvingFence(node)
+      } else {
+        return
+      }
+      setSelection({ selectedIds: [] })
+    },
+    [canCurveSelectedWall, node, setCurvingFence, setCurvingWall, setSelection],
+  )
+  const handleEndpointMove = useCallback(
+    (endpoint: 'start' | 'end', e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (!node) return
+      sfxEmitter.emit('sfx:item-pick')
+      if (node.type === 'wall') {
+        setMovingWallEndpoint({ wall: node, endpoint })
+      } else if (node.type === 'fence') {
+        setMovingFenceEndpoint({ fence: node, endpoint })
+      } else {
+        return
+      }
+      setSelection({ selectedIds: [] })
+    },
+    [node, setMovingFenceEndpoint, setMovingWallEndpoint, setSelection],
+  )
 
   const handleDuplicate = useCallback(
     (e: React.MouseEvent) => {
@@ -108,23 +248,43 @@ export function FloatingActionMenu() {
           duplicate = WindowNode.parse(duplicateInfo)
         } else if (node.type === 'item') {
           duplicate = ItemNode.parse(duplicateInfo)
+        } else if (node.type === 'wall') {
+          duplicate = WallNode.parse(duplicateInfo)
+        } else if (node.type === 'fence') {
+          duplicate = FenceNode.parse(duplicateInfo)
+          duplicate.start = [duplicate.start[0] + 1, duplicate.start[1] + 1]
+          duplicate.end = [duplicate.end[0] + 1, duplicate.end[1] + 1]
         } else if (node.type === 'roof') {
+          duplicateInfo.children = []
           duplicate = RoofNode.parse(duplicateInfo)
         } else if (node.type === 'roof-segment') {
           duplicate = RoofSegmentNode.parse(duplicateInfo)
         } else if (node.type === 'stair') {
+          duplicateInfo.children = []
+          duplicateInfo.metadata = { ...duplicateInfo.metadata }
+          delete duplicateInfo.metadata?.isNew
           duplicate = StairNode.parse(duplicateInfo)
         } else if (node.type === 'stair-segment') {
           duplicate = StairSegmentNode.parse(duplicateInfo)
         }
       } catch (error) {
         console.error('Failed to parse duplicate', error)
+        useScene.temporal.getState().resume()
+        return
+      }
+
+      if (!duplicate) {
+        useScene.temporal.getState().resume()
         return
       }
 
       if (duplicate) {
         if (duplicate.type === 'door' || duplicate.type === 'window') {
           useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
+        } else if (duplicate.type === 'wall') {
+          useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
+        } else if (duplicate.type === 'fence') {
+          useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
         } else if (
           duplicate.type === 'roof' ||
           duplicate.type === 'roof-segment' ||
@@ -139,7 +299,35 @@ export function FloatingActionMenu() {
               duplicate.position[2] + 1,
             ]
           }
-          useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
+          if (node.type === 'stair' && duplicate.type === 'stair') {
+            const nodesState = useScene.getState().nodes
+            const createOps: { node: AnyNode; parentId?: AnyNodeId }[] = [
+              { node: duplicate, parentId: duplicate.parentId as AnyNodeId },
+            ]
+
+            for (const childId of node.children ?? []) {
+              const childNode = nodesState[childId]
+              if (childNode?.type !== 'stair-segment') {
+                continue
+              }
+
+              let childDuplicateInfo = structuredClone(childNode) as any
+              delete childDuplicateInfo.id
+              childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata }
+              delete childDuplicateInfo.metadata?.isNew
+
+              try {
+                const childDuplicate = StairSegmentNode.parse(childDuplicateInfo)
+                createOps.push({ node: childDuplicate, parentId: duplicate.id as AnyNodeId })
+              } catch (e) {
+                console.error('Failed to duplicate stair segment', e)
+              }
+            }
+
+            useScene.getState().createNodes(createOps)
+          } else {
+            useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
+          }
 
           // Duplicate children for roof nodes
           if (node.type === 'roof' && node.children) {
@@ -161,71 +349,176 @@ export function FloatingActionMenu() {
           }
 
           // Duplicate children for stair nodes
-          if (node.type === 'stair' && node.children) {
-            const nodesState = useScene.getState().nodes
-            for (const childId of node.children) {
-              const childNode = nodesState[childId]
-              if (childNode && childNode.type === 'stair-segment') {
-                let childDuplicateInfo = structuredClone(childNode) as any
-                delete childDuplicateInfo.id
-                childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata, isNew: true }
-                try {
-                  const childDuplicate = StairSegmentNode.parse(childDuplicateInfo)
-                  useScene.getState().createNode(childDuplicate, duplicate.id as AnyNodeId)
-                } catch (e) {
-                  console.error('Failed to duplicate stair segment', e)
-                }
-              }
-            }
-          }
         }
         if (
           duplicate.type === 'item' ||
+          duplicate.type === 'wall' ||
+          duplicate.type === 'fence' ||
           duplicate.type === 'window' ||
           duplicate.type === 'door' ||
           duplicate.type === 'roof' ||
           duplicate.type === 'roof-segment' ||
-          duplicate.type === 'stair' ||
           duplicate.type === 'stair-segment'
         ) {
           setMovingNode(duplicate as any)
+        } else if (duplicate.type === 'stair') {
+          setSelection({ selectedIds: [duplicate.id as AnyNodeId] })
+        }
+        if (duplicate.type !== 'stair') {
+          setSelection({ selectedIds: [] })
         }
-        setSelection({ selectedIds: [] })
       }
     },
     [node, setMovingNode, setSelection],
   )
 
+  const handleAddHole = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (!(node && selectedId && (node.type === 'slab' || node.type === 'ceiling'))) return
+
+      const polygon = (node as SlabNode | CeilingNode).polygon
+      let cx = 0
+      let cz = 0
+      for (const [x, z] of polygon) {
+        cx += x
+        cz += z
+      }
+      cx /= polygon.length
+      cz /= polygon.length
+
+      const holeSize = 0.5
+      const newHole: Array<[number, number]> = [
+        [cx - holeSize, cz - holeSize],
+        [cx + holeSize, cz - holeSize],
+        [cx + holeSize, cz + holeSize],
+        [cx - holeSize, cz + holeSize],
+      ]
+      const surfaceNode = node as SlabNode | CeilingNode
+      const currentHoles = surfaceNode.holes || []
+      const currentMetadata = currentHoles.map(
+        (_, index) => surfaceNode.holeMetadata?.[index] ?? { source: 'manual' as const },
+      )
+      updateNode(selectedId as AnyNodeId, {
+        holes: [...currentHoles, newHole],
+        holeMetadata: [...currentMetadata, { source: 'manual' }],
+      })
+      setEditingHole({ nodeId: selectedId, holeIndex: currentHoles.length })
+      // Re-assert selection so the node stays selected
+      setSelection({ selectedIds: [selectedId] })
+    },
+    [node, selectedId, updateNode, setEditingHole, setSelection],
+  )
+
   const handleDelete = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      // Activate delete mode (sledgehammer tool) instead of deleting directly
+      if (!selectedId) return
+      if (node?.type === 'item') {
+        sfxEmitter.emit('sfx:item-delete')
+      } else {
+        sfxEmitter.emit('sfx:structure-delete')
+      }
       setSelection({ selectedIds: [] })
-      setMode('delete')
+      useScene.getState().deleteNode(selectedId as AnyNodeId)
     },
-    [setSelection, setMode],
+    [node?.type, selectedId, setSelection],
   )
 
-  if (!(selectedId && node && isValidType && !isFloorplanHovered && mode !== 'delete')) return null
+  if (
+    !(selectedId && node && isValidType && !isFloorplanHovered && mode !== 'delete') ||
+    movingWallEndpoint ||
+    movingFenceEndpoint ||
+    curvingFence
+  )
+    return null
 
   return (
-    <group ref={groupRef}>
-      <Html
-        center
-        style={{
-          pointerEvents: 'auto',
-          touchAction: 'none',
-        }}
-        zIndexRange={[100, 0]}
-      >
-        <NodeActionMenu
-          onDelete={handleDelete}
-          onDuplicate={node && !DELETE_ONLY_TYPES.includes(node.type) ? handleDuplicate : undefined}
-          onMove={node && !DELETE_ONLY_TYPES.includes(node.type) ? handleMove : undefined}
-          onPointerDown={(e) => e.stopPropagation()}
-          onPointerUp={(e) => e.stopPropagation()}
-        />
-      </Html>
+    <group>
+      <group ref={groupRef}>
+        <Html
+          center
+          style={{
+            pointerEvents: 'auto',
+            touchAction: 'none',
+          }}
+          zIndexRange={[100, 0]}
+        >
+          <NodeActionMenu
+            onAddHole={node && HOLE_TYPES.includes(node.type) ? handleAddHole : undefined}
+            onCurve={
+              node?.type === 'fence' || (node?.type === 'wall' && canCurveSelectedWall)
+                ? handleCurve
+                : undefined
+            }
+            onDelete={handleDelete}
+            onDuplicate={
+              node && !DELETE_ONLY_TYPES.includes(node.type) && !HOLE_TYPES.includes(node.type)
+                ? handleDuplicate
+                : undefined
+            }
+            onMove={node && !DELETE_ONLY_TYPES.includes(node.type) ? handleMove : undefined}
+            onPointerDown={(e) => e.stopPropagation()}
+            onPointerUp={(e) => e.stopPropagation()}
+          />
+        </Html>
+      </group>
+      {(node?.type === 'wall' || node?.type === 'fence') && (
+        <>
+          <group ref={startEndpointGroupRef}>
+            <Html
+              center
+              style={{ pointerEvents: 'auto', touchAction: 'none' }}
+              zIndexRange={[100, 0]}
+            >
+              <button
+                aria-label={node.type === 'wall' ? 'Move wall start' : 'Move fence start'}
+                className={`pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full border bg-background/95 shadow-lg backdrop-blur-md transition-colors ${
+                  altPressed
+                    ? 'border-amber-500/80 bg-amber-500/15 text-amber-100 hover:bg-amber-500/20 hover:text-white'
+                    : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
+                }`}
+                onClick={(e) => handleEndpointMove('start', e)}
+                onPointerDown={(e) => e.stopPropagation()}
+                title={
+                  node.type === 'wall'
+                    ? 'Move wall start (Alt to detach)'
+                    : 'Move fence start (Alt to detach)'
+                }
+                type="button"
+              >
+                <Move className="h-4 w-4" />
+              </button>
+            </Html>
+          </group>
+          <group ref={endEndpointGroupRef}>
+            <Html
+              center
+              style={{ pointerEvents: 'auto', touchAction: 'none' }}
+              zIndexRange={[100, 0]}
+            >
+              <button
+                aria-label={node.type === 'wall' ? 'Move wall end' : 'Move fence end'}
+                className={`pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full border bg-background/95 shadow-lg backdrop-blur-md transition-colors ${
+                  altPressed
+                    ? 'border-amber-500/80 bg-amber-500/15 text-amber-100 hover:bg-amber-500/20 hover:text-white'
+                    : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
+                }`}
+                onClick={(e) => handleEndpointMove('end', e)}
+                onPointerDown={(e) => e.stopPropagation()}
+                title={
+                  node.type === 'wall'
+                    ? 'Move wall end (Alt to detach)'
+                    : 'Move fence end (Alt to detach)'
+                }
+                type="button"
+              >
+                <Move className="h-4 w-4" />
+              </button>
+            </Html>
+          </group>
+        </>
+      )}
     </group>
   )
 }

package/src/components/editor/floating-building-action-menu.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { type BuildingNode, sceneRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
+import { useFrame } from '@react-three/fiber'
+import { useCallback, useRef } from 'react'
+import * as THREE from 'three'
+import { sfxEmitter } from '../../lib/sfx-bus'
+import useEditor from '../../store/use-editor'
+import { NodeActionMenu } from './node-action-menu'
+
+export function FloatingBuildingActionMenu() {
+  const buildingId = useViewer((s) => s.selection.buildingId)
+  const levelId = useViewer((s) => s.selection.levelId)
+  const setMovingNode = useEditor((s) => s.setMovingNode)
+  const setSelection = useViewer((s) => s.setSelection)
+
+  const groupRef = useRef<THREE.Group>(null)
+
+  useFrame(() => {
+    if (!(buildingId && !levelId && groupRef.current)) return
+
+    const obj = sceneRegistry.nodes.get(buildingId)
+    if (obj) {
+      const box = new THREE.Box3().setFromObject(obj)
+      if (!box.isEmpty()) {
+        const center = box.getCenter(new THREE.Vector3())
+        groupRef.current.position.set(center.x, 1.5, center.z)
+      }
+    }
+  })
+
+  const handleMove = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (!buildingId) return
+      // Read lazily at click time — no need to subscribe to nodes for a
+      // one-shot action.
+      const node = useScene.getState().nodes[buildingId]
+      if (!node || node.type !== 'building') return
+      sfxEmitter.emit('sfx:item-pick')
+      setMovingNode(node as BuildingNode)
+      setSelection({ buildingId: null })
+    },
+    [buildingId, setMovingNode, setSelection],
+  )
+
+  // Only show when a building is selected without a level
+  if (!buildingId || levelId) return null
+
+  return (
+    <group ref={groupRef}>
+      <Html
+        center
+        style={{
+          pointerEvents: 'auto',
+          touchAction: 'none',
+        }}
+        zIndexRange={[100, 0]}
+      >
+        <NodeActionMenu
+          onMove={handleMove}
+          onPointerDown={(e) => e.stopPropagation()}
+          onPointerUp={(e) => e.stopPropagation()}
+        />
+      </Html>
+    </group>
+  )
+}