Browser-BIM (cad): semantisches Modell, abgeleitete 2D/3D-Sichten, Zeichenwerkzeuge

Standalone-Browser-Port von DOSSIER. Enthaelt das semantische Modell mit
Plan-/3D-Ableitung, Zeichen- und Editierwerkzeuge, Rhino-artiges Befehlssystem,
dockbares Panel-System, Resource-Manager, DXF/.lin/.pat-Import, i18n (de/en)
sowie Projektdokumentation und Probe-Harness.

docs/research/ux-patterns.md

@@ -0,0 +1,590 @@
+# UX/UI-Patterns moderner Browser-CAD/BIM-Tools — Research & Leitplanken
+
+> Recherche für unser Browser-BIM (React + TS + Three.js, DOSSIER-Port, Wohnbau,
+> CH/SIA-Kontext). Ziel: konkrete, **übernehmbare** Interaktions- und UI-Muster.
+> Stand: 2026-06-29.
+>
+> Untersucht: **Arcol**, **Snaptrude**, **TestFit**, **Onshape** (Browser-CAD),
+> **Vectorworks** (Resource/Navigation-Modell), **Figma** (Canvas-Interaktion,
+> Inspector). Querschnitt: Snapping/Inferencing, Grip-Editing, perceived
+> performance, Command-Palette, Onboarding.
+>
+> Jeder externe Claim ist mit Quelle verlinkt. Am Ende:
+> **„Leitplanken für unsere UI"** — priorisierte Empfehlungen.
+
+---
+
+## 0. Kurzfazit (TL;DR)
+
+Die ganze Klasse moderner Browser-CAD/BIM-Tools konvergiert auf ein **gemeinsames
+Set von Mustern**, das wir fast 1:1 übernehmen sollten:
+
+1. **Ein Modell, viele synchrone Sichten** (2D-Plan ⇄ 3D ⇄ Daten/Sheets), Änderung
+   in einer Sicht propagiert sofort in alle anderen. (Arcol, Snaptrude)
+2. **Kontextuelle UI** statt voller Werkzeugleisten: Buttons/Felder erscheinen nur,
+   wenn die aktuelle Auswahl sie erlaubt. (Arcol, Onshape, Figma)
+3. **Drei-Zonen-Layout**: links Navigator/Layer-Baum, Mitte Canvas + schwebende
+   Tool-Palette, rechts Inspector. (Figma, Vectorworks, Onshape)
+4. **Aggressives Snapping/Inferencing** mit Live-Glyphen + Modifier zum
+   Unterdrücken. (Onshape) — für Maus-im-Browser unverzichtbar.
+5. **Direkte Manipulation per Grips** statt Dialogen. (Figma, DOSSIER-Backlog)
+6. **Perceived performance** über Skeletons, optimistic UI und gescopte
+   Ladezustände — im Browser-3D-Kontext ein Differenzierungs-Hebel.
+7. **Command-Palette (Ctrl/Cmd-K)** als Discovery- und Speed-Layer.
+8. **Onboarding via „learn by doing"** an einem mitgelieferten Sample-Projekt +
+   progressive disclosure.
+
+Unsere bestehende Architektur (semantisches Modell als Single Source of Truth,
+abgeleitete Sichten, Vectorworks-Terminologie) ist exakt der richtige Unterbau für
+diese Muster — die meiste Arbeit liegt in der **UI-Schicht**, nicht im Datenmodell.
+
+---
+
+## 1. Gesamtlayout & Navigator-/Layer-Panels
+
+### 1.1 Was die Tools machen
+
+**Figma** strukturiert die Fläche in vier Zonen: eine Toolbar, **zwei Panels** und
+einen scrollbaren Canvas. Links das **Navigation-Panel** mit Layern und Pages,
+rechts das **Properties-Panel**; der Layer-Baum „enthält und organisiert alle
+Elemente auf dem Canvas … und zeigt, wie Elemente verbunden sind"
+([Figma: left sidebar](https://help.figma.com/hc/en-us/articles/360039831974-View-layers-and-pages-in-the-left-sidebar),
+[Figma: Interface](https://www.inthepocket.design/course/figma-for-everyone/the-interface)).
+
+**Vectorworks** trennt sauber zwei Konzepte, die für uns 1:1 relevant sind:
+- Die **Navigation Palette** gibt Zugriff auf *Classes, Design Layers, Sheet
+  Layers, Viewports, Saved Views, References* — jeweils als eigener Tab mit Liste.
+  Sichtbarkeit wird per Klick in einer **Visibility-Spalte** gesetzt; Doppelklick
+  **aktiviert** einen Layer/eine Class. Die Zeichenfläche bleibt nutzbar, während
+  die Palette offen ist
+  ([VW Navigation Palette](https://app-help.vectorworks.net/2022/eng/VW2022_Guide/Structure/The_Navigation_palette.htm)).
+- Paletten sind **andockbar/ein-/ausblendbar pro Workspace**
+  ([VW Palettes & Tool Sets](https://app-help.vectorworks.net/2018/eng/VW2018_Guide/Start/Palettes_and_Tool_Sets.htm)).
+
+**Arcol** baut beim Modellieren einen **Model Tree** im Menü auf — pro
+BIM-Komponente wächst der Baum mit
+([AEC Magazine: Arcol BIM in browser](https://aecmag.com/bim/arcol-bim-cloud-browser/)).
+
+**Onshape** zeigt links den **Feature-/Assembly-Baum** (parametrische Historie:
+Sketches, Features, Mates) — die Bauhistorie ist die primäre Navigation
+([Onshape UI Basics](https://cad.onshape.com/help/Content/ui-basics.htm)).
+
+### 1.2 Übernahme für uns
+
+Unser Dokumentmodell hat **zwei unabhängige Achsen** (siehe ROADMAP §2c):
+**Zeichnungsebenen** (Geschosse + Schnitte/Ansichten) und **Ebenen**
+(Grafik-Kategorien-Baum `00 Raster … 80 Plangrafik`). Das mappt fast wörtlich auf
+das Vectorworks-Navigations-Modell:
+
+- **Linke Sidebar, getabbt** wie die VW-Navigation-Palette:
+  - Tab **„Geschosse / Ansichten"** (= unsere Zeichnungsebenen): EG/1OG/…,
+    Schnitte, Ansichten. Mit **Visibility-Toggle**, **Lock**, und **Doppelklick =
+    aktiv setzen** (welches Geschoss editiert wird).
+  - Tab **„Ebenen"** (= Grafik-Kategorien-Baum, in *jedem* Geschoss gleich): Baum
+    mit Code, Name, Farb-Swatch, Linienstärke, Visibility, Hatch. Pro Ansicht
+    schaltbar (das ist genau VWs „Sichtbarkeit pro Viewport/Saved View").
+  - Tab **„BIM-Tree / Elemente"** (aus DOSSIER-Backlog §11: *Element-Übersicht
+    Geschoss→Kind→Element, Suche, Shift-Klick = Zoom*). Das ist unser Pendant zu
+    Arcols Model Tree + Onshapes Feature-Baum.
+- **Visibility-Spalte als Erstklass-Interaktion** (VW-Muster): Auge-Icon je Zeile,
+  Klick togglet sofort, kein Dialog. (Wir haben bereits `EyeIcon.tsx` — das ist die
+  Keimzelle.)
+- **Wichtig:** Geschoss wird **im 3D *oder* Plan** betrachtet, *keine* getrennten
+  Daten — der View-Umschalter (siehe §2) gehört in die Geschoss-Auswahl, nicht in
+  separate Dokumente.
+
+> **Anti-Pattern vermeiden:** Vectorworks selbst leidet unter
+> **Paletten-Wildwuchs** (viele frei schwebende Fenster). Für ein fokussiertes
+> Wohnbau-Tool: **feste 3-Zonen-Shell** (links Navigator, rechts Inspector), nicht
+> N frei schwebende Palettenfenster. Figmas Striktheit schlägt VWs Flexibilität für
+> unsere Zielgruppe (Architekt:innen, die schnell ein EFH zeichnen wollen).
+
+---
+
+## 2. 3D ⇄ Plan-View-Umschaltung (das Herzstück)
+
+### 2.1 Was die Tools machen
+
+- **Snaptrude:** Nutzer arbeiten **in 2D *und* 3D gleichzeitig**; Änderung in einer
+  Sicht spiegelt sich automatisch in der anderen. Objekte sind **nach Geschossen
+  klassifiziert**, was es erlaubt, „3D-Geometrie zu zeichnen, während man in einer
+  2D-Grundriss-Ansicht arbeitet". Push-an-einer-Fläche „fühlt sich an wie eine
+  Linie ziehen", berechnet aber sofort Flächen/BIM-Daten neu
+  ([ArchDaily: Snaptrude](https://www.archdaily.com/1009121/snaptrude-the-browser-based-bim-tool-thats-changing-the-way-architects-work),
+  [Snaptrude](https://www.snaptrude.com/)).
+- **Arcol:** „Every view is 3D in Arcol" — und **Boards** (Präsentations-Layouts)
+  sind **live-synced**: ändert sich das Gebäude, aktualisieren sich die Layouts
+  automatisch (kein statischer PDF-Export)
+  ([AEC Magazine: Arcol BIM 2.0](https://aecmag.com/bim/arcol-unleashed-bim-2-0/)).
+- **TestFit:** explizites **Expand/Collapse von Optionen** — man klappt Varianten
+  auf zum Vergleichen und wieder zu, um sich aufs Detail-Editieren im Canvas zu
+  konzentrieren („smoother flow between setting up a site, reviewing options, and
+  refining a design")
+  ([TestFit 5.19](https://www.testfit.io/blog/testfit-5-19-a-new-generative-design-workflow)).
+
+### 2.2 Übernahme für uns
+
+Das ist **genau unsere Kern-Architektur** (ROADMAP §2c: „Ansichtstyp = Kamera-
+Projektion + optionaler Schnitt"). Konkrete UI-Muster:
+
+- **View-Switcher als segmented control** direkt am Canvas (oben links oder
+  oben mittig): `3D | Grundriss | Schnitt | Ansicht`. Plan-View = orthogonale
+  Top-Kamera + Clipping-Ebene auf `okff + schnitthöhe` (steht bereits so im Modell).
+- **Kein** Moduswechsel der *Daten*, nur der **Kamera + Schnitt** — visuell als
+  weicher Übergang (Kamera-Animation) kommunizieren, damit Nutzer Orientierung
+  behalten (Snaptrude/Arcol-Gefühl: „dieselbe Sache aus anderem Winkel").
+- **Optional, stark differenzierend:** **Split-View** (3D links, Plan rechts) wie
+  Snaptrudes „2D + 3D simultan". Da unsere Sichten ohnehin reaktiv aus *einem*
+  Modell abgeleitet werden (Zustand-Store → SVG-Plan + Three-Scene), ist Split-View
+  technisch billig und ein Wow-Moment im Onboarding.
+- **Kamera-Presets** (aus DOSSIER-Backlog): Kardinal N/O/S/W, Iso-Oktanten,
+  **Norden-Rotation** (CH/Swisstopo-Georeferenz) — als kleine Würfel-/Kompass-Gizmo
+  oben rechts im 3D (ViewCube-Muster, bekannt aus Onshape/CAD allgemein
+  ([Onshape UI Basics](https://cad.onshape.com/help/Content/ui-basics.htm))).
+- **Drawing Layers (Schnitte/Ansichten) sind „Saved Views"**: Auswahl in der linken
+  Sidebar = Kamera + Schnitt + Maßstab + Layer-Kombination springt an (VW „Saved
+  Views" / DOSSIER „Ausschnitte"). Das ersetzt Ordner-Wildwuchs bei 50+ Ansichten.
+
+---
+
+## 3. Zeichnen & Editieren: Snapping, Inferencing, Grips, Tool-Paletten
+
+### 3.1 Snapping / Inferencing — das wichtigste Detail im Browser
+
+**Onshape** ist hier die Referenz (sehr konkret dokumentiert,
+[Onshape Automatic Inferencing](https://cad.onshape.com/help/Content/Sketch/automatic_inferencing.htm)):
+
+- **Inference-Typen:** horizontal, vertikal, **midpoint**, parallel, coincident,
+  Ausrichtung zum Origin/zu anderen Entities, Tangente, Perpendikular.
+- **Visuelles Feedback:**
+  - **gelbe Highlights** auf Vertices/Mittelpunkten beim Hovern,
+  - **orange gestrichelte Linie** zeigt eine vorgeschlagene H/V-Ausrichtung,
+  - **orange Highlight** verwandter Geometrie beim Ziehen (relationales Feedback).
+- **Steuerung:** Linksklick **akzeptiert** die vorgeschlagene Bedingung; **Shift
+  gedrückt halten unterdrückt** Inferencing temporär (loslassen = wieder an).
+- **„Wake-up"-Inferences:** kurzes Verweilen über einer Geometrie „weckt" deren
+  Bezugslinien (z. B. erst Mittelpunkt antippen, dann woanders zeichnen → bekommt
+  Ausrichtung zu diesem Mittelpunkt).
+- **Post-hoc:** vorhandene Geometrie ziehen triggert erneut Inferencing (Center
+  eines Kreises vertikal zum Origin ziehen → fügt automatisch vertikale Constraint).
+
+**Constraint-Sichtbarkeit:** Constraint-Icons sind farbcodiert (blau =
+externe/Referenz, weiß = intern) und ein-/ausblendbar
+([Onshape Working with Constraints](https://cad.onshape.com/help/Content/Sketch/working_with_constraints.htm)).
+
+### 3.2 Übernahme für uns (Snapping)
+
+Für ein Maus-bedientes Browser-Tool ist **gutes Snapping der Unterschied zwischen
+„Spielzeug" und „Werkzeug".** Konkret:
+
+- **Snap-Targets** (Wohnbau-relevant): Wand-Endpunkte/Achsen, Wand-Mittelpunkte,
+  Rechtwinklig/Parallel zu bestehender Wand, **Raster** (Achsraster `00 Raster`),
+  Öffnungs-Achsen, vorhandene 2D-Linien-Endpunkte, Schnittpunkte.
+- **Feedback exakt wie Onshape übernehmen:** Snap-Glyph am Cursor (●
+  Endpunkt, △ Mitte, ⟂ rechtwinklig), **gestrichelte Hilfslinie** für
+  Achsen-Alignment, Hover-Highlight des Snap-Ziels.
+- **Modifier:** **Shift unterdrückt Snapping** (Onshape-Konvention) — Nutzer
+  erwarten das bereits aus anderen Tools. Zusätzlich **Ortho-Modus** (z. B. Shift
+  für 0/45/90° beim Linienziehen — Figma-Konvention) sauber davon trennen oder per
+  Toggle.
+- **Live-Maßeingabe beim Zeichnen** (CAD-Standard, auch Onshape): während des
+  Ziehens Länge/Winkel tippbar (Tab zwischen Feldern). Das ersetzt nachträgliches
+  Dimensionieren und ist für Architekt:innen Pflicht.
+- Wir brauchen **kein** volles Constraint-Solver-System wie Onshape (mechanisches
+  parametrisches CAD). BIM-Wände sind achs-basiert; **Inferencing beim Setzen**
+  genügt, persistente geometrische Constraints sind Overkill für Wohnbau.
+
+### 3.3 Grip-Editing / direkte Manipulation
+
+- **Figma:** Auswahl zeigt Bounding-Box mit **Resize-Handles**; ziehen
+  manipuliert direkt; Smart-Guides/Maße erscheinen relativ zu Nachbarn beim Bewegen
+  ([Figma right sidebar](https://help.figma.com/hc/en-us/articles/360039832014-Design-prototype-and-explore-layer-properties-in-the-right-sidebar)).
+- **Snaptrude:** Push/Pull an Flächen als primäre 3D-Edit-Geste
+  ([ArchDaily](https://www.archdaily.com/1009121/snaptrude-the-browser-based-bim-tool-thats-changing-the-way-architects-work)).
+- **DOSSIER-Backlog (§11)** listet **Grip-Editing** (Wand-Endpunkte,
+  Schnitt-Symbole im Plan) explizit als Aufwand L, Phase 3–4 — und das **9-Punkt-
+  Objekt-Info** (lesen + verschieben/skalieren/rotieren direkt).
+
+**Übernahme:** Grips sind der wichtigste „pro feel"-Hebel.
+- **Wand-Endpunkt-Grips** im Plan *und* 3D, mit Snapping (s. o.) und Live-Maß.
+- **Öffnungs-Grips** (Position entlang Wand, Breite) — Host-Beziehung bleibt erhalten.
+- **Schnittlinien-Grips im Plan** (Schnittlinie ziehen → Schnitt-Ansicht
+  re-deriviert) — das ist Grip-Editing über die Sicht-Grenze hinweg, ein starkes
+  Differenzierungsmerkmal.
+- Selektion → **bounding handles** (Figma-Muster) für 2D-Plangrafik (Linien,
+  Rechtecke, Text).
+
+### 3.4 Tool-Palette & kontextuelle Werkzeuge
+
+**Kontextuelle UI ist das durchgehende Muster:**
+- **Arcol:** „buttons appear only when they can be used" — Loft/Sweep erscheinen bei
+  Auswahl zweier Sketches, Boolean bei zwei Extrusions
+  ([AEC: Arcol sneak peek](https://aecmag.com/bim/arcol-a-sneak-peek/)).
+- **Onshape:** Sketch-Toolbar erscheint beim Betreten des Sketch-Modus; Tools in
+  Gruppen (vertikale Trennlinien), Dropdown-Pfeile für Varianten; Dialoge mit
+  **blau hinterlegtem Feld**, das eine Auswahl im Graphics-Bereich verlangt
+  ([Onshape sketch toolbar](https://cad.onshape.com/help/Content/Sketch/sketch_basics.htm),
+  [Onshape Constraints](https://cad.onshape.com/help/Content/Sketch/working_with_constraints.htm)).
+- **Figma:** schmale Bottom-/Top-Toolbar mit den Kern-Tools; alles Weitere
+  kontextuell rechts.
+
+**Übernahme:**
+- **Schlanke Tool-Palette** (Figma-artig), gruppiert nach unserer Domäne:
+  *Wand · Tür/Fenster · Decke · Treppe · Dach · Raum* (BIM) und *Linie · Polylinie
+  · Rechteck · Kreis · Bogen · Text · Bemaßung* (2D auf `80 Plangrafik`).
+- **Modus-bewusste Tools:** im Grundriss andere Defaults als im 3D; im
+  Schnitt/Ansicht nur Annotation/2D-Tools.
+- **Contextual action bar bei Auswahl** (Arcol-Muster): selektiere eine Wand →
+  schwebende Mini-Toolbar „Tür einsetzen / Fenster / Wandtyp / verschneiden".
+  Selektiere zwei Wände → „verschneiden / verlängern".
+- **Aktives Tool sticky + ESC bricht ab**, Leertaste = Pan, Scroll = Zoom
+  (Figma/CAD-Konventionen — Nutzer bringen Muskelgedächtnis mit).
+- **LoD-bewusste Tool-/Stil-UI** (DOSSIER-Backlog: *zeigt nur passende Controls je
+  Geometrie-Typ*) — keine Füll-Optionen bei 3D-Auswahl. Deckt sich mit Figmas
+  „controls appear based on layer type".
+
+---
+
+## 4. Property-/Inspector-Panel
+
+### 4.1 Was die Tools machen
+
+**Figma — rechte Sidebar** (für uns das Vorbild,
+[Figma right sidebar](https://help.figma.com/hc/en-us/articles/360039832014-Design-prototype-and-explore-layer-properties-in-the-right-sidebar)):
+- Tabs **Design / Prototype** (bei Edit), **Inspect / Properties** (bei View-only).
+- Kategorien: **Alignment/Rotation/Position → Dimensions → Constraints/Layout →
+  Appearance (Fill, Stroke, Effects) → Export**.
+- **Controls erscheinen je Layer-Typ** (kontextuell).
+- **Dev-Mode/Inspect** liefert konkrete Werte + Abstände zwischen Objekten + Code.
+
+**Arcol — rechtes Panel** zeigt **Gebäude-Metriken** kontextuell: Geschossfläche,
+Anzahl Geschosse, GFZ/FAR, Unit-Count, Standortfläche, Kostenschätzung
+([Arcol BIM 2.0](https://aecmag.com/bim/arcol-unleashed-bim-2-0/)).
+
+**TestFit — ein zentrales Parameter-Panel:** „alle Schlüsselparameter an einem
+Ort" (Unit-Counts, Parkplatz-Ziele, Gebäudegrößen-Limits) → sofortige Wirkung auf
+generierte Optionen
+([TestFit 5.19](https://www.testfit.io/blog/testfit-5-19-a-new-generative-design-workflow)).
+
+**Onshape — Feature-Dialoge:** Erstellen/Editieren über Dialoge mit Pflicht-
+Selektionsfeldern (blau)
+([Onshape UI Basics](https://cad.onshape.com/help/Content/ui-basics.htm)).
+
+### 4.2 Übernahme für uns
+
+- **Rechter Inspector, kontextuell nach Element-Typ** (Figma-Muster):
+  - **Wand** → Wandtyp (→ WallType-Bibliothek), Referenzlage mid/left/right
+    (DOSSIER-Backlog), Höhe, Achs-Endpunkte (9-Punkt/Maße), Stil-Overrides.
+  - **Tür/Fenster** → Breite/Höhe, Brüstung, Schwenkbogen/Anschlag, Detailgrad,
+    Symbol.
+  - **Decke/Slab** → SlabType, UK/OK-Override, Aussparungen.
+  - **Raum** → SIA-416-Kategorie (HNF/NNF/VF/FF/GF/AGF), Fläche (read-only,
+    berechnet), Stempel-Felder.
+  - **2D-Element** → Linienstil (→ Line Manager), Hatch (→ Hatch Manager), Farbe.
+- **Sektionen kollabierbar** (Figma) — Wohnbau-Inspector kann lang werden;
+  Default-Sektionen offen, Fortgeschrittenes (Overrides) zugeklappt
+  (= progressive disclosure, s. §7).
+- **Mixed-value-Handling bei Mehrfachauswahl** (Figma): bei Mehrfachauswahl
+  abweichende Werte als „Mixed/—" zeigen, gemeinsames Editieren erlauben. Wichtig
+  z. B. „alle EG-Wände auf Wandtyp X".
+- **Live-Metriken-Block** (Arcol-Muster) — selbst im Wohnbau wertvoll:
+  Bruttogeschossfläche, **SIA-416-Bilanz**, Raumzahl, Volumen. Im Inspector wenn
+  nichts selektiert ist = „Projekt-Übersicht" (vgl. Figmas Canvas-Level-Optionen
+  bei leerer Auswahl).
+- **Read-only-Felder klar markieren** (berechnete Flächen/Volumen) vs. editierbar.
+
+---
+
+## 5. Resource-Manager (Bibliotheken)
+
+### 5.1 Was Vectorworks macht — unser direktes Vorbild
+
+Der **Resource Manager** ist „ein zentraler Ort für Assets" (Symbole, Linientypen,
+Texturen, Materialien …)
+([VW Resource Manager](https://app-help.vectorworks.net/2026/eng/VW2026_Guide/ResourceManager/Resource%20Manager.htm)):
+- **Zwei-/Drei-Pane-Modell:** **File-Browser** (offene Dateien, Favoriten,
+  VW-Libraries, User-/Workgroup-Libraries) → **Resource-Viewer** (Ressourcen der
+  gewählten Datei) → optional **Preview/Metadaten**
+  ([VW File browser pane](https://app-help.vectorworks.net/2023/eng/VW2023_Guide/ResourceManager/Resource_Manager_File_browser_pane.htm),
+  [VW Resource viewer pane](https://app-help.vectorworks.net/2026/eng/VW2026_Guide/ResourceManager/Resource_Manager_Resource_viewer_pane.htm)).
+- **Organisation mehrdimensional:** nach Quelle, **nach Typ** (Dropdown-Filter),
+  nach Ordnerstruktur.
+- **Ansichten:** Thumbnails / List / Thumbnails-List; **Suchfeld** mit Filtern.
+- **Resource Selector**: dieselbe Bibliothek erscheint **in Dialogen** und zeigt
+  dort nur **kontextuell passende** Ressourcen.
+
+### 5.2 Übernahme für uns
+
+Unsere ROADMAP §2d definiert bereits **Line Manager / Hatch Manager / Component
+Manager**, mit Verweis-per-id-Architektur (Components → Hatches → LineStyles). Das
+Vectorworks-Modell passt perfekt:
+
+- **Ein gemeinsames Resource-Browser-Pattern** für alle Bibliotheken (Linienstile,
+  Schraffuren, Components/Baustoffe, später Wand-/Öffnungs-Stil-Kataloge,
+  Material-PBR, Raumstempel-Layouts). Eine wiederverwendbare React-Komponente,
+  parametrisiert nach Ressourcentyp.
+- **Zwei Erscheinungsformen** (wie VW):
+  1. **Manager-Ansicht** (großes Panel/Modal) zum Anlegen/Editieren/Duplizieren.
+  2. **Inline-Resource-Selector** im Inspector — beim Setzen eines Wandtyps/Hatch
+     öffnet sich ein kompakter Picker mit Thumbnails, gefiltert auf den passenden
+     Typ. (Figma macht das analog mit „Styles/Variables".)
+- **Thumbnails sind im CAD-Kontext kritisch**: Hatch-Vorschau, Component-
+  Schichtaufbau, Linienstil-Strich als gerenderte Mini-Previews.
+- **Zentrale Änderung propagiert** (unsere id-Referenz-Architektur): Component-Farbe
+  ändern → alle Wände mit diesem Component aktualisieren live. Das ist Arcols
+  „single source of truth" auf Ressourcen-Ebene.
+- **Cross-Projekt-Presets/Favoriten** (DOSSIER-Backlog, LocalStorage; VW-Favoriten):
+  „einmal speichern, überall nutzen".
+
+---
+
+## 6. Perceived Performance (gefühlte Geschwindigkeit)
+
+Browser-3D + WASM-Geometrie (web-ifc, OpenCascade) + HLR-Projektion = **echte
+Latenz** an mehreren Stellen. Gefühlte Performance ist hier ein
+Differenzierungs-Hebel gegenüber schwerfälligem Revit/ArchiCAD.
+
+### 6.1 Belegte Muster
+
+- **Skeleton-Screens** lassen Apps **20–30 % schneller** wirken als Spinner bei
+  identischer realer Ladezeit
+  ([LogRocket: skeleton screens](https://blog.logrocket.com/ux-design/skeleton-loading-screen-design/),
+  [UI Deploy](https://ui-deploy.com/blog/skeleton-screens-vs-spinners-optimizing-perceived-performance)).
+- **Indikator zur Situation passen:** Spinner für kurze Waits, Skeleton für
+  Content, Progress-Bar für messbare Operationen, **optimistic UI** für
+  „instant-feeling" Aktionen
+  ([Onething: skeleton vs spinner](https://www.onething.design/post/skeleton-screens-vs-loading-spinners)).
+- **Optimistic UI**: UI sofort aktualisieren, Server-Bestätigung abwarten, nur bei
+  Fehler zurückrollen — ideal für häufige, risikoarme Aktionen
+  ([Smart Interface Design Patterns](https://smart-interface-design-patterns.com/articles/designing-better-loading-progress-ux/)).
+- **Verzögerung vor Indikator (100–200 ms):** schließt die Operation vorher ab,
+  gar kein Indikator → kein Flackern
+  ([Onething](https://www.onething.design/post/skeleton-screens-vs-loading-spinners)).
+- **Gescopte Ladezustände** (React Suspense / Next loading.tsx): nur der betroffene
+  Bereich lädt, der Rest bleibt interaktiv; `aria-busy`, Live-Regions,
+  reduced-motion respektieren
+  ([LogRocket](https://blog.logrocket.com/ux-design/skeleton-loading-screen-design/)).
+
+### 6.2 Übernahme für uns (konkret)
+
+- **Optimistic Model-Edits:** Geometrie-Mutation (Wand ziehen, Tür setzen) **sofort**
+  im Zustand-Store + 3D anzeigen; **schwere Booleans/HLR im Web Worker** (Comlink,
+  bereits geplant) nachziehen. Wand erscheint sofort, die *exakte* verschnittene
+  Öffnung/Schnittlinie „schärft nach". UI bleibt flüssig.
+- **Progressive Plan-Generierung:** SVG-Grundriss zuerst grob (Achsen/Linien),
+  Schraffuren/Symbole nachladen — Skeleton/„low-detail first" statt Spinner.
+- **HLR-Schnitte (Risiko #4):** Worker + Caching (ROADMAP §6). UI: **Skeleton der
+  Schnitt-Ansicht** + „berechne verdeckte Kanten…" mit Progress, restliche App
+  bleibt nutzbar (gescopter Ladezustand).
+- **Delay-then-show** für alle Worker-Tasks (150 ms-Schwelle), sonst Flicker beim
+  schnellen Editieren.
+- **Three.js-Disziplin:** stabile 60 fps beim Orbit/Pan ist selbst „perceived
+  performance" — instanziertes Rendering, Frustum-Culling, LoD für ferne Geometrie
+  (deckt sich mit ROADMAP-Phase-7-Performance-Härtung). Lieber 60 fps bei grober
+  Geometrie als ruckelnde Präzision.
+- **Auto-Save-Status klar, unaufdringlich** kommunizieren („Gespeichert"/„Speichern…"),
+  optimistic — nie blockierend (Figma-Muster).
+
+---
+
+## 7. Onboarding & Discoverability
+
+### 7.1 Belegte Muster
+
+- **Progressive Disclosure:** zuerst nur Essenzielles zeigen, Komplexität schrittweise
+  enthüllen — reduziert kognitive Last; drei Typen: step-by-step, conditional,
+  contextual
+  ([IxDF: Progressive Disclosure](https://ixdf.org/literature/topics/progressive-disclosure),
+  [UXPin](https://www.uxpin.com/studio/blog/what-is-progressive-disclosure/)).
+- **„Learn by doing" an Sample-Dokument:** Grammarly startet Nutzer mit einem
+  Beispiel-Dokument mit Fehlern; Hotspots/Tooltips führen durch Features
+  ([Userpilot: onboarding examples](https://userpilot.com/blog/user-onboarding-examples/)).
+- **Stufenweises Aufdecken fortgeschrittener Features** (Asana: erst Projekt
+  anlegen, später Dependencies/Kanban/Gantt)
+  ([Userpilot: progressive disclosure](https://userpilot.com/blog/progressive-disclosure-examples/)).
+- **Command-Palette als Discovery-Layer:** durchsuchbare Befehlsliste hilft, Features
+  zu entdecken — „incredible effect on exploration and feature discoverability",
+  besonders für neue/seltene Nutzer
+  ([Mobbin: command palette](https://mobbin.com/glossary/command-palette),
+  [Untitled UI: command menus](https://www.untitledui.com/components/command-menus)).
+- **Arcol** wirbt explizit mit „low barrier to entry, gentle learning curve … clean,
+  intuitive, requires minimal training"
+  ([AEC: Arcol BIM 2.0](https://aecmag.com/bim/arcol-unleashed-bim-2-0/)).
+
+### 7.2 Übernahme für uns
+
+- **Mitgeliefertes Sample-Projekt** (wir haben bereits `sampleProject.ts`!) als
+  Onboarding-Bühne: ein kleines EFH, fertig modelliert. Nutzer **manipuliert echtes
+  Modell** statt leerem Canvas (Grammarly-Muster). Erste Geste: „zieh diese Wand"
+  → sieht 3D + Plan live mitlaufen (unser Kern-Wow).
+- **Progressive Disclosure im Inspector & Tool-Palette:** Default zeigt
+  Wohnbau-Essenz (Wand/Tür/Fenster/Decke/Raum). Fortgeschrittenes (Prioritäts-
+  Verschneidung, Overrides, Detailgrade, Section-Styles) **zugeklappt / hinter
+  „Erweitert"**. Das passt zu unserem radikalen Wohnbau-Fokus.
+- **Contextual coachmarks** statt langem Tutorial: beim ersten Selektieren einer
+  Wand ein kleiner Tooltip „Endpunkt ziehen zum Verlängern, Doppelklick für Wandtyp".
+- **Command-Palette (Ctrl/Cmd-K)** — siehe §8 — doppelt als Onboarding: alle
+  Werkzeuge/Befehle durchsuchbar = lebende Feature-Liste.
+- **Tastatur-Kürzel sichtbar machen** (in Tooltips, in der Palette) — schult
+  beiläufig pro Workflows.
+
+---
+
+## 8. Command-Palette & Tastatur
+
+### 8.1 Belegte Muster
+
+- **Ctrl/Cmd-K** ist die De-facto-Konvention (Linear, Figma [Cmd-P], Notion,
+  Vercel, Raycast, Slack, Superhuman); VS Code nutzt Cmd-Shift-P
+  ([Mobbin](https://mobbin.com/glossary/command-palette),
+  [Superhuman: command palette](https://blog.superhuman.com/how-to-build-a-remarkable-command-palette/)).
+- Zwei Haupt-Use-Cases: **Navigation/Suche** und **Shortcuts/Quick Actions**
+  ([Outdraw Academy: command palette](https://outdraw-academy.gitbook.io/ux-patterns/command-palette)).
+- Trigger kann **sichtbar** (Button/Suchleiste) oder nur per Shortcut sein —
+  für Discovery besser **auch sichtbar**
+  ([Mobbin](https://mobbin.com/glossary/command-palette)).
+
+### 8.2 Übernahme für uns
+
+- **Cmd/Ctrl-K-Palette** für: Werkzeug aktivieren („Wand", „Tür"), Ansicht
+  springen („Grundriss EG", „Schnitt A-A"), Ressource öffnen („Hatch Manager"),
+  globale Aktionen („Norden rotieren", „PDF exportieren", „SIA-Bilanz").
+- **Sichtbarer Trigger** (Such-/Befehlsfeld in der Top-Bar) für Entdeckung +
+  Shortcut für Speed.
+- **Konsistente, dokumentierte Shortcuts** (Figma-Disziplin): W=Wand, T=Tür,
+  L=Linie, Space=Pan, Scroll=Zoom, Shift=Snap aus, Esc=Abbrechen, G=Grundriss-Toggle.
+  In Tooltips + Palette anzeigen.
+
+---
+
+## 9. Leitplanken für unsere UI (priorisierte Empfehlungen)
+
+> Sortiert nach **Hebel × Aufwand**. „P#" = grobe Phasen-Zuordnung zur ROADMAP.
+
+### A. Sofort / Fundament (Phase 0–1) — billig, prägt alles
+
+1. **Feste 3-Zonen-Shell.** Links **Navigator** (Tabs: *Geschosse/Ansichten · Ebenen
+   · BIM-Tree*, je mit Visibility-Toggle wie VW Navigation Palette). Mitte **Canvas**
+   mit schwebender Tool-Palette + View-Switcher. Rechts **Inspector** (kontextuell).
+   *Keine* frei schwebenden Palettenfenster (Anti-VW-Wildwuchs).
+2. **View-Switcher als segmented control** `3D | Grundriss | Schnitt | Ansicht`
+   direkt am Canvas; weiche Kamera-Übergänge; *eine* Datenquelle (kein Daten-
+   Moduswechsel). Nutzt unsere bestehende „abgeleitete Sichten"-Architektur.
+3. **Visibility/Lock pro Zeile** als Erstklass-Interaktion (1 Klick, kein Dialog) —
+   `EyeIcon.tsx` ausbauen.
+4. **Kontextueller Inspector**: Controls nur für den selektierten Element-Typ
+   (Figma/Arcol); berechnete Felder read-only markiert; Sektionen kollabierbar.
+5. **Tastatur-Grundlagen + Konventionen festnageln**: Space=Pan, Scroll=Zoom,
+   Esc=Abbrechen, Shift=Snap aus. Früh festlegen → Muskelgedächtnis.
+
+### B. Kern-„Pro-Feel" (Phase 1–2) — der eigentliche Wert
+
+6. **Snapping/Inferencing nach Onshape-Vorbild**: Snap-Glyphen am Cursor,
+   gestrichelte Achsen-Hilfslinien, Hover-Highlight, **Shift = unterdrücken**,
+   Wake-up-Inferences. Targets: Wand-Enden/Achsen/Mitten, Raster, Rechtwinklig/
+   Parallel, Öffnungs-Achsen. **Höchste Priorität für „Werkzeug-Gefühl".**
+7. **Live-Maßeingabe beim Zeichnen** (Länge/Winkel tippbar, Tab zwischen Feldern).
+8. **Kontextuelle Action-Bar bei Auswahl** (Arcol): Wand selektiert → „Tür/Fenster
+   einsetzen / Wandtyp / verschneiden". Buttons erscheinen nur, wenn anwendbar.
+9. **Schlanke domänen-gruppierte Tool-Palette** (BIM-Bauteile + 2D-Zeichnen),
+   modus-bewusst je Ansicht.
+10. **Optimistic Edits + Worker-Nachzug**: Mutation sofort sichtbar, schwere
+    Booleans/HLR im Worker (Comlink); Delay-then-show (150 ms) statt Spinner-Flicker.
+
+### C. Differenzierung (Phase 3) — hier gewinnen wir
+
+11. **Grip-Editing** (Wand-Endpunkte, Öffnungs-Position/-Breite, **Schnittlinie im
+    Plan**) mit Snapping + Live-Maß, in 2D *und* 3D. (DOSSIER-Backlog, Aufwand L —
+    aber Kern-Differenzierer.)
+12. **Saved Views / Ausschnitte** in der linken Sidebar = Kamera + Schnitt + Maßstab
+    + Layer-Kombination per Klick (VW „Saved Views" / DOSSIER). Skaliert auf 50+
+    Ansichten.
+13. **Wiederverwendbares Resource-Browser-Pattern** für Line/Hatch/Component-Manager:
+    Zwei-Pane (File-Browser → Viewer mit Thumbnails) als Manager *und* als inline
+    Picker im Inspector (VW-Modell). Zentrale Änderung propagiert (id-Referenzen).
+14. **Perceived-performance-Politik festschreiben**: Skeletons für Plan-/Schnitt-
+    Generierung, gescopte Ladezustände (restliche App bleibt nutzbar),
+    reduced-motion/`aria-busy` respektieren.
+15. **Split-View 3D|Plan** (Snaptrude-Muster) — billig dank reaktiver Sichten,
+    starker Wow-Effekt; auch fürs Onboarding.
+
+### D. Adoption & Politur (Phase 1 fortlaufend → 7)
+
+16. **Onboarding via Sample-Projekt** (`sampleProject.ts` als fertiges EFH);
+    „learn by doing", erste Geste zeigt 3D⇄Plan-Live-Sync. Progressive Disclosure:
+    Wohnbau-Essenz default, Fortgeschrittenes (Prioritäts-Verschneidung, Overrides,
+    Detailgrade) zugeklappt.
+17. **Command-Palette (Cmd/Ctrl-K)** + sichtbarer Trigger: Werkzeuge/Ansichten/
+    Ressourcen/Aktionen durchsuchbar; doppelt als Discovery-Layer.
+18. **Live-Metriken-Block** im Inspector (Arcol): BGF, **SIA-416-Bilanz**, Räume,
+    Volumen — bei leerer Auswahl als Projekt-Übersicht.
+19. **CH-Spezifika UI-seitig vorsehen**: **Norden-Rotation**-Gizmo (ViewCube/Kompass),
+    SIA-Raumkategorien im Raum-Inspector, später Swisstopo-Import-Flow mit Auto-Zoom
+    + Nullpunkt-Verschiebung.
+
+### Übergreifende Designprinzipien (gelten immer)
+
+- **Kontextualität vor Vollständigkeit** — zeige nur, was jetzt anwendbar ist
+  (Arcol/Onshape/Figma). Direkt verzahnt mit unserem „LoD-bewusste Stil-UI"-Backlog.
+- **Direkte Manipulation vor Dialogen** — Grips/Drag/Inline-Edit schlägt
+  Properties-Dialog (Figma/Snaptrude/DOSSIER).
+- **Eine Wahrheit, viele Sichten** — niemals Sicht-spezifische Daten; alles aus dem
+  semantischen Modell ableiten (deckt sich exakt mit unserem Architektur-Prinzip).
+- **Konventionen respektieren** — Pan/Zoom/Snap/Esc/Cmd-K wie die etablierten Tools;
+  Nutzer bringen Muskelgedächtnis aus Figma/CAD mit.
+- **Gefühlte > tatsächliche Geschwindigkeit** — optimistic + Skeletons + 60 fps;
+  im schweren Browser-3D-Geometrie-Kontext ein echter Wettbewerbsvorteil.
+
+---
+
+## Quellen
+
+**Arcol**
+- [Arcol unleashed – BIM 2.0 (AEC Magazine)](https://aecmag.com/bim/arcol-unleashed-bim-2-0/)
+- [Arcol – BIM in a browser (AEC Magazine)](https://aecmag.com/bim/arcol-bim-cloud-browser/)
+- [Arcol: a sneak peek (AEC Magazine)](https://aecmag.com/bim/arcol-a-sneak-peek/)
+- [The Arcol Manifesto](https://arcol.io/blog/the-arcol-manifesto)
+
+**Snaptrude**
+- [Snaptrude – browser-based BIM tool (ArchDaily)](https://www.archdaily.com/1009121/snaptrude-the-browser-based-bim-tool-thats-changing-the-way-architects-work)
+- [Snaptrude (offiziell)](https://www.snaptrude.com/)
+
+**TestFit**
+- [TestFit 5.19: A New Generative Design Workflow](https://www.testfit.io/blog/testfit-5-19-a-new-generative-design-workflow)
+- [TestFit (offiziell)](https://www.testfit.io/)
+
+**Onshape**
+- [Onshape: User Interface Basics](https://cad.onshape.com/help/Content/ui-basics.htm)
+- [Onshape: Automatic Inferencing](https://cad.onshape.com/help/Content/Sketch/automatic_inferencing.htm)
+- [Onshape: Working with Constraints](https://cad.onshape.com/help/Content/Sketch/working_with_constraints.htm)
+- [Onshape: Sketch Basics](https://cad.onshape.com/help/Content/Sketch/sketch_basics.htm)
+
+**Vectorworks**
+- [VW Resource Manager](https://app-help.vectorworks.net/2026/eng/VW2026_Guide/ResourceManager/Resource%20Manager.htm)
+- [VW Resource Manager: File browser pane](https://app-help.vectorworks.net/2023/eng/VW2023_Guide/ResourceManager/Resource_Manager_File_browser_pane.htm)
+- [VW Resource Manager: Resource viewer pane](https://app-help.vectorworks.net/2026/eng/VW2026_Guide/ResourceManager/Resource_Manager_Resource_viewer_pane.htm)
+- [VW Navigation Palette](https://app-help.vectorworks.net/2022/eng/VW2022_Guide/Structure/The_Navigation_palette.htm)
+- [VW Palettes and Tool Sets](https://app-help.vectorworks.net/2018/eng/VW2018_Guide/Start/Palettes_and_Tool_Sets.htm)
+
+**Figma**
+- [Figma: right sidebar / layer properties](https://help.figma.com/hc/en-us/articles/360039832014-Design-prototype-and-explore-layer-properties-in-the-right-sidebar)
+- [Figma: left sidebar (layers & pages)](https://help.figma.com/hc/en-us/articles/360039831974-View-layers-and-pages-in-the-left-sidebar)
+- [Figma for Everyone: The Interface](https://www.inthepocket.design/course/figma-for-everyone/the-interface)
+
+**Perceived Performance**
+- [LogRocket: Skeleton loading screen design](https://blog.logrocket.com/ux-design/skeleton-loading-screen-design/)
+- [UI Deploy: Skeleton Screens vs. Spinners](https://ui-deploy.com/blog/skeleton-screens-vs-spinners-optimizing-perceived-performance)
+- [Onething: Skeleton Screens vs Loading Spinners](https://www.onething.design/post/skeleton-screens-vs-loading-spinners)
+- [Smart Interface Design Patterns: Loading & Progress UX](https://smart-interface-design-patterns.com/articles/designing-better-loading-progress-ux/)
+
+**Command Palette**
+- [Mobbin: Command Palette](https://mobbin.com/glossary/command-palette)
+- [Untitled UI: Command menus (Cmd-K)](https://www.untitledui.com/components/command-menus)
+- [Superhuman: How to build a remarkable command palette](https://blog.superhuman.com/how-to-build-a-remarkable-command-palette/)
+- [Outdraw Academy: Command Palette UX pattern](https://outdraw-academy.gitbook.io/ux-patterns/command-palette)
+
+**Onboarding / Progressive Disclosure**
+- [IxDF: Progressive Disclosure](https://ixdf.org/literature/topics/progressive-disclosure)
+- [UXPin: What Is Progressive Disclosure](https://www.uxpin.com/studio/blog/what-is-progressive-disclosure/)
+- [Userpilot: User onboarding examples](https://userpilot.com/blog/user-onboarding-examples/)
+- [Userpilot: Progressive disclosure examples](https://userpilot.com/blog/progressive-disclosure-examples/)