# Phase 5: Electrical & Furniture Placement

**Status:** ⬜ Not Started
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Add electrical symbol library (IEC standard) and furniture silhouette library to the 2D editor. Implement drag-and-drop placement, layer toggling, collision detection, and save/load for both element types.

## Tasks

- [ ] Task 1: Create IEC electrical symbol library as SVG/Konva shapes: outlet (single, double, grounded), switch (single, double, dimmer), junction box, ceiling light, wall light, cable route (line with markers)
- [ ] Task 2: Create furniture silhouette library as Konva shapes with approximate dimensions (meters): bed (1.4x2.0, 1.6x2.0, 1.8x2.0), desk (1.2x0.6), wardrobe (varies), sofa (2.0x0.9), dining table (1.2x0.8), chair (0.45x0.45), shelf (0.8x0.3), nightstand (0.5x0.4), dresser (1.0x0.5), bookcase (0.8x0.3)
- [ ] Task 3: Implement electrical tool — click to place electrical items on canvas. Wall-mounted items (outlets, switches, wall lights) snap to nearest wall. Ceiling items (ceiling light, junction box) place freely. Cable routes draw as connected line segments.
- [ ] Task 4: Implement furniture tool — drag from furniture palette to canvas. Furniture renders as recognizable top-down silhouette with label. Rotation handle on selected furniture.
- [ ] Task 5: Create electrical palette panel — left sidebar panel showing all electrical symbol types grouped by category. Click to select type, then click on canvas to place.
- [ ] Task 6: Create furniture palette panel — left sidebar panel showing all furniture types with icons and default dimensions. Drag from palette to canvas.
- [ ] Task 7: Implement layer toggling — toolbar buttons to show/hide: walls, electrical, furniture, measurements. Visual indicator for active/hidden layers.
- [ ] Task 8: Implement collision detection for furniture — highlight overlapping furniture in red. Optional warning, not blocking (user may intentionally stack items).
- [ ] Task 9: Implement light coverage visualization — when a light fixture is selected, show a semi-transparent circle indicating its coverage radius. Radius configurable in properties panel.
- [ ] Task 10: Add electrical and furniture items to the properties panel — show type-specific properties (e.g., outlet grounding, switch type, furniture dimensions, custom labels)
- [ ] Task 11: Implement save/load for electrical and furniture items — use the API endpoints from Phase 2
- [ ] Task 12: Register electrical and furniture tools with the existing tool system from Phase 4
- [ ] Task 13: Add cable length calculator — display total cable length based on all cable route segments in the room. Show in a status bar at the bottom of the editor.

## Electrical Symbol Specifications (IEC 60617)
- **Outlet:** Circle with two parallel lines (grounded: + earth symbol)
- **Switch:** Circle with a line at angle (dimmer: arc symbol)
- **Junction box:** Filled circle or square with X
- **Ceiling light:** Circle with cross pattern
- **Wall light:** Half-circle against wall
- **Cable route:** Dashed line connecting elements

## Files to Modify/Create
- `apps/client/src/components/editor/symbols/electrical/OutletSymbol.tsx` — outlet variations
- `apps/client/src/components/editor/symbols/electrical/SwitchSymbol.tsx` — switch variations
- `apps/client/src/components/editor/symbols/electrical/JunctionBoxSymbol.tsx`
- `apps/client/src/components/editor/symbols/electrical/CeilingLightSymbol.tsx`
- `apps/client/src/components/editor/symbols/electrical/WallLightSymbol.tsx`
- `apps/client/src/components/editor/symbols/electrical/CableRouteSymbol.tsx`
- `apps/client/src/components/editor/symbols/electrical/index.ts` — symbol registry
- `apps/client/src/components/editor/symbols/furniture/BedSilhouette.tsx`
- `apps/client/src/components/editor/symbols/furniture/DeskSilhouette.tsx`
- `apps/client/src/components/editor/symbols/furniture/WardrobeSilhouette.tsx`
- `apps/client/src/components/editor/symbols/furniture/SofaSilhouette.tsx`
- `apps/client/src/components/editor/symbols/furniture/TableSilhouette.tsx`
- `apps/client/src/components/editor/symbols/furniture/ChairSilhouette.tsx`
- `apps/client/src/components/editor/symbols/furniture/ShelfSilhouette.tsx`
- `apps/client/src/components/editor/symbols/furniture/index.ts` — furniture registry
- `apps/client/src/components/editor/layers/ElectricalLayer.tsx` — render electrical items
- `apps/client/src/components/editor/layers/FurnitureLayer.tsx` — render furniture items
- `apps/client/src/components/editor/tools/ElectricalTool.ts` — electrical placement logic
- `apps/client/src/components/editor/tools/FurnitureTool.ts` — furniture placement logic
- `apps/client/src/components/editor/panels/ElectricalPalette.tsx` — electrical symbol picker
- `apps/client/src/components/editor/panels/FurniturePalette.tsx` — furniture item picker
- `apps/client/src/components/editor/panels/CableLengthStatus.tsx` — cable length calculator display
- `apps/client/src/components/editor/utils/collisionDetection.ts` — furniture overlap detection
- `apps/client/src/components/editor/utils/lightCoverage.ts` — light radius calculation

## Acceptance Criteria
- All IEC electrical symbols render correctly and are recognizable
- All furniture silhouettes render as recognizable top-down shapes
- Electrical items can be placed on the canvas — wall-mounted items snap to walls
- Furniture items can be dragged from palette to canvas with rotation support
- Layer toggling shows/hides element categories independently
- Collision detection highlights overlapping furniture
- Light coverage circles display for selected light fixtures
- Cable length calculator shows total cable route length
- All items save to and load from API
- Properties panel works for electrical and furniture items

## Notes
- Electrical symbols should be precise enough for electricians to understand the plan
- Furniture silhouettes should be recognizable but not photorealistic — clean geometric shapes
- Cable route is a series of connected line segments, not a single straight line
- Collision detection is visual feedback only — not a hard constraint
- Light coverage radius is configurable per fixture (default: 3m for ceiling, 1.5m for wall)

## Review Checklist
- [ ] All tasks completed
- [ ] Code follows project conventions
- [ ] No unintended side effects
- [ ] Build passes
- [ ] Tests pass (new + existing)

## Handoff to Next Phase
<!-- Filled in by the implementation agent after completing this phase -->
