@pascal-app/editor 0.7.0 → 0.9.1

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

@@ -83,6 +83,14 @@ function getNormalizedFloorplanStairSweepAngle(stair: StairNode) {
   return baseSweepAngle
 }
 
+function clampFloorplanCircularSweepAngle(sweepAngle: number) {
+  if (Math.abs(sweepAngle) >= Math.PI * 2) {
+    return Math.sign(sweepAngle || 1) * (Math.PI * 2 - 0.001)
+  }
+
+  return sweepAngle
+}
+
 function getFloorplanStairStepCount(stair: StairNode, minimum: number) {
   return Math.max(minimum, Math.round(stair.stepCount ?? 10))
 }
@@ -139,7 +147,10 @@ export const FloorplanStairLayer = memo(function FloorplanStairLayer({
         const sectorStartAngle = -stair.rotation - normalizedSweepAngle / 2
         const sectorEndAngle = sectorStartAngle + normalizedSweepAngle
         const spiralLandingSweep = getFloorplanSpiralLandingSweep(stair, normalizedSweepAngle)
-        const visualSectorEndAngle = sectorEndAngle + spiralLandingSweep
+        const visualSweepAngle = clampFloorplanCircularSweepAngle(
+          normalizedSweepAngle + spiralLandingSweep,
+        )
+        const visualSectorEndAngle = sectorStartAngle + visualSweepAngle
         const stairCenter = {
           x: stair.position[0],
           y: stair.position[2],
@@ -273,10 +284,12 @@ export const FloorplanStairLayer = memo(function FloorplanStairLayer({
                     fill={curvedAccent}
                     key={`${stair.id}:spiral-arrow`}
                     pointerEvents="none"
-                    points={buildSvgArrowHeadPoints(
-                      arrowPoint,
-                      tangentAngle,
-                      clamp(stair.width * 0.18, 0.12, 0.18),
+                    points={formatSvgPolygonPoints(
+                      buildSvgArrowHeadPoints(
+                        arrowPoint,
+                        tangentAngle,
+                        clamp(stair.width * 0.18, 0.12, 0.18),
+                      ),
                     )}
                   />
                 )
@@ -361,10 +374,12 @@ export const FloorplanStairLayer = memo(function FloorplanStairLayer({
                     fill={curvedAccent}
                     key={`${stair.id}:curved-arrow`}
                     pointerEvents="none"
-                    points={buildSvgArrowHeadPoints(
-                      arrowPoint,
-                      tangentAngle,
-                      clamp(stair.width * 0.16, 0.1, 0.16),
+                    points={formatSvgPolygonPoints(
+                      buildSvgArrowHeadPoints(
+                        arrowPoint,
+                        tangentAngle,
+                        clamp(stair.width * 0.16, 0.1, 0.16),
+                      ),
                     )}
                   />
                 )
@@ -396,8 +411,8 @@ export const FloorplanStairLayer = memo(function FloorplanStairLayer({
                 <>
                   <polyline
                     fill="none"
-                    points={formatSvgPolygonPoints(arrow.polyline)}
                     pointerEvents="none"
+                    points={formatSvgPolygonPoints(arrow.polyline)}
                     stroke={straightAccent}
                     strokeWidth="1.15"
                     vectorEffect="non-scaling-stroke"
@@ -411,8 +426,8 @@ export const FloorplanStairLayer = memo(function FloorplanStairLayer({
                   />
                   <polygon
                     fill={straightAccent}
-                    points={formatSvgPolygonPoints(arrow.head)}
                     pointerEvents="none"
+                    points={formatSvgPolygonPoints(arrow.head)}
                   />
                 </>
               ) : null}
@@ -438,8 +453,6 @@ export const FloorplanStairLayer = memo(function FloorplanStairLayer({
                   }
                 : undefined
             }
-            onPointerEnter={canSelectStairs ? () => onStairHoverEnter(stair.id) : undefined}
-            onPointerLeave={canSelectStairs ? () => onStairHoverChange(null) : undefined}
             onPointerDown={
               canFocusStairs && stairSelected
                 ? (event) => {
@@ -449,6 +462,8 @@ export const FloorplanStairLayer = memo(function FloorplanStairLayer({
                   }
                 : undefined
             }
+            onPointerEnter={canSelectStairs ? () => onStairHoverEnter(stair.id) : undefined}
+            onPointerLeave={canSelectStairs ? () => onStairHoverChange(null) : undefined}
             pointerEvents={canSelectStairs ? undefined : 'none'}
             style={canSelectStairs ? { cursor } : undefined}
           >
@@ -456,8 +471,8 @@ export const FloorplanStairLayer = memo(function FloorplanStairLayer({
               <polygon
                 fill="transparent"
                 key={`${stair.id}:hit:${polygonIndex}`}
-                points={formatSvgPolygonPoints(polygon)}
                 pointerEvents={canSelectStairs ? 'all' : 'none'}
+                points={formatSvgPolygonPoints(polygon)}
                 stroke="transparent"
                 strokeLinejoin="round"
                 strokeWidth={hitStrokeWidth}

package/src/components/editor-2d/svg-paths.ts

@@ -103,7 +103,15 @@ export function formatSvgPolygonPoints(points: Point2D[]) {
   return points.map((point) => `${toSvgX(point.x)},${toSvgY(point.y)}`).join(' ')
 }
 
-export function buildSvgArrowHeadPoints(point: Point2D, angle: number, size: number) {
+/**
+ * Three points defining an arrow head — tip + two trailing barbs.
+ * Returned as plain `Point2D` objects so consumers can either feed them
+ * straight into `formatSvgPolygonPoints` (for SVG `points=""`) or push
+ * them onto a `FloorplanGeometry.polygon.points` array. Mixing both
+ * downstream paths through a string-returning helper was awkward — see
+ * `nodes/src/stair/floorplan.ts` which needs the points as objects.
+ */
+export function buildSvgArrowHeadPoints(point: Point2D, angle: number, size: number): Point2D[] {
   const left = {
     x: point.x - size * Math.cos(angle - Math.PI / 6),
     y: point.y - size * Math.sin(angle - Math.PI / 6),
@@ -113,7 +121,7 @@ export function buildSvgArrowHeadPoints(point: Point2D, angle: number, size: num
     y: point.y - size * Math.sin(angle + Math.PI / 6),
   }
 
-  return formatSvgPolygonPoints([point, left, right])
+  return [point, left, right]
 }
 
 export { toSvgPoint, toSvgX, toSvgY }

package/src/components/systems/ceiling/ceiling-selection-affordance-system.tsx

@@ -18,6 +18,10 @@ const BRACKET_THICKNESS = 0.04
 const BRACKET_HEIGHT = 0.04
 const BRACKET_Y_OFFSET = 0.035
 const HIT_BOX_SIZE: [number, number, number] = [0.28, 0.08, 0.28]
+// Draw the corner handles after everything else and with depth testing
+// off (see materials below) so they stay visible — and clickable — even
+// when a wall, roof, or the ceiling itself would otherwise occlude them.
+const CORNER_RENDER_ORDER = 1000
 
 type CornerBracketData = {
   corner: [number, number]
@@ -75,7 +79,9 @@ const CeilingSelectionAffordance = ({
   ceiling: CeilingNode
   levelId: string
 }) => {
-  const [levelObject, setLevelObject] = useState<Object3D | null>(() => sceneRegistry.nodes.get(levelId) ?? null)
+  const [levelObject, setLevelObject] = useState<Object3D | null>(
+    () => sceneRegistry.nodes.get(levelId) ?? null,
+  )
 
   const corners = useMemo(() => buildCornerBrackets(ceiling.polygon), [ceiling.polygon])
 
@@ -110,11 +116,7 @@ const CeilingSelectionAffordance = ({
   return createPortal(
     <group position={[0, (ceiling.height ?? 2.5) + BRACKET_Y_OFFSET, 0]}>
       {corners.map((corner, index) => (
-        <CornerBracket
-          ceiling={ceiling}
-          corner={corner}
-          key={`${ceiling.id}-corner-${index}`}
-        />
+        <CornerBracket ceiling={ceiling} corner={corner} key={`${ceiling.id}-corner-${index}`} />
       ))}
     </group>,
     levelObject,
@@ -151,6 +153,7 @@ const CornerBracket = ({
       localPosition: [0, 0, 0],
       position: [corner.corner[0], ceiling.height ?? 2.5, corner.corner[1]],
       stopPropagation: () => e.stopPropagation(),
+      viaHandle: true,
     })
   }
 
@@ -181,9 +184,16 @@ const CornerBracket = ({
           e.stopPropagation()
           setIsHovered(false)
         }}
+        renderOrder={CORNER_RENDER_ORDER}
       >
         <boxGeometry args={HIT_BOX_SIZE} />
-        <meshBasicMaterial color={cubeColor} depthWrite={false} opacity={cubeOpacity} transparent />
+        <meshBasicMaterial
+          color={cubeColor}
+          depthTest={false}
+          depthWrite={false}
+          opacity={cubeOpacity}
+          transparent
+        />
       </mesh>
     </group>
   )
@@ -213,10 +223,17 @@ const BracketLeg = ({
     <mesh
       onClick={onClick}
       position={position}
+      renderOrder={CORNER_RENDER_ORDER}
       rotation={[0, angle, 0]}
     >
       <boxGeometry args={[length, BRACKET_HEIGHT, BRACKET_THICKNESS]} />
-      <meshBasicMaterial color={color} depthWrite={false} opacity={opacity} transparent />
+      <meshBasicMaterial
+        color={color}
+        depthTest={false}
+        depthWrite={false}
+        opacity={opacity}
+        transparent
+      />
     </mesh>
   )
 }
@@ -234,7 +251,11 @@ function buildCornerBrackets(polygon: Array<[number, number]>): CornerBracketDat
 
     const incomingLength = Math.hypot(incomingVector[0], incomingVector[1])
     const outgoingLength = Math.hypot(outgoingVector[0], outgoingVector[1])
-    const cornerStrength = 1 - Math.abs(incomingDirection[0] * outgoingDirection[0] + incomingDirection[1] * outgoingDirection[1])
+    const cornerStrength =
+      1 -
+      Math.abs(
+        incomingDirection[0] * outgoingDirection[0] + incomingDirection[1] * outgoingDirection[1],
+      )
 
     return {
       corner,

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

@@ -25,15 +25,19 @@ export const CeilingSystem = () => {
     }
 
     for (const id of selectedIds) {
-      let currentId: string | null = id
-      let isCeilingRelated = false
-      let levelId: string | null = null
+      // Only treat a directly-selected ceiling as "reveal the grid"; a
+      // selected descendant (e.g. a freshly-placed ceiling light) used to
+      // count too, which left the opaque grid overlay covering the room
+      // even after the user moved on. With the grid still in front, every
+      // subsequent click in 3D hit the grid mesh (its `useNodeEvents`
+      // handlers re-selected the ceiling) instead of the items below.
+      const selectedNode = nodes[id as AnyNodeId]
+      if (selectedNode?.type !== 'ceiling') continue
 
+      let currentId: string | null = selectedNode.parentId as string | null
+      let levelId: string | null = null
       while (currentId && nodes[currentId as AnyNodeId]) {
         const node = nodes[currentId as AnyNodeId]
-        if (node?.type === 'ceiling') {
-          isCeilingRelated = true
-        }
         if (node?.type === 'level') {
           levelId = node.id
           break
@@ -41,12 +45,12 @@ export const CeilingSystem = () => {
         currentId = node?.parentId as string | null
       }
 
-      if (isCeilingRelated && levelId) {
+      if (levelId) {
         levelsToShowCeilings.add(levelId)
       }
     }
 
-    const ceilings = sceneRegistry.byType.ceiling
+    const ceilings = sceneRegistry.byType.ceiling!
     ceilings.forEach((ceiling) => {
       const mesh = sceneRegistry.nodes.get(ceiling)
       if (mesh) {

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

@@ -1,41 +1,96 @@
 import { type AnyNodeId, type RoofNode, sceneRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useRef } from 'react'
+import * as THREE from 'three'
+
+// Empty placeholder geometry used when we reveal segments-wrapper for
+// accessory editing. The roof's CSG-merged shell is the only thing
+// that should render the roof surface in this mode — the per-segment
+// CSG geometry (if any was left over from a prior edit) would visually
+// double the cut shape, so we strip each segment mesh back to nothing.
+// `RoofSystem` rebuilds CSG on demand if the user later selects a
+// segment, so destroying the cached geometry here only costs one
+// recomputation per segment when the user actually wants it back.
+function makeEmptySegmentGeometry(): THREE.BufferGeometry {
+  const g = new THREE.BufferGeometry()
+  // Three zero-vertices (one degenerate, invisible triangle), not an empty
+  // attribute: in accessory-reveal mode the segments-wrapper is shown, so these
+  // meshes are drawn. An empty position (count 0) leaves WebGPU vertex buffer
+  // slot 0 unbound and the draw is rejected, poisoning the command encoder.
+  g.setAttribute('position', new THREE.Float32BufferAttribute(new Float32Array(9), 3))
+  // Match the four material slots the roof-segment renderer's material
+  // array expects (0=top, 1=side, 2=interior, 3=shingle). Without these
+  // groups, mesh.material is a single-material lookup that mismatches
+  // the array — same crash mode the BoxGeometry workaround in
+  // `roof-system.tsx:144` guards against.
+  g.addGroup(0, 0, 0)
+  g.addGroup(0, 0, 1)
+  g.addGroup(0, 0, 2)
+  g.addGroup(0, 0, 3)
+  return g
+}
 
 /**
  * Imperatively toggles the Three.js visibility of roof objects based on the
  * editor selection — without causing React re-renders in RoofRenderer.
  *
- * When a roof-segment is selected:
+ * Full edit-mode (segment 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
+ * Accessory-reveal mode (a dormer/chimney/etc. hosted on a segment is selected):
+ *   - merged-roof mesh stays visible (we don't want the appearance to jump)
+ *   - segments-wrapper group is shown ANYWAY so anything portaled into a
+ *     segment's registered mesh (e.g. dormer in-world handle arrows that
+ *     don't use `portal: 'grandparent'`) is no longer inheriting the
+ *     wrapper's hidden flag
+ *   - segment placeholder geometry is empty, so revealing the wrapper has
+ *     no visible cost beyond letting the handle arrows render
+ *
+ * When deselected: merged-roof shown, segments-wrapper hidden.
  */
 export const RoofEditSystem = () => {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const prevActiveRoofIds = useRef(new Set<string>())
+  const prevRevealRoofIds = useRef(new Set<string>())
 
   useEffect(() => {
     const nodes = useScene.getState().nodes
 
-    // Collect which roof nodes should be in "edit mode".
-    // Selecting the roof itself should keep the merged visual intact so
-    // material appearance does not jump between merged and per-segment meshes.
+    // Roofs where a segment itself is selected -> full edit mode (hide
+    // merged, show wrapper).
     const activeRoofIds = new Set<string>()
+    // Roofs where an accessory (dormer/chimney/etc.) is selected -> only
+    // reveal the wrapper so handle portals into the segment mesh become
+    // visible. Merged stays on.
+    const revealRoofIds = new Set<string>()
+
     for (const id of selectedIds) {
       const node = nodes[id as AnyNodeId]
       if (!node) continue
       if (node.type === 'roof-segment' && node.parentId) {
         activeRoofIds.add(node.parentId)
+        continue
+      }
+      // Walk up one level: if the parent is a roof-segment, this is a
+      // hosted accessory and we want to reveal its grandparent roof's
+      // wrapper. Two-step lookup keeps it scoped to roof children
+      // without enumerating all accessory kinds.
+      if (!node.parentId) continue
+      const parent = nodes[node.parentId as AnyNodeId]
+      if (parent?.type === 'roof-segment' && parent.parentId) {
+        revealRoofIds.add(parent.parentId)
       }
     }
 
-    // Update all roofs that are currently active OR were previously active
-    const roofIdsToUpdate = new Set([...activeRoofIds, ...prevActiveRoofIds.current])
+    // Union of roofs that need ANY state change this tick.
+    const roofIdsToUpdate = new Set([
+      ...activeRoofIds,
+      ...revealRoofIds,
+      ...prevActiveRoofIds.current,
+      ...prevRevealRoofIds.current,
+    ])
 
     for (const roofId of roofIdsToUpdate) {
       const group = sceneRegistry.nodes.get(roofId)
@@ -44,25 +99,44 @@ export const RoofEditSystem = () => {
       const mergedMesh = group.getObjectByName('merged-roof')
       const segmentsWrapper = group.getObjectByName('segments-wrapper')
       const isActive = activeRoofIds.has(roofId)
+      const isReveal = revealRoofIds.has(roofId)
 
       if (mergedMesh) mergedMesh.visible = !isActive
-      if (segmentsWrapper) segmentsWrapper.visible = isActive
+      if (segmentsWrapper) segmentsWrapper.visible = isActive || isReveal
 
       const roofNode = nodes[roofId as AnyNodeId] as RoofNode | undefined
       if (roofNode?.children?.length) {
         const wasActive = prevActiveRoofIds.current.has(roofId)
+        const wasReveal = prevRevealRoofIds.current.has(roofId)
         if (isActive !== wasActive) {
-          // Entering edit mode: rebuild individual segment geometries
-          // Exiting edit mode: sync transforms + rebuild merged mesh
+          // Entering / exiting full edit mode: rebuild segment / merged
+          // geometries. Accessory-reveal doesn't need this — segments
+          // keep their placeholder; only their visibility flips.
           const { markDirty } = useScene.getState()
           for (const childId of roofNode.children) {
             markDirty(childId as AnyNodeId)
           }
         }
+        // Entering reveal mode (and NOT also full-edit, which already
+        // owns its own rebuild path): strip each segment mesh back to
+        // an empty placeholder so the wrapper-now-visible doesn't
+        // re-show stale CSG geometry from a previous segment edit.
+        // Without this, the host segment's CSG cut renders ON TOP of
+        // the merged-roof, doubling the dormer's cut shape and
+        // bleeding the host wall material through the dormer body.
+        if (isReveal && !isActive && !wasReveal && segmentsWrapper) {
+          for (const child of segmentsWrapper.children) {
+            const mesh = child as THREE.Mesh
+            if (!mesh.isMesh) continue
+            mesh.geometry?.dispose()
+            mesh.geometry = makeEmptySegmentGeometry()
+          }
+        }
       }
     }
 
     prevActiveRoofIds.current = activeRoofIds
+    prevRevealRoofIds.current = revealRoofIds
   }, [selectedIds])
 
   return null

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

@@ -68,7 +68,7 @@ export const StairEditSystem = () => {
       const segmentsWrapper = group.getObjectByName('segments-wrapper')
       const isActive = activeStairIds.has(stairId)
 
-      if (mergedMesh) mergedMesh.visible = !isActive && !isCurved
+      if (mergedMesh) mergedMesh.visible = !(isActive || isCurved)
       if (segmentsWrapper) segmentsWrapper.visible = isActive && !isCurved
 
       if (stairNode?.children?.length) {
@@ -85,7 +85,7 @@ export const StairEditSystem = () => {
     }
 
     prevActiveStairIds.current = activeStairIds
-  }, [selectedIds, selectedStairSignature])
+  }, [selectedIds])
 
   return null
 }

package/src/components/tools/elevator/elevator-defaults.ts

@@ -0,0 +1,8 @@
+export const DEFAULT_ELEVATOR_WIDTH = 1.84
+export const DEFAULT_ELEVATOR_DEPTH = 1.84
+export const DEFAULT_ELEVATOR_CAB_HEIGHT = 2.35
+export const DEFAULT_ELEVATOR_DOOR_WIDTH = 0.95
+export const DEFAULT_ELEVATOR_DOOR_HEIGHT = 2.1
+export const DEFAULT_ELEVATOR_SPEED = 2.2
+export const DEFAULT_ELEVATOR_DOOR_DURATION_MS = 900
+export const DEFAULT_ELEVATOR_DWELL_MS = 1400