# Bauplan – web-cad-neu

**Komplett funktionierende 2D-CAD Software für Event-Bestuhlungspläne**
Basierend auf: Pflichtenheft v4 (633 Zeilen) + UI-Mockup Iteration 9

---

## Technologie-Stack

| Schicht | Technologie | Lizenz |
|---------|-------------|--------|
| Frontend | React 18 + TypeScript + Vite | MIT |
| Rendering | Canvas 2D + rbush (R-Tree) | MIT |
| CRDT/Sync | Yjs + y-websocket | MIT |
| Backend | Node 20 + TypeScript + Fastify | MIT |
| Datenbank | SQLite (better-sqlite3) | Public Domain |
| DXF | dxf-parser + dxf-writer | MIT |
| PDF | pdf-lib | MIT |
| Auth | bcrypt | Apache |
| KI | OpenAI-kompatibler Endpoint (user-provided) | – |
| Deployment | Docker + Coolify | Open Source |

---

## Phasen-Übersicht

| Phase | Titel | Anforderungen | Status |
|-------|-------|---------------|--------|
| 0 | Projekt-Setup & Config | – | ✅ Angelegt |
| 1 | Core Types & Canvas Engine | F-CAD-01, F-CAD-04 | ⬜ |
| 2 | UI-Gerüst nach Mockup | F-UI-01 bis F-UI-08 | ⬜ |
| 3 | Zeichen-Tools | F-CAD-01, F-CAD-11, F-CAD-12 | ⬜ |
| 4 | Bearbeitungs-Tools | F-CAD-02, F-CAD-07, F-CAD-08 | ⬜ |
| 5 | Auswahl & Snap | F-CAD-04, F-CAD-07 | ⬜ |
| 6 | Layer-System | F-LAY-01 bis F-LAY-06 | ⬜ |
| 7 | Block-Bibliothek | F-LIB-01 bis F-LIB-07 | ⬜ |
| 8 | Bestuhlungs-Tools | F-EVT-01 bis F-EVT-05 | ⬜ |
| 9 | Bemaßung & Text | F-CAD-03, F-CAD-11 | ⬜ |
| 10 | Hintergrund & Grundriss | F-BG-01 bis F-BG-04 | ⬜ |
| 11 | Undo/Redo & History | F-CAD-09, F-CAD-10 | ⬜ |
| 12 | Command Line | F-CAD-05, F-UI-04 | ⬜ |
| 13 | Import/Export | F-IMP-01 bis F-IMP-04, F-EXP-01 bis F-EXP-04 | ⬜ |
| 14 | Backend & REST-API | F-INT-01, F-INT-02, F-INT-04 | ⬜ |
| 15 | Auth & Benutzerverwaltung | F-AUTH-01 bis F-AUTH-05 | ⬜ |
| 16 | Multi-User & Kollaboration | F-MU-01 bis F-MU-07 | ⬜ |
| 17 | KI Copilot | F-AI-01 bis F-AI-15 | ⬜ |
| 18 | Plugin-System | F-EXT-01 bis F-EXT-08 | ⬜ |
| 19 | Theme & Responsive | F-UI-05, F-UI-06, F-UI-10 | ⬜ |
| 20 | Docker & Deployment | NF-DEP-01 bis NF-DEP-05 | ⬜ |
| 21 | Tests & QA | NF-PERF-01 bis NF-PERF-05 | ⬜ |

---

## Phase 0: Projekt-Setup & Config ✅

**Ziel:** Saubere Projektstruktur, Config-Dateien, keine Duplikate

**Dateien:**
- `package.json` (root, frontend, backend)
- `tsconfig.json` (frontend, backend)
- `vite.config.ts`
- `docker-compose.yml` (eine Datei, nicht 5)
- `Dockerfile` (frontend, backend)
- `nginx.conf`
- `.gitignore`
- `README.md`
- `frontend/index.html`
- `frontend/src/types/cad.types.ts` – Alle Core Types

**Erledigt:** ✅ Struktur, Config, Types, Canvas Core (SpatialIndex, ZoomPanController, LayerManager)

---

## Phase 1: Core Types & Canvas Engine

**Anforderungen:** F-CAD-01 (Grundelemente), F-CAD-04 (Raster & Fang)

**Dateien:**
- `frontend/src/canvas/RenderEngine.ts` – Haupt-Renderer mit Canvas 2D, Viewport-Culling, Layer-basiertem Rendering, Grid
- `frontend/src/canvas/SpatialIndex.ts` – ✅ Angelegt (rbush R-Tree)
- `frontend/src/canvas/ZoomPanController.ts` – ✅ Angelegt (Zoom, Pan, screenToWorld, worldToScreen, zoomFit)
- `frontend/src/canvas/LayerManager.ts` – ✅ Angelegt (CRUD, Visibility, Lock, Active Layer)
- `frontend/src/interaction/SnapEngine.ts` – Snap-to-Grid, Endpoint, Midpoint, Intersection, Ortho, Polar
- `frontend/src/interaction/SelectionEngine.ts` – Einzelauswahl, Fenster-Auswahl, Kreuz-Auswahl

**RenderEngine muss:**
- Canvas 2D Context verwalten
- requestAnimationFrame Render-Loop
- Zoom/Pan Transform anwenden
- Grid rendern (minor + major lines)
- Viewport-Culling via SpatialIndex
- Elemente nach Layer-Reihenfolge rendern
- Element-Typen rendern: line, circle, arc, rect, polygon, polyline, text, dimension, block_instance, chair
- Selection-Highlights rendern
- Snap-Points visuell hervorheben
- 50.000+ Elemente bei 60fps

---

## Phase 2: UI-Gerüst nach Mockup

**Anforderungen:** F-UI-01 bis F-UI-08

**Referenz:** `/a0/usr/workdir/web-cad-neu/mockup/editor.html` (Iteration 9)

**Komponenten:**
- `frontend/src/App.tsx` – Root, ThemeProvider, Layout-Container
- `frontend/src/main.tsx` – React Entry Point
- `frontend/src/styles/theme.css` – Design Tokens (CSS Custom Properties), Dark/Light Theme
- `frontend/src/styles/layout.css` – Layout-Regeln aus Mockup layout.css (1298 Zeilen)
- `frontend/src/styles/styles.css` – Base Styles aus Mockup styles.css (195 Zeilen)
- `frontend/src/components/Topbar.tsx` – Logo, Projektname, Saved-Badge, Undo/Redo, Version, Share, Theme, Hilfe, Sprache, Avatar
- `frontend/src/components/RibbonBar.tsx` – 6 Tabs (Start, Einfügen, Format, Ansicht, Extras, KI) mit Ribbon-Groups
- `frontend/src/components/LeftSidebar.tsx` – 4 Sektionen (Auswählen, Zeichnen, Bearbeiten, Bestuhlung), 20 Tools als Buttons mit SVG-Icons
- `frontend/src/components/CanvasArea.tsx` – Canvas-Container, Koordinaten-Display, View-Tabs (2D/ISO/Front/Top)
- `frontend/src/components/RightSidebar.tsx` – 4 Tabs: Properties, Layer (Tree), Bibliothek (Tree), KI Copilot
- `frontend/src/components/PropertiesPanel/PropertiesPanel.tsx` – Geometrie, Darstellung, Block-Info
- `frontend/src/components/LayerPanel.tsx` – Tree-Struktur mit Ordnern, Visibility-Toggle, Lock-Toggle, Add-Button
- `frontend/src/components/BlockLibrary.tsx` – Tree-Struktur, Suchfeld, Kategorie-Filter, Draggable Leafs
- `frontend/src/components/KICopilot.tsx` – Chat-UI, Schnell-Aktionen, Voice-Input, Send-Button
- `frontend/src/components/CommandLine.tsx` – History + Input mit Autovervollständigung
- `frontend/src/components/StatusBar.tsx` – SNAP/ORTHO/POLAR/GRID, Koordinaten, Layer, Werkzeug, Online
- `frontend/src/components/TreeView.tsx` – Generische Tree-Komponente (collapsible, draggable)
- `frontend/src/components/MobileDrawers.tsx` – Hamburger-Drawer + Right-Tab-Bar + Slide-in (≤768px)

**UI muss exakt dem Mockup entsprechen:**
- Topbar → Ribbon → (LeftSidebar | CanvasArea | RightSidebar) → CommandLine → StatusBar
- Inter/JetBrains Mono Fonts
- CSS Custom Properties für Theme
- SVG Icons aus Mockup übernehmen
- Responsive: Desktop ≥1280px, Mobile Drawers ≤768px

---

## Phase 3: Zeichen-Tools

**Anforderungen:** F-CAD-01, F-CAD-11, F-CAD-12

**Dateien:**
- `frontend/src/tools/Tool.ts` – Base Tool Interface (onMouseDown, onMouseMove, onMouseUp, onKeyDown, render)
- `frontend/src/tools/ToolManager.ts` – Active Tool, Tool-Switching, Tool-Events
- `frontend/src/tools/drawing/LineTool.ts` – Linie (L): 2 Punkte → Linie
- `frontend/src/tools/drawing/PolylineTool.ts` – Polylinie (PL): Multiple Punkte → Polyline
- `frontend/src/tools/drawing/RectTool.ts` – Rechteck (REC): 2 Punkte → Rechteck
- `frontend/src/tools/drawing/CircleTool.ts` – Kreis (C): Center + Radius
- `frontend/src/tools/drawing/ArcTool.ts` – Bogen (A): Center + StartAngle + EndAngle
- `frontend/src/tools/drawing/PolygonTool.ts` – Polygon: Multiple Punkte → Geschlossen
- `frontend/src/tools/drawing/TextTool.ts` – Text (T): Position + Text + FontSize
- `frontend/src/tools/drawing/DimensionTool.ts` – Bemaßung (DIM): 2 Punkte + Maßlinie
- `frontend/src/tools/drawing/HatchTool.ts` – Schraffur (H): Fläche + Muster
- `frontend/src/tools/drawing/index.ts` – Export aller Tools

**Jedes Tool:**
- Mouse-Events (down/move/up) verarbeiten
- Snap-Engine nutzen
- Preview während des Zeichnens
- Element auf aktiver Ebene erstellen
- Undo-Historie aktualisieren

---

## Phase 4: Bearbeitungs-Tools

**Anforderungen:** F-CAD-02, F-CAD-07, F-CAD-08

**Dateien:**
- `frontend/src/tools/modification/MoveTool.ts` – Verschieben (M): Basispunkt + Ziel
- `frontend/src/tools/modification/CopyTool.ts` – Kopieren (CO): Basispunkt + Ziel
- `frontend/src/tools/modification/RotateTool.ts` – Rotieren (RO): Basispunkt + Winkel
- `frontend/src/tools/modification/ScaleTool.ts` – Skalieren (SC): Basispunkt + Faktor
- `frontend/src/tools/modification/MirrorTool.ts` – Spiegeln (MI): Spiegelachse
- `frontend/src/tools/modification/TrimTool.ts` – Trimmen (TR): Schneiden an Grenzelementen
- `frontend/src/tools/modification/ExtendTool.ts` – Verlängern (EX): Bis zu Grenzelement
- `frontend/src/tools/modification/FilletTool.ts` – Abrunden (F): Radius + 2 Elemente
- `frontend/src/tools/modification/OffsetTool.ts` – Versatz (O): Parallelverschiebung
- `frontend/src/tools/modification/DeleteTool.ts` – Löschen (E)
- `frontend/src/tools/modification/index.ts` – Export

**Gruppierung:**
- `frontend/src/tools/GroupTool.ts` – Gruppe erstellen/auflösen
- Gruppen können verschachtelt werden
- Gruppen in Bibliothek speicherbar

---

## Phase 5: Auswahl & Snap

**Anforderungen:** F-CAD-04, F-CAD-07

**Dateien:**
- `frontend/src/interaction/SelectionEngine.ts` – Einzelauswahl (Klick), Fenster-Auswahl (Links-Rechts), Kreuz-Auswahl (Rechts-Links), Quick-Select (Eigenschafts-basiert)
- `frontend/src/interaction/SnapEngine.ts` – Snap-to-Grid, Endpoint, Midpoint, Intersection, Ortho-Modus, Polar-Tracking
- `frontend/src/interaction/index.ts` – Export

**Snap-Engine:**
- Snap-Modi umschaltbar (F3)
- Visuelle Hervorhebung der Snap-Punkte
- Ortho-Modus (F8): Nur horizontal/vertikal
- Polar-Tracking: Winkel-Snaps (0°, 30°, 45°, 60°, 90°)

---

## Phase 6: Layer-System

**Anforderungen:** F-LAY-01 bis F-LAY-06

**Dateien:**
- `frontend/src/canvas/LayerManager.ts` – ✅ Angelegt, erweitern um: Baumstruktur (parentId), Filter, Duplizieren
- `frontend/src/components/LayerPanel.tsx` – Tree-Widget mit Parent-Child, Visibility/Lock/Color/LineType/Transparency pro Ebene
- `frontend/src/components/TreeView.tsx` – Generische Tree-Komponente

**Funktionen:**
- Ebenen als Baumstruktur (Parent-Child)
- Eigenschaften pro Ebene: Name, Visibility, Lock, Color, LineType, Transparency
- Operationen: Erstellen, Löschen, Umbenennen, Verschieben im Baum, Duplizieren
- Element-Zuordnung: Drag-and-Drop zwischen Ebenen
- Aktive Ebene markieren
- Ebenen-Filter nach Eigenschaften

---

## Phase 7: Block-Bibliothek

**Anforderungen:** F-LIB-01 bis F-LIB-07

**Dateien:**
- `frontend/src/components/BlockLibrary.tsx` – Tree mit Ordnern, Suchfeld, Kategorie-Filter, Draggable Leafs
- `frontend/src/services/blockService.ts` – Block CRUD, SVG-Import, Block-Definition vs. Referenz
- `frontend/src/types/cad.types.ts` – BlockDefinition Type ✅

**Funktionen:**
- Bibliothek als Baumstruktur (Ordner + Unterordner)
- SVG-Import in Bibliothek
- Gruppen als Blöcke speichern
- Drag-and-Drop in Zeichenbereich
- Block-Bearbeitung (Skalieren, Rotieren, Spiegeln)
- Block-Verwaltung (Umbenennen, Duplizieren, Löschen, Verschieben)
- Block-Definition vs. Referenz (Änderung an Definition → alle Instanzen aktualisieren)

---

## Phase 8: Bestuhlungs-Tools

**Anforderungen:** F-EVT-01 bis F-EVT-05

**Dateien:**
- `frontend/src/tools/drawing/ChairTool.ts` – Einzelner Stuhl
- `frontend/src/tools/drawing/SeatingRowTool.ts` – Reihen-Bestuhlung (R): Reihe mit Anzahl, Abstand, Ausrichtung
- `frontend/src/tools/drawing/SeatingBlockTool.ts` – Block-Bestuhlung (B): Rechteck-Bereich mit Reihen, Spalten, Abständen
- `frontend/src/tools/drawing/TableTool.ts` – Tisch (TAB)
- `frontend/src/tools/drawing/StageTool.ts` – Bühne (S)
- `frontend/src/tools/drawing/SeatingTemplateTool.ts` – Bestuhlungs-Vorlagen

**Funktionen:**
- Reihen-Bestuhlung: Anzahl, Abstand, Ausrichtung konfigurierbar
- Block-Bestuhlung: Reihen × Spalten, Abstände, Versatz
- Stuhl-Typ aus Bibliothek wählbar
- Parameter im Nachhinein änderbar
- Einzelne Stühle hinzufügen/entfernen/verschieben
- Automatische Zählung (pro Reihe, Block, Gesamt)

---

## Phase 9: Bemaßung & Text

**Anforderungen:** F-CAD-03, F-CAD-11

**Dateien:**
- `frontend/src/tools/drawing/DimensionTool.ts` – Lineare, winkelige, radiale Bemaßung
- `frontend/src/tools/drawing/TextTool.ts` – Einzel- und Mehrzeilentext
- `frontend/src/tools/drawing/LeaderTool.ts` – Leaders (MLEADER)
- `frontend/src/tools/drawing/RevCloudTool.ts` – Revision Clouds (REVCLOUD)

**Bemaßung:**
- Maßberechnung basierend auf Hintergrund-Maßstab
- Werte in realen Maßeinheiten (m/cm)
- Lineare, winkelige, radiale Bemaßung

---

## Phase 10: Hintergrund & Grundriss

**Anforderungen:** F-BG-01 bis F-BG-04

**Dateien:**
- `frontend/src/services/backgroundService.ts` – Laden, Positionieren, Skalieren von Hintergrundbildern
- `frontend/src/components/BackgroundImport.tsx` – Upload-Dialog

**Funktionen:**
- PNG, JPG, SVG, PDF-Seite als Hintergrund laden
- Maßstab definieren (1:100, Referenzstrecke)
- Hintergrund verschieben, rotieren, skalieren
- Sichtbarkeit ein/aus

---

## Phase 11: Undo/Redo & History

**Anforderungen:** F-CAD-09, F-CAD-10

**Dateien:**
- `frontend/src/history/HistoryManager.ts` – Undo/Redo Stack mit beliebig vielen Schritten
- `frontend/src/history/index.ts` – Export

**Funktionen:**
- Jede Operation erzeugt History-Eintrag
- Undo (Strg+Z) / Redo (Strg+Y)
- Historie einsehbar
- Kopieren zwischen Dateien via Zwischenablage

---

## Phase 12: Command Line

**Anforderungen:** F-CAD-05, F-UI-04

**Dateien:**
- `frontend/src/components/CommandLine.tsx` – History + Input mit Autovervollständigung
- `frontend/src/services/commandRegistry.ts` – Befehls-Registry (L, PL, C, REC, M, CO, RO, SC, MI, TR, O, DIM, H, BESTUHLUNG, etc.)

**Funktionen:**
- Befehlseingabe via Tastatur (AutoCAD-Style)
- Autovervollständigung
- Befehls-History
- Tastatur-Shortcuts (L, C, M, CO, RO, SC, MI, PL, H, etc.)

---

## Phase 13: Import/Export

**Anforderungen:** F-IMP-01 bis F-IMP-04, F-EXP-01 bis F-EXP-04

**Dateien:**
- `frontend/src/services/importService.ts` – DXF, SVG, PDF, JSON Import
- `frontend/src/services/exportService.ts` – DXF, SVG, PDF, PNG, JSON Export
- `frontend/src/services/dxfParser.ts` – DXF Parsing (dxf-parser library)
- `frontend/src/services/dxfWriter.ts` – DXF Writing
- `frontend/src/services/pdfExport.ts` – PDF mit pdf-lib

**Formate:**
- Import: DXF, SVG, PDF (optional DWG via libredwg), JSON
- Export: DXF, SVG, PDF, PNG, JSON
- JSON enthält alle Daten (Layers, Elements, Blocks, Background)

---

## Phase 14: Backend & REST-API

**Anforderungen:** F-INT-01, F-INT-02, F-INT-04, F-INT-07

**Dateien:**
- `backend/src/index.ts` – Fastify Server Start
- `backend/src/server.ts` – Server-Konfiguration (CORS, Static, WebSocket)
- `backend/src/database/DatabaseInterface.ts` – Abstrahierte DB-Schicht
- `backend/src/database/SqliteAdapter.ts` – SQLite Implementation
- `backend/src/database/schema.sql` – Schema: users, projects, drawings, blocks, layers, elements, settings
- `backend/src/database/migrations.ts` – Migration-Runner
- `backend/src/routes/index.ts` – Route-Registration
- `backend/src/routes/projects.ts` – CRUD für Projekte
- `backend/src/routes/drawings.ts` – CRUD für Zeichnungen
- `backend/src/routes/layers.ts` – CRUD für Layer
- `backend/src/routes/elements.ts` – CRUD für Elemente
- `backend/src/routes/blocks.ts` – CRUD für Blöcke
- `backend/src/routes/export.ts` – Export-Endpunkte
- `backend/src/routes/import.ts` – Import-Endpunkte
- `backend/src/routes/settings.ts` – App-Settings (KI-Config, etc.)
- `backend/src/routes/users.ts` – User-Verwaltung

**API-First:**
- Alle Funktionen über REST-API erreichbar
- OpenAPI/Swagger Dokumentation
- Headless-Modus (nur API, keine UI)
- Webhook-Support

---

## Phase 15: Auth & Benutzerverwaltung

**Anforderungen:** F-AUTH-01 bis F-AUTH-05, NF-SEC-01, NF-SEC-02

**Dateien:**
- `backend/src/auth/AuthService.ts` – Register, Login, Password-Reset, Session-Management
- `backend/src/routes/auth.ts` – Auth-Endpunkte
- `frontend/src/contexts/AuthContext.tsx` – Auth-State Management
- `frontend/src/pages/Login.tsx` – Login-Seite
- `frontend/src/pages/Register.tsx` – Registrierung
- `frontend/src/pages/Dashboard.tsx` – Projekt-Übersicht

**Funktionen:**
- E-Mail/Passwort-Login (bcrypt)
- Passwort-Reset via E-Mail
- Session-Management (HTTP-only Cookies, CSRF-Schutz)
- Rollen: Planer, Betrachter, Admin, Gast
- Gast-Zugänge für spezifische Pläne

---

## Phase 16: Multi-User & Kollaboration

**Anforderungen:** F-MU-01 bis F-MU-07

**Dateien:**
- `backend/src/websocket/yjsServer.ts` – Yjs WebSocket Server mit Persistenz
- `frontend/src/crdt/YjsDocument.ts` – Yjs Document Wrapper
- `frontend/src/crdt/WebSocketProvider.ts` – WebSocket-Verbindung
- `frontend/src/crdt/AwarenessManager.ts` – Nutzer-Anwesenheit, Cursor-Positionen
- `frontend/src/crdt/useYjsBinding.ts` – React Hook für Yjs-Binding

**Funktionen:**
- Echtzeit-Kollaboration (Yjs CRDT)
- Konfliktfreie Bearbeitung
- Nutzer-Anwesenheit (Avatar/Farbe)
- Cursor-Anzeige anderer Nutzer
- Berechtigungs-System (Rollen)
- Offline-Unterstützung (IndexedDB)
- Versionshistorie

---

## Phase 17: KI Copilot

**Anforderungen:** F-AI-01 bis F-AI-15

**Dateien:**
- `backend/src/routes/ai.ts` – KI-Proxy-Endpoint (leitet an OpenAI-kompatiblen API weiter)
- `frontend/src/services/aiService.ts` – KI-Client (sendet an Backend, Backend leitet weiter)
- `frontend/src/services/functionRegistry.ts` – CAD-Function-Registry (alle CAD-Operationen als Functions)
- `frontend/src/components/KICopilot.tsx` – Chat-UI, Schnell-Aktionen, Voice-Input

**Architektur:**
```
User Input → Backend → OpenAI-kompatibler API-Endpoint
→ LLM generiert Function Call (z.B. draw_line(x1,y1,x2,y2))
→ Function-Registry führt Function aus
→ Canvas aktualisiert sich
→ Ergebnis an LLM → Bestätigung an User
```

**Functions (registriert):**
- draw_line, draw_circle, draw_rect, draw_arc, draw_polyline, draw_text, draw_dimension
- move, copy, rotate, scale, mirror, trim, offset, delete
- create_layer, delete_layer, set_active_layer, toggle_layer_visibility
- insert_block, create_block, delete_block
- seating_row, seating_block, count_seats
- export_dxf, export_svg, export_pdf, import_dxf, import_svg
- undo, redo
- get_context (aktuelle Zeichnung, Selektion, Layer, Zoom)

**Guardrails:**
- Destruktive Operationen erfordern Bestätigung
- Function-Validation vor Ausführung
- Safety-Checks (nicht "Lösche alles" ohne Bestätigung)

**Context Injection:**
- Aktuelle Zeichnung (Summary, nicht alle Elemente)
- Selektion
- Aktive Ebene
- Zoom-Bereich
- Maßstab

---

## Phase 18: Plugin-System

**Anforderungen:** F-EXT-01 bis F-EXT-08

**Dateien:**
- `frontend/src/services/pluginRegistry.ts` – Plugin-Registration, Lifecycle, Isolation
- `frontend/src/types/plugin.types.ts` – Plugin-Manifest, Tool-API Interface
- `frontend/src/components/PluginSettings.tsx` – Plugin-Verwaltung UI

**Funktionen:**
- Plugin-Manifest (Name, Version, Dependencies)
- Tool-API (Zeichnen, Bearbeiten, Bibliothek, Export, UI)
- Plugin-Isolation (try-catch, kein Core-Crash)
- Aktivieren/Deaktivieren ohne Neustart
- Plugin-UI-Integration (Ribbon-Tabs, Panels, Dialoge)
- Laufzeit-Laden

---

## Phase 19: Theme & Responsive

**Anforderungen:** F-UI-05, F-UI-06, F-UI-10

**Dateien:**
- `frontend/src/contexts/ThemeContext.tsx` – Dark/Light Theme Toggle
- `frontend/src/styles/theme.css` – CSS Custom Properties für beide Themes
- Mobile Drawers aus Mockup übernehmen

**Funktionen:**
- Dark- und Light-Mode
- Responsive: Desktop ≥1280px (alle Panels)
- Mobile ≤768px: Hamburger-Drawer + Right-Tab-Bar + Slide-in Drawers
- Voice Input (Web Speech API, optional)

---

## Phase 20: Docker & Deployment

**Anforderungen:** NF-DEP-01 bis NF-DEP-05

**Dateien:**
- `docker-compose.yml` – ✅ Angelegt (frontend + backend)
- `frontend/Dockerfile` – ✅ Angelegt (Node build + nginx)
- `backend/Dockerfile` – ✅ Angelegt (Node + tsx)
- `docker-compose.coolify.yml` – Coolify-spezifische Config

**Deployment:**
- 2 Container: Frontend (nginx) + Backend (Node)
- SQLite als Volume
- WebSocket-Proxy via Traefik
- SSL via Let's Encrypt
- Env-Variablen: API_URL, API_KEY, DB_PATH, JWT_SECRET
- Coolify-kompatibel

---

## Phase 21: Tests & QA

**Anforderungen:** NF-PERF-01 bis NF-PERF-05, NF-SEC-01 bis NF-SEC-05

**Tests:**
- `frontend/src/tools/__tests__/` – Tool-Tests (Zeichnen, Bearbeiten)
- `backend/src/routes/__tests__/` – API-Tests
- `backend/src/auth/__tests__/` – Auth-Tests
- Performance-Benchmark: 50.000 Elemente bei 60fps
- Lighthouse-Score ≥ 80
- Security-Tests: Input-Validierung, CSRF, Auth

---

## Build-Reihenfolge

```
Phase 0  ✅ Setup
Phase 1  ⬜ Canvas Engine (RenderEngine, SnapEngine, SelectionEngine)
Phase 2  ⬜ UI-Gerüst (alle Komponenten nach Mockup)
Phase 3  ⬜ Zeichen-Tools (Line, Circle, Rect, Arc, Polyline, Polygon, Text, Dimension, Hatch)
Phase 4  ⬜ Bearbeitungs-Tools (Move, Copy, Rotate, Scale, Mirror, Trim, Extend, Fillet, Offset, Delete)
Phase 5  ⬜ Auswahl & Snap (Selection, Snap-Modes, Ortho, Polar)
Phase 6  ⬜ Layer-System (Tree, Eigenschaften, Operationen)
Phase 7  ⬜ Block-Bibliothek (Tree, SVG-Import, Drag-and-Drop, Definition/Referenz)
Phase 8  ⬜ Bestuhlungs-Tools (Reihe, Block, Tisch, Bühne, Zählung)
Phase 9  ⬜ Bemaßung & Text (Linear, Winkel, Radial, MTEXT, Leader, RevCloud)
Phase 10 ⬜ Hintergrund (Laden, Maßstab, Positionieren)
Phase 11 ⬜ Undo/Redo (History-Stack, Zwischenablage)
Phase 12 ⬜ Command Line (Befehlseingabe, Autovervollständigung, Shortcuts)
Phase 13 ⬜ Import/Export (DXF, SVG, PDF, PNG, JSON)
Phase 14 ⬜ Backend & REST-API (Fastify, SQLite, CRUD, OpenAPI)
Phase 15 ⬜ Auth (Login, Register, Rollen, Sessions)
Phase 16 ⬜ Multi-User (Yjs, WebSocket, Cursor, Awareness, Offline)
Phase 17 ⬜ KI Copilot (Function Calling, Context, Guardrails)
Phase 18 ⬜ Plugin-System (Manifest, API, Isolation, UI)
Phase 19 ⬜ Theme & Responsive (Dark/Light, Mobile Drawers)
Phase 20 ⬜ Docker & Deployment (Coolify, SSL, Env)
Phase 21 ⬜ Tests & QA (Unit, Integration, Performance, Security)
```

---

## Verzeichnis-Struktur (Final)

```
web-cad-neu/
├── package.json
├── docker-compose.yml
├── docker-compose.coolify.yml
├── .gitignore
├── README.md
├── BAUPLAN.md
├── mockup/                    # UI-Referenz (Iteration 9)
│   ├── editor.html
│   └── assets/
├── frontend/
│   ├── package.json
│   ├── tsconfig.json
│   ├── vite.config.ts
│   ├── Dockerfile
│   ├── nginx.conf
│   ├── index.html
│   └── src/
│       ├── main.tsx
│       ├── App.tsx
│       ├── types/
│       │   ├── cad.types.ts
│       │   └── plugin.types.ts
│       ├── canvas/
│       │   ├── RenderEngine.ts
│       │   ├── SpatialIndex.ts
│       │   ├── ZoomPanController.ts
│       │   └── LayerManager.ts
│       ├── interaction/
│       │   ├── SnapEngine.ts
│       │   ├── SelectionEngine.ts
│       │   └── index.ts
│       ├── tools/
│       │   ├── Tool.ts
│       │   ├── ToolManager.ts
│       │   ├── drawing/
│       │   │   ├── LineTool.ts
│       │   │   ├── PolylineTool.ts
│       │   │   ├── RectTool.ts
│       │   │   ├── CircleTool.ts
│       │   │   ├── ArcTool.ts
│       │   │   ├── PolygonTool.ts
│       │   │   ├── TextTool.ts
│       │   │   ├── DimensionTool.ts
│       │   │   ├── HatchTool.ts
│       │   │   ├── ChairTool.ts
│       │   │   ├── SeatingRowTool.ts
│       │   │   ├── SeatingBlockTool.ts
│       │   │   ├── TableTool.ts
│       │   │   ├── StageTool.ts
│       │   │   └── index.ts
│       │   └── modification/
│       │       ├── MoveTool.ts
│       │       ├── CopyTool.ts
│       │       ├── RotateTool.ts
│       │       ├── ScaleTool.ts
│       │       ├── MirrorTool.ts
│       │       ├── TrimTool.ts
│       │       ├── ExtendTool.ts
│       │       ├── FilletTool.ts
│       │       ├── OffsetTool.ts
│       │       ├── DeleteTool.ts
│       │       └── index.ts
│       ├── components/
│       │   ├── Topbar.tsx
│       │   ├── RibbonBar.tsx
│       │   ├── LeftSidebar.tsx
│       │   ├── CanvasArea.tsx
│       │   ├── RightSidebar.tsx
│       │   ├── CommandLine.tsx
│       │   ├── StatusBar.tsx
│       │   ├── LayerPanel.tsx
│       │   ├── BlockLibrary.tsx
│       │   ├── KICopilot.tsx
│       │   ├── TreeView.tsx
│       │   ├── MobileDrawers.tsx
│       │   ├── PropertiesPanel/
│       │   │   └── PropertiesPanel.tsx
│       │   └── pages/
│       │       ├── Login.tsx
│       │       ├── Register.tsx
│       │       └── Dashboard.tsx
│       ├── services/
│       │   ├── api.ts
│       │   ├── blockService.ts
│       │   ├── importService.ts
│       │   ├── exportService.ts
│       │   ├── backgroundService.ts
│       │   ├── aiService.ts
│       │   ├── functionRegistry.ts
│       │   ├── commandRegistry.ts
│       │   └── pluginRegistry.ts
│       ├── history/
│       │   ├── HistoryManager.ts
│       │   └── index.ts
│       ├── crdt/
│       │   ├── YjsDocument.ts
│       │   ├── WebSocketProvider.ts
│       │   ├── AwarenessManager.ts
│       │   └── useYjsBinding.ts
│       ├── contexts/
│       │   ├── AuthContext.tsx
│       │   └── ThemeContext.tsx
│       └── styles/
│           ├── theme.css
│           ├── layout.css
│           └── styles.css
├── backend/
│   ├── package.json
│   ├── tsconfig.json
│   ├── Dockerfile
│   └── src/
│       ├── index.ts
│       ├── server.ts
│       ├── auth/
│       │   ├── AuthService.ts
│       │   └── authPlugin.ts
│       ├── database/
│       │   ├── DatabaseInterface.ts
│       │   ├── SqliteAdapter.ts
│       │   ├── schema.sql
│       │   └── migrations.ts
│       ├── routes/
│       │   ├── index.ts
│       │   ├── auth.ts
│       │   ├── projects.ts
│       │   ├── drawings.ts
│       │   ├── layers.ts
│       │   ├── elements.ts
│       │   ├── blocks.ts
│       │   ├── export.ts
│       │   ├── import.ts
│       │   ├── settings.ts
│       │   ├── users.ts
│       │   └── ai.ts
│       └── websocket/
│           └── yjsServer.ts
└── specs/
    └── requirements.md      # Kopie des Pflichtenhefts
```