handle visible/invisible items

apps/editor/components/ui/sidebar/panels/site-panel/ceiling-tree-node.tsx

@@ -59,6 +59,7 @@ export function CeilingTreeNode({ node, depth }: CeilingTreeNodeProps) {
         onMouseLeave={handleMouseLeave}
         isSelected={isSelected}
         isHovered={isHovered}
+        isVisible={node.visible !== false}
         actions={<TreeNodeActions node={node} />}
       >
         {node.children.map((childId) => (

apps/editor/components/ui/sidebar/panels/site-panel/item-tree-node.tsx

@@ -67,6 +67,7 @@ export function ItemTreeNode({ node, depth }: ItemTreeNodeProps) {
         onMouseLeave={handleMouseLeave}
         isSelected={isSelected}
         isHovered={isHovered}
+        isVisible={node.visible !== false}
         actions={<TreeNodeActions node={node} />}
       />
     </RenamePopover>

apps/editor/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx

@@ -59,6 +59,7 @@ export function RoofTreeNode({ node, depth }: RoofTreeNodeProps) {
         onMouseLeave={handleMouseLeave}
         isSelected={isSelected}
         isHovered={isHovered}
+        isVisible={node.visible !== false}
         actions={<TreeNodeActions node={node} />}
       />
     </RenamePopover>

apps/editor/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx

@@ -58,6 +58,7 @@ export function SlabTreeNode({ node, depth }: SlabTreeNodeProps) {
         onMouseLeave={handleMouseLeave}
         isSelected={isSelected}
         isHovered={isHovered}
+        isVisible={node.visible !== false}
         actions={<TreeNodeActions node={node} />}
       />
     </RenamePopover>

apps/editor/components/ui/sidebar/panels/site-panel/tree-node.tsx

@@ -58,6 +58,7 @@ interface TreeNodeWrapperProps {
   children?: React.ReactNode;
   isSelected?: boolean;
   isHovered?: boolean;
+  isVisible?: boolean;
 }
 
 export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
@@ -77,6 +78,7 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
       children,
       isSelected,
       isHovered,
+      isVisible = true,
     },
     ref
   ) {
@@ -89,7 +91,8 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
               ? "text-primary-foreground bg-primary/80 hover:bg-primary/90"
               : isHovered
                 ? "bg-accent/70 text-foreground"
-                : "text-muted-foreground hover:bg-accent/50"
+                : "text-muted-foreground hover:bg-accent/50",
+            !isVisible && "opacity-50"
           )}
           style={{ paddingLeft: depth * 12 + 4 }}
           onMouseEnter={onMouseEnter}

apps/editor/components/ui/sidebar/panels/site-panel/wall-tree-node.tsx

@@ -62,6 +62,7 @@ export function WallTreeNode({ node, depth }: WallTreeNodeProps) {
         onMouseLeave={handleMouseLeave}
         isSelected={isSelected}
         isHovered={isHovered}
+        isVisible={node.visible !== false}
         actions={<TreeNodeActions node={node} />}
       >
         {node.children.map((childId) => (