# House/Apartment Plan Maker — Architecture & Project Plan

## Context
Greenfield client-server application for creating and editing apartment/house floor plans.
The repo is empty: `house-plan-maker/`.

## Core Requirements
1. **Apartment management** — CRUD apartments with metadata (name, address, total area).
2. **Room editor** — Each apartment contains rooms. Rooms have names, dimensions, and shapes
   (rectangular default, arbitrary polygon supported).
3. **Visual editor per room:**
   - Top-down 2D view (primary editing surface) — place walls, doors, windows, electrical, furniture
   - 4 side projection views (north/south/east/west walls) — show wall elevation with outlets,
     switches, furniture against that wall
   - 3D perspective view (read-only visualization)
4. **Electrical plan** — Place switches, outlets, junction boxes, light fixtures, cable routes on
   both top-down and projection views. Use standard IEC electrical symbols.
5. **Furniture placement** — Drag-and-drop furniture items (bed, desk, wardrobe, sofa, table,
   chair, shelf, etc.) with approximate dimensions. Visual must be recognizable silhouettes,
   not photorealistic.
6. **Persistence** — Save/load apartment data to server (REST API + database).
7. **Export** — Export full apartment plan or individual room views as PDF or PNG images.

## Assumed Tech Stack (confirm or override)
- **Frontend:** React 19 + TypeScript + Vite
- **2D Canvas:** Konva.js via react-konva (layered 2D shapes, drag-and-drop, zoom/pan)
- **3D View:** Three.js via @react-three/fiber + @react-three/drei
- **Backend:** Node.js + Fastify + Prisma ORM
- **Database:** SQLite (dev), PostgreSQL (prod)
- **PDF Export:** Client-side via jsPDF + html2canvas, or server-side Puppeteer
- **Monorepo:** Turborepo with `apps/client`, `apps/server`, `packages/shared`

## Target Users
- **End users:** Plan room layout and furniture placement visually.
- **Electricians:** Use exported plans to wire the apartment — precise outlet/switch positions matter.
- **Furniture makers:** Use exported dimensions to build custom furniture.

## Workflow
1. User creates an apartment → defines rooms (name, shape, dimensions)
2. User opens a room → edits in 2D top-down view (walls, electrical, furniture)
3. User switches to projection views to fine-tune wall-mounted items
4. User previews in 3D
5. User exports to PDF/PNG

## Deliverable
Create a phased implementation plan covering:
- Data model design (apartment → rooms → elements → electrical/furniture)
- API endpoints
- Frontend component architecture
- 2D editor architecture (layers, tools, snapping, grid)
- Projection view rendering strategy
- 3D view approach
- Export pipeline
- Testing strategy

Break into 4 implementation phases with clear milestones.

## Additional Ideas to Evaluate
- Snap-to-grid and snap-to-wall for precise placement
- Measurement annotations (auto-display distances between elements)
- Room templates (bedroom, kitchen, bathroom presets)
- Undo/redo stack
- Layer toggling (show/hide electrical, furniture, dimensions independently)
- Copy room layout between apartments
- Cable length calculator based on placed electrical elements
- Light coverage visualization (radius circles around light fixtures)
- Collision detection for furniture overlap
- Scale ruler always visible on canvas

---

## Quick Version

Greenfield app: `house-plan-maker/`. Client-server for creating apartment floor plans.

Stack: React 19 + TS + Vite | react-konva (2D) | react-three-fiber (3D) | Fastify + Prisma + SQLite | Turborepo monorepo.

Features: Apartment → Rooms (rectangular or polygon). Per-room visual editor: 2D top-down + 4 wall projections + 3D preview. Place electrical (IEC symbols: outlets, switches, lights, cables) and furniture (recognizable silhouettes). Save/load via REST API. Export PDF/PNG.

Create a phased implementation plan (4 phases) with data model, API, component architecture, 2D editor design, and export pipeline.

---

## Implementation Phases

### Phase 0 — Architecture & Planning
- **Model:** Opus
- **ECC:** `/plan`, `architect` agent
- Finalize tech stack, data model, API design, component tree, editor architecture

### Phase 1 — Project Scaffold + Data Model + API
- **Model:** Sonnet
- **ECC:** `feature-dev`, `api-design`, `tdd-guide`
- Monorepo setup, Prisma schema, REST endpoints, basic CRUD UI

### Phase 2 — 2D Visual Editor (Top-Down + Projections)
- **Model:** Sonnet
- **ECC:** `feature-dev`, `frontend-design`, `code-reviewer`
- Canvas editor with layers, tools, grid, snapping, drag-and-drop
- Wall projection views

### Phase 3 — 3D View + Electrical & Furniture Libraries
- **Model:** Sonnet
- **ECC:** `feature-dev`, `frontend-patterns`
- Three.js scene from room data, electrical symbol library, furniture silhouette library

### Phase 4 — Export + Polish
- **Model:** Sonnet
- **ECC:** `feature-dev`, `e2e-runner`
- PDF/PNG export, undo/redo, measurement annotations, layer toggling, final QA