hovered zones system

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

@@ -2,7 +2,7 @@ import { useRegistry, type ZoneNode } from '@pascal-app/core'
 import { Html } from '@react-three/drei'
 import { useMemo, useRef } from 'react'
 import { BufferGeometry, Color, DoubleSide, Float32BufferAttribute, type Group, Shape } from 'three'
-import { color, float, uv } from 'three/tsl'
+import { color, float, uniform, uv } from 'three/tsl'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { useNodeEvents } from '../../../hooks/use-node-events'
 
@@ -19,16 +19,20 @@ const createWallGradientMaterial = (zoneColor: string) => {
   // Use UV y coordinate for vertical gradient (0 at bottom, 1 at top)
   const gradientT = uv().y
 
+  const opacity = uniform(0);
   // Fade opacity from 0.6 at bottom to 0 at top
-  const opacity = float(0.6).mul(float(1).sub(gradientT))
+  const finalOpacity = float(0.6).mul(float(1).sub(gradientT)).mul(opacity);
 
   return new MeshBasicNodeMaterial({
     transparent: true,
     colorNode: baseColor,
-    opacityNode: opacity,
+    opacityNode: finalOpacity,
     side: DoubleSide,
     depthWrite: false,
     depthTest: false,
+    userData: {
+      uOpacity: opacity,
+    }
   })
 }
 
@@ -37,13 +41,15 @@ const createWallGradientMaterial = (zoneColor: string) => {
  */
 const createFloorMaterial = (zoneColor: string) => {
   const baseColor = color(new Color(zoneColor))
-
+  const opacity = uniform(0)
   return new MeshBasicNodeMaterial({
     transparent: true,
     colorNode: baseColor,
-    opacityNode: float(0.15),
+    opacityNode: float(0.25).mul(opacity),
     side: DoubleSide,
     depthWrite: false,
+    depthTest: false,
+    userData: { uOpacity: opacity}
   })
 }
 
@@ -187,12 +193,12 @@ export const ZoneRenderer = ({ node }: { node: ZoneNode }) => {
           {node.name}</div>
       </Html>
       {/* Floor fill */}
-      <mesh position={[0, Y_OFFSET, 0]} rotation={[-Math.PI / 2, 0, 0]} material={floorMaterial}>
+      <mesh position={[0, Y_OFFSET, 0]} rotation={[-Math.PI / 2, 0, 0]} material={floorMaterial} name="floor">
         <shapeGeometry args={[floorShape]} />
       </mesh>
 
       {/* Wall borders with gradient */}
-      <mesh geometry={wallGeometry} material={wallMaterial} />
+      <mesh geometry={wallGeometry} material={wallMaterial} name="walls" />
     </group>
   )
 }

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

@@ -8,6 +8,7 @@ import { GuideSystem } from '../../systems/guide/guide-system'
 import { LevelSystem } from '../../systems/level/level-system'
 import { ScanSystem } from '../../systems/scan/scan-system'
 import { WallCutout } from '../../systems/wall/wall-cutout'
+import { ZoneSystem } from '../../systems/zone/zone-system'
 import { SceneRenderer } from '../renderers/scene-renderer'
 import { Lights } from './lights'
 import PostProcessing from './post-processing'
@@ -63,6 +64,7 @@ const Viewer: React.FC<ViewerProps> = ({ children, selectionManager = 'default'
       <RoofSystem />
       <SlabSystem />
       <WallSystem />
+      <ZoneSystem />
       <PostProcessing />
 
       {selectionManager === 'default' && <SelectionManager />}