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/ceiling/ceiling-renderer.tsx

@@ -1,49 +1,37 @@
 import { type CeilingNode, useRegistry } from '@pascal-app/core'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import { float, mix, positionWorld, smoothstep } from 'three/tsl'
 import { BackSide, FrontSide, type Mesh, MeshBasicNodeMaterial } from 'three/webgpu'
 import { useNodeEvents } from '../../../hooks/use-node-events'
+import { createMaterial, DEFAULT_CEILING_MATERIAL } from '../../../lib/materials'
 import { NodeRenderer } from '../node-renderer'
 
-// TSL material that renders differently based on face direction:
-// - Back face (looking up at ceiling from below): solid
-// - Front face (looking down at ceiling from above): 30% opacity
-const ceilingTopMaterial = new MeshBasicNodeMaterial({
-  color: 0xb5_a7_8d,
-  transparent: true,
-  depthWrite: false,
-  side: FrontSide,
-  // Disabled as we only show ceiling grid when needed
-  // alphaTestNode: float(0.4), // Discard pixels with alpha below 0.4 to create grid lines and not affect depth buffer
-})
-
-const ceilingBottomMaterial = new MeshBasicNodeMaterial({
-  color: 0x99_99_99,
-  transparent: true,
-  side: BackSide,
-})
-
-// Create grid pattern based on local position
-const gridScale = 5 // Grid cells per meter (1 = 1m grid)
+const gridScale = 5
 const gridX = positionWorld.x.mul(gridScale).fract()
 const gridY = positionWorld.z.mul(gridScale).fract()
-
-// Create grid lines - they are at 0 and 1
-const lineWidth = 0.05 // Width of grid lines (0-1 range within cell)
-
-// Create visible lines at edges (near 0 and near 1)
+const lineWidth = 0.05
 const lineX = smoothstep(lineWidth, 0, gridX).add(smoothstep(1.0 - lineWidth, 1.0, gridX))
 const lineY = smoothstep(lineWidth, 0, gridY).add(smoothstep(1.0 - lineWidth, 1.0, gridY))
-
-// Combine: if either X or Y is a line, show the line
 const gridPattern = lineX.max(lineY)
-
-// Grid lines at 0.6 opacity, spaces at 0.2 opacity
 const gridOpacity = mix(float(0.2), float(0.6), gridPattern)
 
-// faceDirection is 1.0 for front face, -1.0 for back face
-// Front face (top, looking down): grid pattern, Back face (bottom, looking up): solid
-ceilingTopMaterial.opacityNode = gridOpacity
+function createCeilingMaterials(color: string = '#999999') {
+  const topMaterial = new MeshBasicNodeMaterial({
+    color,
+    transparent: true,
+    depthWrite: false,
+    side: FrontSide,
+  })
+  topMaterial.opacityNode = gridOpacity
+
+  const bottomMaterial = new MeshBasicNodeMaterial({
+    color,
+    transparent: true,
+    side: BackSide,
+  })
+
+  return { topMaterial, bottomMaterial }
+}
 
 export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
   const ref = useRef<Mesh>(null!)
@@ -51,12 +39,20 @@ export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
   useRegistry(node.id, 'ceiling', ref)
   const handlers = useNodeEvents(node, 'ceiling')
 
+  const materials = useMemo(() => {
+    if (node.material) {
+      const props = node.material.properties
+      const color = props?.color || '#999999'
+      return createCeilingMaterials(color)
+    }
+    return { topMaterial: createCeilingMaterials().topMaterial, bottomMaterial: DEFAULT_CEILING_MATERIAL }
+  }, [node.material])
+
   return (
-    <mesh material={ceilingBottomMaterial} ref={ref}>
-      {/* CeilingSystem will replace this geometry in the next frame */}
+    <mesh material={materials.bottomMaterial} ref={ref}>
       <boxGeometry args={[0, 0, 0]} />
       <mesh
-        material={ceilingTopMaterial}
+        material={materials.topMaterial}
         name="ceiling-grid"
         {...handlers}
         scale={0}