feat: add material system for all node types

- Add MaterialSchema with 10 presets (white, brick, concrete, wood, glass, metal, plaster, tile, marble, custom)
- Add material field to Wall, Slab, Door, Window, Ceiling, Roof, RoofSegment nodes
- Create MaterialPicker UI component with preset selection and custom properties
- Update all renderers to support material rendering with caching
- Add Material section to all node panels (WallPanel, SlabPanel, DoorPanel, WindowPanel, CeilingPanel, RoofPanel, RoofSegmentPanel)
- Update AGENTS.md with Material System documentation

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

@@ -1,7 +1,8 @@
 import { type RoofNode, useRegistry } from '@pascal-app/core'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import type * as THREE from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
+import { createMaterial, DEFAULT_ROOF_MATERIAL } from '../../../lib/materials'
 import useViewer from '../../../store/use-viewer'
 import { NodeRenderer } from '../node-renderer'
 import { roofDebugMaterials, roofMaterials } from './roof-materials'
@@ -14,6 +15,12 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
   const handlers = useNodeEvents(node, 'roof')
   const debugColors = useViewer((s) => s.debugColors)
 
+  const customMaterial = useMemo(() => {
+    return node.material ? createMaterial(node.material) : null
+  }, [node.material])
+
+  const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials
+
   return (
     <group
       position={node.position}
@@ -24,7 +31,7 @@ export const RoofRenderer = ({ node }: { node: RoofNode }) => {
     >
       <mesh
         castShadow
-        material={debugColors ? roofDebugMaterials : roofMaterials}
+        material={material}
         name="merged-roof"
         receiveShadow
       >