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) => (

packages/viewer/src/components/renderers/item/item-renderer.tsx

@@ -37,7 +37,7 @@ export const ItemRenderer = ({ node }: { node: ItemNode }) => {
   useRegistry(node.id, node.type, ref)
 
   return (
-    <group position={node.position} rotation={node.rotation} ref={ref}>
+    <group position={node.position} rotation={node.rotation} ref={ref} visible={node.visible}>
       <Suspense>
         <ModelRenderer node={node} />
       </Suspense>

packages/viewer/src/components/renderers/roof/roof-renderer.tsx

@@ -17,6 +17,7 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
       receiveShadow
       position={node.position}
       rotation-y={node.rotation}
+      visible={node.visible}
       {...handlers}
     >
       {/* RoofSystem will replace this geometry in the next frame */}

packages/viewer/src/components/renderers/slab/slab-renderer.tsx

@@ -11,7 +11,7 @@ export const SlabRenderer = ({ node }: { node: SlabNode }) => {
   const handlers = useNodeEvents(node, 'slab')
 
   return (
-    <mesh ref={ref} castShadow receiveShadow {...handlers}>
+    <mesh ref={ref} castShadow receiveShadow {...handlers} visible={node.visible}>
       {/* SlabSystem will replace this geometry in the next frame */}
       <boxGeometry args={[0, 0, 0]} />
       <meshStandardMaterial color="#e5e5e5" />

packages/viewer/src/components/renderers/wall/wall-renderer.tsx

@@ -12,7 +12,7 @@ export const WallRenderer = ({ node }: { node: WallNode }) => {
   const handlers = useNodeEvents(node, 'wall')
 
   return (
-    <mesh ref={ref} castShadow receiveShadow>
+    <mesh ref={ref} castShadow receiveShadow visible={node.visible}>
       {/* WallSystem will replace this geometry in the next frame */}
       <boxGeometry args={[0, 0, 0]} />
       <meshStandardMaterial color="lightgray"  />