@pascal-app/editor 0.4.0

package/src/components/systems/roof/roof-edit-system.tsx

@@ -0,0 +1,69 @@
+import { type AnyNodeId, type RoofNode, sceneRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useEffect, useRef } from 'react'
+
+/**
+ * Imperatively toggles the Three.js visibility of roof objects based on the
+ * editor selection — without causing React re-renders in RoofRenderer.
+ *
+ * When a roof (or one of its segments) is selected:
+ *   - merged-roof mesh is hidden
+ *   - segments-wrapper group is shown (individual segments visible for editing)
+ *   - all children are marked dirty so RoofSystem rebuilds their geometry
+ *
+ * When deselected:
+ *   - merged-roof mesh is shown
+ *   - segments-wrapper group is hidden
+ */
+export const RoofEditSystem = () => {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const prevActiveRoofIds = useRef(new Set<string>())
+
+  useEffect(() => {
+    const nodes = useScene.getState().nodes
+
+    // Collect which roof nodes should be in "edit mode"
+    const activeRoofIds = new Set<string>()
+    for (const id of selectedIds) {
+      const node = nodes[id as AnyNodeId]
+      if (!node) continue
+      if (node.type === 'roof') {
+        activeRoofIds.add(id)
+      } else if (node.type === 'roof-segment' && node.parentId) {
+        activeRoofIds.add(node.parentId)
+      }
+    }
+
+    // Update all roofs that are currently active OR were previously active
+    const roofIdsToUpdate = new Set([...activeRoofIds, ...prevActiveRoofIds.current])
+
+    for (const roofId of roofIdsToUpdate) {
+      const group = sceneRegistry.nodes.get(roofId)
+      if (!group) continue
+
+      const mergedMesh = group.getObjectByName('merged-roof')
+      const segmentsWrapper = group.getObjectByName('segments-wrapper')
+      const isActive = activeRoofIds.has(roofId)
+
+      if (mergedMesh) mergedMesh.visible = !isActive
+      if (segmentsWrapper) segmentsWrapper.visible = isActive
+
+      const roofNode = nodes[roofId as AnyNodeId] as RoofNode | undefined
+      if (roofNode?.children?.length) {
+        const wasActive = prevActiveRoofIds.current.has(roofId)
+        if (isActive !== wasActive) {
+          // Entering edit mode: rebuild individual segment geometries
+          // Exiting edit mode: sync transforms + rebuild merged mesh
+          const { markDirty } = useScene.getState()
+          for (const childId of roofNode.children) {
+            markDirty(childId as AnyNodeId)
+          }
+        }
+      }
+    }
+
+    prevActiveRoofIds.current = activeRoofIds
+  }, [selectedIds])
+
+  return null
+}

package/src/components/systems/stair/stair-edit-system.tsx

@@ -0,0 +1,69 @@
+import { type AnyNodeId, type StairNode, sceneRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useEffect, useRef } from 'react'
+
+/**
+ * Imperatively toggles the Three.js visibility of stair objects based on the
+ * editor selection — without causing React re-renders in StairRenderer.
+ *
+ * When a stair (or one of its segments) is selected:
+ *   - merged-stair mesh is hidden
+ *   - segments-wrapper group is shown (individual segments visible for editing)
+ *   - all children are marked dirty so StairSystem rebuilds their geometry
+ *
+ * When deselected:
+ *   - merged-stair mesh is shown
+ *   - segments-wrapper group is hidden
+ */
+export const StairEditSystem = () => {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const prevActiveStairIds = useRef(new Set<string>())
+
+  useEffect(() => {
+    const nodes = useScene.getState().nodes
+
+    // Collect which stair nodes should be in "edit mode"
+    const activeStairIds = new Set<string>()
+    for (const id of selectedIds) {
+      const node = nodes[id as AnyNodeId]
+      if (!node) continue
+      if (node.type === 'stair') {
+        activeStairIds.add(id)
+      } else if (node.type === 'stair-segment' && node.parentId) {
+        activeStairIds.add(node.parentId)
+      }
+    }
+
+    // Update all stairs that are currently active OR were previously active
+    const stairIdsToUpdate = new Set([...activeStairIds, ...prevActiveStairIds.current])
+
+    for (const stairId of stairIdsToUpdate) {
+      const group = sceneRegistry.nodes.get(stairId)
+      if (!group) continue
+
+      const mergedMesh = group.getObjectByName('merged-stair')
+      const segmentsWrapper = group.getObjectByName('segments-wrapper')
+      const isActive = activeStairIds.has(stairId)
+
+      if (mergedMesh) mergedMesh.visible = !isActive
+      if (segmentsWrapper) segmentsWrapper.visible = isActive
+
+      const stairNode = nodes[stairId as AnyNodeId] as StairNode | undefined
+      if (stairNode?.children?.length) {
+        const wasActive = prevActiveStairIds.current.has(stairId)
+        if (isActive !== wasActive) {
+          // Entering edit mode: rebuild individual segment geometries
+          // Exiting edit mode: sync transforms + rebuild merged mesh
+          const { markDirty } = useScene.getState()
+          for (const childId of stairNode.children) {
+            markDirty(childId as AnyNodeId)
+          }
+        }
+      }
+    }
+
+    prevActiveStairIds.current = activeStairIds
+  }, [selectedIds])
+
+  return null
+}

package/src/components/systems/zone/zone-label-editor-system.tsx

@@ -0,0 +1,320 @@
+'use client'
+
+import { type AnyNodeId, emitter, useScene, type ZoneNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Check, Pencil } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { useShallow } from 'zustand/react/shallow'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import useEditor from '../../../store/use-editor'
+
+// ─── Per-zone label editor ────────────────────────────────────────────────────
+
+function ZoneLabelEditor({ zoneId }: { zoneId: ZoneNode['id'] }) {
+  const zone = useScene((s) => s.nodes[zoneId] as ZoneNode | undefined)
+  const updateNode = useScene((s) => s.updateNode)
+  const deleteNode = useScene((s) => s.deleteNode)
+  const setSelection = useViewer((s) => s.setSelection)
+  const selectedZoneId = useViewer((s) => s.selection.zoneId)
+  const hoveredId = useViewer((s) => s.hoveredId)
+  const mode = useEditor((s) => s.mode)
+  const isSelected = selectedZoneId === zoneId
+  const isDeleteHovered = mode === 'delete' && hoveredId === zoneId
+  const [editing, setEditing] = useState(false)
+  const [value, setValue] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [labelEl, setLabelEl] = useState<HTMLElement | null>(null)
+
+  // Keep a ref so the click handler never has a stale zone name
+  const zoneNameRef = useRef(zone?.name ?? '')
+  useEffect(() => {
+    zoneNameRef.current = zone?.name ?? ''
+  }, [zone?.name])
+
+  // Setup: find the label element, enable pointer events, and hide the
+  // zone-renderer's own text node (children[0]) — we replace it via portal.
+  // Retries via rAF because the <Html> element from drei may not exist yet at mount time.
+  useEffect(() => {
+    let cancelled = false
+    let textEl: HTMLElement | undefined
+
+    const tryFind = () => {
+      const el = document.getElementById(`${zoneId}-label`)
+      if (!el) {
+        if (!cancelled) requestAnimationFrame(tryFind)
+        return
+      }
+      setLabelEl(el)
+      textEl = el.children[0] as HTMLElement | undefined
+      if (textEl) textEl.style.display = 'none'
+    }
+
+    tryFind()
+
+    return () => {
+      cancelled = true
+      if (textEl) textEl.style.display = ''
+    }
+  }, [zoneId])
+
+  // Focus + select-all when entering edit mode
+  useEffect(() => {
+    if (editing) {
+      inputRef.current?.focus()
+      inputRef.current?.select()
+    }
+  }, [editing])
+
+  // Tint the label pin red when delete-hovered
+  useEffect(() => {
+    if (!labelEl) return
+    const pin = labelEl.querySelector('.label-pin') as HTMLElement | null
+    if (!pin) return
+    const line = pin.children[0] as HTMLElement | undefined
+    const circle = pin.children[1] as HTMLElement | undefined
+    const color = isDeleteHovered ? '#dc2626' : (zone?.color ?? '#6366f1')
+    if (line) line.style.backgroundColor = color
+    if (circle) {
+      circle.style.backgroundColor = color
+    }
+    if (isDeleteHovered) {
+      pin.style.opacity = '1'
+    }
+    return () => {
+      // Restore zone color
+      const originalColor = zone?.color ?? '#6366f1'
+      if (line) line.style.backgroundColor = originalColor
+      if (circle) circle.style.backgroundColor = originalColor
+    }
+  }, [isDeleteHovered, labelEl, zone?.color])
+
+  const save = useCallback(() => {
+    const trimmed = value.trim()
+    if (trimmed !== (zone?.name ?? '')) {
+      updateNode(zoneId, { name: trimmed || undefined })
+    }
+    setEditing(false)
+  }, [value, zone?.name, updateNode, zoneId])
+
+  const cancel = useCallback(() => {
+    setValue(zone?.name ?? '')
+    setEditing(false)
+  }, [zone?.name])
+
+  // Select zone + switch to zone mode from any mode
+  const selectZone = useCallback(() => {
+    useEditor.getState().setPhase('structure')
+    useEditor.getState().setStructureLayer('zones')
+    useEditor.getState().setMode('select')
+    setSelection({ zoneId })
+  }, [zoneId, setSelection])
+
+  // Enter text editing
+  const enterTextEditing = useCallback(() => {
+    selectZone()
+    setValue(zoneNameRef.current)
+    setEditing(true)
+  }, [selectZone])
+
+  // Listen for edit-label events from the 2D floorplan (double-click on zone label)
+  useEffect(() => {
+    const handler = (event: { zoneId: string }) => {
+      if (event.zoneId === zoneId) {
+        setValue(zoneNameRef.current)
+        setEditing(true)
+      }
+    }
+    emitter.on('zone:edit-label' as any, handler as any)
+    return () => {
+      emitter.off('zone:edit-label' as any, handler as any)
+    }
+  }, [zoneId])
+
+  if (!labelEl) return null
+
+  const shadowColor = isDeleteHovered ? '#dc2626' : (zone?.color ?? '#6366f1')
+  const textShadow = [
+    `-1px -1px 0 ${shadowColor}`,
+    ` 1px -1px 0 ${shadowColor}`,
+    `-1px  1px 0 ${shadowColor}`,
+    ` 1px  1px 0 ${shadowColor}`,
+  ].join(',')
+
+  // order: -1 puts this flex item before children[0] (hidden) and children[1] (pin)
+  const sharedStyle: React.CSSProperties = {
+    order: -1,
+    color: 'white',
+    textShadow,
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+    userSelect: 'none',
+    pointerEvents: 'auto',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 4,
+    whiteSpace: 'nowrap',
+  }
+
+  return createPortal(
+    editing ? (
+      <div
+        onMouseDown={(e) => e.stopPropagation()}
+        onPointerDown={(e) => e.stopPropagation()}
+        style={sharedStyle}
+      >
+        <input
+          onBlur={save}
+          onChange={(e) => setValue(e.target.value)}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => {
+            e.stopPropagation()
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              save()
+            }
+            if (e.key === 'Escape') {
+              e.preventDefault()
+              cancel()
+            }
+          }}
+          ref={inputRef}
+          style={{
+            width: `${Math.max((value || zone?.name || '').length + 1, 4)}ch`,
+            border: 'none',
+            borderBottom: `1px solid ${shadowColor}`,
+            background: 'transparent',
+            color: 'white',
+            textShadow,
+            outline: 'none',
+            padding: 0,
+            margin: 0,
+            fontSize: 'inherit',
+            lineHeight: 'inherit',
+            fontFamily: 'inherit',
+            textAlign: 'center',
+          }}
+          type="text"
+          value={value}
+        />
+        <button
+          onClick={(e) => {
+            e.stopPropagation()
+            save()
+          }}
+          onMouseDown={(e) => e.stopPropagation()}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: 'white',
+            cursor: 'pointer',
+            padding: 0,
+            display: 'inline-flex',
+            alignItems: 'center',
+          }}
+          type="button"
+        >
+          <Check size={12} />
+        </button>
+      </div>
+    ) : (
+      <button
+        onClick={(e) => {
+          e.stopPropagation()
+          if (mode === 'delete') {
+            sfxEmitter.emit('sfx:structure-delete')
+            deleteNode(zoneId as AnyNodeId)
+            setSelection({ zoneId: null })
+            return
+          }
+          if (isSelected) {
+            // Already selected → enter text editing
+            enterTextEditing()
+          } else {
+            // Not selected → select zone + switch to zone mode
+            selectZone()
+          }
+        }}
+        onMouseDown={(e) => e.stopPropagation()}
+        onPointerEnter={(e) => {
+          if (mode === 'delete') {
+            useViewer.setState({ hoveredId: zoneId })
+          }
+        }}
+        onPointerLeave={() => {
+          if (mode === 'delete' && useViewer.getState().hoveredId === zoneId) {
+            useViewer.setState({ hoveredId: null })
+          }
+        }}
+        onPointerMove={
+          mode === 'delete'
+            ? (e) => {
+                // Re-dispatch pointermove to the viewer container so DeleteCursorBadge tracks the cursor.
+                const viewerDiv = (e.currentTarget as HTMLElement).closest(
+                  '.relative.overflow-hidden',
+                )
+                if (viewerDiv) {
+                  viewerDiv.dispatchEvent(
+                    new PointerEvent('pointermove', {
+                      clientX: e.clientX,
+                      clientY: e.clientY,
+                      bubbles: true,
+                    }),
+                  )
+                }
+              }
+            : undefined
+        }
+        style={{
+          ...sharedStyle,
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          padding: 0,
+        }}
+        type="button"
+      >
+        <span>{zone?.name}</span>
+        {isSelected && (
+          <span
+            onClick={(e) => {
+              e.stopPropagation()
+              enterTextEditing()
+            }}
+            role="button"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              cursor: 'text',
+              filter: `drop-shadow(0 0 2px ${shadowColor})`,
+            }}
+            tabIndex={0}
+          >
+            <Pencil size={12} />
+          </span>
+        )}
+      </button>
+    ),
+    labelEl,
+  )
+}
+
+// ─── System: rendered in the main React tree (outside Canvas) ─────────────────
+
+export function ZoneLabelEditorSystem() {
+  const zoneIds = useScene(
+    useShallow((s) =>
+      Object.values(s.nodes)
+        .filter((n) => n.type === 'zone')
+        .map((n) => n.id as ZoneNode['id']),
+    ),
+  )
+
+  return (
+    <>
+      {zoneIds.map((id) => (
+        <ZoneLabelEditor key={id} zoneId={id} />
+      ))}
+    </>
+  )
+}

package/src/components/systems/zone/zone-system.tsx

@@ -0,0 +1,87 @@
+import { sceneRegistry, useScene, type ZoneNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useFrame } from '@react-three/fiber'
+import { type Group, MathUtils, type Mesh } from 'three'
+import type { MeshBasicNodeMaterial } from 'three/webgpu'
+import useEditor from '../../../store/use-editor'
+
+// Disable raycasting on zone geometry so clicks pass through to items underneath.
+// Zone selection in the editor is handled exclusively via the HTML label overlay.
+const noopRaycast = () => {}
+
+export const ZoneSystem = () => {
+  useFrame((_, delta) => {
+    const structureLayer = useEditor.getState().structureLayer
+    const editorMode = useEditor.getState().mode
+    const selectedLevelId = useViewer.getState().selection.levelId
+    const selectedZoneId = useViewer.getState().selection.zoneId
+    const hoveredId = useViewer.getState().hoveredId
+
+    const zoneGeometryVisible = structureLayer === 'zones'
+    const zones = sceneRegistry.byType.zone || new Set()
+    const nodes = useScene.getState().nodes
+    const lerpSpeed = 10 * delta
+
+    zones.forEach((zoneId) => {
+      const obj = sceneRegistry.nodes.get(zoneId)
+      if (!obj) return
+
+      const zone = nodes[zoneId as ZoneNode['id']] as ZoneNode | undefined
+
+      const isOnSelectedLevel = zone?.parentId === selectedLevelId
+      const isSelected = zoneId === selectedZoneId
+      const isDeleteHovered = editorMode === 'delete' && hoveredId === zoneId
+
+      // Keep group visible (so <Html> labels stay active), hide/show meshes only.
+      // Show meshes when: in zone mode, selected, or delete-hovered.
+      if (!obj.visible) obj.visible = true
+      const meshVisible = zoneGeometryVisible || isSelected || isDeleteHovered
+      const targetOpacity = isSelected || isDeleteHovered ? 1 : zoneGeometryVisible ? 1 : 0
+
+      const walls = (obj as Group).getObjectByName('walls') as Mesh | undefined
+      if (walls) {
+        walls.visible = meshVisible
+        const material = walls.material as MeshBasicNodeMaterial
+        if (material?.userData?.uOpacity) {
+          material.userData.uOpacity.value = MathUtils.lerp(
+            material.userData.uOpacity.value,
+            targetOpacity,
+            lerpSpeed,
+          )
+        }
+      }
+
+      const floor = (obj as Group).getObjectByName('floor') as Mesh | undefined
+      if (floor) {
+        floor.visible = meshVisible
+        const material = floor.material as MeshBasicNodeMaterial
+        if (material?.userData?.uOpacity) {
+          material.userData.uOpacity.value = MathUtils.lerp(
+            material.userData.uOpacity.value,
+            targetOpacity,
+            lerpSpeed,
+          )
+        }
+      }
+
+      // Disable raycasting once per zone object so geometry never intercepts clicks
+      if (!obj.userData.__raycastDisabled) {
+        obj.raycast = noopRaycast
+        obj.traverse((child) => {
+          child.raycast = noopRaycast
+        })
+        obj.userData.__raycastDisabled = true
+      }
+
+      // Labels: always visible on the current level (regardless of mode)
+      const showLabel = !!selectedLevelId && isOnSelectedLevel
+      const labelOpacity = showLabel ? '1' : '0'
+      const labelEl = document.getElementById(`${zoneId}-label`)
+      if (labelEl && labelEl.style.opacity !== labelOpacity) {
+        labelEl.style.opacity = labelOpacity
+      }
+    })
+  })
+
+  return null
+}

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

@@ -0,0 +1,42 @@
+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
+      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

@@ -0,0 +1,47 @@
+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
+      color="#ef4444"
+      levelId={resolveLevelId(ceiling, useScene.getState().nodes)} // red for holes
+      minVertices={3}
+      onPolygonChange={handlePolygonChange}
+      polygon={hole}
+      surfaceHeight={ceiling.height ?? 2.5}
+    />
+  )
+}