@pascal-app/editor 0.5.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/editor",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Pascal building editor component",
   "type": "module",
   "exports": {
@@ -11,14 +11,14 @@
     "check-types": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pascal-app/core": "^0.5.1",
-    "@pascal-app/viewer": "^0.5.1",
+    "@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": "^0.5.1",
-    "@pascal-app/viewer": "^0.5.1",
+    "@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

@@ -14,12 +14,14 @@ import {
   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'
@@ -38,26 +40,83 @@ const ALLOWED_TYPES = [
   'slab',
   'ceiling',
 ]
-const DELETE_ONLY_TYPES = ['wall']
+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 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
 
@@ -72,6 +131,43 @@ export function FloatingActionMenu() {
         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,
+          )
+        }
+      }
     }
   })
 
@@ -84,7 +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' ||
@@ -96,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) => {
@@ -116,11 +248,14 @@ 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)
@@ -134,12 +269,20 @@ export function FloatingActionMenu() {
         }
       } 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 (
@@ -209,6 +352,7 @@ export function FloatingActionMenu() {
         }
         if (
           duplicate.type === 'item' ||
+          duplicate.type === 'wall' ||
           duplicate.type === 'fence' ||
           duplicate.type === 'window' ||
           duplicate.type === 'door' ||
@@ -250,8 +394,15 @@ export function FloatingActionMenu() {
         [cx + holeSize, cz + holeSize],
         [cx - holeSize, cz + holeSize],
       ]
-      const currentHoles = (node as SlabNode | CeilingNode).holes || []
-      updateNode(selectedId as AnyNodeId, { holes: [...currentHoles, newHole] })
+      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] })
@@ -263,41 +414,111 @@ export function FloatingActionMenu() {
     (e: React.MouseEvent) => {
       e.stopPropagation()
       if (!selectedId) return
+      if (node?.type === 'item') {
+        sfxEmitter.emit('sfx:item-delete')
+      } else {
+        sfxEmitter.emit('sfx:structure-delete')
+      }
       setSelection({ selectedIds: [] })
       useScene.getState().deleteNode(selectedId as AnyNodeId)
     },
-    [selectedId, setSelection],
+    [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
-          onAddHole={node && HOLE_TYPES.includes(node.type) ? handleAddHole : 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) && !HOLE_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

@@ -15,7 +15,6 @@ export function FloatingBuildingActionMenu() {
   const levelId = useViewer((s) => s.selection.levelId)
   const setMovingNode = useEditor((s) => s.setMovingNode)
   const setSelection = useViewer((s) => s.setSelection)
-  const nodes = useScene((s) => s.nodes)
 
   const groupRef = useRef<THREE.Group>(null)
 
@@ -36,13 +35,15 @@ export function FloatingBuildingActionMenu() {
     (e: React.MouseEvent) => {
       e.stopPropagation()
       if (!buildingId) return
-      const node = nodes[buildingId]
+      // 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, nodes, setMovingNode, setSelection],
+    [buildingId, setMovingNode, setSelection],
   )
 
   // Only show when a building is selected without a level