Refine roof edit selection behavior and panel actions

packages/editor/src/components/systems/roof/roof-edit-system.tsx

@@ -6,7 +6,7 @@ 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:
+ * When a roof-segment 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
@@ -22,14 +22,14 @@ export const RoofEditSystem = () => {
   useEffect(() => {
     const nodes = useScene.getState().nodes
 
-    // Collect which roof nodes should be in "edit mode"
+    // 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.
     const activeRoofIds = new Set<string>()
     for (const id of selectedIds) {
       const node = nodes[id as AnyNodeId]
       if (!node) continue
-      if (node.type === 'roof') {
+      if (node.type === 'roof-segment' && node.parentId) {
-        activeRoofIds.add(id)
-      } else if (node.type === 'roof-segment' && node.parentId) {
         activeRoofIds.add(node.parentId)
       }
     }

packages/editor/src/components/ui/panels/roof-panel.tsx

@@ -208,11 +208,13 @@ export function RoofPanel() {
             </button>
           ))}
         </div>
-        <ActionButton
+        <ActionGroup>
-          icon={<Plus className="h-3.5 w-3.5" />}
+          <ActionButton
-          label="Add Segment"
+            icon={<Plus className="h-3.5 w-3.5" />}
-          onClick={handleAddSegment}
+            label="Add Segment"
-        />
+            onClick={handleAddSegment}
+          />
+        </ActionGroup>
       </PanelSection>
 
       <PanelSection title="Position">