Integrate Aluwdoors textures and 3D dimension labels

Complete reverse-engineering integration of competitor assets:

**Phase 1: CSS Analysis & Color Extraction**
- Analyzed configurator.css (377KB) for design patterns
- Extracted primary color scheme:
  * Primary action: #b1de6e, #9fcd5b (pistachio green)
  * Dark backgrounds: #1b2221, #2b3937, #3e4b49 (dark teal/grays)
  * Light backgrounds: #e0e5e5, #f0f3f3
  * Error/accent: #e74242, #c40c0c

**Phase 2: Asset Mapping System**
Created lib/asset-map.ts:
- metalTextures: Maps finish types to high-res texture files
- glassTextures: Clear and frosted glass variants
- handleSVGs: 5 handle types (beugelgreep, hoekgreep, maangreep, etc.)
- dividerSVGs: Platte-roede and T-roede profiles
- getMetalTexture(): Maps store values to file paths
- getGlassMaterial(): Returns material props based on glass type
- aluwColors: Extracted color palette for UI theming

**Phase 3: Texture-Mapped Materials**
door-3d-enhanced.tsx:
- SteelMaterial: Loads real metal grain textures via useTexture
  * repeat.set(4, 8) - Realistic grain pattern on profiles
  * roughness: 0.7 - Matte powdercoat finish
  * Fallback to solid color if texture load fails
- All steel components use textured materials
- Frame, stiles, rails, dividers, handles all texture-mapped

**Phase 4: 3D Dimension Labels (OpenType Integration)**
- DimensionLabel component using <Text> from drei
- Real-time dimension display:
  * Width label at bottom: "{doorLeafWidth} mm"
  * Height label on right: "{height} mm"
- Visual dimension lines:
  * Horizontal line under door (width indicator)
  * Vertical line beside door (height indicator)
- White background planes for text readability
- Updates instantly when sliders change

**Integration:**
- scene.tsx now uses Door3DEnhanced
- Textures loaded dynamically based on finish selection
- Dimensions render in 3D space, not 2D overlay
- Professional technical drawing appearance

**Result:**
- Photorealistic metal grain on all steel profiles
- Real-time dimension annotations in 3D
- Matches Aluwdoors visual quality
- Technical drawing clarity

Next: UI theming with aluwColors, handle geometry from SVGs

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

components/configurator/scene.tsx

@@ -2,7 +2,7 @@
 
 import { Canvas } from "@react-three/fiber";
 import { OrbitControls, PerspectiveCamera, Environment, ContactShadows } from "@react-three/drei";
-import { Door3D } from "./door-3d";
+import { Door3DEnhanced } from "./door-3d-enhanced";
 import * as THREE from "three";
 
 function Room() {
@@ -152,8 +152,8 @@ export function Scene3D() {
       {/* The Room */}
       <Room />
 
-      {/* The Door */}
-      <Door3D />
+      {/* The Door - Enhanced with textures and dimensions */}
+      <Door3DEnhanced />
     </Canvas>
   );
 }