Created complete business logic system for door dimensions:
**New: lib/calculations.ts**
- calculateHoleWidth: Total wall opening needed
- calculateHoleMinWidth/MaxWidth: Dynamic limits based on config
- calculateSidePanelWidth: Side panel sizing logic
- calculateDoorLeafWidth: Individual door panel width
- validateDimensions: Real-time validation
- Constants: Frame profiles (80mm), min/max widths
**Enhanced: lib/store.ts**
- Added doorConfig: 'enkele' | 'dubbele' (single/double door)
- Added sidePanel: 'geen' | 'links' | 'rechts' | 'beide'
- Calculated fields: holeWidth, doorLeafWidth, sidePanelWidth, min/maxWidth
- Auto-recalculation on config changes
- setWidth/setHeight with automatic clamping to valid ranges
- Internal recalculate() method updates all derived values
**Redesigned: step-dimensions.tsx**
- Door configuration selector (enkele/dubbele)
- Side panel selector (geen/links/rechts/beide)
- Width slider with dynamic min/max based on configuration
- Height slider (1800-3000mm)
- Real-time input fields synced with sliders
- Summary panel showing:
- Door leaf width
- Total wall opening (hole width × height)
- Side panel width (when applicable)
- Premium tile-based UI (Dark Green/Pistachio theme)
**Added: components/ui/slider.tsx**
- Shadcn Slider component for smooth value selection
**Connected: door-3d.tsx**
- Door now uses doorLeafWidth from store (in mm, converted to meters)
- Door height from store (in mm, converted to meters)
- 3D door resizes in real-time as user drags sliders
- Maintains realistic proportions
**User Flow:**
1. User selects enkele/dubbele configuration
2. User selects side panels (if any)
3. Store calculates valid min/max widths
4. User drags width slider (clamped to valid range)
5. Store calculates door leaf width and side panel widths
6. 3D door updates instantly to show new dimensions
7. Summary shows all calculated dimensions
**Result:** Professional dimension configurator with real business logic,
automatic validation, and real-time 3D preview
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Complete architectural overhaul from CSS to WebGL 3D rendering:
**Dependencies Added:**
- three, @types/three
- @react-three/fiber (R3F)
- @react-three/drei (helpers)
**New Components:**
1. components/configurator/scene.tsx
- Canvas with shadows and tone mapping
- PerspectiveCamera with OrbitControls
- Lighting: Ambient + Directional + Spot + Environment
- 3D Room: Floor (wood texture) + Walls with doorway opening
- Limited camera rotation (minPolarAngle/maxPolarAngle)
2. components/configurator/door-3d.tsx
- Door constructed from 3D mesh primitives (BoxGeometry)
- Frame: Metal material (metalness 0.7, roughness 0.3)
- Glass: PhysicalMaterial with transmission for realistic glass
- Dynamic grid dividers based on gridType
- Handles: 3D U-greep (vertical bar) or Klink (horizontal + sphere)
- All meshes cast shadows
3. components/configurator/door-visualizer.tsx
- Integrated Scene3D with Suspense
- Loading fallback with spinner
- Control hints for user interaction
- Badge changed to "3D Voorbeeld"
**Features:**
- True depth and perspective
- Realistic shadows on floor and walls
- Reflective glass material
- Interactive camera (drag to rotate, scroll to zoom)
- Door appears IN the doorway, not floating
- Apartment environment preset for reflections
- Real-time updates from Zustand store
**Result:** Photorealistic 3D room with proper lighting, shadows, and materials
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replaced SVG lines with CSS borders and glass effects:
- Frame: Thick CSS borders (12px) with shadow-2xl and ring-1 ring-white/10
- Glass: backdrop-blur + backdrop-brightness + sky-100/10 tint
- Grid: CSS Grid with gaps (gaps show frameColor as steel profiles)
- Handles: Absolute positioned divs with realistic shadows
- Background: Room image with white/60 overlay for contrast
Frame colors: #1f1f1f (charcoal black), #8B6F47 (bronze), #525252 (grey)
Result: Looks like a photo of a door, not a drawing
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Major Changes:
- Replaced static preview with dynamic SVG door visualizer
- Integrated Zustand for real-time state management
- Redesigned UI with Dark Green (#1A2E2E) and Pistachio (#C4D668) colors
- Removed all orange branding (brand-orange)
- Premium selection tiles with active/inactive states
- Live door rendering that updates instantly on selection
Features:
- Dynamic SVG draws door based on configuration
- Real-time updates: doorType, gridType, finish, handle
- Background room image with semi-transparent overlay
- Animated "Live Voorbeeld" badge with pulse effect
- Configuration info card showing current selections
- Premium typography with Inter font
Technical:
- Added Zustand state management (lib/store.ts)
- Created DoorVisualizer component with SVG logic
- Updated step-product and step-options with premium tiles
- Color swatches for finish selection
- Check icons for selected states
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
