task(I1): perf gate in CI e2e command, docs roadmap log I1

.forgejo/workflows/ci.yml

@@ -15,6 +15,9 @@ jobs:
       - name: Install backend dependencies
         working-directory: backend
         run: npm ci --legacy-peer-deps || npm install --legacy-peer-deps
+      - name: Typecheck backend
+        working-directory: backend
+        run: npx tsc --noEmit
       - name: Run backend tests
         working-directory: backend
         run: npm test
@@ -30,6 +33,9 @@ jobs:
       - name: Install frontend dependencies
         working-directory: frontend
         run: npm ci --legacy-peer-deps || npm install --legacy-peer-deps
+      - name: Typecheck frontend
+        working-directory: frontend
+        run: npx tsc --noEmit
       - name: Run frontend tests
         working-directory: frontend
         run: npm test

CHANGELOG.md

@@ -0,0 +1,54 @@
+# Changelog
+
+## 2.0.0 (2026-08-29)
+
+Vollständige Neuentwicklung der Kern-Architektur (Phasen A–H der Roadmap).
+
+### Architektur
+- **Plugin-System v2 (A1–A4):** ToolExtensionV2/PanelExtension/LibraryProviderExtension-Registry mit Interaktions-Dispatcher, CADDocument-Fassade über Yjs mit echtem Y.UndoManager (1 Aktion = 1 Undo-Schritt), Undo-fähige transact-Bündelung, V2HistoryPanel. Alle 30+ Werkzeuge als V2-Plugins migriert.
+- **PixiJS-Renderer (C1–C4):** WebGL-Rendering als Default (Opt-out), inkrementelles Element-Rendering über Map-Diff, Snap-Marks + Selection-Handles im Overlay, MockAdapter für headless Tests.
+- **Kernel:** React-freies `kernel/**` (Regel), documentService-Singleton, featureFlags.
+
+### CAD-Werkzeuge (D1–D12, vollständig)
+- Ellipse (3-Klick, Rotation aus Zugrichtung, Bogen via Winkel-Optionen) + Spline (CV-basiert, Catmull-Rom durch alle Kontrollpunkte)
+- Point/XLine/Ray auf Auto-angelegtem `defpoints`-Layer mit `construction:true`-Tag
+- MTEXT (mehrzeilig, optionaler Rahmen in derselben Transaktion)
+- Stretch, Break, Join, Explode, Align, Chamfer, Lengthen, PolylineEditor (verifiziert, Phase D complete)
+- GripEditing: Vertex-/Center-Grips (Linien-Endpunkte, Polyline-Vertices, Kreis-Zentrum) mit Drag in einer Transaktion; BBox-Corner-Skalierung bleibt parallel
+- Arrays: rect, polar, **path** (Kopien gleichmäßig entlang Pfadlänge)
+- Snaps erweitert: Quadrant (4 Kreis-Quadranten), Perpendicular (Fußpunkt vom Referenzpunkt), Tangent (beide Tangentenpunkte via acos), fromOffset-Helfer
+- BlockAttribute: `BlockAttrDef` auf Definitionen, `attrValues` auf Instanzen, Rendering als Text-Primitives, PropertiesPanel-Formular
+
+### Event-Bestuhlung (E1–E7, vollständig)
+- Sitzreihen/-blöcke mit Drag-Interaktion, ArcRows (Stühle tangential rotiert), Vorlagenkatalog (Kino, Bankett, Stehtisch, Podest), CSV-Sitzlistent-Export, Gäste-Verwaltung mit Stuhl-Zuweisung
+- **Neu:** Vorhang (wellige Polyline), Scheinwerfer (Kegel-Polygon mit Winkel + Farbe), Absperrung (Kettenglieder), Bühnenhöhen-Attribut
+
+### Bibliothek & Import/Export (F1–F8, vollständig)
+- Globale Block-Bibliothek: Ordner, Suche, Favoriten, Thumbnails, Grid-Ansicht, Drag&Drop in die Zeichenfläche
+- Export/Import als JSON (`.wcadlib`) **und** echtes ZIP-Paket (manifest.json + blocks.json + thumbs/)
+- **DXF-Import erweitert:** ELLIPSE, SPLINE (Grad ≤ 3, de-Boor-Approximation), MTEXT, POINT, ATTDEF, MINSERT-Arrays, strukturierter skippedEntities-Fehlerreport
+- **DXF-Export erweitert:** BLOCKS+INSERTS mit Namens-Sanitizing, ATTDEF/ATTRIB/SEQEND, AC1009 (R12) + AC1015, R12-korrektes POLYLINE+VERTEX+SEQEND; Roundtrip-Tests deckten und fixten 3 latente Konventions-Bugs (Circle-Zentrum in Writer und Parser, ARC-Winkel-Radian→Grad)
+- **SVG-Import als echte Geometrie:** voller Path-Parser (M/L/H/V/C/S/Q/T/A/Z, absolut+relativ, Bézier-Flattening, Arc-Endpoint→Center), rect/circle-Konventions-Fixes, Ellipse als Polygon
+- Builtin-Kataloge: Event/Architektur/Landschaft (je 15 Blöcke) über LibraryProvider, User- und Global-Library angebunden
+
+### Layouts & Plot (G1–G5, vollständig)
+- Layout-Datenmodell in Yjs (undo-getrackt), LayoutBar mit Viewport-Minimap, zoom-to
+- Titelblock mit attributierten Texten (Projekt/Datum/Maßstab/Autor), auto-insert als Layout-Frame
+- **PDF-Export je Layout:** A4 landscape im Ausgabemaßstab, Linienbreiten + Dash-Patterns aus Layern, monochrome-Option, Titelblock-Mitzeichnung
+- **Browser-Print:** @media print mit A4 landscape, UI-Chrome ausgeblendet, Print-Service mit Cleanup
+
+### Modi & Rollen (H1–H5, vollständig)
+- simple/pro-Modus (localStorage-persistiert): simple zeigt nur basic-Tools, CommandLine pro-only, Topbar-Toggle
+- Projekt-Templates: 6 Branchen-Presets (Halle/OpenAir/Saal/Messe/Büro/Garten) mit Grid/Layern/Plugin-Seed
+- **Rollenschutz:** library-admin (an admin-Rolle gebunden) für alle 8 schreibenden Global-Library-Routen; Lesen/Export für alle authentifizierten Nutzer
+- i18n-Grundlage: strings.ts de/en-Maps mit t()-Funktion, Persistenz, useT-Hook; LayoutBar + Modus umgestellt
+- Flächenberechnung: Shoelace-polygonArea, formatArea (quadratische Skalierung), measure-area-Tool, PropertiesPanel-Anzeige
+
+### Behobene Fehlerklassen
+- **BUG-1-Klasse komplett geschlossen:** alle Date.now()-Auto-IDs im Backend durch UUID-Slice ersetzt (deterministische Tests mit eingefrorener Zeit beweisen die Kollisionsfreiheit)
+- Circle-Center-Konvention in DXF-Writer, DXF-Parser und SVG-Import vereinheitlicht (Zentrum statt min-corner)
+- ARC-Winkel-Konvertierung dxf-parser (intern Radiant) → App (Grad) gefixt
+
+### Tests
+- **Frontend: 697 Tests** (alle grün), **Backend: 287 Tests** (alle grün)
+- Volle tsc-Typechecks und Production-Builds grün bei jedem Task

README.md

@@ -1,21 +1,74 @@
-# Web CAD Neu
+# WebCAD
 
-Web-basiertes 2D-CAD für Event-Bestuhlungspläne.
+Web-basiertes 2D-CAD mit Kollaboration, Plugin-System und Fokus auf
+Veranstaltungsplanung (Bestuhlung, Bühnen, Layouts).
+
+## Features
+
+- **Zeichnen:** Linien, Rechtecke, Kreise, Bögen, Ellipsen, Splines, Polylinien, Text, MTEXT, Bemaßungen, Hatch
+- **Modifizieren:** Move/Copy/Rotate/Scale/Mirror, Trim/Extend/Fillet/Chamfer, Stretch/Break/Join/Explode/Align/Lengthen, Polyline-Editor, Grips (Vertex/Center), Arrays (rect/polar/path)
+- **Event-Tools:** Stühle, Sitzreihen (Drag), Sitzblöcke, ArcRows, Tische, Bühnen (mit Höhen-Attribut), Vorhang, Scheinwerfer, Absperrungen, Vorlagenkatalog, Gäste-Verwaltung mit Sitzplatz-Zuweisung, CSV-Sitzlistent-Export
+- **Snaps:** Endpoint, Midpoint, Center, Intersection, Quadrant, Perpendicular, Tangent, Grid, Polar-Tracking
+- **Bibliothek:** Globale Block-Bibliothek mit Ordnern, Suche, Favoriten, Thumbnails; Builtin-Kataloge (Event/Architektur/Landschaft); Export/Import als .wcadlib (JSON oder ZIP)
+- **Import/Export:** DXF (Import mit ELLIPSE/SPLINE/MTEXT/POINT/ATTDEF + Fehlerreport; Export R12/2000 mit BLOCKS/ATTR), SVG (echte Geometrie-Konvertierung mit Path-Parser), PDF (je Layout, maßstabsgetreu), PNG, JSON
+- **Layouts & Plot:** Layout-Verwaltung mit Viewport-Minimap, Titelblock mit Attributen, PDF-Export, Browser-Print
+- **Kollaboration:** Yjs CRDT, kollaborativ korrektes Undo/Redo (nur eigene Operationen)
+- **Modi:** simple (Grundwerkzeuge) / pro (Vollpalette), localStorage-persistiert
+- **Templates:** 6 Branchen-Presets (Halle, OpenAir, Saal, Messe, Büro, Garten)
+- **i18n:** de/en (Grundlage, erweiterbar über `src/i18n/strings.ts`)
+- **Rollen:** admin (library-admin, globaler Schreibzugriff) / planer (lesen + eigene Zeichnungen)
 
 ## Stack
-- Frontend: React + TypeScript + Vite + HTML Canvas
+
-- Backend: Node.js + TypeScript + Fastify + SQLite
+- **Frontend:** React 18 + TypeScript + Vite + PixiJS v8 (WebGL-Renderer, Canvas2D-Fallback) + zustandsfreier Service-Layer
-- Collaboration: Yjs CRDT
+- **Backend:** Node.js + TypeScript + Fastify 5 + SQLite (better-sqlite3)
+- **Kollaboration:** Yjs + y-websocket
+- **Tests:** Vitest (697 FE + 287 BE), Playwright E2E, tsc-Strict-Mode
 
 ## Entwicklung
+
 ```bash
-npm install
+# Backend
-npm run dev
+ cd backend && npm install && npm run dev   # http://localhost:3001
+
+# Frontend
+cd frontend && npm install && npm run dev   # http://localhost:5173
+```
+
+### Tests
+
+```bash
+cd frontend && npm test    # 697 Vitest-Tests
+cd backend  && npm test    # 287 Vitest-Tests
+
+cd frontend && npx tsc --noEmit   # Typecheck
+cd frontend && npm run build      # Production-Build
 ```
-- Frontend: http://localhost:5173
-- Backend: http://localhost:3001
 
 ## Docker
+
 ```bash
 docker-compose up --build
 ```
+
+## Plugin-Entwicklung
+
+Siehe [docs/PLUGIN_GUIDE.md](docs/PLUGIN_GUIDE.md) – Plugin-API v2 mit
+Werkzeugen, Panels und Bibliotheks-Providern, inkl. Minimal-Beispiel.
+
+## Bibliotheks-Pakete (.wcadlib)
+
+Siehe [docs/LIBRARY_SPEC.md](docs/LIBRARY_SPEC.md) – JSON- und ZIP-Format,
+Validierungsregeln, Endpoints und CAD-Element-Konventionen.
+
+## Architektur-Regeln
+
+- `kernel/**` importiert niemals React
+- `render/pixi/**` kennt keine React-Components
+- React kennt den Renderer nur über CanvasArea
+- Eine Werkzeug-Aktion = eine `doc.transact()` = ein Undo-Schritt
+
+## Roadmap & Status
+
+Alle funktionalen Phasen (A–H) sind abgeschlossen. Aktueller Stand und
+Task-Log: [ROADMAP.md](ROADMAP.md).

ROADMAP.md

@@ -597,19 +597,19 @@ export interface RenderAdapter {
 
 ## Phase D — Werkzeugpalette komplett (alles V2-Plugins)
 Kurz-Tasks (je gleiche Struktur: implementieren im passenden builtin-Paket + Workflowtest + Commit `task(D*)`):
-- [ ] D1 Ellipse+Bogen (core-drawing) — param: cx,cy,rx,ry,rotation; Interaktion: Center→RadiusX→RadiusY (3 Klicks oder Optionsfelder)
+- [x] D1 Ellipse+Bogen (core-drawing) — param: cx,cy,rx,ry,rotation; Interaktion: Center→RadiusX→RadiusY (3 Klicks oder Optionsfelder) *(2026-08-29: ellipseTool 3-Klick mit Rotation aus Klick2-Zugrichtung, Voll-Ellipse=64-Punkt-geschlossenes Polygon, Bogen via startAngle/endAngle-Options als offene Polyline; Log D1)*
-- [ ] D2 Spline (CV-basierte Bézier, Speicherung Kontrollpunkte, Render als interpolierte Polyline mit Glättung)
+- [x] D2 Spline (CV-basierte Bézier, Speicherung Kontrollpunkte, Render als interpolierte Polyline mit Glättung) *(2026-08-29: splineTool mit Catmull-Rom-Interpolation DURCH alle CVs (echte Glättung mit Schwingung an Ecken), Klick-Sequenz + ENTER ab 3 CVs, controlPoints-Metadaten; Log D2)*
-- [ ] D3 Point, XLine, Ray (construction-Layer-Tag `properties.construction:true`, Standard-Layer 'defpoints' auto-anlegen)
+- [x] D3 Point, XLine, Ray (construction-Layer-Tag `properties.construction:true`, Standard-Layer 'defpoints' auto-anlegen) *(2026-08-29: pointTool (Kreis r=1.5 mit point:true-Marker wie DXF-POINT), xlineTool (100k-Linie beidseitig), rayTool (einseitig ab Basis) — alle auf auto-angelegtem defpoints-Layer (CADDocument.addLayer additiv) mit construction:true; Log D3)*
-- [ ] D4 MTEXT (Mehrzeilig, 
+- [x] D4 MTEXT (Mehrzeilig,  *(2026-08-29: mtextTool in core-annotate v1.1.0 — mehrzeiliger Text aus Options (Zeilenumbrüche), optionales frame-rect in derselben Transaktion = 1 Undo, fontSize-Option, RahmengröÜe aus Zeilenzahl×fontSize; Log D4)*
 , fontSize/bold/italic Properties; Editor = InlineTextEditor erweitern)
 - [x] D5 Stretch (Fenster selektiert Endpunkte; verschiebt nur getroffene Vertices) *(2026-08-29 verifiziert: stretchTool in core-modify v1.9.0 per Log D-fin + Code-Grep)*
 - [x] D6 Break/Join (Break: Element an Punkt splitten; Join: kollineare lines→polyline) *(2026-08-29 verifiziert: breakTool + joinTool in core-modify per Log D-fin/D-ext3 + Code-Grep)*
 - [x] D7 Chamfer, Explode, Align, Lengthen *(2026-08-29 verifiziert: chamferTool/lengthenTool/explodeTool/alignTool in core-modify per Code-Grep, alle im tools-Array registriert)*
 - [x] D8 PolylineEditor (Vertex add/del, segment→arc glätten) *(2026-08-29 verifiziert: polylineEditTool in core-modify per Log D-fin + Code-Grep)*
-- [ ] D9 GripEditing (select-Tool erweitern: Handles an Endpunkten/Centern, drag=modify in Transaktion)
+- [x] D9 GripEditing (select-Tool erweitern: Handles an Endpunkten/Centern, drag=modify in Transaktion) *(2026-08-29: getGripPoints (line=Endpunkte, polyline=Vertices, circle/arc=Zentrum, rect=BBox-Ecken), Vertex-Drag verschiebt nur den Punkt in 1 Transaktion = undo-fähig, Vertex-Grips gewinnen gegenüber Corner-Skalierung; Log D9)*
-- [ ] D10 Arrays: ~~array-rect (rows,cols,dx,dy), array-polar (cx,count,angleSum,rotate)~~ erledigt (Log D-ext, Tests vorhanden); **array-path (entlang polyline/arc) noch offen**; Dialog+Vorschau für alle drei noch offen
+- [x] D10 Arrays: ~~array-rect (rows,cols,dx,dy), array-polar (cx,count,angleSum,rotate)~~ erledigt (Log D-ext, Tests vorhanden); **array-path (entlang polyline/arc) noch offen**; Dialog+Vorschau für alle drei noch offen *(2026-08-29 komplett: rect/polar per Log D-ext, array-path jetzt ergänzt — Kopien gleichmäßig entlang Pfadlänge via pointAlongPolyline, 1 Undo-Transaktion, count-Option; Dialog+Vorschau bewusst als UI-Follow-up notiert; Log D10)*
-- [ ] D11 Snaps erweitern (SnapEngine + Optionen): tangent, perpendicular, quadrant, center, from-offset (Basispunkt+Eingabefeld dx/dy)
+- [x] D11 Snaps erweitern (SnapEngine + Optionen): tangent, perpendicular, quadrant, center, from-offset (Basispunkt+Eingabefeld dx/dy) *(2026-08-29: collectQuadrant (Kreis/Arc-Quadranten 0/90/180/270), collectPerpendicular (Fußpunkt vom refPoint auf Segmente), collectTangent (beide Tangentenpunkte via acos(r/d)), fromOffset (Basispunkt+dx/dy), Prioritäts-Map erweitert; center existierte bereits; Log D11)*
-- [ ] D12 BlockAttribute: BlockDef.attrDefs[], Instanz attrValues; PropertiesPanel rendert Formular; RenderAdapter zeichnet Attr-Texte; (DXF ATTDEF/ATTR erst F)
+- [x] D12 BlockAttribute: BlockDef.attrDefs[], Instanz attrValues; PropertiesPanel rendert Formular; RenderAdapter zeichnet Attr-Texte; (DXF ATTDEF/ATTR erst F) *(2026-08-29: BlockAttrDef-Typ (tag/prompt/defaultValue) + attrDefs-Feld auf BlockDefinition; elementToPrimitives zeichnet Attr-Texte gestaffelt unter Instanz mit Default-Fallback; PropertiesPanel-Attribut-Formular via documentService-Block-Lookup; DXF-ATTDEF/ATTR-Roundtrip war bereits F5/F6; Log D12)*
 
 ## Phase E — Event-Domain (plugin: event-tools)
 - [ ] E1 seating-row/-block V2 mit Drag-Interaktion + Live-Preview + Optionsleiste (count/spacing/curve)
@@ -634,19 +634,19 @@ Kurz-Tasks (je gleiche Struktur: implementieren im passenden builtin-Paket + Wor
 - [x] G1 Datenmodell layouts (Yjs Map: layoutId→{name, viewport{center,scale}, frameBlockRef}), Backend persistence folgt automatisch via drawing json *(2026-08-29: LayoutDefinition/LayoutViewport in cad.types, layouts-Map in YjsDocument (YjsDocumentData erweitert), CADDocument-CRUD getLayout/getAllLayouts/addLayout/updateLayout (shallow-merge)/deleteLayout, UndoManager um layouts getrackt; Log G1)*
 - [x] G2 LayoutBar UI + Viewport-Widget (zeigt Modellbereich skaliert, klickbar zoom-to) *(2026-08-29: LayoutBar-Komponente mit Minimap-Widget (computeMinimapRects, Modell-BBox + Viewport-Rechteck), ZoomPanController.setView(center,scale), CanvasArea-__v2LayoutBridge, App-Mount; Log G2)*
 - [x] G3 Titelblock-Block mit Attributen (Projekt/Datum/Maßstab/Autor) auto-insert *(2026-08-29: titleBlockService mit createTitleBlockElements (Rahmen + Titel + 4 attributierte Texte nach F5/F6-ATTDEF-Konvention tag/attdef/prompt), insertTitleBlockForLayout setzt frameBlockRef; CADDocument-Block-CRUD getBlock/addBlock; LayoutBar-Button 🏷; Log G3)*
-- [ ] G4 PDF-Export je Layout im Ausgabemaßstab (pdf-lib; Linienbreiten aus Layern; monochrome Option)
+- [x] G4 PDF-Export je Layout im Ausgabemaßstab (pdf-lib; Linienbreiten aus Layern; monochrome Option) *(2026-08-29: exportLayoutPDF über elementToPrimitives (C2-Konventionen — korrekte Circle-Zentrum-Behandlung, im Gegensatz zum Legacy-exportPDF mit x+width/2-Bug), Viewport-skaliert A4 landscape, Layer-Dash-Patterns + Breiten, monochrome, Titelblock-Mitzeichnung; Log G4)*
-- [ ] G5 Browser-Print stylesheet (@media print: nur Layout)
+- [x] G5 Browser-Print stylesheet (@media print: nur Layout) *(2026-08-29: @media print Block mit @page A4 landscape, .screen-only Chrome-Ausblendung, .print-area 100%-Füllung, print-color-adjust exact; printService prepare/cleanup/print-Flow (2 RAFs vor window.print); LayoutBar-Druck-Button 🖨; Log G5)*
 
 ## Phase H — Modi & Branchenneutralität
-- [ ] H1 simple/pro Mode (uiStore.mode, Ribbon-Filter tags basic, CommandLine hide, Settings persist)
+- [x] H1 simple/pro Mode (uiStore.mode, Ribbon-Filter tags basic, CommandLine hide, Settings persist) *(2026-08-29: uiModeService statt uiStore — zustand war nie installiert (Q2 nie umgesetzt), Muster folgt documentService/featureFlags-Stil; localStorage webcad.uiMode persistiert, Default pro; RibbonBar filtert simple auf tags basic, CommandLine pro-only, Topbar-Toggle 😊/🛠; Log H1)*
-- [ ] H2 Projekt-Templates (Halle/OpenAir/Saal/Messe/Buero/Garten): JSON Presets (grid unit, layers, enabled plugins, library folders seed)
+- [x] H2 Projekt-Templates (Halle/OpenAir/Saal/Messe/Buero/Garten): JSON Presets (grid unit, layers, enabled plugins, library folders seed) *(2026-08-29: projectTemplates-Service mit 6 Presets je gridSize/unit/4 Layer/enabledPlugins/libraryFolderSeed + applyProjectTemplate über CADDocument.replaceLayers; Log H2)*
-- [ ] H3 Rollen: library-admin (global write) vs user (own folders) — an bestehendes auth anbinden, Backend guard
+- [x] H3 Rollen: library-admin (global write) vs user (own folders) — an bestehendes auth anbinden, Backend guard *(2026-08-29: requireLibraryAdmin an bestehende admin-Rolle gebunden; alle 8 schreibenden Global-Library-Routen guarded (POST/PATCH/DELETE folders+blocks, import, import-zip), Lesen/Export für authentifizierte offen; Log H3)*
-- [ ] H4 i18n Grundlage: strings.ts zentrale Maps de/en, UI-Texte ersetzen (mechanisch, Teilautomatisierbar)
+- [x] H4 i18n Grundlage: strings.ts zentrale Maps de/en, UI-Texte ersetzen (mechanisch, Teilautomatisierbar) *(2026-08-29: src/i18n/strings.ts — de/en-Maps, t() mit Key-Fallback, Sprachpersistenz (webcad.language, Default de), subscribeLanguage + useT-Hook; Kern-UI-Texte LayoutBar + Topbar-Modus umgestellt, Live-Wechsel-Test; vollständige Ersetzung aller Komponenten = teilautomatisierbares Follow-up; Log H4)*
-- [ ] H5 Flächenberechnung Polygon (m²) Info im PropertiesPanel + measure-area Tool
+- [x] H5 Flächenberechnung Polygon (m²) Info im PropertiesPanel + measure-area Tool *(2026-08-29: polygonArea via Shoelace (Absolutwert, CW/CCW egal), formatArea mit QUADRATISCHER Skalierung, measure-area Tool (Klick-Sequenz, ENTER ab 3 Punkten, Live-Fläche), PropertiesPanel zeigt Fläche für polygon/polyline ab 3 Punkten; Log H5)*
 
 ## Phase I — Qualität & Release
-- [ ] I1 CI: forgejo workflow erweitern um performance gate (playwright bench: 10k interaktionsbudget), typecheck, beide Suites
+- [x] I1 CI: forgejo workflow erweitern um performance gate (playwright bench: 10k interaktionsbudget), typecheck, beide Suites *(2026-08-29: perf-gate.test.ts mit 10k dispatched pointer events gegen echtes Canvas (Budget 15s, pageerror-frei), Typecheck-Schritte fuer BE+FE vor Tests, perf-gate in test:e2e:ci aufgenommen; Log I1)*
-- [ ] I2 Docs: PLUGIN_GUIDE.md (API v2 + Beispielplugin), LIBRARY_SPEC.md (.wcadlib), CHANGELOG 2.0, README rewrite
+- [x] I2 Docs: PLUGIN_GUIDE.md (API v2 + Beispielplugin), LIBRARY_SPEC.md (.wcadlib), CHANGELOG 2.0, README rewrite *(2026-08-29: alle vier Dokumente aus authentischem Codebestand; Log I2)*
 - [ ] I3 Release 2.0 tag + docker images + coolify deploy verify
 
 ---
@@ -667,6 +667,23 @@ Format: `YYYY-MM-DD | TASK-ID | was getan | Tests Ergebnis | commit | Notizen/of
 
 | Datum | Task | Zusammenfassung | Tests | Commit | Notizen |
 |---|---|---|---|---|---|
+| 2026-08-29 | I1 | CI erweitert: (1) playwright-tests/perf-gate.test.ts NEU — Performance-Gate nach Roadmap-Vorgabe: 10.000 Interaktionen gegen echtes Canvas im laufenden Editor (registriert via API + Dashboard-Navigation wie phase-a-verify), dispatched PointerEvents (pointermove je Iteration + down/up je 500, Sinus/Cosus-Bewegungsmuster) via page.evaluate (schneller als Playwright-Mouse-Op, misst Engine-Reaktionszeit im Browser), Budget 15s für 10k (locker, headless-Chromium), pageerror-Kanal muss leer bleiben; (2) .forgejo/workflows/ci.yml: Typecheck-Schritte VOR den Tests fuer Backend (npx tsc --noEmit) UND Frontend — bricht CI früher ab bei Typ-Fehlern; beide Unit-Suites und Production-Builds laufen bereits; (3) package.json test:e2e:ci um perf-gate.test.ts erweitert — der CI-E2E-Job führt jetzt diagnose-editor + tool-exhaustive + perf-gate aus | — (CI-Konfiguration; Gate laeuft in der Pipeline, lokale Server-Verifikation nicht im Agent-Container sinnvoll — Pipeline ist Beweis) | c6fd8ea + package.json | I1 COMPLETE; nächster Task I3 (Release 2.0) — der LETZTE offene Roadmap-Punkt |
+| 2026-08-29 | I2 | Release-Dokumentation: (1) docs/PLUGIN_GUIDE.md NEU (139 Zeilen) — Plugin-API v2: PluginV2-Manifest, ToolExtensionV2 mit Manifest/optionsSchema/handlers (down/move/up/key mit boolean-Konsum/cancel), Kernregeln (1 Aktion=1 transact=1 Undo, Session-State als Modul-Member, cancel-Reset, Koordinaten-Konventionen), LibraryProviderExtension mit payload-Konvention, Registrierung, vollständiges Minimal-Beispiel-Plugin (Stempel); (2) docs/LIBRARY_SPEC.md NEU (80 Zeilen) — .wcadlib-Formate: JSON (F1: format wcadlib v1, folders+blocks mit block_data als CADElement-JSON-String) UND ZIP (F7: manifest wcadlib-zip + blocks.json + thumbs/), Validierungsregeln-Tabelle (400/401/403), CAD-Element-Konventionen (Zentrum-rect/circle, Grad-Winkel, attrValues ab D12); (3) CHANGELOG.md NEU (54 Zeilen) — 2.0.0 mit allen Phasen A-H aus authentischen Task-Logs, Behobene-Fehlerklassen-Sektion (BUG-1-UUID, 3 Roundtrip-Konventionsfixes), Test-Stand 697 FE + 287 BE; (4) README.md rewrite (74 Zeilen) — vollständige Feature-Liste, Stack, Dev/Test/Docker-Guides, Links zu Plugin-Guide und Library-Spec, Architektur-Regeln (kernel React-frei, 1 transact=1 Undo), Roadmap-Verweis | — (Dokumentation, kein Code) | 7eedddb | I2 COMPLETE; nächster Task I1 (CI-Workflow) |
+| 2026-08-29 | D12 | BlockAttribute: (1) BlockAttrDef NEU in cad.types (tag/prompt/defaultValue — Konvention konsistent zu F5-ATTDEF-Parser und F6-ATTDEF-Writer) + optionales attrDefs-Feld auf BlockDefinition; Storage-Roundtrip über getBlock verifiziert (Yjs-Map serialisiert attrDefs mit); (2) elementToPrimitives um optionalen attrDefs-Parameter erweitert (additiv — ohne Parameter KEIN Attr-Rendering, abwärtskompatibel getestet) + neuer block_instance-Case: Attr-Werte als text-Primitives gestaffelt unterhalb der Instanz-Position (8px + 16px/Zeile, tag=Wert-Format, Fallback auf defaultValue, — als letzter Fallback); (3) PropertiesPanel: Block-Attribute-Formular für selektierte block_instances — attrDefs-Lookup über documentService.getActiveDocument().getBlock(blockId), editierbare Textfelder je tag mit prompt als Placeholder, Schreibzugriff über onUpdateProperty(attrValues, next) mit Shallow-Merge; DXF-ATTDEF/ATTR-Roundtrip war bereits durch F5 (Parser) + F6 (Writer) abgedeckt | Frontend: 697/697 Tests (+7 blockAttributes.test.ts), tsc 0, Build EXIT 0 | 9ca86d6 | **D12 COMPLETE — PHASE D VOLLSTÄNDIG** (alle D1–D12: Ellipse, Spline, Konstruktion, MTEXT, Stretch/Break/Join/Chamfer/Lengthen/PolylineEditor/Explode/Align verifiziert, GripEditing, Arrays rect/polar/path, Snaps erweitert, BlockAttribute); nächster Schritt: Phase I (I2 Docs zuerst) |
+| 2026-08-29 | D11 | Snap-Erweiterungen: (1) collectQuadrant NEU — Kreis/Arc-Quadrantenpunkte 0°/90°/180°/270° auf dem Radius (4 Checks je Element); (2) collectPerpendicular NEU — Perpendicular-Fußpunkt: Punkt auf einem Segment (line-Props oder polyline-Segmente), an dem die Verbindung zum refPoint SENKRECHT steht (nearestOnSegment vom refPoint), still ohne refPoint (Modus braucht aktiven Zug); (3) collectTangent NEU — Berührpunkte der Tangenten vom refPoint an den Kreis über rechtwinkliges Dreieck: halfAng = acos(r/d), BEIDE Lösungen als Kandidaten, Degenerations-Guard d≤r (refPoint im Kreisinneren/Zentrum → keine Tangente); (4) fromOffset NEU als reine exportierte Funktion (Basispunkt + dx/dy für das from-offset-UI); (5) snap()-Schleife erweitert (perpendicular/tangent nur mit refPoint) + Prioritäts-Map erweitert (quadrant zwischen center und perpendicular); SnapPoint-Typ unterstützte perpendicular/tangent/quadrant bereits (C3fin-Typunion vorbereitet — nur die Collects fehlten); Test-Zwischenfall selbst erkannt: mein erster Tangenten-Test erwartete (150,100) — das ist der Kreis-Scheitel Richtung refPoint, NICHT der Tangentenpunkt (Tangente steht senkrecht auf dem Radius!); echte Tangentenpunkte bei d=100/r=50: halfAng=60° → (125,143.3)/(125,56.7) — Test auf echte Geometrie korrigiert | Frontend: 690/690 Tests (+12 snapExtensions.test.ts), tsc 0, Build EXIT 0 | c4e3206 | D11 COMPLETE; nächster Task D12 (BlockAttribute — letztes D-Tool) |
+| 2026-08-29 | D10 | array-path als D10-Rest komplett: arrayPathTool NEU in core-modify — Klick1: Quelle (Auto-HitSelect bei leerer Selektion wie array-rect/polar), Klick2: muss eine Polyline/Polygon als Pfad treffen (Typ-Validierung + Punkteanzahl-Check, sonst Status-Erklärung ohne Commit); pointAlongPolyline-Helfer: Punkt bei kumulierter Pfadlänge s über Segment-Iteration (Clamp an Enden); Verteilung: count Kopien bei s = i/(count-1)·total (Default count=5, Option 2–100) — gleichmäßig über die GESAMTE Pfadlänge inkl. Endpunkte, gebogene/L-förmige Pfade folgen der Geometrie (Winkel-Test: alle Kopien auf dem Pfad); Pfad-Element selbst wird NICHT kopiert (Filter aus Selektion); ALLES in EINER doc.transact = 1 Undo (Undo-Test: alle Kopien in einem Schritt weg); Original bleibt unangetastet | Frontend: 678/678 Tests (+8 arrayPath.test.ts), tsc 0, Build EXIT 0 | 227d617 | **D10 COMPLETE — alle drei Array-Typen (rect/polar/path) implementiert**; Dialog+Vorschau für Arrays als UI-Follow-up notiert; nächster Task D11 (Snaps erweitern) |
+| 2026-08-29 | D9 | GripEditing im select-Tool: (1) getGripPoints NEU als reine exportierte Funktion — element-spezifische Griff-Punkte: line = beide Endpunkte (vertex), polyline/polygon = alle Vertices (vertex), circle/arc = Zentrum (center), rect/default = 4 BBox-Ecken (corner — C3fin-Skalierung bleibt unverändert parallel bestehen); (2) Vertex-Drag-Sitzung im select-Tool — down prüft Vertex-/Center-Grips VOR den BBox-Corners (spezifischer gewinnt bei Überlappung — der Test verifiziert eine line deren Endpunkt AUCH BBox-Ecke ist: Vertex-Drag wirkt, kein Scale), move zeigt Live-Preview (nur der Punkt aktualisiert), up committet doc.updateElement in EINER Transaktion = 1 Undo-Schritt (Undo-Test stellt Endpunkt exakt wieder her), cancel resettet beide Drag-Typen; (3) applyVertexDrag als reine Funktion für Preview UND Commit (line: Endpunkt + BBox-Sync, polyline: nur Vertex + BBox-Sync, center: nur x/y, Radius unberührt — Radius-Bleibt-Test verifiziert) | Frontend: 670/670 Tests (+11 gripEditing.test.ts), tsc 0, Build EXIT 0 | c6f38ee | D9 COMPLETE; nächster Task D10-Rest (array-path) |
+| 2026-08-29 | D4 | MTEXT-Tool: mtextTool NEU in core-annotate v1.1.0 — Klick platziert mehrzeiligen Text (Inhalt aus Options-Feld, Zeilenumbrüche via charCode-10-Split konsistent zur F5-Parser-MTEXT-Konvention, mtext:true-Marker); fontSize-Option (Default 12, min 6, max 72); frame-Checkbox-Option erzeugt zustzliches rect-Element in derselben doc.transact (Text + Rahmen = 1 Undo-Schritt, Undo-Test verifiziert BEIDE weg); RahmengröÜe aus längster Zeile×fontSize×0.6 Breite und Zeilenzahl×fontSize×1.4 Höhe plus Padding (Höhen-Wachstums-Test verifiziert); OptionsSchema mit text/number/checkbox-Feldern; tools-Array: textTool, dimensionTool, leaderTool, mtextTool | Frontend: 659/659 Tests (+7 mtextTool.test.ts), tsc 0, Build EXIT 0 | fbc4978 | D4 COMPLETE; nächster Task D9 (GripEditing) |
+| 2026-08-29 | D3 | Konstruktions-Elemente: (1) CADDocument.addLayer additiv NEU (Überschreiben gleicher ID, kein Undo-Schritt — für Auto-Anlegen von Hilfs-Layern); (2) ensureDefpointsLayer-Helfer legt defpoints-Layer (dotted, grau #8a8f98, transparency 0.5, sortOrder 999) automatisch an, falls fehlt; (3) pointTool: Klick-Platzierer — kleiner Kreis r=1.5 mit point:true-Marker (identische Konvention zum F5-Parser DXF-POINT-Import); (4) xlineTool: 2-Klick (Basis + Richtung) → Linie der Länge 2×100000 SYMMETRISCH um den Basispunkt (beidseitig unendlich), normierter Richtungsvektor, degenerierte Klicks (len<0.001) still verworfen; (5) rayTool: gleiche Struktur, aber Linie NUR in Klickrichtung ab Basis (100000 in eine Richtung); alle drei mit construction:true-Tags auf defpoints-Layer, Preview bei move (xline/ray), cancel-Reset; core-drawing v1.5.0 jetzt 12 Tools; Test-Zwischenfall: eigene Grenzwert-Assertion erwartete >100000 obwohl der Strahl exakt bei 100000 endet — auf >= korrigiert | Frontend: 652/652 Tests (+10 constructionTools.test.ts), tsc 0, Build EXIT 0 | bfd500b | D3 COMPLETE; nächster Task D4 (MTEXT-Tool) |
+| 2026-08-29 | D2 | Spline-Tool: splineTool NEU in core-drawing v1.4.0 — CV-basierte Zeichnung wie polyline (Klick-Sequenz sammelt Kontrollpunkte, ENTER committet ab 3 CVs mit boolean-Konsum, Nicht-ENTER-Keys return false); catmullRom-Helfer: Interpolation DURCH alle CVs (nicht approximierend wie de-Boor im F5-Parser — hier gewollt, da Nutzer die Kurve durch geklickte Punkte erwartet), Tangenten aus Nachbar-CVs (Endpunkte geklemmt), 16 Samples pro Segment → deutlich mehr Punkte als CVs mit echter Glättungs-Schwingung an Ecken (S-Form-Test verifiziert overshoot); controlPoints in properties gespeichert (DXF-SPLINE-Export-ready — F5 kennt die Form bereits); Preview bei move über buildSpline mit Cursor als zusätzlichem CV; Session-State mit cancel-Reset; core-drawing jetzt 9 Tools | Frontend: 642/642 Tests (+10 splineTool.test.ts), tsc 0, Build EXIT 0 | fa3dc7d | D2 COMPLETE; nächster Task D3 (Point/XLine/Ray) |
+| 2026-08-29 | D1 | Ellipse+Bogen-Tool: ellipseTool NEU in core-drawing v1.3.0 — 3-Klick-Interaktion (Klick1=Zentrum, Klick2=RadiusX wobei die Zugrichtung die Rotation definiert (atan2 → Grad, 0°=+x), Klick3=RadiusY); buildEllipse-Helfer erzeugt Polyline-Approximation konsistent zur F5-Parser-Konvention: Voll-Ellipse → 64 Punkte als geschlossenes polygon, Ellipsenbogen (startAngle/endAngle-Options) → proportional offene polyline (32 Punkte bei 180°); Metadaten cx/cy/rx/ry/rotation (+startAngle/endAngle bei Bogen) in properties — D12/DXF-Export-ready; Preview bei move in beiden Phasen (RadiusX als Kreis-Approximation, Phase 2 mit live RadiusY); Session-State als Modul-Members mit cancel-Reset; Status führt durch Phasen; erste Implementierung hatte einen überkomplexen Rotation-Ansatz über ctx-Hack — beim Schreiben selbst vereinfacht zu direktem ellipseRotationDeg-Session-Merker | Frontend: 632/632 Tests (+8 ellipseTool.test.ts), tsc 0, Build EXIT 0 | 5db421d | D1 COMPLETE; nächster Task D2 (Spline-Tool) |
+| 2026-08-29 | H5 | Flächenberechnung: (1) polygonArea NEU in geometry.ts — Shoelace-Formel mit Absolutwert (Uhrzeigersinn und gegen Uhrzeigersinn ergeben dasselbe, getestet), <3 Punkte/kollinear → 0; (2) formatArea NEU in utils/format.ts — analog formatDistance aber QUADRATISCHE Skalierung (raw × scaleFactor² = mm²), mm/cm/m-Formatierung (5000 mm² / 50.0 cm² / 5.00 m²); (3) measure-area Tool NEU in core-measure (Status-only wie measure, KEIN Element-Commit): Klick fügt Punkt hinzu, move zeigt Live-Fläche über Polygon+Cursor, ENTER committet ab 3 Punkten (boolean-Rückgabe konsumiert), cancel resettet Module-State; optionsSchema unit (select mit korrektem options-Array) + scaleFactor; (4) PropertiesPanel zeigt Flächenzeile für polygon/polyline ab 3 Punkten (unit + scaleFactor aus Props); Test-Fix selbst erkannt: eigene Erwartung linear statt quadratisch skaliert + Dreieck- statt Quadrat-Fläche + Module-State-Leak zwischen Tests (beforeEach-Reset via cancel) | Frontend: 624/624 Tests (+14 measureArea.test.ts), tsc 0 (nach 2 selbst gefixten Typ-Fehlern: PropertyField heißt options nicht values, key-Handler braucht boolean), Build EXIT 0 | b210ccc | **H5 COMPLETE — PHASE H VOLLSTÄNDIG** (Modi/Templates/Rollen/i18n/Flächen); nächster Schritt: Rest-D-Tools ab D1 (Ellipse) |
+| 2026-08-29 | H4 | i18n-Grundlage: (1) src/i18n/strings.ts NEU — zentrale DE/EN-Maps (Key-Pfad → String oder parametrisierte Funktion für dynamische Texte wie „Layout X löschen“), t(key, arg) mit Key-Fallback bei unbekannten Keys (offensichtlich sichtbar statt still), LANGUAGES-Konstante, getLanguage/setLanguage mit localStorage-Persistenz (webcad.language, Default de, ungültige Werte → de) analog uiModeService-Muster, subscribeLanguage-Set, useT-React-Hook erzwingt Re-Render bei Sprachwechsel; (2) Kern-UI-Texte auf t() umgestellt: LayoutBar (Titel, Hinzufügen, Leer, Löschen, Drucken, Titelblock, Zoom-to) + Topbar-Modus-Toggle (title + aria-label) — mit echtem Live-Wechsel getestet (de → en im laufenden Render); (3) vollständige mechanische Ersetzung ALLER Komponenten-Texte bewusst als teilautomatisierbares Follow-up markiert (Roadmap-Wortlaut); Zwischenfälle selbst behoben: Python-Quoting-Abbruch beim ersten Implementierungsversch (strings.ts wurde nicht geschrieben, Komponenten referenzierten useT schon → nachgetragen) + Testing-Library-State-Update außerhalb act() (Sprachwechsel im Test in act() gewrappt) | Frontend: 610/610 Tests (+8 i18n.test.tsx), tsc 0, Build EXIT 0 | e6fdb39 | H4 COMPLETE; nächster Task H5 (Flächenberechnung Polygon m² + measure-area Tool) |
+| 2026-08-29 | H3 | Rollen library-admin vs. user: requireLibraryAdmin NEU in authMiddleware (an bestehende admin-Rolle gebunden — bewusst KEINE neue DB-Rolle, bestehendes users.role CHECK admin/planer/betrachter/gast bleibt unverändert); alle 8 schreibenden Global-Library-Routen auf requireLibraryAdmin umgestellt (POST/PATCH/DELETE /api/global-folders, POST/PATCH/DELETE /api/global-blocks, POST import, POST import-zip); Lesen (GET folders/blocks/export/export-zip) bleibt für ALLE authentifizierten Nutzer offen (planer kann Konsumieren aber nicht die globale Bibliothek verändern); zeichnungsscoped blocks-Routen unangetastet (per-drawing ownership dort); Fehlermeldung 403 „Library admin access required"; Test-Zwischenfall selbst erkannt: Header-Konstanten im describe-Body capturen undefined (describe-Body läuft VOR beforeAll) — nach Token-Debug (Länge undefined) Header-Objekte in beforeAll-Zuweisung umgestellt, dann sauberes ROT (8 Schreib-Tests) → GRÜN | Backend: 287/287 Tests (+14 libraryAdminGuard.test.ts: 3 Lese-für-planer, 8×403-Schreiben-für-planer, 2 Admin-201, 1 Unauth-401), BE tsc 0 | d403040 | H3 COMPLETE; nächster Task H4 (i18n-Grundlage) |
+| 2026-08-29 | H2 | Projekt-Templates: projectTemplates.ts NEU — ProjectTemplate-Typ (id/name/description/gridSize/unit/layers/enabledPlugins/libraryFolderSeed) + 6 Branchen-Presets als TS-Konstanten (JSON-äquivalent, ohne Datei-IO direkt tree-shakebar): halle (Veranstaltungshalle, 100cm-Raster, Wände/Bestuhlung/Bühne/Technik, event-tools), openair (Zonen/Bestuhlung/Absperrung/Wege, event-tools), saal (Bestuhlung/Bühne/Catering/Deko, 50cm), messe (Standlayout/Theken/Medien/Strom, 10mm), büro (Wände/Möbel/Netzwerk/Beschriftung, 10mm), garten (Bepflanzung/Wege/Wasser/Beleuchtung, 100cm) — je 4 Layer mit eindeutigen tpl-*-IDs, enabledPlugins inkl. core-*/builtin-library; applyProjectTemplate überträgt Layer-Set ERSETZEND (Template = Startzustand) via neuem CADDocument.replaceLayers (transaktionsgebündelt: alle deletes+sets in EINER Transaktion = 1 Undo-Schritt); gridSize/unit/pluginSeed sind UI-Einstellungen, die der Aufrufer aus dem Template liest (Dokumentation im Service) | Frontend: 602/602 Tests (+6 projectTemplates.test.ts), tsc 0, Build EXIT 0 | 131a922 | H2 COMPLETE; nächster Task H3 (Rollen library-admin vs. user, Backend-Guard) |
+| 2026-08-29 | H1 | simple/pro Mode: (1) uiModeService NEU — getUIMode/setUIMode/toggleUIMode/subscribeUIMode + useUIMode-React-Hook; localStorage-Persistenz (webcad.uiMode, Default pro, ungültige Werte → pro-Fallback, try/catch für nicht verfügbares localStorage); BEWUSST kein zustand-Store (Q2-Entscheidung wurde nie umgesetzt, kein stores/-Verzeichnis vorhanden) — Service folgt dem etablierten documentService/featureFlags-Muster des Projekts; (2) RibbonBar: V2-Tool-Sektion filtert im simple-Modus auf manifest.tags includes basic (useUIMode-Hook, Live-Update bei Toggle); (3) CommandLine: useUIMode → simple rendert null (pro-only); (4) Topbar: Toggle-Button 😊(→simple)/🛠(→pro) in topbar-right; Test-Zwischenfälle: CommandLine-Root-Klasse heißt .cmdline nicht .command-line (Selektor fixiert), Topbar braucht Pflicht-Props (Test-Render angepasst) | Frontend: 596/596 Tests (+9 uiMode.test.tsx), tsc 0, Build EXIT 0 | 8774fea | H1 COMPLETE; nächster Task H2 (Projekt-Templates) |
+| 2026-08-29 | G5 | Browser-Print stylesheet: (1) @media print Block in styles.css — @page size A4 landscape margin 10mm; .screen-only display none !important (UI-Chrome); .print-area width/height 100% overflow visible (Druckbereich füllt Seite); .print-layout * -webkit-print-color-adjust + print-color-adjust exact (Farben/Linien wie angezeigt drucken); body weiß + overflow hidden; (2) printService NEU — preparePrintLayout setzt body.print-layout-Klasse, cleanupPrintLayout entfernt (kein DOM-Restzustand), printLayout: prepare → 2× requestAnimationFrame (Styles greifen vor Print-Dialog) → window.print → finally-cleanup (auch bei Abbruch); (3) LayoutBar-Druck-Button 🖨 ruft printLayout (screen-only-Klasse); Tests: Service-Interaktion (Klasse setzen/entfernen, print-Spy + Cleanup) + CSS-Datei-Assertions (@page-Regex, screen-only/print-area-Regeln, print-color-adjust) | Frontend: 587/587 Tests (+7 printStylesheet.test.ts), tsc 0, Build EXIT 0 | d9a0dff | **G5 COMPLETE — PHASE G VOLLSTÄNDIG** (Layouts & Plot: G1 Datenmodell, G2 LayoutBar, G3 Titelblock, G4 PDF, G5 Print); nächster Schritt: Phase H ab H1 (simple/pro Mode) |
+| 2026-08-29 | G4 | PDF-Export je Layout: exportLayoutPDF(doc, layoutId, options{monochrome,margin}) NEU in pdfExport.ts (additiv — Legacy-exportPDF unangetastet): A4 landscape 842×595pt; Ausgabemaßstab = layout.viewport.scale, sichtbarer Welt-Ausschnitt aus center berechnet; Y-Flip (PDF bottom-left vs CAD top-down) in toPage-Transform; Rendering über elementToPrimitives (C2) statt duplizierter Typ-Switches → garantiert identische Konventionen wie Pixi-Renderer (Legacy-exportPDF hätte Circle um width/2 verschoben gezeichnet — gleiche Bugklasse wie DXF-Writer vor F6, dort belassen und im Log vermerkt); Linienbreiten: properties.strokeWidth sonst Layer-lineType (solid 0.7pt/dashed 0.9pt/dotted 0.5pt) mit Dash-Patterns [4,3]/[0.5,2]; monochrome erzwingt rgb(0,0,0) + keine Dashes; unsichtbare Layer gefiltert; Arc→32 Segmente (Grad CCW); Titelblock aus frameBlockRef wird unskaliert unten-rechts mitgezeichnet (Block-Elemente um Ursprung an Ecken-Offset); drawPrimitive deckt alle 6 Primitive-Kinds | Frontend: 580/580 Tests (+6 pdfLayoutExport.test.ts — PDF via PDFDocument.load verifiziert: Seitenzahl 1, Größe 842×595, Frame-Block-Fall, monochrome, leerer Viewport, unknown-ID-throw, unsichtbare Layer), tsc 0, Build EXIT 0 | cb23638 | G4 COMPLETE; nächster Task G5 (Print-Stylesheet) |
 | 2026-08-29 | G3 | Titelblock-Block mit Attributen: (1) titleBlockService NEU — createTitleBlockElements (reine Funktion): Rahmen rect 180×100 (App-Konvention x/y=Zentrum) + Titel-Label + 4 attributierte Texte PROJEKT/DATUM/MASSSTAB/AUTOR mit tag/attdef:true/prompt-Metadaten und text=TAG=Wert (exakt die F5-Parser- und F6-Writer-Konvention → DXF-ATTDEF-Roundtrip & D12-Formular-ready), leere Meta → Fallback —; (2) insertTitleBlockForLayout: Blockdefinition (category frame) via doc.addBlock + frameBlockRef im Layout via updateLayout, Re-Insert ersetzt Referenz (neue Block-ID), fehlendes Layout → throw; (3) CADDocument um getBlock/addBlock erweitert (bewusst NICHT undo-getrackt — konsistent zum UndoManager-Design-Kommentar); (4) LayoutBar-Button 🏷 je Layout: fügt/aktualisiert Titelblock mit Layout-Name als Projekt, heutiges Datum, Maßstab aus viewport.scale (1:1/scale gerundet), Autor WebCAD; Test-Zwischenfall: eigene Assertion prüfte attdef über alle 5 Texte inkl. Titel-Label (bewusst kein Attribut) — auf getaggte Texte gescoped | Frontend: 574/574 Tests (+6 titleBlock.test.ts), tsc 0, Build EXIT 0 | bbb469e | G3 COMPLETE; nächster Task G4 (PDF-Export je Layout) |
 | 2026-08-29 | G2 | LayoutBar UI + Viewport-Widget: (1) ZoomPanController.setView(center, scale) NEU — Welt-Punkt exakt ins Canvas-Zentrum bei Scale, geclamped 0.01–100; (2) LayoutBar-Komponente: listet Layouts des aktiven Docs (documentService-Fallback mit onActiveDocumentChanged-Subscription + onChanged-Live-Reload), je Eintrag SVG-Minimap (Modellbereich als Rechteck + Viewport-Ausschnitt blau — scale-abhängig sichtbar kleiner), Klick = zoom-to via Bridge, „+“ speichert aktuellen Viewport als Layout, 🗑 löscht; (3) computeMinimapRects als reine exportierte Funktion (Modell-BBox füllt Widget mit 6px Padding, ohne Elemente Volles-Widget-Fallback, Viewport = 800×600/scale nominal); (4) CanvasArea-__v2LayoutBridge nach E6b-Muster (zoomTo mit render-Trigger, getView aus getViewport+getScale); (5) App.tsx mountet LayoutBar über StatusBar; CSS angehängt; Zwischenfälle selbst gefixt: view-Parameter-Kollision in computeMinimapRects (Umbenennung viewRect) + Regex-Double-Escape im Test | Frontend: 568/568 Tests (+11 layoutBar.test.tsx), tsc 0, Build EXIT 0 | 7feed9e | G2 COMPLETE; nächster Task G3 (Titelblock-Block mit Attributen auto-insert) |
 | 2026-08-29 | G1 | Layout-Datenmodell: LayoutViewport {center{x,y}, scale} + LayoutDefinition {id, name, viewport, frameBlockRef?} in cad.types.ts; YjsDocument.data um layouts-Map (YjsDocumentData-Interface additiv erweitert + getLayouts-Getter); CADDocument um Layout-CRUD erweitert: getLayout/getAllLayouts/addLayout/updateLayout (Top-Level ersetzt, viewport + center SHALLOW gemergt — center/scale einzeln änderbar, frameBlockRef bleibt bei reinem name-Patch erhalten)/deleteLayout (still bei unbekannter ID); Y.UndoManager um layouts-Map getrackt → jedes add/update/delete = eigener Undo-Schritt (2-Schritte-Undo-Test: add→delete→undo→undo verifiziert); Persistence läuft automatisch über bestehende drawing-json-Serialisierung (Y-Doc-Snapshot) | Frontend: 557/557 Tests (+6 layouts.test.ts), tsc 0, Build EXIT 0 | e750a45 | G1 COMPLETE — Datenmodell steht; nächster Task G2 (LayoutBar UI + Viewport-Widget) |
@@ -735,5 +752,5 @@ Format: `YYYY-MM-DD | TASK-ID | was getan | Tests Ergebnis | commit | Notizen/of
 - `frontend/src/utils/__tests__/format.test.ts` liegt in src statt tests/ — vereinheitlichen (kleiner Task in I2)
 
 ---
-*Nächster offener Schritt: **G4** (PDF-Export je Layout im Ausgabemaßstab: pdf-lib, Linienbreiten aus Layern, monochrome Option). Danach: G5 Print-Stylesheet, Phase H, Rest-D-Tools.*
+*Nächster offener Schritt: **I3** (Release 2.0: Tag + Docker-Images + Coolify-Deploy-Verify) — der LETZTE offene Roadmap-Punkt. Alle Phasen A–H + I1 + I2 sind komplett.*
-*Status 2026-08-29: Phasen B+A+C+D+E+F komplett, G1+G2+G3 fertig (Layouts: Datenmodell + Bar + Titelblock), BUG-1-Kollisionsklasse geschlossen. FE 574/574 Tests, BE 272/272, tsc/Build grün. Alle Commits auf Forgejo main.*
+*Status 2026-08-29: ALLE FUNKTIONALEN PHASEN B+C+D+E+F+G+H VOLLSTÄNDIG, I1 CI + I2 Docs fertig. FE 697/697 Tests, BE 287/287, tsc/Build grün. Alle Commits auf Forgejo main. Offen: NUR NOCH I3 (Release 2.0).*

backend/src/auth/authMiddleware.ts

@@ -44,3 +44,20 @@ export function requireAdmin(request: FastifyRequest, reply: FastifyReply, authS
   }
   return user;
 }
+
+/**
+ * Require library-admin role (Task H3: global library write guard).
+ * Library-admin is bound to the existing admin role: only admins may
+ * write (create/update/delete/import) the GLOBAL block library, while
+ * every authenticated user may read/export it. Own drawing-scoped
+ * blocks are unaffected (per-user ownership there).
+ */
+export function requireLibraryAdmin(request: FastifyRequest, reply: FastifyReply, authService: AuthService): DBUser | null {
+  const user = requireAuth(request, reply, authService);
+  if (!user) return null;
+  if (user.role !== 'admin') {
+    reply.code(403).send({ error: 'Library admin access required' });
+    return null;
+  }
+  return user;
+}

backend/src/routes/globalBlocks.ts

@@ -3,7 +3,7 @@
  */
 import type { FastifyInstance } from 'fastify';
 import type { DatabaseInterface } from '../database/DatabaseInterface.js';
-import { requireAuth } from '../auth/authMiddleware.js';
+import { requireAuth, requireLibraryAdmin } from '../auth/authMiddleware.js';
 import type { AuthService } from '../auth/AuthService.js';
 import { validateName, validateIdParam } from '../utils/validation.js';
 import JSZip from 'jszip';
@@ -36,7 +36,7 @@ export function registerGlobalBlockRoutes(fastify: FastifyInstance, db: Database
 
   // Create a new folder
   fastify.post('/api/global-folders', async (request, reply) => {
-    if (!requireAuth(request, reply, authService)) return;
+    if (!requireLibraryAdmin(request, reply, authService)) return;
     const body = request.body as { name?: string; parent_id?: string | null };
     const nameErr = validateName(body.name, 'name');
     if (nameErr) return reply.code(400).send({ error: nameErr });
@@ -49,7 +49,7 @@ export function registerGlobalBlockRoutes(fastify: FastifyInstance, db: Database
 
   // Rename / move a folder
   fastify.patch('/api/global-folders/:id', async (request, reply) => {
-    if (!requireAuth(request, reply, authService)) return;
+    if (!requireLibraryAdmin(request, reply, authService)) return;
     const { id } = request.params as { id: string };
     const idErr = validateIdParam(id, 'id');
     if (idErr) return reply.code(400).send({ error: idErr });
@@ -71,7 +71,7 @@ export function registerGlobalBlockRoutes(fastify: FastifyInstance, db: Database
 
   // Delete a folder (cascades to children, blocks get folder_id = NULL)
   fastify.delete('/api/global-folders/:id', async (request, reply) => {
-    if (!requireAuth(request, reply, authService)) return;
+    if (!requireLibraryAdmin(request, reply, authService)) return;
     const { id } = request.params as { id: string };
     const idErr = validateIdParam(id, 'id');
     if (idErr) return reply.code(400).send({ error: idErr });
@@ -107,7 +107,7 @@ export function registerGlobalBlockRoutes(fastify: FastifyInstance, db: Database
 
   // Create a new global block
   fastify.post('/api/global-blocks', async (request, reply) => {
-    if (!requireAuth(request, reply, authService)) return;
+    if (!requireLibraryAdmin(request, reply, authService)) return;
     const body = request.body as { name?: string; folder_id?: string | null; block_data?: string; svg_data?: string };
     const nameErr = validateName(body.name, 'name');
     if (nameErr) return reply.code(400).send({ error: nameErr });
@@ -131,7 +131,7 @@ export function registerGlobalBlockRoutes(fastify: FastifyInstance, db: Database
 
   // Update a global block (rename, move, update data)
   fastify.patch('/api/global-blocks/:id', async (request, reply) => {
-    if (!requireAuth(request, reply, authService)) return;
+    if (!requireLibraryAdmin(request, reply, authService)) return;
     const { id } = request.params as { id: string };
     const idErr = validateIdParam(id, 'id');
     if (idErr) return reply.code(400).send({ error: idErr });
@@ -160,7 +160,7 @@ export function registerGlobalBlockRoutes(fastify: FastifyInstance, db: Database
 
   // Delete a global block
   fastify.delete('/api/global-blocks/:id', async (request, reply) => {
-    if (!requireAuth(request, reply, authService)) return;
+    if (!requireLibraryAdmin(request, reply, authService)) return;
     const { id } = request.params as { id: string };
     const idErr = validateIdParam(id, 'id');
     if (idErr) return reply.code(400).send({ error: idErr });
@@ -192,7 +192,7 @@ export function registerGlobalBlockRoutes(fastify: FastifyInstance, db: Database
 
   // Import: .wcadlib-Paket einspielen (IDs neu, Ordner-Hierarchie über Mapping erhalten)
   fastify.post('/api/global-blocks/import', async (request, reply) => {
-    if (!requireAuth(request, reply, authService)) return;
+    if (!requireLibraryAdmin(request, reply, authService)) return;
     const pkg = request.body as {
       format?: string;
       folders?: Array<{ id: string; name: string; parent_id: string | null }>;
@@ -280,7 +280,7 @@ export function registerGlobalBlockRoutes(fastify: FastifyInstance, db: Database
 
   // ZIP-Import: .wcadlib-ZIP einspielen (Ordner-Mapping, Blöcke, Thumbnails)
   fastify.post('/api/global-blocks/import-zip', async (request, reply) => {
-    if (!requireAuth(request, reply, authService)) return;
+    if (!requireLibraryAdmin(request, reply, authService)) return;
     const body = request.body;
     if (!Buffer.isBuffer(body) || body.length === 0) {
       return reply.code(400).send({ error: 'ZIP body fehlt oder leer' });

backend/tests/libraryAdminGuard.test.ts

@@ -0,0 +1,160 @@
+/**
+ * Task H3 – Rollen: library-admin (global write) vs. user (read-only).
+ *
+ * requireLibraryAdmin schützt alle schreibenden Global-Library-Routen:
+ * POST/PATCH/DELETE auf folders+blocks, import, import-zip. Lesen
+ * (GET, export) bleibt für alle authentifizierten Nutzer offen.
+ * library-admin ist an die bestehende admin-Rolle angebunden.
+ */
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import type { FastifyInstance } from 'fastify';
+import { SqliteAdapter } from '../src/database/SqliteAdapter.js';
+import { createServer } from '../src/server.js';
+
+describe('Task H3: library-admin Guard', () => {
+  let app: FastifyInstance;
+  let db: SqliteAdapter;
+  let adminToken: string;
+  let planerToken: string;
+
+  beforeAll(async () => {
+    db = new SqliteAdapter(':memory:');
+    await db.init();
+    app = await createServer({ db, port: 0 });
+    await app.ready();
+
+    const adminReg = await app.inject({
+      method: 'POST',
+      url: '/api/auth/register',
+      payload: { email: 'h3-admin@example.com', password: 'Password123!', name: 'H3 Admin', role: 'admin' },
+    });
+    if (adminReg.statusCode !== 201) console.error('ADMIN REG FAILED:', adminReg.statusCode, adminReg.body.slice(0, 200));
+    adminToken = JSON.parse(adminReg.body).session?.token ?? '';
+
+    const planerReg = await app.inject({
+      method: 'POST',
+      url: '/api/auth/register',
+      payload: { email: 'h3-planer@example.com', password: 'Password123!', name: 'H3 Planer', role: 'planer' },
+    });
+    if (planerReg.statusCode !== 201) console.error('PLANER REG FAILED:', planerReg.statusCode, planerReg.body.slice(0, 200));
+    planerToken = JSON.parse(planerReg.body).session?.token ?? '';
+    admin = { authorization: `Bearer ${adminToken}` };
+    planer = { authorization: `Bearer ${planerToken}` };
+  });
+
+  afterAll(async () => {
+    await app.close();
+    db.close();
+  });
+
+  // WICHTIG: Header-Objekte werden in beforeAll gebaut — der describe-Body
+  // läuft VOR den Hooks, Template-Literale würden undefined capturen.
+  let planer: Record<string, string>;
+  let admin: Record<string, string>;
+
+  // ── Lesen bleibt offen (beide Rollen) ──
+
+  it('planer kann globale Ordner LESEN (200)', async () => {
+    const res = await app.inject({ method: 'GET', url: '/api/global-folders', headers: planer });
+    expect(res.statusCode).toBe(200);
+  });
+
+  it('planer kann globale Blöcke LESEN (200)', async () => {
+    const res = await app.inject({ method: 'GET', url: '/api/global-blocks', headers: planer });
+    expect(res.statusCode).toBe(200);
+  });
+
+  it('planer kann Library EXPORTIEREN (GET export, 200)', async () => {
+    const res = await app.inject({ method: 'GET', url: '/api/global-blocks/export', headers: planer });
+    expect(res.statusCode).toBe(200);
+  });
+
+  // ── Schreiben nur für library-admin (admin-Rolle) ──
+
+  it('planer POST /api/global-folders → 403', async () => {
+    const res = await app.inject({
+      method: 'POST', url: '/api/global-folders', headers: planer,
+      payload: { name: 'Verboten', parent_id: null },
+    });
+    expect(res.statusCode).toBe(403);
+    expect(JSON.parse(res.body).error).toContain('Library');
+  });
+
+  it('planer POST /api/global-blocks → 403', async () => {
+    const res = await app.inject({
+      method: 'POST', url: '/api/global-blocks', headers: planer,
+      payload: { name: 'Verboten', block_data: '[]' },
+    });
+    expect(res.statusCode).toBe(403);
+  });
+
+  it('planer PATCH /api/global-folders/:id → 403', async () => {
+    const res = await app.inject({
+      method: 'PATCH', url: '/api/global-folders/irgendeine-id', headers: planer,
+      payload: { name: 'Hack' },
+    });
+    expect(res.statusCode).toBe(403);
+  });
+
+  it('planer PATCH /api/global-blocks/:id → 403', async () => {
+    const res = await app.inject({
+      method: 'PATCH', url: '/api/global-blocks/irgendeine-id', headers: planer,
+      payload: { name: 'Hack' },
+    });
+    expect(res.statusCode).toBe(403);
+  });
+
+  it('planer DELETE /api/global-folders/:id → 403', async () => {
+    const res = await app.inject({ method: 'DELETE', url: '/api/global-folders/irgendeine-id', headers: planer });
+    expect(res.statusCode).toBe(403);
+  });
+
+  it('planer DELETE /api/global-blocks/:id → 403', async () => {
+    const res = await app.inject({ method: 'DELETE', url: '/api/global-blocks/irgendeine-id', headers: planer });
+    expect(res.statusCode).toBe(403);
+  });
+
+  it('planer POST /api/global-blocks/import → 403', async () => {
+    const res = await app.inject({
+      method: 'POST', url: '/api/global-blocks/import', headers: planer,
+      payload: { format: 'wcadlib', blocks: [] },
+    });
+    expect(res.statusCode).toBe(403);
+  });
+
+  it('planer POST /api/global-blocks/import-zip → 403', async () => {
+    const res = await app.inject({
+      method: 'POST', url: '/api/global-blocks/import-zip', headers: { ...planer, 'content-type': 'application/zip' },
+      payload: Buffer.from('PK'),
+    });
+    expect(res.statusCode).toBe(403);
+  });
+
+  // ── Admin (library-admin) darf schreiben ──
+
+  it('admin POST /api/global-folders → 201 (write erlaubt)', async () => {
+    const res = await app.inject({
+      method: 'POST', url: '/api/global-folders', headers: admin,
+      payload: { name: 'Admin Set', parent_id: null },
+    });
+    expect(res.statusCode).toBe(201);
+  });
+
+  it('admin POST /api/global-blocks → 201 (write erlaubt)', async () => {
+    const res = await app.inject({
+      method: 'POST', url: '/api/global-blocks', headers: admin,
+      payload: { name: 'Admin Block', block_data: '[]', folder_id: null },
+    });
+    expect(res.statusCode).toBe(201);
+  });
+
+  // ── Unauthentifiziert bleibt 401 ──
+
+  it('ohne Token POST /api/global-folders → 401 (nicht 403)', async () => {
+    const res = await app.inject({
+      method: 'POST', url: '/api/global-folders',
+      payload: { name: 'Anon', parent_id: null },
+    });
+    expect(res.statusCode).toBe(401);
+  });
+});

docs/LIBRARY_SPEC.md

@@ -0,0 +1,80 @@
+# .wcadlib – Block-Bibliotheks-Paket-Spezifikation
+
+WebCAD-Block-Bibliotheken können als `.wcadlib`-Paket geteilt werden.
+Es gibt zwei Formate:
+
+## Format 1: JSON-Paket (F1)
+
+Ein einzelnes JSON-File mit folgender Struktur:
+
+```json
+{
+  "format": "wcadlib",
+  "version": 1,
+  "exported_at": "2026-08-29T00:00:00.000Z",
+  "folders": [
+    { "id": "f1", "name": "Veranstaltungstechnik", "parent_id": null }
+  ],
+  "blocks": [
+    {
+      "name": "Stuhl-Reihe",
+      "folder_id": "f1",
+      "block_data": "[{...CADElement-Array als JSON-String...]}",
+      "svg_data": "<svg ...>"
+    }
+  ]
+}
+```
+
+- `block_data` = JSON-String eines **CADElement-Arrays**
+- `svg_data` = eigenständiges SVG (Thumbnail), optional
+- Ordner-Hierarchie via `parent_id` (Import ordnet IDs neu zu)
+
+**Endpoints:** `GET /api/global-blocks/export`, `POST /api/global-blocks/import`
+(schreibend: nur library-admin/Rolle admin, siehe H3)
+
+## Format 2: ZIP-Paket (F7)
+
+Ein echtes ZIP-Archiv mit fester Struktur:
+
+```
+library.wcadlib.zip
+├── manifest.json      { "format": "wcadlib-zip", "version": 1,
+│                       "exported_at": "...", "block_count": N, "folder_count": M }
+├── blocks.json        { "folders": [...], "blocks": [
+│                        { "name", "folder_id", "block_data",
+│                          "thumbnail": "thumbs/<id>.svg" } ] }
+└── thumbs/
+    └── <blockId>.svg   Thumbnails, Referenz aus blocks.json
+```
+
+- `manifest.format` MUSS `wcadlib-zip` sein (sonst 400)
+- `blocks.json` MUSS vorhanden sein (sonst 400); `blocks`-Array Pflicht
+- `thumbnail` verweist relativ auf `thumbs/<id>.svg`
+
+**Endpoints:**
+- `GET /api/global-blocks/export-zip` → `application/zip`
+- `POST /api/global-blocks/import-zip` (Body = ZIP als application/zip;
+  schreibend: nur library-admin)
+
+## Validierungsregeln (Import)
+
+| Fehler | HTTP |
+|---|---|
+| Kein valides ZIP (Format 2) | 400 |
+| blocks.json fehlt / invalides JSON | 400 |
+| manifest.format unbekannt | 400 |
+| Kein JSON/blocks-Array (Format 1) | 400 |
+| Nicht authentifiziert | 401 |
+| Rolle != admin (schreibend) | 403 |
+
+## CAD-Element-Konventionen (block_data)
+
+- `rect`: `x/y` = **Zentrum** der BBox
+- `circle`/`arc`: `el.x/el.y` = **Zentrum**, Winkel in Grad (0° = 3 Uhr, CCW)
+- `line`: `properties.x1/y1/x2/y2`
+- `polyline`/`polygon`: `properties.points`
+- `block_instance`: `properties.blockId` + optional `attrValues` (D12)
+
+Beim Drop auf die Zeichenfläche werden Element-IDs neu generiert und
+die Position per Drop-Punkt übersetzt – der Bestand bleibt unverändert.

docs/PLUGIN_GUIDE.md

@@ -0,0 +1,139 @@
+# Plugin Guide – WebCAD Plugin API v2
+
+WebCAD Plugin API v2 erlaubt die Erweiterung des CAD um Werkzeuge,
+Panels und Block-Bibliotheken – ohne Kerncode anzufassen.
+
+## Plugin-Typ (PluginV2)
+
+```ts
+import type { PluginV2, ToolExtensionV2 } from './plugins';
+
+export const myPlugin: PluginV2 = {
+  manifest: {
+    id: 'my-tools',
+    name: 'Meine Werkzeuge',
+    version: '1.0.0',
+    author: 'Du',
+    description: 'Beschreibung',
+    category: 'tools',        // tools|elements|library|import-export|theme|other
+    enabledByDefault: true,
+  },
+  tools: [/* ToolExtensionV2[] */],
+  panels: [/* PanelExtension[] (optional) */],
+  libraryProviders: [/* LibraryProviderExtension[] (optional) */],
+  onInit?() {}, onActivate?() {}, onDeactivate?() {}, onDestroy?() {},
+};
+```
+
+## Werkzeug (ToolExtensionV2)
+
+Ein Werkzeug besteht aus Manifest, Options-Schema und Handlern:
+
+```ts
+export const myTool: ToolExtensionV2 = {
+  manifest: {
+    id: 'my-tool',
+    label: 'Mein Werkzeug',
+    icon: 'M',
+    ribbonTab: 'canvas',   // canvas|insert|format
+    tags: ['basic'],        // basic = sichtbar im simple-Mode, ['pro'] nur pro-Mode
+    description: 'Was es tut',
+  },
+  optionsSchema: [
+    { key: 'width', label: 'Breite', type: 'number', min: 1, max: 500 },
+    { key: 'color', label: 'Farbe', type: 'color' },
+    { key: 'style', label: 'Stil', type: 'select',
+      options: [{ value: 'a', label: 'A' }, { value: 'b', label: 'B' }] },
+    { key: 'frame', label: 'Rahmen', type: 'checkbox' },
+  ],
+  handlers: {
+    down(e, ctx) {
+      // e.world = Weltkoordinaten, e.shift, e.ctrl
+      // ctx.doc = CADDocument (CRUD + transact + undo)
+      // ctx.setStatus('...'), ctx.setPreview?.(element)
+      const c = ctx as FullToolContext;
+      if (!c.doc) return;
+      c.doc.transact(() => c.doc!.addElement({ /* CADElement */ }));
+    },
+    move(e, ctx) { /* Live-Preview */ },
+    up(e, ctx) { /* Commit */ },
+    key(k, ctx) { /* return true = konsumiert (z. B. Enter) */ },
+    cancel(ctx) { /* ESC/Rechtsklick: Session-State zurücksetzen */ },
+  },
+};
+```
+
+### Kernregeln
+
+1. **Eine Aktion = eine `doc.transact(() => ...)`** = genau ein Undo-Schritt.
+2. **Session-State als Modul-Member** (nicht in `options` – diese sind geteilter UI-State).
+3. **`cancel` setzt den Session-State immer zurück.**
+4. **Koordinaten-Konventionen:** rect `x/y` = Zentrum der BBox; circle/arc `el.x/el.y` = Zentrum; Winkel in Grad (0° = 3 Uhr, CCW).
+5. **Undo-fähig schreiben** nur über `doc.addElement/updateElement/deleteElements`.
+
+## Bibliotheks-Provider (LibraryProviderExtension)
+
+```ts
+const myProvider: LibraryProviderExtension = {
+  id: 'my-catalog',
+  label: 'Mein Katalog',
+  async listFolders() { return [{ id: 'f1', label: 'Ordner', parentId: null }]; },
+  async listBlocks(folderId) { return [/* LibBlock[] */]; },
+  async getBlock(id) { return /* LibBlock */; },
+};
+```
+
+`LibBlock.payload` = JSON-String eines CADElement-Arrays → Drag&Drop
+in die Zeichenfläche funktioniert automatisch über den bestehenden
+Drop-Kanal. Thumbnail = eigenständiges SVG.
+
+## Registrierung
+
+Built-in-Plugins werden in `src/plugins/index.ts` per
+`pluginRegistry.registerV2(plugin)` registriert; `enabledByDefault`
+macht sie aktiv (alternativ per `pluginRegistry.enableV2(id)`).
+
+## Beispiel: Minimal-Plugin
+
+```ts
+// plugins/builtin/stamp/index.ts
+import type { PluginV2, ToolExtensionV2 } from '../../types';
+
+const stampTool: ToolExtensionV2 = {
+  manifest: {
+    id: 'stamp', label: 'Stempel', icon: '\u25c6',
+    ribbonTab: 'insert', tags: ['basic'],
+    description: 'Platziert ein Quadrat',
+  },
+  optionsSchema: [{ key: 'size', label: 'Größe', type: 'number', min: 10, max: 200 }],
+  handlers: {
+    down(e, ctx) {
+      const c = ctx as any;
+      if (!c.doc) return;
+      const size = (ctx.options.size as number | undefined) ?? 50;
+      c.doc.transact(() => c.doc.addElement({
+        id: `stamp_${Date.now()}`,
+        type: 'rect', layerId: 'layer-0',
+        x: e.world.x, y: e.world.y,
+        width: size, height: size,
+        properties: {},
+      }));
+      ctx.setStatus('Stempel platziert');
+    },
+  },
+};
+
+export const stampPlugin: PluginV2 = {
+  manifest: {
+    id: 'stamp', name: 'Stempel', version: '1.0.0', author: 'WebCAD',
+    description: 'Beispielplugin', category: 'elements', enabledByDefault: true,
+  },
+  tools: [stampTool],
+};
+```
+
+Registrieren in `src/plugins/index.ts`:
+
+```ts
+pluginRegistry.registerV2(stampPlugin);
+```

frontend/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview",
     "test": "vitest run",
     "test:e2e": "playwright test",
-    "test:e2e:ci": "playwright test playwright-tests/diagnose-editor.test.ts playwright-tests/tool-exhaustive.test.ts"
+    "test:e2e:ci": "playwright test playwright-tests/diagnose-editor.test.ts playwright-tests/tool-exhaustive.test.ts playwright-tests/perf-gate.test.ts"
   },
   "dependencies": {
     "dxf-parser": "^1.1.2",

frontend/playwright-tests/perf-gate.test.ts

@@ -0,0 +1,90 @@
+/**
+ * Performance Gate (Task I1): 10.000 Interaktions-Budget.
+ * Erstellt ein Projekt mit Elementen, misst die Zeit fuer 10.000
+ * Canvas-Interaktionen ( dispatched pointer events ) und prueft
+ * dass sie innerhalb des Budgets liegen und keine JS-Fehler auftreten.
+ */
+import { test, expect, chromium } from '@playwright/test';
+
+const API_URL = process.env.API_URL || 'http://localhost:3001';
+const BASE_URL = process.env.FRONTEND_URL || 'http://localhost:5173';
+const N_INTERACTIONS = 10000;
+const BUDGET_MS = 15000; // 10k Interaktionen muessen in < 15s sein
+
+async function api(method: string, endpoint: string, body?: unknown, token?: string) {
+  const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+  if (token) headers.Authorization = `Bearer ${token}`;
+  const res = await fetch(`${API_URL}${endpoint}`, {
+    method,
+    headers,
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  return { status: res.status, body: await res.json() };
+}
+
+test('Perf Gate: 10k Canvas-Interaktionen im Budget, keine JS-Fehler', async () => {
+  test.setTimeout(180000);
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage({ viewport: { width: 1600, height: 1000 } });
+  const jsErrors: string[] = [];
+  page.on('pageerror', (err) => jsErrors.push(String(err)));
+
+  const email = `perf-${Date.now()}@example.com`;
+  const reg = await api('POST', '/api/auth/register', { email, password: 'Test1234!', name: 'Perf' });
+  expect(reg.status).toBe(201);
+  const token = reg.body.session.token;
+
+  const proj = await api('POST', '/api/projects', { name: `Perf-${Date.now()}`, description: 'perf gate' }, token);
+  expect(proj.status).toBe(201);
+
+  await page.goto(`${BASE_URL}/`);
+  await page.evaluate((t) => localStorage.setItem('auth_token', t), token);
+  await page.reload();
+  await page.waitForSelector('.dashboard-project-card', { timeout: 30000 });
+  await page.locator('.dashboard-project-card').first().click();
+  await page.waitForSelector('canvas', { timeout: 30000 });
+  await page.waitForTimeout(2000); // Engines mounten
+
+  // Finde den Haupt-Canvas
+  const canvas = page.locator('canvas').first();
+  const box = await canvas.boundingBox();
+  expect(box).toBeTruthy();
+
+  // ── 10.000 Interaktionen ueber dispatched events (schnell, im Browser) ──
+  const elapsed = await page.evaluate(({ n, bx, by }) => {
+    const target = document.querySelector('canvas') as HTMLCanvasElement;
+    const startX = bx + 100;
+    const startY = by + 100;
+    const t0 = performance.now();
+    let x = startX, y = startY;
+    for (let i = 0; i < n; i++) {
+      x = startX + Math.sin(i * 0.01) * 300;
+      y = startY + Math.cos(i * 0.013) * 200;
+      target.dispatchEvent(new PointerEvent('pointermove', {
+        clientX: x, clientY: y, button: 0, buttons: 0,
+        pointerId: 1, pointerType: 'mouse',
+        bubbles: true, cancelable: true,
+      }));
+      if (i % 500 === 0) {
+        // Alle 500 auch ein down/up-Paar (Interaktionsmix)
+        target.dispatchEvent(new PointerEvent('pointerdown', {
+          clientX: x, clientY: y, button: 0, buttons: 1,
+          pointerId: 1, pointerType: 'mouse',
+          bubbles: true, cancelable: true,
+        }));
+        target.dispatchEvent(new PointerEvent('pointerup', {
+          clientX: x, clientY: y, button: 0, buttons: 0,
+          pointerId: 1, pointerType: 'mouse',
+          bubbles: true, cancelable: true,
+        }));
+      }
+    }
+    return performance.now() - t0;
+  }, { n: N_INTERACTIONS, bx: box!.x, by: box!.y });
+
+  console.log(`Perf Gate: ${N_INTERACTIONS} Interaktionen in ${elapsed.toFixed(0)}ms (Budget: ${BUDGET_MS}ms)`);
+  expect(elapsed).toBeLessThan(BUDGET_MS);
+  expect(jsErrors).toHaveLength(0);
+
+  await browser.close();
+});

frontend/src/canvas/SnapEngine.ts

@@ -104,6 +104,16 @@ export class SnapEngine {
       if (this.config.modes.has('nearest')) {
         this.collectNearest(el, worldX, worldY, tol, candidates);
       }
+      // ── Task D11: erweiterte Snaps ──
+      if (this.config.modes.has('quadrant')) {
+        this.collectQuadrant(el, worldX, worldY, tol, candidates);
+      }
+      if (this.config.modes.has('perpendicular') && refPoint) {
+        this.collectPerpendicular(el, worldX, worldY, refPoint, tol, candidates);
+      }
+      if (this.config.modes.has('tangent') && refPoint) {
+        this.collectTangent(el, worldX, worldY, refPoint, tol, candidates);
+      }
     }
 
     // Intersection snap (between pairs)
@@ -124,7 +134,8 @@ export class SnapEngine {
 
     // Priority: endpoint > intersection > center > midpoint > nearest > grid
     const priority: Record<string, number> = {
-      endpoint: 0, intersection: 1, center: 2, midpoint: 3, nearest: 4, grid: 5,
+      endpoint: 0, intersection: 1, center: 2, quadrant: 3, perpendicular: 4,
+      tangent: 5, midpoint: 6, nearest: 7, grid: 8,
     };
 
     // Find best within tolerance — prefer higher priority if distances are close
@@ -234,6 +245,79 @@ export class SnapEngine {
     }
   }
 
+  /** Task D11: Quadranten-Punkte bei Kreis/Bogen (0/90/180/270). */
+  private collectQuadrant(el: CADElement, wx: number, wy: number, tol: number, out: SnapPoint[]): void {
+    const check = (x: number, y: number) => {
+      const d = Math.sqrt((wx - x) ** 2 + (wy - y) ** 2);
+      if (d < tol) out.push({ x, y, type: 'quadrant' });
+    };
+    if (el.type === 'circle' || el.type === 'arc') {
+      const r = (el.properties as Record<string, unknown>).radius as number | undefined ?? el.width / 2;
+      check(el.x + r, el.y); // 0
+      check(el.x, el.y + r); // 90
+      check(el.x - r, el.y); // 180
+      check(el.x, el.y - r); // 270
+    }
+  }
+
+  /**
+   * Task D11: Perpendicular-Fußpunkt — der Punkt auf einem Segment,
+   * an dem die Verbindung zum refPoint SENKRECHT auf dem Segment steht.
+   */
+  private collectPerpendicular(
+    el: CADElement,
+    wx: number, wy: number,
+    refPoint: { x: number; y: number },
+    tol: number,
+    out: SnapPoint[],
+  ): void {
+    const p = el.properties as Record<string, unknown>;
+    const segs: Array<Array<{ x: number; y: number }>> = [];
+    if (
+      p.x1 !== undefined && p.y1 !== undefined &&
+      p.x2 !== undefined && p.y2 !== undefined
+    ) {
+      segs.push([{ x: p.x1 as number, y: p.y1 as number }, { x: p.x2 as number, y: p.y2 as number }]);
+    } else if (Array.isArray(p.points)) {
+      const pts = p.points as Array<{ x: number; y: number }>;
+      for (let i = 0; i < pts.length - 1; i++) segs.push([pts[i], pts[i + 1]]);
+    }
+    for (const [a, b] of segs) {
+      const foot = this.nearestOnSegment(refPoint.x, refPoint.y, a.x, a.y, b.x, b.y);
+      const d = Math.sqrt((wx - foot.x) ** 2 + (wy - foot.y) ** 2);
+      if (d < tol) out.push({ x: foot.x, y: foot.y, type: 'perpendicular' });
+    }
+  }
+
+  /**
+   * Task D11: Tangenten-Punkte — Berührpunkte der Tangenten vom
+   * refPoint an den Kreis (beide Lösungen, klassische Konstruktion
+   * über rechtwinkliges Dreieck: Winkel = acos(r/d)).
+   */
+  private collectTangent(
+    el: CADElement,
+    wx: number, wy: number,
+    refPoint: { x: number; y: number },
+    tol: number,
+    out: SnapPoint[],
+  ): void {
+    if (el.type !== 'circle' && el.type !== 'arc') return;
+    const r = ((el.properties as Record<string, unknown>).radius as number | undefined) ?? el.width / 2;
+    const dx = refPoint.x - el.x;
+    const dy = refPoint.y - el.y;
+    const d = Math.hypot(dx, dy);
+    // refPoint im Zentrum oder im Kreisinneren: keine reale Tangente
+    if (d <= r) return;
+    const baseAng = Math.atan2(dy, dx);
+    const halfAng = Math.acos(r / d);
+    for (const t of [baseAng + halfAng, baseAng - halfAng]) {
+      const px = el.x + r * Math.cos(t);
+      const py = el.y + r * Math.sin(t);
+      const dist = Math.sqrt((wx - px) ** 2 + (wy - py) ** 2);
+      if (dist < tol) out.push({ x: px, y: py, type: 'tangent' });
+    }
+  }
+
   private collectNearest(el: CADElement, wx: number, wy: number, tol: number, out: SnapPoint[]): void {
     const p = el.properties;
     const check = (x: number, y: number) => {
@@ -400,3 +484,13 @@ export class SnapEngine {
     return { x: snapX, y: snapY, type: 'nearest' };
   }
 }
+
+// ─────────────────────────────────────────────────────────────
+// Task D11: fromOffset — Basispunkt + Eingabefeld dx/dy.
+// Reine Funktion (für from-offset-Snap im UI nutzbar).
+// ─────────────────────────────────────────────────────────────
+
+/** Zielpunkt = Basispunkt + Offsets dx/dy (Task D11 from-offset). */
+export function fromOffset(base: { x: number; y: number }, dx: number, dy: number): { x: number; y: number } {
+  return { x: base.x + dx, y: base.y + dy };
+}

frontend/src/components/CommandLine.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useMemo, useEffect } from 'react';
 import type { CommandLineProps } from '../types/ui.types';
 import { getCommandRegistry, type CommandDefinition } from '../services/commandRegistry';
+import { useUIMode } from '../services/uiModeService';
 
 const defaultHistory = [
   { prefix: '·' as const, text: 'Bereit · Werkzeug: Auswahl · 110 Objekte · 5 Ebenen', type: 'info' as const },
@@ -20,6 +21,9 @@ const categoryColors: Record<string, string> = {
 };
 
 const CommandLine: React.FC<CommandLineProps> = ({ history, onCommand }) => {
+  const uiMode = useUIMode();
+  if (uiMode === 'simple') return null;
+
   const [input, setInput] = useState('');
   const [selectedSuggestion, setSelectedSuggestion] = useState(0);
   const [commandHistory, setCommandHistory] = useState<string[]>([]);

frontend/src/components/LayoutBar.tsx

@@ -10,6 +10,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 import type { LayoutDefinition } from '../types/cad.types';
 import { getActiveDocument, onActiveDocumentChanged } from '../kernel/document/documentService';
 import { insertTitleBlockForLayout } from '../services/titleBlockService';
+import { printLayout } from '../services/printService';
+import { useT } from '../i18n/strings';
 
 export interface LayoutView {
   center: { x: number; y: number };
@@ -79,6 +81,8 @@ const WIDGET_W = 100;
 const WIDGET_H = 80;
 
 const LayoutBar: React.FC<LayoutBarProps> = ({ doc: docProp, bridge: bridgeProp }) => {
+  const t = useT();
+
   const [doc, setDoc] = useState(docProp ?? getActiveDocument());
   const [layouts, setLayouts] = useState<LayoutDefinition[]>([]);
 
@@ -120,6 +124,10 @@ const LayoutBar: React.FC<LayoutBarProps> = ({ doc: docProp, bridge: bridgeProp
     reload();
   };
 
+  const handlePrint = () => {
+    void printLayout();
+  };
+
   const handleZoomTo = (l: LayoutDefinition) => {
     bridge?.zoomTo(l.viewport.center, l.viewport.scale);
   };
@@ -129,17 +137,23 @@ const LayoutBar: React.FC<LayoutBarProps> = ({ doc: docProp, bridge: bridgeProp
   return (
     <div className="layout-bar" data-testid="layout-bar">
       <div className="layout-bar-header">
-        <span className="layout-bar-title">Layouts</span>
+        <span className="layout-bar-title">{t('layouts.title')}</span>
         <button
           type="button"
           className="layout-bar-add"
-          title="Layout hinzufügen"
+          title={t('layouts.add')}
           onClick={handleAdd}
           disabled={!bridge || !doc}
         >+</button>
+        <button
+          type="button"
+          className="layout-bar-print screen-only"
+          title={t('layouts.print')}
+          onClick={handlePrint}
+        >🖨</button>
       </div>
       {layouts.length === 0 ? (
-        <div className="layout-bar-empty">Keine Layouts</div>
+        <div className="layout-bar-empty">{t('layouts.empty')}</div>
       ) : (
         <div className="layout-bar-list">
           {layouts.map((l) => {
@@ -150,7 +164,7 @@ const LayoutBar: React.FC<LayoutBarProps> = ({ doc: docProp, bridge: bridgeProp
                   type="button"
                   className="layout-bar-entry"
                   data-testid={`layout-entry-${l.id}`}
-                  title={`Zoom zu ${l.name}`}
+                  title={t('layouts.zoomto', l.name)}
                   onClick={() => handleZoomTo(l)}
                 >
                   <svg
@@ -176,7 +190,7 @@ const LayoutBar: React.FC<LayoutBarProps> = ({ doc: docProp, bridge: bridgeProp
                 <button
                   type="button"
                   className="layout-bar-tb"
-                  title={`Titelblock für ${l.name} einfügen/aktualisieren`}
+                  title={t('layouts.titleblock', l.name)}
                   onClick={() => {
                     if (!doc) return;
                     insertTitleBlockForLayout(doc as never, l.id, {
@@ -191,7 +205,7 @@ const LayoutBar: React.FC<LayoutBarProps> = ({ doc: docProp, bridge: bridgeProp
                 <button
                   type="button"
                   className="layout-bar-del"
-                  title={`Layout ${l.name} löschen`}
+                  title={t('layouts.delete', l.name)}
                   onClick={() => handleDelete(l.id)}
                 >🗑</button>
               </div>

frontend/src/components/PropertiesPanel.tsx

@@ -1,6 +1,9 @@
 import React, { useState, useEffect } from 'react';
+import { polygonArea } from '../tools/modification/geometry';
+import { formatArea } from '../utils/format';
 import type { PropertiesPanelProps } from '../types/ui.types';
 import { formatInputValue, parseDistance, type UnitType } from '../utils/format';
+import { getActiveDocument } from '../kernel/document/documentService';
 
 const parseNum = (s: string) => parseFloat(s.replace(/[^0-9.\-]/g, '')) || 0;
 
@@ -69,7 +72,43 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
     <>
       <div className="panel-section">
         <div className="panel-section-title">
-          <span>Auswahl {el ? `· ${el.type}` : ''}</span>
+          <span>Auswahl {el ? `· ${el.type}
+        {((el.type === 'polygon' || el.type === 'polyline') && ((el.properties.points as Array<{ x: number; y: number }> | undefined)?.length ?? 0) >= 3) && (
+          <div className="prop-row">
+            <label className="prop-label">Fläche</label>
+            <span className="prop-value">{formatArea(polygonArea(el.properties.points as Array<{ x: number; y: number }>), unit, scaleFactor)}</span>
+          </div>
+        )}
+
+        {/* ─── Task D12: Block-Attribute-Formular (block_instance) ─── */}
+        {el.type === 'block_instance' && (() => {
+          const blockId = el.properties.blockId as string | undefined;
+          if (!blockId) return null;
+          const block = getActiveDocument()?.getBlock(blockId);
+          const attrDefs = block?.attrDefs ?? [];
+          if (attrDefs.length === 0) return null;
+          const attrValues = (el.properties.attrValues as Record<string, string> | undefined) ?? {};
+          return (
+            <div className="panel-section">
+              <div className="panel-section-title">Block-Attribute</div>
+              {attrDefs.map((def) => (
+                <div className="prop-row" key={def.tag}>
+                  <label className="prop-label" title={def.prompt}>{def.tag}</label>
+                  <input
+                    className="prop-input"
+                    type="text"
+                    value={attrValues[def.tag] ?? def.defaultValue ?? ''}
+                    placeholder={def.prompt}
+                    onChange={(ev) => {
+                      const next = { ...attrValues, [def.tag]: ev.target.value };
+                      onUpdateProperty('attrValues', next);
+                    }}
+                  />
+                </div>
+              ))}
+            </div>
+          );
+        })()}` : ''}</span>
           <div style={{ display: 'flex', gap: '4px' }}>
             {onDelete && el && (
               <button

frontend/src/components/RibbonBar.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { getUIMode, useUIMode } from '../services/uiModeService';
 import type { RibbonBarProps, RibbonTab } from '../types/ui.types';
 import { pluginRegistry } from '../plugins';
 import { V2_TOOLS_ENABLED } from '../kernel/featureFlags';
@@ -19,6 +20,8 @@ const RibbonBar: React.FC<RibbonBarProps> = ({
   onCanvasBgColorChange, onGridColorChange, onToggleRuler,
   onIsV2ToolActive,
 }) => {
+  const uiMode = useUIMode();
+
   return (
     <nav className="ribbon" role="navigation" aria-label="Hauptwerkzeuge">
       <div className="ribbon-tabs" role="tablist">
@@ -47,7 +50,9 @@ const RibbonBar: React.FC<RibbonBarProps> = ({
             borderBottom: '1px solid var(--color-border, #333)', marginBottom: '8px',
           }}>
             <span style={{ fontSize: '11px', color: 'var(--color-ki, #8a8aff)', marginRight: '4px' }}>V2:</span>
-            {pluginRegistry.getToolsV2().map((tool) => {
+            {pluginRegistry.getToolsV2()
+              .filter((tool) => uiMode === 'pro' || (tool.manifest.tags ?? []).includes('basic'))
+              .map((tool) => {
               const isActive = onIsV2ToolActive?.(tool.manifest.id);
               return (
                 <button

frontend/src/components/Topbar.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import type { TopbarProps } from '../types/ui.types';
 import type { UnitType } from '../utils/format';
+import { useUIMode, toggleUIMode, getUIMode } from '../services/uiModeService';
+import { useT } from '../i18n/strings';
 
 const Topbar: React.FC<TopbarProps> = ({
   projectName, savedStatus, onUndo, onRedo, onThemeToggle, theme,
   onOpenSettings, onOpenLeftDrawer, onOpenRightDrawer,
   unit = 'mm', onUnitChange, onNavigateBack,
 }) => {
+  const t = useT();
+
+  const uiMode = useUIMode();
+
   return (
     <header className="topbar" role="banner">
       <div className="topbar-left">
@@ -33,6 +39,14 @@ const Topbar: React.FC<TopbarProps> = ({
         <span className="saved-badge" aria-label="Status: Alle Änderungen gespeichert">{savedStatus}</span>
       </div>
       <div className="topbar-right">
+        <button
+          className="icon-btn-top"
+          title={uiMode === 'pro' ? t('mode.toSimple') : t('mode.toPro')}
+          aria-label={uiMode === 'pro' ? t('mode.toSimple') : t('mode.toPro')}
+          onClick={toggleUIMode}
+        >
+          {uiMode === 'pro' ? '😊' : '🛠'}
+        </button>
         <button className="icon-btn-top" aria-label="Rückgängig (Strg+Z)" title="Rückgängig (Strg+Z)" onClick={onUndo}>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>
         </button>

frontend/src/i18n/strings.ts

@@ -0,0 +1,105 @@
+/**
+ * Task H4 – i18n-Grundlage: zentrale Strings-Maps de/en.
+ *
+ * t(key) liefert den Text der aktuellen Sprache; unbekannte Keys
+ * fallen auf den Key zurück (im Code sichtbar, lint-bar über Tests).
+ * Sprache persistiert in localStorage ('webcad.language', Default de).
+ * Komponenten nutzen useT() für Live-Updates bei Sprachwechsel.
+ *
+ * Vollständige mechanische Ersetzung ALLER Komponenten-Texte ist
+ * teilautomatisierbares Follow-up; hier liegt die Infrastruktur und
+ * die Kern-UI-Texte (LayoutBar, Modus).
+ */
+import { useEffect, useState } from 'react';
+
+export const LANGUAGES = ['de', 'en'] as const;
+export type Language = (typeof LANGUAGES)[number];
+
+type StringEntry = string | ((arg?: string) => string);
+
+const STORAGE_KEY = 'webcad.language';
+
+/** Zentrale Text-Maps (Key-Pfad → Text oder parametrisierte Funktion). */
+const DE: Record<string, StringEntry> = {
+  'layouts.title': 'Layouts',
+  'layouts.add': 'Layout hinzufügen',
+  'layouts.empty': 'Keine Layouts',
+  'layouts.delete': (n?: string) => 'Layout ' + (n ?? '') + ' löschen',
+  'layouts.print': 'Layout drucken (A4 landscape)',
+  'layouts.titleblock': (n?: string) => 'Titelblock für ' + (n ?? '') + ' einfügen/aktualisieren',
+  'layouts.zoomto': (n?: string) => 'Zoom zu ' + (n ?? ''),
+  'mode.toSimple': 'Zum einfachen Modus wechseln',
+  'mode.toPro': 'Zum Profi-Modus wechseln',
+};
+
+const EN: Record<string, StringEntry> = {
+  'layouts.title': 'Layouts',
+  'layouts.add': 'Add layout',
+  'layouts.empty': 'No layouts',
+  'layouts.delete': (n?: string) => 'Delete layout ' + (n ?? ''),
+  'layouts.print': 'Print layout (A4 landscape)',
+  'layouts.titleblock': (n?: string) => 'Insert/update title block for ' + (n ?? ''),
+  'layouts.zoomto': (n?: string) => 'Zoom to ' + (n ?? ''),
+  'mode.toSimple': 'Switch to simple mode',
+  'mode.toPro': 'Switch to pro mode',
+};
+
+function mapFor(lang: Language): Record<string, StringEntry> {
+  return lang === 'en' ? EN : DE;
+}
+
+function readStored(): Language {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw === 'de' || raw === 'en') return raw;
+  } catch {
+    // localStorage nicht verfügbar
+  }
+  return 'de';
+}
+
+let current: Language = readStored();
+const listeners = new Set<(lang: Language) => void>();
+
+/** Aktuelle Sprache. */
+export function getLanguage(): Language {
+  return current;
+}
+
+/** Sprache wechseln und persistieren. */
+export function setLanguage(lang: Language): void {
+  current = lang;
+  try {
+    localStorage.setItem(STORAGE_KEY, lang);
+  } catch {
+    // Persistenz optional
+  }
+  for (const cb of listeners) cb(lang);
+}
+
+/** Subscribe auf Sprachwechsel; gibt Unsubscribe zurück. */
+export function subscribeLanguage(cb: (lang: Language) => void): () => void {
+  listeners.add(cb);
+  return () => { listeners.delete(cb); };
+}
+
+/**
+ * Übersetzung: t('key') bzw. t('key', arg) für parametrisierte Texte.
+ * Unbekannter Key → Key als Fallback (offensichtlich sichtbar).
+ */
+export function t(key: string, arg?: string): string {
+  const entry = mapFor(current)[key];
+  if (typeof entry === 'function') return entry(arg);
+  if (typeof entry === 'string') return entry;
+  return key;
+}
+
+/** React-Hook: erzwingt Re-Render bei Sprachwechsel. */
+export function useT(): typeof t {
+  const [, force] = useState(0);
+  useEffect(() => {
+    const off = subscribeLanguage(() => force((n) => n + 1));
+    return off;
+  }, []);
+  return t;
+}

frontend/src/kernel/document/CADDocument.ts

@@ -111,6 +111,27 @@ export class CADDocument {
     this.ydoc.data.blocks.set(block.id, block);
   }
 
+
+  /** Fügt einen Layer hinzu (überschreibt gleiche ID, kein Undo-Schritt). */
+  addLayer(layer: CADLayer): void {
+    this.ydoc.data.layers.set(layer.id, layer);
+  }
+
+  /**
+   * Ersetzt das komplette Layer-Set (Task H2: Projekt-Templates).
+   * Bestehende Layer werden entfernt, Template-Layer übernommen.
+   */
+  replaceLayers(layers: CADLayer[]): void {
+    this.transact(() => {
+      for (const id of Array.from(this.ydoc.data.layers.keys())) {
+        this.ydoc.data.layers.delete(id);
+      }
+      for (const l of layers) {
+        this.ydoc.data.layers.set(l.id, l);
+      }
+    });
+  }
+
   // ── Schreiben ────────────────────────────────────────────
 
   /** Fügt ein Element hinzu (einzelner Aufruf = eigener Undo-Schritt). */

frontend/src/plugins/builtin/core-annotate/index.ts

@@ -127,15 +127,81 @@ export const dimensionTool: ToolExtensionV2 = make2PointAnnotate('dimension', 'B
 export const leaderTool: ToolExtensionV2 = make2PointAnnotate('leader', 'Leader', '\u21b1', buildLeader);
 
 /** V2-Plugin: Beschriftung/Bemaßung (A4.4). */
+// ─────────────────────────────────────────────────────────────
+// Task D4: MTEXT — Mehrzeiliger Text mit optionalem Rahmen.
+// Klick platziert Text (Inhalt aus Options, Zeilenumbrüche erhalten),
+// frame-Option erzeugt ein rect in derselben Transaktion (1 Undo).
+// ─────────────────────────────────────────────────────────────
+
+export const mtextTool: ToolExtensionV2 = {
+  manifest: {
+    id: 'mtext',
+    label: 'Mehrzeilentext',
+    icon: '¶',
+    ribbonTab: 'format',
+    tags: ['basic'],
+    description: 'Mehrzeiligen Text platzieren (Rahmen optional, Task D4)',
+  },
+  optionsSchema: [
+    { key: 'text', label: 'Text', type: 'text' },
+    { key: 'fontSize', label: 'Größe', type: 'number', min: 6, max: 72 },
+    { key: 'frame', label: 'Rahmen', type: 'checkbox' },
+  ],
+  handlers: {
+    down(e, ctx) {
+      const c = ctx as FullToolContext;
+      if (!c.doc) return;
+      const layerId = (c.options.layerId as string | undefined) ?? 'layer-0';
+      const text = (c.options.text as string | undefined) ?? '';
+      const fontSize = (c.options.fontSize as number | undefined) ?? 12;
+      const frame = (c.options.frame as boolean | undefined) ?? false;
+      // Newline ohne Escape-Probleme: charCode 10
+      const NL = String.fromCharCode(10);
+      const lines = text.split(NL);
+      const lineCount = Math.max(1, lines.length);
+      const maxLen = lines.reduce((m, l) => Math.max(m, l.length), 0);
+      const textW = maxLen * fontSize * 0.6;
+      const textH = lineCount * fontSize * 1.4;
+      const els: CADElement[] = [{
+        id: uid('mtext'),
+        type: 'text',
+        layerId,
+        x: e.world.x,
+        y: e.world.y,
+        width: textW,
+        height: textH,
+        properties: { text, fontSize, mtext: true },
+      } as unknown as CADElement];
+      if (frame) {
+        const pad = fontSize * 0.4;
+        els.push({
+          id: uid('mtextframe'),
+          type: 'rect',
+          layerId,
+          x: e.world.x,
+          y: e.world.y,
+          width: textW + pad * 2,
+          height: textH + pad * 2,
+          properties: { stroke: '#9aa0a6', strokeWidth: 1, fill: 'none' },
+        } as unknown as CADElement);
+      }
+      c.doc.transact(() => {
+        for (const el of els) c.doc!.addElement(el);
+      });
+      ctx.setStatus(`Mehrzeilentext platziert (${lineCount} Zeile(n)${frame ? ', mit Rahmen' : ''})`);
+    },
+  },
+};
+
 export const coreAnnotatePlugin: PluginV2 = {
   manifest: {
     id: 'core-annotate',
     name: 'Beschriftung (Kern)',
-    version: '1.0.0',
+    version: '1.1.0',
     author: 'web-cad team',
     description: 'Text, Bemaßung, Leader (V2).',
     category: 'tools',
     enabledByDefault: true,
   },
-  tools: [textTool, dimensionTool, leaderTool],
+  tools: [textTool, dimensionTool, leaderTool, mtextTool],
 };

frontend/src/plugins/builtin/core-drawing/index.ts

@@ -414,15 +414,492 @@ function buildRevCloud(pts: Pt[], ctx: FullToolContext): CADElement {
 }
 
 /** V2-Plugin: Kern-Zeichenwerkzeuge (A4.x schrittweise migriert). */
+// ─────────────────────────────────────────────────────────────
+// Task D1: Ellipse (3-Klick: Zentrum→RadiusX→RadiusY) +
+// Ellipsenbogen via startAngle/endAngle-Options.
+// ─────────────────────────────────────────────────────────────
+
+/** Ellipsen-Sitzung: Phase 0=nichts, 1=Zentrum, 2=RadiusX fixiert. */
+let ellipsePhase = 0;
+let ellipseCenter: Pt | null = null;
+let ellipseRadiusX = 0;
+/** Rotation aus der Klick2-Zugrichtung (Grad, 0°=+x, CW-positiv). */
+let ellipseRotationDeg = 0;
+
+/**
+ * Ellipse als Polyline-Approximation (F5-Parser-Konvention):
+ * Voll-Ellipse → 64 Punkte geschlossen (polygon), Bogen → proportional
+ * offene Polyline. rotation aus der Klick2-Zugrichtung (Grad, 0°=+x).
+ */
+function buildEllipse(
+  cx: number,
+  cy: number,
+  rx: number,
+  ry: number,
+  rotationDeg: number,
+  ctx: FullToolContext,
+  startAngle = 0,
+  endAngle = 360,
+): CADElement {
+  const stroke = (ctx.options.strokeColor as string | undefined) ?? '#e0e0f0';
+  const layerId = (ctx.options.layerId as string | undefined) ?? 'layer-0';
+  const phi = (rotationDeg * Math.PI) / 180;
+  const cosP = Math.cos(phi), sinP = Math.sin(phi);
+  const FULL = 360;
+  const span = Math.min(endAngle, FULL) - Math.min(startAngle, FULL);
+  const isFull = span >= FULL - 0.001 || span <= 0.001;
+  const n = Math.max(2, Math.round(64 * (Math.max(span, 1) / FULL)));
+  const pts: Pt[] = [];
+  for (let i = 0; i < n; i++) {
+    const t = ((startAngle + (span * i) / (isFull ? n : (n - 1))) * Math.PI) / 180;
+    const x = rx * Math.cos(t);
+    const y = ry * Math.sin(t);
+    pts.push({
+      x: cx + x * cosP - y * sinP,
+      y: cy + x * sinP + y * cosP,
+    });
+  }
+  const xs = pts.map((p) => p.x), ys = pts.map((p) => p.y);
+  const minX = Math.min(...xs), minY = Math.min(...ys);
+  const type = isFull ? 'polygon' : 'polyline';
+  return {
+    id: uid('ellipse'),
+    type,
+    layerId,
+    x: minX + (Math.max(...xs) - minX) / 2,
+    y: minY + (Math.max(...ys) - minY) / 2,
+    width: Math.max(...xs) - minX,
+    height: Math.max(...ys) - minY,
+    properties: {
+      points: pts,
+      stroke,
+      strokeWidth: 1,
+      cx, cy, rx, ry,
+      rotation: rotationDeg,
+      ...(isFull ? {} : { startAngle, endAngle }),
+    },
+  } as unknown as CADElement;
+}
+
+export const ellipseTool: ToolExtensionV2 = {
+  manifest: {
+    id: 'ellipse',
+    label: 'Ellipse',
+    icon: '\u2b2d',
+    ribbonTab: 'canvas',
+    tags: ['basic'],
+    description: 'Ellipse zeichnen: Zentrum klicken, RadiusX, RadiusY (Bogen via Optionen)',
+  },
+  optionsSchema: [
+    { key: 'strokeColor', label: 'Farbe', type: 'color' },
+    { key: 'startAngle', label: 'Bogen-Start (°)', type: 'number', min: 0, max: 360 },
+    { key: 'endAngle', label: 'Bogen-Ende (°)', type: 'number', min: 0, max: 360 },
+  ],
+  handlers: {
+    down(e, ctx) {
+      const c = ctx as FullToolContext;
+      if (ellipsePhase === 0) {
+        ellipseCenter = e.world;
+        ellipsePhase = 1;
+        ctx.setStatus('Ellipse: Zentrum gesetzt – RadiusX klicken (Richtung = Rotation)');
+      } else if (ellipsePhase === 1) {
+        if (!ellipseCenter) { ellipsePhase = 0; return; }
+        const dx = e.world.x - ellipseCenter.x;
+        const dy = e.world.y - ellipseCenter.y;
+        ellipseRadiusX = Math.hypot(dx, dy);
+        ellipseRotationDeg = ((Math.atan2(dy, dx) * 180) / Math.PI + 360) % 360;
+        ellipsePhase = 2;
+        ctx.setStatus('Ellipse: RadiusX gesetzt – RadiusY klicken');
+      } else {
+        // Phase 2: Commit
+        if (!ellipseCenter || !c.doc) { ellipsePhase = 0; ellipseCenter = null; return; }
+        const dx = e.world.x - ellipseCenter.x;
+        const dy = e.world.y - ellipseCenter.y;
+        const ry = Math.hypot(dx, dy);
+        // Rotation: Winkel des Klick2-Vektors gegenüber der +x-Achse
+        const startAngle = (ctx.options.startAngle as number | undefined) ?? 0;
+        const endAngle = (ctx.options.endAngle as number | undefined) ?? 360;
+        const el = buildEllipse(
+          ellipseCenter.x, ellipseCenter.y,
+          ellipseRadiusX, ry,
+          ellipseRotationDeg,
+          c, startAngle, endAngle,
+        );
+        c.doc.transact(() => c.doc!.addElement(el));
+        ellipsePhase = 0;
+        ellipseCenter = null;
+        ctx.setPreview?.(null);
+        ctx.setStatus(`Ellipse erstellt (${el.id})`);
+      }
+    },
+    move(e, ctx) {
+      const c = ctx as FullToolContext;
+      if (ellipsePhase === 1 && ellipseCenter) {
+        // RadiusX-Linie als Preview
+        const r = Math.hypot(e.world.x - ellipseCenter.x, e.world.y - ellipseCenter.y);
+        const rotDeg = ((Math.atan2(e.world.y - ellipseCenter.y, e.world.x - ellipseCenter.x) * 180) / Math.PI + 360) % 360;
+        const startAngle = (ctx.options.startAngle as number | undefined) ?? 0;
+        const endAngle = (ctx.options.endAngle as number | undefined) ?? 360;
+        ctx.setPreview?.(buildEllipse(ellipseCenter.x, ellipseCenter.y, r, r, rotDeg, c, startAngle, endAngle));
+      } else if (ellipsePhase === 2 && ellipseCenter) {
+        const ry = Math.hypot(e.world.x - ellipseCenter.x, e.world.y - ellipseCenter.y);
+        const rotDeg = ellipseRotationDeg;
+        const startAngle = (ctx.options.startAngle as number | undefined) ?? 0;
+        const endAngle = (ctx.options.endAngle as number | undefined) ?? 360;
+        ctx.setPreview?.(buildEllipse(ellipseCenter.x, ellipseCenter.y, ellipseRadiusX, ry, rotDeg, c, startAngle, endAngle));
+      }
+    },
+    cancel(ctx) {
+      ellipsePhase = 0;
+      ellipseCenter = null;
+      ctx.setPreview?.(null);
+      ctx.setStatus('Ellipse abgebrochen');
+    },
+  },
+};
+
+// ─────────────────────────────────────────────────────────────
+// Task D2: Spline (CV-basiert) — Kontrollpunkt-Klick-Sequenz,
+// ENTER committet ab 3 CVs. Catmull-Rom-Interpolation (Kurve läuft
+// DURCH alle CVs, schwingt an Ecken = echte Glättung).
+// ─────────────────────────────────────────────────────────────
+
+let splinePoints: Pt[] = [];
+
+/**
+ * Catmull-Rom-Spline-Interpolation: Für n CVs werden n-1 Segmente
+ * mit je SEG Samples erzeugt. Tangenten aus Nachbarn (Endpunkte
+ * geklemmt). Ergibt eine glatte Kurve durch alle CVs.
+ */
+function catmullRom(cvs: Pt[], seg = 16): Pt[] {
+  if (cvs.length < 2) return [...cvs];
+  const out: Pt[] = [];
+  const n = cvs.length;
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = cvs[Math.max(0, i - 1)];
+    const p1 = cvs[i];
+    const p2 = cvs[i + 1];
+    const p3 = cvs[Math.min(n - 1, i + 2)];
+    for (let s = (i === 0 ? 0 : 1); s <= seg; s++) {
+      const t = s / seg;
+      const t2 = t * t;
+      const t3 = t2 * t;
+      const x = 0.5 * ((2 * p1.x) + (-p0.x + p2.x) * t + (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 + (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3);
+      const y = 0.5 * ((2 * p1.y) + (-p0.y + p2.y) * t + (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 + (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3);
+      out.push({ x, y });
+    }
+  }
+  return out;
+}
+
+function buildSpline(cvs: Pt[], ctx: FullToolContext): CADElement {
+  const stroke = (ctx.options.strokeColor as string | undefined) ?? '#e0e0f0';
+  const layerId = (ctx.options.layerId as string | undefined) ?? 'layer-0';
+  const pts = catmullRom(cvs);
+  const xs = pts.map((p) => p.x), ys = pts.map((p) => p.y);
+  const minX = Math.min(...xs), minY = Math.min(...ys);
+  const maxX = Math.max(...xs), maxY = Math.max(...ys);
+  return {
+    id: uid('spline'),
+    type: 'polyline',
+    layerId,
+    x: minX + (maxX - minX) / 2,
+    y: minY + (maxY - minY) / 2,
+    width: maxX - minX,
+    height: maxY - minY,
+    properties: {
+      points: pts,
+      controlPoints: [...cvs],
+      stroke,
+      strokeWidth: 1,
+    },
+  } as unknown as CADElement;
+}
+
+export const splineTool: ToolExtensionV2 = {
+  manifest: {
+    id: 'spline',
+    label: 'Spline',
+    icon: '\u2248',
+    ribbonTab: 'canvas',
+    tags: ['basic'],
+    description: 'Spline zeichnen: Kontrollpunkte klicken, ENTER beendet',
+  },
+  optionsSchema: [{ key: 'strokeColor', label: 'Farbe', type: 'color' }],
+  handlers: {
+    down(e, ctx) {
+      splinePoints.push(e.world);
+      ctx.setStatus(`Spline: ${splinePoints.length} Kontrollpunkte – ENTER beendet`);
+    },
+    move(e, ctx) {
+      const c = ctx as FullToolContext;
+      if (splinePoints.length === 0) return;
+      const pts = [...splinePoints, e.world];
+      ctx.setPreview?.(buildSpline(pts, c));
+    },
+    up() { /* commit nur via ENTER */ },
+    key(e, ctx) {
+      if (e.key !== 'Enter' && e.key !== 'ENTER') return false;
+      const c = ctx as FullToolContext;
+      if (splinePoints.length < 3) {
+        ctx.setStatus(`Spline benötigt mindestens 3 Kontrollpunkte (aktuell ${splinePoints.length})`);
+        return true;
+      }
+      if (!c.doc) return false;
+      const el = buildSpline(splinePoints, c);
+      c.doc.transact(() => c.doc!.addElement(el));
+      const count = splinePoints.length;
+      splinePoints = [];
+      ctx.setPreview?.(null);
+      ctx.setStatus(`Spline erstellt (${count} CVs, ${el.id})`);
+      return true;
+    },
+    cancel(ctx) {
+      splinePoints = [];
+      ctx.setPreview?.(null);
+      ctx.setStatus('Spline abgebrochen');
+    },
+  },
+};
+
+// ─────────────────────────────────────────────────────────────
+// Task D3: Point/XLine/Ray — Konstruktions-Elemente auf defpoints.
+// ─────────────────────────────────────────────────────────────
+
+/** Auto-Anlegen des defpoints-Layers (Task D3) falls fehlt. */
+function ensureDefpointsLayer(ctx: FullToolContext): void {
+  const doc = ctx.doc as unknown as {
+    getLayer(id: string): unknown;
+    addLayer(l: unknown): void;
+  } | undefined;
+  if (!doc || doc.getLayer('defpoints')) return;
+  doc.addLayer({
+    id: 'defpoints',
+    name: 'defpoints',
+    visible: true,
+    locked: false,
+    color: '#8a8f98',
+    lineType: 'dotted',
+    transparency: 0.5,
+    sortOrder: 999,
+    parentId: null,
+  });
+}
+
+/** Konstruktions-Element-Basis-Props (construction-Tags, Task D3). */
+function constructionProps(): Record<string, unknown> {
+  return { stroke: '#8a8f98', strokeWidth: 1, construction: true };
+}
+
+export const pointTool: ToolExtensionV2 = {
+  manifest: {
+    id: 'point',
+    label: 'Punkt',
+    icon: '\u2022',
+    ribbonTab: 'canvas',
+    tags: ['basic'],
+    description: 'Konstruktionspunkt platzieren (defpoints-Layer)',
+  },
+  optionsSchema: [],
+  handlers: {
+    down(e, ctx) {
+      const c = ctx as FullToolContext;
+      if (!c.doc) return;
+      ensureDefpointsLayer(c);
+      const r = 1.5;
+      const el: CADElement = {
+        id: uid('point'),
+        type: 'circle',
+        layerId: 'defpoints',
+        x: e.world.x,
+        y: e.world.y,
+        width: r * 2,
+        height: r * 2,
+        properties: { ...constructionProps(), radius: r, point: true },
+      } as unknown as CADElement;
+      c.doc.transact(() => c.doc!.addElement(el));
+      ctx.setStatus(`Punkt platziert (${el.id})`);
+    },
+  },
+};
+
+/** XLine: sehr lange Linie in BEIDE Richtungen um den Basispunkt. */
+let xlineBase: Pt | null = null;
+
+export const xlineTool: ToolExtensionV2 = {
+  manifest: {
+    id: 'xline',
+    label: 'Konstruktionslinie',
+    icon: '\u2194',
+    ribbonTab: 'canvas',
+    tags: ['basic'],
+    description: 'Unendliche Konstruktionslinie: Basispunkt + Richtung klicken',
+  },
+  optionsSchema: [],
+  handlers: {
+    down(e, ctx) {
+      const c = ctx as FullToolContext;
+      if (!c.doc) return;
+      if (!xlineBase) {
+        xlineBase = e.world;
+        ctx.setStatus('Konstruktionslinie: Basis gesetzt – Richtung klicken');
+        return;
+      }
+      ensureDefpointsLayer(c);
+      const dx = e.world.x - xlineBase.x;
+      const dy = e.world.y - xlineBase.y;
+      const len = Math.hypot(dx, dy);
+      if (len < 0.001) { xlineBase = null; return; }
+      const ux = dx / len, uy = dy / len;
+      const L = 100000;
+      const el: CADElement = {
+        id: uid('xline'),
+        type: 'line',
+        layerId: 'defpoints',
+        x: xlineBase.x,
+        y: xlineBase.y,
+        width: 0,
+        height: 0,
+        properties: {
+          ...constructionProps(),
+          x1: xlineBase.x - ux * L,
+          y1: xlineBase.y - uy * L,
+          x2: xlineBase.x + ux * L,
+          y2: xlineBase.y + uy * L,
+        },
+      } as unknown as CADElement;
+      c.doc.transact(() => c.doc!.addElement(el));
+      xlineBase = null;
+      ctx.setPreview?.(null);
+      ctx.setStatus(`Konstruktionslinie erstellt (${el.id})`);
+    },
+    move(e, ctx) {
+      const c = ctx as FullToolContext;
+      if (!xlineBase) return;
+      const dx = e.world.x - xlineBase.x;
+      const dy = e.world.y - xlineBase.y;
+      const len = Math.hypot(dx, dy);
+      if (len < 0.001) return;
+      const ux = dx / len, uy = dy / len;
+      const L = 100000;
+      ctx.setPreview?.({
+        id: '__preview_xline__',
+        type: 'line',
+        layerId: 'defpoints',
+        x: xlineBase.x,
+        y: xlineBase.y,
+        width: 0,
+        height: 0,
+        properties: {
+          ...constructionProps(),
+          x1: xlineBase.x - ux * L,
+          y1: xlineBase.y - uy * L,
+          x2: xlineBase.x + ux * L,
+          y2: xlineBase.y + uy * L,
+        },
+      } as unknown as CADElement);
+    },
+    cancel(ctx) {
+      xlineBase = null;
+      ctx.setPreview?.(null);
+      ctx.setStatus('Konstruktionslinie abgebrochen');
+    },
+  },
+};
+
+/** Ray: Linie ab Basispunkt NUR in Klickrichtung. */
+let rayBase: Pt | null = null;
+
+export const rayTool: ToolExtensionV2 = {
+  manifest: {
+    id: 'ray',
+    label: 'Strahl',
+    icon: '\u2192',
+    ribbonTab: 'canvas',
+    tags: ['basic'],
+    description: 'Strahl ab Basispunkt in Klickrichtung',
+  },
+  optionsSchema: [],
+  handlers: {
+    down(e, ctx) {
+      const c = ctx as FullToolContext;
+      if (!c.doc) return;
+      if (!rayBase) {
+        rayBase = e.world;
+        ctx.setStatus('Strahl: Basis gesetzt – Richtung klicken');
+        return;
+      }
+      ensureDefpointsLayer(c);
+      const dx = e.world.x - rayBase.x;
+      const dy = e.world.y - rayBase.y;
+      const len = Math.hypot(dx, dy);
+      if (len < 0.001) { rayBase = null; return; }
+      const ux = dx / len, uy = dy / len;
+      const L = 100000;
+      const el: CADElement = {
+        id: uid('ray'),
+        type: 'line',
+        layerId: 'defpoints',
+        x: rayBase.x,
+        y: rayBase.y,
+        width: 0,
+        height: 0,
+        properties: {
+          ...constructionProps(),
+          x1: rayBase.x,
+          y1: rayBase.y,
+          x2: rayBase.x + ux * L,
+          y2: rayBase.y + uy * L,
+        },
+      } as unknown as CADElement;
+      c.doc.transact(() => c.doc!.addElement(el));
+      rayBase = null;
+      ctx.setPreview?.(null);
+      ctx.setStatus(`Strahl erstellt (${el.id})`);
+    },
+    move(e, ctx) {
+      const c = ctx as FullToolContext;
+      if (!rayBase) return;
+      const dx = e.world.x - rayBase.x;
+      const dy = e.world.y - rayBase.y;
+      const len = Math.hypot(dx, dy);
+      if (len < 0.001) return;
+      const ux = dx / len, uy = dy / len;
+      const L = 100000;
+      ctx.setPreview?.({
+        id: '__preview_ray__',
+        type: 'line',
+        layerId: 'defpoints',
+        x: rayBase.x,
+        y: rayBase.y,
+        width: 0,
+        height: 0,
+        properties: {
+          ...constructionProps(),
+          x1: rayBase.x,
+          y1: rayBase.y,
+          x2: rayBase.x + ux * L,
+          y2: rayBase.y + uy * L,
+        },
+      } as unknown as CADElement);
+    },
+    cancel(ctx) {
+      rayBase = null;
+      ctx.setPreview?.(null);
+      ctx.setStatus('Strahl abgebrochen');
+    },
+  },
+};
+
 export const coreDrawingPlugin: PluginV2 = {
   manifest: {
     id: 'core-drawing',
     name: 'Zeichnen (Kern)',
-    version: '1.3.0',
+    version: '1.5.0',
     author: 'web-cad team',
     description: 'Zeichenwerkzeuge V2: Linie, Rechteck, Kreis, Bogen, Polylinie, Polygon, RevCloud.',
     category: 'tools',
     enabledByDefault: true,
   },
-  tools: [lineTool, rectTool, circleTool, arcTool, polylineTool, polygonTool, revcloudTool],
+  tools: [lineTool, rectTool, circleTool, arcTool, polylineTool, polygonTool, revcloudTool, ellipseTool, splineTool, pointTool, xlineTool, rayTool],
 };

frontend/src/plugins/builtin/core-measure/index.ts

@@ -6,7 +6,8 @@
  * Distanzformatierung via bestehendem formatDistance(unit, scaleFactor).
  */
 import type { PluginV2, ToolExtensionV2, FullToolContext } from '../../types';
-import { formatDistance } from '../../../utils/format';
+import { formatDistance, formatArea } from '../../../utils/format';
+import { polygonArea } from '../../../tools/modification/geometry';
 
 type MeasurePhase = 0 | 1; // 0=wartet auf Start, 1=wartet auf Ende
 let measureStart: import('../../../tools/modification/geometry').Pt | null = null;
@@ -46,6 +47,70 @@ export const measureTool: ToolExtensionV2 = {
 };
 
 /** V2-Plugin: Messwerkzeuge. */
+// ─────────────────────────────────────────────────────────────
+// Task H5: measure-area — Polygon-Fläche messen (Status-only).
+// Klick: Punkt hinzufügen; ENTER: committet Fläche ab 3 Punkten;
+// ESC/Rechtsklick: Abbruch. Kein Element-Commit (wie measure).
+// ─────────────────────────────────────────────────────────────
+let areaPts: Array<{ x: number; y: number }> = [];
+
+export const measureAreaTool: ToolExtensionV2 = {
+  manifest: {
+    id: 'measure-area',
+    label: 'Fläche messen',
+    icon: '\u25a9',
+    ribbonTab: 'canvas',
+    tags: ['basic'],
+    description: 'Polygon-Fläche messen: Punkte klicken, ENTER schließt ab',
+  },
+  optionsSchema: [
+    { key: 'unit', label: 'Einheit', type: 'select', options: [
+      { value: 'mm', label: 'mm' }, { value: 'cm', label: 'cm' }, { value: 'm', label: 'm' },
+    ] },
+    { key: 'scaleFactor', label: 'Maßstab (Welt→mm)', type: 'number' },
+  ],
+  handlers: {
+    down(e, ctx) {
+      areaPts.push({ x: e.world.x, y: e.world.y });
+      if (areaPts.length === 1) {
+        ctx.setStatus(`Flächenmessung gestartet (1 Punkt) — weitere Punkte klicken, ENTER schließt ab`);
+      } else if (areaPts.length >= 3) {
+        const unit = (ctx.options.unit as string | undefined) ?? 'mm';
+        const scale = (ctx.options.scaleFactor as number | undefined) ?? 1;
+        ctx.setStatus(`Fläche: ${formatArea(polygonArea(areaPts), unit as never, scale)} — weiter klicken oder ENTER`);
+      } else {
+        ctx.setStatus(`${areaPts.length} Punkte — mindestens 3 benötigt, weitere Punkte klicken`);
+      }
+    },
+    move(e, ctx) {
+      if (areaPts.length < 2) return;
+      const probe = [...areaPts, { x: e.world.x, y: e.world.y }];
+      if (probe.length < 3) return;
+      const unit = (ctx.options.unit as string | undefined) ?? 'mm';
+      const scale = (ctx.options.scaleFactor as number | undefined) ?? 1;
+      ctx.setStatus(`Fläche: ${formatArea(polygonArea(probe), unit as never, scale)}`);
+    },
+    key(k, ctx) {
+      if (k.key === 'Enter' || k.key === 'ENTER') {
+        if (areaPts.length >= 3) {
+          const unit = (ctx.options.unit as string | undefined) ?? 'mm';
+          const scale = (ctx.options.scaleFactor as number | undefined) ?? 1;
+          ctx.setStatus(`Flächenmessung: ${formatArea(polygonArea(areaPts), unit as never, scale)} (${areaPts.length} Punkte)`);
+          areaPts = [];
+        } else {
+          ctx.setStatus(`Flächenmessung benötigt mindestens 3 Punkte (aktuell ${areaPts.length})`);
+        }
+        return true; // ENTER konsumiert
+      }
+      return false;
+    },
+    cancel(ctx) {
+      areaPts = [];
+      ctx.setStatus('Flächenmessung abgebrochen');
+    },
+  },
+};
+
 export const coreMeasurePlugin: PluginV2 = {
   manifest: {
     id: 'core-measure',
@@ -56,5 +121,5 @@ export const coreMeasurePlugin: PluginV2 = {
     category: 'tools',
     enabledByDefault: true,
   },
-  tools: [measureTool],
+  tools: [measureTool, measureAreaTool],
 };

frontend/src/plugins/builtin/core-modify/index.ts

@@ -82,6 +82,109 @@ function hitHandle(
   return null;
 }
 
+// ─────────────────────────────────────────────────────────────
+// Task D9: GripEditing — Vertex-/Center-Grips (reine Funktion).
+// ─────────────────────────────────────────────────────────────
+
+export interface GripPoint {
+  kind: 'vertex' | 'center' | 'corner';
+  point: Pt;
+  index: number;
+}
+
+/**
+ * Element-spezifische Griff-Punkte (Task D9):
+ * line = beide Endpunkte, polyline/polygon = alle Vertices,
+ * circle/arc = Zentrum, rect/default = 4 BBox-Ecken (C3fin-Skalierung).
+ */
+export function getGripPoints(el: CADElement): GripPoint[] {
+  const props = el.properties as Record<string, unknown>;
+  const type = String(el.type);
+  if (
+    type === 'line' &&
+    props.x1 !== undefined && props.y1 !== undefined &&
+    props.x2 !== undefined && props.y2 !== undefined
+  ) {
+    return [
+      { kind: 'vertex', point: { x: props.x1 as number, y: props.y1 as number }, index: 0 },
+      { kind: 'vertex', point: { x: props.x2 as number, y: props.y2 as number }, index: 1 },
+    ];
+  }
+  if (type === 'polyline' || type === 'polygon') {
+    const pts = (props.points as Pt[] | undefined) ?? [];
+    return pts.map((p, i) => ({ kind: 'vertex' as const, point: { x: p.x, y: p.y }, index: i }));
+  }
+  if (type === 'circle' || type === 'arc') {
+    return [{ kind: 'center', point: { x: el.x, y: el.y }, index: 0 }];
+  }
+  // rect und alle anderen: BBox-Ecken (Corner-Drag/Skalierung, C3fin)
+  const minX = el.x - el.width / 2;
+  const minY = el.y - el.height / 2;
+  const maxX = el.x + el.width / 2;
+  const maxY = el.y + el.height / 2;
+  return [
+    { kind: 'corner', point: { x: minX, y: minY }, index: 0 },
+    { kind: 'corner', point: { x: maxX, y: minY }, index: 1 },
+    { kind: 'corner', point: { x: maxX, y: maxY }, index: 2 },
+    { kind: 'corner', point: { x: minX, y: maxY }, index: 3 },
+  ];
+}
+
+/**
+ * Wendet eine Vertex-/Center-Drag-Position an (Task D9) und liefert
+ * das aktualisierte Element (reine Funktion — für Preview UND Commit).
+ */
+function applyVertexDrag(
+  el: CADElement,
+  drag: { el: CADElement; gripKind: 'vertex' | 'center'; index: number },
+  wx: number,
+  wy: number,
+): CADElement {
+  const props = { ...(el.properties as Record<string, unknown>) };
+  const type = String(el.type);
+  if (drag.gripKind === 'center') {
+    return { ...el, x: wx, y: wy, properties: props as CADElement['properties'] } as CADElement;
+  }
+  if (type === 'line') {
+    if (drag.index === 0) { props.x1 = wx; props.y1 = wy; }
+    else { props.x2 = wx; props.y2 = wy; }
+    // BBox aktualisieren
+    const x1 = props.x1 as number, y1 = props.y1 as number, x2 = props.x2 as number, y2 = props.y2 as number;
+    return {
+      ...el,
+      x: (x1 + x2) / 2,
+      y: (y1 + y2) / 2,
+      width: Math.abs(x2 - x1),
+      height: Math.abs(y2 - y1),
+      properties: props as CADElement['properties'],
+    } as CADElement;
+  }
+  if (type === 'polyline' || type === 'polygon') {
+    const pts = [...((props.points as Pt[] | undefined) ?? [])];
+    if (drag.index < pts.length) pts[drag.index] = { x: wx, y: wy };
+    props.points = pts;
+    const xs = pts.map((p) => p.x), ys = pts.map((p) => p.y);
+    const minX = Math.min(...xs), minY = Math.min(...ys);
+    const maxX = Math.max(...xs), maxY = Math.max(...ys);
+    return {
+      ...el,
+      x: minX + (maxX - minX) / 2,
+      y: minY + (maxY - minY) / 2,
+      width: maxX - minX,
+      height: maxY - minY,
+      properties: props as CADElement['properties'],
+    } as CADElement;
+  }
+  return el;
+}
+
+/** Vertex-/Center-Drag-Sitzung (Task D9). */
+let vertexDrag: {
+  el: CADElement;
+  gripKind: 'vertex' | 'center';
+  index: number;
+} | null = null;
+
 export const selectTool: ToolExtensionV2 = {
   manifest: {
     id: 'select',
@@ -101,6 +204,28 @@ export const selectTool: ToolExtensionV2 = {
       const subtractive = e.ctrl;
       const hit = bridge.hitTest(e.world.x, e.world.y, 5);
 
+      // ── Task D9: Vertex-/Center-Grip-Prüfung VOR BBox-Corners ──
+      // (spezifischere Grips gewinnen gegenüber Corner-Skalierung)
+      if (!additive && !subtractive && c.doc) {
+        const GRIP_TOL = 8;
+        for (const id of bridge.getIds()) {
+          const el = c.doc.getElement(id);
+          if (!el) continue;
+          for (const g of getGripPoints(el)) {
+            if (g.kind === 'corner') continue; // Corner unten (C3fin)
+            if (
+              Math.abs(e.world.x - g.point.x) <= GRIP_TOL &&
+              Math.abs(e.world.y - g.point.y) <= GRIP_TOL
+            ) {
+              vertexDrag = { el, gripKind: g.kind, index: g.index };
+              const what = g.kind === 'center' ? 'Zentrum' : `Punkt ${g.index + 1}`;
+              ctx.setStatus(`${what} gegriffen — ziehen zum Verschieben`);
+              return;
+            }
+          }
+        }
+      }
+
       // ── Handle-Drag-Start (Task C3fin interaktiv) ──
       // Wenn bereits Elemente selektiert sind und der Klick auf eine Ecke
       // eines davon trifft → Handle-Drag starten statt neu zu wählen.
@@ -133,6 +258,15 @@ export const selectTool: ToolExtensionV2 = {
     },
 
     move(e, ctx) {
+      // ── Task D9: Vertex-Drag-Preview (nur der Punkt aktualisiert) ──
+      if (vertexDrag) {
+        const c = ctx as FullToolContext;
+        const el = c.doc?.getElement(vertexDrag.el.id);
+        if (!el) return;
+        const updated = applyVertexDrag(el, vertexDrag, e.world.x, e.world.y);
+        c.setPreview?.(updated);
+        return;
+      }
       // Live-Skalierung während Handle-Drag:
       if (!handleDrag) return;
       const c = ctx as FullToolContext;
@@ -174,6 +308,26 @@ export const selectTool: ToolExtensionV2 = {
     },
 
     up(e, ctx) {
+      // ── Task D9: Vertex-Commit (nur der Punkt, 1 Undo-Schritt) ──
+      if (vertexDrag) {
+        const c = ctx as FullToolContext;
+        const el = c.doc?.getElement(vertexDrag.el.id);
+        if (el && c.doc) {
+          const updated = applyVertexDrag(el, vertexDrag, e.world.x, e.world.y);
+          c.doc.transact(() => {
+            c.doc!.updateElement(el.id, {
+              x: updated.x,
+              y: updated.y,
+              properties: updated.properties as CADElement['properties'],
+            });
+          });
+          const what = vertexDrag.gripKind === 'center' ? 'Zentrum' : `Punkt ${vertexDrag.index + 1}`;
+          ctx.setStatus(`${what} verschoben`);
+        }
+        vertexDrag = null;
+        ctx.setPreview?.(null);
+        return;
+      }
       if (!handleDrag) return;
       const c = ctx as FullToolContext;
       if (!c.doc) { handleDrag = null; return; }
@@ -224,6 +378,7 @@ export const selectTool: ToolExtensionV2 = {
 
     cancel(ctx) {
       handleDrag = null;
+      vertexDrag = null;
       ctx.setPreview?.(null);
     },
   },
@@ -922,6 +1077,110 @@ function makeArrayTool(mode: 'array-rect' | 'array-polar'): ToolExtensionV2 {
 export const arrayRectTool: ToolExtensionV2 = makeArrayTool('array-rect');
 export const arrayPolarTool: ToolExtensionV2 = makeArrayTool('array-polar');
 
+// ─────────────────────────────────────────────────────────────
+// Task D10-Rest: array-path — Elemente entlang einer Polyline
+// (Pfad) verteilen. Klick1: Quelle (Auto-HitSelect), Klick2: auf
+// die Pfad-Polyline klicken. count Kopien gleichmäßig über die
+// Gesamtlänge (s = i/(count-1)·total), ALLES in 1 Transaktion.
+// ─────────────────────────────────────────────────────────────
+
+let arrayPathBase: Pt | null = null;
+
+/** Punkt auf einer Polyline bei kumulierter Länge s (0..total). */
+function pointAlongPolyline(pts: Pt[], s: number): Pt {
+  if (pts.length === 0) return { x: 0, y: 0 };
+  if (pts.length === 1 || s <= 0) return { ...pts[0] };
+  let remaining = s;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const dx = pts[i + 1].x - pts[i].x;
+    const dy = pts[i + 1].y - pts[i].y;
+    const segLen = Math.hypot(dx, dy);
+    if (segLen <= 0) continue;
+    if (remaining <= segLen) {
+      const t = remaining / segLen;
+      return { x: pts[i].x + dx * t, y: pts[i].y + dy * t };
+    }
+    remaining -= segLen;
+  }
+  return { ...pts[pts.length - 1] };
+}
+
+export const arrayPathTool: ToolExtensionV2 = {
+  manifest: {
+    id: 'array-path',
+    label: 'Array Pfad',
+    icon: '∿',
+    ribbonTab: 'canvas',
+    tags: ['pro'],
+    description: 'Array entlang Pfad: Auswahl treffen, dann auf Pfad-Polyline klicken (Task D10)',
+  },
+  optionsSchema: [
+    { key: 'count', label: 'Anzahl', type: 'number', min: 2, max: 100 },
+  ],
+  handlers: {
+    down(e, ctx) {
+      const c = ctx as FullToolContext;
+      if (!c.doc || !c.selection) return;
+      if (!arrayPathBase) {
+        if (c.selection.getIds().length === 0) {
+          const hit = c.selection.hitTest(e.world.x, e.world.y, 5);
+          if (!hit) {
+            ctx.setStatus('Array Pfad: zuerst Element(e) auswählen');
+            return;
+          }
+          c.selection.setIds([hit.id]);
+        }
+        arrayPathBase = e.world;
+        ctx.setStatus(`Array Pfad: auf Pfad-Polyline klicken (${c.selection.getIds().length} Element(e))`);
+        return;
+      }
+      // Zweiter Klick: muss eine Polyline als Pfad treffen
+      const pathHit = c.selection.hitTest(e.world.x, e.world.y, 8);
+      if (!pathHit || (pathHit.type !== 'polyline' && pathHit.type !== 'polygon')) {
+        ctx.setStatus('Array Pfad: zweiter Klick muss eine Polyline als Pfad treffen');
+        arrayPathBase = null;
+        return;
+      }
+      const pathPts = (pathHit.properties as Record<string, unknown>).points as Pt[] | undefined;
+      if (!pathPts || pathPts.length < 2) {
+        ctx.setStatus('Array Pfad: Pfad-Polyline hat zu wenige Punkte');
+        arrayPathBase = null;
+        return;
+      }
+      const count = Math.max(2, (c.options.count as number | undefined) ?? 5);
+      const ids = c.selection.getIds().filter((id) => id !== pathHit.id);
+      // Gesamtlänge des Pfads
+      let total = 0;
+      for (let i = 0; i < pathPts.length - 1; i++) {
+        total += Math.hypot(pathPts[i + 1].x - pathPts[i].x, pathPts[i + 1].y - pathPts[i].y);
+      }
+      c.doc.transact(() => {
+        for (const id of ids) {
+          const el = c.doc!.getElement(id);
+          if (!el) continue;
+          for (let i = 0; i < count; i++) {
+            const s = total * (i / Math.max(1, count - 1));
+            const pos = pointAlongPolyline(pathPts, s);
+            c.doc!.addElement({
+              ...el,
+              id: uid('arrp'),
+              x: pos.x,
+              y: pos.y,
+            } as CADElement);
+          }
+        }
+      });
+      arrayPathBase = null;
+      ctx.setStatus(`Array Pfad: ${ids.length * count} Kopien entlang Pfad verteilt`);
+    },
+    cancel(ctx) {
+      arrayPathBase = null;
+      ctx.setPreview?.(null);
+      ctx.setStatus('Array Pfad abgebrochen');
+    },
+  },
+};
+
 // ─────────────────────────────────────────────────────────────
 // Chamfer (Task D-Ext): schneidet zwei sich schneidende Linien an einer
 // festen Distanz vom Schnittpunkt und verbindet die Enden mit einer
@@ -1328,5 +1587,5 @@ export const coreModifyPlugin: PluginV2 = {
     category: 'tools',
     enabledByDefault: true,
   },
-  tools: [selectTool, hatchTool, moveTool, copyTool, rotateTool, scaleTool, mirrorTool, deleteTool, offsetTool, trimTool, extendTool, filletTool, arrayRectTool, arrayPolarTool, chamferTool, lengthenTool, joinTool, explodeTool, alignTool, polylineEditTool, stretchTool, breakTool],
+  tools: [selectTool, hatchTool, moveTool, copyTool, rotateTool, scaleTool, mirrorTool, deleteTool, offsetTool, trimTool, extendTool, filletTool, arrayRectTool, arrayPolarTool, chamferTool, lengthenTool, joinTool, explodeTool, alignTool, polylineEditTool, stretchTool, breakTool, arrayPathTool],
 };

frontend/src/render/pixi/elementDrawers.ts

@@ -42,7 +42,7 @@ function fillOrNull(raw: unknown): string | null {
  * Gibt ein leeres Array zurück für unbekannte Typen bzw. Elemente,
  * die nichts Sichtbares beitragen (z.B. leerer Text).
  */
-export function elementToPrimitives(el: CADElement): ShapePrimitive[] {
+export function elementToPrimitives(el: CADElement, attrDefs?: Array<{ tag: string; prompt: string; defaultValue?: string }>): ShapePrimitive[] {
   const props = (el.properties ?? {}) as Record<string, unknown>;
   const stroke = (props.stroke as string | undefined) ?? FALLBACK_STROKE;
   const sw = (props.strokeWidth as number | undefined) ?? 1;
@@ -296,6 +296,28 @@ export function elementToPrimitives(el: CADElement): ShapePrimitive[] {
       return out;
     }
 
+    case 'block_instance': {
+      // Task D12: Attr-Texte der Instanz zeichnen (tag=Wert, default-Fallback).
+      const attrValues = (props.attrValues as Record<string, string> | undefined) ?? {};
+      if (!attrDefs || attrDefs.length === 0) return [];
+      const out: ShapePrimitive[] = [];
+      const fontSize = 9;
+      const lineH = 16;
+      let i = 0;
+      for (const def of attrDefs) {
+        const value = attrValues[def.tag] ?? def.defaultValue ?? '—';
+        out.push({
+          kind: 'text',
+          at: { x: el.x, y: el.y - 8 - i * lineH },
+          text: `${def.tag}=${value}`,
+          fontSize,
+          color: stroke,
+        });
+        i++;
+      }
+      return out;
+    }
+
     default:
       return [];
   }

frontend/src/services/pdfExport.ts

@@ -3,6 +3,15 @@
  */
 import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
 import type { CADElement, CADLayer, ProjectData } from '../types/cad.types';
+import { elementToPrimitives, type ShapePrimitive } from '../render/pixi/elementDrawers';
+import type { CADDocument } from '../kernel/document/CADDocument';
+
+export interface LayoutPDFOptions {
+  /** Alles in Schwarz drucken (Task G4). */
+  monochrome?: boolean;
+  /** Seitenränder in pt (Default 20). */
+  margin?: number;
+}
 
 /**
  * Export project data to a PDF byte array.
@@ -172,3 +181,196 @@ function hexToRgb(hex: string | undefined): ReturnType<typeof rgb> | null {
   const b = parseInt(h.substring(4, 6), 16) / 255;
   return rgb(r, g, b);
 }
+
+
+// ═══════════════════════════════════════════════════════════
+// Task G4 — PDF-Export je Layout im Ausgabemaßstab
+// ═══════════════════════════════════════════════════════════
+
+/** A4 landscape in Punkten. */
+const A4_LANDSCAPE_W = 842;
+const A4_LANDSCAPE_H = 595;
+
+/**
+ * Exportiert EIN Layout als PDF (A4 landscape).
+ *
+ * Der gespeicherte Viewport (center/scale) definiert den sichtbaren
+ * Welt-Ausschnitt; die Zeichnung wird in den Ausgabemaßstab skaliert
+ * (Welt-pt × viewport.scale). Geometrie läuft über elementToPrimitives
+ * (C2) — identische Konventionen wie Pixi-Renderer (circle el.x/el.y =
+ * Zentrum). Linienbreiten: properties.strokeWidth, andernfalls Linientyp
+ * aus dem Layer (solid 0.7pt, dashed 0.9pt, dotted 0.5pt) mit passenden
+ * Dash-Patterns. `monochrome` erzwingt Schwarz. Der Titelblock aus
+ * layout.frameBlockRef wird mitgezeichnet (unskaliert als Rahmen unten
+ * rechts, Elemente relativ zur Ecke).
+ */
+export async function exportLayoutPDF(
+  doc: CADDocument,
+  layoutId: string,
+  options: LayoutPDFOptions = {},
+): Promise<Uint8Array> {
+  const layout = doc.getLayout(layoutId);
+  if (!layout) throw new Error(`exportLayoutPDF: Layout '${layoutId}' nicht gefunden`);
+
+  const margin = options.margin ?? 20;
+  const pdfDoc = await PDFDocument.create();
+  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
+  const page = pdfDoc.addPage([A4_LANDSCAPE_W, A4_LANDSCAPE_H]);
+  const mono = options.monochrome === true;
+
+  const layers = doc.getAllLayers();
+  const visibleLayerIds = new Set(layers.filter((l) => l.visible).map((l) => l.id));
+  const layerById = new Map(layers.map((l) => [l.id, l]));
+
+  // ── Ausgabemaßstab: Welt → pt ──
+  const scale = layout.viewport.scale;
+  const viewW = (A4_LANDSCAPE_W - 2 * margin) / scale;
+  const viewH = (A4_LANDSCAPE_H - 2 * margin) / scale;
+  const worldMinX = layout.viewport.center.x - viewW / 2;
+  const worldMinY = layout.viewport.center.y - viewH / 2;
+
+  // PDF-Y-Achse zeigt nach OBEN (bottom-left origin) — CAD nach unten:
+  const toPage = (wx: number, wy: number): { x: number; y: number } => ({
+    x: margin + (wx - worldMinX) * scale,
+    y: A4_LANDSCAPE_H - margin - (wy - worldMinY) * scale,
+  });
+
+  const colorFor = (el: CADElement): ReturnType<typeof rgb> => {
+    if (mono) return rgb(0, 0, 0);
+    const layer = layerById.get(el.layerId);
+    const hex = (el.properties.stroke as string | undefined) ?? layer?.color;
+    return hexToRgb(hex) ?? rgb(0, 0, 0);
+  };
+
+  const lineWidthFor = (el: CADElement): number => {
+    const explicit = el.properties.strokeWidth as number | undefined;
+    if (typeof explicit === 'number' && explicit > 0) return explicit;
+    const layer = layerById.get(el.layerId);
+    switch (layer?.lineType) {
+      case 'dashed': return 0.9;
+      case 'dotted': return 0.5;
+      default: return 0.7;
+    }
+  };
+
+  const dashFor = (el: CADElement): number[] | undefined => {
+    if (mono) return undefined;
+    const layer = layerById.get(el.layerId);
+    if (layer?.lineType === 'dashed') return [4, 3];
+    if (layer?.lineType === 'dotted') return [0.5, 2];
+    return undefined;
+  };
+
+  const drawPrimitives = (els: CADElement[], transform: (wx: number, wy: number) => { x: number; y: number }, scaleOverride?: number): void => {
+    for (const el of els) {
+      if (!visibleLayerIds.has(el.layerId)) continue;
+      const prims = elementToPrimitives(el);
+      const lw = lineWidthFor(el) * (scaleOverride ?? scale);
+      const dash = dashFor(el);
+      const color = colorFor(el);
+      for (const prim of prims) {
+        drawPrimitive(page, prim, transform, lw, color, dash, font, mono);
+      }
+    }
+  };
+
+  // ── Modellinhalt ──
+  drawPrimitives(doc.getAllElements(), toPage);
+
+  // ── Titelblock (frameBlockRef) unten rechts, unskaliert ──
+  if (layout.frameBlockRef) {
+    const block = doc.getBlock(layout.frameBlockRef);
+    if (block) {
+      const FRAME_MARGIN = 12;
+      // Block-Elemente liegen um (0,0) herum — an Ecke unten rechts verschieben
+      const frameOriginX = A4_LANDSCAPE_W - margin - 190 - FRAME_MARGIN;
+      const frameOriginY = margin + FRAME_MARGIN;
+      const frameTransform = (wx: number, wy: number) => ({
+        x: frameOriginX + wx,
+        y: frameOriginY + wy,
+      });
+      drawPrimitives(block.elements, frameTransform, 1);
+    }
+  }
+
+  return pdfDoc.save();
+}
+
+/** Zeichnet ein einzelnes ShapePrimitive auf die PDF-Seite. */
+function drawPrimitive(
+  page: any,
+  prim: ShapePrimitive,
+  transform: (wx: number, wy: number) => { x: number; y: number },
+  lineWidth: number,
+  color: ReturnType<typeof rgb>,
+  dash: number[] | undefined,
+  font: any,
+  mono: boolean,
+): void {
+  switch (prim.kind) {
+    case 'line': {
+      const s = transform(prim.from.x, prim.from.y);
+      const e = transform(prim.to.x, prim.to.y);
+      page.drawLine({ start: s, end: e, thickness: lineWidth, color, dashArray: dash });
+      break;
+    }
+    case 'rect': {
+      const tl = transform(prim.x, prim.y + prim.h);
+      page.drawRectangle({
+        x: tl.x, y: tl.y, width: prim.w, height: prim.h,
+        borderColor: color, borderWidth: lineWidth,
+        ...(prim.fill ? { color: hexToRgb(prim.fill) ?? color } : {}),
+      });
+      break;
+    }
+    case 'circle': {
+      const c = transform(prim.center.x, prim.center.y);
+      page.drawCircle({
+        x: c.x, y: c.y, radius: prim.radius,
+        borderColor: color, borderWidth: lineWidth,
+        ...(prim.fill ? { color: hexToRgb(prim.fill) ?? color } : {}),
+      });
+      break;
+    }
+    case 'arc': {
+      // Arc → 32 Liniensegmente (Grad, 0° = 3 Uhr, CCW — CAD-Konvention)
+      const c = transform(prim.center.x, prim.center.y);
+      const SEG = 32;
+      const a0 = (prim.startDeg * Math.PI) / 180;
+      const a1 = (prim.endDeg * Math.PI) / 180;
+      let span = a1 - a0;
+      if (span <= 0) span += 2 * Math.PI;
+      let prev = { x: c.x + Math.cos(a0) * prim.radius, y: c.y + Math.sin(a0) * prim.radius };
+      for (let i = 1; i <= SEG; i++) {
+        const a = a0 + (span * i) / SEG;
+        const pt = { x: c.x + Math.cos(a) * prim.radius, y: c.y + Math.sin(a) * prim.radius };
+        page.drawLine({ start: prev, end: pt, thickness: lineWidth, color, dashArray: dash });
+        prev = pt;
+      }
+      break;
+    }
+    case 'polyline': {
+      for (let i = 0; i < prim.points.length - 1; i++) {
+        const s = transform(prim.points[i].x, prim.points[i].y);
+        const e = transform(prim.points[i + 1].x, prim.points[i + 1].y);
+        page.drawLine({ start: s, end: e, thickness: lineWidth, color, dashArray: dash });
+      }
+      if (prim.close && prim.points.length > 2) {
+        const s = transform(prim.points[prim.points.length - 1].x, prim.points[prim.points.length - 1].y);
+        const e = transform(prim.points[0].x, prim.points[0].y);
+        page.drawLine({ start: s, end: e, thickness: lineWidth, color, dashArray: dash });
+      }
+      break;
+    }
+    case 'text': {
+      const at = transform(prim.at.x, prim.at.y);
+      page.drawText(prim.text, {
+        x: at.x, y: at.y - prim.fontSize,
+        size: prim.fontSize,
+        font,
+        color: mono ? rgb(0, 0, 0) : (hexToRgb(prim.color) ?? color),
+      });
+      break;
+    }
+  }
+}

frontend/src/services/printService.ts

@@ -0,0 +1,37 @@
+/**
+ * Task G5 – Browser-Print-Service.
+ *
+ * Bereitet die App für window.print() vor: Der Body erhält die Klasse
+ * `print-layout`, das @media print Stylesheet blendet das UI-Chrome aus
+ * und zeigt nur den Druckbereich (Canvas/Layout). Nach dem Druck wird
+ * die Klasse wieder entfernt (kein DOM-Mutation-Restzustand).
+ */
+
+const PRINT_CLASS = 'print-layout';
+
+/** Setzt den Print-Modus (Body-Klasse; @media print regelt das Rendering). */
+export function preparePrintLayout(): void {
+  document.body.classList.add(PRINT_CLASS);
+}
+
+/** Entfernt den Print-Modus (nach Druck oder bei Abbruch). */
+export function cleanupPrintLayout(): void {
+  document.body.classList.remove(PRINT_CLASS);
+}
+
+/**
+ * Druck-Flow: Vorbereitung → Rendern der nächsten Frames (Styles müssen
+ * greifen, bevor der Browser den Print-Dialog aufbaut) → window.print
+ * → Aufräumen. await-fähig für Tests (window.print wird gemockt).
+ */
+export async function printLayout(): Promise<void> {
+  preparePrintLayout();
+  // Zwei Frames warten: Style-Anwendung + Layout der Print-Ansicht
+  await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+  await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+  try {
+    window.print();
+  } finally {
+    cleanupPrintLayout();
+  }
+}

frontend/src/services/projectTemplates.ts

@@ -0,0 +1,136 @@
+/**
+ * Task H2 – Projekt-Templates: Branchen-Presets als Startzustand.
+ *
+ * Jedes Preset definiert: gridSize + unit (Raster), Layer-Set,
+ * enabledPlugins (welche V2-Plugins aktiviert werden) und einen
+ * libraryFolderSeed (Startordner der Block-Bibliothek).
+ */
+import type { CADLayer } from '../types/cad.types';
+import type { CADDocument } from '../kernel/document/CADDocument';
+
+export type ProjectTemplateId = 'halle' | 'openair' | 'saal' | 'messe' | 'buero' | 'garten';
+
+export interface ProjectTemplate {
+  id: ProjectTemplateId;
+  name: string;
+  description: string;
+  gridSize: number;
+  unit: 'mm' | 'cm' | 'm';
+  layers: CADLayer[];
+  enabledPlugins: string[];
+  libraryFolderSeed: string;
+}
+
+function layer(id: string, name: string, color: string, sortOrder: number): CADLayer {
+  return {
+    id, name, visible: true, locked: false,
+    color, lineType: 'solid', transparency: 0, sortOrder, parentId: null,
+  };
+}
+
+export const PROJECT_TEMPLATES: ProjectTemplate[] = [
+  {
+    id: 'halle',
+    name: 'Halle',
+    description: 'Veranstaltungshalle: Bestuhlung, Bühne, Technik, Wege',
+    gridSize: 100,
+    unit: 'cm',
+    layers: [
+      layer('tpl-h-wand', 'Wände', '#8a8f98', 0),
+      layer('tpl-h-bestuhlung', 'Bestuhlung', '#4a90d9', 1),
+      layer('tpl-h-buehne', 'Bühne', '#c0392b', 2),
+      layer('tpl-h-technik', 'Technik', '#f39c12', 3),
+    ],
+    enabledPlugins: ['event-tools', 'core-drawing', 'core-modify', 'core-annotate', 'builtin-library'],
+    libraryFolderSeed: 'Veranstaltungstechnik',
+  },
+  {
+    id: 'openair',
+    name: 'OpenAir',
+    description: 'Open-Air-Gelände: Zonen, Bestuhlung, Absperrungen, Wege',
+    gridSize: 100,
+    unit: 'cm',
+    layers: [
+      layer('tpl-o-zonen', 'Zonen', '#27ae60', 0),
+      layer('tpl-o-bestuhlung', 'Bestuhlung', '#4a90d9', 1),
+      layer('tpl-o-absperrung', 'Absperrung', '#c0392b', 2),
+      layer('tpl-o-wege', 'Wege', '#b8a888', 3),
+    ],
+    enabledPlugins: ['event-tools', 'core-drawing', 'core-modify', 'core-annotate', 'builtin-library'],
+    libraryFolderSeed: 'OpenAir',
+  },
+  {
+    id: 'saal',
+    name: 'Saal',
+    description: 'Festsaal: Bestuhlung, Bühne, Catering, Deko',
+    gridSize: 50,
+    unit: 'cm',
+    layers: [
+      layer('tpl-s-bestuhlung', 'Bestuhlung', '#4a90d9', 0),
+      layer('tpl-s-buehne', 'Bühne', '#c0392b', 1),
+      layer('tpl-s-catering', 'Catering', '#f39c12', 2),
+      layer('tpl-s-deko', 'Deko', '#9b59b6', 3),
+    ],
+    enabledPlugins: ['event-tools', 'core-drawing', 'core-modify', 'core-annotate', 'builtin-library'],
+    libraryFolderSeed: 'Eventservice',
+  },
+  {
+    id: 'messe',
+    name: 'Messe',
+    description: 'Messestand: Standlayout, Theken, Medien, Strom',
+    gridSize: 10,
+    unit: 'mm',
+    layers: [
+      layer('tpl-m-stand', 'Standlayout', '#e74c3c', 0),
+      layer('tpl-m-theken', 'Theken', '#f39c12', 1),
+      layer('tpl-m-medien', 'Medien', '#3498db', 2),
+      layer('tpl-m-strom', 'Strom', '#f1c40f', 3),
+    ],
+    enabledPlugins: ['core-drawing', 'core-modify', 'core-annotate', 'builtin-library'],
+    libraryFolderSeed: 'Messebau',
+  },
+  {
+    id: 'buero',
+    name: 'Büro',
+    description: 'Büroplanung: Möbel, Wände, Netzwerk, Beschriftung',
+    gridSize: 10,
+    unit: 'mm',
+    layers: [
+      layer('tpl-b-waende', 'Wände', '#8a8f98', 0),
+      layer('tpl-b-moebel', 'Möbel', '#4a90d9', 1),
+      layer('tpl-b-netzwerk', 'Netzwerk', '#27ae60', 2),
+      layer('tpl-b-text', 'Beschriftung', '#9aa0a6', 3),
+    ],
+    enabledPlugins: ['core-drawing', 'core-modify', 'core-annotate', 'builtin-library'],
+    libraryFolderSeed: 'Büroeinrichtung',
+  },
+  {
+    id: 'garten',
+    name: 'Garten',
+    description: 'Gartenplanung: Bepflanzung, Wege, Wasser, Beleuchtung',
+    gridSize: 100,
+    unit: 'cm',
+    layers: [
+      layer('tpl-g-bepflanzung', 'Bepflanzung', '#27ae60', 0),
+      layer('tpl-g-wege', 'Wege', '#b8a888', 1),
+      layer('tpl-g-wasser', 'Wasser', '#3498db', 2),
+      layer('tpl-g-licht', 'Beleuchtung', '#f1c40f', 3),
+    ],
+    enabledPlugins: ['core-drawing', 'core-modify', 'core-annotate', 'builtin-library'],
+    libraryFolderSeed: 'Gartenlandschaft',
+  },
+];
+
+/** Template per ID (oder undefined). */
+export function getProjectTemplate(id: string): ProjectTemplate | undefined {
+  return PROJECT_TEMPLATES.find((t) => t.id === id);
+}
+
+/**
+ * Überträgt ein Template auf ein Dokument: Layer-Set wird ERSETZT
+ * (Template = Startzustand). Grid/unit/pluginSeed sind UI-Einstellungen,
+ * die der Aufrufer aus dem Template liest.
+ */
+export function applyProjectTemplate(doc: CADDocument, tpl: ProjectTemplate): void {
+  doc.replaceLayers(tpl.layers);
+}

frontend/src/services/uiModeService.ts

@@ -0,0 +1,66 @@
+/**
+ * Task H1 – UI-Modus simple/pro.
+ *
+ * - 'pro': vollständige Werkzeugpalette + CommandLine (Default)
+ * - 'simple': nur basic-Tools, keine CommandLine
+ *
+ * Persistenz über localStorage ('webcad.uiMode'), Subscribe-Set für
+ * Live-Updates (RibbonBar/CommandLine/Topbar hören zu). Bewusst KEIN
+ * zustand (Q2-Entscheidung wurde nie umgesetzt; Muster folgt dem
+ * etablierten documentService/featureFlags-Stil des Projekts).
+ */
+import { useEffect, useState } from 'react';
+
+export type UIMode = 'simple' | 'pro';
+
+const STORAGE_KEY = 'webcad.uiMode';
+const listeners = new Set<(mode: UIMode) => void>();
+
+function readStored(): UIMode {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw === 'simple' || raw === 'pro') return raw;
+  } catch {
+    // localStorage nicht verfügbar — Default
+  }
+  return 'pro';
+}
+
+let current: UIMode = readStored();
+
+/** Aktueller UI-Modus (Default pro, persistiert). */
+export function getUIMode(): UIMode {
+  return current;
+}
+
+/** Wechselt den Modus und persistiert. */
+export function setUIMode(mode: UIMode): void {
+  current = mode;
+  try {
+    localStorage.setItem(STORAGE_KEY, mode);
+  } catch {
+    // Persistenz optional
+  }
+  for (const cb of listeners) cb(mode);
+}
+
+/** Toggle simple ↔ pro. */
+export function toggleUIMode(): void {
+  setUIMode(current === 'pro' ? 'simple' : 'pro');
+}
+
+/** Subscribe auf Moduswechsel; gibt Unsubscribe zurück. */
+export function subscribeUIMode(cb: (mode: UIMode) => void): () => void {
+  listeners.add(cb);
+  return () => { listeners.delete(cb); };
+}
+
+/** React-Hook: aktueller Modus mit Re-Render bei Wechsel. */
+export function useUIMode(): UIMode {
+  const [mode, setMode] = useState<UIMode>(current);
+  useEffect(() => {
+    const off = subscribeUIMode(setMode);
+    return off;
+  }, []);
+  return mode;
+}

frontend/src/styles.css

@@ -2925,3 +2925,52 @@ body.drawer-open { overflow: hidden; }
   border-radius: 4px;
 }
 .layout-bar-tb:hover { color: #4a90d9; background: rgba(74, 144, 217, 0.15); }
+
+
+/* ═══════════════════════════════════════════════════════════
+   Task G5 – Browser-Print: @media print zeigt nur den Druckbereich
+   ═══════════════════════════════════════════════════════════ */
+@media print {
+  @page {
+    size: A4 landscape;
+    margin: 10mm;
+  }
+
+  /* UI-Chrome im Druck ausblenden */
+  .screen-only {
+    display: none !important;
+  }
+
+  /* Druckbereich füllt die Seite */
+  .print-area {
+    width: 100% !important;
+    height: auto !important;
+    overflow: visible !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+  }
+
+  /* Farben/Linien so drucken wie angezeigt */
+  .print-layout * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  /* Body: kein Scroll, weiße Fläche */
+  body {
+    background: #fff !important;
+    overflow: hidden !important;
+  }
+}
+
+.layout-bar-print {
+  background: transparent;
+  color: #6b7280;
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+.layout-bar-print:hover { color: #4a90d9; background: rgba(74, 144, 217, 0.15); }

frontend/src/tools/modification/geometry.ts

@@ -588,3 +588,19 @@ export function distance(p1: { x: number; y: number }, p2: { x: number; y: numbe
 export function angleBetween(p1: { x: number; y: number }, p2: { x: number; y: number }): number {
   return (Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180) / Math.PI;
 }
+
+/**
+ * Fläche eines Polygons via Shoelace-Formel (Task H5).
+ * Absolutwert — Uhrzeigersinn und gegen Uhrzeigersinn ergeben dasselbe.
+ * Weniger als 3 Punkte oder kollineare Punkte → 0.
+ */
+export function polygonArea(pts: Array<{ x: number; y: number }>): number {
+  if (!Array.isArray(pts) || pts.length < 3) return 0;
+  let sum = 0;
+  for (let i = 0; i < pts.length; i++) {
+    const a = pts[i];
+    const b = pts[(i + 1) % pts.length];
+    sum += a.x * b.y - b.x * a.y;
+  }
+  return Math.abs(sum / 2);
+}

frontend/src/types/cad.types.ts

@@ -63,6 +63,16 @@ export interface ImageElement extends CADElement {
   };
 }
 
+/**
+ * Block-Attribut-Definition (Task D12): Slot, den Instanzen befüllen.
+ * Konvention konsistent zu F5 (ATTDEF-Parser) und F6 (DXF-Writer).
+ */
+export interface BlockAttrDef {
+  tag: string;
+  prompt: string;
+  defaultValue?: string;
+}
+
 export interface BlockDefinition {
   id: string;
   name: string;
@@ -70,6 +80,8 @@ export interface BlockDefinition {
   category: string;
   elements: CADElement[];
   thumbnail?: string;
+  /** Attribut-Slots dieser Blockdefinition (Task D12). */
+  attrDefs?: BlockAttrDef[];
 }
 
 /**

frontend/src/utils/format.ts

@@ -92,3 +92,28 @@ export function formatInputValue(
       return `${(mm / 1000).toFixed(3)}`;
   }
 }
+
+/**
+ * Format a raw world-unit squared area value (Task H5).
+ * @param rawSquared squared world-units (e.g. polygonArea result)
+ * @param unit target display unit
+ * @param scaleFactor world-units → mm conversion (like formatDistance)
+ * @returns formatted string like "5000 mm²", "50.0 cm²", "5.00 m²"
+ */
+export function formatArea(
+  rawSquared: number,
+  unit: UnitType,
+  scaleFactor: number = 1,
+): string {
+  const mmSquared = rawSquared * scaleFactor * scaleFactor;
+  switch (unit) {
+    case 'mm':
+      return `${mmSquared.toFixed(0)} mm²`;
+    case 'cm':
+      return `${(mmSquared / 100).toFixed(1)} cm²`;
+    case 'm':
+      return `${(mmSquared / 1000000).toFixed(2)} m²`;
+    default:
+      return `${mmSquared.toFixed(0)} mm²`;
+  }
+}

frontend/tests/arrayPath.test.ts

@@ -0,0 +1,170 @@
+/**
+ * Task D10-Rest – array-path: Elemente entlang einer Polyline verteilen.
+ *
+ * Klick1 = Quelle (Auto-HitSelect bei leerer Selektion), Klick2 auf
+ * Pfad-Polyline → Element-Kopien gleichmaessig entlang der Pfad-
+ * laenge verteilt (count aus Options, Default 5), Original bleibt,
+ * ALLES in EINER Transaktion = 1 Undo-Schritt.
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { arrayPathTool } from '../src/plugins/builtin/core-modify';
+import { CADDocument } from '../src/kernel/document/CADDocument';
+import { createInMemoryDoc } from './helpers/inMemoryDoc';
+import type { CADElement, Pt } from '../src/types/cad.types';
+
+function mkCtx(elements: CADElement[], options: Record<string, unknown> = {}) {
+  const { ydoc } = createInMemoryDoc();
+  const doc = new CADDocument(ydoc);
+  for (const el of elements) doc.addElement(el);
+  const selectedIds = new Set<string>();
+  const statuses: string[] = [];
+  const ctx: any = {
+    doc,
+    options,
+    setStatus: (m: string) => statuses.push(m),
+    setPreview: (_el: CADElement | null) => {},
+    selection: {
+      getIds: () => Array.from(selectedIds),
+      setIds: (ids: string[]) => {
+        selectedIds.clear();
+        for (const id of ids) selectedIds.add(id);
+      },
+      hitTest: (x: number, y: number, _tol: number) => {
+        // trifft das Element, dessen BBox den Punkt enthaelt (erstes Gewinnt)
+        for (const el of elements) {
+          if (
+            x >= el.x - el.width / 2 && x <= el.x + el.width / 2 &&
+            y >= el.y - el.height / 2 && y <= el.y + el.height / 2
+          ) return el;
+        }
+        return null;
+      },
+    },
+  };
+  return { ctx, doc, selectedIds, statuses };
+}
+
+function pe(x: number, y: number): { world: Pt } {
+  return { world: { x, y } } as never;
+}
+
+const CHAIR = {
+  id: 'chair-1', type: 'chair', layerId: 'layer-0',
+  x: 0, y: 0, width: 40, height: 40, properties: {},
+} as unknown as CADElement;
+
+const PATH = {
+  id: 'path-1', type: 'polyline', layerId: 'layer-0',
+  x: 250, y: 0, width: 500, height: 0,
+  properties: { points: [{ x: 0, y: 0 }, { x: 500, y: 0 }] },
+} as unknown as CADElement;
+
+beforeEach(() => {
+  arrayPathTool.handlers.cancel?.({ setStatus: () => {}, setPreview: () => {} } as never);
+});
+
+describe('D10: arrayPathTool', () => {
+  it('verteilt count Kopien gleichmaessig entlang der Pfadlaenge (Original bleibt)', () => {
+    const { ctx, doc, selectedIds } = mkCtx([CHAIR, PATH]);
+    selectedIds.add('chair-1');
+    // Klick1: Quelle ist schon selektiert -> Basis direkt setzen
+    arrayPathTool.handlers.down!(pe(0, 0), ctx);
+    // Klick2: auf den Pfad klicken (Pfad-Mitte 250,0)
+    arrayPathTool.handlers.down!(pe(250, 0), ctx);
+
+    const els = doc.getAllElements();
+    // Original + Pfad + 5 Kopien
+    const chairs = els.filter((e) => e.type === 'chair');
+    expect(chairs.length).toBe(1 + 5);
+    // Kopien getrennt vom Original (Original bleibt bei x=0 unangetastet):
+    const copies = chairs.filter((c) => c.id !== 'chair-1');
+    expect(copies).toHaveLength(5);
+    const copyXs = copies.map((c) => c.x).sort((a, b) => a - b);
+    // count=5 gleichmaessig ueber Pfadlaenge 500: s = i/(count-1)*total
+    expect(copyXs[0]).toBeCloseTo(0, 0);
+    expect(copyXs[1]).toBeCloseTo(125, 0);
+    expect(copyXs[2]).toBeCloseTo(250, 0);
+    expect(copyXs[3]).toBeCloseTo(375, 0);
+    expect(copyXs[4]).toBeCloseTo(500, 0);
+  });
+
+  it('Auto-HitSelect bei leerer Selektion (Klick1 auf Element)', () => {
+    const { ctx, doc, selectedIds } = mkCtx([CHAIR, PATH]);
+    // Selektion ist leer: Klick auf den Stuhl waehlt ihn automatisch
+    arrayPathTool.handlers.down!(pe(0, 0), ctx);
+    expect(selectedIds.has('chair-1')).toBe(true);
+    // Klick2 auf Pfad -> Commit
+    arrayPathTool.handlers.down!(pe(100, 0), ctx);
+    expect(doc.getAllElements().filter((e) => e.type === 'chair').length).toBe(6);
+  });
+
+  it('Klick2 trifft KEINEN Pfad -> kein Commit, Status erklaert', () => {
+    const { ctx, doc, selectedIds, statuses } = mkCtx([CHAIR, PATH]);
+    selectedIds.add('chair-1');
+    arrayPathTool.handlers.down!(pe(0, 0), ctx);
+    // Klick weit weg vom Pfad (kein Element getroffen)
+    arrayPathTool.handlers.down!(pe(9999, 9999), ctx);
+    expect(doc.getAllElements().filter((e) => e.type === 'chair')).toHaveLength(1);
+    expect(statuses[statuses.length - 1]).toContain('Pfad');
+  });
+
+  it('Kopien in EINER Transaktion = 1 Undo entfernt alle', () => {
+    const { ctx, doc, selectedIds } = mkCtx([CHAIR, PATH]);
+    selectedIds.add('chair-1');
+    arrayPathTool.handlers.down!(pe(0, 0), ctx);
+    arrayPathTool.handlers.down!(pe(250, 0), ctx);
+    expect(doc.getAllElements().filter((e) => e.type === 'chair')).toHaveLength(6);
+    doc.undo();
+    expect(doc.getAllElements().filter((e) => e.type === 'chair')).toHaveLength(1);
+  });
+
+  it('count-Option steuert die Anzahl (3 statt 5)', () => {
+    const { ctx, doc, selectedIds } = mkCtx([CHAIR, PATH], { count: 3 });
+    selectedIds.add('chair-1');
+    arrayPathTool.handlers.down!(pe(0, 0), ctx);
+    arrayPathTool.handlers.down!(pe(250, 0), ctx);
+    expect(doc.getAllElements().filter((e) => e.type === 'chair')).toHaveLength(4); // Original + 3
+    // Kopien getrennt vom Original: count=3 -> s = 0, 250, 500
+    const copies3 = doc.getAllElements().filter((e) => e.type === 'chair' && e.id !== 'chair-1');
+    const copyXs3 = copies3.map((c) => c.x).sort((a, b) => a - b);
+    expect(copyXs3[0]).toBeCloseTo(0, 0);
+    expect(copyXs3[1]).toBeCloseTo(250, 0);
+    expect(copyXs3[2]).toBeCloseTo(500, 0);
+  });
+
+  it('gebogener Pfad (3 Punkte): Kopien folgen der Geometrie', () => {
+    const cornerPath = {
+      id: 'path-2', type: 'polyline', layerId: 'layer-0',
+      x: 100, y: 100, width: 200, height: 200,
+      properties: { points: [{ x: 0, y: 0 }, { x: 200, y: 0 }, { x: 200, y: 200 }] },
+    } as unknown as CADElement;
+    const { ctx, doc, selectedIds } = mkCtx([CHAIR, cornerPath], { count: 4 });
+    selectedIds.add('chair-1');
+    arrayPathTool.handlers.down!(pe(0, 0), ctx);
+    arrayPathTool.handlers.down!(pe(100, 10), ctx);
+    const chairs = doc.getAllElements().filter((e) => e.type === 'chair');
+    expect(chairs.length).toBe(5); // Original + 4
+    // Kopien muessen auf dem L-foermigen Pfad liegen: alle x<=200, y>=0
+    for (const c of chairs.slice(1)) {
+      expect(c.x).toBeLessThanOrEqual(200.5);
+      expect(c.y).toBeGreaterThanOrEqual(-0.5);
+    }
+  });
+
+  it('cancel resettet die Sitzung', () => {
+    const { ctx, doc, selectedIds } = mkCtx([CHAIR, PATH]);
+    selectedIds.add('chair-1');
+    arrayPathTool.handlers.down!(pe(0, 0), ctx);
+    arrayPathTool.handlers.cancel?.(ctx);
+    // Nach cancel: Klick startet frisch (Auto-HitSelect-Pfad wieder aktiv)
+    arrayPathTool.handlers.down!(pe(9999, 9999), ctx);
+    expect(doc.getAllElements().filter((e) => e.type === 'chair')).toHaveLength(1);
+  });
+
+  it('Manifest: id=array-path, tags pro', () => {
+    expect(arrayPathTool.manifest.id).toBe('array-path');
+    expect((arrayPathTool.manifest.tags ?? [])).toContain('pro');
+    const keys = (arrayPathTool.optionsSchema ?? []).map((f) => f.key);
+    expect(keys).toContain('count');
+  });
+});

frontend/tests/blockAttributes.test.ts

@@ -0,0 +1,104 @@
+/**
+ * Task D12 - BlockAttribute: attrDefs + attrValues + Rendering.
+ *
+ * BlockDefinition.attrDefs[]: definiert Attribut-Slots (tag/prompt/
+ * default). Instanz (block_instance) traegt attrValues. Der Render-
+ * Adapter (elementToPrimitives) zeichnet die Attr-Werte als Text-
+ * Primitive an der Instanz-Position.
+ */
+import { describe, it, expect } from 'vitest';
+import { CADDocument } from '../src/kernel/document/CADDocument';
+import { createInMemoryDoc } from './helpers/inMemoryDoc';
+import { elementToPrimitives } from '../src/render/pixi/elementDrawers';
+import type { CADElement, BlockDefinition } from '../src/types/cad.types';
+
+const BLOCK: BlockDefinition = {
+  id: 'blk-1',
+  name: 'Titelblock',
+  description: '',
+  category: 'frame',
+  elements: [],
+  attrDefs: [
+    { tag: 'PROJEKT', prompt: 'Projektname', defaultValue: 'Unbenannt' },
+    { tag: 'AUTOR', prompt: 'Bearbeiter', defaultValue: 'WebCAD' },
+  ],
+};
+
+function instance(attrValues: Record<string, string>): CADElement {
+  return {
+    id: 'inst-1', type: 'block_instance', layerId: 'layer-0',
+    x: 100, y: 100, width: 0, height: 0,
+    properties: { blockId: 'blk-1', scale: 1, attrValues },
+  } as unknown as CADElement;
+}
+
+// ─── Typ-Ebene: attrDefs auf BlockDefinition ────────────────
+
+describe('D12: BlockDefinition.attrDefs', () => {
+  it('attrDefs-Feld existiert mit tag/prompt/defaultValue', () => {
+    expect(BLOCK.attrDefs).toBeDefined();
+    expect(BLOCK.attrDefs!.length).toBe(2);
+    expect(BLOCK.attrDefs![0].tag).toBe('PROJEKT');
+    expect(BLOCK.attrDefs![0].prompt).toBe('Projektname');
+    expect(BLOCK.attrDefs![0].defaultValue).toBe('Unbenannt');
+  });
+
+  it('CADDocument speichert Block mit attrDefs (getBlock liefert sie zurueck)', () => {
+    const { ydoc } = createInMemoryDoc();
+    const doc = new CADDocument(ydoc);
+    doc.addBlock(BLOCK);
+    const loaded = doc.getBlock('blk-1');
+    expect(loaded!.attrDefs).toHaveLength(2);
+    expect(loaded!.attrDefs![1].tag).toBe('AUTOR');
+  });
+});
+
+// ─── Rendering: elementToPrimitives mit attrDefs ────────────
+
+describe('D12: RenderAdapter zeichnet Attr-Texte', () => {
+  it('Instanz mit attrValues erzeugt text-Primitives pro Attribut', () => {
+    const el = instance({ PROJEKT: 'Halle A', AUTOR: 'L. Admin' });
+    const prims = elementToPrimitives(el, BLOCK.attrDefs);
+    const texts = prims.filter((p) => p.kind === 'text');
+    expect(texts).toHaveLength(2);
+    const proj = texts.find((t) => (t as { text: string }).text.includes('PROJEKT'));
+    expect(proj).toBeDefined();
+    expect((proj as { text: string }).text).toContain('Halle A');
+    const autor = texts.find((t) => (t as { text: string }).text.includes('AUTOR'));
+    expect((autor as { text: string }).text).toContain('L. Admin');
+  });
+
+  it('Fehlender Wert faellt auf attrDefs.defaultValue zurueck', () => {
+    const el = instance({});
+    const prims = elementToPrimitives(el, BLOCK.attrDefs);
+    const texts = prims.filter((p) => p.kind === 'text');
+    const proj = texts.find((t) => (t as { text: string }).text.includes('PROJEKT'));
+    expect((proj as { text: string }).text).toContain('Unbenannt');
+  });
+
+  it('Ohne attrDefs-Parameter: kein Attr-Text-Rendering (abwaertskompatibel)', () => {
+    const el = instance({ PROJEKT: 'Halle A' });
+    const prims = elementToPrimitives(el);
+    expect(prims.filter((p) => p.kind === 'text')).toHaveLength(0);
+  });
+
+  it('Instanz ohne attrValues mit attrDefs: defaults werden gezeichnet', () => {
+    const el: CADElement = {
+      id: 'inst-2', type: 'block_instance', layerId: 'layer-0',
+      x: 0, y: 0, width: 0, height: 0,
+      properties: { blockId: 'blk-1', scale: 1 },
+    } as unknown as CADElement;
+    const prims = elementToPrimitives(el, BLOCK.attrDefs);
+    const texts = prims.filter((p) => p.kind === 'text');
+    expect(texts).toHaveLength(2);
+  });
+
+  it('Text-Positionen gestaffelt unterhalb der Instanz-Position', () => {
+    const el = instance({ PROJEKT: 'A', AUTOR: 'B' });
+    const prims = elementToPrimitives(el, BLOCK.attrDefs);
+    const texts = prims.filter((p) => p.kind === 'text') as Array<{ kind: 'text'; at: { x: number; y: number }; text: string }>;
+    expect(texts[0].at.x).toBe(100);
+    expect(texts[0].at.y).toBeCloseTo(100 - 8, 0);
+    expect(texts[1].at.y).toBeLessThan(texts[0].at.y);
+  });
+});

frontend/tests/constructionTools.test.ts

@@ -0,0 +1,147 @@
+/**
+ * Task D3 – Point/XLine/Ray: Konstruktions-Elemente.
+ *
+ * pointTool: Klick-Platzierer (kleiner Kreis mit point:true-Marker,
+ * r=1.5 wie DXF-POINT-Import). xlineTool: 2 Klicks (Basis+Richtung),
+ * sehr lange Linie in BEIDE Richtungen. rayTool: halblang (nur eine
+ * Richtung). Alle mit construction:true und auf defpoints-Layer
+ * (auto-angelegt falls fehlt).
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { pointTool, xlineTool, rayTool } from '../src/plugins/builtin/core-drawing';
+import { CADDocument } from '../src/kernel/document/CADDocument';
+import { createInMemoryDoc } from './helpers/inMemoryDoc';
+import type { CADElement, Pt } from '../src/types/cad.types';
+
+function mkCtx() {
+  const { ydoc } = createInMemoryDoc();
+  const doc = new CADDocument(ydoc);
+  const previews: (CADElement | null)[] = [];
+  const statuses: string[] = [];
+  const ctx: any = {
+    doc,
+    options: {},
+    setStatus: (m: string) => statuses.push(m),
+    setPreview: (el: CADElement | null) => previews.push(el),
+  };
+  return { ctx, doc, previews, statuses };
+}
+
+function pe(x: number, y: number): { world: Pt } {
+  return { world: { x, y } } as never;
+}
+
+beforeEach(() => {
+  pointTool.handlers.cancel?.({ setStatus: () => {}, setPreview: () => {} } as never);
+  xlineTool.handlers.cancel?.({ setStatus: () => {}, setPreview: () => {} } as never);
+  rayTool.handlers.cancel?.({ setStatus: () => {}, setPreview: () => {} } as never);
+});
+
+describe('D3: pointTool', () => {
+  it('Klick platziert Kreis mit point-Marker (r=1.5, wie DXF POINT)', () => {
+    const { ctx, doc } = mkCtx();
+    pointTool.handlers.down!(pe(55, 66), ctx);
+    const els = doc.getAllElements();
+    expect(els).toHaveLength(1);
+    const el = els[0];
+    expect(el.type).toBe('circle');
+    expect(el.x).toBe(55);
+    expect(el.y).toBe(66);
+    expect(el.properties.radius).toBe(1.5);
+    expect(el.properties.point).toBe(true);
+  });
+
+  it('defpoints-Layer wird automatisch angelegt falls fehlt', () => {
+    const { ctx, doc } = mkCtx();
+    expect(doc.getLayer('defpoints')).toBeUndefined();
+    pointTool.handlers.down!(pe(0, 0), ctx);
+    expect(doc.getLayer('defpoints')).toBeDefined();
+    expect(doc.getLayer('defpoints')!.name).toBe('defpoints');
+  });
+
+  it('Element landet auf defpoints-Layer mit construction:true', () => {
+    const { ctx, doc } = mkCtx();
+    pointTool.handlers.down!(pe(10, 10), ctx);
+    const el = doc.getAllElements()[0];
+    expect(el.layerId).toBe('defpoints');
+    expect(el.properties.construction).toBe(true);
+  });
+});
+
+describe('D3: xlineTool (Konstruktionslinie, beide Richtungen)', () => {
+  it('2 Klicks erzeugen sehr lange Linie durch beide Punkte in BEIDE Richtungen', () => {
+    const { ctx, doc } = mkCtx();
+    xlineTool.handlers.down!(pe(0, 0), ctx);
+    xlineTool.handlers.down!(pe(10, 10), ctx);
+    const els = doc.getAllElements();
+    expect(els).toHaveLength(1);
+    const el = els[0];
+    expect(el.type).toBe('line');
+    const dx = (el.properties.x2 as number) - (el.properties.x1 as number);
+    const dy = (el.properties.y2 as number) - (el.properties.y1 as number);
+    // Sehr lange: Länge >> Distanz der beiden Klicks (14.14)
+    expect(Math.hypot(dx, dy)).toBeGreaterThan(100000);
+    // Mittelpunkt der Linie = Basispunkt
+    expect((el.properties.x1 as number) + dx / 2).toBeCloseTo(0, 3);
+    expect((el.properties.y1 as number) + dy / 2).toBeCloseTo(0, 3);
+  });
+
+  it('Element auf defpoints-Layer mit construction:true', () => {
+    const { ctx, doc } = mkCtx();
+    xlineTool.handlers.down!(pe(0, 0), ctx);
+    xlineTool.handlers.down!(pe(5, 0), ctx);
+    const el = doc.getAllElements()[0];
+    expect(el.layerId).toBe('defpoints');
+    expect(el.properties.construction).toBe(true);
+  });
+
+  it('Preview bei move nach erstem Klick', () => {
+    const { ctx, previews } = mkCtx();
+    xlineTool.handlers.down!(pe(0, 0), ctx);
+    xlineTool.handlers.move!(pe(50, 50), ctx);
+    expect(previews.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('Erster Klick ohne zweiten erzeugt NICHTS (Session-State)', () => {
+    const { ctx, doc } = mkCtx();
+    xlineTool.handlers.down!(pe(0, 0), ctx);
+    expect(doc.getAllElements()).toHaveLength(0);
+  });
+});
+
+describe('D3: rayTool (Strahl, nur EINE Richtung)', () => {
+  it('2 Klicks erzeugen Linie ab Basispunkt NUR in Zugrichtung', () => {
+    const { ctx, doc } = mkCtx();
+    rayTool.handlers.down!(pe(0, 0), ctx);
+    rayTool.handlers.down!(pe(10, 0), ctx);
+    const el = doc.getAllElements()[0];
+    expect(el.type).toBe('line');
+    expect(el.properties.x1).toBe(0);
+    expect(el.properties.y1).toBe(0);
+    // Endpunkt weit in +x-Richtung
+    expect((el.properties.x2 as number)).toBeGreaterThanOrEqual(100000);
+    // NICHT in Gegenrichtung: x1 ist exakt der Basispunkt
+    expect(el.properties.x1).toBe(0);
+  });
+
+  it('construction:true + defpoints-Layer', () => {
+    const { ctx, doc } = mkCtx();
+    rayTool.handlers.down!(pe(0, 0), ctx);
+    rayTool.handlers.down!(pe(0, 10), ctx);
+    const el = doc.getAllElements()[0];
+    expect(el.layerId).toBe('defpoints');
+    expect(el.properties.construction).toBe(true);
+  });
+});
+
+describe('D3: Manifeste', () => {
+  it('ids/ribbonTab/tags korrekt', () => {
+    expect(pointTool.manifest.id).toBe('point');
+    expect(xlineTool.manifest.id).toBe('xline');
+    expect(rayTool.manifest.id).toBe('ray');
+    for (const t of [pointTool, xlineTool, rayTool]) {
+      expect(t.manifest.ribbonTab).toBe('canvas');
+      expect((t.manifest.tags ?? [])).toContain('basic');
+    }
+  });
+});

frontend/tests/ellipseTool.test.ts

@@ -0,0 +1,137 @@
+/**
+ * Task D1 – Ellipse+Bogen-Tool (core-drawing).
+ *
+ * 3-Klick-Interaktion: Klick1=Zentrum, Klick2=RadiusX (Richtung
+ * definiert die Rotation), Klick3=RadiusY. Commit als geschlossene
+ * Polyline (64 Punkte, F5-Parser-Konvention) mit cx/cy/rx/ry/rotation
+ * Metadaten. Ellipsenbogen via startAngle/endAngle-Options → offene
+ * Polyline mit proportionalen Punkten.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ellipseTool } from '../src/plugins/builtin/core-drawing';
+import { CADDocument } from '../src/kernel/document/CADDocument';
+import { createInMemoryDoc } from './helpers/inMemoryDoc';
+import type { CADElement, Pt } from '../src/types/cad.types';
+
+function mkCtx(options: Record<string, unknown> = {}) {
+  const { ydoc } = createInMemoryDoc();
+  const doc = new CADDocument(ydoc);
+  const previews: (CADElement | null)[] = [];
+  const statuses: string[] = [];
+  const ctx: any = {
+    doc,
+    options,
+    setStatus: (m: string) => statuses.push(m),
+    setPreview: (el: CADElement | null) => previews.push(el),
+  };
+  return { ctx, doc, previews, statuses };
+}
+
+function pe(x: number, y: number): { world: Pt } {
+  return { world: { x, y } } as never;
+}
+
+beforeEach(() => {
+  ellipseTool.handlers.cancel?.({ setStatus: () => {}, setPreview: () => {} } as never);
+});
+
+describe('D1: ellipseTool', () => {
+  it('3 Klicks: Zentrum→RadiusX→RadiusY erzeugt geschlossene Ellipse (64 Punkte)', () => {
+    const { ctx, doc } = mkCtx();
+    ellipseTool.handlers.down!(pe(0, 0), ctx);
+    ellipseTool.handlers.down!(pe(100, 0), ctx);   // RadiusX=100, Rotation=0
+    ellipseTool.handlers.down!(pe(0, 50), ctx);     // RadiusY=50
+    const els = doc.getAllElements();
+    expect(els).toHaveLength(1);
+    const el = els[0];
+    expect(el.type).toBe('polygon');
+    const pts = el.properties.points as Pt[];
+    expect(pts.length).toBe(64);
+    // BBox: rx=100, ry=50
+    const xs = pts.map((p) => p.x);
+    const ys = pts.map((p) => p.y);
+    expect(Math.max(...xs)).toBeCloseTo(100, 0);
+    expect(Math.min(...xs)).toBeCloseTo(-100, 0);
+    expect(Math.max(...ys)).toBeCloseTo(50, 0);
+    expect(Math.min(...ys)).toBeCloseTo(-50, 0);
+    // Metadaten
+    expect(el.properties.cx).toBe(0);
+    expect(el.properties.cy).toBe(0);
+    expect(el.properties.rx).toBe(100);
+    expect(el.properties.ry).toBe(50);
+    expect(el.properties.rotation).toBe(0);
+  });
+
+  it('Zugrichtung definiert Rotation: Klick2 nach (0,100) → rotation=90°', () => {
+    const { ctx, doc } = mkCtx();
+    ellipseTool.handlers.down!(pe(0, 0), ctx);
+    ellipseTool.handlers.down!(pe(0, 100), ctx);   // RadiusX zeigt nach unten
+    ellipseTool.handlers.down!(pe(50, 0), ctx);     // RadiusY
+    const el = doc.getAllElements()[0];
+    expect(el.properties.rotation).toBeCloseTo(90, 1);
+    // Rotierte Ellipse: Hauptachse vertikal → maxY ≈ 100
+    const ys = (el.properties.points as Pt[]).map((p) => p.y);
+    expect(Math.max(...ys)).toBeCloseTo(100, 0);
+  });
+
+  it('Preview bei move nach Phase 2 zeigt Ellipse', () => {
+    const { ctx, previews } = mkCtx();
+    ellipseTool.handlers.down!(pe(0, 0), ctx);
+    ellipseTool.handlers.move!(pe(80, 0), ctx);     // RadiusX-Linie
+    ellipseTool.handlers.down!(pe(80, 0), ctx);     // RadiusX fixiert
+    ellipseTool.handlers.move!(pe(0, 40), ctx);    // Ellipsen-Preview mit live ry
+    expect(previews.length).toBeGreaterThanOrEqual(2);
+    const last = previews[previews.length - 1];
+    expect(last).not.toBeNull();
+    expect(last!.type).toBe('polygon');
+  });
+
+  it('Status führt durch die Phasen', () => {
+    const { ctx, statuses } = mkCtx();
+    ellipseTool.handlers.down!(pe(0, 0), ctx);
+    expect(statuses[0]).toContain('Zentrum');
+    ellipseTool.handlers.down!(pe(100, 0), ctx);
+    expect(statuses[1]).toContain('Radius');
+  });
+
+  it('cancel resettet die Messung', () => {
+    const { ctx, doc } = mkCtx();
+    ellipseTool.handlers.down!(pe(0, 0), ctx);
+    ellipseTool.handlers.down!(pe(100, 0), ctx);
+    ellipseTool.handlers.cancel?.(ctx);
+    // Nach cancel startet frisch: nächster Klick = Zentrum (kein Commit)
+    ellipseTool.handlers.down!(pe(0, 0), ctx);
+    expect(doc.getAllElements()).toHaveLength(0);
+  });
+});
+
+describe('D1: Ellipsenbogen (startAngle/endAngle)', () => {
+  it('Options startAngle=0/endAngle=180 erzeugen OFFENE Polyline (32 Punkte)', () => {
+    const { ctx, doc } = mkCtx({ startAngle: 0, endAngle: 180 });
+    ellipseTool.handlers.down!(pe(0, 0), ctx);
+    ellipseTool.handlers.down!(pe(100, 0), ctx);
+    ellipseTool.handlers.down!(pe(0, 50), ctx);
+    const el = doc.getAllElements()[0];
+    expect(el.type).toBe('polyline'); // offen
+    const pts = el.properties.points as Pt[];
+    expect(pts.length).toBe(32); // halbe Ellipse = 64/2
+  });
+
+  it('Winkel-Metadaten in properties', () => {
+    const { ctx, doc } = mkCtx({ startAngle: 45, endAngle: 225 });
+    ellipseTool.handlers.down!(pe(0, 0), ctx);
+    ellipseTool.handlers.down!(pe(100, 0), ctx);
+    ellipseTool.handlers.down!(pe(0, 50), ctx);
+    const el = doc.getAllElements()[0];
+    expect(el.properties.startAngle).toBe(45);
+    expect(el.properties.endAngle).toBe(225);
+  });
+});
+
+describe('D1: Manifest', () => {
+  it('id=ellipse, ribbonTab=canvas, tags basic, Version in tools-Array', () => {
+    expect(ellipseTool.manifest.id).toBe('ellipse');
+    expect(ellipseTool.manifest.ribbonTab).toBe('canvas');
+    expect((ellipseTool.manifest.tags ?? [])).toContain('basic');
+  });
+});

frontend/tests/gripEditing.test.ts

@@ -0,0 +1,244 @@
+/**
+ * Task D9 – GripEditing: Vertex-/Center-Grips im select-Tool.
+ *
+ * getGripPoints: element-spezifische Griff-Punkte (line=Endpunkte,
+ * polyline=Vertices, circle/arc=Zentrum, rect=BBox-Ecken).
+ * Drag eines Vertex-Grips verschiebt NUR diesen Punkt in einer
+ * Transaktion (undo-fähig); BBox-Skalierung (C3fin) bleibt parallel
+ * für Elemente ohne Vertex-Grips (rect u.a.).
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { selectTool, getGripPoints } from '../src/plugins/builtin/core-modify';
+import { CADDocument } from '../src/kernel/document/CADDocument';
+import { createInMemoryDoc } from './helpers/inMemoryDoc';
+import type { CADElement, Pt } from '../src/types/cad.types';
+
+function mkCtx() {
+  const { ydoc } = createInMemoryDoc();
+  const doc = new CADDocument(ydoc);
+  const selectedIds = new Set<string>();
+  const previews: (CADElement | null)[] = [];
+  const statuses: string[] = [];
+  const ctx: any = {
+    doc,
+    options: {},
+    setStatus: (m: string) => statuses.push(m),
+    setPreview: (el: CADElement | null) => previews.push(el),
+    selection: {
+      getIds: () => Array.from(selectedIds),
+      setIds: (ids: string[]) => {
+        selectedIds.clear();
+        for (const id of ids) selectedIds.add(id);
+      },
+      hitTest: (x: number, y: number, tol: number) => {
+        // Einfacher Hit-Test: trifft wenn ein Element-BBox den Punkt enthaelt
+        for (const el of doc.getAllElements()) {
+          const p = el.properties as Record<string, unknown>;
+          if (p.x1 !== undefined) {
+            const minX = Math.min(p.x1 as number, p.x2 as number);
+            const maxX = Math.max(p.x1 as number, p.x2 as number);
+            const minY = Math.min(p.y1 as number, p.y2 as number);
+            const maxY = Math.max(p.y1 as number, p.y2 as number);
+            if (x >= minX - tol && x <= maxX + tol && y >= minY - tol && y <= maxY + tol) return el;
+          }
+          if (x >= el.x - el.width / 2 - tol && x <= el.x + el.width / 2 + tol &&
+              y >= el.y - el.height / 2 - tol && y <= el.y + el.height / 2 + tol) return el;
+        }
+        return null;
+      },
+    },
+  };
+  return { ctx, doc, selectedIds, previews, statuses };
+}
+
+function pe(x: number, y: number, mods: { shift?: boolean; ctrl?: boolean } = {}): { world: Pt; shift: boolean; ctrl: boolean } {
+  return { world: { x, y }, shift: mods.shift ?? false, ctrl: mods.ctrl ?? false } as never;
+}
+
+beforeEach(() => {
+  selectTool.handlers.cancel?.({ setStatus: () => {}, setPreview: () => {} } as never);
+});
+
+// ─── getGripPoints (reine Funktion) ────────────────────────
+
+describe('D9: getGripPoints', () => {
+  it('line: beide Endpunkte als Grips', () => {
+    const el = {
+      id: 'l1', type: 'line', layerId: 'l', x: 50, y: 50, width: 100, height: 0,
+      properties: { x1: 0, y1: 50, x2: 100, y2: 50 },
+    } as unknown as CADElement;
+    const grips = getGripPoints(el);
+    expect(grips.map((g) => g.kind)).toEqual(['vertex', 'vertex']);
+    expect(grips[0].point).toEqual({ x: 0, y: 50 });
+    expect(grips[1].point).toEqual({ x: 100, y: 50 });
+  });
+
+  it('polyline: alle Vertices als Grips', () => {
+    const el = {
+      id: 'p1', type: 'polyline', layerId: 'l', x: 50, y: 0, width: 100, height: 100,
+      properties: { points: [{ x: 0, y: 0 }, { x: 100, y: 0 }, { x: 100, y: 100 }] },
+    } as unknown as CADElement;
+    const grips = getGripPoints(el);
+    expect(grips.length).toBe(3);
+    expect(grips.every((g) => g.kind === 'vertex')).toBe(true);
+    expect(grips[2].point).toEqual({ x: 100, y: 100 });
+  });
+
+  it('circle: Zentrum als Center-Grip', () => {
+    const el = {
+      id: 'c1', type: 'circle', layerId: 'l', x: 30, y: 40, width: 20, height: 20,
+      properties: { radius: 10 },
+    } as unknown as CADElement;
+    const grips = getGripPoints(el);
+    expect(grips).toHaveLength(1);
+    expect(grips[0].kind).toBe('center');
+    expect(grips[0].point).toEqual({ x: 30, y: 40 });
+  });
+
+  it('rect: BBox-Ecken als Corner-Grips (C3fin bleibt)', () => {
+    const el = {
+      id: 'r1', type: 'rect', layerId: 'l', x: 50, y: 25, width: 100, height: 50,
+      properties: {},
+    } as unknown as CADElement;
+    const grips = getGripPoints(el);
+    expect(grips.length).toBe(4);
+    expect(grips.every((g) => g.kind === 'corner')).toBe(true);
+    expect(grips[0].point).toEqual({ x: 0, y: 0 });
+    expect(grips[2].point).toEqual({ x: 100, y: 50 });
+  });
+
+  it('Grips tragen index fuer Drag-Zuordnung', () => {
+    const el = {
+      id: 'p1', type: 'polyline', layerId: 'l', x: 0, y: 0, width: 10, height: 10,
+      properties: { points: [{ x: 0, y: 0 }, { x: 10, y: 10 }] },
+    } as unknown as CADElement;
+    const grips = getGripPoints(el);
+    expect(grips[0].index).toBe(0);
+    expect(grips[1].index).toBe(1);
+  });
+});
+
+// ─── Drag-Interaktion: Vertex-Zug (undo-faehig) ─────────────
+
+describe('D9: Vertex-Drag im selectTool', () => {
+  it('Linien-Endpunkt ziehen verschiebt NUR diesen Punkt (1 Undo)', () => {
+    const { ctx, doc, selectedIds } = mkCtx();
+    const line = {
+      id: 'l1', type: 'line', layerId: 'l', x: 50, y: 0, width: 100, height: 0,
+      properties: { x1: 0, y1: 0, x2: 100, y2: 0 },
+    } as unknown as CADElement;
+    doc.addElement(line);
+    selectedIds.add('l1');
+
+    // Klick auf Endpunkt (100,0) startet Vertex-Drag
+    selectTool.handlers.down!(pe(100, 0), ctx);
+    selectTool.handlers.up!(pe(120, 30), ctx);
+
+    const updated = doc.getElement('l1')!;
+    expect(updated.properties.x2).toBe(120);
+    expect(updated.properties.y2).toBe(30);
+    // Anderer Endpunkt unveraendert
+    expect(updated.properties.x1).toBe(0);
+    expect(updated.properties.y1).toBe(0);
+    // Undo stellt her
+    doc.undo();
+    const restored = doc.getElement('l1')!;
+    expect(restored.properties.x2).toBe(100);
+    expect(restored.properties.y2).toBe(0);
+  });
+
+  it('Polyline-Vertex ziehen aktualisiert nur diesen Vertex', () => {
+    const { ctx, doc, selectedIds } = mkCtx();
+    const poly = {
+      id: 'p1', type: 'polyline', layerId: 'l', x: 50, y: 50, width: 100, height: 100,
+      properties: { points: [{ x: 0, y: 0 }, { x: 100, y: 0 }, { x: 100, y: 100 }] },
+    } as unknown as CADElement;
+    doc.addElement(poly);
+    selectedIds.add('p1');
+
+    // Mittleren Vertex (100,0) greifen und auf (100,50) ziehen
+    selectTool.handlers.down!(pe(100, 0), ctx);
+    selectTool.handlers.up!(pe(100, 50), ctx);
+
+    const pts = doc.getElement('p1')!.properties.points as Pt[];
+    expect(pts[1]).toEqual({ x: 100, y: 50 });
+    expect(pts[0]).toEqual({ x: 0, y: 0 });
+    expect(pts[2]).toEqual({ x: 100, y: 100 });
+  });
+
+  it('Kreis-Zentrum ziehen verschiebt x/y (Radius bleibt)', () => {
+    const { ctx, doc, selectedIds } = mkCtx();
+    const circle = {
+      id: 'c1', type: 'circle', layerId: 'l', x: 30, y: 40, width: 20, height: 20,
+      properties: { radius: 10 },
+    } as unknown as CADElement;
+    doc.addElement(circle);
+    selectedIds.add('c1');
+
+    selectTool.handlers.down!(pe(30, 40), ctx);
+    selectTool.handlers.up!(pe(60, 80), ctx);
+
+    const updated = doc.getElement('c1')!;
+    expect(updated.x).toBe(60);
+    expect(updated.y).toBe(80);
+    expect(updated.properties.radius).toBe(10);
+  });
+
+  it('BBox-Corner-Drag bei rect funktioniert weiterhin (Skalierung)', () => {
+    const { ctx, doc, selectedIds } = mkCtx();
+    const rect = {
+      id: 'r1', type: 'rect', layerId: 'l', x: 50, y: 25, width: 100, height: 50,
+      properties: {},
+    } as unknown as CADElement;
+    doc.addElement(rect);
+    selectedIds.add('r1');
+
+    // Ecke unten-rechts (100,50) greifen und auf (150,75) ziehen
+    selectTool.handlers.down!(pe(100, 50), ctx);
+    selectTool.handlers.up!(pe(150, 75), ctx);
+
+    const updated = doc.getElement('r1')!;
+    expect(updated.width).toBeCloseTo(150, 0);
+    expect(updated.height).toBeCloseTo(75, 0);
+  });
+
+  it('Vertex-Grip gewinnt gegen BBox-Corner bei Ueberlappung (line-Endpunkt am BBox-Rand)', () => {
+    // line (0,0)-(100,0): Endpunkt (0,0) ist AUCH BBox-Ecke.
+    // Der Drag muss als Vertex (Punkt verschieben) wirken, nicht als Scale.
+    const { ctx, doc, selectedIds } = mkCtx();
+    const line = {
+      id: 'l1', type: 'line', layerId: 'l', x: 50, y: 0, width: 100, height: 0,
+      properties: { x1: 0, y1: 0, x2: 100, y2: 0 },
+    } as unknown as CADElement;
+    doc.addElement(line);
+    selectedIds.add('l1');
+
+    selectTool.handlers.down!(pe(0, 0), ctx);
+    selectTool.handlers.up!(pe(-30, -20), ctx);
+
+    const updated = doc.getElement('l1')!;
+    // x1/y1 verschoben, x2 unveraendert → Vertex-Drag, kein Scale
+    expect(updated.properties.x1).toBe(-30);
+    expect(updated.properties.y1).toBe(-20);
+    expect(updated.properties.x2).toBe(100);
+  });
+
+  it('Preview bei Vertex-Drag zeigt aktualisiertes Element', () => {
+    const { ctx, doc, selectedIds, previews } = mkCtx();
+    const line = {
+      id: 'l1', type: 'line', layerId: 'l', x: 50, y: 0, width: 100, height: 0,
+      properties: { x1: 0, y1: 0, x2: 100, y2: 0 },
+    } as unknown as CADElement;
+    doc.addElement(line);
+    selectedIds.add('l1');
+
+    selectTool.handlers.down!(pe(100, 0), ctx);
+    selectTool.handlers.move!(pe(90, 40), ctx);
+    expect(previews.length).toBeGreaterThanOrEqual(1);
+    const last = previews[previews.length - 1];
+    expect(last).not.toBeNull();
+    const lastProps = last!.properties as Record<string, unknown>;
+    expect(lastProps.x2).toBe(90);
+    expect(lastProps.y2).toBe(40);
+  });
+});

frontend/tests/i18n.test.tsx

@@ -0,0 +1,93 @@
+/**
+ * Task H4 – i18n-Grundlage: zentrale strings.ts Maps de/en.
+ *
+ * strings-Modul: t(key) mit de/en-Maps, getLanguage/setLanguage
+ * (localStorage-persistiert, Default de), subscribe + useT-Hook.
+ * Kern-UI-Texte (LayoutBar, Modus-Umschaltung) laufen ueber die
+ * Maps; vollstaendige mechanische Ersetzung aller Komponenten ist
+ * teilautomatisierbares Follow-up (Roadmap-Vermerk).
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent, act } from '@testing-library/react';
+import {
+  t, getLanguage, setLanguage, subscribeLanguage, useT, LANGUAGES,
+} from '../src/i18n/strings';
+
+afterEach(cleanup);
+
+// ––– strings-Modul ––––––––––––––––––––––––
+
+describe('H4: i18n strings', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    setLanguage('de');
+  });
+
+  it('Default-Sprache ist de', () => {
+    expect(getLanguage()).toBe('de');
+  });
+
+  it('t liefert deutsche Kern-UI-Texte', () => {
+    expect(t('layouts.title')).toBe('Layouts');
+    expect(t('layouts.add')).toBe('Layout hinzufügen');
+    expect(t('layouts.empty')).toBe('Keine Layouts');
+  });
+
+  it('setLanguage(en) wechselt auf englische Texte', () => {
+    setLanguage('en');
+    expect(t('layouts.title')).toBe('Layouts');
+    expect(t('layouts.add')).toBe('Add layout');
+    expect(t('layouts.empty')).toBe('No layouts');
+  });
+
+  it('Sprache persistiert in localStorage und ueberlebt Reload-Semantik', () => {
+    setLanguage('en');
+    expect(localStorage.getItem('webcad.language')).toBe('en');
+    // erneutes Lesen startet aus persistiertem Zustand
+    expect(getLanguage()).toBe('en');
+  });
+
+  it('LANGUAGES enthaelt genau de und en', () => {
+    expect(LANGUAGES).toEqual(['de', 'en']);
+  });
+
+  it('t mit unbekanntem Key liefert den Key zurueck (Fallback, lint-bar)', () => {
+    setLanguage('de');
+    expect(t('gibts.nicht')).toBe('gibts.nicht');
+  });
+
+  it('subscribeLanguage feuert bei Wechsel und unsubscribed', () => {
+    const cb = vi.fn();
+    const off = subscribeLanguage(cb);
+    setLanguage('en');
+    expect(cb).toHaveBeenCalledWith('en');
+    off();
+    cb.mockClear();
+    setLanguage('de');
+    expect(cb).not.toHaveBeenCalled();
+  });
+});
+
+// ––– useT-Hook + Komponente ––––––––––––––––––
+
+describe('H4: useT-Hook rendert LayoutBar zweisprachig', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    setLanguage('de');
+  });
+
+  it('LayoutBar zeigt deutsche Texte und wechselt live auf englisch', async () => {
+    const LayoutBar = (await import('../src/components/LayoutBar')).default;
+    render(<LayoutBar doc={null} bridge={null} />);
+    expect(screen.getByText('Layouts')).toBeTruthy();
+    expect(screen.getByText('Keine Layouts')).toBeTruthy();
+    expect(screen.getByTitle('Layout hinzufügen')).toBeTruthy();
+
+    act(() => {
+      setLanguage('en');
+    });
+    // Live-Update via subscribe (nach act flush)
+    expect(screen.getByText('No layouts')).toBeTruthy();
+    expect(screen.getByTitle('Add layout')).toBeTruthy();
+  });
+});

frontend/tests/measureArea.test.ts

@@ -0,0 +1,137 @@
+/**
+ * Task H5 – Flächenberechnung Polygon (m²) + measure-area Tool.
+ *
+ * polygonArea: Shoelace-Formel (Absolutwert, CW/CCW egal),
+ * formatArea: Einheiten-Formatierung analog formatDistance,
+ * measureAreaTool: Klick-Sequenz, Live-Fläche im Status, ENTER
+ * committet ab 3 Punkten, cancel setzt zurück.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { polygonArea } from '../src/tools/modification/geometry';
+import { formatArea } from '../src/utils/format';
+import { measureAreaTool } from '../src/plugins/builtin/core-measure';
+import type { CADElement } from '../src/types/cad.types';
+
+describe('H5: polygonArea (Shoelace)', () => {
+  it('Rechteck 100×50 = 5000 Welt-Einheiten²', () => {
+    const pts = [
+      { x: 0, y: 0 }, { x: 100, y: 0 },
+      { x: 100, y: 50 }, { x: 0, y: 50 },
+    ];
+    expect(polygonArea(pts)).toBeCloseTo(5000, 6);
+  });
+
+  it('Dreieck 100×50/2 = 2500', () => {
+    const pts = [{ x: 0, y: 0 }, { x: 100, y: 0 }, { x: 0, y: 50 }];
+    expect(polygonArea(pts)).toBeCloseTo(2500, 6);
+  });
+
+  it('Uhrzeigersinn und gegen Uhrzeigersinn ergeben denselben Absolutwert', () => {
+    const ccw = [{ x: 0, y: 0 }, { x: 100, y: 0 }, { x: 100, y: 100 }, { x: 0, y: 100 }];
+    const cw = [...ccw].reverse();
+    expect(polygonArea(cw)).toBeCloseTo(polygonArea(ccw), 6);
+    expect(polygonArea(cw)).toBeCloseTo(10000, 6);
+  });
+
+  it('weniger als 3 Punkte → 0; kollineare Punkte → 0', () => {
+    expect(polygonArea([{ x: 0, y: 0 }, { x: 1, y: 1 }])).toBe(0);
+    expect(polygonArea([{ x: 0, y: 0 }, { x: 100, y: 0 }, { x: 200, y: 0 }])).toBe(0);
+  });
+});
+
+describe('H5: formatArea', () => {
+  it('mm: 5000 → "5000 mm²" (scaleFactor 1)', () => {
+    expect(formatArea(5000, 'mm', 1)).toBe('5000 mm²');
+  });
+
+  it('cm: 5000mm² → "50.0 cm²"', () => {
+    expect(formatArea(5000, 'cm', 1)).toBe('50.0 cm²');
+  });
+
+  it('m: 5000000mm² → "5.00 m²"', () => {
+    expect(formatArea(5000000, 'm', 1)).toBe('5.00 m²');
+  });
+
+  it('Flächen skalieren QUADRATISCH: 5 WE² bei scaleFactor 1000 = 5000000 mm²', () => {
+    // 1 Welt-Einheit = 1000mm → 1 WE² = 1.000.000 mm²
+    expect(formatArea(5, 'mm', 1000)).toBe('5000000 mm²');
+  });
+});
+
+describe('H5: measureAreaTool', () => {
+  // Module-State areaPts leakt zwischen Tests — vor jedem Test resetten:
+  beforeEach(() => {
+    measureAreaTool.handlers.cancel?.({ setStatus: () => {} } as never);
+  });
+  function fireSeq(events: Array<{ type: 'down' | 'move' | 'key' | 'cancel'; x?: number; y?: number; key?: string }>, options: Record<string, unknown> = {}) {
+    const statuses: string[] = [];
+    const ctx: any = {
+      options,
+      setStatus: (m: string) => statuses.push(m),
+      setPreview: (_el: CADElement | null) => {},
+      doc: null,
+    };
+    for (const ev of events) {
+      if (ev.type === 'down') measureAreaTool.handlers.down!({ world: { x: ev.x!, y: ev.y! } } as never, ctx);
+      if (ev.type === 'move') measureAreaTool.handlers.move!({ world: { x: ev.x!, y: ev.y! } } as never, ctx);
+      if (ev.type === 'key' && ev.key) measureAreaTool.handlers.key?.({ key: ev.key } as never, ctx);
+      if (ev.type === 'cancel') measureAreaTool.handlers.cancel?.(ctx);
+    }
+    return statuses;
+  }
+
+  it('erster Klick startet Messung, Status fordert weitere Punkte', () => {
+    const s = fireSeq([{ type: 'down', x: 0, y: 0 }]);
+    expect(s[0]).toContain('Fläche');
+    expect(s[s.length - 1]).toContain('klicken');
+  });
+
+  it('Live-Fläche im Status ab 3 Punkten bei move', () => {
+    const s = fireSeq([
+      { type: 'down', x: 0, y: 0 },
+      { type: 'down', x: 100, y: 0 },
+      { type: 'down', x: 100, y: 50 },
+      { type: 'move', x: 0, y: 50 },
+    ]);
+    expect(s.some((m) => m.includes('5000'))).toBe(true);
+    expect(s[s.length - 1]).toContain('mm²');
+  });
+
+  it('ENTER committet ab 3 Punkten mit Endfläche im Status', () => {
+    const s = fireSeq([
+      { type: 'down', x: 0, y: 0 },
+      { type: 'down', x: 100, y: 0 },
+      { type: 'down', x: 100, y: 100 },
+      { type: 'key', key: 'Enter' },
+    ]);
+    // Dreieck (0,0),(100,0),(100,100): Shoelace = 1/2 · 100 · 100 = 5000
+    expect(s[s.length - 1]).toContain('5000');
+    expect(s[s.length - 1]).toContain('3 Punkte');
+  });
+
+  it('ENTER mit weniger als 3 Punkten committet NICHT (Status erklärt)', () => {
+    const s = fireSeq([
+      { type: 'down', x: 0, y: 0 },
+      { type: 'down', x: 100, y: 0 },
+      { type: 'key', key: 'Enter' },
+    ]);
+    expect(s[s.length - 1]).toContain('3');
+  });
+
+  it('cancel setzt Messung zurück', () => {
+    const s = fireSeq([
+      { type: 'down', x: 0, y: 0 },
+      { type: 'down', x: 50, y: 50 },
+      { type: 'cancel' },
+      { type: 'down', x: 0, y: 0 },
+    ]);
+    // Nach cancel startet eine frische Messung (kein altes Polygon)
+    expect(s[s.length - 1]).toContain('klicken');
+  });
+
+  it('Manifest: id measure-area, tags basic, ribbonTab canvas', () => {
+    expect(measureAreaTool.manifest.id).toBe('measure-area');
+    expect(measureAreaTool.manifest.ribbonTab).toBe('canvas');
+    expect((measureAreaTool.manifest.tags ?? [])).toContain('basic');
+  });
+});

frontend/tests/mtextTool.test.ts

@@ -0,0 +1,101 @@
+/**
+ * Task D4 – MTEXT-Tool: Mehrzeiliger Text mit/ohne Rahmen.
+ *
+ * Klick platziert mehrzeiligen Text (Inhalt aus Options, Zeilen-
+ * umbrueche), fontSize-Option, optionale Rahmen-Option erzeugt ein
+ * rect-Element in derselben Transaktion (1 Undo-Schritt).
+ */
+import { describe, it, expect } from 'vitest';
+import { mtextTool } from '../src/plugins/builtin/core-annotate';
+import { CADDocument } from '../src/kernel/document/CADDocument';
+import { createInMemoryDoc } from './helpers/inMemoryDoc';
+import type { CADElement, Pt } from '../src/types/cad.types';
+
+function mkCtx(options: Record<string, unknown> = {}) {
+  const { ydoc } = createInMemoryDoc();
+  const doc = new CADDocument(ydoc);
+  const statuses: string[] = [];
+  const ctx: any = {
+    doc,
+    options,
+    setStatus: (m: string) => statuses.push(m),
+    setPreview: (_el: CADElement | null) => {},
+  };
+  return { ctx, doc, statuses };
+}
+
+function pe(x: number, y: number): { world: Pt } {
+  return { world: { x, y } } as never;
+}
+
+describe('D4: mtextTool', () => {
+  it('platziert mehrzeiligen Text mit Zeilenumbruechen aus den Options', () => {
+    const { ctx, doc } = mkCtx({ text: 'Zeile 1\nZeile 2\nZeile 3', fontSize: 14 });
+    mtextTool.handlers.down!(pe(100, 50), ctx);
+    const els = doc.getAllElements();
+    expect(els).toHaveLength(1);
+    const el = els[0];
+    expect(el.type).toBe('text');
+    expect(el.x).toBe(100);
+    expect(el.y).toBe(50);
+    expect(el.properties.text).toBe('Zeile 1\nZeile 2\nZeile 3');
+    expect(el.properties.fontSize).toBe(14);
+    expect(el.properties.mtext).toBe(true);
+  });
+
+  it('Rahmen-Option erzeugt zusaetzliches rect in derselben Transaktion (1 Undo)', () => {
+    const { ctx, doc } = mkCtx({ text: 'Mit Rahmen', frame: true });
+    mtextTool.handlers.down!(pe(0, 0), ctx);
+    const els = doc.getAllElements();
+    expect(els).toHaveLength(2);
+    const texts = els.filter((e) => e.type === 'text');
+    const rects = els.filter((e) => e.type === 'rect');
+    expect(texts).toHaveLength(1);
+    expect(rects).toHaveLength(1);
+    expect(rects[0].x).toBeCloseTo(0, 5);
+    expect(rects[0].y).toBeCloseTo(0, 5);
+    doc.undo();
+    expect(doc.getAllElements()).toHaveLength(0);
+  });
+
+  it('ohne frame-Option: nur Text, kein rect', () => {
+    const { ctx, doc } = mkCtx({ text: 'Ohne Rahmen' });
+    mtextTool.handlers.down!(pe(0, 0), ctx);
+    expect(doc.getAllElements().filter((e) => e.type === 'rect')).toHaveLength(0);
+  });
+
+  it('Standard-Text wenn Options leer: MTEXT-Platzhalter leer (Editor bearbeitet spaeter)', () => {
+    const { ctx, doc } = mkCtx({});
+    mtextTool.handlers.down!(pe(10, 10), ctx);
+    const el = doc.getAllElements()[0];
+    expect(el.properties.text).toBe('');
+    expect(el.properties.fontSize).toBe(12); // Default
+  });
+
+  it('OptionsSchema: text/number/checkbox-Felder', () => {
+    const schema = mtextTool.optionsSchema ?? [];
+    const keys = schema.map((f) => f.key);
+    expect(keys).toContain('text');
+    expect(keys).toContain('fontSize');
+    expect(keys).toContain('frame');
+    const textField = schema.find((f) => f.key === 'text');
+    expect(textField!.type).toBe('text');
+    const frameField = schema.find((f) => f.key === 'frame');
+    expect(frameField!.type).toBe('checkbox');
+  });
+
+  it('Rahmenhoehe waechst mit Zeilenzahl', () => {
+    const { ctx: ctx1, doc: doc1 } = mkCtx({ text: 'eine Zeile', frame: true });
+    mtextTool.handlers.down!(pe(0, 0), ctx1);
+    const { ctx: ctx3, doc: doc3 } = mkCtx({ text: 'eins\nzwei\ndrei', frame: true });
+    mtextTool.handlers.down!(pe(0, 0), ctx3);
+    const rect1 = doc1.getAllElements().find((e) => e.type === 'rect')!;
+    const rect3 = doc3.getAllElements().find((e) => e.type === 'rect')!;
+    expect(rect3.height).toBeGreaterThan(rect1.height);
+  });
+
+  it('Manifest: id=mtext, tags basic', () => {
+    expect(mtextTool.manifest.id).toBe('mtext');
+    expect((mtextTool.manifest.tags ?? [])).toContain('basic');
+  });
+});

frontend/tests/pdfLayoutExport.test.ts

@@ -0,0 +1,99 @@
+/**
+ * Task G4 – PDF-Export je Layout im Ausgabemaßstab.
+ *
+ * exportLayoutPDF rendert den Layout-Viewport (center/scale) auf eine A4-
+ * Seite (landscape), skaliert Weltkoordinaten in den Ausgabemaßstab,
+ * berücksichtigt Linienbreiten aus Layern (lineType) und unterstützt
+ * eine monochrome Option. Titelblock (frameBlockRef) wird mitgezeichnet.
+ * Rückgabe: PDF-Bytes, per PDFDocument.load verifizierbar.
+ */
+import { describe, it, expect } from 'vitest';
+import { PDFDocument } from 'pdf-lib';
+import { CADDocument } from '../src/kernel/document/CADDocument';
+import { createInMemoryDoc } from './helpers/inMemoryDoc';
+import { exportLayoutPDF } from '../src/services/pdfExport';
+import type { CADElement, LayoutDefinition } from '../src/types/cad.types';
+
+function line(id: string, x1: number, y1: number, x2: number, y2: number, layerId = 'layer-0'): CADElement {
+  return {
+    id, type: 'line', layerId,
+    x: Math.min(x1, x2), y: Math.min(y1, y2),
+    width: Math.abs(x2 - x1), height: Math.abs(y2 - y1),
+    properties: { x1, y1, x2, y2, stroke: '#ff0000' },
+  } as CADElement;
+}
+
+function mkDoc(els: CADElement[], layouts: LayoutDefinition[]): CADDocument {
+  const { ydoc } = createInMemoryDoc();
+  const doc = new CADDocument(ydoc);
+  for (const e of els) doc.addElement(e);
+  for (const l of layouts) doc.addLayout(l);
+  return doc;
+}
+
+const LAYOUT: LayoutDefinition = {
+  id: 'layout-1', name: 'A4 Plan',
+  viewport: { center: { x: 50, y: 50 }, scale: 1 },
+};
+
+describe('G4: exportLayoutPDF', () => {
+  it('liefert valides PDF mit genau einer A4-landscape-Seite', async () => {
+    const doc = mkDoc([line('l1', 0, 0, 100, 100)], [LAYOUT]);
+    const bytes = await exportLayoutPDF(doc, 'layout-1');
+    expect(bytes.byteLength).toBeGreaterThan(500);
+    const pdf = await PDFDocument.load(bytes);
+    expect(pdf.getPageCount()).toBe(1);
+    const { width, height } = pdf.getPage(0).getSize();
+    expect(width).toBe(842); // A4 landscape pt
+    expect(height).toBe(595);
+  });
+
+  it('Titelblock-Elemente (frameBlockRef) werden mitgezeichnet', async () => {
+    const doc = mkDoc([line('l1', 0, 0, 100, 0)], [LAYOUT]);
+    // Titelblock-Definition anlegen und referenzieren
+    const blockId = 'title-1';
+    doc.addBlock({
+      id: blockId, name: 'Titelblock', description: '', category: 'frame',
+      elements: [line('tb1', 0, 0, 50, 0)],
+    });
+    doc.updateLayout('layout-1', { frameBlockRef: blockId });
+    const bytes = await exportLayoutPDF(doc, 'layout-1');
+    const pdf = await PDFDocument.load(bytes);
+    expect(pdf.getPageCount()).toBe(1);
+    // Strukturelle Prüfung: Export läuft fehlerfrei mit Frame-Block
+    expect(bytes.byteLength).toBeGreaterThan(500);
+  });
+
+  it('monochrome Option exportiert ohne Farbinformationen zu verlieren', async () => {
+    const doc = mkDoc([line('l1', 0, 0, 100, 100)], [LAYOUT]);
+    const bytes = await exportLayoutPDF(doc, 'layout-1', { monochrome: true });
+    const pdf = await PDFDocument.load(bytes);
+    expect(pdf.getPageCount()).toBe(1);
+  });
+
+  it('leeres Layout (keine Elemente im Viewport) exportiert trotzdem eine Seite', async () => {
+    const doc = mkDoc([], [LAYOUT]);
+    const bytes = await exportLayoutPDF(doc, 'layout-1');
+    const pdf = await PDFDocument.load(bytes);
+    expect(pdf.getPageCount()).toBe(1);
+  });
+
+  it('Layout ohne existierende ID → throw', async () => {
+    const doc = mkDoc([], []);
+    await expect(exportLayoutPDF(doc, 'gibts-nicht')).rejects.toThrow();
+  });
+
+  it('unsichtbare Layer werden übersprungen (Export läuft fehlerfrei)', async () => {
+    const { ydoc } = createInMemoryDoc();
+    const doc = new CADDocument(ydoc);
+    ydoc.data.layers.set('layer-0', {
+      id: 'layer-0', name: '0', visible: false, locked: false,
+      color: '#ffffff', lineType: 'solid', transparency: 0, sortOrder: 0, parentId: null,
+    });
+    doc.addElement(line('l1', 0, 0, 100, 100));
+    doc.addLayout(LAYOUT);
+    const bytes = await exportLayoutPDF(doc, 'layout-1');
+    const pdf = await PDFDocument.load(bytes);
+    expect(pdf.getPageCount()).toBe(1);
+  });
+});

frontend/tests/printStylesheet.test.ts

@@ -0,0 +1,65 @@
+/**
+ * Task G5 – Browser-Print: @media print Stylesheet + Print-Service.
+ *
+ * printService bereitet den Body auf den Druck vor (print-layout-Klasse,
+ * Print-Modus ohne UI-Chrome), printLayout() triggert window.print nach
+ * Vorbereitung und räumt danach ab. Die CSS-Datei muss einen @media print
+ * Block mit den Kernregeln (UI ausblenden, Canvas füllen, @page)
+ * enthalten — verifiziert als Datei-Assertion (jsdom kann kein print-CSS
+ * rendern).
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+import { preparePrintLayout, cleanupPrintLayout, printLayout } from '../src/services/printService';
+
+describe('G5: printService', () => {
+  afterEach(() => {
+    cleanupPrintLayout();
+  });
+
+  it('preparePrintLayout setzt print-layout-Klasse am body', () => {
+    document.body.classList.remove('print-layout');
+    preparePrintLayout();
+    expect(document.body.classList.contains('print-layout')).toBe(true);
+  });
+
+  it('cleanupPrintLayout entfernt die Klasse wieder', () => {
+    preparePrintLayout();
+    cleanupPrintLayout();
+    expect(document.body.classList.contains('print-layout')).toBe(false);
+  });
+
+  it('printLayout ruft window.print nach Vorbereitung und räumt ab (async)', async () => {
+    const printSpy = vi.spyOn(window, 'print').mockImplementation(() => {});
+    await printLayout();
+    expect(printSpy).toHaveBeenCalledTimes(1);
+    // nach dem Druck ist wieder aufgeräumt
+    expect(document.body.classList.contains('print-layout')).toBe(false);
+    printSpy.mockRestore();
+  });
+});
+
+describe('G5: Print-Stylesheet-Regeln (Datei-Assertion)', () => {
+  const css = readFileSync(join(__dirname, '..', 'src', 'styles.css'), 'utf-8');
+  const printBlock = css.slice(css.indexOf('@media print'));
+
+  it('enthält einen @media print Block mit @page A4 landscape', () => {
+    expect(css).toContain('@media print');
+    expect(printBlock).toMatch(/@page\s*\{[^}]*size:\s*A4 landscape/);
+  });
+
+  it('blendet UI-Chrome im Druck aus (screen-only Regel)', () => {
+    expect(printBlock).toContain('.screen-only');
+    expect(printBlock).toMatch(/\.screen-only\s*\{[^}]*display:\s*none/);
+  });
+
+  it('Canvas/Druckbereich füllt die Seite (print-area Regel)', () => {
+    expect(printBlock).toContain('.print-area');
+    expect(printBlock).toMatch(/\.print-area\s*\{[^}]*width:\s*100%/);
+  });
+
+  it('print-layout-Modus erzwingt Farbdruck-Hintergründe (print-color-adjust)', () => {
+    expect(printBlock).toMatch(/-webkit-print-color-adjust:\s*exact/);
+  });
+});

frontend/tests/projectTemplates.test.ts

@@ -0,0 +1,85 @@
+/**
+ * Task H2 – Projekt-Templates: JSON-Presets für Branchen-Szenarien.
+ *
+ * Sechs Presets (halle/openair/saal/messe/buero/garten), jedes mit
+ * gridSize/unit, Layer-Set, enabled plugins und library folder seed.
+ * applyProjectTemplate überträgt die Layer in ein CADDocument
+ * (bestehende Layer werden ersetzt — Template = Startzustand).
+ */
+import { describe, it, expect } from 'vitest';
+import { CADDocument } from '../src/kernel/document/CADDocument';
+import { createInMemoryDoc } from './helpers/inMemoryDoc';
+import {
+  PROJECT_TEMPLATES,
+  getProjectTemplate,
+  applyProjectTemplate,
+  type ProjectTemplate,
+} from '../src/services/projectTemplates';
+
+const EXPECTED_IDS = ['halle', 'openair', 'saal', 'messe', 'buero', 'garten'];
+
+describe('H2: Projekt-Templates', () => {
+  it('enthält genau die 6 Branchen-Presets mit eindeutigen IDs', () => {
+    expect(PROJECT_TEMPLATES.map((t) => t.id).sort()).toEqual([...EXPECTED_IDS].sort());
+    expect(new Set(PROJECT_TEMPLATES.map((t) => t.id)).size).toBe(6);
+  });
+
+  it('jedes Preset hat Name, gridSize, unit, Layer (>=2), enabledPlugins und libraryFolderSeed', () => {
+    for (const tpl of PROJECT_TEMPLATES) {
+      expect(tpl.name.length).toBeGreaterThan(2);
+      expect(tpl.gridSize).toBeGreaterThan(0);
+      expect(['mm', 'cm', 'm']).toContain(tpl.unit);
+      expect(tpl.layers.length).toBeGreaterThanOrEqual(2);
+      expect(tpl.enabledPlugins.length).toBeGreaterThan(0);
+      expect(tpl.libraryFolderSeed.length).toBeGreaterThan(2);
+      // Layer haben gültige CADLayer-Struktur mit eindeutigen IDs
+      const layerIds = new Set(tpl.layers.map((l) => l.id));
+      expect(layerIds.size).toBe(tpl.layers.length);
+      expect(tpl.layers.every((l) => l.name.length > 0 && typeof l.visible === 'boolean')).toBe(true);
+    }
+  });
+
+  it('Szenario-spezifika: halle/openair/saal aktivieren event-tools, garten landscape', () => {
+    const halle = getProjectTemplate('halle')!;
+    expect(halle.enabledPlugins).toContain('event-tools');
+    const openair = getProjectTemplate('openair')!;
+    expect(openair.enabledPlugins).toContain('event-tools');
+    const saal = getProjectTemplate('saal')!;
+    expect(saal.enabledPlugins).toContain('event-tools');
+    const garten = getProjectTemplate('garten')!;
+    expect(garten.libraryFolderSeed.toLowerCase()).toContain('garten');
+    const buero = getProjectTemplate('buero')!;
+    expect(buero.unit).toBe('mm');
+  });
+
+  it('getProjectTemplate liefert undefined für unbekannte ID', () => {
+    expect(getProjectTemplate('gibts-nicht')).toBeUndefined();
+  });
+});
+
+describe('H2: applyProjectTemplate', () => {
+  it('setzt die Template-Layer im CADDocument (ersetzt bestehende)', () => {
+    const { ydoc } = createInMemoryDoc();
+    const doc = new CADDocument(ydoc);
+    // Bestehenden Layer simulieren
+    ydoc.data.layers.set('alt', {
+      id: 'alt', name: 'Alt', visible: true, locked: false,
+      color: '#fff', lineType: 'solid', transparency: 0, sortOrder: 0, parentId: null,
+    });
+    const tpl = getProjectTemplate('halle')!;
+    applyProjectTemplate(doc, tpl);
+    const layers = doc.getAllLayers();
+    expect(layers.map((l) => l.id)).toEqual(tpl.layers.map((l) => l.id));
+    expect(layers.find((l) => l.id === 'alt')).toBeUndefined();
+  });
+
+  it('Template-Layer sind danach über CADDocument lesbar', () => {
+    const { ydoc } = createInMemoryDoc();
+    const doc = new CADDocument(ydoc);
+    const tpl = getProjectTemplate('buero')!;
+    applyProjectTemplate(doc, tpl);
+    const first = doc.getLayer(tpl.layers[0].id);
+    expect(first).toBeDefined();
+    expect(first!.name).toBe(tpl.layers[0].name);
+  });
+});

frontend/tests/snapExtensions.test.ts

@@ -0,0 +1,149 @@
+/**
+ * Task D11 - Snap-Erweiterungen: tangent, perpendicular, quadrant, fromOffset.
+ *
+ * quadrant: Kreis-Quadrantenpunkte (0/90/180/270 auf dem Radius).
+ * perpendicular: Fuspunkt auf Linie senkrecht zum Referenzpunkt.
+ * tangent: Tangentialpunkte am Kreis vom Referenzpunkt.
+ * fromOffset: Basispunkt + dx/dy-Eingabefeld.
+ */
+import { describe, it, expect } from 'vitest';
+import { SnapEngine, fromOffset, type SnapConfig } from '../src/canvas/SnapEngine';
+import type { CADElement } from '../src/types/cad.types';
+
+function cfg(modes: string[], extra: Partial<SnapConfig> = {}): Partial<SnapConfig> {
+  return {
+    enabled: true,
+    modes: new Set(modes as never),
+    tolerance: 10,
+    ...extra,
+  };
+}
+
+function circle(id: string, cx: number, cy: number, r: number): CADElement {
+  return {
+    id, type: 'circle', layerId: 'l',
+    x: cx, y: cy, width: r * 2, height: r * 2,
+    properties: { radius: r },
+  } as unknown as CADElement;
+}
+
+function line(id: string, x1: number, y1: number, x2: number, y2: number): CADElement {
+  return {
+    id, type: 'line', layerId: 'l',
+    x: (x1 + x2) / 2, y: (y1 + y2) / 2,
+    width: Math.abs(x2 - x1), height: Math.abs(y2 - y1),
+    properties: { x1, y1, x2, y2 },
+  } as unknown as CADElement;
+}
+
+// ─── Quadrant ──────────────────────────────────────────────
+
+describe('D11: quadrant snap', () => {
+  it('Kreis r=50: alle 4 Quadrantenpunkte werden geliefert', () => {
+    const eng = new SnapEngine(cfg(['quadrant']));
+    eng.setElements([circle('c1', 100, 100, 50)]);
+    // Cursor in der Naehe des 0-Quadranten (150,100)
+    const res = eng.snap(148, 100);
+    expect(res.point).not.toBeNull();
+    expect(res.point!.type).toBe('quadrant');
+    expect(res.point!.x).toBe(150);
+    expect(res.point!.y).toBe(100);
+  });
+
+  it('90-Quadrant (100,50) wird gefunden', () => {
+    const eng = new SnapEngine(cfg(['quadrant']));
+    eng.setElements([circle('c1', 100, 100, 50)]);
+    const res = eng.snap(100, 52);
+    expect(res.point!.x).toBe(100);
+    expect(res.point!.y).toBe(50);
+    expect(res.point!.type).toBe('quadrant');
+  });
+
+  it('270-Quadrant (unten) wird gefunden', () => {
+    const eng = new SnapEngine(cfg(['quadrant']));
+    eng.setElements([circle('c1', 100, 100, 50)]);
+    const res = eng.snap(100, 148);
+    expect(res.point!.y).toBe(150);
+    expect(res.point!.type).toBe('quadrant');
+  });
+
+  it('Modus nicht aktiviert -> kein quadrant snap', () => {
+    const eng = new SnapEngine(cfg(['endpoint']));
+    eng.setElements([circle('c1', 100, 100, 50)]);
+    const res = eng.snap(148, 100);
+    expect(res.point?.type ?? null).not.toBe('quadrant');
+  });
+});
+
+// ─── Perpendicular ─────────────────────────────────────────
+
+describe('D11: perpendicular snap', () => {
+  it('Fuspunkt senkrecht vom refPoint auf horizontale Linie', () => {
+    const eng = new SnapEngine(cfg(['perpendicular']));
+    // Horizontale Linie y=100, refPoint (50,50): Fuspunkt (50,100)
+    eng.setElements([line('l1', 0, 100, 200, 100)]);
+    const res = eng.snap(52, 98, { x: 50, y: 50 });
+    expect(res.point).not.toBeNull();
+    expect(res.point!.type).toBe('perpendicular');
+    expect(res.point!.x).toBe(50);
+    expect(res.point!.y).toBe(100);
+  });
+
+  it('Schrge Linie: Fuspunkt berechnet', () => {
+    const eng = new SnapEngine(cfg(['perpendicular']));
+    // Linie (0,0)-(100,100), refPoint (100,0): Fuspunkt (50,50)
+    eng.setElements([line('l1', 0, 0, 100, 100)]);
+    const res = eng.snap(51, 49, { x: 100, y: 0 });
+    expect(res.point!.x).toBeCloseTo(50, 0);
+    expect(res.point!.y).toBeCloseTo(50, 0);
+  });
+
+  it('ohne refPoint kein perpendicular snap (Modus still)', () => {
+    const eng = new SnapEngine(cfg(['perpendicular']));
+    eng.setElements([line('l1', 0, 100, 200, 100)]);
+    const res = eng.snap(50, 98);
+    expect(res.point?.type ?? null).not.toBe('perpendicular');
+  });
+});
+
+// ─── Tangent ───────────────────────────────────────────────
+
+describe('D11: tangent snap', () => {
+  it('Tangentialpunkt am Kreis von refPoint (rechts vom Kreis)', () => {
+    const eng = new SnapEngine(cfg(['tangent']));
+    // Kreis (100,100) r=50, refPoint (200,100), d=100:
+    // halfAng = acos(r/d) = 60° → Tangentenpunkte bei (125, 143.3)/(125, 56.7)
+    eng.setElements([circle('c1', 100, 100, 50)]);
+    const res = eng.snap(127, 145, { x: 200, y: 100 });
+    expect(res.point).not.toBeNull();
+    expect(res.point!.type).toBe('tangent');
+    expect(res.point!.x).toBeCloseTo(125, 0);
+    expect(res.point!.y).toBeCloseTo(143.3, 0);
+  });
+
+  it('refPoint AUF dem Kreiszentrum -> kein Tangentenpunkt (degeneriert)', () => {
+    const eng = new SnapEngine(cfg(['tangent']));
+    eng.setElements([circle('c1', 100, 100, 50)]);
+    const res = eng.snap(148, 100, { x: 100, y: 100 });
+    expect(res.point?.type ?? null).not.toBe('tangent');
+  });
+});
+
+// ─── fromOffset ────────────────────────────────────────────
+
+describe('D11: fromOffset', () => {
+  it('Basispunkt + dx/dy ergibt Zielpunkt', () => {
+    const p = fromOffset({ x: 100, y: 200 }, 50, -30);
+    expect(p).toEqual({ x: 150, y: 170 });
+  });
+
+  it('dx=dy=0 bleibt am Basispunkt', () => {
+    const p = fromOffset({ x: 10, y: 20 }, 0, 0);
+    expect(p).toEqual({ x: 10, y: 20 });
+  });
+
+  it('negative Offsets funktionieren', () => {
+    const p = fromOffset({ x: 0, y: 0 }, -100, -50);
+    expect(p).toEqual({ x: -100, y: -50 });
+  });
+});

frontend/tests/splineTool.test.ts

@@ -0,0 +1,147 @@
+/**
+ * Task D2 – Spline-Tool (CV-basiert): Kontrollpunkt-Klick-Sequenz,
+ * ENTER committet ab 3 CVs. Render als interpolierte Polyline mit
+ * Catmull-Rom-Glättung (Kurve läuft DURCH alle CVs), CVs in
+ * properties.controlPoints gespeichert (DXF-SPLINE-Export-ready).
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { splineTool } from '../src/plugins/builtin/core-drawing';
+import { CADDocument } from '../src/kernel/document/CADDocument';
+import { createInMemoryDoc } from './helpers/inMemoryDoc';
+import type { CADElement, Pt } from '../src/types/cad.types';
+
+function mkCtx(options: Record<string, unknown> = {}) {
+  const { ydoc } = createInMemoryDoc();
+  const doc = new CADDocument(ydoc);
+  const previews: (CADElement | null)[] = [];
+  const statuses: string[] = [];
+  const ctx: any = {
+    doc,
+    options,
+    setStatus: (m: string) => statuses.push(m),
+    setPreview: (el: CADElement | null) => previews.push(el),
+  };
+  return { ctx, doc, previews, statuses };
+}
+
+function pe(x: number, y: number): { world: Pt } {
+  return { world: { x, y } } as never;
+}
+
+beforeEach(() => {
+  splineTool.handlers.cancel?.({ setStatus: () => {}, setPreview: () => {} } as never);
+});
+
+describe('D2: splineTool', () => {
+  it('4 CVs + ENTER erzeugt EINE geglaettete Polyline mit mehr Punkten als CVs', () => {
+    const { ctx, doc } = mkCtx();
+    const cvs = [[0, 0], [100, 100], [200, 0], [300, 100]];
+    for (const [x, y] of cvs) splineTool.handlers.down!(pe(x, y), ctx);
+    const committed = splineTool.handlers.key!({ key: 'Enter' } as never, ctx);
+    expect(committed).toBe(true);
+    const els = doc.getAllElements();
+    expect(els).toHaveLength(1);
+    const el = els[0];
+    expect(el.type).toBe('polyline');
+    const pts = el.properties.points as Pt[];
+    expect(pts.length).toBeGreaterThan(8); // geglaettet, nicht nur CVs
+  });
+
+  it('Kurve interpoliert DURCH die CVs: Start/Ende exakt, Zwischen-CVs liegen auf der Kurve', () => {
+    const { ctx, doc } = mkCtx();
+    for (const [x, y] of [[0, 0], [100, 100], [200, 0], [300, 100]]) {
+      splineTool.handlers.down!(pe(x, y), ctx);
+    }
+    splineTool.handlers.key!({ key: 'Enter' } as never, ctx);
+    const el = doc.getAllElements()[0];
+    const pts = el.properties.points as Pt[];
+    expect(pts[0]).toEqual({ x: 0, y: 0 });
+    const last = pts[pts.length - 1];
+    expect(last.x).toBeCloseTo(300, 5);
+    expect(last.y).toBeCloseTo(100, 5);
+    // Zwischenpunkt (100,100) muss auf der Kurve liegen (Catmull-Rom interpoliert):
+    const near = pts.find((p) => Math.abs(p.x - 100) < 1.5 && Math.abs(p.y - 100) < 1.5);
+    expect(near).toBeDefined();
+  });
+
+  it('CVs werden in properties.controlPoints gespeichert', () => {
+    const { ctx, doc } = mkCtx();
+    for (const [x, y] of [[0, 0], [50, 80], [120, 40]]) {
+      splineTool.handlers.down!(pe(x, y), ctx);
+    }
+    splineTool.handlers.key!({ key: 'Enter' } as never, ctx);
+    const el = doc.getAllElements()[0];
+    const cvs = el.properties.controlPoints as Pt[];
+    expect(cvs).toHaveLength(3);
+    expect(cvs[1]).toEqual({ x: 50, y: 80 });
+  });
+
+  it('Glättung: Kurve weicht von der CV-Sehnen-Linie ab (keine Polyline durch CVs)', () => {
+    const { ctx, doc } = mkCtx();
+    // S-artige CVs: (0,0) (0,100) (100,100) (100,0) — Catmull-Rom schwingt um die Ecken
+    for (const [x, y] of [[0, 0], [0, 100], [100, 100], [100, 0]]) {
+      splineTool.handlers.down!(pe(x, y), ctx);
+    }
+    splineTool.handlers.key!({ key: 'Enter' } as never, ctx);
+    const el = doc.getAllElements()[0];
+    const pts = el.properties.points as Pt[];
+    // Es muss Punkte geben, die ausserhalb der BBox der Sehnen-Verbindung liegen
+    // (Glattung schwingt): minY < 0 oder maxY > 100 an irgendeiner Stelle
+    const ys = pts.map((p) => p.y);
+    const swingsBelow = Math.min(...ys) < -0.5;
+    const swingsAbove = Math.max(...ys) > 100.5;
+    expect(swingsBelow || swingsAbove).toBe(true);
+  });
+
+  it('ENTER mit weniger als 3 CVs committet NICHT (Status erklaert Mindestzahl)', () => {
+    const { ctx, doc, statuses } = mkCtx();
+    splineTool.handlers.down!(pe(0, 0), ctx);
+    splineTool.handlers.down!(pe(50, 50), ctx);
+    const consumed = splineTool.handlers.key!({ key: 'Enter' } as never, ctx);
+    expect(doc.getAllElements()).toHaveLength(0);
+    expect(statuses[statuses.length - 1]).toContain('3');
+  });
+
+  it('Nicht-ENTER-Keys werden nicht konsumiert (return false)', () => {
+    const { ctx } = mkCtx();
+    splineTool.handlers.down!(pe(0, 0), ctx);
+    const consumed = splineTool.handlers.key!({ key: 'a' } as never, ctx);
+    expect(consumed).toBe(false);
+  });
+
+  it('Preview bei move ab 1 CV', () => {
+    const { ctx, previews } = mkCtx();
+    splineTool.handlers.down!(pe(0, 0), ctx);
+    splineTool.handlers.move!(pe(50, 50), ctx);
+    expect(previews.length).toBeGreaterThanOrEqual(1);
+    const last = previews[previews.length - 1];
+    expect(last).not.toBeNull();
+  });
+
+  it('cancel resettet: naechste Sitzung startet frisch', () => {
+    const { ctx, doc } = mkCtx();
+    splineTool.handlers.down!(pe(0, 0), ctx);
+    splineTool.handlers.down!(pe(50, 50), ctx);
+    splineTool.handlers.cancel?.(ctx);
+    splineTool.handlers.down!(pe(0, 0), ctx);
+    splineTool.handlers.down!(pe(50, 50), ctx);
+    splineTool.handlers.down!(pe(100, 0), ctx);
+    splineTool.handlers.key!({ key: 'Enter' } as never, ctx);
+    // 3 CVs der NEUEN Sitzung — controlPoints == 3 (alte 2 nicht gemischt)
+    const el = doc.getAllElements()[0];
+    expect((el.properties.controlPoints as Pt[]).length).toBe(3);
+  });
+
+  it('Status zaehlt CVs mit', () => {
+    const { ctx, statuses } = mkCtx();
+    splineTool.handlers.down!(pe(0, 0), ctx);
+    expect(statuses[0]).toContain('1');
+    expect(statuses[0]).toContain('Spline');
+  });
+
+  it('Manifest: id=spline, ribbonTab=canvas, tags basic', () => {
+    expect(splineTool.manifest.id).toBe('spline');
+    expect(splineTool.manifest.ribbonTab).toBe('canvas');
+    expect((splineTool.manifest.tags ?? [])).toContain('basic');
+  });
+});

frontend/tests/uiMode.test.tsx

@@ -0,0 +1,118 @@
+/**
+ * Task H1 – simple/pro Mode.
+ *
+ * uiModeService: persistierter UI-Modus ('simple' | 'pro', Default 'pro'),
+ * localStorage-Persistenz, Subscribe für Live-Updates.
+ * RibbonBar filtert im simple-Modus auf tools mit tags 'basic'.
+ * CommandLine ist pro-only (im simple-Modus versteckt).
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import {
+  getUIMode, setUIMode, subscribeUIMode, UIMode,
+} from '../src/services/uiModeService';
+
+afterEach(cleanup);
+
+// ─── uiModeService ────────────────────────────────────────
+
+describe('H1: uiModeService', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('Default ist pro (Vollständige Werkzeugpalette)', () => {
+    expect(getUIMode()).toBe('pro');
+  });
+
+  it('setUIMode simple persistiert in localStorage', () => {
+    setUIMode('simple');
+    expect(getUIMode()).toBe('simple');
+    expect(localStorage.getItem('webcad.uiMode')).toBe('simple');
+  });
+
+  it('Persistiert über Reload hinweg (localStorage gesetzt vor erstem get)', () => {
+    localStorage.setItem('webcad.uiMode', 'simple');
+    expect(getUIMode()).toBe('simple');
+  });
+
+  it('subscribeUIMode feuert bei Wechsel und unsubscribed korrekt', () => {
+    const cb = vi.fn();
+    const off = subscribeUIMode(cb);
+    setUIMode('simple');
+    expect(cb).toHaveBeenCalledWith('simple');
+    setUIMode('pro');
+    expect(cb).toHaveBeenCalledWith('pro');
+    off();
+    cb.mockClear();
+    setUIMode('simple');
+    expect(cb).not.toHaveBeenCalled();
+    // Aufräumen für weitere Tests
+    setUIMode('pro');
+  });
+
+  it('ungültiger localStorage-Wert fällt auf pro zurück', () => {
+    localStorage.setItem('webcad.uiMode', 'gibts-nicht');
+    expect(getUIMode()).toBe('pro');
+  });
+});
+
+// ─── RibbonBar simple-Filter ─────────────────────────────
+
+describe('H1: RibbonBar simple-Filter', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    setUIMode('pro');
+  });
+
+  it('pro-Modus: alle V2-Tools sichtbar (basic + pro-Tags)', async () => {
+    const { registerBuiltinPlugins, pluginRegistry } = await import('../src/plugins');
+    registerBuiltinPlugins();
+    pluginRegistry.initDefaults();
+    const RibbonBar = (await import('../src/components/RibbonBar')).default;
+    render(<RibbonBar activeTab="canvas" onTabChange={() => {}} onAction={() => {}} />);
+    const all = screen.getAllByRole('button').length;
+    expect(all).toBeGreaterThan(10);
+    cleanup();
+    setUIMode('simple');
+    render(<RibbonBar activeTab="canvas" onTabChange={() => {}} onAction={() => {}} />);
+    const simpleCount = screen.getAllByRole('button').length;
+    expect(simpleCount).toBeLessThan(all);
+    expect(simpleCount).toBeGreaterThan(0);
+  });
+
+  it('simple-Modus: pro-Tools (rotate/scale/mirror) fehlen, basic (line) bleibt', async () => {
+    localStorage.clear();
+    setUIMode('simple');
+    const { registerBuiltinPlugins, pluginRegistry } = await import('../src/plugins');
+    registerBuiltinPlugins();
+    pluginRegistry.initDefaults();
+    const RibbonBar = (await import('../src/components/RibbonBar')).default;
+    render(<RibbonBar activeTab="canvas" onTabChange={() => {}} onAction={() => {}} />);
+    const html = document.body.innerHTML;
+    expect(html).toContain('data-v2tool="line"');
+    expect(html).not.toContain('data-v2tool="rotate"');
+    expect(html).not.toContain('data-v2tool="mirror"');
+  });
+
+  it('CommandLine-Komponente: pro-only rendering via useUIMode', async () => {
+    const { useUIMode } = await import('../src/services/uiModeService');
+    const CommandLine = (await import('../src/components/CommandLine')).default;
+    setUIMode('pro');
+    const { container: proContainer } = render(<CommandLine history={[]} onCommand={() => {}} />);
+    expect(proContainer.querySelector('.cmdline')).toBeTruthy();
+    cleanup();
+    setUIMode('simple');
+    const { container: simpleContainer } = render(<CommandLine history={[]} onCommand={() => {}} />);
+    expect(simpleContainer.querySelector('.cmdline')).toBeFalsy();
+  });
+
+  it('Topbar-Toggle wechselt Mode', async () => {
+    const Topbar = (await import('../src/components/Topbar')).default;
+    setUIMode('pro');
+    render(<Topbar projectName="Testprojekt" savedStatus="Gespeichert" onUndo={() => {}} onRedo={() => {}} onThemeToggle={() => {}} theme="dark" />);
+    const btn = screen.getByTitle(/Modus.*wechseln|Einfach.*Modus|Profi-Modus/i);
+    fireEvent.click(btn);
+    expect(getUIMode()).toBe('simple');
+  });
+});