roof

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

@@ -6,6 +6,7 @@ import { CeilingRenderer } from './ceiling/ceiling-renderer'
 import { GuideRenderer } from './guide/guide-renderer'
 import { ItemRenderer } from './item/item-renderer'
 import { LevelRenderer } from './level/level-renderer'
+import { RoofRenderer } from './roof/roof-renderer'
 import { ScanRenderer } from './scan/scan-renderer'
 import { SlabRenderer } from './slab/slab-renderer'
 import { WallRenderer } from './wall/wall-renderer'
@@ -25,6 +26,7 @@ export const NodeRenderer = ({ nodeId }: { nodeId: AnyNode['id'] }) => {
       {node.type === 'slab' && <SlabRenderer node={node} />}
       {node.type === 'wall' && <WallRenderer node={node} />}
       {node.type === 'zone' && <ZoneRenderer node={node} />}
+      {node.type === 'roof' && <RoofRenderer node={node} />}
       {node.type === 'scan' && <ScanRenderer node={node} />}
       {node.type === 'guide' && <GuideRenderer node={node} />}
     </>

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

@@ -0,0 +1,27 @@
+import { type RoofNode, useRegistry } from '@pascal-app/core'
+import { useRef } from 'react'
+import type { Mesh } from 'three'
+import { useNodeEvents } from '../../../hooks/use-node-events'
+
+export const RoofRenderer = ({ node }: { node: RoofNode }) => {
+  const ref = useRef<Mesh>(null!)
+
+  useRegistry(node.id, 'roof', ref)
+
+  const handlers = useNodeEvents(node, 'roof')
+
+  return (
+    <mesh
+      ref={ref}
+      castShadow
+      receiveShadow
+      position={node.position}
+      rotation-y={node.rotation}
+      {...handlers}
+    >
+      {/* RoofSystem will replace this geometry in the next frame */}
+      <boxGeometry args={[0, 0, 0]} />
+      <meshStandardMaterial color="#8b4513" />
+    </mesh>
+  )
+}

packages/viewer/src/components/viewer/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { CeilingSystem, ItemSystem, SlabSystem, WallSystem } from '@pascal-app/core'
+import { CeilingSystem, ItemSystem, RoofSystem, SlabSystem, WallSystem } from '@pascal-app/core'
 import { Bvh, Environment } from '@react-three/drei'
 import { Canvas, extend, type ThreeToJSXElements } from '@react-three/fiber'
 import * as THREE from 'three/webgpu'
@@ -49,6 +49,7 @@ const Viewer: React.FC<ViewerProps> = ({ children }) => {
       {/* Core systems */}
       <CeilingSystem />
       <ItemSystem />
+      <RoofSystem />
       <SlabSystem />
       <WallSystem />
       <PostProcessing />

packages/viewer/src/hooks/use-node-events.ts

@@ -7,6 +7,8 @@ import {
   emitter,
   type ItemEvent,
   type ItemNode,
+  type RoofEvent,
+  type RoofNode,
   type SlabEvent,
   type SlabNode,
   type WallEvent,
@@ -23,6 +25,7 @@ type NodeConfig = {
   zone: { node: ZoneNode; event: ZoneEvent }
   slab: { node: SlabNode; event: SlabEvent }
   ceiling: { node: CeilingNode; event: CeilingEvent }
+  roof: { node: RoofNode; event: RoofEvent }
 }
 
 type NodeType = keyof NodeConfig