v0.5.3: elektra-buizen min. 50 mm uit elkaar (gebundeld alleen naar de meterkast), vloer-wcd met leiding door de vloer, elektra op de PDF-bladen per wand/vloer/dakvlak, kosten elektra (buis + draad per meter, boorgaten 90 s geteld op stijlen/regels/balken, dozen, groepenkast, keuring), dakbeschot OSB 18 mm bovenop de sporen, felsplaten als dakbedekking

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

README.md

@@ -18,15 +18,16 @@ build-stap. Direct openen via `file://` werkt niet (texturen/lucht).
 ## Structuur
 
 ```
-index.html          app-shell: menubalk, splashscreen
+index.html          app-shell: ribbon, splashscreen
 css/app.css         alle stijl
 js/vendor/          three.js r128, eigen OrbitControls, jsPDF
-js/core/            gedeelde helpers: geometrie, UI-kit, PDF-bladen, labels,
-                    camerageheugen, weergavefilter, skybox, licentie, logo
+js/core/            gedeelde helpers: geometrie, bouwfasen, ribbon, UI-kit, PDF-bladen,
+                    labels, camerageheugen, weergavefilter, skybox, licentie, logo
 js/wall/            WallModel (logica) + wand-PDF + wand-editor
 js/floor/           FloorModel (logica) + vloer-PDF + vloer-editor
 js/roof/            RoofModel: dak (plat/lessenaar/zadel) + dakrand (boeidelen/daktrim)
 js/lighting/        LightingModel: gevellampen, boeideel-spots, binnenspots
+js/elektra/         ElektraModel + ElektraPdf: meterkast, schakelaars (letters), wcd, groepen, leidingen
 js/sandwich/        SandwichModel: sandwichpanelen rondom
 js/unit/            UnitModel: 1 vloer + 4 wanden, naden, wandstukken
 js/house/           HouseModel (woning) + woning-PDF + woning-editor
@@ -44,6 +45,15 @@ assets/             logo, texturen, skybox
 - **Assen/zijden.** Bovenaanzicht boven = noord: voor = noord, achter = zuid,
   links = west, rechts = oost (interne sleutels blijven voor/achter/…).
 - **Hoogtes** gelden vanaf bovenkant vloer (loopvlak).
+- **Bouwfasen** (`BuildStages`): regelwerk → elektra (buizen, dozen, meterkast) → beplating → vochtdoek →
+  latwerk → gevel & dak → afgewerkt, de volgorde in de hal. De 3D toont de
+  gekozen fase; lagen die daarin aan beide zijden zijn ingesloten worden niet
+  gebouwd (stijlen tussen spaanplaat en doek, latten en doek achter de rabat,
+  sporen tussen plafond en dakbedekking). Specificaties en totalen rekenen
+  altijd met alle lagen.
+- **Invoer volgt de logica:** de dakvorm is een eigenschap van de unit
+  (plat/lessenaar/zadel, richting, goot- en nokhoogte of helling); de
+  wanden volgen.
 
 ## Functionaliteit
 
@@ -52,9 +62,42 @@ assets/             logo, texturen, skybox
   38x235 met dubbele hoekstijlen en een dubbele stijl naast deuren, zaagplan
   op handelslengtes, spaanplaat binnen, vochtdoek (met kruislat en trasraam)
   of cementplaat buiten.
-- **Wandhoogte:** schuine bovenrand of middenpunt (nok) met goothoogtes. In
-  een unit bepaalt de laatst gewijzigde wand de dakvorm: de tegenoverliggende
-  wand spiegelt mee, de haakse wanden worden vlak op de hoekhoogtes.
+- **Elektra** (`elektra/`): meterkast (3×25 A) bij de voordeur, schakelaars
+  met letter (A binnen, B buiten, per unit een eigen; dezelfde letter bij de
+  lampen erop), dubbele wcd's per unit, apparaten met eigen groep (kookgroep
+  perilex, wasmachine, droger, warmtepomp, optioneel oven/vaatwasser).
+  Groepenverklaring met fasen en aardlekschakelaars, leidingen via stijlen
+  en plafond naar de meterkast (strekkende meters per type, draad, buis,
+  steekverbinders op module-naden), materiaallijst en eigen PDF-blad.
+  Buizen minstens 50 mm uit elkaar (gebundeld alleen het laatste stuk naar
+  de meterkast). Vloer-wcd's met leiding door de vloer. Elektra ook op de
+  PDF-bladen per wand, vloer en dakvlak (plafond). Alles verplaatsbaar door
+  te slepen in de plattegrond. Kosten (groep Elektra): buis + draad per
+  meter, boorgaten (geteld op stijlen, regels en balken), dozen,
+  afmonteren, groepenkast en keuring.
+- **Kozijnen** (`wall/kozijn-model.js`): per opening een vulling (geen, raam
+  met vast glas en optioneel ventilatierooster, of deur met dorpel en
+  optionele glasstrook; zij- en bovenlicht vullen de rest van een grote
+  opening), kleur buiten en binnen (wit, grijs, antraciet, zwart). Volgt de
+  maat van de opening, ook een schuine bovenzijde.
+- **Dakvorm/wandhoogte:** per unit een dakvorm (Unit › Dakvorm: plat,
+  lessenaar, zadel, mansarde of wolfsdak, met schuiven en hellingshoek).
+  Daaruit volgen de wanden: de kopgevels krijgen de daklijn (bij mansarde
+  met twee knikken, bij een wolfsdak afgeknot op het wolfseind, met
+  daarboven driehoekige wolfseinden met de dakhelling tot de nok, met een
+  rechte nok ertussen), de haakse wanden staan vlak op de goothoogte. Het
+  bovenste deel van een wolfsdak is gewoon houtwerk: sporen, hoekkepers,
+  nokbalk en kopbalken (ook in zaaglijst, specificaties en kosten).
+  Goot en nok gelden over de volle vloermaat (goot boven de buitenkant van
+  de gevel); staat de kopgevel tussen de haakse wanden, dan loopt zijn
+  daklijn daar precies op aan. Knik en wolfseind schalen mee met goot en
+  nok (verhouding). Bij een knik (mansarde) sluiten de dakvlakken in
+  verstek aan. De PDF heeft voor een wolfsdak een eigen blad met het
+  bovenste deel (bovenaanzicht houtwerk + stuklijst).
+  Grenzen (`UnitModel.LIMITS`): nok max 5 m, goot / plat dak max 3 m (vanaf
+  bovenkant vloer tot onderkant dak), unit max 4,3 x 14 m. Platte daken van verschillende hoogte krijgen elk hun eigen
+  boeideel (versprongen, het lage loopt door tot onder het hoge). Wijzig je een
+  wandhoogte in de wand-editor, dan geldt dezelfde regel vanuit die wand.
 - **Vloer:** balken, cirkelvormige doorvoeren, OSB, optioneel chassis;
   in de woning een vloerafwerking (textuur, bijv. visgraat).
 - **Woning:** units koppelen aan een zijde (uitlijning + verschuiving); op
@@ -70,9 +113,11 @@ assets/             logo, texturen, skybox
 - **Dak:** per unit opgebouwd als gespiegelde vloer + dakleer, in de vorm
   die de wanden aangeven: plat, lessenaar (schuine kopgevels) of zadel
   (nok). Elk dakvlak is een eigen dek met de balken als sporen en een eigen
-  PDF-blad; doorvoeren gaan naar het vlak waarin ze vallen. Bedekking per
-  unit: dakleer, of bij een hellend dak riet (180 mm, 3,8 kg/m²); de
-  dakrand schuift dan mee omhoog. De dakrand
+  PDF-blad; doorvoeren gaan naar het vlak waarin ze vallen. Opbouw:
+  plafondplaat (OSB) binnen, sporen, dakbeschot (OSB 18 mm) bovenop en
+  daarop de bedekking per unit: dakleer, of bij een hellend dak riet
+  (180 mm, 3,8 kg/m²) of felsplaten (staande naad, zink/antraciet/zwart);
+  de dakrand schuift dan mee omhoog. De dakrand
   (boeidelen/daktrim, spots) loopt als één rand door en volgt de helling.
   Is een dak langs de naad minstens een boeideelhoogte hoger dan het
   aangrenzende, dan krijgt het een eigen rand rondom (boven het lage dak
@@ -80,23 +125,41 @@ assets/             logo, texturen, skybox
   het hoge, of langs een zijgevel tot de volle overstek (onder de hoge
   rand). Boeideel en daktrim steken 80 mm boven het dakleer uit.
 - **Gevel:** gevelbekleding per woning, met override per wand: rabat
-  (vochtdoek + kruislat) of steen (181 texturen). Steen is overal een
+  (vochtdoek + kruislat + rabat 12 mm, kleur per woning, getekend als
+  plankentextuur die over naden doorloopt) of steen (181 texturen). Steen is overal een
   steenstrip op een wit isolatieblok, samen 110 mm (`WallModel.STONE`).
   Het trasraam (cementplaat of een eigen steen) komt onder beide, dus
   twee stenen kan. Latwerk, doek en metselwerk lopen per gevel door over
   unit-naden. Sandwichpanelen rondom, 600 mm de grond in.
 - **Verlichting:** boeideel-spots of gevellampen (per gevel verdeeld,
   override per wand) en binnenspots in een raster per unit.
-- **3D:** weergavefilters (o.a. Vloerplan: wanden afgesneden op 500 mm,
-  snede wit afgedekt), binnenzijde van de wanden in een verfkleur (globaal),
-  omgeving Ontwerp/Dag/Nacht, Render met lampen als echte lichtbronnen.
-- **Uitvoer:** JSON opslaan/openen en een samenhangende PDF (plattegrond,
+- **Ribbon** (`core/ribbon.js`, vervangt de menubalk): Bestand · Start ·
+  Gevel · Dak · Binnen · Constructie · Verlichting · Rapport · Beeld · Extra,
+  plus een gekleurd tabblad voor de selectie (unit, wandstuk, binnenwand of
+  naadwand) dat vanzelf opent. Velden staan in groepen naast elkaar, met
+  schuiven voor maten met een logisch bereik. Dubbelklik op een tabblad
+  klapt de ribbon in. Plattegrond en 3D gebruiken de volle breedte; tabblad
+  Rapport toont het rapport (transport per unit, gewicht, afmetingen,
+  kosten, hout, plaatwerk, met staafdiagrammen) in plaats van de plattegrond.
+- **3D:** schuif Bouwfase linksonder; Beeld › Tonen: Dak/Lampen; Beeld ›
+  Doorsnede (wanden afgesneden op een instelbare hoogte, schuif in de ribbon
+  en onder de 3D, snede wit afgedekt), binnenzijde in een
+  verfkleur (afgewerkte fase), omgeving Ontwerp/Dag/Nacht, Render met lampen
+  als echte lichtbronnen.
+- **Transport:** per unit buitenmaat (incl. gevelafwerking), hoogte en
+  gewicht (vloer/wanden/dak) met een indicatieve breedteklasse.
+- **Uitvoer:** JSON opslaan/openen en een samenhangende PDF (aanzichten
+  noord/oost/zuid/west als vlakke render met legenda afwerking, plattegrond,
   vloeren, wandstukken, binnenwanden, totalen).
 
 ## Bekende beperkingen
 
-- Tijdelijk: een nieuwe woning is het testontwerp (L-vorm, lessenaar met
-  riet); uit te zetten met `TEST_DEFAULT` in `js/house/house-model.js`.
+- Tijdelijk (verwijderen voor productie): zaagmachine-overzicht (zaagmeters bij
+  2400 m/u, zaagsneden, hoeken) in de app en op het totalenblad (`SAW_M_PER_H`).
+- Tijdelijk: een nieuwe woning is het voorbeeldontwerp "Vlinderwoning"
+  (92 m², drie units, vlinderdak met riet + platte tuinkamer, ook als
+  `json/premade/vlinderwoning.json`); uit te zetten met `TEST_DEFAULT` in
+  `js/house/house-model.js`.
 - Units kunnen niet gedraaid worden.
 - Getekende binnenwanden volgen de dakvorm (nog) niet.
 - De dak-editor toont het dek in de plattegrond (niet per schuin dakvlak).

assets/README.txt

@@ -5,5 +5,8 @@ Assets voor de 3D-weergave en de PDF:
 - tiles.jpg                     tegeltextuur (1024x1024) voor de ronde vloer onder het object
 - textures/buitenmuur/          steen voor het trasraam: "<code> - Witte voeg.jpg" (2062x1125, 2 mm/px,
                                 naadloos), voorvertoning in thumb/32|64|128/*.png (WallModel.TRASRAAM_STONES)
-- textures/vloer/               vloerafwerking (FloorModel.FINISHES), bijv. visgraat_001.jpg (1500x1500, tegel 3 m)
-- textures/dak/                 dakbedekking: riet_<nr>.jpg (1024x1024, tegel 1 m); nummers in RoofModel RIET.nrs
+- textures/vloer/               vloerafwerking (FloorModel.FINISHES), bijv. visgraat_001.jpg (1500x1500, tegel 3 m); thumb/32|64|128/*.png
+- textures/dak/                 dakbedekking: riet_<nr>.jpg (1024x1024, tegel 1 m); nummers in RoofModel RIET.nrs; thumb/32|64|128/*.png
+- audio/five-armies.mp3         soundtrack easter egg (Ctrl+Shift+Alt+L shooter; core/granny-kit.js):
+                                "Five Armies" Kevin MacLeod (incompetech.com), licensed under
+                                Creative Commons: By Attribution 4.0 — https://creativecommons.org/licenses/by/4.0/

css/app.css

@@ -236,6 +236,7 @@
       position: relative;
     }
     .opening-card.opening-selected { background: var(--primary-soft); border-color: var(--primary); }
+    .opening-fill { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
     .opening-card.opening-warn {
       border-color: var(--danger);
       box-shadow: 0 0 0 1px var(--danger) inset;
@@ -298,56 +299,10 @@
     .material-toggle-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
     .material-toggle-btn:hover:not(.active) { border-color: var(--primary); color: var(--primary); }
 /* ============================================================
-   APP SHELL: menubalk, workspace-wrapper, splashscreen, about-modal
+   APP SHELL: ribbon, workspace-wrapper, splashscreen, about-modal
    ============================================================ */
 html, body { height: 100%; }
 
-#app-bar {
-  height: 40px;
-  background: var(--van-emous-blue);
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  padding: 0 4px;
-  position: relative;
-  z-index: 100;
-  user-select: none;
-}
-#app-bar .menu-group { position: relative; }
-#app-bar .menu-btn {
-  background: none; border: none; color: var(--nav-link-color); font-size: 13px;
-  padding: 8px 14px; cursor: pointer; border-radius: 4px;
-}
-#app-bar .menu-btn:hover, #app-bar .menu-btn.open { background: var(--surface); color: var(--primary); }
-#app-bar .menu-dropdown {
-  position: absolute; top: 100%; left: 0; background: var(--surface); border: 1px solid var(--border);
-  border-radius: 0 0 6px 6px; min-width: 220px; display: none; box-shadow: 0 8px 20px rgba(33, 33, 33, .15);
-}
-#app-bar .menu-dropdown.open { display: block; }
-#app-bar .menu-item {
-  padding: 9px 16px; font-size: 13px; color: var(--nav-link-color); cursor: pointer; position: relative;
-  display: flex; justify-content: space-between; align-items: center;
-}
-#app-bar .menu-item:hover { background: var(--primary-soft); color: var(--primary); }
-#app-bar .menu-hotkey { color: var(--text-faint); font-size: 11px; margin-left: 16px; }
-#app-bar .menu-item.disabled { color: #b0b8c2; cursor: not-allowed; pointer-events: none; }
-#app-bar .menu-item.disabled:hover { background: none; color: #b0b8c2; }
-#app-bar .submenu {
-  position: absolute; left: 100%; top: -1px; background: var(--surface); border: 1px solid var(--border);
-  border-radius: 6px; min-width: 200px; display: none; box-shadow: 0 8px 20px rgba(33, 33, 33, .15);
-}
-#app-bar .menu-item:hover .submenu, #app-bar .submenu.open { display: block; }
-#app-bar .submenu .menu-item { color: var(--nav-link-color); }
-#app-bar .submenu .menu-item:hover { background: var(--primary-soft); color: var(--primary); }
-
-#app-bar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; padding-right: 6px; }
-#app-version-tag { font-size: 11px; color: var(--text-muted); }
-#btn-about {
-  background: var(--surface); border: 1px solid var(--border); color: var(--nav-link-color); font-size: 12px;
-  padding: 5px 10px; border-radius: 4px; cursor: pointer;
-}
-#btn-about:hover { border-color: var(--primary); color: var(--primary); }
-
 #tab-bar {
   height: 34px;
   background: var(--van-emous-ultra-light);
@@ -368,7 +323,9 @@ html, body { height: 100%; }
 }
 .tab-item .tab-close:hover { color: var(--danger); }
 
-#workspace { width: 100vw; height: calc(100vh - 40px - 34px); position: relative; }
+body { display: flex; flex-direction: column; }
+#tab-bar { flex: none; }
+#workspace { width: 100vw; flex: 1; min-height: 0; position: relative; }
 #workspace-empty {
   height: 100%; display: flex; align-items: center; justify-content: center;
   color: var(--text-faint); font-size: 14px; flex-direction: column; gap: 10px;
@@ -435,6 +392,31 @@ html, body { height: 100%; }
 #wall-project-modal .modal-footer, #house-project-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
 #wall-project-modal .control-group input, #house-project-modal .control-group input { width: 150px; text-align: left; }
 
+/* --- Kosten & tijden (CostSettings) --- */
+#cost-settings-overlay {
+  position: fixed; inset: 0; background: rgba(33, 33, 33, .45); z-index: 500;
+  display: none; align-items: center; justify-content: center;
+}
+#cost-settings-overlay.open { display: flex; }
+#cost-settings-modal {
+  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px;
+  width: 760px; max-width: 94%; max-height: 90vh; display: flex; flex-direction: column;
+  box-shadow: 0 12px 30px rgba(33, 33, 33, .2);
+}
+#cost-settings-modal .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+#cost-settings-modal .modal-header h2 { margin: 0; font-size: 15px; color: var(--primary); }
+#cost-settings-modal .modal-close-x { background: none; border: none; color: var(--text-faint); font-size: 19px; line-height: 1; cursor: pointer; padding: 0 4px; }
+#cost-settings-modal .modal-close-x:hover { color: var(--danger); }
+#cost-settings-modal .modal-footer { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
+#cost-settings-modal .cs-body { overflow-y: auto; min-height: 0; flex: 1; columns: 2 340px; column-gap: 24px; }
+#cost-settings-modal .cs-group { break-inside: avoid; margin-bottom: 14px; }
+#cost-settings-modal .cs-group h3 { font-size: 12px; color: var(--primary); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 6px; }
+#cost-settings-modal .cs-row { display: grid; grid-template-columns: 1fr 84px 48px; gap: 6px; align-items: center; font-size: 12px; padding: 2px 0; }
+#cost-settings-modal .cs-row input, #cost-settings-modal .cs-row select { width: 100%; text-align: right; }
+#cost-settings-modal .cs-row select { text-align: left; }
+#cost-settings-modal .cs-unit { color: var(--text-faint); font-size: 11px; }
+#cost-settings-modal .cs-row.changed .cs-label { color: var(--primary); font-weight: bold; }
+
 #new-overlay {
   position: fixed; inset: 0; background: rgba(33, 33, 33, .45); z-index: 500;
   display: none; align-items: center; justify-content: center;
@@ -508,7 +490,6 @@ html, body { height: 100%; }
 .hn-item.disabled:hover { background: none; color: #9aa4b0; }
 .hn-actions { display: flex; gap: 6px; margin-top: 10px; }
 .hn-actions .io-btn { flex: 1; }
-.hn-soon { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 6px; }
 #house-nav .io-status { margin: auto 0 0; padding: 6px; }
 
 #house-part-host { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
@@ -516,20 +497,31 @@ html, body { height: 100%; }
 #house-part-host > #floor-app,
 #house-part-host > #house-overview { flex: 1; min-height: 0; height: auto; }
 
+/* Overzicht: plattegrond en 3D over de volle breedte (smal: onder elkaar);
+   bediening in de ribbon. Tabblad Rapport: rapport i.p.v. plattegrond. */
 #house-overview { display: flex; width: 100%; }
-.ho-col { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
-.ho-left { border-right: 1px solid var(--border); }
-#house-overview.fullscreen-3d .ho-left { display: none; }
-#house-overview.fullscreen-2d .ho-right { display: none; }
-.ho-pane { flex: 1; position: relative; min-height: 0; background: var(--viewport-bg); }
+.ho-views { flex: 1; display: flex; min-width: 0; min-height: 0; }
+.ho-pane { flex: 1; position: relative; min-height: 0; min-width: 0; background: var(--viewport-bg); }
+#ho-pane-plan { border-right: 1px solid var(--border); }
+@media (max-width: 1100px) {
+  .ho-views { flex-direction: column; }
+  #ho-pane-plan, .ho-report { border-right: none; border-bottom: 1px solid var(--border); }
+}
+#house-overview.fullscreen-3d #ho-pane-plan, #house-overview.fullscreen-3d .ho-report { display: none !important; }
+#house-overview.fullscreen-2d #ho-pane-3d { display: none; }
+.ho-report { display: none; flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 14px 18px 20px; background: var(--van-emous-ultra-light); border-right: 1px solid var(--border); }
+#house-overview.show-report .ho-report { display: block; }
+#house-overview.show-report #ho-pane-plan { display: none; }
+.ho-report .ui-spec-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); align-items: start; }
+.ho-report-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
+.ho-report-head h1 { margin: 0; font-size: 14px; }
+.ho-report-head span { font-size: 12px; color: var(--text-muted); }
+.ho-warn { position: absolute; top: 52px; left: 15px; right: 15px; z-index: 9; pointer-events: none; }
+.ho-warn .ui-warn { margin: 0 0 6px; max-width: 560px; }
 .ho-hint {
   position: absolute; left: 15px; bottom: 10px; font-size: 11px; color: #bbb;
   background: rgba(0, 0, 0, .6); padding: 3px 8px; border-radius: 4px; pointer-events: none;
 }
-#ho-props, #ho-specs {
-  height: 340px; flex: none; background: var(--van-emous-ultra-light); border-top: 1px solid var(--border); overflow-y: auto; padding: 15px 20px;
-}
-#ho-specs .controls-grid { grid-template-columns: 1fr 1fr; }
 .ho-prop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
 .io-btn-danger { border-color: #e3b4b0; color: var(--danger); }
 .io-btn-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
@@ -619,7 +611,7 @@ html, body { height: 100%; }
 .hn-label { display: inline-flex; align-items: center; }
 
 /* Weergave-cyclus (T): render-only = ook het info-deel onder de 3D weg. */
-.render-only #ho-specs, .render-only #specs-panel-3d, .render-only #floor-specs-panel-3d { display: none; }
+.render-only #specs-panel-3d, .render-only #floor-specs-panel-3d { display: none; }
 
 /* Bestaande editor-panelen (wand/vloer) in dezelfde stijl als de UI-kit. */
 .control-group { min-height: 28px; margin-bottom: 3px; gap: 10px; }
@@ -644,3 +636,163 @@ h1 { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight:
 
 /* Voorvertoning steen trasraam (woning > Gevel) */
 .hs-stone-preview { display: block; width: 128px; height: auto; margin: 4px 0 8px; border: 1px solid var(--border, #ccc); border-radius: 3px; }
+
+/* Lopen (first person, derde weergavestand): uitleg onderin de 3D. */
+.walk-hint { display: none; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 12px; border-radius: 4px;
+  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; pointer-events: none; white-space: nowrap; z-index: 5; }
+.walk-hint.show { display: block; }
+
+/* Easter egg: schieten (Ctrl+L) */
+.shooter-hud { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 6; font-family: monospace; color: #ffd27a; }
+.shooter-hud.show { display: block; }
+.shooter-cross { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
+  background: linear-gradient(#ffd27a, #ffd27a) center/2px 100% no-repeat, linear-gradient(#ffd27a, #ffd27a) center/100% 2px no-repeat; opacity: .85; }
+.shooter-weapon { position: absolute; right: 18px; bottom: 16px; font-size: 18px; font-weight: 700; text-shadow: 0 0 4px #000; }
+.shooter-credit { position: absolute; left: 14px; top: 12px; font-size: 11px; color: #fff; opacity: .7; text-shadow: 0 0 3px #000; }
+.shooter-kills { position: absolute; right: 18px; top: 12px; font-size: 18px; font-weight: 700; text-shadow: 0 0 4px #000; }
+.shooter-shout { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-size: 20px; font-weight: 700; color: #fff;
+  text-shadow: 0 0 4px #000, 2px 2px 0 #8040a0; opacity: 0; transition: opacity .2s; white-space: nowrap; }
+.shooter-shout.show { opacity: 1; }
+.shooter-ouch { position: absolute; inset: 0; background: rgba(255, 0, 0, 0.45); opacity: 0; }
+.shooter-ouch.show { animation: shooter-ouch .4s ease-out; }
+@keyframes shooter-ouch { from { opacity: 1; } to { opacity: 0; } }
+.shooter-announce { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); font: italic 900 42px Impact, 'Arial Black', sans-serif;
+  color: #ff2a1a; text-shadow: 0 0 8px #000, 3px 3px 0 #400; letter-spacing: 2px; white-space: nowrap; opacity: 0; }
+.shooter-announce.show { opacity: 1; animation: shooter-announce .35s ease-out; }
+@keyframes shooter-announce { from { transform: translateX(-50%) scale(2.2); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
+.shooter-help { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 12px; border-radius: 4px;
+  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; white-space: nowrap; }
+
+
+/* Openingen: "Volg dakhelling" (schuine bovenzijde) */
+.opening-roof-btn {
+  display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 4px 8px; font-size: 11.5px;
+  background: var(--surface); border: 1px solid var(--border); color: var(--primary); border-radius: 4px; cursor: pointer;
+}
+.opening-roof-btn:hover { background: var(--primary-soft); border-color: var(--primary); }
+
+/* Inspector: kruimelpad, schuiven, kleurstaal. */
+.ui-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; color: var(--text-faint); margin-bottom: 4px; }
+.ui-crumbs .bi { font-size: 9px; }
+.ui-crumbs span:last-child { color: var(--text-muted); }
+.ui-field-range { flex-wrap: wrap; row-gap: 2px; padding: 2px 0 4px; }
+.ui-field-range label { flex: 1 1 100%; }
+.ui-range { flex: 1 1 100%; gap: 8px; }
+.ui-range input[type=range] { flex: 1; min-width: 0; accent-color: var(--primary); }
+.ui-range input[type=number] { width: 84px; }
+.ui-swatch { height: 14px; border-radius: 3px; border: 1px solid var(--border); margin: 2px 0 6px; }
+
+/* Bouwfase (core/build-stages.js): schuif linksonder in de 3D. */
+.stage-bar {
+  position: absolute; left: 15px; bottom: 14px; z-index: 10; min-width: 300px; max-width: calc(100% - 30px);
+  background: rgba(0, 0, 0, 0.75); border: 1px solid #444; border-radius: 6px; padding: 7px 12px 6px; color: #eee; font-size: 12px;
+}
+.stage-row, .stage-extra { display: flex; align-items: center; gap: 10px; }
+.stage-title { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-on-dark); font-weight: 600; white-space: nowrap; }
+.stage-range { flex: 1; min-width: 90px; accent-color: var(--primary-on-dark); }
+.stage-name { min-width: 84px; font-weight: 600; white-space: nowrap; }
+.stage-track { flex: 1; display: flex; flex-direction: column; min-width: 120px; }
+.stage-track .stage-range { width: 100%; margin: 0; }
+.stage-ticks { display: flex; justify-content: space-between; padding: 0 3px; font-size: 10px; color: #888; }
+.stage-ticks span { cursor: pointer; padding: 0 3px; }
+.stage-ticks span.on { color: var(--primary-on-dark); }
+.stage-extra { display: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid #444; }
+.stage-extra.show { display: flex; }
+.walking .stage-bar { display: none; }
+
+/* Grafieken in het rapport (staafdiagrammen, HTML). Categorische kleuren
+   in vaste volgorde: vloer, wanden, dak. */
+.viz { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --track: #eef1f5; }
+.viz-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-muted); margin: -2px 0 8px; }
+.viz-legend span { display: inline-flex; align-items: center; gap: 5px; }
+.viz-key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
+.viz-key.s1, .viz-seg.s1 { background: var(--series-1); }
+.viz-key.s2, .viz-seg.s2 { background: var(--series-2); }
+.viz-key.s3, .viz-seg.s3 { background: var(--series-3); }
+.viz-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 8px; padding: 4px 0; }
+.viz-label { font-size: 12px; color: var(--text); line-height: 1.25; }
+.viz-label small { display: block; font-size: 10px; color: var(--text-faint); }
+.viz-row:has(.viz-label small) { grid-template-columns: 1fr auto; }
+.viz-row:has(.viz-label small) .viz-label { grid-column: 1 / -1; }
+.viz-track { height: 12px; }
+.viz-bar { display: flex; gap: 2px; height: 100%; min-width: 2px; }
+.viz-seg { height: 100%; min-width: 2px; }
+.viz-seg:last-child { border-radius: 0 4px 4px 0; }
+.viz-seg:hover { filter: brightness(1.12); }
+.viz-val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); text-align: right; white-space: nowrap; }
+.viz-note { font-size: 11px; color: var(--text-faint); line-height: 1.45; margin-top: 6px; }
+
+/* ============================================================
+   RIBBON (core/ribbon.js): tabbladen + groepen van 3 rijen hoog.
+   ============================================================ */
+#ribbon { flex: none; background: var(--van-emous-blue); border-bottom: 1px solid var(--border); position: relative; z-index: 100; user-select: none; }
+.rb-top { display: flex; align-items: flex-end; height: 34px; padding: 0 8px; }
+.rb-brand { display: flex; align-items: center; height: 100%; padding: 0 14px 0 4px; font-weight: 700; color: var(--primary); letter-spacing: .5px; }
+.rb-tabs { display: flex; gap: 2px; height: 100%; align-items: flex-end; overflow-x: auto; scrollbar-width: none; }
+.rb-tab {
+  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 14px; border: 1px solid transparent; border-bottom: none;
+  border-radius: 5px 5px 0 0; background: none; font: inherit; font-size: 12.5px; color: var(--nav-link-color); cursor: pointer; white-space: nowrap;
+}
+.rb-tab:hover { background: rgba(255, 255, 255, .55); color: var(--primary); }
+.rb-tab.active { background: var(--van-emous-ultra-light); border-color: var(--border); color: var(--primary); font-weight: 600; margin-bottom: -1px; height: 29px; }
+.rb-tab.rb-ctx { color: #fff; background: var(--primary); margin-left: 10px; }
+.rb-tab.rb-ctx:hover { background: var(--primary-hover); color: #fff; }
+.rb-tab.rb-ctx.active { background: var(--van-emous-ultra-light); color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); }
+.rb-right { margin-left: auto; display: flex; align-items: center; height: 100%; gap: 10px; font-size: 11px; color: var(--text-muted); padding-left: 12px; }
+.rb-body {
+  position: relative; display: flex; align-items: stretch; height: 104px; padding: 6px 40px 4px 6px;
+  background: var(--van-emous-ultra-light); border-top: 1px solid var(--border); overflow-x: auto; overflow-y: hidden;
+}
+#ribbon.rb-collapsed .rb-body { display: none; }
+.rb-collapse { position: absolute; right: 8px; bottom: 6px; border: none; background: none; color: var(--text-faint); cursor: pointer; padding: 2px 4px; }
+.rb-collapse:hover { color: var(--primary); }
+.rb-group { display: flex; flex-direction: column; flex: none; padding: 0 12px; border-right: 1px solid var(--border-soft); }
+.rb-group:last-of-type { border-right: none; }
+.rb-group-body { flex: 1; display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, 26px); column-gap: 16px; align-items: center; justify-content: start; }
+.rb-group-label { text-align: center; font-size: 10.5px; color: var(--text-faint); padding-top: 2px; white-space: nowrap; }
+.rb-btn {
+  display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: none; border-radius: 4px;
+  font: inherit; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap;
+}
+.rb-btn:hover:not(:disabled) { background: var(--primary-soft); border-color: rgba(185, 89, 19, .25); color: var(--primary); }
+.rb-btn:disabled { color: #a9b2bd; cursor: default; }
+.rb-btn.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
+.rb-btn.rb-danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
+.rb-small { height: 24px; padding: 0 7px; }
+.rb-small .bi { font-size: 14px; color: var(--primary); }
+.rb-btn:disabled .bi { color: inherit; }
+.rb-big { grid-row: span 3; flex-direction: column; justify-content: center; gap: 4px; min-width: 64px; height: 76px; padding: 4px 8px; text-align: center; }
+.rb-big .bi { font-size: 24px; color: var(--primary); }
+.rb-big span { white-space: normal; max-width: 86px; line-height: 1.2; }
+.rb-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--text-muted); min-width: 150px; }
+.rb-kv b { color: var(--text); font-variant-numeric: tabular-nums; }
+.rb-kv small { font-weight: normal; color: var(--text-faint); margin-left: 2px; }
+.rb-note { grid-row: span 3; max-width: 260px; font-size: 11px; line-height: 1.4; color: var(--text-muted); white-space: normal; align-self: center; }
+.rb-note.rb-warn { color: var(--danger); }
+/* Velden (UI-kit) compact in de ribbon: label links, invoer rechts, één rij. */
+.rb-group .ui-field { min-height: 0; height: 26px; gap: 8px; }
+.rb-group .ui-field label { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
+.rb-group .ui-control input[type=number] { width: 70px; padding: 2px 5px; font-size: 12px; }
+.rb-group .ui-control select { width: 132px; padding: 2px 4px; font-size: 12px; }
+.rb-group .ui-control input[type=color] { width: 46px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 3px; background: none; }
+.rb-group .ui-unit { width: 20px; margin-left: 3px; font-size: 10.5px; }
+.rb-group .ui-switch { margin-right: 0; }
+.rb-group .ui-field-range { flex-wrap: nowrap; padding: 0; }
+.rb-group .ui-field-range label { flex: none; }
+.rb-group .ui-range { flex: none; gap: 6px; }
+.rb-group .ui-range input[type=range] { width: 96px; flex: none; }
+.rb-group .ui-range input[type=number] { width: 62px; }
+.rb-thumb { width: 26px; height: 26px; border-radius: 3px; border: 1px solid var(--border); object-fit: cover; display: block; }
+.rb-swatch { width: 26px; height: 22px; border-radius: 3px; border: 1px solid var(--border); }
+.rb-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; height: 24px; }
+.rb-seg .rb-btn { border-radius: 0; border: none; border-right: 1px solid var(--border-soft); height: 22px; padding: 0 8px; }
+.rb-seg .rb-btn:last-child { border-right: none; }
+.rb-seg .rb-btn.active { background: var(--primary); color: #fff; }
+.rb-seg .rb-btn.active .bi { color: #fff; }
+.rb-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; }
+.rb-check input { accent-color: var(--primary); }
+
+/* Ribbon: hulpklassen voor de woning-tabbladen. */
+.rb-pair { display: flex; align-items: center; gap: 6px; }
+.rb-cols { grid-row: span 3; display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, 26px); column-gap: 18px; align-items: center; }
+.rb-cols:empty { display: none; }

index.html

@@ -22,47 +22,14 @@
     <div class="splash-version"><span class="splash-name">Tectum</span> &mdash; Versie <span class="app-version-number">0.0.0</span></div>
   </div>
 
-  <div id="app-bar">
-    <div class="menu-group">
-      <button id="menu-bestand-btn" class="menu-btn">Bestand</button>
-      <div id="menu-bestand-dropdown" class="menu-dropdown">
-        <div class="menu-item" id="menu-nieuw-item">
-          <span>Nieuw</span><span class="menu-hotkey">Ctrl+N</span>
-          <div class="submenu">
-            <div class="menu-item menu-nieuw-option" data-kind="woning" data-template="single">Woning (1 unit)</div>
-            <div class="menu-item menu-nieuw-option" data-kind="woning" data-template="L">Woning L-vorm (2 units)</div>
-            <div class="menu-item menu-nieuw-option" data-kind="muur">Los element: muur</div>
-            <div class="menu-item menu-nieuw-option" data-kind="vloer">Los element: vloer</div>
-          </div>
-        </div>
-        <div class="menu-item" id="menu-opslaan-als"><span>Opslaan als&hellip;</span><span class="menu-hotkey">Ctrl+S</span></div>
-        <div class="menu-item" id="menu-importeren">Importeren&hellip;</div>
-        <div class="menu-item" id="menu-project-props">Project eigenschappen&hellip;</div>
-      </div>
+  <header id="ribbon">
+    <div class="rb-top">
+      <div class="rb-brand"><span class="splash-name">Tectum</span></div>
+      <div class="rb-tabs" role="tablist"></div>
+      <div class="rb-right"><span class="app-version-slot"></span></div>
     </div>
-
-    <div class="menu-group">
-      <button id="menu-bewerken-btn" class="menu-btn">Bewerken</button>
-      <div id="menu-bewerken-dropdown" class="menu-dropdown">
-        <div class="menu-item" id="menu-mirror-h"><span>Horizontaal spiegelen</span><span class="menu-hotkey">H</span></div>
-        <div class="menu-item disabled" id="menu-mirror-v" title="Nog niet beschikbaar: een wand mag aan de onderzijde niet scheef worden.">Verticaal spiegelen</div>
-      </div>
-    </div>
-
-    <div class="menu-group">
-      <button id="menu-beeld-btn" class="menu-btn">Beeld</button>
-      <div id="menu-beeld-dropdown" class="menu-dropdown">
-        <div class="menu-item" id="menu-fullscreen"><span>Volledig scherm</span><span class="menu-hotkey">F</span></div>
-        <div class="menu-item" id="menu-3d-fullscreen"><span>3D groot / alleen render</span><span class="menu-hotkey">T</span></div>
-        <div class="menu-item" id="menu-2d-fullscreen"><span>2D groot</span><span class="menu-hotkey">R</span></div>
-      </div>
-    </div>
-
-    <div id="app-bar-right">
-      <span id="app-version-tag" class="app-version-slot"></span>
-      <button id="btn-about">Over deze software</button>
-    </div>
-  </div>
+    <div class="rb-body"></div>
+  </header>
 
   <div id="about-overlay">
     <div id="about-modal">
@@ -114,24 +81,35 @@
   <script src="js/core/license.js"></script>
   <script src="js/core/logo-data.js"></script>
   <script src="js/core/geometry.js"></script>
+  <script src="js/core/build-stages.js"></script>
   <script src="js/core/canvas-labels.js"></script>
   <script src="js/core/camera-memory.js"></script>
+  <script src="js/core/walk-controls.js"></script>
+  <script src="js/core/granny-kit.js"></script>
+  <script src="js/core/shooter.js"></script>
   <script src="js/core/view-filter.js"></script>
   <script src="js/core/ui-kit.js"></script>
+  <script src="js/core/ribbon.js"></script>
   <script src="js/core/skybox.js"></script>
   <script src="js/vendor/jspdf.umd.min.js"></script>
   <script src="js/core/pdf-sheet.js"></script>
+  <script src="js/wall/kozijn-model.js"></script>
   <script src="js/wall/wall-model.js"></script>
   <script src="js/wall/wall-pdf.js"></script>
   <script src="js/floor/floor-model.js"></script>
   <script src="js/floor/floor-pdf.js"></script>
   <script src="js/roof/roof-model.js"></script>
   <script src="js/lighting/lighting-model.js"></script>
+  <script src="js/elektra/elektra-model.js"></script>
   <script src="js/sandwich/sandwich-model.js"></script>
   <script src="js/wall/wall.js"></script>
   <script src="js/floor/floor.js"></script>
   <script src="js/unit/unit-model.js"></script>
   <script src="js/house/house-model.js"></script>
+  <script src="js/cost/cost-defaults.js"></script>
+  <script src="js/cost/cost-model.js"></script>
+  <script src="js/cost/cost-settings.js"></script>
+  <script src="js/elektra/elektra-pdf.js"></script>
   <script src="js/house/house-pdf.js"></script>
   <script src="js/house/house.js"></script>
   <script src="js/app.js"></script>

js/app.js

@@ -4,7 +4,7 @@
  * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
  * Zie LICENTIE.md.
  */
-const APP_VERSION = '0.4.15';
+const APP_VERSION = '0.5.3';
 // 0.0.X per kleine iteratie, 0.X.0 per mijlpaal, X.0.0 bij live-gang.
 
 let tabs = [];
@@ -32,14 +32,56 @@ function setWorkspaceEmpty() {
   </div>`;
 }
 
+// Ribbon (core/ribbon.js): app-tabbladen Bestand, Beeld en Extra; de
+// editor voegt er zijn eigen tabbladen aan toe. Knoppen die de huidige
+// editor niet ondersteunt staan uit.
 function updateEditMenuState() {
-  const has = (fn) => !!(currentEditor && typeof currentEditor[fn] === 'function');
-  document.getElementById('menu-opslaan-als').classList.toggle('disabled', !has('exportDesign'));
-  document.getElementById('menu-importeren').classList.toggle('disabled', !has('triggerImport'));
-  document.getElementById('menu-mirror-h').classList.toggle('disabled', !has('mirrorHorizontal'));
-  document.getElementById('menu-3d-fullscreen').classList.toggle('disabled', !has('toggleFullscreen3D'));
-  document.getElementById('menu-2d-fullscreen').classList.toggle('disabled', !has('toggleFullscreen2D'));
-  document.getElementById('menu-project-props').classList.toggle('disabled', !has('openProjectProperties'));
+  Ribbon.refresh();
+}
+
+const editorHas = (fn) => !!(currentEditor && typeof currentEditor[fn] === 'function');
+const editorCall = (fn) => { if (editorHas(fn)) currentEditor[fn](); };
+const disabledUnless = (fn) => editorHas(fn) ? '' : 'disabled';
+
+function appRibbonTabs() {
+  const { big, small } = Ribbon;
+  const wireClicks = (body) => body.querySelectorAll('[data-app]').forEach(b => b.addEventListener('click', () => {
+    const a = b.dataset.app;
+    if (a === 'new') openNewModal();
+    else if (a === 'new-kind') openNew(b.dataset.kind, b.dataset.template);
+    else if (a === 'fullscreen') toggleBrowserFullscreen();
+    else if (a === 'costs') CostSettings.open();
+    else if (a === 'about') document.getElementById('about-overlay').classList.add('open');
+    else editorCall(a);
+  }));
+  return [
+    { key: 'bestand', label: 'Bestand', order: 0, wire: wireClicks, groups: () => [
+      { label: 'Document', html:
+        big('Nieuw', 'file-earmark-plus', 'data-app="new" title="Nieuw ontwerp (Ctrl+N)"') +
+        big('Openen', 'folder2-open', `data-app="triggerImport" title="JSON-ontwerp openen" ${disabledUnless('triggerImport')}`) +
+        big('Opslaan', 'save', `data-app="exportDesign" title="Opslaan als JSON + PDF (Ctrl+S)" ${disabledUnless('exportDesign')}`) },
+      { label: 'Snel nieuw', html:
+        small('Woning', 'house', 'data-app="new-kind" data-kind="woning" data-template="single"') +
+        small('Woning L-vorm', 'bounding-box-circles', 'data-app="new-kind" data-kind="woning" data-template="L"') +
+        small('Los: muur', 'bricks', 'data-app="new-kind" data-kind="muur"') +
+        small('Los: vloer', 'grid-3x3', 'data-app="new-kind" data-kind="vloer"') },
+      { label: 'Project', html: big('Eigenschappen', 'card-text', `data-app="openProjectProperties" title="Projectgegevens voor de PDF" ${disabledUnless('openProjectProperties')}`) }
+    ] },
+    { key: 'beeld', label: 'Beeld', order: 80, wire: wireClicks, groups: () => [
+      { label: 'Venster', html:
+        small('Volledig scherm', 'fullscreen', 'data-app="fullscreen" title="F"') +
+        small('3D groot', 'badge-3d', `data-app="toggleFullscreen3D" title="T: standaard → 3D groot → alleen render" ${disabledUnless('toggleFullscreen3D')}`) +
+        small('2D groot', 'aspect-ratio', `data-app="toggleFullscreen2D" title="R" ${disabledUnless('toggleFullscreen2D')}`) },
+      { label: 'Camera', html:
+        big('Lopen', 'person-walking', `data-app="toggleWalk" title="Shift+T. W/S of pijltjes: vooruit/achteruit · A/D: opzij · pijl links/rechts: draaien · Shift: rennen · slepen: rondkijken" ${disabledUnless('toggleWalk')}`) +
+        small('Bediening', 'mouse', 'title="Rondom: slepen = draaien · rechts slepen = verschuiven · scrollwiel = zoomen. Lopen: Shift+T."') }
+    ] },
+    { key: 'extra', label: 'Extra', order: 90, wire: wireClicks, groups: () => [
+      { label: 'Bewerken', html: small('Horizontaal spiegelen', 'symmetry-vertical', `data-app="mirrorHorizontal" title="H" ${disabledUnless('mirrorHorizontal')}`) },
+      { label: 'Instellingen', html: big('Kosten & tijden', 'calculator', 'data-app="costs"') },
+      { label: 'Info', html: big('Over Tectum', 'info-circle', 'data-app="about"') }
+    ] }
+  ];
 }
 
 function renderTabBar() {
@@ -62,6 +104,7 @@ function onTabSaved(tab, filenameWithExt) {
 function mountEditorForTab(tab) {
   const ws = document.getElementById('workspace');
   ws.innerHTML = '';
+  Ribbon.setSource('editor', []);
   currentEditor = editorModuleFor(tab.kind).mount(ws, { onSaved: (filename) => onTabSaved(tab, filename), template: tab.template, cameraKey: 'tab' + tab.id });
   if (tab.stateJson && typeof currentEditor.loadStateJson === 'function') {
     currentEditor.loadStateJson(tab.stateJson);
@@ -84,7 +127,7 @@ function switchToTab(tabId) {
 }
 
 function openNew(kind, template) {
-  if (!editorModuleFor(kind)) { closeAllMenus(); return; } // 'dak' nog niet beschikbaar
+  if (!editorModuleFor(kind)) return; // 'dak' nog niet beschikbaar
 
   const oldTab = tabs.find(t => t.id === activeTabId);
   if (oldTab && currentEditor && typeof currentEditor.getStateJson === 'function') {
@@ -99,7 +142,6 @@ function openNew(kind, template) {
   mountEditorForTab(tab);
   updateEditMenuState();
   renderTabBar();
-  closeAllMenus();
 }
 
 function isTabDirty(tab) {
@@ -139,6 +181,7 @@ function closeTab(tabId) {
     switchToTab(tabs[tabs.length - 1].id);
   } else {
     setWorkspaceEmpty();
+    Ribbon.setSource('editor', []);
     updateEditMenuState();
     renderTabBar();
   }
@@ -153,64 +196,6 @@ function wireTabBar() {
   });
 }
 
-function closeAllMenus() {
-  document.querySelectorAll('.menu-dropdown, .submenu').forEach(el => el.classList.remove('open'));
-  document.querySelectorAll('.menu-btn').forEach(el => el.classList.remove('open'));
-}
-
-function wireTopLevelMenu(btnId, dropdownId) {
-  const btn = document.getElementById(btnId);
-  const dropdown = document.getElementById(dropdownId);
-  btn.addEventListener('click', (e) => {
-    e.stopPropagation();
-    const willOpen = !dropdown.classList.contains('open');
-    closeAllMenus();
-    if (willOpen) { dropdown.classList.add('open'); btn.classList.add('open'); }
-  });
-}
-
-function wireMenu() {
-  wireTopLevelMenu('menu-bestand-btn', 'menu-bestand-dropdown');
-  wireTopLevelMenu('menu-bewerken-btn', 'menu-bewerken-dropdown');
-  wireTopLevelMenu('menu-beeld-btn', 'menu-beeld-dropdown');
-
-  document.getElementById('menu-nieuw-item').addEventListener('click', (e) => e.stopPropagation());
-  document.querySelectorAll('.menu-nieuw-option').forEach(opt => {
-    opt.addEventListener('click', () => openNew(opt.dataset.kind, opt.dataset.template));
-  });
-
-  document.getElementById('menu-opslaan-als').addEventListener('click', () => {
-    if (currentEditor && typeof currentEditor.exportDesign === 'function') currentEditor.exportDesign();
-    closeAllMenus();
-  });
-  document.getElementById('menu-importeren').addEventListener('click', () => {
-    if (currentEditor && typeof currentEditor.triggerImport === 'function') currentEditor.triggerImport();
-    closeAllMenus();
-  });
-  document.getElementById('menu-mirror-h').addEventListener('click', () => {
-    if (currentEditor && typeof currentEditor.mirrorHorizontal === 'function') currentEditor.mirrorHorizontal();
-    closeAllMenus();
-  });
-  document.getElementById('menu-fullscreen').addEventListener('click', () => {
-    toggleBrowserFullscreen();
-    closeAllMenus();
-  });
-  document.getElementById('menu-3d-fullscreen').addEventListener('click', () => {
-    if (currentEditor && typeof currentEditor.toggleFullscreen3D === 'function') currentEditor.toggleFullscreen3D();
-    closeAllMenus();
-  });
-  document.getElementById('menu-2d-fullscreen').addEventListener('click', () => {
-    if (currentEditor && typeof currentEditor.toggleFullscreen2D === 'function') currentEditor.toggleFullscreen2D();
-    closeAllMenus();
-  });
-  document.getElementById('menu-project-props').addEventListener('click', () => {
-    if (currentEditor && typeof currentEditor.openProjectProperties === 'function') currentEditor.openProjectProperties();
-    closeAllMenus();
-  });
-
-  document.addEventListener('click', closeAllMenus);
-}
-
 // Minimale markdown-weergave voor de licentietekst (koppen + alinea's).
 function renderLicenseHtml(md) {
   const esc = (t) => t.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -225,10 +210,6 @@ function renderLicenseHtml(md) {
 function wireAbout() {
   const overlay = document.getElementById('about-overlay');
   document.getElementById('about-license').innerHTML = renderLicenseHtml(window.TECTUM_LICENSE_MD || '');
-  document.getElementById('btn-about').addEventListener('click', (e) => {
-    e.stopPropagation();
-    overlay.classList.add('open');
-  });
   document.getElementById('about-close').addEventListener('click', () => overlay.classList.remove('open'));
   overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.remove('open'); });
 }
@@ -245,7 +226,6 @@ function wireNewModal() {
 }
 
 function openNewModal() {
-  closeAllMenus();
   document.getElementById('new-overlay').classList.add('open');
 }
 
@@ -268,12 +248,20 @@ function wireHotkeys() {
       openNewModal();
       return;
     }
+    // Easter egg (shooter); e.code omdat Alt/Shift e.key per toetsenbord verandert.
+    if (e.ctrlKey && e.shiftKey && e.altKey && e.code === 'KeyL') {
+      e.preventDefault();
+      if (currentEditor && typeof currentEditor.toggleShooter === 'function') currentEditor.toggleShooter();
+      return;
+    }
     if (inField || e.ctrlKey || e.metaKey || e.altKey) return;
 
     if (e.key.toLowerCase() === 'f') {
       toggleBrowserFullscreen();
     } else if (e.key.toLowerCase() === 'h') {
       if (currentEditor && typeof currentEditor.mirrorHorizontal === 'function') currentEditor.mirrorHorizontal();
+    } else if (e.key.toLowerCase() === 't' && e.shiftKey) {
+      if (currentEditor && typeof currentEditor.toggleWalk === 'function') currentEditor.toggleWalk();
     } else if (e.key.toLowerCase() === 't') {
       if (currentEditor && typeof currentEditor.toggleFullscreen3D === 'function') currentEditor.toggleFullscreen3D();
     } else if (e.key.toLowerCase() === 'r') {
@@ -285,7 +273,8 @@ function wireHotkeys() {
 document.addEventListener('DOMContentLoaded', () => {
   document.querySelectorAll('.app-version-slot').forEach(el => { el.textContent = 'v' + APP_VERSION; });
   document.querySelectorAll('.app-version-number').forEach(el => { el.textContent = APP_VERSION; });
-  wireMenu();
+  Ribbon.init(document.getElementById('ribbon'));
+  Ribbon.setSource('app', appRibbonTabs());
   wireAbout();
   wireNewModal();
   wireHotkeys();

js/core/build-stages.js

@@ -0,0 +1,85 @@
+/*!
+ * Tectum
+ * Copyright © 2026 Machiel Heinen.
+ * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
+ * Zie LICENTIE.md.
+ */
+// ============================================================
+// core/build-stages.js — Bouwfasen (window.BuildStages): de volgorde waarin
+// een unit in de hal wordt opgebouwd. Eén begrip voor zowel de weergave
+// (schuif "Bouwfase" in de 3D) als het weglaten van verborgen delen:
+//
+//   0 regelwerk  vloer-, wand- en dakbalken
+//   1 elektra    installatiebuizen, dozen en meterkast (ElektraModel)
+//   2 beplating  spaanplaat binnen, OSB vloer/plafond/dakbeschot, cementplaat buiten
+//   3 doek       vochtdoek
+//   4 latwerk    kruislat, trasraamplaat
+//   5 gevel      rabat, steen, kozijnen, dakbedekking (dakleer, riet, felsplaten), sandwichpanelen
+//   6 afwerking  dakrand, verlichting, vloerafwerking, verf binnen
+//
+// Fasen zijn cumulatief: fase n toont alles t/m n. Een laag die in de
+// gekozen fase aan beide zijden is ingesloten door latere lagen wordt niet
+// gebouwd (bijv. stijlen tussen spaanplaat en doek, latten achter de
+// rabat). De specificaties rekenen altijd met alle lagen.
+//
+// Plain script (geen ES-module); het model-deel heeft geen DOM nodig.
+// ============================================================
+
+window.BuildStages = (() => {
+  const LIST = [
+    { key: 'regelwerk', label: 'Regelwerk', hint: 'Vloer-, wand- en dakbalken' },
+    { key: 'elektra', label: 'Elektra', hint: 'Installatiebuizen door wanden en plafond, dozen en meterkast' },
+    { key: 'beplating', label: 'Beplating', hint: 'Spaanplaat binnen, OSB vloer, plafond en dakbeschot, cementplaat buiten' },
+    { key: 'doek', label: 'Vochtdoek', hint: 'Vochtdoek op de buitenzijde' },
+    { key: 'latwerk', label: 'Latwerk', hint: 'Kruislat en trasraamplaat' },
+    { key: 'gevel', label: 'Gevel & dak', hint: 'Rabat, steen, kozijnen, dakbedekking, sandwichpanelen' },
+    { key: 'afwerking', label: 'Afgewerkt', hint: 'Dakrand, verlichting, vloerafwerking, verf binnen' }
+  ];
+  const FINAL = LIST.length - 1;
+  const INDEX = Object.fromEntries(LIST.map((s, i) => [s.key, i]));
+
+  // Fase (getal of undefined = afgewerkt) normaliseren.
+  const clamp = (stage) => (typeof stage === 'number' && isFinite(stage)) ? Math.max(0, Math.min(FINAL, Math.round(stage))) : FINAL;
+  // Is laag `key` zichtbaar in fase `stage`?
+  const shows = (stage, key) => clamp(stage) >= INDEX[key];
+
+  // Schuif onderin een 3D-weergave (DOM). pane = de weergave (position:
+  // relative); onChange(stage) bij elke stap. Geeft { set(stage), el,
+  // extra } terug; extra = vrije rij onder de schuif (bijv. doorsnede).
+  function createBar(pane, stage, onChange) {
+    const el = document.createElement('div');
+    el.className = 'stage-bar';
+    el.innerHTML = `
+      <div class="stage-row">
+        <span class="stage-title"><i class="bi bi-layers"></i>Bouwfase</span>
+        <div class="stage-track">
+          <input type="range" class="stage-range" min="0" max="${FINAL}" step="1" value="${clamp(stage)}" aria-label="Bouwfase">
+          <div class="stage-ticks">${LIST.map((s, i) => `<span data-i="${i}" title="${s.label}: ${s.hint}">${i + 1}</span>`).join('')}</div>
+        </div>
+        <span class="stage-name"></span>
+      </div>
+      <div class="stage-extra"></div>`;
+    pane.appendChild(el);
+    const range = el.querySelector('.stage-range'), name = el.querySelector('.stage-name');
+    const sync = () => {
+      const i = clamp(Number(range.value));
+      name.textContent = LIST[i].label;
+      name.title = LIST[i].hint;
+      el.querySelectorAll('.stage-ticks span').forEach(t => t.classList.toggle('on', Number(t.dataset.i) <= i));
+    };
+    range.addEventListener('input', () => { sync(); onChange(clamp(Number(range.value))); });
+    el.querySelector('.stage-ticks').addEventListener('click', (e) => {
+      const t = e.target.closest('[data-i]');
+      if (!t) return;
+      range.value = t.dataset.i;
+      sync();
+      onChange(clamp(Number(range.value)));
+    });
+    // Toetsen in de weergave mogen de schuif niet bedienen (T, R, ...).
+    range.addEventListener('keydown', (e) => { if (!/^Arrow|Home|End/.test(e.key)) range.blur(); });
+    sync();
+    return { el, extra: el.querySelector('.stage-extra'), set: (s) => { range.value = clamp(s); sync(); } };
+  }
+
+  return { LIST, FINAL, INDEX, clamp, shows, createBar };
+})();

js/core/geometry.js

@@ -154,87 +154,126 @@ function summarizeStockPlan(bars) {
 }
 
 // Verticale strook [x0, x1] van y = yBottom tot een (evt. schuine, lineaire)
-// bovenrand topYAt(x), MIN een set rechthoekige uitsparingen
-// ({ x0, x1, y0, y1 }). Uitsparingen die over de rand van de strook vallen
-// worden een echte inkeping in de omtrek (i.p.v. een gat dat net binnen de
-// rand wordt afgekapt — dat liet een haarfijn reepje materiaal met zichtbare
-// randlijnen door de opening lopen). Een uitsparing over de volle breedte
-// splitst de strook in losse delen.
+// bovenrand topYAt(x), MIN een set uitsparingen ({ x0, x1, y0, y1, y1r? }):
+// rechthoeken, of met y1r een schuine bovenkant (lineair van (x0, y1) naar
+// (x1, y1r); schuin bovenin mag, onderin niet). Uitsparingen die over de
+// rand van de strook vallen worden een echte inkeping in de omtrek (i.p.v.
+// een gat dat net binnen de rand wordt afgekapt — dat liet een haarfijn
+// reepje materiaal met zichtbare randlijnen door de opening lopen). Een
+// uitsparing over de volle breedte splitst de strook in losse delen; een
+// uitsparing tot in de (schuine) bovenrand wordt een inkeping in de bovenrand.
 // opts (optioneel):
-//   yCap    — vlakke bovengrens (bijv. bovenkant van een vochtdoek-baan);
-//             topYAt mag dan min(yCap, daklijn) zijn. Uitsparingen die tot
-//             boven yCap reiken worden er netjes op afgekapt (inkeping in de
-//             bovenrand).
-//   extraXs — knikpunten van topYAt (waar de daklijn yCap kruist), zodat de
-//             bovenrand tussen twee hoekpunten steeds lineair is.
-// Resultaat: [{ outer: [{x,y}...] (CCW), holes: [[{x,y}...] (CW)] }], of null
-// als een uitsparing tot in de schuine bovenrand reikt (niet ondersteund).
+//   yCap    — vlakke bovengrens (bijv. bovenkant van een vochtdoek-baan).
+//   extraXs — knikpunten van topYAt (bijv. waar de daklijn yCap kruist), zodat
+//             de bovenrand tussen twee hoekpunten steeds lineair is.
+// Werkwijze: de strook wordt in kolommen geknipt (op alle x-randen, knikken
+// en snijpunten van de lijnen), zodat binnen een kolom elke lijn (onderkant,
+// onder-/bovenkant uitsparing, bovenrand) lineair is en ze elkaar niet
+// kruisen; de cellen tussen twee lijnen zijn vol of leeg, en de randen
+// tussen vol en leeg worden tot lussen aaneengeregen.
+// Resultaat: [{ outer: [{x,y}...] (CCW), holes: [[{x,y}...] (CW)] }].
 function columnMinusRects(x0, x1, yBottom, topYAt, rects, opts) {
   const eps = 1e-9;
   const yCap = (opts && opts.yCap !== undefined) ? opts.yCap : Infinity;
-  const extraXs = ((opts && opts.extraXs) || []).filter(x => x > x0 + eps && x < x1 - eps);
+  const top = (x) => Math.min(yCap, topYAt(x));
   const uniq = (arr) => arr.sort((a, b) => a - b).filter((v, i, a) => i === 0 || v - a[i - 1] > eps);
 
   const rs = rects
-    .map(r => ({ x0: Math.max(x0, r.x0), x1: Math.min(x1, r.x1), y0: Math.max(yBottom, r.y0), y1: Math.min(yCap, r.y1) }))
-    .filter(r => r.x1 - r.x0 > eps && r.y1 - r.y0 > eps);
-  const xs = uniq([x0, x1, ...extraXs, ...rs.flatMap(r => [r.x0, r.x1])]);
+    .filter(r => Math.min(x1, r.x1) - Math.max(x0, r.x0) > eps)
+    .map(r => {
+      const y1r = r.y1r !== undefined ? r.y1r : r.y1, s = (y1r - r.y1) / (r.x1 - r.x0);
+      return { x0: Math.max(x0, r.x0), x1: Math.min(x1, r.x1), y0: r.y0, topAt: (x) => r.y1 + (x - r.x0) * s };
+    });
+  const inRect = (x, y) => rs.some(r => x > r.x0 && x < r.x1 && y > r.y0 && y < r.topAt(x));
 
-  // Laagste bovenrand binnen [a, b] (topYAt is lineair tussen de knikpunten).
-  const minTopIn = (a, b) => Math.min(...xs.filter(x => x >= a - eps && x <= b + eps).map(topYAt));
-  const reachesTop = (r) => r.y1 >= yCap - eps && minTopIn(r.x0, r.x1) >= yCap - eps; // tot de vlakke bovenrand
-  if (rs.some(r => !reachesTop(r) && r.y1 >= minTopIn(r.x0, r.x1) - eps)) return null;
+  // Lijnen (ongeklemd); geklemd tussen yBottom en de bovenrand.
+  const raw = [() => yBottom, top];
+  rs.forEach(r => raw.push(() => r.y0, r.topAt));
+  const clamp = (f) => (x) => Math.min(top(x), Math.max(yBottom, f(x)));
+  const lines = raw.map(clamp);
 
-  const ys = uniq([yBottom, ...rs.flatMap(r => reachesTop(r) ? [r.y0] : [r.y0, r.y1]).filter(y => y > yBottom + eps)]);
-  const nCols = xs.length - 1, nRows = ys.length; // bovenste rij loopt tot de daklijn
+  let xs = uniq([x0, x1, ...((opts && opts.extraXs) || []).filter(x => x > x0 + eps && x < x1 - eps), ...rs.flatMap(r => [r.x0, r.x1])]);
+  // Snijpunten van de lijnen (ook met de bovenrand/onderkant) als extra kolomranden.
+  const cuts = [];
+  for (let i = 0; i < xs.length - 1; i++) {
+    const a = xs[i], b = xs[i + 1];
+    for (let p = 0; p < raw.length; p++) {
+      for (let q = p + 1; q < raw.length; q++) {
+        const da = raw[p](a) - raw[q](a), db = raw[p](b) - raw[q](b);
+        if ((da > eps && db < -eps) || (da < -eps && db > eps)) cuts.push(a + (b - a) * da / (da - db));
+      }
+    }
+  }
+  xs = uniq(xs.concat(cuts));
 
-  const vertex = (i, j) => ({ x: xs[i], y: j < nRows ? ys[j] : topYAt(xs[i]) });
-  const filled = (i, j) => {
-    if (i < 0 || i >= nCols || j < 0 || j >= nRows) return false;
-    const xm = (xs[i] + xs[i + 1]) / 2;
-    const ym = j < nRows - 1 ? (ys[j] + ys[j + 1]) / 2 : (ys[j] + topYAt(xm)) / 2;
-    return !rs.some(r => xm > r.x0 && xm < r.x1 && ym > r.y0 && ym < r.y1);
+  // Per kolom: cellen tussen opeenvolgende (verschillende) lijnen.
+  const cols = [];
+  for (let i = 0; i < xs.length - 1; i++) {
+    const a = xs[i], b = xs[i + 1], m = (a + b) / 2;
+    const vals = lines.map(f => ({ a: f(a), b: f(b), m: f(m) }))
+      .sort((p, q) => p.m - q.m)
+      .filter((v, k, arr) => k === 0 || v.m - arr[k - 1].m > eps || Math.abs(v.a - arr[k - 1].a) > eps || Math.abs(v.b - arr[k - 1].b) > eps);
+    const cells = [];
+    for (let k = 0; k < vals.length - 1; k++) {
+      const lo = vals[k], hi = vals[k + 1];
+      if (hi.m - lo.m <= eps) continue;
+      cells.push({ lo, hi, filled: !inRect(m, (lo.m + hi.m) / 2) });
+    }
+    cols.push({ a, b, cells });
+  }
+
+  // Hoekpunten gedeeld via een register (bijna-gelijke punten = hetzelfde punt).
+  const verts = [];
+  const vid = (x, y) => {
+    let k = verts.findIndex(v => Math.abs(v.x - x) < 1e-7 && Math.abs(v.y - y) < 1e-7);
+    if (k < 0) { k = verts.length; verts.push({ x, y }); }
+    return k;
   };
-
-  // Gerichte randen van gevulde cellen (CCW), alleen waar de buur leeg is.
-  const edges = new Map(); // "i,j" -> [[i2,j2], ...]
-  const addEdge = (a, b) => {
-    const key = a.join(',');
-    if (!edges.has(key)) edges.set(key, []);
-    edges.get(key).push(b);
+  const edges = new Map(); // van -> [naar, ...]
+  const addEdge = (p, q) => {
+    const a = vid(p.x, p.y), b = vid(q.x, q.y);
+    if (a === b) return;
+    if (!edges.has(a)) edges.set(a, []);
+    edges.get(a).push(b);
   };
-  for (let i = 0; i < nCols; i++) {
-    for (let j = 0; j < nRows; j++) {
-      if (!filled(i, j)) continue;
-      if (!filled(i, j - 1)) addEdge([i, j], [i + 1, j]);
-      if (!filled(i + 1, j)) addEdge([i + 1, j], [i + 1, j + 1]);
-      if (!filled(i, j + 1)) addEdge([i + 1, j + 1], [i, j + 1]);
-      if (!filled(i - 1, j)) addEdge([i, j + 1], [i, j]);
+  // Onder-/bovenranden binnen een kolom (CCW: onder naar rechts, boven naar links).
+  cols.forEach(col => col.cells.forEach((c, k) => {
+    if (!c.filled) return;
+    if (!(k > 0 && col.cells[k - 1].filled && col.cells[k - 1].hi === c.lo)) addEdge({ x: col.a, y: c.lo.a }, { x: col.b, y: c.lo.b });
+    if (!(k < col.cells.length - 1 && col.cells[k + 1].filled && col.cells[k + 1].lo === c.hi)) addEdge({ x: col.b, y: c.hi.b }, { x: col.a, y: c.hi.a });
+  }));
+  // Verticale randen op elke kolomgrens: waar links vol en rechts leeg is (of andersom).
+  for (let i = 0; i < xs.length; i++) {
+    const x = xs[i];
+    const left = i > 0 ? cols[i - 1].cells.filter(c => c.filled).map(c => [c.lo.b, c.hi.b]) : [];
+    const right = i < cols.length ? cols[i].cells.filter(c => c.filled).map(c => [c.lo.a, c.hi.a]) : [];
+    const ys = uniq(left.concat(right).flat());
+    for (let k = 0; k < ys.length - 1; k++) {
+      const ya = ys[k], yb = ys[k + 1], ym = (ya + yb) / 2;
+      if (yb - ya <= eps) continue;
+      const lf = left.some(([p, q]) => ym > p && ym < q), rf = right.some(([p, q]) => ym > p && ym < q);
+      if (lf && !rf) addEdge({ x, y: ya }, { x, y: yb });
+      else if (rf && !lf) addEdge({ x, y: yb }, { x, y: ya });
     }
   }
 
   // Randen aaneenrijgen tot gesloten lussen (collineaire tussenpunten weg).
   const loops = [];
-  edges.forEach((list, startKey) => {
+  edges.forEach((list, start) => {
     while (list.length) {
-      const loop = [];
-      let cur = startKey.split(',').map(Number);
-      let next = list.pop();
-      loop.push(cur);
-      while (next.join(',') !== startKey) {
+      const loop = [start];
+      let next = list.pop(), guard = 0;
+      while (next !== start && guard++ < 100000) {
         loop.push(next);
-        cur = next;
-        const outs = edges.get(cur.join(','));
+        const outs = edges.get(next);
+        if (!outs || !outs.length) break;
         next = outs.pop();
       }
-      loops.push(loop);
+      if (next === start) loops.push(loop);
     }
   });
   const polys = loops.map(loop => {
-    // Eerst dubbele punten weg (bijv. een spits toelopend uiteinde waar de
-    // bovenrand de onderrand raakt), dan collineaire tussenpunten.
-    const pts = loop.map(([i, j]) => vertex(i, j))
-      .filter((p, k, arr) => { const q = arr[(k + 1) % arr.length]; return Math.hypot(p.x - q.x, p.y - q.y) > 1e-9; });
+    const pts = loop.map(k => verts[k]);
     return pts.filter((p, k) => {
       const a = pts[(k - 1 + pts.length) % pts.length], b = pts[(k + 1) % pts.length];
       return Math.abs((p.x - a.x) * (b.y - a.y) - (p.y - a.y) * (b.x - a.x)) > 1e-12;
@@ -254,8 +293,11 @@ function columnMinusRects(x0, x1, yBottom, topYAt, rects, opts) {
     return c;
   };
   const outers = polys.filter(p => p.length >= 3 && signedArea(p) > 1e-12).map(p => ({ outer: p, holes: [] }));
+  // Gat bij de kleinste buitenlus die het bevat.
+  outers.sort((p, q) => signedArea(p.outer) - signedArea(q.outer));
   polys.filter(p => p.length >= 3 && signedArea(p) < -1e-12).forEach(hole => {
-    const owner = outers.find(o => inside(hole[0], o.outer)) || outers[0];
+    const mid = { x: (hole[0].x + hole[1].x) / 2, y: (hole[0].y + hole[1].y) / 2 };
+    const owner = outers.find(o => inside(mid, o.outer)) || outers[0];
     if (owner) owner.holes.push(hole);
   });
   return outers;

js/core/granny-kit.js

@@ -0,0 +1,174 @@
+/*!
+ * Tectum
+ * Copyright © 2026 Machiel Heinen.
+ * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
+ * Zie LICENTIE.md.
+ */
+// ============================================================
+// core/granny-kit.js — onderdelen van de easter egg (core/shooter.js):
+// oma-sprite, gibs, kreten,
+// geluidseffecten, soundtrack en de omroeper à la Unreal Tournament.
+// Plain script (geen ES-module).
+// ============================================================
+
+const GrannyKit = (() => {
+  // Oud vrouwtje met rollator, 16x25 pixels (twee loopbeelden).
+  const LADY = [
+    '......hHHh......',
+    '.....HHHHHH.....',
+    '....HHHHHHHH....',
+    '....HSSSSSSH....',
+    '....SGEsSGES....',
+    '....SSSssSSS....',
+    '.....SsrrsS.....',
+    '......SSSS......',
+    '.....WWWWWW.....',
+    '...DDDDWWDDDD...',
+    '..DDDDDDDDDDDD..',
+    '..DdDDDDDDDDdD..',
+    '..DdDDDDDDDDdD..',
+    'MSSMMMMMMMMMMSSM',
+    '.M.DDDDDDDDDD.M.',
+    '.MRRRRRRRRRRRRM.',
+    '.MRrRrRrRrRrRRM.',
+    '.MRRRRRRRRRRRRM.',
+    '.M..dDDDDDDd..M.',
+    '.M...DDDDDD...M.',
+    '.M....LL.LL...M.',
+    '.M....LL..LL..M.',
+    '.M....BB..BB..M.',
+    'KKK..........KKK',
+    'KkK..........KkK'
+  ];
+  const LADY_B = LADY.slice(0, 20).concat([
+    '.M...LL..LL...M.',
+    '.M...LL...LL..M.',
+    '.M...BB...BB..M.',
+    'KkK..........KkK',
+    'KKK..........KKK'
+  ]);
+  const PAL = { h: '#9a9aa8', H: '#d0d0da', S: '#f0c8a0', s: '#d09878', E: '#101010', G: '#707080', r: '#a04040',
+    W: '#f4f4f4', D: '#8040a0', d: '#5a2a78', M: '#b8c0c8', R: '#c03030', L: '#c8a888', B: '#402018', K: '#202020', k: '#606060' };
+
+  // Gibs: 8-bit stukjes oma (vlees, botjes, gebit, bril, handtas, breibol, rollatorwiel).
+  const GIBS = [
+    ['..rr....', '.rRRr...', 'rRRRRr..', 'rRrRRRr.', '.rRRRRr.', '..rRRr..', '...rr...'],
+    ['.rr.rr..', 'rRRrRRr.', 'rRRRRRr.', '.rRRRr..', '..rrr...'],
+    ['ww....ww', 'wWw..wWw', '.wWwwWw.', '..wWWw..', '.wWwwWw.', 'wWw..wWw', 'ww....ww'],
+    ['.pppppp.', 'pWWWWWWp', 'pWkWkWkp', 'pWWWWWWp', '.pppppp.'],
+    ['GG..GG..', 'GbG.GbG.', 'GGGGGGG.', '........'],
+    ['..nn....', '.n..n...', 'nNNNNNn.', 'NNNNNNN.', 'NNyNNNN.', 'NNNNNNN.'],
+    ['.YYYY...', 'YyYYyY..', 'YYyYYy..', 'YyYYyY..', '.YYYY...', '.....Y..', '......Y.'],
+    ['.KKKK...', 'KkkkkK..', 'KkMMkK..', 'KkMMkK..', 'KkkkkK..', '.KKKK...']
+  ];
+  const GIB_PAL = { r: '#6a0808', R: '#c01818', w: '#a09880', W: '#f0ecdc', p: '#e07888', k: '#303030', G: '#606070', b: '#a0c8f0',
+    n: '#402018', N: '#7a4a22', y: '#d0b040', Y: '#c050a0', K: '#202020', M: '#b8c0c8' };
+
+  const SHOUTS = ['"Jongeman! Voeten vegen!"', '"In mijn tijd hadden we geen raketten!"', '"Ik bel je moeder!"',
+    '"Waar is de bingo?"', '"Dat dak lekt, hoor!"', '"Is dit wel vergund?"', '"Ik heb een abonnement op de bus!"'];
+  const DEATH_SHOUTS = ['"Oeeehh, mijn heup!"', '"Dat zeg ik tegen de wijkagent!"', '"Aaargh, de bingo..."'];
+  const HIT_SHOUTS = ['*BAM* met de handtas!', '*klets* met de rollator!', '"Neem een koekje, en dan wegwezen!"'];
+  const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
+
+  // Pixelraster -> canvas (1 px per teken, optioneel met rand en één tintkleur;
+  // bottom = figuur op de onderrand, voor sprites die op de grond staan).
+  function pixelCanvas(rows, pal, opts) {
+    const o = Object.assign({ pad: 0, size: 0, tint: null, bottom: false }, opts || {});
+    const w = Math.max(...rows.map(r => r.length)), h = rows.length;
+    const c = document.createElement('canvas');
+    c.width = o.size || w + o.pad * 2;
+    c.height = o.size || h + o.pad * 2;
+    const g = c.getContext('2d');
+    const ox = Math.floor((c.width - w) / 2), oy = o.bottom ? c.height - h : Math.floor((c.height - h) / 2);
+    rows.forEach((row, y) => [...row].forEach((ch, x) => {
+      if (!pal[ch]) return;
+      g.fillStyle = o.tint || pal[ch];
+      g.fillRect(ox + x, oy + y, 1, 1);
+    }));
+    return c;
+  }
+
+  // Geluidseffecten: gesynthetiseerde ruis via WebAudio.
+  function createSfx() {
+    let audio = null;
+    return {
+      bang(len, freq, vol) {
+        try {
+          audio = audio || new (window.AudioContext || window.webkitAudioContext)();
+          const n = Math.floor(audio.sampleRate * len), buf = audio.createBuffer(1, n, audio.sampleRate), d = buf.getChannelData(0);
+          for (let i = 0; i < n; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / n, 3);
+          const src = audio.createBufferSource(), f = audio.createBiquadFilter(), g = audio.createGain();
+          src.buffer = buf; f.type = 'lowpass'; f.frequency.value = freq; g.gain.value = vol;
+          src.connect(f).connect(g).connect(audio.destination);
+          src.start();
+        } catch (e) { /* geen geluid, jammer */ }
+      },
+      close() { if (audio) audio.close(); audio = null; }
+    };
+  }
+
+  // Soundtrack: "Five Armies" Kevin MacLeod (incompetech.com), CC BY 4.0.
+  const MUSIC_CREDIT = '♪ "Five Armies" Kevin MacLeod (incompetech.com) · CC BY 4.0';
+  function createMusic() {
+    const music = new Audio('assets/audio/five-armies.mp3');
+    music.loop = true;
+    music.volume = 0.5;
+    return {
+      play() { music.currentTime = 0; music.play().catch(() => {}); }, // toetsdruk = gebruikersactie
+      stop() { music.pause(); }
+    };
+  }
+
+  // Omroeper (Web Speech API + grote tekst in labelEl).
+  // Multi-kill: kills binnen MULTI_WINDOW s na elkaar. Spree: kills zonder geraakt te worden.
+  const MULTI_WINDOW = 6;
+  const MULTI = { 2: 'Double Granny!', 3: 'Multi Granny!', 4: 'Mega Granny!', 5: 'Ultra Granny!', 6: 'M M M MONSTER GRANNY!' };
+  const SPREE = { 5: 'Bingo Spree!', 10: 'Rollator Rampage!', 15: 'Dominating the retirement home!', 20: 'Unstoppable!', 25: 'Godlike!', 30: 'Wicked Sick... of grannies!' };
+  function createAnnouncer(labelEl) {
+    let kills = 0, multi = 0, lastKillAt = -99, spree = 0, clock = 0, timer = 0;
+    function say(text) {
+      labelEl.textContent = text.replace(/^M M M /, 'M-M-M-');
+      labelEl.classList.remove('show'); void labelEl.offsetWidth; labelEl.classList.add('show');
+      timer = 2.2;
+      try {
+        const u = new SpeechSynthesisUtterance(text);
+        const v = speechSynthesis.getVoices().find(x => /^en(-|_)(US|GB)/i.test(x.lang) && /male|david|daniel|george/i.test(x.name))
+          || speechSynthesis.getVoices().find(x => /^en/i.test(x.lang));
+        if (v) u.voice = v;
+        u.lang = 'en-US'; u.pitch = 0.1; u.rate = 0.8; u.volume = 1;
+        speechSynthesis.cancel();
+        speechSynthesis.speak(u);
+      } catch (e) { /* geen stem, dan alleen tekst */ }
+    }
+    return {
+      say,
+      get kills() { return kills; },
+      kill() {
+        kills++;
+        multi = clock - lastKillAt <= MULTI_WINDOW ? multi + 1 : 1;
+        lastKillAt = clock;
+        spree++;
+        if (kills === 1) say('First Blood!');
+        else if (multi >= 2) say(MULTI[Math.min(multi, 6)]);
+        else if (SPREE[spree]) say(SPREE[spree]);
+        return kills;
+      },
+      hurt() {
+        if (spree >= 5) say('Spree ended by a handbag!');
+        spree = 0;
+      },
+      reset() { kills = multi = spree = 0; lastKillAt = -99; },
+      update(dt) {
+        clock += dt;
+        if (timer > 0 && (timer -= dt) <= 0) labelEl.classList.remove('show');
+      },
+      stop() {
+        try { speechSynthesis.cancel(); } catch (e) { /* */ }
+        labelEl.classList.remove('show');
+      }
+    };
+  }
+
+  return { LADY, LADY_B, PAL, GIBS, GIB_PAL, SHOUTS, DEATH_SHOUTS, HIT_SHOUTS, MUSIC_CREDIT,
+    pick, pixelCanvas, createSfx, createMusic, createAnnouncer };
+})();

js/core/pdf-sheet.js

@@ -22,6 +22,27 @@ window.PdfSheet = (() => {
     tekenaar: 'inp-proj-tekenaar', titel: 'inp-proj-titel', element: 'inp-proj-element', opmerking: 'inp-proj-opmerking'
   };
 
+  // Afbeeldingen (bijv. textuur-voorvertoningen) voor in de PDF. generate()
+  // is synchroon, dus vooraf laden (preloadImage, bijv. zodra een materiaal
+  // gekozen is); imageData geeft de data-URL, of null als hij (nog) niet
+  // geladen is (dan tekent de aanroeper een kleurvlak).
+  const imageCache = {};
+  function preloadImage(url) {
+    if (!url || url in imageCache || typeof Image === 'undefined' || typeof document === 'undefined') return;
+    imageCache[url] = null;
+    const img = new Image();
+    img.onload = () => {
+      try {
+        const c = document.createElement('canvas');
+        c.width = img.naturalWidth; c.height = img.naturalHeight;
+        c.getContext('2d').drawImage(img, 0, 0);
+        imageCache[url] = c.toDataURL('image/png');
+      } catch (e) { /* laat null: kleurvlak */ }
+    };
+    img.src = url;
+  }
+  const imageData = (url) => (url && imageCache[url]) || null;
+
   function createDoc() {
     const { jsPDF } = window.jspdf;
     return new jsPDF({ orientation: 'landscape', unit: 'mm', format: 'a3' });
@@ -130,5 +151,5 @@ window.PdfSheet = (() => {
     return y;
   }
 
-  return { COLORS, createDoc, readProjectFromDom, dimLine, titleBlock, table };
+  return { COLORS, preloadImage, imageData, createDoc, readProjectFromDom, dimLine, titleBlock, table };
 })();

js/core/ribbon.js

@@ -0,0 +1,145 @@
+/*!
+ * Tectum
+ * Copyright © 2026 Machiel Heinen.
+ * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
+ * Zie LICENTIE.md.
+ */
+// ============================================================
+// core/ribbon.js — Ribbon (window.Ribbon): de bedieningsbalk bovenin. Eén
+// plek voor alle commando's en instellingen; de weergaven eronder blijven
+// vrij.
+//
+// Tabbladen komen uit bronnen: 'app' (Bestand, Beeld, Extra) en 'editor'
+// (de actieve editor, bijv. Start, Gevel, Dak, ... en een contextueel
+// tabblad voor de selectie). Tabbladen met dezelfde sleutel uit meerdere
+// bronnen worden samengevoegd (bijv. Beeld: weergave-opties van de woning
+// + vensterknoppen van de app).
+//
+//   Ribbon.setSource('editor', [{
+//     key, label, order (sortering), contextual (gekleurd, achteraan),
+//     groups: () => [{ label, html }],   // inhoud, opnieuw bij elke weergave
+//     wire: (body) => {},                // events koppelen na het tekenen
+//     onShow: () => {}                   // tabblad wordt actief
+//   }]);
+//   Ribbon.activate(key) · Ribbon.refresh() · Ribbon.active() · Ribbon.onChange(fn)
+//
+// Groepen: een raster van 3 rijen hoog; velden (UI-kit) staan per kolom
+// onder elkaar. Grote knop: Ribbon.big(...), kleine: Ribbon.small(...).
+// Plain script (geen ES-module).
+// ============================================================
+
+window.Ribbon = (() => {
+  const sources = {};         // naam -> [tab]
+  const SOURCE_ORDER = ['app', 'editor'];
+  let root = null, tabsEl = null, bodyEl = null;
+  let activeKey = null, lastPlainKey = null;
+  let auto = true; // tabblad nog niet door de gebruiker gekozen: voorkeur 'start'
+  let collapsed = false, notified = null;
+  const listeners = [];
+  const PREF_KEY = 'tectum.ribbon.collapsed';
+
+  const icon = (n) => `<i class="bi bi-${n}" aria-hidden="true"></i>`;
+  // Grote knop (3 rijen hoog): icoon boven het label.
+  const big = (label, iconName, attrs, cls) =>
+    `<button type="button" class="rb-btn rb-big${cls ? ' ' + cls : ''}" ${attrs || ''}>${icon(iconName)}<span>${label}</span></button>`;
+  // Kleine knop (1 rij).
+  const small = (label, iconName, attrs, cls) =>
+    `<button type="button" class="rb-btn rb-small${cls ? ' ' + cls : ''}" ${attrs || ''}>${icon(iconName)}<span>${label}</span></button>`;
+  // Waarde-regel (alleen lezen) binnen een groep.
+  const kv = (label, value, unit) =>
+    `<div class="rb-kv"><span>${label}</span><b>${value}${unit ? `<small>${unit}</small>` : ''}</b></div>`;
+
+  function allTabs() {
+    const byKey = new Map();
+    SOURCE_ORDER.concat(Object.keys(sources).filter(n => !SOURCE_ORDER.includes(n))).forEach(name => {
+      (sources[name] || []).forEach(t => {
+        if (!byKey.has(t.key)) byKey.set(t.key, { key: t.key, label: t.label, order: t.order || 0, contextual: !!t.contextual, icon: t.icon, parts: [] });
+        const m = byKey.get(t.key);
+        if (t.order !== undefined && name !== 'app') m.order = t.order;
+        if (t.label && name !== 'app') m.label = t.label;
+        if (t.contextual) m.contextual = true;
+        m.parts.push(t);
+      });
+    });
+    return Array.from(byKey.values()).sort((a, b) => (a.contextual - b.contextual) || (a.order - b.order));
+  }
+
+  function renderTabs(list) {
+    tabsEl.innerHTML = list.map(t =>
+      `<button type="button" class="rb-tab${t.key === activeKey ? ' active' : ''}${t.contextual ? ' rb-ctx' : ''}" data-rb-tab="${t.key}">${t.contextual && t.icon ? icon(t.icon) : ''}<span>${t.label}</span></button>`).join('');
+  }
+
+  function renderBody(list) {
+    const tab = list.find(t => t.key === activeKey);
+    if (!tab) { bodyEl.innerHTML = ''; return; }
+    const groups = [];
+    tab.parts.forEach(p => (p.groups ? p.groups() : []).forEach(g => g && groups.push(g)));
+    bodyEl.innerHTML = groups.map(g =>
+      `<section class="rb-group${g.cls ? ' ' + g.cls : ''}"><div class="rb-group-body">${g.html}</div><div class="rb-group-label">${g.label}</div></section>`).join('') +
+      `<button type="button" class="rb-collapse" title="Ribbon inklappen (dubbelklik op een tabblad)">${icon('chevron-up')}</button>`;
+    tab.parts.forEach(p => p.wire && p.wire(bodyEl));
+  }
+
+  function render() {
+    if (!root) return;
+    const list = allTabs();
+    if (!list.some(t => t.key === activeKey) || (auto && !list.some(t => t.key === activeKey && t.contextual))) {
+      const pick = [lastPlainKey, 'start'].find(k => list.some(t => t.key === k));
+      activeKey = pick || (list.find(t => !t.contextual) || {}).key || null;
+    }
+    renderTabs(list);
+    renderBody(list);
+    root.classList.toggle('rb-collapsed', collapsed);
+    if (notified !== activeKey) { notified = activeKey; listeners.forEach(fn => fn(activeKey)); }
+  }
+
+  function activate(key) {
+    const list = allTabs();
+    const tab = list.find(t => t.key === key);
+    if (!tab) return;
+    activeKey = key;
+    auto = false;
+    if (!tab.contextual) lastPlainKey = key;
+    if (collapsed) { collapsed = false; savePref(); }
+    render();
+    tab.parts.forEach(p => p.onShow && p.onShow());
+  }
+
+  function savePref() { try { localStorage.setItem(PREF_KEY, collapsed ? '1' : '0'); } catch (e) { /* alleen deze sessie */ } }
+
+  function init(el) {
+    root = el;
+    try { collapsed = localStorage.getItem(PREF_KEY) === '1'; } catch (e) { collapsed = false; }
+    tabsEl = el.querySelector('.rb-tabs');
+    bodyEl = el.querySelector('.rb-body');
+    tabsEl.addEventListener('click', (e) => {
+      const b = e.target.closest('[data-rb-tab]');
+      if (!b) return;
+      if (b.dataset.rbTab === activeKey && collapsed) { collapsed = false; savePref(); render(); return; }
+      activate(b.dataset.rbTab);
+    });
+    tabsEl.addEventListener('dblclick', (e) => {
+      if (!e.target.closest('[data-rb-tab]')) return;
+      collapsed = !collapsed; savePref(); render();
+    });
+    bodyEl.addEventListener('click', (e) => {
+      if (e.target.closest('.rb-collapse')) { collapsed = true; savePref(); render(); }
+    });
+    render();
+  }
+
+  // Bron vervangen. Een nieuw contextueel tabblad (andere sleutel) wordt
+  // actief als opts.focus; verdwijnt het actieve, dan terug naar het vorige.
+  function setSource(name, tabs, opts) {
+    sources[name] = tabs || [];
+    const ctx = (tabs || []).find(t => t.contextual);
+    if (opts && opts.focus && ctx) { activeKey = ctx.key; if (collapsed) { collapsed = false; savePref(); } }
+    render();
+    if (opts && opts.focus && ctx && ctx.onShow) ctx.onShow();
+  }
+
+  // fn(key) bij elke wissel van het actieve tabblad.
+  function onChange(fn) { listeners.push(fn); return () => { const i = listeners.indexOf(fn); if (i >= 0) listeners.splice(i, 1); }; }
+
+  return { init, setSource, activate, refresh: render, active: () => activeKey, onChange, big, small, kv };
+})();

js/core/shooter.js

@@ -0,0 +1,469 @@
+/*!
+ * Tectum
+ * Copyright © 2026 Machiel Heinen.
+ * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
+ * Zie LICENTIE.md.
+ */
+// ============================================================
+// core/shooter.js — easter egg: schieten in de loopmodus (Ctrl+Shift+Alt+L).
+//   klik in beeld        muis vangen (Esc = loslaten)
+//   linkermuisknop       vuren
+//   1 / 2 / scrollwiel   pistool / raketwerper
+// Kogelgaten en roetplekken blijven op wanden/dak/vloer achter, raketten
+// laten ook wat rondvliegend metselwerk achter. Bewust simpel en buggy.
+// Plain script (geen ES-module); gebruikt THREE.
+//
+//   const gun = createShooter({ scene, camera, domElement, pane, walk, targets: () => [..] });
+//   gun.start(); gun.update(dt); gun.stop(); gun.dispose();
+// ============================================================
+
+function createShooter(o) {
+  const { scene, camera, domElement, pane, walk } = o;
+  const group = new THREE.Group();
+  group.name = 'shooter';
+  let active = false, weapon = 0, cooldown = 0, recoil = 0;
+  const decals = [], rockets = [], blasts = [], debris = [];
+  const MAX_DECALS = 250;
+
+  // --- Texturen (canvas) ---
+  function canvasTex(size, draw) {
+    const c = document.createElement('canvas');
+    c.width = c.height = size;
+    draw(c.getContext('2d'), size);
+    const t = new THREE.CanvasTexture(c);
+    return t;
+  }
+  const holeTex = canvasTex(64, (g, s) => {
+    const r = g.createRadialGradient(s / 2, s / 2, 0, s / 2, s / 2, s / 2);
+    r.addColorStop(0, 'rgba(0,0,0,1)'); r.addColorStop(0.18, 'rgba(10,8,6,1)');
+    r.addColorStop(0.3, 'rgba(60,50,40,0.8)'); r.addColorStop(1, 'rgba(0,0,0,0)');
+    g.fillStyle = r; g.fillRect(0, 0, s, s);
+    g.strokeStyle = 'rgba(20,15,10,0.7)'; g.lineWidth = 1.5;
+    for (let i = 0; i < 6; i++) {
+      const a = Math.random() * Math.PI * 2, l = s * (0.25 + Math.random() * 0.2);
+      g.beginPath(); g.moveTo(s / 2, s / 2); g.lineTo(s / 2 + Math.cos(a) * l, s / 2 + Math.sin(a) * l); g.stroke();
+    }
+  });
+  const scorchTex = canvasTex(128, (g, s) => {
+    for (let i = 0; i < 40; i++) {
+      const x = s / 2 + (Math.random() - 0.5) * s * 0.5, y = s / 2 + (Math.random() - 0.5) * s * 0.5;
+      const rr = s * (0.1 + Math.random() * 0.25);
+      const r = g.createRadialGradient(x, y, 0, x, y, rr);
+      r.addColorStop(0, 'rgba(15,10,5,0.5)'); r.addColorStop(1, 'rgba(15,10,5,0)');
+      g.fillStyle = r; g.fillRect(0, 0, s, s);
+    }
+    g.fillStyle = 'rgba(255,120,20,0.6)';
+    for (let i = 0; i < 25; i++) g.fillRect(s / 2 + (Math.random() - 0.5) * s * 0.4, s / 2 + (Math.random() - 0.5) * s * 0.4, 2, 2);
+  });
+  const fireTex = canvasTex(64, (g, s) => {
+    const r = g.createRadialGradient(s / 2, s / 2, 0, s / 2, s / 2, s / 2);
+    r.addColorStop(0, 'rgba(255,255,220,1)'); r.addColorStop(0.3, 'rgba(255,180,40,0.9)');
+    r.addColorStop(0.7, 'rgba(200,50,0,0.4)'); r.addColorStop(1, 'rgba(0,0,0,0)');
+    g.fillStyle = r; g.fillRect(0, 0, s, s);
+  });
+  // Puin krijgt een willekeurige steentextuur uit de bibliotheek (als die laadt).
+  const brickTex = new THREE.TextureLoader().load(['assets/textures/buitenmuur/R200 - Witte voeg.jpg', 'assets/textures/buitenmuur/K739 - Witte voeg.jpg', 'assets/textures/buitenmuur/R480 - Witte voeg.jpg'][Math.floor(Math.random() * 3)]);
+  const decalMat = (map) => new THREE.MeshBasicMaterial({ map, transparent: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -4 });
+  const holeMat = decalMat(holeTex), scorchMat = decalMat(scorchTex);
+  const debrisMat = new THREE.MeshStandardMaterial({ map: brickTex, roughness: 0.9 });
+  const fireMat = new THREE.SpriteMaterial({ map: fireTex, blending: THREE.AdditiveBlending, depthWrite: false });
+
+  // --- Wapens (vastgeplakt aan de camera) ---
+  const metal = new THREE.MeshStandardMaterial({ color: 0x2a2c30, metalness: 0.7, roughness: 0.35 });
+  const olive = new THREE.MeshStandardMaterial({ color: 0x4b5a32, roughness: 0.6 });
+  function box(w, h, d, m, x, y, z) { const b = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), m); b.position.set(x, y, z); return b; }
+  const pistol = new THREE.Group();
+  pistol.add(box(0.035, 0.045, 0.2, metal, 0, 0, -0.1), box(0.03, 0.09, 0.04, metal, 0, -0.055, -0.02));
+  const launcher = new THREE.Group();
+  const tube = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.05, 0.7, 12, 1, true), olive);
+  tube.material.side = THREE.DoubleSide;
+  tube.rotation.x = Math.PI / 2; tube.position.z = -0.25;
+  launcher.add(tube, box(0.03, 0.09, 0.04, metal, 0, -0.08, -0.05), box(0.02, 0.05, 0.03, metal, 0.05, 0.05, -0.2));
+  const flash = new THREE.Sprite(fireMat.clone());
+  flash.scale.set(0.15, 0.15, 1);
+  flash.visible = false;
+  const viewModel = new THREE.Group();
+  viewModel.add(pistol, launcher, flash);
+  const gunLight = new THREE.PointLight(0xffaa44, 0, 6);
+  group.add(viewModel, gunLight);
+
+  // --- HUD ---
+  const hud = document.createElement('div');
+  hud.className = 'shooter-hud';
+  hud.innerHTML = '<div class="shooter-cross"></div><div class="shooter-weapon"></div><div class="shooter-credit"></div><div class="shooter-kills"></div><div class="shooter-shout"></div><div class="shooter-ouch"></div><div class="shooter-announce"></div><div class="shooter-help">Klik = muis vangen · linkerknop = vuren · 1/2 of scroll = wapen · Esc = muis los · Ctrl+Shift+Alt+L = stoppen</div>';
+  pane.appendChild(hud);
+  hud.querySelector('.shooter-credit').textContent = GrannyKit.MUSIC_CREDIT;
+  const weaponLabel = hud.querySelector('.shooter-weapon');
+  const killsLabel = hud.querySelector('.shooter-kills');
+  const shoutLabel = hud.querySelector('.shooter-shout');
+  const ouch = hud.querySelector('.shooter-ouch');
+  let shoutTimer = 0;
+  function shout(text) { shoutLabel.textContent = text; shoutLabel.classList.add('show'); shoutTimer = 2.5; }
+  function setKills(n) { killsLabel.textContent = "Oma's: " + n; }
+  const announcer = GrannyKit.createAnnouncer(hud.querySelector('.shooter-announce'));
+
+  function selectWeapon(i) {
+    weapon = (i + 2) % 2;
+    pistol.visible = weapon === 0;
+    launcher.visible = weapon === 1;
+    weaponLabel.textContent = weapon === 0 ? '[1] Pistool  ∞' : '[2] Raketwerper  ∞';
+    flash.position.set(0, 0, weapon === 0 ? -0.22 : -0.62);
+  }
+  selectWeapon(0);
+
+  // --- Vijand: oud vrouwtje met rollator (8-bit sprite, Doom-stijl) ---
+  // Eén tegelijk: spawnt op 12-18 m, schuifelt op je af, na de kill komt de volgende.
+  function spriteTex(rows, tint) {
+    const t = new THREE.CanvasTexture(GrannyKit.pixelCanvas(rows, GrannyKit.PAL, { size: 32, tint, bottom: true }));
+    t.magFilter = t.minFilter = THREE.NearestFilter;
+    t.generateMipmaps = false;
+    return t;
+  }
+  const ladyTex = [spriteTex(GrannyKit.LADY), spriteTex(GrannyKit.LADY_B)];
+  const ladyHurtTex = spriteTex(GrannyKit.LADY, '#ff3030');
+  const LADY_H = 1.6 * 32 / 25; // sprite-hoogte (m) zodat de figuur ~1,6 m is
+  let mob = null, spawnTimer = 1.5, attackTimer = 0, animT = 0;
+  function spawnMob() {
+    const me = camera.position;
+    let x = me.x, z = me.z;
+    for (let i = 0; i < 15; i++) {
+      const a = Math.random() * Math.PI * 2, d = 12 + Math.random() * 6;
+      x = me.x + Math.sin(a) * d; z = me.z + Math.cos(a) * d;
+      if (!o.blocked || !o.blocked(x, z)) break;
+    }
+    const sp = new THREE.Sprite(new THREE.SpriteMaterial({ map: ladyTex[0], transparent: true, alphaTest: 0.5 }));
+    sp.scale.set(LADY_H, LADY_H, 1);
+    group.add(sp);
+    mob = { sp, x, z, hp: 3, alive: true, hurt: 0, dead: 0 };
+    placeMob();
+    shout(GrannyKit.pick(GrannyKit.SHOUTS));
+  }
+  function mobFloor(x, z) { return o.floorAt ? o.floorAt(x, z) : 0; }
+  function placeMob() { mob.sp.position.set(mob.x, mobFloor(mob.x, mob.z) + LADY_H / 2 - (mob.dead ? LADY_H * 0.3 : 0), mob.z); }
+  function mobCenter() { return new THREE.Vector3(mob.x, mobFloor(mob.x, mob.z) + 0.8, mob.z); }
+  // Straal tegen een staande cilinder (r 0,4 m, 1,6 m hoog) om de oma.
+  function rayHitsMob(origin, dir, maxDist) {
+    if (!mob || !mob.alive) return false;
+    const c = mobCenter();
+    const t = c.clone().sub(origin).dot(dir);
+    if (t < 0 || t > maxDist) return false;
+    const p = origin.clone().addScaledVector(dir, t);
+    return Math.hypot(p.x - c.x, p.z - c.z) < 0.4 && Math.abs(p.y - c.y) < 0.8;
+  }
+  const gibTex = GrannyKit.GIBS.map(rows => {
+    const t = new THREE.CanvasTexture(GrannyKit.pixelCanvas(rows, GrannyKit.GIB_PAL, { size: 8 }));
+    t.magFilter = t.minFilter = THREE.NearestFilter;
+    t.generateMipmaps = false;
+    return t;
+  });
+  const bloodTex = canvasTex(32, (g) => {
+    g.fillStyle = '#7a0a0a';
+    for (let i = 0; i < 14; i++) {
+      const a = Math.random() * 6.28, d = Math.random() * 10, r = 2 + Math.random() * 5;
+      g.beginPath(); g.arc(16 + Math.cos(a) * d, 16 + Math.sin(a) * d, r, 0, 6.28); g.fill();
+    }
+  });
+  bloodTex.magFilter = THREE.NearestFilter;
+  const bloodMat = decalMat(bloodTex);
+  function spawnGibs(center, count) {
+    for (let i = 0; i < count; i++) {
+      // Vooral vlees, plus een paar herkenbare stukken.
+      const k = i < count * 0.5 ? Math.floor(Math.random() * 2) : Math.floor(Math.random() * GrannyKit.GIBS.length);
+      const sp = new THREE.Sprite(new THREE.SpriteMaterial({ map: gibTex[k], alphaTest: 0.5 }));
+      const sz = 0.18 + Math.random() * 0.14;
+      sp.scale.set(sz, sz, 1);
+      sp.position.copy(center).add(new THREE.Vector3((Math.random() - 0.5) * 0.4, (Math.random() - 0.5) * 0.8, (Math.random() - 0.5) * 0.4));
+      const v = new THREE.Vector3((Math.random() - 0.5) * 9, 2 + Math.random() * 6, (Math.random() - 0.5) * 9);
+      group.add(sp);
+      debris.push({ mesh: sp, v, spin: new THREE.Vector3((Math.random() - 0.5) * 20, 0, 0), rest: false, gib: true });
+    }
+    // Plas onder de plek des onheils.
+    bloodSplat(center.x, center.z, 1.4);
+    trimDebris();
+  }
+  function bloodSplat(x, z, size) {
+    const m = new THREE.Mesh(new THREE.PlaneGeometry(size, size), bloodMat);
+    m.rotation.set(-Math.PI / 2, 0, Math.random() * 6.28);
+    m.position.set(x, mobFloor(x, z) + 0.006, z);
+    group.add(m);
+    decals.push(m);
+  }
+  function trimDebris() {
+    while (debris.length > 200) {
+      const old = debris.shift();
+      group.remove(old.mesh);
+      if (old.mesh.isSprite) old.mesh.material.dispose(); else old.mesh.geometry.dispose();
+    }
+  }
+
+  function damageMob(n, gib) {
+    if (!mob || !mob.alive) return;
+    mob.hp -= n;
+    mob.hurt = 0.15;
+    spawnBlast(mobCenter(), 0.4, 0.2);
+    if (mob.hp > 0) { bang(0.2, 900, 0.3); return; }
+    mob.alive = false;
+    mob.dead = 0.001;
+    mob.sp.material.map = ladyHurtTex;
+    mob.sp.material.rotation = Math.PI / 2; // omgevallen
+    if (gib) { mob.sp.visible = false; mob.dead = 2.4; spawnGibs(mobCenter(), 22); }
+    else spawnGibs(mobCenter(), 5);
+    setKills(announcer.kill());
+    shout(GrannyKit.pick(GrannyKit.DEATH_SHOUTS));
+    spawnTimer = 1;
+  }
+  function updateMob(t) {
+    if (!mob) { spawnTimer -= t; if (spawnTimer <= 0) spawnMob(); return; }
+    if (!mob.alive) {
+      mob.dead += t;
+      mob.sp.material.opacity = Math.max(0, 1 - (mob.dead - 1.5));
+      mob.sp.material.transparent = true;
+      placeMob();
+      if (mob.dead > 2.5) { group.remove(mob.sp); mob.sp.material.dispose(); mob = null; }
+      return;
+    }
+    const me = camera.position;
+    const dx = me.x - mob.x, dz = me.z - mob.z, dist = Math.hypot(dx, dz);
+    if (dist > 0.9) {
+      const v = 1.3 * t / dist;
+      const nx = mob.x + dx * v, nz = mob.z + dz * v;
+      if (!o.blocked || !o.blocked(nx, nz)) { mob.x = nx; mob.z = nz; }
+      else if (!o.blocked(nx, mob.z)) mob.x = nx;
+      else if (!o.blocked(mob.x, nz)) mob.z = nz;
+      animT += t;
+    } else {
+      attackTimer -= t;
+      if (attackTimer <= 0) {
+        attackTimer = 1.2;
+        bang(0.1, 400, 0.6);
+        ouch.classList.remove('show'); void ouch.offsetWidth; ouch.classList.add('show');
+        announcer.hurt();
+        shout(GrannyKit.pick(GrannyKit.HIT_SHOUTS));
+      }
+    }
+    mob.hurt -= t;
+    mob.sp.material.map = mob.hurt > 0 ? ladyHurtTex : ladyTex[Math.floor(animT * 4) % 2];
+    placeMob();
+  }
+
+  const music = GrannyKit.createMusic();
+  const sfx = GrannyKit.createSfx();
+  const bang = sfx.bang;
+
+  // --- Raken ---
+  const ray = new THREE.Raycaster();
+  function hitScan(origin, dir, far) {
+    ray.set(origin, dir);
+    ray.far = far;
+    const hits = ray.intersectObjects(o.targets().filter(t => t && t.visible), true);
+    return hits.find(h => h.face && h.object.isMesh && isVisible(h.object)) || null;
+  }
+  function isVisible(obj) {
+    for (let p = obj; p; p = p.parent) if (!p.visible) return false;
+    return true;
+  }
+  function addDecal(hit, mat, size) {
+    const n = hit.face.normal.clone().transformDirection(hit.object.matrixWorld);
+    if (n.dot(ray.ray.direction) > 0) n.negate(); // altijd de kant waar je vandaan schiet
+    const m = new THREE.Mesh(new THREE.PlaneGeometry(size, size), mat);
+    m.position.copy(hit.point).addScaledVector(n, 0.004);
+    m.lookAt(hit.point.clone().add(n));
+    m.rotateZ(Math.random() * Math.PI * 2);
+    group.add(m);
+    decals.push(m);
+    if (decals.length > MAX_DECALS) { const old = decals.shift(); group.remove(old); old.geometry.dispose(); }
+  }
+
+  const tmpDir = new THREE.Vector3();
+  function fire() {
+    if (cooldown > 0) return;
+    camera.getWorldDirection(tmpDir);
+    // Lichte spreiding, het blijft een configurator.
+    tmpDir.x += (Math.random() - 0.5) * 0.01; tmpDir.y += (Math.random() - 0.5) * 0.01;
+    tmpDir.normalize();
+    flash.visible = true;
+    flash.material.rotation = Math.random() * 6;
+    gunLight.intensity = 2;
+    if (weapon === 0) {
+      cooldown = 0.18; recoil = 1;
+      bang(0.15, 3000, 0.5);
+      const hit = hitScan(camera.position, tmpDir, 200);
+      if (rayHitsMob(camera.position, tmpDir, hit ? hit.distance : 200)) damageMob(1);
+      else if (hit) {
+        addDecal(hit, holeMat, 0.05 + Math.random() * 0.03);
+        spawnBlast(hit.point, 0.15, 0.12);
+      }
+    } else {
+      cooldown = 0.8; recoil = 2.5;
+      bang(0.5, 600, 0.6);
+      const r = new THREE.Group();
+      r.add(box(0.06, 0.06, 0.3, olive, 0, 0, 0));
+      const tail = new THREE.Sprite(fireMat);
+      tail.scale.set(0.3, 0.3, 1); tail.position.z = 0.2;
+      r.add(tail);
+      r.position.copy(camera.position).addScaledVector(tmpDir, 0.6);
+      r.lookAt(r.position.clone().add(tmpDir));
+      group.add(r);
+      rockets.push({ mesh: r, dir: tmpDir.clone(), speed: 14, life: 6 });
+    }
+  }
+
+  function spawnBlast(pos, size, life) {
+    const s = new THREE.Sprite(fireMat.clone());
+    s.position.copy(pos);
+    s.scale.set(size, size, 1);
+    group.add(s);
+    blasts.push({ s, size, life, t: 0 });
+  }
+
+  function explode(hit, point, normal) {
+    bang(1.2, 300, 1);
+    if (hit) {
+      addDecal(hit, scorchMat, 1.2 + Math.random() * 0.6);
+      point = hit.point;
+      normal = hit.face.normal.clone().transformDirection(hit.object.matrixWorld);
+      if (normal.dot(ray.ray.direction) > 0) normal.negate();
+    }
+    spawnBlast(point, 2.5, 0.5);
+    const light = new THREE.PointLight(0xff8833, 6, 12);
+    light.position.copy(point);
+    group.add(light);
+    blasts.push({ light, life: 0.5, t: 0 });
+    if (mob && mob.alive && mobCenter().distanceTo(point) < 3) damageMob(99, true);
+    if (!hit) return; // direct op de oma: alleen gibs, geen stenen
+    const n = normal;
+    for (let i = 0; i < 12; i++) {
+      const sz = 0.05 + Math.random() * 0.12;
+      const d = new THREE.Mesh(new THREE.BoxGeometry(sz * 2, sz, sz), debrisMat);
+      d.position.copy(hit.point).addScaledVector(n, 0.1);
+      d.rotation.set(Math.random() * 6, Math.random() * 6, 0);
+      const v = n.clone().multiplyScalar(2 + Math.random() * 4).add(new THREE.Vector3((Math.random() - 0.5) * 6, Math.random() * 5, (Math.random() - 0.5) * 6));
+      group.add(d);
+      debris.push({ mesh: d, v, spin: new THREE.Vector3(Math.random() * 10, Math.random() * 10, 0), rest: false });
+    }
+    trimDebris();
+  }
+
+  // --- Invoer ---
+  function onClick(e) {
+    if (!active) return;
+    if (document.pointerLockElement !== domElement) { domElement.requestPointerLock && domElement.requestPointerLock(); return; }
+    if (e.button === 0) fire();
+  }
+  function onMouseMove(e) {
+    if (!active || document.pointerLockElement !== domElement) return;
+    walk.look(-e.movementX * 0.0025, -e.movementY * 0.0025);
+  }
+  function onWheel(e) {
+    if (!active) return;
+    e.preventDefault();
+    selectWeapon(weapon + (e.deltaY > 0 ? 1 : -1));
+  }
+  function onKey(e) {
+    if (!active || e.ctrlKey) return;
+    if (e.key === '1') selectWeapon(0);
+    if (e.key === '2') selectWeapon(1);
+  }
+  domElement.addEventListener('mousedown', onClick);
+  document.addEventListener('mousemove', onMouseMove);
+  domElement.addEventListener('wheel', onWheel, { passive: false });
+  window.addEventListener('keydown', onKey);
+
+  function clear() {
+    if (mob) { group.remove(mob.sp); mob.sp.material.dispose(); mob = null; }
+    shoutLabel.classList.remove('show');
+    [...decals, ...debris.map(d => d.mesh), ...rockets.map(r => r.mesh), ...blasts.map(b => b.s || b.light)].forEach(m => group.remove(m));
+    decals.length = debris.length = rockets.length = blasts.length = 0;
+  }
+
+  return {
+    get active() { return active; },
+    start() {
+      active = true;
+      scene.add(group);
+      hud.classList.add('show');
+      announcer.reset();
+      setKills(0);
+      spawnTimer = 1.5;
+      music.play();
+    },
+    stop() {
+      active = false;
+      if (document.pointerLockElement === domElement) document.exitPointerLock();
+      clear();
+      scene.remove(group);
+      hud.classList.remove('show');
+      music.stop();
+      announcer.stop();
+    },
+    update(dt) {
+      if (!active) return;
+      const t = Math.min(dt, 0.05);
+      cooldown -= t;
+      // Wapen volgt de camera, met wat terugslag.
+      recoil = Math.max(0, recoil - t * 8);
+      viewModel.position.copy(camera.position);
+      viewModel.quaternion.copy(camera.quaternion);
+      viewModel.translateX(0.18); viewModel.translateY(-0.16 + recoil * 0.01); viewModel.translateZ(-0.25 + recoil * 0.03);
+      viewModel.rotateX(recoil * 0.08);
+      gunLight.position.copy(camera.position);
+      if (flash.visible && cooldown < (weapon === 0 ? 0.13 : 0.72)) flash.visible = false;
+      gunLight.intensity = Math.max(0, gunLight.intensity - t * 30);
+      announcer.update(t);
+      updateMob(t);
+      if (shoutTimer > 0 && (shoutTimer -= t) <= 0) shoutLabel.classList.remove('show');
+
+      for (let i = rockets.length - 1; i >= 0; i--) {
+        const r = rockets[i];
+        r.life -= t;
+        const stepLen = r.speed * t;
+        r.speed += 10 * t;
+        const hit = hitScan(r.mesh.position, r.dir, stepLen);
+        if (rayHitsMob(r.mesh.position, r.dir, stepLen + 0.3)) {
+          explode(null, mobCenter(), r.dir.clone().negate());
+          group.remove(r.mesh);
+          rockets.splice(i, 1);
+        } else if (hit || r.life <= 0) {
+          if (hit) explode(hit);
+          group.remove(r.mesh);
+          rockets.splice(i, 1);
+        } else {
+          r.mesh.position.addScaledVector(r.dir, stepLen);
+          if (Math.random() < 0.5) spawnBlast(r.mesh.position.clone().addScaledVector(r.dir, -0.2), 0.2, 0.3);
+        }
+      }
+      for (let i = blasts.length - 1; i >= 0; i--) {
+        const b = blasts[i];
+        b.t += t;
+        const k = b.t / b.life;
+        if (b.s) { b.s.scale.setScalar(b.size * (0.6 + k)); b.s.material.opacity = 1 - k; }
+        if (b.light) b.light.intensity = 6 * (1 - k);
+        if (k >= 1) { group.remove(b.s || b.light); if (b.s) b.s.material.dispose(); blasts.splice(i, 1); }
+      }
+      for (const d of debris) {
+        if (d.rest) continue;
+        d.v.y -= 9.81 * t;
+        const next = d.mesh.position.clone().addScaledVector(d.v, t);
+        const floor = (o.floorAt ? o.floorAt(next.x, next.z) : 0) + (d.gib ? d.mesh.scale.y * 0.35 : 0.03);
+        if (next.y <= floor && d.v.y < 0) {
+          next.y = floor;
+          d.v.multiplyScalar(0.4); d.v.y = -d.v.y * 0.5; d.spin.multiplyScalar(0.5);
+          if (d.gib && !d.splat) { d.splat = true; bloodSplat(next.x, next.z, 0.3 + Math.random() * 0.3); }
+          if (d.v.length() < 0.3) d.rest = true;
+        }
+        d.mesh.position.copy(next);
+        if (d.mesh.isSprite) d.mesh.material.rotation += d.spin.x * t;
+        else { d.mesh.rotation.x += d.spin.x * t; d.mesh.rotation.y += d.spin.y * t; }
+      }
+    },
+    dispose() {
+      this.stop();
+      domElement.removeEventListener('mousedown', onClick);
+      document.removeEventListener('mousemove', onMouseMove);
+      domElement.removeEventListener('wheel', onWheel);
+      window.removeEventListener('keydown', onKey);
+      hud.remove();
+      sfx.close();
+    }
+  };
+}

js/core/skybox.js

@@ -212,5 +212,5 @@ window.Skybox = (() => {
     return wrap;
   }
 
-  return { CAMERA_HEIGHT_M, NIGHT_FACTOR, createEnvironment, apply, getMode, lightFactor, createToggle };
+  return { CAMERA_HEIGHT_M, NIGHT_FACTOR, MODES, LABELS, createEnvironment, apply, getMode, setMode: remember, lightFactor, createToggle };
 })();

js/core/ui-kit.js

@@ -7,7 +7,8 @@
 // ============================================================
 // core/ui-kit.js — gedeelde UI-bouwstenen (window.UI): iconen (Bootstrap
 // Icons, css/vendor), invoervelden, schakelaars, secties, tabbladen,
-// specificatie-kaarten en de 3-staps weergave-cyclus (sneltoets T).
+// inklapbare secties, schuiven, specificatie-kaarten en de 3-staps
+// weergave-cyclus (sneltoets T).
 // Eén plek voor opmaak en woordgebruik, zodat alle panelen gelijk ogen.
 //
 // Woordgebruik labels: zelfstandig naamwoord met hoofdletter, geen dubbele
@@ -34,6 +35,35 @@ window.UI = (() => {
       `<span class="ui-unit">${unit}</span>`, o);
   }
 
+  // Schuif met gekoppeld getal (voor maten met een logisch bereik, zoals
+  // hoogtes en hellingen). o: { min, max, step, unit ('mm' standaard), hint }.
+  // Het getal mag buiten het schuifbereik; het model klemt zelf.
+  function range(id, label, value, o) {
+    o = o || {};
+    const unit = o.unit === undefined ? 'mm' : o.unit;
+    const lim = `min="${o.min}" max="${o.max}" step="${o.step || 10}"`;
+    return `<div class="ui-field ui-field-range${o.disabled ? ' is-disabled' : ''}"><label for="${id}">${label}${hint(o.hint)}</label>` +
+      `<div class="ui-control ui-range"><input type="range" id="${id}-r" ${lim} value="${value}"${o.disabled ? ' disabled' : ''}>` +
+      `<input type="number" id="${id}" step="${o.step || 10}" value="${value}"${o.disabled ? ' disabled' : ''}><span class="ui-unit">${unit}</span></div></div>`;
+  }
+  // fn(v) bij schuiven en typen; set(id, v) zet beide zonder event.
+  function onRange(id, fn, after) {
+    const n = document.getElementById(id), r = document.getElementById(id + '-r');
+    if (!n || !r) return;
+    r.addEventListener('input', () => { n.value = r.value; fn(parseFloat(r.value)); after && after(); });
+    n.addEventListener('input', () => {
+      const v = parseFloat(n.value);
+      if (!isFinite(v)) return;
+      r.value = v;
+      fn(v); after && after();
+    });
+  }
+  function setRange(id, v) {
+    const n = document.getElementById(id), r = document.getElementById(id + '-r');
+    if (n && document.activeElement !== n) n.value = v;
+    if (r) r.value = v;
+  }
+
   // Keuzelijst. options: { waarde: 'Label' }.
   function sel(id, label, options, value, o) {
     const opts = Object.entries(options).map(([k, v]) => `<option value="${k}"${k === value ? ' selected' : ''}>${v}</option>`).join('');
@@ -126,5 +156,5 @@ window.UI = (() => {
     el.classList.toggle('fullscreen-2d');
   }
 
-  return { esc, icon, hint, num, sel, toggle, color, onColor, section, info, warn, grid, button, actions, tabs, wireTabs, specCard, onNum, onSel, onToggle, cycle3D, toggle2D };
+  return { esc, icon, hint, num, range, onRange, setRange, sel, toggle, color, onColor, section, info, warn, grid, button, actions, tabs, wireTabs, specCard, onNum, onSel, onToggle, cycle3D, toggle2D };
 })();

js/core/walk-controls.js

@@ -0,0 +1,110 @@
+/*!
+ * Tectum
+ * Copyright © 2026 Machiel Heinen.
+ * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
+ * Zie LICENTIE.md.
+ */
+// ============================================================
+// core/walk-controls.js — lopen in de 3D-weergave (first person).
+//   W/S of pijl omhoog/omlaag  vooruit/achteruit
+//   A/D                        opzij stappen
+//   pijl links/rechts          draaien
+//   Shift                      rennen
+//   slepen met de muis         rondkijken
+// Botsen (optioneel) en vloerhoogte komen van de aanroeper:
+//   opts.blocked(x, z)  -> true als je daar niet kunt staan (m); standaard nooit
+//   opts.floorAt(x, z)  -> hoogte van de ondergrond (m)
+//   opts.eye            -> ooghoogte boven de ondergrond (m, standaard 1,65)
+// Plain script (geen ES-module); gebruikt THREE.
+//
+//   const walk = createWalkControls(camera, domElement, opts);
+//   walk.start({ x, z, yaw });  walk.update(dt);  walk.stop();
+// ============================================================
+
+function createWalkControls(camera, domElement, opts) {
+  const o = Object.assign({ eye: 1.65, speed: 1.68, run: 3.84, turn: Math.PI / 2, blocked: () => false, floorAt: () => 0 }, opts || {});
+  const keys = new Set();
+  let active = false;
+  let x = 0, z = 0, yaw = 0, pitch = 0;
+  let drag = null;
+  let speedFactor = 1; // bijv. 1,3 in de shooter-modus; reset bij start()
+
+  const inField = () => ['INPUT', 'SELECT', 'TEXTAREA'].includes(document.activeElement && document.activeElement.tagName);
+  const MOVE_KEYS = ['w', 'a', 's', 'd', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright', 'shift'];
+  function onKeyDown(e) {
+    if (!active || inField() || e.ctrlKey || e.metaKey || e.altKey) return;
+    const k = e.key.toLowerCase();
+    if (!MOVE_KEYS.includes(k)) return;
+    keys.add(k);
+    e.preventDefault();
+  }
+  function onKeyUp(e) { keys.delete(e.key.toLowerCase()); }
+  function onDown(e) { if (active && e.button === 0) drag = { x: e.clientX, y: e.clientY }; }
+  function onMove(e) {
+    if (!active || !drag) return;
+    const w = domElement.clientWidth || 1;
+    yaw -= (e.clientX - drag.x) / w * Math.PI;
+    pitch = Math.max(-1.2, Math.min(1.2, pitch - (e.clientY - drag.y) / w * Math.PI));
+    drag = { x: e.clientX, y: e.clientY };
+  }
+  function onUp() { drag = null; }
+  window.addEventListener('keydown', onKeyDown);
+  window.addEventListener('keyup', onKeyUp);
+  domElement.addEventListener('pointerdown', onDown);
+  window.addEventListener('pointermove', onMove);
+  window.addEventListener('pointerup', onUp);
+
+  function apply() {
+    camera.position.set(x, o.floorAt(x, z) + o.eye, z);
+    // yaw 0 = kijkrichting +Z; pitch > 0 = omhoog.
+    const dir = new THREE.Vector3(Math.sin(yaw) * Math.cos(pitch), Math.sin(pitch), Math.cos(yaw) * Math.cos(pitch));
+    camera.lookAt(camera.position.clone().add(dir));
+  }
+
+  // Stap met botsen: eerst de hele stap, anders per as (langs een muur glijden).
+  function step(dx, dz) {
+    if (!o.blocked(x + dx, z + dz)) { x += dx; z += dz; return; }
+    if (!o.blocked(x + dx, z)) x += dx;
+    else if (!o.blocked(x, z + dz)) z += dz;
+  }
+
+  return {
+    get active() { return active; },
+    start(pose) {
+      x = pose.x; z = pose.z; yaw = pose.yaw || 0; pitch = 0;
+      speedFactor = 1;
+      keys.clear();
+      active = true;
+      apply();
+    },
+    // Rondkijken van buitenaf (bijv. muis gevangen in core/shooter.js).
+    set speedFactor(f) { speedFactor = f; },
+    look(dYaw, dPitch) {
+      yaw += dYaw;
+      pitch = Math.max(-1.4, Math.min(1.4, pitch + dPitch));
+    },
+    stop() { active = false; keys.clear(); drag = null; },
+    update(dt) {
+      if (!active) return;
+      const t = Math.min(dt, 0.1);
+      if (keys.has('arrowleft')) yaw += o.turn * t;
+      if (keys.has('arrowright')) yaw -= o.turn * t;
+      const f = (keys.has('w') || keys.has('arrowup') ? 1 : 0) - (keys.has('s') || keys.has('arrowdown') ? 1 : 0);
+      const r = (keys.has('d') ? 1 : 0) - (keys.has('a') ? 1 : 0);
+      if (f || r) {
+        const v = (keys.has('shift') ? o.run : o.speed) * speedFactor * t / Math.hypot(f, r);
+        const fx = Math.sin(yaw), fz = Math.cos(yaw); // vooruit
+        const rx = -fz, rz = fx;                        // rechts (kijkend langs +Z is rechts -X)
+        step((fx * f + rx * r) * v, (fz * f + rz * r) * v);
+      }
+      apply();
+    },
+    dispose() {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+      domElement.removeEventListener('pointerdown', onDown);
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+    }
+  };
+}

js/cost/cost-defaults.js

@@ -0,0 +1,237 @@
+/*!
+ * Tectum
+ * Copyright © 2026 Machiel Heinen.
+ * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
+ * Zie LICENTIE.md.
+ */
+// ============================================================
+// cost/cost-defaults.js — STANDAARD kosten en tijden (datafile).
+//
+// Dit zijn de fabrieksinstellingen. Aanpassen kan op twee manieren:
+//   1. in de app: menu Instellingen > Kosten & tijden (opgeslagen in deze
+//      browser, exporteren/importeren als JSON);
+//   2. hier in dit bestand (geldt dan voor iedereen als nieuwe standaard).
+//      Tip: exporteer in de app en neem de waarden hier over.
+//
+// Een JS-bestand i.p.v. JSON omdat de app ook via file:// draait (fetch van
+// lokale bestanden werkt daar niet).
+//
+// Opbouw: groep -> items. Elk item: { label, unit, value } of met
+// options: { sleutel: 'tekst' } voor een keuze. Nieuwe items verschijnen
+// vanzelf in het instellingenvenster; de berekening (CostModel) moet ze
+// natuurlijk wel gebruiken. Bedragen excl. btw. Tijden in seconden tenzij
+// anders vermeld. LET OP: de getallen zijn voorlopige schattingen.
+// ============================================================
+
+window.COST_DEFAULTS = {
+  arbeid: {
+    label: 'Arbeid',
+    items: {
+      uurloon: { label: 'Uurloon productie (all-in)', unit: '€/u', value: 45 },
+      bezetting: { label: 'Bezetting per productiestap (heftruck, vegen, aangeven): gemiddeld personeel', unit: 'man', value: 2.2 },
+      toeslagUren: { label: 'Toeslag indirecte uren (klaarleggen, opruimen, intern transport)', unit: '%', value: 10 },
+      qa: { label: 'QA (laatste aanpassingen, klantcontact) over de totale werktijd', unit: '%', value: 4 }
+    }
+  },
+
+  zagen: {
+    label: 'Zagen',
+    items: {
+      methode: { label: 'Zaagmethode', options: { robot: 'Zaagrobot', hand: 'Handmatig' }, value: 'robot' },
+      // Machinetijd testontwerp (409 stuks, 818 sneden): ~2 u 55 min.
+      robotSnede: { label: 'Robot: tijd per haakse snede', unit: 's', value: 5 },
+      robotSchuin: { label: 'Robot: extra tijd per schuine snede', unit: 's', value: 2.5 },
+      robotStuk: { label: 'Robot: handling per stuk (invoer, uitvoer, etiket)', unit: 's', value: 15 },
+      handFactor: { label: 'Handmatig: factor op de robottijd', unit: '×', value: 7 }
+    }
+  },
+
+  verbinden: {
+    label: 'Verbindingen (regelwerk)',
+    items: {
+      schroevenPerVerbinding: { label: 'Schroeven per verbinding (stijl/dorpel op regel)', unit: 'st.', value: 3 },
+      eersteSchroef: { label: 'Tijd eerste schroef (gat + schroef + uitlijnen)', unit: 's', value: 10 },
+      volgendeSchroef: { label: 'Tijd volgende schroef (gat + schroef)', unit: 's', value: 5 },
+      prijsPer1000: { label: 'Inkoop constructieschroeven (6×120)', unit: '€/1000', value: 45 },
+      verbindingenPerVloerbalk: { label: 'Verbindingen per vloer-/dakbalk', unit: 'st.', value: 2 },
+      dubbelAfstand: { label: 'Dubbele stijl (deur, hoek): schroef verticaal elke', unit: 'mm', value: 100 },
+      monteerFactor: { label: 'Monteren: factor op de schroeftijd (incl. lijmen, positioneren)', unit: '×', value: 6 },
+      personeel: { label: 'Personeel bij monteren constructie (vloer, wand, dak; i.p.v. de bezetting)', unit: 'man', value: 2 },
+      dakFactor: { label: 'Dak: factor op de tijd per schroef (moeilijker werken)', unit: '×', value: 4 }
+    }
+  },
+
+  montage: {
+    label: 'Montage',
+    items: {
+      muurVastzetten: { label: 'Muursectie plaatsen en vastzetten', unit: 'min', value: 10 },
+      muurPersoneel: { label: 'Personeel bij plaatsen muursectie (i.p.v. de bezetting)', unit: 'man', value: 3 }
+    }
+  },
+
+  hout: {
+    label: 'Hout',
+    items: {
+      constructieM3: { label: 'Constructiehout vuren C24 (regelwerk, balken)', unit: '€/m³', value: 550 },
+      latwerkM: { label: 'Latwerk (kruislat)', unit: '€/m', value: 0.9 },
+      latStukMontage: { label: 'Latwerk: per gezaagd stuk (meten, zagen op locatie, passen)', unit: 's', value: 240 },
+      latMeterMontage: { label: 'Latwerk: bevestigen per strekkende meter', unit: 's/m', value: 30 }
+    }
+  },
+
+  plaat: {
+    label: 'Plaatwerk',
+    items: {
+      spaanplaatM2: { label: 'Spaanplaat', unit: '€/m²', value: 9 },
+      spaanplaatMontage: { label: 'Montage spaanplaat (passen, zagen, plaatsen)', unit: 's/m²', value: 120 },
+      osbM2: { label: 'OSB (vloeren, plafonds dak)', unit: '€/m²', value: 12 },
+      osbMontage: { label: 'Montage OSB', unit: 's/m²', value: 90 },
+      cementplaatM2: { label: 'Cementgebonden plaat (gevel, trasraam)', unit: '€/m²', value: 28 },
+      cementplaatMontage: { label: 'Montage cementplaat', unit: 's/m²', value: 240 },
+      schroevenPerM2: { label: 'Plaatschroeven per m²', unit: 'st./m²', value: 15 },
+      tijdPerPlaatschroef: { label: 'Tijd per plaatschroef', unit: 's', value: 4 },
+      plaatschroefPer1000: { label: 'Inkoop plaatschroeven (4×40)', unit: '€/1000', value: 15 }
+    }
+  },
+
+  isolatie: {
+    label: 'Isolatie',
+    items: {
+      glaswolM3: { label: 'Glaswol', unit: '€/m³', value: 40 },
+      glaswolMontage: { label: 'Montage glaswol', unit: 's/m³', value: 900 },
+      steenIsolatieM3: { label: 'Isolatieblok steengevel', unit: '€/m³', value: 120 }
+    }
+  },
+
+  gevel: {
+    label: 'Gevel',
+    items: {
+      vochtdoekM2: { label: 'Vochtdoek', unit: '€/m²', value: 1.5 },
+      vochtdoekMontageM: { label: 'Montage vochtdoek per strekkende meter wand', unit: 's/m', value: 600 },
+      rabatM2: { label: 'Rabat (gevelbekleding)', unit: '€/m²', value: 35 },
+      rabatMontage: { label: 'Montage rabat', unit: 's/m²', value: 600 },
+      steenM2: { label: 'Steenstrips (gevel + trasraam)', unit: '€/m²', value: 60 },
+      steenMontage: { label: 'Montage steenstrips', unit: 's/m²', value: 1800 }
+    }
+  },
+
+  dak: {
+    label: 'Dak & dakrand',
+    items: {
+      dakleerM2: { label: 'Dakleer (EPDM)', unit: '€/m²', value: 18 },
+      dakleerMontage: { label: 'Montage dakleer', unit: 's/m²', value: 600 },
+      rietM2: { label: 'Riet', unit: '€/m²', value: 90 },
+      rietMontage: { label: 'Montage riet', unit: 's/m²', value: 3600 },
+      beschotM2: { label: 'Dakbeschot OSB 18 mm (bovenop de sporen)', unit: '€/m²', value: 14 },
+      beschotMontage: { label: 'Montage dakbeschot', unit: 's/m²', value: 150 },
+      felsM2: { label: 'Felsplaten staande naad (zink/staal, klangen, scheidingslaag)', unit: '€/m²', value: 65 },
+      felsMontage: { label: 'Montage felsplaten', unit: 's/m²', value: 1800 },
+      boeideelM: { label: 'Boeideel', unit: '€/m', value: 25 },
+      boeideelMontage: { label: 'Montage boeideel', unit: 's/m', value: 600 },
+      onderplaatM2: { label: 'Onderplaat boeideel', unit: '€/m²', value: 30 },
+      onderplaatMontage: { label: 'Montage onderplaat', unit: 's/m²', value: 900 },
+      daktrimM: { label: 'Daktrim', unit: '€/m', value: 12 },
+      daktrimMontage: { label: 'Montage daktrim', unit: 's/m', value: 300 }
+    }
+  },
+
+  vloer: {
+    label: 'Vloer & fundering',
+    items: {
+      afwerkingM2: { label: 'Vloerafwerking', unit: '€/m²', value: 35 },
+      afwerkingMontage: { label: 'Montage vloerafwerking', unit: 's/m²', value: 1200 },
+      sandwichM2: { label: 'Sandwichpaneel', unit: '€/m²', value: 35 },
+      sandwichMontage: { label: 'Montage per sandwichpaneel', unit: 's', value: 600 }
+    }
+  },
+
+  kozijnen: {
+    label: 'Kozijnen',
+    items: {
+      raamM2: { label: 'Raamkozijn incl. glas', unit: '€/m²', value: 450 },
+      deur: { label: 'Binnen-/buitendeur incl. kozijn', unit: '€/st.', value: 900 },
+      voordeur: { label: 'Voordeur incl. kozijn', unit: '€/st.', value: 1800 },
+      montage: { label: 'Montage per kozijn', unit: 's', value: 5400 }
+    }
+  },
+
+  verlichting: {
+    label: 'Verlichting',
+    items: {
+      gevellamp: { label: 'Gevellamp', unit: '€/st.', value: 45 },
+      boeideelSpot: { label: 'Boeideel-spot', unit: '€/st.', value: 25 },
+      binnenspot: { label: 'Binnenspot', unit: '€/st.', value: 20 },
+      montage: { label: 'Montage per lamp/spot (armatuur plaatsen en aansluiten; leidingen en dozen onder Elektra)', unit: 's', value: 300 }
+    }
+  },
+
+  // Indicatieve groothandelsprijzen (excl. btw) en tijden; zie ElektraModel
+  // voor de hoeveelheden (strekkende meters per leidingtype, boorgaten, dozen).
+  elektra: {
+    label: 'Elektra',
+    items: {
+      personeel: { label: 'Personeel bij elektra (i.p.v. de bezetting)', unit: 'man', value: 1 },
+      boorgat: { label: 'Boorgat door stijl, regel of balk (aftekenen, boren, ontbramen)', unit: 's', value: 90 },
+      buisLeggen: { label: 'Installatiebuis leggen en bevestigen', unit: 's/m', value: 60 },
+      draadTrekken: { label: 'Draad trekken (per meter buis, alle aders)', unit: 's/m', value: 20 },
+      kabelLeggen: { label: 'XMvK-kabel leggen en bevestigen (buiten)', unit: 's/m', value: 40 },
+      doosPlaatsen: { label: 'Inbouwdoos plaatsen (luchtdicht, hollewand)', unit: 's', value: 240 },
+      verdeeldoos: { label: 'Verdeeldoos plaatsen en verbinden', unit: 's', value: 600 },
+      spotdoos: { label: 'Spotdoos plaatsen (luchtdicht plafond)', unit: 's', value: 300 },
+      vloerdoos: { label: 'Vloerdoos plaatsen (gat in vloer, aansluiten)', unit: 's', value: 1800 },
+      afmonteren: { label: 'Afmonteren schakelaar/wcd/apparaataansluiting', unit: 's', value: 300 },
+      steekverbinderMontage: { label: 'Steekverbinder module-naad monteren (set m/v)', unit: 's', value: 300 },
+      kastMontage: { label: 'Groepenkast plaatsen (kast, hoofdschakelaar, aardlek)', unit: 's', value: 3600 },
+      groepMontage: { label: 'Per groep: automaat plaatsen, bedraden, labelen', unit: 's', value: 900 },
+      keuring: { label: 'Meten, testen en opleveren (NEN 1010 / NEN 3140)', unit: 's', value: 10800 },
+      buis16M: { label: 'Installatiebuis flexibel Ø16', unit: '€/m', value: 0.35 },
+      buis19M: { label: 'Installatiebuis flexibel Ø19', unit: '€/m', value: 0.45 },
+      buis25M: { label: 'Installatiebuis flexibel Ø25', unit: '€/m', value: 0.8 },
+      draad15M: { label: 'VD-draad 1,5 mm² (per ader)', unit: '€/m', value: 0.28 },
+      draad25M: { label: 'VD-draad 2,5 mm² (per ader)', unit: '€/m', value: 0.45 },
+      xmvkM: { label: 'XMvK 3×1,5 mm²', unit: '€/m', value: 1.25 },
+      inbouwdoos: { label: 'Luchtdichte hollewanddoos', unit: '€/st.', value: 1.6 },
+      verdeeldoosSt: { label: 'Luchtdichte verdeeldoos', unit: '€/st.', value: 4.5 },
+      spotdoosSt: { label: 'Luchtdichte spotdoos', unit: '€/st.', value: 7.5 },
+      vloerdoosSt: { label: 'Vloerdoos met dubbele wcd', unit: '€/st.', value: 95 },
+      schakelaar: { label: 'Schakelaar enkelpolig (inbouw)', unit: '€/st.', value: 9 },
+      afdekraam1: { label: 'Afdekraam 1-voudig', unit: '€/st.', value: 3 },
+      afdekraam2: { label: 'Afdekraam 2-voudig', unit: '€/st.', value: 5 },
+      wcdDubbel: { label: 'Wandcontactdoos dubbel met randaarde', unit: '€/st.', value: 10 },
+      wcdEnkel: { label: 'Wandcontactdoos enkel met randaarde', unit: '€/st.', value: 6 },
+      perilex: { label: 'Perilex-wandcontactdoos (kookgroep)', unit: '€/st.', value: 18 },
+      werkschakelaar: { label: 'Werkschakelaar (warmtepomp)', unit: '€/st.', value: 28 },
+      lasklem: { label: 'Lasklem 3-voudig', unit: '€/st.', value: 0.35 },
+      steekverbinder3: { label: 'Steekverbinder 3-polig (set m/v)', unit: '€/set', value: 9 },
+      steekverbinder5: { label: 'Steekverbinder 5-polig (set m/v)', unit: '€/set', value: 14 },
+      doorvoer: { label: 'Luchtdichte kabeldoorvoer naar buiten', unit: '€/st.', value: 3.5 },
+      kast: { label: 'Groepenkast 3-fase leeg (behuizing, kammen, aansluitmateriaal)', unit: '€/st.', value: 180 },
+      hoofdschakelaar: { label: 'Hoofdschakelaar 4-polig 40 A', unit: '€/st.', value: 55 },
+      aardlek: { label: 'Aardlekschakelaar 2-polig 40 A / 30 mA', unit: '€/st.', value: 40 },
+      automaat: { label: 'Installatieautomaat 1P+N (B10/B16)', unit: '€/st.', value: 14 },
+      automaat2f: { label: 'Installatieautomaat 2-fase (kookgroep)', unit: '€/st.', value: 30 }
+    }
+  },
+
+  bedrijf: {
+    label: 'Afschrijving & bedrijfskosten',
+    items: {
+      machines: { label: 'Afschrijving machines (zaagrobot, gereedschap, inrichting) per productie-uur', unit: '€/u', value: 8 },
+      slijtage: { label: 'Slijtage en verbruik gereedschap (zaagbladen, bits, accu’s) per productie-uur', unit: '€/u', value: 2 },
+      huisvesting: { label: 'Huisvesting productiehal (huur, energie) per productie-uur', unit: '€/u', value: 6 },
+      transportUnit: { label: 'Transport per unit naar de bouwplaats', unit: '€/unit', value: 750 },
+      kraan: { label: 'Kraan voor plaatsen woning', unit: '€', value: 1200 }
+    }
+  },
+
+  opslag: {
+    label: 'Opslagen',
+    items: {
+      verlies: { label: 'Materiaalverlies (beschadiging, misgezaagd, restmateriaal; naast het berekende snijverlies balken)', unit: '%', value: 5 },
+      klein: { label: 'Klein materiaal (lijm, kit, tape, nieten)', unit: '%', value: 3 },
+      algemeen: { label: 'Algemene kosten (kantoor, verzekering, garantie) over de kostprijs', unit: '%', value: 5 },
+      marge: { label: 'Winstmarge', unit: '%', value: 15 },
+      btw: { label: 'Btw', unit: '%', value: 21 }
+    }
+  }
+};

js/cost/cost-model.js

@@ -0,0 +1,415 @@
+/*!
+ * Tectum
+ * Copyright © 2026 Machiel Heinen.
+ * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
+ * Zie LICENTIE.md.
+ */
+// ============================================================
+// cost/cost-model.js — CostModel: ENIGE bron van de kostenberekening
+// (materiaal + arbeid). Geen DOM. Rekent op de doorgerekende woning
+// (HouseModel.computeParts + computeTotals) met de kosten/tijden uit
+// COST_DEFAULTS (cost-defaults.js) plus de eigen instellingen van de
+// gebruiker (localStorage, instellingenvenster cost-settings.js).
+//
+// Opbouw: per element (wandstuk, vloer, dak, woning-breed) regels
+//   { cat, act, label, qty, unit, mat (€), sec (s arbeid) }
+// cat = materiaalgroep, act = werkzaamheid. Opgeteld per element, per unit
+// en voor de woning; daarna opslagen (indirecte uren, materiaal, marge, btw).
+//
+// Plain script, geladen na house-model.js en cost-defaults.js.
+// ============================================================
+
+window.CostModel = (() => {
+  const STORAGE_KEY = 'tectum.costs';
+  const listeners = [];
+
+  // ------------------------------------------------------------
+  // Instellingen: standaard (COST_DEFAULTS) + eigen waarden (localStorage).
+  // values = { groep: { sleutel: waarde } }.
+  // ------------------------------------------------------------
+  function defaultValues() {
+    const v = {};
+    Object.entries(window.COST_DEFAULTS).forEach(([g, grp]) => {
+      v[g] = {};
+      Object.entries(grp.items).forEach(([k, it]) => { v[g][k] = it.value; });
+    });
+    return v;
+  }
+  // Alleen bekende sleutels met een geldig type overnemen.
+  function mergeValues(base, over) {
+    const v = JSON.parse(JSON.stringify(base));
+    Object.entries(over || {}).forEach(([g, items]) => {
+      const grp = window.COST_DEFAULTS[g];
+      if (!grp || !items || typeof items !== 'object') return;
+      Object.entries(items).forEach(([k, val]) => {
+        const it = grp.items[k];
+        if (!it) return;
+        if (it.options ? Object.prototype.hasOwnProperty.call(it.options, val) : typeof val === 'number' && isFinite(val)) v[g][k] = val;
+      });
+    });
+    return v;
+  }
+  function readOverrides() {
+    try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}') || {}; } catch (e) { return {}; }
+  }
+  function getSettings() { return mergeValues(defaultValues(), readOverrides()); }
+  // Slaat alleen de afwijkingen van de standaard op.
+  function saveSettings(values) {
+    const def = defaultValues(), diff = {};
+    Object.entries(mergeValues(def, values)).forEach(([g, items]) => Object.entries(items).forEach(([k, val]) => {
+      if (val !== def[g][k]) (diff[g] = diff[g] || {})[k] = val;
+    }));
+    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(diff)); } catch (e) { /* geen opslag: alleen deze sessie */ }
+    listeners.forEach(fn => fn());
+  }
+  function resetSettings() { saveSettings(defaultValues()); }
+  function onChange(fn) { listeners.push(fn); return () => { const i = listeners.indexOf(fn); if (i >= 0) listeners.splice(i, 1); }; }
+
+  // Export/import (JSON-bestand): altijd de volledige set waarden.
+  function exportJson(values) {
+    return { type: 'tectum-costs', version: 1, exportedAt: new Date().toISOString(), values: mergeValues(defaultValues(), values) };
+  }
+  function importJson(obj) {
+    if (!obj || obj.type !== 'tectum-costs' || typeof obj.values !== 'object') throw new Error('geen Tectum-kostenbestand');
+    return mergeValues(defaultValues(), obj.values);
+  }
+
+  // ------------------------------------------------------------
+  // Berekening
+  // ------------------------------------------------------------
+  const CAT_ORDER = ['Hout', 'Schroeven', 'Plaatwerk', 'Isolatie', 'Gevel', 'Dak', 'Vloer', 'Kozijnen', 'Verlichting', 'Elektra'];
+  const ACT_ORDER = ['Zagen', 'Regelwerk monteren', 'Wanden plaatsen', 'Plaatwerk', 'Isoleren', 'Gevel', 'Latwerk', 'Dak', 'Vloer', 'Kozijnen', 'Verlichting', 'Elektra'];
+  const VERTICAL_KINDS = ['verticale balk', 'kreupele stijl'];
+  const DORPEL_KINDS = ['bovendorpel', 'onderdorpel'];
+
+  function compute(parts, totals, settings) {
+    const S = settings || getSettings();
+    const elements = [];
+    const newEl = (element, label, unit) => { const el = { element, label, unit, lines: [] }; elements.push(el); return el; };
+    // sec = tijd voor één persoon; crew = personeel bij die stap (standaard
+    // de gemiddelde bezetting per productiestap). Opgeslagen sec = manuren.
+    const add = (el, cat, act, label, qty, unit, mat, sec, crew) => {
+      if (!(qty > 0)) return;
+      const c = sec ? (crew !== undefined ? crew : S.arbeid.bezetting) : 0;
+      // clock = doorlooptijd van de stap (s), voor afschrijving/huisvesting.
+      el.lines.push({ cat, act, label, qty, unit, mat: mat || 0, sec: (sec || 0) * c, clock: c ? sec : 0, crew: c });
+    };
+
+    // --- Gedeelde rekenregels ---
+    const Z = S.zagen, V = S.verbinden, P = S.plaat;
+    const sawFactor = Z.methode === 'hand' ? Z.handFactor : 1;
+    // Zaagtijd van één stuk (s): handling + sneden (+ extra per schuine snede).
+    // saw: totalen voor het zaagoverzicht (robot- en handtijd, los van de keuze).
+    const saw = { pieces: 0, cuts: 0, angled: 0, robotSec: 0 };
+    const sawSec = (cutAngles, count = 1) => {
+      const ca = cutAngles || [0, 0], angled = ca.filter(a => a !== 0).length;
+      const robot = Z.robotStuk + ca.length * Z.robotSnede + angled * Z.robotSchuin;
+      saw.pieces += count; saw.cuts += count * ca.length; saw.angled += count * angled; saw.robotSec += count * robot;
+      return count * robot * sawFactor;
+    };
+    const sawLabel = Z.methode === 'hand' ? 'Zagen (handmatig)' : 'Zagen (robot)';
+    const jointSec = V.eersteSchroef + Math.max(0, V.schroevenPerVerbinding - 1) * V.volgendeSchroef;
+    // Constructie monteren (lijmen + schroeven): schroeftijd x V.monteerFactor,
+    // met V.personeel man (manuren), op het dak factor V.dakFactor (roof = true).
+    const addJoints = (el, joints, label, roof) => {
+      const n = joints * V.schroevenPerVerbinding;
+      const f = V.monteerFactor * (roof ? V.dakFactor : 1);
+      add(el, 'Schroeven', 'Regelwerk monteren', `${label} monteren, lijmen + schroeven (${joints} verb. × ${V.schroevenPerVerbinding}, ×${V.monteerFactor}${roof ? `, dak ×${V.dakFactor}` : ''})`, n, 'st.', n * V.prijsPer1000 / 1000, joints * jointSec * f, V.personeel);
+    };
+    // Plaat: materiaal + montage + plaatschroeven.
+    const addSheet = (el, cat, label, m2, priceM2, montageSecM2) => {
+      if (!(m2 > 0)) return;
+      add(el, cat, 'Plaatwerk', label, m2, 'm²', m2 * priceM2, m2 * montageSecM2);
+      const n = Math.ceil(m2 * P.schroevenPerM2);
+      add(el, 'Schroeven', 'Plaatwerk', `Plaatschroeven ${label.toLowerCase()}`, n, 'st.', n * P.plaatschroefPer1000 / 1000, n * P.tijdPerPlaatschroef);
+    };
+    // Snijverlies wandbalken (inkoop in handelslengtes, hele woning).
+    const waste = totals.purchaseStockMM > 0 ? totals.purchaseWasteMM / Math.max(1, totals.purchaseStockMM - totals.purchaseWasteMM) : 0;
+
+    const fmtM = (v) => v.toLocaleString('nl-NL', { maximumFractionDigits: 1 });
+    // --- Wandstukken (buiten + binnen/naad) ---
+    const seenOpenings = new Set(); // naadwand: openingen één keer (beide delen hebben dezelfde deur)
+    function wallElement(p, unitId) {
+      const el = newEl(p.element, p.label, unitId);
+      const bom = WallModel.computeBOM(p.config, p.frame);
+      const woodM3 = bom.reduce((a, b) => a + b.width * b.depth * b.length, 0) / 1e9;
+      add(el, 'Hout', 'Zagen', `Regelwerk ${bom.length} st. (incl. ${Math.round(waste * 100)}% snijverlies)`, woodM3 * (1 + waste), 'm³', woodM3 * (1 + waste) * S.hout.constructieM3, 0);
+      const cuts = bom.reduce((a, b) => a + (b.cutAngles || [0, 0]).length, 0);
+      add(el, 'Hout', 'Zagen', `${sawLabel}: ${bom.length} stuks`, cuts, 'sneden', 0, bom.reduce((a, b) => a + sawSec(b.cutAngles), 0));
+      const verticals = bom.filter(b => VERTICAL_KINDS.includes(b.kind)).length;
+      const dorpels = bom.filter(b => DORPEL_KINDS.includes(b.kind)).length;
+      const topPlates = bom.filter(b => b.kind === 'bovenregel').length;
+      addJoints(el, 2 * verticals + 2 * dorpels + Math.max(0, topPlates - 1), 'Stijlen/dorpels');
+      // Dubbele stijlen (deur, hoek: twee stijlen tegen elkaar): verticaal
+      // elke V.dubbelAfstand mm een schroef over de gezamenlijke lengte.
+      const studs = bom.filter(b => VERTICAL_KINDS.includes(b.kind)).sort((a, b) => a.x - b.x);
+      let dblScrews = 0, dblPairs = 0;
+      for (let i = 1; i < studs.length; i++) {
+        const a = studs[i - 1], b = studs[i];
+        if (b.x - a.x > (a.width + b.width) / 2 + 1) continue;
+        const ov = Math.min(a.y + a.length / 2, b.y + b.length / 2) - Math.max(a.y - a.length / 2, b.y - b.length / 2);
+        if (ov <= 0) continue;
+        dblPairs++;
+        dblScrews += Math.max(2, Math.floor(ov / V.dubbelAfstand));
+      }
+      add(el, 'Schroeven', 'Regelwerk monteren', `Dubbele stijlen ${dblPairs}× (schroef elke ${V.dubbelAfstand} mm, ×${V.monteerFactor})`, dblScrews, 'st.',
+        dblScrews * V.prijsPer1000 / 1000, dblScrews * V.volgendeSchroef * V.monteerFactor, V.personeel);
+      const M = S.montage;
+      add(el, 'Hout', 'Wanden plaatsen', `Plaatsen en vastzetten (${M.muurVastzetten} min)`, 1, 'sectie', 0, M.muurVastzetten * 60, M.muurPersoneel);
+
+      const st = p.stats || {};
+      addSheet(el, 'Plaatwerk', 'Spaanplaat', (st.spaanplaatAreaM2 || 0) + (st.spaanplaatBuitenAreaM2 || 0), P.spaanplaatM2, P.spaanplaatMontage);
+      addSheet(el, 'Plaatwerk', 'Cementplaat', (st.cementplaatAreaM2 || 0) + (st.trasraamAreaM2 || 0), P.cementplaatM2, P.cementplaatMontage);
+      const I = S.isolatie;
+      const wool = (p.specs && p.specs.voidVolumeM3) || 0;
+      add(el, 'Isolatie', 'Isoleren', 'Glaswol', wool, 'm³', wool * I.glaswolM3, wool * I.glaswolMontage);
+      const stoneIso = (st.stoneIsolatieM3 || 0) + (st.trasraamIsolatieM3 || 0);
+      add(el, 'Isolatie', 'Gevel', 'Isolatieblok steen', stoneIso, 'm³', stoneIso * I.steenIsolatieM3, 0);
+
+      const G = S.gevel;
+      const doek = st.doekAreaM2 || 0;
+      // Montage per strekkende meter wand (breedte van het stuk).
+      const doekM = doek > 0 ? p.place.width / 1000 : 0;
+      add(el, 'Gevel', 'Gevel', `Vochtdoek (${fmtM(doekM)} m¹ wand)`, doek, 'm²', doek * G.vochtdoekM2, doekM * G.vochtdoekMontageM);
+      // Rabat over het doek, boven het trasraam (gevelvlak uit WallModel).
+      const rabat = p.buitenMateriaal === 'vochtdoek' ? (st.rabatAreaM2 || 0) : 0;
+      add(el, 'Gevel', 'Gevel', 'Rabat', rabat, 'm²', rabat * G.rabatM2, rabat * G.rabatMontage);
+      const steen = (st.stoneAreaM2 || 0) + (st.trasraamStoneAreaM2 || 0);
+      add(el, 'Gevel', 'Gevel', 'Steenstrips', steen, 'm²', steen * G.steenM2, steen * G.steenMontage);
+      const latM = st.battenLengthM || 0;
+      add(el, 'Hout', 'Latwerk', `Latwerk (${st.battenCount || 0} latten inkoop, ${st.battenPieces || 0} stukken)`, latM, 'm', latM * S.hout.latwerkM,
+        (st.battenPieces || 0) * S.hout.latStukMontage + latM * S.hout.latMeterMontage);
+
+      const K = S.kozijnen;
+      const opKey = p.seam ? `iw${p.id}` : null;
+      if (!opKey || !seenOpenings.has(opKey)) {
+        if (opKey) seenOpenings.add(opKey);
+        (p.config.openings || []).forEach(op => {
+          if (op.type === 'raam') {
+            const m2 = WallModel.openingArea(op) / 1e6;
+            add(el, 'Kozijnen', 'Kozijnen', `Raam ${op.w}×${op.h}`, m2, 'm²', m2 * K.raamM2, K.montage);
+          } else {
+            add(el, 'Kozijnen', 'Kozijnen', `${op.type === 'voordeur' ? 'Voordeur' : 'Deur'} ${op.w}×${op.h}`, 1, 'st.', op.type === 'voordeur' ? K.voordeur : K.deur, K.montage);
+          }
+        });
+      }
+    }
+    parts.units.forEach(u => u.walls.forEach(w => w.pieces.forEach(p => wallElement(p, u.id))));
+    parts.interior.forEach(p => wallElement(p, p.seamUnit || null));
+
+    // --- Vloer- en dakbalken (balklaag: zagen + verbindingen) ---
+    function joistLayer(el, cd, angleDeg, what, roof) {
+      const rims = ['front', 'back'].filter(k => cd.rims && cd.rims[k]).length;
+      const n = cd.joists.length;
+      const ang = angleDeg || 0;
+      add(el, 'Hout', 'Zagen', `${sawLabel}: ${what}balken ${n} + kopbalken ${rims}`, 2 * (n + rims), 'sneden', 0, sawSec([ang, ang], n) + sawSec([0, 0], rims));
+      addJoints(el, n * V.verbindingenPerVloerbalk, `${what}balken`, roof);
+    }
+
+    parts.units.forEach(u => {
+      // Vloer
+      const fl = newEl(u.floorElement, `Unit ${u.id} vloer`, u.id);
+      const fs = u.floorSpecs;
+      add(fl, 'Hout', 'Zagen', 'Vloerbalken', fs.joistWoodM3, 'm³', fs.joistWoodM3 * S.hout.constructieM3, 0);
+      joistLayer(fl, u.floorData.calcData, 0, 'Vloer');
+      addSheet(fl, 'Plaatwerk', 'OSB vloer', fs.osbAreaM2, P.osbM2, P.osbMontage);
+      add(fl, 'Isolatie', 'Isoleren', 'Glaswol vloer', fs.voidM3, 'm³', fs.voidM3 * S.isolatie.glaswolM3, fs.voidM3 * S.isolatie.glaswolMontage);
+      // Afwerking: vloer min de voetafdruk van de wanden op deze unit.
+      const foot = u.walls.reduce((a, w) => a + w.pieces.filter(p => !p.place.baseY).reduce((b, p) => b + p.place.width * p.place.thickness, 0), 0)
+        + parts.interior.filter(p => p.seamUnit === u.id).reduce((a, p) => a + p.place.width * p.place.thickness, 0);
+      const finM2 = Math.max(0, u.rect.W * u.rect.D - foot) / 1e6;
+      add(fl, 'Vloer', 'Vloer', 'Vloerafwerking', finM2, 'm²', finM2 * S.vloer.afwerkingM2, finM2 * S.vloer.afwerkingMontage);
+
+      // Dak
+      const rf = newEl(`${u.id}-D`, `Unit ${u.id} dak`, u.id);
+      const rs = u.roof.specs, D = S.dak;
+      add(rf, 'Hout', 'Zagen', 'Dakbalken', rs.joistWoodM3, 'm³', rs.joistWoodM3 * S.hout.constructieM3, 0);
+      u.roof.planes.forEach((pl, i) => joistLayer(rf, pl.data.calcData, Math.round(Math.abs(pl.theta || 0) * 180 / Math.PI * 10) / 10, u.roof.planes.length > 1 ? `Dak ${i + 1} ` : 'Dak', true));
+      // Wolfsdak: bovenste deel (sporen, hoekkepers, nokbalk, kopbalken).
+      const cap = u.roof.unitRoof && u.roof.unitRoof.cap;
+      if (cap) {
+        const n = cap.beams.length;
+        add(rf, 'Hout', 'Zagen', `${sawLabel}: wolfseinden ${n} balken`, 2 * n, 'sneden', 0, cap.beams.reduce((t, bm) => t + sawSec([bm.angle, bm.angle], 1), 0));
+        addJoints(rf, n * V.verbindingenPerVloerbalk, 'wolfseindbalken', true);
+      }
+      addSheet(rf, 'Plaatwerk', 'OSB plafond', rs.osbAreaM2, P.osbM2, P.osbMontage);
+      addSheet(rf, 'Plaatwerk', `Dakbeschot OSB ${RoofModel.BESCHOT_MM} mm`, rs.beschotM2 || 0, D.beschotM2, D.beschotMontage);
+      add(rf, 'Isolatie', 'Isoleren', 'Glaswol dak', rs.voidM3, 'm³', rs.voidM3 * S.isolatie.glaswolM3, rs.voidM3 * S.isolatie.glaswolMontage);
+      add(rf, 'Dak', 'Dak', 'Dakleer (EPDM)', rs.dakleerM2 || 0, 'm²', (rs.dakleerM2 || 0) * D.dakleerM2, (rs.dakleerM2 || 0) * D.dakleerMontage);
+      add(rf, 'Dak', 'Dak', 'Riet', rs.rietM2 || 0, 'm²', (rs.rietM2 || 0) * D.rietM2, (rs.rietM2 || 0) * D.rietMontage);
+      add(rf, 'Dak', 'Dak', 'Felsplaten (staande naad)', rs.felsM2 || 0, 'm²', (rs.felsM2 || 0) * D.felsM2, (rs.felsM2 || 0) * D.felsMontage);
+    });
+
+    // --- Woning-breed: dakrand, sandwichpanelen, verlichting ---
+    const wo = newEl('WON', 'Woning (dakrand, fundering, verlichting)', null);
+    const D = S.dak;
+    if (totals.roofEdge) {
+      const e = totals.roofEdge;
+      add(wo, 'Dak', 'Dak', `Boeideel ${e.fasciaHeight} mm`, e.fasciaLengthM, 'm', e.fasciaLengthM * D.boeideelM, e.fasciaLengthM * D.boeideelMontage);
+      add(wo, 'Dak', 'Dak', 'Onderplaat boeideel', e.soffitM2, 'm²', e.soffitM2 * D.onderplaatM2, e.soffitM2 * D.onderplaatMontage);
+      add(wo, 'Dak', 'Dak', `Daktrim ${e.trimHeight} mm`, e.trimLengthM, 'm', e.trimLengthM * D.daktrimM, e.trimLengthM * D.daktrimMontage);
+    }
+    if (parts.sandwich) {
+      const sw = parts.sandwich;
+      add(wo, 'Vloer', 'Vloer', `Sandwichpanelen (${sw.panelCount} platen)`, sw.areaM2, 'm²', sw.areaM2 * S.vloer.sandwichM2, sw.panelCount * S.vloer.sandwichMontage);
+    }
+    const L = S.verlichting, lm = totals.lamps;
+    add(wo, 'Verlichting', 'Verlichting', 'Gevellampen', lm.total, 'st.', lm.total * L.gevellamp, lm.total * L.montage);
+    const spots = totals.roofEdge ? totals.roofEdge.spots : 0;
+    add(wo, 'Verlichting', 'Verlichting', 'Boeideel-spots', spots, 'st.', spots * L.boeideelSpot, spots * L.montage);
+    add(wo, 'Verlichting', 'Verlichting', 'Binnenspots', lm.indoor, 'st.', lm.indoor * L.binnenspot, lm.indoor * L.montage);
+
+    // --- Elektra (ElektraModel): per unit de leidingen (strekkende meters
+    // per type: buis + draad per ader, of XMvK), boorgaten, steekverbinders,
+    // dozen en aansluitingen; meterkast, groepen en keuring bij de unit waar
+    // de meterkast hangt. Arbeid met E.personeel man.
+    const elk = parts.elektra, E = S.elektra;
+    if (elk && elk.enabled) {
+      const unitIds = new Set(parts.units.map(u => u.id)), elOf = {};
+      const elFor = (uid) => {
+        const id = unitIds.has(uid) ? uid : null, k = id || '-';
+        return elOf[k] || (elOf[k] = newEl(id ? `${id}-EL` : 'EL', id ? `Unit ${id} elektra` : 'Elektra', id));
+      };
+      const ea = (uid, label, qty, unit, mat, sec) => add(elFor(uid), 'Elektra', 'Elektra', label, qty, unit, mat, sec, E.personeel);
+      const mkUnit = elk.meterkast ? elk.meterkast.unitId : null;
+      const groupUnit = (nr) => (elk.groups.find(g => g.nr === nr) || {}).unitId || mkUnit;
+      const buisPrijs = (d) => d >= 25 ? E.buis25M : d >= 19 ? E.buis19M : E.buis16M;
+      const agg = {};
+      elk.runs.forEach(r => {
+        const uid = groupUnit(r.group), a = agg[uid] = agg[uid] || { types: {}, holes: 0, cross: {} };
+        a.types[r.type] = (a.types[r.type] || 0) + r.lengthMM / 1000;
+        a.holes += r.holes || 0;
+        if (r.crossings) { const n = ElektraModel.cableInfo(r.type).cores.length; a.cross[n] = (a.cross[n] || 0) + r.crossings; }
+      });
+      Object.keys(agg).forEach(uid => {
+        const a = agg[uid];
+        Object.keys(a.types).sort().forEach(type => {
+          const c = ElektraModel.cableInfo(type), m = a.types[type];
+          if (c.conduit) {
+            const draad = c.mm2 >= 2.5 ? E.draad25M : E.draad15M;
+            ea(uid, `${c.label}: ${c.use.toLowerCase()} (buis + ${c.cores.length} aders)`, m, 'm', m * (buisPrijs(c.conduit) + c.cores.length * draad), m * (E.buisLeggen + E.draadTrekken));
+          } else ea(uid, `${c.label}: ${c.use.toLowerCase()}`, m, 'm', m * E.xmvkM, m * E.kabelLeggen);
+        });
+        ea(uid, `Boorgaten stijlen/regels/balken (${E.boorgat} s per gat)`, a.holes, 'st.', 0, a.holes * E.boorgat);
+        Object.keys(a.cross).forEach(n => {
+          const k = a.cross[n];
+          ea(uid, `Steekverbinder module-naad ${n}-polig`, k, 'set', k * (Number(n) >= 5 ? E.steekverbinder5 : E.steekverbinder3), k * E.steekverbinderMontage);
+        });
+      });
+      const count = (list, uid) => list.filter(x => x.unitId === uid).length;
+      parts.units.forEach(u => {
+        const uid = u.id;
+        const nSw = count(elk.switches, uid), combos = elk.combos.filter(c => c.unitId === uid);
+        const raam1 = combos.filter(c => c.switches.length === 1).length, raam2 = combos.length - raam1;
+        ea(uid, `Schakelaars (${raam1}× 1-voudig, ${raam2}× 2-voudig raam)`, nSw, 'st.',
+          nSw * (E.schakelaar + E.inbouwdoos) + raam1 * E.afdekraam1 + raam2 * E.afdekraam2, nSw * (E.doosPlaatsen + E.afmonteren));
+        const nW = count(elk.wcds, uid);
+        ea(uid, 'Wandcontactdozen dubbel (2 inbouwdozen)', nW, 'st.', nW * (E.wcdDubbel + 2 * E.inbouwdoos), nW * (2 * E.doosPlaatsen + E.afmonteren));
+        elk.apps.filter(a => a.unitId === uid).forEach(a => {
+          const price = a.app === 'koken' ? E.perilex : a.app === 'warmtepomp' ? E.werkschakelaar : E.wcdEnkel;
+          ea(uid, `Aansluitpunt ${a.label.toLowerCase()}`, 1, 'st.', price + E.inbouwdoos, E.doosPlaatsen + E.afmonteren);
+        });
+        const nV = count(elk.floorWcds, uid);
+        ea(uid, 'Vloerdoos met dubbele wcd', nV, 'st.', nV * E.vloerdoosSt, nV * (E.vloerdoos + E.afmonteren));
+        const nB = count(elk.boxes, uid), nKl = nB * 3 + nSw + nW;
+        ea(uid, `Verdeeldozen plafond (+ ${nKl} lasklemmen)`, nB, 'st.', nB * E.verdeeldoosSt + nKl * E.lasklem, nB * E.verdeeldoos);
+        const nSpot = elk.switches.filter(sw => sw.unitId === uid).reduce((t, sw) => t + sw.lamps.filter(l => l.kind === 'binnenspot').length, 0);
+        ea(uid, 'Spotdozen plafond (luchtdicht)', nSpot, 'st.', nSpot * E.spotdoosSt, nSpot * E.spotdoos);
+        const nDv = elk.runs.filter(r => r.type === 'buiten' && r.from.startsWith('VD') && groupUnit(r.group) === uid).length;
+        ea(uid, 'Kabeldoorvoer naar buiten', nDv, 'st.', nDv * E.doorvoer, 0);
+      });
+      if (elk.meterkast) {
+        const g1 = elk.groups.filter(g => (g.poles || 1) === 1).length, g2 = elk.groups.length - g1;
+        ea(mkUnit, `Groepenkast 3×25 A: kast, hoofdschakelaar, ${elk.rcdCount} aardlek`, 1, 'st.', E.kast + E.hoofdschakelaar + elk.rcdCount * E.aardlek, E.kastMontage);
+        ea(mkUnit, `Groepen: ${g1}× automaat 1P+N${g2 ? `, ${g2}× 2-fase` : ''}`, elk.groups.length, 'groep', g1 * E.automaat + g2 * E.automaat2f, elk.groups.length * E.groepMontage);
+        ea(mkUnit, 'Meten, testen en opleveren', 1, 'woning', 0, E.keuring);
+      }
+    }
+
+    // --- Optellen ---
+    const sumLines = (lines) => lines.reduce((a, l) => ({ mat: a.mat + l.mat, sec: a.sec + l.sec, clock: a.clock + l.clock }), { mat: 0, sec: 0, clock: 0 });
+    elements.forEach(el => Object.assign(el, sumLines(el.lines)));
+    const byKey = (key, order) => {
+      const m = new Map();
+      elements.forEach(el => el.lines.forEach(l => {
+        const r = m.get(l[key]) || { name: l[key], mat: 0, sec: 0 };
+        r.mat += l.mat; r.sec += l.sec;
+        m.set(l[key], r);
+      }));
+      return Array.from(m.values()).sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name));
+    };
+    // Kostprijs van materiaal + directe arbeidstijd (s), overal dezelfde
+    // regels: materiaal + verlies + klein materiaal; uren + indirect + QA
+    // tegen het uurloon (manuren); afschrijving/slijtage/huisvesting per
+    // productie-uur = doorlooptijd (klokuren, niet x personeel) + indirect, zonder QA.
+    const O = S.opslag, B = S.bedrijf, A = S.arbeid;
+    const perHour = B.machines + B.slijtage + B.huisvesting;
+    const split = (sec) => {
+      const direct = sec / 3600, indirect = direct * A.toeslagUren / 100;
+      const qa = (direct + indirect) * A.qa / 100; // QA: % van de totale werktijd
+      return { direct, indirect, qa, total: direct + indirect + qa };
+    };
+    const prodHours = (clock) => clock / 3600 * (1 + A.toeslagUren / 100);
+    const costOf = (r) => mat0(r.mat) + split(r.sec).total * A.uurloon + prodHours(r.clock) * perHour;
+    const mat0 = (mat) => mat * (1 + (O.verlies + O.klein) / 100);
+    elements.forEach(el => { el.kostprijs = costOf(el); });
+
+    const units = parts.units.map(u => {
+      const r = Object.assign({ id: u.id }, sumLines(elements.filter(el => el.unit === u.id).flatMap(el => el.lines)));
+      r.transport = B.transportUnit;
+      r.kostprijs = costOf(r) + r.transport;
+      return r;
+    });
+    const rest = sumLines(elements.filter(el => el.unit === null).flatMap(el => el.lines));
+    units.push(Object.assign({ id: null, transport: 0 }, rest, { kostprijs: costOf(rest) + B.kraan }));
+
+    const all = sumLines(elements.flatMap(el => el.lines));
+    const h = split(all.sec);
+    h.prod = prodHours(all.clock);
+    const n = parts.units.length;
+    const pct = (v) => String(v).replace('.', ',') + '%';
+    const eur0 = (v) => eur(v);
+    const posts = [
+      ['Materiaal', all.mat],
+      [`Materiaalverlies ${pct(O.verlies)}`, all.mat * O.verlies / 100],
+      [`Klein materiaal ${pct(O.klein)}`, all.mat * O.klein / 100],
+      [`Arbeid ${uur(h.total)} manuur × ${eur0(A.uurloon)} (incl. bezetting, indirect en QA)`, h.total * A.uurloon],
+      [`Afschrijving machines ${uur(h.prod)} productie-uur × ${eur(B.machines, 2)}`, h.prod * B.machines],
+      [`Slijtage gereedschap ${uur(h.prod)} productie-uur × ${eur(B.slijtage, 2)}`, h.prod * B.slijtage],
+      [`Huisvesting productiehal ${uur(h.prod)} productie-uur × ${eur(B.huisvesting, 2)}`, h.prod * B.huisvesting],
+      [`Transport ${n} unit${n === 1 ? '' : 's'} × ${eur0(B.transportUnit)}`, n * B.transportUnit],
+      ['Kraan plaatsen', B.kraan]
+    ];
+    const kostprijs = posts.reduce((a, p) => a + p[1], 0);
+    const algemeen = kostprijs * O.algemeen / 100;
+    const marge = (kostprijs + algemeen) * O.marge / 100;
+    const exBtw = kostprijs + algemeen + marge;
+    const btw = exBtw * O.btw / 100;
+    // Overzicht als rijen (kaart en PDF): sub = subtotaal.
+    const rows = posts.filter(p => p[1] > 0).map(([label, amount]) => ({ label, amount }))
+      .concat([
+        { label: 'Kostprijs', amount: kostprijs, sub: true },
+        { label: `Algemene kosten ${pct(O.algemeen)}`, amount: algemeen },
+        { label: `Marge ${pct(O.marge)}`, amount: marge },
+        { label: 'Totaal excl. btw', amount: exBtw, sub: true },
+        { label: `Btw ${pct(O.btw)}`, amount: btw }
+      ]);
+    return {
+      settings: S, elements, units,
+      saw: Object.assign(saw, { handSec: saw.robotSec * Z.handFactor, method: Z.methode }),
+      categories: byKey('cat', CAT_ORDER), activities: byKey('act', ACT_ORDER),
+      summary: { mat: all.mat, hoursDirect: h.direct, hoursIndirect: h.indirect, hoursQa: h.qa, hours: h.total, kostprijs, exBtw, btw, inclBtw: exBtw + btw, rows }
+    };
+  }
+
+  // Bedrag als "€ 1.234" (of met decimalen).
+  function eur(n, decimals = 0) {
+    return '€ ' + n.toLocaleString('nl-NL', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+  }
+  // Uren als decimaal getal, bijv. "12,5".
+  function uur(hours) {
+    return hours.toLocaleString('nl-NL', { minimumFractionDigits: 1, maximumFractionDigits: 1 });
+  }
+
+  return { STORAGE_KEY, defaultValues, getSettings, saveSettings, resetSettings, onChange, exportJson, importJson, compute, eur, uur };
+})();

js/cost/cost-settings.js

@@ -0,0 +1,124 @@
+/*!
+ * Tectum
+ * Copyright © 2026 Machiel Heinen.
+ * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
+ * Zie LICENTIE.md.
+ */
+// ============================================================
+// cost/cost-settings.js — CostSettings: venster "Kosten & tijden". Bouwt
+// het formulier automatisch uit COST_DEFAULTS (elk item een invoerveld),
+// opslaan via CostModel.saveSettings (localStorage). Exporteren/importeren
+// als JSON-bestand; "Standaard" zet alle velden terug op cost-defaults.js.
+// Alleen UI; de rekenregels staan in CostModel.
+// ============================================================
+
+window.CostSettings = (() => {
+  let overlay = null;
+
+  const esc = UI.esc;
+
+  function build() {
+    overlay = document.createElement('div');
+    overlay.id = 'cost-settings-overlay';
+    overlay.innerHTML = `
+      <div id="cost-settings-modal">
+        <div class="modal-header">
+          <h2>Kosten &amp; tijden</h2>
+          <button type="button" class="modal-close-x" data-cs="cancel">&times;</button>
+        </div>
+        <div class="cs-body"></div>
+        <div class="material-info">Bedragen excl. btw. Opslaan bewaart in deze browser én downloadt een JSON-bestand; een gewijzigd veld is gemarkeerd. Standaardwaarden staan in js/cost/cost-defaults.js.</div>
+        <div class="modal-footer">
+          <button type="button" class="io-btn" data-cs="reset">Standaard</button>
+          <button type="button" class="io-btn" data-cs="export">Exporteren&hellip;</button>
+          <button type="button" class="io-btn" data-cs="import">Importeren&hellip;</button>
+          <span style="flex:1"></span>
+          <button type="button" class="io-btn" data-cs="cancel">Annuleren</button>
+          <button type="button" class="material-toggle-btn active" data-cs="save" style="flex:none; padding:6px 18px;">Opslaan</button>
+        </div>
+        <input type="file" accept=".json,application/json" style="display:none">
+      </div>`;
+    document.body.appendChild(overlay);
+    overlay.addEventListener('click', (e) => {
+      if (e.target === overlay) return close();
+      const btn = e.target.closest('[data-cs]');
+      if (!btn) return;
+      const a = btn.dataset.cs;
+      if (a === 'cancel') close();
+      else if (a === 'save') { // ook als JSON-bestand (om te delen/bewaren)
+        const v = readForm();
+        CostModel.saveSettings(v);
+        download(CostModel.exportJson(v));
+        close();
+      }
+      else if (a === 'reset') fill(CostModel.defaultValues());
+      else if (a === 'export') download(CostModel.exportJson(readForm()));
+      else if (a === 'import') overlay.querySelector('input[type=file]').click();
+    });
+    overlay.addEventListener('input', markChanged);
+    overlay.querySelector('input[type=file]').addEventListener('change', (e) => {
+      const file = e.target.files[0];
+      e.target.value = '';
+      if (!file) return;
+      file.text().then(txt => fill(CostModel.importJson(JSON.parse(txt))))
+        .catch(err => alert('Importeren mislukt: ' + err.message));
+    });
+  }
+
+  function renderForm() {
+    const body = overlay.querySelector('.cs-body');
+    body.innerHTML = Object.entries(window.COST_DEFAULTS).map(([g, grp]) => `
+      <section class="cs-group">
+        <h3>${esc(grp.label)}</h3>
+        ${Object.entries(grp.items).map(([k, it]) => `
+          <label class="cs-row">
+            <span class="cs-label">${esc(it.label)}</span>
+            ${it.options
+              ? `<select data-g="${g}" data-k="${k}">${Object.entries(it.options).map(([v, t]) => `<option value="${esc(v)}">${esc(t)}</option>`).join('')}</select>`
+              : `<input type="number" step="any" data-g="${g}" data-k="${k}">`}
+            <span class="cs-unit">${esc(it.unit || '')}</span>
+          </label>`).join('')}
+      </section>`).join('');
+  }
+
+  function fill(values) {
+    overlay.querySelectorAll('[data-g]').forEach(el => { el.value = values[el.dataset.g][el.dataset.k]; });
+    markChanged();
+  }
+  function readForm() {
+    const v = CostModel.getSettings();
+    overlay.querySelectorAll('[data-g]').forEach(el => {
+      const it = window.COST_DEFAULTS[el.dataset.g].items[el.dataset.k];
+      const val = it.options ? el.value : parseFloat(el.value);
+      if (it.options || isFinite(val)) v[el.dataset.g][el.dataset.k] = val;
+    });
+    return v;
+  }
+  // Afwijkend van de standaard: gemarkeerd.
+  function markChanged() {
+    const def = CostModel.defaultValues();
+    overlay.querySelectorAll('[data-g]').forEach(el => {
+      const d = def[el.dataset.g][el.dataset.k];
+      el.closest('.cs-row').classList.toggle('changed', typeof d === 'number' ? parseFloat(el.value) !== d : el.value !== d);
+    });
+  }
+
+  function download(obj) {
+    const blob = new Blob([JSON.stringify(obj, null, 2)], { type: 'application/json' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = `tectum-kosten-${new Date().toISOString().slice(0, 10)}.json`;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+  }
+
+  function open() {
+    if (!overlay) build();
+    renderForm(); // opnieuw: nieuwe items in cost-defaults.js verschijnen vanzelf
+    fill(CostModel.getSettings());
+    overlay.classList.add('open');
+  }
+  function close() { if (overlay) overlay.classList.remove('open'); }
+
+  return { open, close };
+})();

js/elektra/elektra-model.js

@@ -0,0 +1,954 @@
+/*!
+ * Tectum
+ * Copyright © 2026 Machiel Heinen.
+ * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
+ * Zie LICENTIE.md.
+ */
+// ============================================================
+// elektra/elektra-model.js — ElektraModel: ENIGE bron van de elektra-
+// installatie van een woning (eerste versie, automatisch). Geen DOM.
+//
+// Woning-breed (settings.elektra). Alles wordt afgeleid uit de woning:
+//  - Meterkast (3×25 A, 3-fase) als kast aan de binnenzijde van een wand
+//    in de unit met de voordeur, zo dicht mogelijk bij de voordeur, vrij van
+//    openingen (incl. raamwerk) en van de schakelaars.
+//  - Schakelaarcombinatie naast de voordeur (binnenzijde, 1500 mm), aan de
+//    slotzijde (deur draait links, KozijnModel; anders de scharnierzijde):
+//    A = binnenlicht van die unit, B = buitenlicht (boeideel-spots en
+//    gevellampen). Elke andere unit krijgt een schakelaar naast de deur
+//    waardoor je hem binnenkomt (naadwand, anders een buitendeur), C, D, ...
+//    Elke lamp/spot krijgt de letter van zijn schakelaar (p.letter).
+//  - Wandcontactdozen (dubbel, 400 mm): wcdPerUnit per unit, zo ver mogelijk
+//    uit elkaar langs de binnenzijde van de wanden.
+//  - Apparaten (settings.apparaten, APPLIANCES) met elk een eigen groep:
+//    kookgroep (perilex, 2-fase, 5×2,5), wasmachine, droger, warmtepomp,
+//    optioneel oven en vaatwasser. Keukenapparaten bij elkaar in de grootste
+//    andere unit, de rest naast de meterkast (nog geen keuken in het model).
+//  - Handmatig verplaatsen (settings.place[key] = { element, side, u, y }):
+//    key 'mk' (meterkast), 'sw:<unit>' (schakelaars), 'wcd:<unit>:<nr>',
+//    'app:<apparaat>'. element = wandstuk, side = -1 (kamerzijde; bij een
+//    binnenwand ±1), u = hart langs de wand (wand-x), y = hoogte (optioneel).
+//    Handmatige plekken gaan voor: de automatische plaatsing wijkt uit.
+//    Wandvlakken: binnenzijde van buitenwanden en naadwanddelen, beide
+//    zijden van binnenwanden (in de unit waar hun midden ligt).
+//  - Vloer-wcd's (settings.vloerWcd = [{ id, unitId, x, z }], x/z vanaf de
+//    noordwesthoek van de unit): vloerdoos met dubbele wcd (bijv. bij de
+//    eettafel), op de wcd-groep van die unit, leiding door de vloer.
+//  - Groepen: per unit een lichtgroep (B10, 1,5 mm²) en een wcd-groep
+//    (B16, 2,5 mm²); het buitenlicht op een eigen groep (B10, XMvK 3×1,5),
+//    op dezelfde aardlek als het binnenlicht van de voordeur-unit (zelfde
+//    schakeldoos). Fasen L1/L2/L3 om en om; aardlekschakelaars (30 mA,
+//    max. 4 groepen elk, minstens 2) om en om, zodat licht en wcd van één
+//    unit niet op dezelfde aardlek zitten.
+//
+// Leidingen (HSB): binnen VD-draad in flexibele installatiebuis, via de
+// stijlen (zelfde wand) of via het plafond (andere wand/plafondpunt): eerst
+// verticaal in de wand naar het plafond, dan haaks (x, dan z) naar het
+// volgende punt. Per schakeldoos en groep een luchtdichte verdeeldoos in het
+// plafond erboven (groepen niet gemengd in één verdeeldoos); vandaar de schakeldraden omlaag en de lampen doorgelust volgens
+// een minimale opspannende boom (kortste totale lengte). Buitenverlichting in
+// XMvK. Een leiding over een naad tussen units krijgt een steekverbinder
+// (modules worden los gebouwd en op de bouwplaats gekoppeld).
+// Elke leiding: + reserve (lus in de doos, meterkast extra) en + slack %.
+// Boorgaten per leiding (run.holes, voor de kosten): in een wand de stijlen
+// (horizontaal stuk) of de regels/dorpels (verticaal stuk) die de buis
+// kruist (WallModel.computeBOM), in plafond en vloer de balken dwars op de
+// buis (balkposities van het dek), een gat in de vloerplaat waar een buis
+// de vloer in gaat, en een doorvoer naar buiten voor de buitenverlichting.
+// Buizen houden onderling minstens CLEAR (50 mm) vrij: na het routeren
+// schuift elk te dicht (evenwijdig, overlappend) padstuk naar een eigen baan
+// met een korte knik ervoor en erna (separateRuns). Alleen het laatste stuk
+// naar de meterkast is gebundeld: de buizen komen tegen elkaar aan de kast
+// binnen. Leidingen naar een vloer-wcd lopen in de vloer (onder de OSB).
+//
+// Plain script, geladen na lighting-model.js en unit-model.js.
+// ============================================================
+
+window.ElektraModel = (() => {
+  const DEFAULT_SETTINGS = {
+    enabled: true,
+    meterkast: { w: 600, h: 900, d: 250, y: 1000 }, // mm; y = onderkant boven vloer
+    switchHeight: 1500,   // hart schakelaar boven vloer
+    wcdHeight: 400,       // hart wcd boven vloer
+    wcdPerUnit: 2,        // dubbele wcd per unit
+    slack: 10,            // % extra op elke leiding
+    reserve: 300,         // mm per leiding (lussen in de dozen)
+    meterkastReserve: 500, // mm extra per leiding vanuit de meterkast
+    apparaten: { koken: true, wasmachine: true, droger: true, warmtepomp: true, oven: false, vaatwasser: false },
+    place: {},            // handmatige plekken (zie boven)
+    vloerWcd: []          // vloer-wcd's (zie boven)
+  };
+  const CLEAR = 50;       // min. vrije ruimte tussen buizen
+  const FLOOR_DEPTH = 100; // buis in de vloer: zoveel onder de bovenkant vloer
+  // Apparaten met een eigen groep. code = label op de plattegrond (twee
+  // letters: geen verwarring met de schakelaarletters).
+  const APPLIANCES = {
+    koken: { label: 'Kookgroep (perilex)', code: 'KK', breaker: '2× B16', poles: 2, cable: 'koken', height: 600, zone: 'keuken', material: 'Perilex-wandcontactdoos (2-fase)' },
+    oven: { label: 'Oven', code: 'OV', breaker: 'B16', cable: 'wcd', height: 600, zone: 'keuken', material: 'Wandcontactdoos enkel met randaarde' },
+    vaatwasser: { label: 'Vaatwasser', code: 'VW', breaker: 'B16', cable: 'wcd', height: 600, zone: 'keuken', material: 'Wandcontactdoos enkel met randaarde' },
+    wasmachine: { label: 'Wasmachine', code: 'WM', breaker: 'B16', cable: 'wcd', height: 1100, zone: 'techniek', material: 'Wandcontactdoos enkel met randaarde' },
+    droger: { label: 'Droger', code: 'DR', breaker: 'B16', cable: 'wcd', height: 1100, zone: 'techniek', material: 'Wandcontactdoos enkel met randaarde' },
+    warmtepomp: { label: 'Warmtepomp', code: 'WP', breaker: 'B16', cable: 'wcd', height: 1200, zone: 'techniek', material: 'Werkschakelaar 2-polig (warmtepomp)' }
+  };
+  const BOX_PITCH = 71;   // h.o.h. inbouwdozen in een combinatie
+  const PLATE = 80;       // afdekraam (vierkant)
+  const WCD_W = 150;      // afdekraam dubbele wcd
+  const DOOR_GAP = 100;   // kozijnstijl -> hart eerste doos (bovenop de stijl)
+  const VD_OFFSET = 150;  // verdeeldoos: zoveel de kamer in vanaf het wandvlak
+
+  // Leidingtypen. cores: aders (kleur via CORE_COLORS); conduit: buis-Ø (mm),
+  // 0 = kabel zonder buis.
+  const CORE_COLORS = { L: 'bruin', L2: 'zwart', L3: 'grijs', N: 'blauw', PE: 'geel/groen', S: 'zwart' };
+  const CABLES = {
+    licht: { label: 'VD 3×1,5 mm² in buis Ø16', use: 'Verlichting: voeding en doorlus', mm2: 1.5, cores: ['L', 'N', 'PE'], conduit: 16 },
+    wcd: { label: 'VD 3×2,5 mm² in buis Ø19', use: 'Wcd en apparaten', mm2: 2.5, cores: ['L', 'N', 'PE'], conduit: 19 },
+    koken: { label: 'VD 5×2,5 mm² in buis Ø25', use: 'Kookgroep (perilex, 2-fase)', mm2: 2.5, cores: ['L', 'L2', 'L3', 'N', 'PE'], conduit: 25 },
+    buiten: { label: 'XMvK 3×1,5 mm²', use: 'Buitenverlichting (boeideel/gevel)', mm2: 1.5, cores: ['L', 'N', 'PE'], conduit: 0 }
+  };
+  // Schakeldraden verdeeldoos -> schakeldoos: fase + één per schakelaar.
+  function cableInfo(key) {
+    if (CABLES[key]) return CABLES[key];
+    const m = /^schakel(\d)$/.exec(key);
+    const n = m ? Number(m[1]) : 2;
+    return { label: `VD ${n}×1,5 mm² in buis Ø16`, use: `Schakeldraden (${n - 1} schakelaar${n > 2 ? 's' : ''})`, mm2: 1.5, cores: ['L'].concat(Array(n - 1).fill('S')), conduit: 16 };
+  }
+
+  function normalizeSettings(settings) {
+    const i = settings || {};
+    const s = Object.assign({}, DEFAULT_SETTINGS, i);
+    s.meterkast = Object.assign({}, DEFAULT_SETTINGS.meterkast, i.meterkast || {});
+    s.apparaten = Object.assign({}, DEFAULT_SETTINGS.apparaten, i.apparaten || {});
+    s.place = Object.assign({}, i.place || {});
+    s.vloerWcd = Array.isArray(i.vloerWcd) ? i.vloerWcd.filter(o => o && o.unitId).map(o => Object.assign({}, o)) : [];
+    s.enabled = s.enabled !== false;
+    // v2: schakelaars 1050 -> 1500 mm, wcd 300 -> 400 mm (oude standaard).
+    if (!i.v) {
+      if (i.switchHeight === 1050) s.switchHeight = DEFAULT_SETTINGS.switchHeight;
+      if (i.wcdHeight === 300) s.wcdHeight = DEFAULT_SETTINGS.wcdHeight;
+    }
+    s.v = 2;
+    return s;
+  }
+
+  // ------------------------------------------------------------
+  // Wandvlakken (binnenzijde) waarop iets gemonteerd kan worden.
+  // ------------------------------------------------------------
+  // Zijde van een wandstuk (side -1 = lokaal -Z: bij buitenwand en
+  // naadwanddeel de kamerkant; binnenwand: beide zijden), begrensd tot de
+  // binnenruimte van de unit.
+  function faceOf(p, inner, u, side) {
+    const pl = p.place, W = pl.width, lz = side * pl.thickness / 2;
+    const a = UnitModel.localToWorld(pl, -W / 2, lz), b = UnitModel.localToWorld(pl, W / 2, lz);
+    const axis = Math.abs(b.x - a.x) > Math.abs(b.z - a.z) ? 'x' : 'z';
+    const uOf = (v) => (v - a[axis]) / (b[axis] - a[axis]) * W;
+    const ua = uOf(axis === 'x' ? inner.x0 : inner.z0), ub = uOf(axis === 'x' ? inner.x1 : inner.z1);
+    return {
+      piece: p, unit: u, a, b, axis, W, lz,
+      u0: Math.max(0, Math.min(ua, ub)), u1: Math.min(W, Math.max(ua, ub)),
+      n: { x: side * Math.sin(pl.rotY), z: side * Math.cos(pl.rotY) }, // naar de kamer
+      side,
+      sw: p.config.studWidth || 45,
+      reserved: [] // [{ a, b, y0, y1 }] al bezet (meterkast, schakelaars, wcd)
+    };
+  }
+  function facesOf(u, interior) {
+    const inner = LightingModel.unitInnerRect(u, interior);
+    const pieces = [];
+    u.walls.forEach(w => w.pieces.forEach(p => { if (!p.baseY) pieces.push(p); }));
+    interior.filter(p => p.seamUnit === u.id).forEach(p => pieces.push(p));
+    const list = pieces.map(p => faceOf(p, inner, u, -1));
+    const r = u.rect;
+    interior.filter(p => !p.seam && p.place.cx >= r.x0 && p.place.cx <= r.x1 && p.place.cz >= r.z0 && p.place.cz <= r.z1)
+      .forEach(p => list.push(faceOf(p, inner, u, -1), faceOf(p, inner, u, 1)));
+    return list.filter(f => f.u1 - f.u0 > 200);
+  }
+  // Punt op een wandvlak: u langs de wand (0..W), y boven de vloer, off de
+  // kamer in (negatief = de wand in).
+  function facePoint(f, u, y, off) {
+    const q = UnitModel.localToWorld(f.piece.place, u - f.W / 2, f.lz + f.side * (off || 0));
+    return { x: q.x, y: f.piece.place.floorTop + y, z: q.z };
+  }
+  const uAt = (f, q) => (q[f.axis] - f.a[f.axis]) / (f.b[f.axis] - f.a[f.axis]) * f.W;
+  // Vrije stukken van een vlak tussen hoogte y0..y1: openingen (incl.
+  // raamwerk + margin) en wat al bezet is eraf, edge vrij van de uiteinden.
+  function freeOn(f, y0, y1, margin, edge) {
+    const blocked = [];
+    f.piece.config.openings.forEach(op => {
+      if (op.y < y1 && WallModel.openingTopMax(op) > y0) blocked.push([op.x - f.sw - margin, op.x + op.w + f.sw + margin]);
+    });
+    f.reserved.forEach(r => { if (r.y0 < y1 && r.y1 > y0) blocked.push([r.a, r.b]); });
+    return LightingModel.freeIntervals(f.u0 + edge, f.u1 - edge, blocked);
+  }
+  // Dichtstbijzijnde vrije plek (breedte w) op een van de vlakken bij target
+  // (wereld {x, z}). Geeft { f, u, d } of null.
+  function nearestFree(faces, target, w, y0, y1, margin, edge) {
+    let best = null;
+    faces.forEach(f => freeOn(f, y0, y1, margin, edge).forEach(([a, b]) => {
+      if (b - a < w) return;
+      const u = Math.max(a + w / 2, Math.min(b - w / 2, uAt(f, target)));
+      const q = facePoint(f, u, 0, 0);
+      const d = Math.hypot(q.x - target.x, q.z - target.z);
+      if (!best || d < best.d) best = { f, u, d };
+    }));
+    return best;
+  }
+
+  // Schakelaarcombinatie van n dozen naast opening op op vlak f: eerst de
+  // slotzijde (rechts van de opening in wand-x), dan de scharnierzijde.
+  // Geeft de doos-centra (u, dichtst bij de deur eerst) of null.
+  function besideDoor(f, op, n, height) {
+    const width = PLATE + (n - 1) * BOX_PITCH;
+    const free = freeOn(f, height - PLATE / 2, height + PLATE / 2, 0, f.sw);
+    const fits = (lo, hi) => free.some(([a, b]) => lo >= a - 0.5 && hi <= b + 0.5);
+    const r0 = op.x + op.w + f.sw + DOOR_GAP;
+    if (fits(r0 - PLATE / 2, r0 - PLATE / 2 + width)) return Array.from({ length: n }, (_, i) => r0 + i * BOX_PITCH);
+    const l0 = op.x - f.sw - DOOR_GAP;
+    if (fits(l0 + PLATE / 2 - width, l0 + PLATE / 2)) return Array.from({ length: n }, (_, i) => l0 - i * BOX_PITCH);
+    return null;
+  }
+
+  // ------------------------------------------------------------
+  // Routes. Knooppunt: { x, y, z, mount: 'wand'|'plafond'|'buiten', face?, mk? }.
+  // ------------------------------------------------------------
+  function makeRouter(units) {
+    const unitAt = (x, z) => units.find(u => x >= u.rect.x0 - 1 && x <= u.rect.x1 + 1 && z >= u.rect.z0 - 1 && z <= u.rect.z1 + 1) || null;
+    const ceilAt = (x, z) => {
+      let u = unitAt(x, z);
+      if (!u) u = units.reduce((best, c) => {
+        const dx = Math.max(c.rect.x0 - x, 0, x - c.rect.x1), dz = Math.max(c.rect.z0 - z, 0, z - c.rect.z1);
+        const d = Math.hypot(dx, dz);
+        return !best || d < best.d ? { u: c, d } : best;
+      }, null).u;
+      const r = u.rect;
+      return u.roof.ceilingAt(Math.max(r.x0 + 1, Math.min(r.x1 - 1, x)), Math.max(r.z0 + 1, Math.min(r.z1 - 1, z)));
+    };
+    const floorAt = (x, z) => { const u = unitAt(x, z) || units[0]; return u.layout.floorTop; };
+    // Pad als 3D-punten (mm). Per punt: wall = wandvlak waar het in de wand
+    // ligt, ceil = boven het plafond, floor = in de vloer (voor de buizen in
+    // de 3D en de bladen per wand/vloer/plafond).
+    function path(a, b) {
+      const P = (p, wall, ceil, floor) => ({ x: p.x, y: p.y, z: p.z, wall: wall || null, ceil: !!ceil, floor: !!floor });
+      if (a.mount === 'vloer' || b.mount === 'vloer') { // door de vloer
+        const fa = floorAt(a.x, a.z) - FLOOR_DEPTH, fb = floorAt(b.x, b.z) - FLOOR_DEPTH;
+        return [P(a, a.face, false, a.mount === 'vloer'), P({ x: a.x, y: fa, z: a.z }, a.face, false, true), P({ x: b.x, y: fa, z: a.z }, null, false, true),
+          P({ x: b.x, y: fb, z: b.z }, b.face, false, true), P(b, b.face, false, b.mount === 'vloer')];
+      }
+      if (a.face && a.face === b.face) return [P(a, a.face), P({ x: a.x, y: b.y, z: a.z }, a.face), P(b, b.face)]; // door de stijlen
+      if (a.mount === 'buiten' && b.mount === 'buiten') return [P(a), P({ x: b.x, y: a.y, z: a.z }), P(b)];
+      const top = (p) => p.mount === 'plafond' ? p.y : ceilAt(p.x, p.z);
+      const ya = top(a), yb = top(b), dropB = Math.abs(yb - b.y) > 1;
+      const pts = [P(a, a.face, a.mount === 'plafond')];
+      if (Math.abs(ya - a.y) > 1) pts.push(P({ x: a.x, y: ya, z: a.z }, a.face, true));
+      pts.push(P({ x: b.x, y: ceilAt(b.x, a.z), z: a.z }, null, true));
+      pts.push(P({ x: b.x, y: yb, z: b.z }, dropB ? b.face : null, true));
+      if (dropB) pts.push(P(b, b.face, false));
+      return pts;
+    }
+    const length = (pts) => pts.slice(1).reduce((s, q, i) => s + Math.hypot(q.x - pts[i].x, q.y - pts[i].y, q.z - pts[i].z), 0);
+    // Snelle schatting (voor de boom): haaks + hoogteverschil.
+    const cost = (a, b) => Math.abs(a.x - b.x) + Math.abs(a.z - b.z) + Math.abs(a.y - b.y);
+    // Aantal keer dat het pad (in plattegrond) van de ene unit naar een andere gaat.
+    function crossings(pts) {
+      let last = null, n = 0;
+      pts.slice(1).forEach((q, i) => {
+        const p = pts[i], len = Math.hypot(q.x - p.x, q.z - p.z), steps = Math.max(1, Math.ceil(len / 100));
+        for (let k = 0; k <= steps; k++) {
+          const u = unitAt(p.x + (q.x - p.x) * k / steps, p.z + (q.z - p.z) * k / steps);
+          if (!u) continue;
+          if (last && u.id !== last) n++;
+          last = u.id;
+        }
+      });
+      return n;
+    }
+    return { unitAt, ceilAt, floorAt, path, length, cost, crossings };
+  }
+
+  // ------------------------------------------------------------
+  // Alles voor de hele woning. units/interior = HouseModel-parts,
+  // lighting = parts.lighting (lamps, indoor), roofEdge = parts.roofEdge.
+  // Zet p.letter op elke lamp/spot. Geeft het elektra-resultaat (zie onder).
+  // ------------------------------------------------------------
+  function compute(settings, units, interior, lighting, roofEdge) {
+    const s = normalizeSettings(settings);
+    const indoor = lighting.indoor || [], gevel = lighting.lamps || [], spots = (roofEdge && roofEdge.spots) || [];
+    indoor.concat(gevel, spots).forEach(p => { delete p.letter; });
+    const out = {
+      enabled: s.enabled, settings: s, meterkast: null, combos: [], switches: [], wcds: [], apps: [], floorWcds: [], boxes: [],
+      groups: [], runs: [], cables: [], wires: [], conduits: [], materials: [], warnings: [], items: [], faces: []
+    };
+    if (!s.enabled || !units.length) return out;
+    const R = makeRouter(units);
+    const faces = {};
+    units.forEach(u => { faces[u.id] = facesOf(u, interior); });
+    const faceOfPiece = (u, p) => faces[u.id].find(f => f.piece === p && f.side === -1);
+    const allFaces = out.faces = units.reduce((a, u) => a.concat(faces[u.id]), []);
+
+    // 1. Voordeur (anders de eerste buitendeur, anders de eerste unit).
+    let door = null;
+    ['voordeur', 'deur'].some(type => units.some(u => u.walls.some(w => w.pieces.some(p => {
+      if (p.baseY) return false;
+      const op = p.config.openings.find(o => o.type === type);
+      const f = op && faceOfPiece(u, p);
+      if (f) door = { unit: u, face: f, op };
+      return !!door;
+    }))));
+    if (!door) out.warnings.push('Geen voordeur of buitendeur gevonden: schakelaars en meterkast vrij geplaatst.');
+    const mainUnit = door ? door.unit : units[0];
+    const hasOutdoor = gevel.length + spots.length > 0;
+    let letterCode = 65;
+    const nextLetter = () => String.fromCharCode(letterCode++);
+    const mainFuncs = hasOutdoor ? ['binnen', 'buiten'] : ['binnen'];
+    const mk = s.meterkast;
+    const apps = Object.keys(APPLIANCES).filter(k => s.apparaten[k]);
+    const num = (v, def) => typeof v === 'number' && isFinite(v) ? v : def;
+
+    // Handmatige plekken eerst vastleggen (de automatische wijken uit).
+    const comboWidth = (n) => PLATE + (n - 1) * BOX_PITCH;
+    const widthOf = (key) => {
+      if (key === 'mk') return mk.w;
+      let m = /^sw:(.+)$/.exec(key);
+      if (m) return units.some(u => u.id === m[1]) ? comboWidth(m[1] === mainUnit.id ? mainFuncs.length : 1) : 0;
+      m = /^wcd:(.+):(\d+)$/.exec(key);
+      if (m) return units.some(u => u.id === m[1]) && Number(m[2]) <= s.wcdPerUnit ? WCD_W : 0;
+      m = /^app:(.+)$/.exec(key);
+      return m && apps.includes(m[1]) ? PLATE : 0;
+    };
+    const fixed = {};
+    Object.keys(s.place).forEach(key => {
+      const o = s.place[key], w = widthOf(key);
+      if (!o || !w) return;
+      const f = allFaces.find(x => x.piece.element === o.element && x.side === (o.side || -1));
+      if (!f) return;
+      const u = Math.max(f.u0 + w / 2, Math.min(f.u1 - w / 2, num(o.u, (f.u0 + f.u1) / 2)));
+      fixed[key] = { f, u, y: num(o.y, null) };
+      f.reserved.push({ a: u - w / 2 - 50, b: u + w / 2 + 50, y0: 0, y1: 1e6 });
+    });
+    const centersAt = (u, n) => Array.from({ length: n }, (_, i) => u - comboWidth(n) / 2 + PLATE / 2 + i * BOX_PITCH);
+
+    // 2. Schakelaars bij de voordeur (A binnen, B buiten).
+    const addCombo = (unit, f, us, funcs, y, manual) => {
+      const yy = y === null || y === undefined ? s.switchHeight : y;
+      const combo = { id: out.combos.length + 1, key: 'sw:' + unit.id, manual: !!manual, unitId: unit.id, face: f, us, y: yy, rotY: f.piece.place.rotY, switches: [] };
+      funcs.forEach((func, i) => {
+        const sw = { letter: nextLetter(), func, unitId: unit.id, combo, u: us[i], lamps: [], label: func === 'buiten' ? 'Buitenlicht' : `Binnenlicht unit ${unit.id}` };
+        sw.pos = facePoint(f, us[i], yy, 0);
+        combo.switches.push(sw);
+        out.switches.push(sw);
+      });
+      const lo = Math.min(...us) - PLATE / 2, hi = Math.max(...us) + PLATE / 2;
+      if (!manual) f.reserved.push({ a: lo - 60, b: hi + 60, y0: 0, y1: 1e6 });
+      combo.u = (lo + hi) / 2;
+      combo.pos = facePoint(f, combo.u, yy, 0);
+      combo.width = hi - lo;
+      combo.center = facePoint(f, combo.u, yy, 5);
+      out.combos.push(combo);
+      return combo;
+    };
+    const fxMain = fixed['sw:' + mainUnit.id];
+    if (fxMain) addCombo(mainUnit, fxMain.f, centersAt(fxMain.u, mainFuncs.length), mainFuncs, fxMain.y, true);
+    else if (door) {
+      const us = besideDoor(door.face, door.op, mainFuncs.length, s.switchHeight);
+      if (us) addCombo(mainUnit, door.face, us, mainFuncs);
+      else {
+        const doorPt = facePoint(door.face, door.op.x + door.op.w / 2, 0, 0);
+        const w = PLATE + (mainFuncs.length - 1) * BOX_PITCH;
+        const nf = nearestFree(faces[mainUnit.id], doorPt, w, s.switchHeight - PLATE / 2, s.switchHeight + PLATE / 2, 0, 100);
+        if (nf) addCombo(mainUnit, nf.f, mainFuncs.map((_, i) => nf.u - w / 2 + PLATE / 2 + i * BOX_PITCH), mainFuncs);
+      }
+    }
+    if (!out.combos.length) {
+      const f = faces[mainUnit.id][0];
+      if (f) addCombo(mainUnit, f, mainFuncs.map((_, i) => (f.u0 + f.u1) / 2 + i * BOX_PITCH), mainFuncs);
+    }
+    const entry = out.combos[0] ? out.combos[0].pos : { x: mainUnit.rect.cx, z: mainUnit.rect.cz };
+
+    // 3. Meterkast: zo dicht mogelijk bij de voordeur, eerst in die unit.
+    const target = door ? facePoint(door.face, door.op.x + door.op.w / 2, 0, 0) : entry;
+    const fxMk = fixed.mk;
+    const mkY = fxMk && fxMk.y !== null ? fxMk.y : mk.y;
+    let spot = fxMk ? { f: fxMk.f, u: fxMk.u } : nearestFree(faces[mainUnit.id], target, mk.w, mkY, mkY + mk.h, 50, 50);
+    if (!spot) units.some(u => u !== mainUnit && (spot = nearestFree(faces[u.id], target, mk.w, mkY, mkY + mk.h, 50, 50)));
+    if (spot) {
+      const f = spot.f;
+      if (!fxMk) f.reserved.push({ a: spot.u - mk.w / 2 - 50, b: spot.u + mk.w / 2 + 50, y0: 0, y1: 1e6 });
+      out.meterkast = {
+        key: 'mk', manual: !!fxMk, unitId: f.unit.id, element: f.piece.element, face: f, u: spot.u, w: mk.w, h: mk.h, d: mk.d, y: mkY, rotY: f.piece.place.rotY,
+        center: facePoint(f, spot.u, mkY + mk.h / 2, mk.d / 2),
+        corners: [[-1, 0], [1, 0], [1, mk.d], [-1, mk.d]].map(([i, d]) => facePoint(f, spot.u + i * mk.w / 2, 0, d))
+      };
+    } else out.warnings.push('Geen vrije wand voor de meterkast gevonden.');
+
+    // 4. Schakelaar per andere unit, naast de deur waardoor je hem binnenkomt.
+    units.forEach(u => {
+      if (u === mainUnit) return;
+      const fx = fixed['sw:' + u.id];
+      if (fx) { addCombo(u, fx.f, centersAt(fx.u, 1), ['binnen'], fx.y, true); return; }
+      const cands = [];
+      faces[u.id].forEach(f => f.piece.config.openings.forEach(op => {
+        if (op.type !== 'deur' && op.type !== 'voordeur') return;
+        const q = facePoint(f, op.x + op.w / 2, 0, 0);
+        cands.push({ f, op, d: Math.hypot(q.x - entry.x, q.z - entry.z) + (f.piece.seamUnit ? 0 : 5000) }); // naadwand-deur eerst
+      }));
+      cands.sort((a, b) => a.d - b.d);
+      for (const c of cands) {
+        const us = besideDoor(c.f, c.op, 1, s.switchHeight);
+        if (us) { addCombo(u, c.f, us, ['binnen']); return; }
+      }
+      out.warnings.push(`Unit ${u.id}: geen deur met ruimte voor een schakelaar; binnenlicht op schakelaar ${out.switches[0] ? out.switches[0].letter : '-'}.`);
+    });
+
+    // 5. Lampen aan schakelaars koppelen (letter).
+    const swOf = (unitId, func) => out.switches.find(x => x.unitId === unitId && x.func === func) || out.switches.find(x => x.func === func) || out.switches[0];
+    indoor.forEach(p => { const sw = swOf(p.unitId, 'binnen'); if (sw) { p.letter = sw.letter; sw.lamps.push({ x: p.x, y: p.y, z: p.z, mount: 'plafond', kind: 'binnenspot', ref: p }); } });
+    gevel.forEach(p => { const sw = swOf(mainUnit.id, 'buiten'); if (sw) { p.letter = sw.letter; sw.lamps.push({ x: p.x + p.normal.x * 60, y: p.y, z: p.z + p.normal.z * 60, mount: 'buiten', kind: 'gevellamp', ref: p }); } });
+    spots.forEach(p => { const sw = swOf(mainUnit.id, 'buiten'); if (sw) { p.letter = sw.letter; sw.lamps.push({ x: p.x, y: p.y, z: p.z, mount: 'buiten', kind: 'boeideelspot', ref: p }); } });
+
+    // 6. Wandcontactdozen per unit (zo ver mogelijk uit elkaar).
+    units.forEach(u => {
+      const y0 = s.wcdHeight - 60, y1 = s.wcdHeight + 60, cands = [];
+      faces[u.id].forEach(f => freeOn(f, y0, y1, 100, 150).forEach(([a, b]) => {
+        if (b - a < WCD_W + 20) return;
+        (b - a > 1200 ? [a + 300, (a + b) / 2, b - 300] : [(a + b) / 2]).forEach(uu => cands.push({ f, u: uu, len: b - a, p: facePoint(f, uu, s.wcdHeight, 0) }));
+      }));
+      const chosen = [], freeKeys = [];
+      for (let i = 1; i <= s.wcdPerUnit; i++) {
+        const key = `wcd:${u.id}:${i}`, fx = fixed[key];
+        if (!fx) { freeKeys.push(key); continue; }
+        const y = fx.y !== null ? fx.y : s.wcdHeight;
+        chosen.push({ f: fx.f, u: fx.u, y, p: facePoint(fx.f, fx.u, y, 0), key, manual: true });
+      }
+      while (freeKeys.length) {
+        let best = null, bestScore = -1;
+        cands.forEach(c => {
+          if (chosen.some(x => x.f === c.f && Math.abs(x.u - c.u) < WCD_W + 150)) return;
+          const score = chosen.length ? Math.min(...chosen.map(x => Math.hypot(x.p.x - c.p.x, x.p.z - c.p.z))) : c.len;
+          if (score > bestScore) { bestScore = score; best = c; }
+        });
+        if (!best) break;
+        chosen.push(Object.assign({}, best, { key: freeKeys.shift(), y: s.wcdHeight }));
+        best.f.reserved.push({ a: best.u - WCD_W / 2 - 75, b: best.u + WCD_W / 2 + 75, y0: 0, y1: s.wcdHeight + 200 });
+      }
+      if (chosen.length < s.wcdPerUnit) out.warnings.push(`Unit ${u.id}: ruimte voor ${chosen.length} van ${s.wcdPerUnit} wcd's.`);
+      chosen.sort((a, b) => a.key < b.key ? -1 : 1).forEach(c => out.wcds.push({
+        key: c.key, manual: !!c.manual, unitId: u.id, face: c.f, u: c.u, y: c.y, rotY: c.f.piece.place.rotY, pos: c.p, center: facePoint(c.f, c.u, c.y, 6)
+      }));
+    });
+
+    // 6b. Apparaten: keuken bij elkaar in de grootste andere unit, de rest
+    // naast de meterkast.
+    const others = units.filter(u => u !== mainUnit);
+    const kitchen = (others.length ? others : units).reduce((a, b) => a.rect.W * a.rect.D >= b.rect.W * b.rect.D ? a : b);
+    const mkUnit = out.meterkast ? units.find(u => u.id === out.meterkast.unitId) : mainUnit;
+    const zones = {
+      keuken: { target: { x: kitchen.rect.cx, z: kitchen.rect.cz }, order: [kitchen].concat(units.filter(u => u !== kitchen)) },
+      techniek: { target: out.meterkast ? out.meterkast.center : entry, order: [mkUnit].concat(units.filter(u => u !== mkUnit)) }
+    };
+    apps.forEach(k => {
+      const A = APPLIANCES[k], key = 'app:' + k, fx = fixed[key];
+      let f, uu, y = A.height;
+      if (fx) { f = fx.f; uu = fx.u; if (fx.y !== null) y = fx.y; }
+      else {
+        const z = zones[A.zone];
+        let nf = null;
+        z.order.some(u => (nf = nearestFree(faces[u.id], z.target, PLATE + 40, y - 60, y + 60, 100, 150)));
+        if (!nf) { out.warnings.push(`${A.label}: geen vrije wand gevonden.`); return; }
+        f = nf.f; uu = nf.u;
+        f.reserved.push({ a: uu - PLATE / 2 - 80, b: uu + PLATE / 2 + 80, y0: 0, y1: 1e6 });
+      }
+      out.apps.push({ key, manual: !!fx, app: k, label: A.label, code: A.code, unitId: f.unit.id, face: f, u: uu, y, rotY: f.piece.place.rotY, pos: facePoint(f, uu, y, 0), center: facePoint(f, uu, y, 6) });
+    });
+
+    // 6c. Vloer-wcd's (handmatig toegevoegd, x/z vanaf de noordwesthoek van de unit).
+    s.vloerWcd.forEach(o => {
+      const u = units.find(x => x.id === o.unitId);
+      if (!u) return;
+      const x = u.rect.x0 + Math.max(100, Math.min(u.rect.W - 100, num(o.x, u.rect.W / 2)));
+      const z = u.rect.z0 + Math.max(100, Math.min(u.rect.D - 100, num(o.z, u.rect.D / 2)));
+      out.floorWcds.push({ key: 'vwcd:' + o.id, id: o.id, unitId: u.id, x, z, y: u.layout.floorTop });
+    });
+
+    // 7. Groepen: per unit licht (B10) + wcd (B16); fasen en aardlek om en om.
+    units.forEach(u => {
+      const sws = out.switches.filter(x => x.unitId === u.id && x.func === 'binnen');
+      if (sws.length) out.groups.push({ kind: 'licht', unitId: u.id, label: `Verlichting unit ${u.id}`, breaker: 'B10', cable: 'licht', switches: sws.map(x => x.letter) });
+      if (out.wcds.some(w => w.unitId === u.id) || out.floorWcds.some(w => w.unitId === u.id)) out.groups.push({ kind: 'wcd', unitId: u.id, label: `Wcd unit ${u.id}`, breaker: 'B16', cable: 'wcd', switches: [] });
+      const outSw = out.switches.filter(x => x.unitId === u.id && x.func === 'buiten');
+      if (outSw.length) out.groups.push({ kind: 'buiten', unitId: u.id, label: 'Buitenverlichting', breaker: 'B10', cable: 'buiten', switches: outSw.map(x => x.letter) });
+    });
+    out.apps.forEach(a => {
+      const A = APPLIANCES[a.app];
+      out.groups.push({ kind: 'app', app: a.app, unitId: a.unitId, label: A.label, breaker: A.breaker, cable: A.cable, poles: A.poles || 1, switches: [] });
+    });
+    const nRcd = Math.max(2, Math.ceil(out.groups.length / 4));
+    let ph = 0;
+    out.groups.forEach((g, i) => {
+      const n = g.poles || 1;
+      g.nr = i + 1; g.rcd = i % nRcd + 1;
+      g.phase = Array.from({ length: n }, (_, j) => 'L' + ((ph + j) % 3 + 1)).join('+');
+      ph += n;
+    });
+    out.rcdCount = out.groups.length ? nRcd : 0;
+    const groupOf = (kind, unitId) => out.groups.find(g => g.kind === kind && g.unitId === unitId);
+    // Buitenlicht zit in de schakeldoos van het binnenlicht: zelfde aardlek.
+    const gOut = out.groups.find(g => g.kind === 'buiten'), gIn = gOut && groupOf('licht', gOut.unitId);
+    if (gOut && gIn) gOut.rcd = gIn.rcd;
+    // Max. 4 groepen per aardlek: anders een andere groep (niet die twee)
+    // naar de aardlek met de minste groepen.
+    for (let guard = 0; guard < 20; guard++) {
+      const cnt = Array.from({ length: nRcd }, (_, i) => out.groups.filter(g => g.rcd === i + 1).length);
+      const over = cnt.findIndex(c => c > 4);
+      if (over < 0) break;
+      const mv = out.groups.slice().reverse().find(g => g.rcd === over + 1 && g !== gOut && g !== gIn);
+      if (!mv) break;
+      mv.rcd = cnt.indexOf(Math.min(...cnt)) + 1;
+    }
+    out.switches.forEach(sw => { const g = groupOf(sw.func === 'buiten' ? 'buiten' : 'licht', sw.unitId); sw.group = g ? g.nr : null; });
+    out.wcds.forEach(w => { const g = groupOf('wcd', w.unitId); w.group = g ? g.nr : null; });
+    out.floorWcds.forEach(w => { const g = groupOf('wcd', w.unitId); w.group = g ? g.nr : null; });
+    out.apps.forEach(a => { const g = out.groups.find(x => x.kind === 'app' && x.app === a.app); a.group = g ? g.nr : null; });
+
+    // 8. Leidingen.
+    const mkNode = out.meterkast ? Object.assign(facePoint(out.meterkast.face, out.meterkast.u, mkY + mk.h, 0), { mount: 'wand', face: out.meterkast.face, mk: true, name: 'MK' }) : null;
+    const mkLow = out.meterkast ? Object.assign(facePoint(out.meterkast.face, out.meterkast.u, mkY, 0), { mount: 'wand', face: out.meterkast.face, mk: true, name: 'MK' }) : null;
+    const addRun = (type, a, b, group, letter) => {
+      const pts = R.path(a, b);
+      const raw = R.length(pts);
+      out.runs.push({ type, group, letter: letter || null, from: a.name || '', to: b.name || '', path: pts, mk: !!(a.mk || b.mk), outdoor: a.mount === 'buiten' || b.mount === 'buiten' });
+    };
+    // Minimale opspannende boom vanaf root (Prim, op de snelle schatting).
+    const tree = (root, nodes, typeOf, group, letter) => {
+      const done = [root], rest = nodes.slice();
+      while (rest.length) {
+        let best = null;
+        rest.forEach((n, i) => done.forEach(t => { const c = R.cost(t, n); if (!best || c < best.c) best = { c, i, t }; }));
+        const n = rest.splice(best.i, 1)[0];
+        addRun(typeOf(best.t, n), best.t, n, group, letter);
+        done.push(n);
+      }
+    };
+    // Per schakeldoos één verdeeldoos per groep (naast elkaar langs de wand).
+    for (const combo of out.combos) {
+      const byGroup = [];
+      combo.switches.forEach(sw => {
+        let e = byGroup.find(x => x.group === sw.group);
+        if (!e) byGroup.push(e = { group: sw.group, switches: [] });
+        e.switches.push(sw);
+      });
+      combo.vds = [];
+      const along = { x: combo.face.b.x - combo.face.a.x, z: combo.face.b.z - combo.face.a.z }, al = Math.hypot(along.x, along.z) || 1;
+      byGroup.forEach((e, i) => {
+        const shift = (i - (byGroup.length - 1) / 2) * VD_OFFSET;
+        const vd = {
+          x: combo.pos.x + combo.face.n.x * VD_OFFSET + along.x / al * shift, z: combo.pos.z + combo.face.n.z * VD_OFFSET + along.z / al * shift,
+          mount: 'plafond', name: `VD${combo.id}${byGroup.length > 1 ? String.fromCharCode(97 + i) : ''}`
+        };
+        vd.y = R.ceilAt(vd.x, vd.z);
+        combo.vds.push(vd);
+        out.boxes.push({ kind: 'verdeeldoos', combo: combo.id, group: e.group, x: vd.x, y: vd.y, z: vd.z, unitId: combo.unitId });
+        if (mkNode) addRun('licht', mkNode, vd, e.group); // voeding binnen: VD in buis
+        // Naar de eigen inbouwdoos (of het midden ervan) van deze groep.
+        const uSw = e.switches.reduce((t, x) => t + x.u, 0) / e.switches.length;
+        const swNode = Object.assign(facePoint(combo.face, uSw, combo.y, 0), { mount: 'wand', face: combo.face, name: e.switches.map(x => x.letter).join('') });
+        addRun('schakel' + (e.switches.length + 1), vd, swNode, e.group);
+        e.switches.forEach(sw => tree(vd, sw.lamps.map((l, k) => Object.assign(l, { name: `${sw.letter}${k + 1}` })),
+          (a, b) => a.mount === 'buiten' || b.mount === 'buiten' ? 'buiten' : 'licht', e.group, sw.letter));
+      });
+    }
+    out.groups.filter(g => g.kind === 'wcd').forEach(g => {
+      const nodes = out.wcds.filter(w => w.group === g.nr).map((w, i) => Object.assign({}, w.pos, { mount: 'wand', face: w.face, name: `WCD${g.nr}.${i + 1}` }))
+        .concat(out.floorWcds.filter(w => w.group === g.nr).map((w, i) => ({ x: w.x, y: w.y, z: w.z, mount: 'vloer', name: `VWCD${g.nr}.${i + 1}` })));
+      if (mkLow && nodes.length) tree(mkLow, nodes, () => 'wcd', g.nr);
+    });
+    // Apparaten: elk een eigen leiding vanuit de meterkast.
+    if (mkLow) out.apps.forEach(a => addRun(APPLIANCES[a.app].cable, mkLow, Object.assign({}, a.pos, { mount: 'wand', face: a.face, name: a.code }), a.group));
+
+    // 8b. Buizen uit elkaar (min. CLEAR), daarna lengtes, naad-overgangen en boorgaten.
+    separateRuns(out.runs);
+    const holesOf = makeHoleCounter(units, R);
+    out.runs.forEach(r => {
+      r.rawMM = R.length(r.path);
+      r.lengthMM = (r.rawMM + s.reserve + (r.mk ? s.meterkastReserve : 0)) * (1 + s.slack / 100);
+      r.crossings = R.crossings(r.path);
+      r.holes = holesOf(r);
+    });
+    out.holes = out.runs.reduce((a, r) => a + r.holes, 0);
+
+    // 9. Totalen: per leidingtype, draad per doorsnede/kleur, buis, groep.
+    const byType = {};
+    out.runs.forEach(r => { byType[r.type] = (byType[r.type] || 0) + r.lengthMM; });
+    out.cables = Object.keys(byType).sort().map(k => ({ key: k, label: cableInfo(k).label, use: cableInfo(k).use, meters: byType[k] / 1000 }));
+    const wires = {}, conduits = {};
+    out.runs.forEach(r => {
+      const c = cableInfo(r.type);
+      if (!c.conduit) return;
+      conduits[c.conduit] = (conduits[c.conduit] || 0) + r.lengthMM;
+      c.cores.forEach(core => {
+        const k = `${String(c.mm2).replace('.', ',')} mm² ${CORE_COLORS[core]}`;
+        wires[k] = (wires[k] || 0) + r.lengthMM;
+      });
+    });
+    out.wires = Object.keys(wires).sort().map(k => ({ label: `VD-draad ${k}`, meters: wires[k] / 1000 }));
+    out.conduits = Object.keys(conduits).sort((a, b) => a - b).map(k => ({ label: `Flexibele installatiebuis Ø${k} mm`, meters: conduits[k] / 1000 }));
+    out.groups.forEach(g => {
+      const rs = out.runs.filter(r => r.group === g.nr);
+      g.meters = rs.reduce((a, r) => a + r.lengthMM, 0) / 1000;
+      g.points = g.kind === 'wcd' ? out.wcds.filter(w => w.group === g.nr).length
+        : g.kind === 'app' ? 1
+        : out.switches.filter(x => x.group === g.nr).reduce((a, x) => a + x.lamps.length, 0);
+    });
+    out.groups.forEach(g => {
+      if ((g.kind === 'licht' || g.kind === 'buiten') && g.points > 50) out.warnings.push(`Groep ${g.nr} (${g.label}): ${g.points} lichtpunten; controleer het vermogen (LED).`);
+    });
+
+    // 10. Materiaal (aantallen).
+    const crossBy = {};
+    out.runs.forEach(r => { if (r.crossings) { const n = cableInfo(r.type).cores.length; crossBy[n] = (crossBy[n] || 0) + r.crossings; } });
+    const nIndoor = out.switches.reduce((a, x) => a + x.lamps.filter(l => l.kind === 'binnenspot').length, 0);
+    const nSpots = out.switches.reduce((a, x) => a + x.lamps.filter(l => l.kind === 'boeideelspot').length, 0);
+    const nGevel = out.switches.reduce((a, x) => a + x.lamps.filter(l => l.kind === 'gevellamp').length, 0);
+    const nLicht = out.groups.filter(g => g.kind === 'licht').length, nWcdG = out.groups.filter(g => g.kind === 'wcd').length;
+    const frames = {};
+    out.combos.forEach(c => { frames[c.switches.length] = (frames[c.switches.length] || 0) + 1; });
+    const m = out.materials;
+    const add = (naam, aantal, eenheid) => { if (aantal > 0) m.push({ naam, aantal, eenheid: eenheid || 'st.' }); };
+    if (out.meterkast) {
+      add('Groepenkast 3-fase (aansluiting 3×25 A)', 1);
+      add('Hoofdschakelaar 4-polig 40 A', 1);
+    }
+    add('Aardlekschakelaar 2-polig 40 A / 30 mA', out.rcdCount);
+    add('Installatieautomaat B10 1P+N (verlichting)', nLicht);
+    add('Installatieautomaat B10 1P+N (buitenverlichting)', out.groups.filter(g => g.kind === 'buiten').length);
+    add('Installatieautomaat B16 1P+N (wcd)', nWcdG);
+    add('Installatieautomaat B16 1P+N (apparaten)', out.apps.filter(a => (APPLIANCES[a.app].poles || 1) === 1).length);
+    add('Installatieautomaat 2× B16, 2-fase (kookgroep)', out.apps.filter(a => APPLIANCES[a.app].poles === 2).length);
+    add('Schakelaar enkelpolig (inbouw)', out.switches.length);
+    Object.keys(frames).forEach(n => add(`Afdekraam ${n}-voudig`, frames[n]));
+    add('Wandcontactdoos dubbel met randaarde', out.wcds.length);
+    add('Vloerdoos met dubbele wcd (randaarde)', out.floorWcds.length);
+    const appMat = {};
+    out.apps.forEach(a => { const n = APPLIANCES[a.app].material; appMat[n] = (appMat[n] || 0) + 1; });
+    Object.keys(appMat).forEach(n => add(n, appMat[n]));
+    add('Luchtdichte hollewanddoos (schakelaar/wcd/apparaat)', out.switches.length + 2 * out.wcds.length + out.apps.length);
+    add('Luchtdichte verdeeldoos (plafond)', out.boxes.length);
+    add('Lasklem 3-voudig (schatting)', out.boxes.length * 3 + out.switches.length + out.wcds.length);
+    add('LED-inbouwspot binnen + luchtdichte spotdoos', nIndoor);
+    add('Buitenspot boeideel (IP44)', nSpots);
+    add('Gevellamp (IP44)', nGevel);
+    add('Luchtdichte kabeldoorvoer naar buiten', out.runs.filter(r => r.type === 'buiten' && r.from.startsWith('VD') && r.to !== '' && !r.to.startsWith('VD')).length);
+    Object.keys(crossBy).forEach(n => add(`Steekverbinder module-naad ${n}-polig (set m/v)`, crossBy[n]));
+
+    // 11. Verplaatsbare onderdelen (plattegrond: slepen, selecteren).
+    // marker = plek van het symbool in de plattegrond (iets de kamer in).
+    const item = (key, kind, label, f, u, y, manual, off, unitId) => out.items.push({
+      key, kind, label, unitId: unitId || f.unit.id, element: f.piece.element, side: f.side, u, y, manual: !!manual, marker: facePoint(f, u, 0, off)
+    });
+    const k = out.meterkast;
+    if (k) item('mk', 'mk', 'Meterkast', k.face, k.u, k.y, k.manual, k.d / 2);
+    out.combos.forEach(c => item(c.key, 'sw', 'Schakelaar ' + c.switches.map(x => x.letter).join(' '), c.face, c.u, c.y, c.manual, 260, c.unitId));
+    out.wcds.forEach(w => item(w.key, 'wcd', `Wcd ${w.key.split(':')[2]} unit ${w.unitId} (groep ${w.group})`, w.face, w.u, w.y, w.manual, 120, w.unitId));
+    out.apps.forEach(a => item(a.key, 'app', `${a.label} (groep ${a.group})`, a.face, a.u, a.y, a.manual, 150));
+    out.floorWcds.forEach(w => {
+      const u = units.find(x => x.id === w.unitId);
+      out.items.push({ key: w.key, kind: 'vwcd', label: `Vloer-wcd unit ${w.unitId} (groep ${w.group})`, unitId: w.unitId, x: w.x - u.rect.x0, z: w.z - u.rect.z0, manual: true, marker: { x: w.x, z: w.z } });
+    });
+    return out;
+  }
+
+  // ------------------------------------------------------------
+  // Buizen uit elkaar (muteert run.path). Padstukken zijn haaks (x, y of z).
+  // Te dicht = evenwijdig, overlappend langs de as en minder dan CLEAR vrij
+  // (buitenkant tot buitenkant). Zo'n stuk schuift naar de eerste vrije baan
+  // (±1, ±2, ... × CLEAR + buis-Ø): in een wand langs de wand (verticaal
+  // stuk) of omhoog/omlaag (horizontaal stuk), in plafond/vloer horizontaal
+  // dwars. Een knik ervoor en erna verbindt het weer met de rest van het pad.
+  // Uitzondering: het laatste stuk naar de meterkast. Daar komen de buizen
+  // naast elkaar (tegen elkaar aan) de kast binnen.
+  // ------------------------------------------------------------
+  function separateRuns(runs) {
+    const add = (p, d, k) => Object.assign({}, p, { x: p.x + d.x * k, y: p.y + d.y * k, z: p.z + d.z * k });
+    const axisOf = (p, q) => {
+      const dx = Math.abs(q.x - p.x), dy = Math.abs(q.y - p.y), dz = Math.abs(q.z - p.z);
+      return dx >= dy && dx >= dz ? 'x' : dz >= dy ? 'z' : 'y';
+    };
+    const lenOf = (p, q) => Math.hypot(q.x - p.x, q.y - p.y, q.z - p.z);
+    const seg = (run, p, q, r) => {
+      const axis = axisOf(p, q), perp = {};
+      ['x', 'y', 'z'].filter(k => k !== axis).forEach(k => { perp[k] = (p[k] + q[k]) / 2; });
+      return { run, axis, lo: Math.min(p[axis], q[axis]), hi: Math.max(p[axis], q[axis]), perp, r };
+    };
+    const placed = [];
+    const conflict = (sg) => placed.some(t => t.run !== sg.run && t.axis === sg.axis && Math.min(t.hi, sg.hi) - Math.max(t.lo, sg.lo) > 1 &&
+      Math.hypot(...Object.keys(sg.perp).map(k => sg.perp[k] - t.perp[k])) < CLEAR + sg.r + t.r - 0.5);
+    const faceDir = (f) => { const L = Math.hypot(f.b.x - f.a.x, f.b.z - f.a.z) || 1; return { x: (f.b.x - f.a.x) / L, y: 0, z: (f.b.z - f.a.z) / L }; };
+    const shiftDir = (p, q, axis) => {
+      const plane = (p.ceil || p.floor) && (q.ceil || q.floor);
+      if (axis === 'y') { const f = p.wall || q.wall; return f ? faceDir(f) : { x: 1, y: 0, z: 0 }; }
+      if (!plane && (p.wall || q.wall)) return { x: 0, y: 1, z: 0 };
+      return axis === 'x' ? { x: 0, y: 0, z: 1 } : { x: 1, y: 0, z: 0 };
+    };
+    const conduit = runs.filter(r => cableInfo(r.type).conduit > 0);
+    const radius = (r) => cableInfo(r.type).conduit / 2;
+
+    // 1. Meterkast: per aansluitpunt (boven/onder) de buizen naast elkaar,
+    // tegen elkaar aan, gesorteerd naar de kant waar ze heen gaan.
+    const bundles = {};
+    conduit.filter(r => r.mk && r.path[0].wall).forEach(r => {
+      const k = Math.round(r.path[0].y);
+      (bundles[k] = bundles[k] || []).push(r);
+    });
+    Object.values(bundles).forEach(list => {
+      const d = faceDir(list[0].path[0].wall);
+      const along = (r) => { const q = r.path[Math.min(2, r.path.length - 1)]; return (q.x - r.path[0].x) * d.x + (q.z - r.path[0].z) * d.z; };
+      list.sort((a, b) => along(a) - along(b));
+      const total = list.reduce((a, r) => a + 2 * radius(r), 0);
+      let off = -total / 2;
+      list.forEach(r => {
+        const o = off + radius(r);
+        off += 2 * radius(r);
+        const orig = r.path, dAx = Math.abs(d.x) > Math.abs(d.z) ? 'x' : 'z';
+        const out = orig.map(p => p);
+        out[0] = add(orig[0], d, o);
+        for (let k = 0; k < orig.length - 1; k++) {
+          const len = lenOf(orig[k], orig[k + 1]);
+          if (len >= 1 && axisOf(orig[k], orig[k + 1]) === dAx) break; // loopt langs de kast: alleen langer/korter
+          if (k + 1 === orig.length - 1) { out.splice(k + 1, 0, add(orig[k + 1], d, o)); break; } // eindpunt blijft: knik ervoor
+          out[k + 1] = add(orig[k + 1], d, o);
+        }
+        r.path = out;
+        placed.push(seg(r, out[0], out[1], radius(r))); // gebundeld stuk: vast
+        r.fixed = 1;
+      });
+    });
+
+    // 2. De rest: per padstuk een vrije baan zoeken.
+    conduit.forEach(r => {
+      const rad = radius(r), step = CLEAR + 2 * rad;
+      let pts = r.path;
+      for (let i = r.fixed || 0; i < pts.length - 1; i++) {
+        const p = pts[i], q = pts[i + 1];
+        if (lenOf(p, q) < 1) continue;
+        const sg = seg(r, p, q, rad);
+        if (!conflict(sg)) { placed.push(sg); continue; }
+        const dir = shiftDir(p, q, sg.axis);
+        // Knikken tellen ook mee, behalve direct aan een doos/lamp (daar
+        // komen buizen samen) en aan het eind van de meterkastbundel.
+        const freeStart = i === 0 || (r.fixed && i === r.fixed), freeEnd = i + 1 === pts.length - 1;
+        let done = false;
+        for (let k = 1; k <= 12 && !done; k++) {
+          for (const sign of [1, -1]) {
+            const kk = sign * k * step, p2 = add(p, dir, kk), q2 = add(q, dir, kk), s2 = seg(r, p2, q2, rad);
+            const j1 = seg(r, p, p2, rad), j2 = seg(r, q2, q, rad);
+            if (conflict(s2) || (!freeStart && conflict(j1)) || (!freeEnd && conflict(j2))) continue;
+            pts = pts.slice(0, i + 1).concat([p2, q2], pts.slice(i + 1));
+            placed.push(s2, j1, j2);
+            i += 2; // verder vanaf de knik terug naar q
+            done = true;
+            break;
+          }
+        }
+        if (!done) placed.push(sg);
+      }
+      r.path = simplifyPath(pts);
+    });
+    runs.forEach(r => { delete r.fixed; });
+  }
+  // Dubbele punten en heen-en-weer-knikken eruit.
+  function simplifyPath(pts) {
+    const same = (a, b) => Math.abs(a.x - b.x) < 0.5 && Math.abs(a.y - b.y) < 0.5 && Math.abs(a.z - b.z) < 0.5;
+    let out = pts.filter((p, i) => i === 0 || !same(p, pts[i - 1]));
+    let changed = true;
+    while (changed) {
+      changed = false;
+      for (let i = 1; i < out.length - 1; i++) {
+        if (i + 1 < out.length && same(out[i - 1], out[i + 1])) { out.splice(i, 2); changed = true; break; }
+      }
+    }
+    return out;
+  }
+
+  // Dichtstbijzijnde wandvlak (kamerzijde) bij plattegrondpunt (x, z), voor
+  // het slepen: { element, side, u, x, z, n } of null.
+  function snapToWall(el, x, z) {
+    let best = null;
+    ((el && el.faces) || []).forEach(f => {
+      const u = Math.max(f.u0, Math.min(f.u1, uAt(f, { x, z })));
+      const q = facePoint(f, u, 0, 0);
+      if ((x - q.x) * f.n.x + (z - q.z) * f.n.z < -(f.piece.place.thickness + 50)) return; // aan de andere kant van de wand
+      const d = Math.hypot(q.x - x, q.z - z);
+      if (!best || d < best.d) best = { d, element: f.piece.element, side: f.side, u: Math.round(u / 10) * 10, x: q.x, z: q.z, n: f.n };
+    });
+    return best;
+  }
+
+  // ------------------------------------------------------------
+  // 3D per bouwfase (BuildStages):
+  //   elektra   meterkast (blijft), installatiebuizen (zeskant, kleur per
+  //             leidingtype) in de wanden en boven het plafond, luchtdichte
+  //             inbouwdozen, verdeeldozen en spotdozen. Vanaf "beplating"
+  //             zitten buizen en dozen achter de platen: niet meer gebouwd.
+  //   afwerking afdekramen van schakelaars, wcd's en apparaten.
+  // Kabel zonder buis (XMvK buiten) en losse draad worden niet getekend.
+  // ------------------------------------------------------------
+  const WALL_IN = 35;  // buis: zoveel achter het wandvlak (in de stijlruimte)
+  const CEIL_UP = 35;  // buis: zoveel boven de onderkant plafond (op de plafondplaat)
+  const CONDUIT_COLORS = { licht: 0xe0b020, wcd: 0xcc4a30, koken: 0x8a3a9a, schakel: 0x9a6a20 };
+  function createMaterials() {
+    const conduit = {};
+    Object.keys(CONDUIT_COLORS).forEach(k => { conduit[k] = new THREE.MeshStandardMaterial({ color: CONDUIT_COLORS[k], roughness: 0.55 }); });
+    return {
+      kastMaterial: new THREE.MeshStandardMaterial({ color: 0xd8d8d2, roughness: 0.6 }),
+      deurMaterial: new THREE.MeshStandardMaterial({ color: 0xc4c4bd, roughness: 0.5 }),
+      plateMaterial: new THREE.MeshStandardMaterial({ color: 0xf6f6f2, roughness: 0.4 }),
+      boxMaterial: new THREE.MeshStandardMaterial({ color: 0xe8742a, roughness: 0.6 }),
+      conduit
+    };
+  }
+  function build3D(el, materials, stage) {
+    const toM = 0.001, group = new THREE.Group();
+    if (!el || !el.enabled) return group;
+    const mats = materials || createMaterials();
+    const st = BuildStages.clamp(stage), show = (key) => BuildStages.shows(st, key);
+    const rough = show('elektra') && !show('beplating');
+    const box = (w, h, d, c, rotY, mat) => {
+      const mesh = new THREE.Mesh(new THREE.BoxGeometry(w * toM, h * toM, d * toM), mat);
+      mesh.position.set(c.x * toM, c.y * toM, c.z * toM);
+      mesh.rotation.y = rotY;
+      group.add(mesh);
+      return mesh;
+    };
+    const k = el.meterkast;
+    if (k && show('elektra')) {
+      box(k.w, k.h, k.d, k.center, k.rotY, mats.kastMaterial);
+      const front = facePoint(k.face, k.u, k.y + k.h / 2, k.d + 2);
+      box(k.w - 30, k.h - 30, 4, front, k.rotY, mats.deurMaterial);
+    }
+    if (show('afwerking')) {
+      el.combos.forEach(c => box(c.width, PLATE, 10, c.center, c.rotY, mats.plateMaterial));
+      el.wcds.forEach(w => box(WCD_W, PLATE, 12, w.center, w.rotY, mats.plateMaterial));
+      el.apps.forEach(a => box(PLATE, PLATE, 12, a.center, a.rotY, mats.plateMaterial));
+      el.floorWcds.forEach(w => box(130, 8, 130, { x: w.x, y: w.y + 4, z: w.z }, 0, mats.plateMaterial)); // deksel vloerdoos
+    }
+    if (!rough) return group;
+
+    // Installatiebuizen: zeskantige cilinders per padstuk + bolletje op elke knik.
+    const up = new THREE.Vector3(0, 1, 0);
+    const shift = (p) => ({
+      x: p.x - (p.wall ? p.wall.n.x * WALL_IN : 0), y: p.y + (p.ceil ? CEIL_UP : 0), z: p.z - (p.wall ? p.wall.n.z * WALL_IN : 0)
+    });
+    el.runs.forEach(r => {
+      const c = cableInfo(r.type);
+      if (!c.conduit) return;
+      const rad = c.conduit / 2 * toM;
+      const mat = mats.conduit[r.type] || mats.conduit.schakel;
+      const pts = r.path.map(shift);
+      pts.slice(1).forEach((q, i) => {
+        const p = pts[i], dx = q.x - p.x, dy = q.y - p.y, dz = q.z - p.z, len = Math.hypot(dx, dy, dz);
+        if (len < 1) return;
+        const m = new THREE.Mesh(new THREE.CylinderGeometry(rad, rad, len * toM, 6), mat);
+        m.position.set((p.x + q.x) / 2 * toM, (p.y + q.y) / 2 * toM, (p.z + q.z) / 2 * toM);
+        m.quaternion.setFromUnitVectors(up, new THREE.Vector3(dx / len, dy / len, dz / len));
+        group.add(m);
+      });
+      pts.slice(1, -1).forEach(p => {
+        const j = new THREE.Mesh(new THREE.IcosahedronGeometry(rad * 1.15, 0), mat);
+        j.position.set(p.x * toM, p.y * toM, p.z * toM);
+        group.add(j);
+      });
+    });
+    // Luchtdichte inbouwdozen (schakelaars, wcd, apparaten): in de wand.
+    const wallBox = (f, u, y) => {
+      const c = facePoint(f, u, y, -22);
+      const m = new THREE.Mesh(new THREE.CylinderGeometry(0.034, 0.034, 0.045, 12), mats.boxMaterial);
+      m.position.set(c.x * toM, c.y * toM, c.z * toM);
+      m.quaternion.setFromUnitVectors(up, new THREE.Vector3(f.n.x, 0, f.n.z));
+      group.add(m);
+    };
+    el.switches.forEach(sw => wallBox(sw.combo.face, sw.u, sw.combo.y));
+    el.wcds.forEach(w => { wallBox(w.face, w.u - 36, w.y); wallBox(w.face, w.u + 36, w.y); });
+    el.apps.forEach(a => wallBox(a.face, a.u, a.y));
+    el.floorWcds.forEach(w => box(100, 80, 100, { x: w.x, y: w.y - 40, z: w.z }, 0, mats.boxMaterial)); // vloerdoos
+    // Verdeeldozen en spotdozen boven het plafond.
+    el.boxes.forEach(b => box(90, 50, 90, { x: b.x, y: b.y + CEIL_UP + 10, z: b.z }, 0, mats.boxMaterial));
+    el.switches.forEach(sw => sw.lamps.filter(l => l.kind === 'binnenspot').forEach(l => {
+      const m = new THREE.Mesh(new THREE.CylinderGeometry(0.045, 0.045, 0.07, 12), mats.boxMaterial);
+      m.position.set(l.x * toM, (l.y + 18 + 35) * toM, l.z * toM);
+      group.add(m);
+    }));
+    return group;
+  }
+
+  // Plek van een punt op een wandvlak: { u, y } (wand-x en hoogte boven de vloer).
+  const wallCoords = (f, p) => ({ u: uAt(f, p), y: p.y - f.piece.place.floorTop });
+
+  // Lijnstuk p-q (wereld-mm) binnen grenzen b = { x0, x1, z0, z1 } (plattegrond); null = erbuiten.
+  function clipPlan(p, q, b) {
+    let t0 = 0, t1 = 1;
+    for (const [k, lo, hi] of [['x', b.x0, b.x1], ['z', b.z0, b.z1]]) {
+      const d = q[k] - p[k];
+      if (Math.abs(d) < 1e-9) { if (p[k] < lo - 0.5 || p[k] > hi + 0.5) return null; continue; }
+      let a = (lo - p[k]) / d, c = (hi - p[k]) / d;
+      if (a > c) [a, c] = [c, a];
+      t0 = Math.max(t0, a); t1 = Math.min(t1, c);
+      if (t0 > t1) return null;
+    }
+    const at = (t) => Object.assign({}, p, { x: p.x + (q.x - p.x) * t, y: p.y + (q.y - p.y) * t, z: p.z + (q.z - p.z) * t });
+    return [at(t0), at(t1)];
+  }
+  // Dakvlak pl van unit: deel van de plattegrond (bounds) en omrekening naar
+  // het dek zoals de dakbladen (map: { sx, sy }, mm vanaf linksvoor), gelijk
+  // aan de doorvoeren in RoofModel.computeUnitRoof. De balken van het dek
+  // staan op sx = joist + breedte/2 en lopen langs sy.
+  function roofDeckMap(unit, pl) {
+    const alongX = Math.abs(Math.sin(pl.yaw)) > 0.5, rr = unit.roof.rect, r = unit.rect;
+    const qOf = (p) => alongX ? p.x - r.cx : p.z - r.cz;
+    return {
+      bounds: alongX
+        ? { x0: Math.max(r.x0, r.cx + pl.p0), x1: Math.min(r.x1, r.cx + pl.p1), z0: r.z0, z1: r.z1 }
+        : { x0: r.x0, x1: r.x1, z0: Math.max(r.z0, r.cz + pl.p0), z1: Math.min(r.z1, r.cz + pl.p1) },
+      map: (p) => ({ sx: alongX ? rr.z1 - p.z : p.x - rr.x0, sy: (qOf(p) - pl.p0) / pl.cos })
+    };
+  }
+  // Boorgaten van een leiding (zie kop). Telt per padstuk.
+  const VERTICAL_KINDS = ['verticale balk', 'kreupele stijl'];
+  function makeHoleCounter(units, R) {
+    const boms = new Map();
+    const bomOf = (piece) => {
+      if (!boms.has(piece)) boms.set(piece, piece.frame ? WallModel.computeBOM(piece.config, piece.frame) : []);
+      return boms.get(piece);
+    };
+    const between = (v, a, b) => v > Math.min(a, b) + 1 && v < Math.max(a, b) - 1;
+    const joistsBetween = (cd, a, b) => cd.joists.filter(j => between(j + cd.width / 2, a, b)).length;
+    return (run) => {
+      if (!cableInfo(run.type).conduit) return run.type === 'buiten' && run.from.startsWith('VD') ? 1 : 0; // doorvoer naar buiten
+      let n = 0;
+      run.path.slice(1).forEach((q, i) => {
+        const p = run.path[i];
+        const vertical = Math.abs(q.y - p.y) > Math.hypot(q.x - p.x, q.z - p.z);
+        if (p.wall && q.wall && p.wall.piece === q.wall.piece && !(p.ceil && q.ceil)) {
+          const f = p.wall, a = wallCoords(f, p), b = wallCoords(f, q), bom = bomOf(f.piece);
+          if (vertical) {
+            const x = a.u - f.W / 2;
+            n += bom.filter(bp => !VERTICAL_KINDS.includes(bp.kind) && Math.abs(x - bp.x) <= bp.length / 2 && between(bp.y, a.y, b.y)).length;
+            if (p.floor !== q.floor) n += 1; // door de vloerplaat/randbalk de vloer in
+          } else {
+            n += bom.filter(bp => VERTICAL_KINDS.includes(bp.kind) && between(bp.x + f.W / 2, a.u, b.u) && Math.abs(a.y - bp.y) <= bp.length / 2).length;
+          }
+        } else if (!vertical && p.ceil && q.ceil) {
+          const mid = { x: (p.x + q.x) / 2, z: (p.z + q.z) / 2 }, u = R.unitAt(mid.x, mid.z);
+          if (u) u.roof.planes.forEach(pl => {
+            const dm = roofDeckMap(u, pl), c = clipPlan(p, q, dm.bounds);
+            if (c) n += joistsBetween(pl.data.calcData, dm.map(c[0]).sx, dm.map(c[1]).sx);
+          });
+        } else if (!vertical && p.floor && q.floor) {
+          const u = R.unitAt((p.x + q.x) / 2, (p.z + q.z) / 2);
+          const c = u && clipPlan(p, q, u.rect);
+          if (c) n += joistsBetween(u.floorData.calcData, c[0].x - u.rect.x0, c[1].x - u.rect.x0);
+        } else if (vertical && (p.floor || q.floor) && !(p.wall || q.wall)) n += 1; // vloerdoos: gat in de vloerplaat
+      });
+      return n;
+    };
+  }
+
+  return { DEFAULT_SETTINGS, CABLES, CORE_COLORS, APPLIANCES, PLATE, WCD_W, cableInfo, normalizeSettings, compute, snapToWall, wallCoords, clipPlan, roofDeckMap, createMaterials, build3D };
+})();

js/elektra/elektra-pdf.js

@@ -0,0 +1,277 @@
+/*!
+ * Tectum
+ * Copyright © 2026 Machiel Heinen.
+ * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
+ * Zie LICENTIE.md.
+ */
+// ============================================================
+// elektra/elektra-pdf.js — ElektraPdf: elektra in de woning-PDF.
+//   drawPlan  : meterkast, schakelaars (letter), wcd's (groep), lamp-
+//               letters en leidingen op de plattegrond (blad Plattegrond)
+//   drawSheet : eigen blad met groepenverklaring, schakelaars, strekkende
+//               meters per leidingtype, draad, buis en materiaal.
+// Alle gegevens komen uit ElektraModel.compute (parts.elektra).
+// Plain script, geladen na pdf-sheet.js en elektra-model.js.
+// ============================================================
+
+window.ElektraPdf = (() => {
+  const fmt = (n, d = 1) => Number(n).toFixed(d).replace('.', ',');
+  // Kleur per leidingtype (ook de legenda).
+  const RUN_COLORS = { licht: [215, 160, 0], wcd: [205, 55, 35], buiten: [40, 140, 60], schakel: [150, 95, 20] };
+  const runColor = (type) => RUN_COLORS[type] || RUN_COLORS.schakel;
+
+  // px/py: woning-mm -> blad-mm.
+  function drawPlan(doc, el, px, py) {
+    if (!el || !el.enabled) return;
+    const BLACK = PdfSheet.COLORS.BLACK;
+    // Leidingen (gestippeld, plattegrond-projectie van het pad).
+    doc.setLineWidth(0.15);
+    doc.setLineDashPattern([0.8, 0.6], 0);
+    el.runs.forEach(r => {
+      doc.setDrawColor(...runColor(r.type));
+      r.path.slice(1).forEach((b, i) => {
+        const a = r.path[i];
+        if (Math.hypot(px(b.x) - px(a.x), py(b.z) - py(a.z)) > 0.05) doc.line(px(a.x), py(a.z), px(b.x), py(b.z));
+      });
+    });
+    doc.setLineDashPattern([], 0);
+
+    // Meterkast
+    const k = el.meterkast;
+    if (k) {
+      doc.setDrawColor(...BLACK);
+      doc.setFillColor(90, 90, 90);
+      doc.setLineWidth(0.2);
+      const c = k.corners;
+      doc.lines(c.slice(1).map((p, i) => [px(p.x) - px(c[i].x), py(p.z) - py(c[i].z)]), px(c[0].x), py(c[0].z), [1, 1], 'FD', true);
+      doc.setFontSize(5);
+      doc.setTextColor(...BLACK);
+      const m = { x: (c[0].x + c[2].x) / 2 + k.face.n.x * 350, z: (c[0].z + c[2].z) / 2 + k.face.n.z * 350 };
+      doc.text('MK', px(m.x), py(m.z) + 0.8, { align: 'center' });
+    }
+
+    // Verdeeldozen (plafond): klein vierkantje.
+    doc.setDrawColor(...runColor('schakel'));
+    doc.setLineWidth(0.15);
+    el.boxes.forEach(b => doc.rect(px(b.x) - 0.6, py(b.z) - 0.6, 1.2, 1.2, 'S'));
+
+    // Schakelaars: kadertje met de letters, iets de kamer in.
+    doc.setFontSize(5);
+    el.combos.forEach(c => {
+      const q = { x: c.pos.x + c.face.n.x * 260, z: c.pos.z + c.face.n.z * 260 };
+      const text = c.switches.map(s => s.letter).join(' ');
+      const w = 1.6 + text.length * 1.0;
+      doc.setDrawColor(...BLACK);
+      doc.setFillColor(255, 255, 255);
+      doc.setLineWidth(0.2);
+      doc.rect(px(q.x) - w / 2, py(q.z) - 1.2, w, 2.4, 'FD');
+      doc.setTextColor(...BLACK);
+      doc.text(text, px(q.x), py(q.z) + 0.7, { align: 'center' });
+    });
+
+    // Wcd: halve cirkel tegen de wand + groepnummer.
+    el.wcds.forEach(w => {
+      const q = { x: w.pos.x + w.face.n.x * 120, z: w.pos.z + w.face.n.z * 120 };
+      doc.setDrawColor(...RUN_COLORS.wcd);
+      doc.setFillColor(255, 255, 255);
+      doc.setLineWidth(0.2);
+      doc.circle(px(q.x), py(q.z), 0.9, 'FD');
+      doc.setTextColor(...RUN_COLORS.wcd);
+      doc.setFontSize(4);
+      doc.text(String(w.group), px(q.x + w.face.n.x * 250), py(q.z + w.face.n.z * 250) + 0.6, { align: 'center' });
+    });
+
+    // Apparaten: kadertje met de code (KK, WM, ...) + groepnummer.
+    el.apps.forEach(a => {
+      const it = el.items.find(x => x.key === a.key), q = it.marker;
+      doc.setDrawColor(...RUN_COLORS.wcd);
+      doc.setFillColor(255, 255, 255);
+      doc.setLineWidth(0.2);
+      doc.rect(px(q.x) - 1.6, py(q.z) - 1.1, 3.2, 2.2, 'FD');
+      doc.setTextColor(...RUN_COLORS.wcd);
+      doc.setFontSize(3.6);
+      doc.text(a.code, px(q.x), py(q.z) + 0.5, { align: 'center' });
+      doc.text(String(a.group), px(q.x + a.face.n.x * 330), py(q.z + a.face.n.z * 330) + 0.5, { align: 'center' });
+    });
+
+    // Vloer-wcd: vierkantje met V + groepnummer.
+    el.floorWcds.forEach(w => {
+      doc.setDrawColor(...RUN_COLORS.wcd);
+      doc.setFillColor(255, 255, 255);
+      doc.setLineWidth(0.2);
+      doc.rect(px(w.x) - 1.1, py(w.z) - 1.1, 2.2, 2.2, 'FD');
+      doc.setTextColor(...RUN_COLORS.wcd);
+      doc.setFontSize(3.6);
+      doc.text('V' + w.group, px(w.x), py(w.z) + 0.5, { align: 'center' });
+    });
+
+    // Lampletters (zelfde letter als de schakelaar).
+    doc.setFontSize(3.6);
+    doc.setTextColor(...BLACK);
+    el.switches.forEach(s => s.lamps.forEach(l => doc.text(s.letter, px(l.x) + 0.9, py(l.z) - 0.7)));
+  }
+  // Twee regels (doc.text met een array).
+  const PLAN_LEGEND = [
+    'Elektra: MK = meterkast, kadertje = schakelaar(s) met letter (dezelfde letter staat bij de lampen erop), rood rondje = dubbele wcd (groepnummer), vierkantje = verdeeldoos in plafond;',
+    'rood kadertje = apparaat (KK kookgroep, WM wasmachine, DR droger, WP warmtepomp, OV oven, VW vaatwasser) met groepnummer, V = vloer-wcd; gestippeld = leidingen (geel licht, bruin schakeldraad, rood wcd/apparaat, groen buiten).'
+  ];
+
+  function drawSheet(doc, el, sheetOpts) {
+    const BLACK = PdfSheet.COLORS.BLACK;
+    doc.setFont('helvetica', 'normal');
+    doc.setTextColor(...BLACK);
+    doc.setFontSize(14);
+    doc.text('Elektra', 15, 18);
+    const t = (title) => ({ title, fontSize: 7, rowH: 4.4, lastColW: 16 });
+    let y = 30;
+    y = PdfSheet.table(doc, 15, y, [0, 12, 62, 74, 88, 104, 140, 156], ['Groep', 'Omschrijving', 'Fase', 'Aardlek', 'Automaat', 'Leiding', 'Punten', 'Lengte'],
+      el.groups.map(g => [String(g.nr), g.label, g.phase, `AL${g.rcd}`, g.breaker, ElektraModel.cableInfo(g.cable).label.replace(/ in buis.*/, ''),
+        g.kind === 'app' ? 'apparaat' : `${g.points} ${g.kind === 'wcd' ? 'wcd' : 'lamp'}`, fmt(g.meters) + ' m']),
+      t('Groepenverklaring (aansluiting 3×25 A)'));
+    y += 4;
+    y = PdfSheet.table(doc, 15, y, [0, 14, 60, 76, 92], ['Letter', 'Functie', 'Unit', 'Groep', 'Lampen'],
+      el.switches.map(s => [s.letter, s.label, s.unitId, String(s.group || '-'),
+        `${s.lamps.length} (${[['binnenspot', 'binnenspot'], ['boeideelspot', 'boeideel-spot'], ['gevellamp', 'gevellamp']]
+          .map(([k, l]) => [s.lamps.filter(x => x.kind === k).length, l]).filter(([n]) => n).map(([n, l]) => `${n} ${l}`).join(', ') || '-'})`]),
+      t('Schakelaars (letter staat ook bij de lampen op de plattegrond)'));
+    y += 4;
+    const k = el.meterkast;
+    const notes = [
+      k ? `Meterkast ${k.w}×${k.h}×${k.d} mm (b×h×d) in unit ${k.unitId}, wand ${k.element}, onderkant ${k.y} mm boven vloer.` : 'Geen meterkast geplaatst.',
+      `Schakelaars op ${el.settings.switchHeight} mm, wcd op ${el.settings.wcdHeight} mm (hart, boven bovenkant vloer).`,
+      `Leidinglengte = route via stijlen/plafond + ${el.settings.reserve} mm reserve (meterkast +${el.settings.meterkastReserve} mm), + ${el.settings.slack}% marge.`,
+      'Groepen per unit: licht B10 (1,5 mm²), wcd B16 (2,5 mm²); buitenlicht eigen groep B10 (XMvK), zelfde aardlek als het binnenlicht in dezelfde schakeldoos.',
+      'Per schakeldoos één verdeeldoos per groep; fasen en aardlekschakelaars om en om.',
+      'Apparaten (kookgroep, wasmachine, ...) automatisch geplaatst zolang er geen keuken/bijkeuken is; verplaatsbaar in de plattegrond.',
+      'Indicatief eerste ontwerp; uitvoering en controle volgens NEN 1010 door de installateur.'
+    ].concat(el.warnings.map(w => 'Let op: ' + w));
+    doc.setFontSize(7);
+    notes.forEach(n => { doc.text(n, 15, y); y += 4.2; });
+
+    let y2 = 30;
+    y2 = PdfSheet.table(doc, 205, y2, [0, 46, 102], ['Leidingtype', 'Gebruik', 'Lengte'],
+      el.cables.map(c => [c.label, c.use, fmt(c.meters) + ' m']), t('Leidingen (strekkende meter)'));
+    y2 += 4;
+    y2 = PdfSheet.table(doc, 205, y2, [0, 102], ['Draad', 'Lengte'], el.wires.map(w => [w.label, fmt(w.meters) + ' m']), t('Draad (per ader)'));
+    y2 += 4;
+    PdfSheet.table(doc, 205, y2, [0, 102], ['Buis', 'Lengte'], el.conduits.map(c => [c.label, fmt(c.meters) + ' m']), t('Installatiebuis'));
+
+    PdfSheet.table(doc, 330, 30, [0, 66], ['Onderdeel', 'Aantal'], el.materials.map(m => [m.naam, `${m.aantal} ${m.eenheid}`]), Object.assign(t('Materiaal'), { maxY: 240 }));
+
+    PdfSheet.titleBlock(doc, sheetOpts.project, sheetOpts);
+  }
+
+  // ------------------------------------------------------------
+  // Elektra op de bladen per onderdeel. Elk geeft een overlay-functie voor
+  // WallPdf/FloorPdf (opts.overlay) of null als er niets te tekenen is.
+  // ------------------------------------------------------------
+  const lineCol = (doc, type) => doc.setDrawColor(...runColor(type));
+  const clip = (p, q, b) => ElektraModel.clipPlan(p, q, b);
+  // Leidingstukken van alle buizen waarvoor test(p, q) geldt.
+  const conduitSegs = (el, test) => {
+    const out = [];
+    el.runs.forEach(r => {
+      if (!ElektraModel.cableInfo(r.type).conduit) return;
+      r.path.slice(1).forEach((q, i) => { const p = r.path[i]; if (test(p, q)) out.push({ type: r.type, p, q }); });
+    });
+    return out;
+  };
+  const labelBox = (doc, x, y, text, color) => {
+    const w = 1.6 + text.length * 1.05;
+    doc.setDrawColor(...color);
+    doc.setFillColor(255, 255, 255);
+    doc.setLineWidth(0.2);
+    doc.rect(x - w / 2, y - 1.2, w, 2.4, 'FD');
+    doc.setTextColor(...color);
+    doc.setFontSize(5);
+    doc.text(text, x, y + 0.7, { align: 'center' });
+  };
+
+  // Wand (vooraanzicht, wand-x zoals de openingen): buizen in de wand,
+  // schakelaars, wcd's, apparaten en de meterkast op dit wandstuk.
+  function wallOverlay(el, piece) {
+    if (!el || !el.enabled) return null;
+    const on = (p) => p.wall && p.wall.piece === piece;
+    const segs = conduitSegs(el, (p, q) => on(p) && on(q));
+    const combos = el.combos.filter(c => c.face.piece === piece), wcds = el.wcds.filter(w => w.face.piece === piece);
+    const apps = el.apps.filter(a => a.face.piece === piece), mk = el.meterkast && el.meterkast.face.piece === piece ? el.meterkast : null;
+    if (!segs.length && !combos.length && !wcds.length && !apps.length && !mk) return null;
+    const BLACK = PdfSheet.COLORS.BLACK;
+    return (doc, pu, py) => {
+      doc.setLineWidth(0.35);
+      segs.forEach(sg => {
+        const a = ElektraModel.wallCoords(sg.p.wall, sg.p), b = ElektraModel.wallCoords(sg.q.wall, sg.q);
+        lineCol(doc, sg.type);
+        doc.line(pu(a.u), py(a.y), pu(b.u), py(b.y));
+      });
+      if (mk) {
+        doc.setDrawColor(...BLACK);
+        doc.setFillColor(110, 110, 110);
+        doc.setLineWidth(0.25);
+        doc.rect(pu(mk.u - mk.w / 2), py(mk.y + mk.h), (pu(mk.u + mk.w / 2) - pu(mk.u - mk.w / 2)), py(mk.y) - py(mk.y + mk.h), 'FD');
+        doc.setTextColor(255, 255, 255);
+        doc.setFontSize(6);
+        doc.text('MK', pu(mk.u), py(mk.y + mk.h / 2) + 1, { align: 'center' });
+      }
+      combos.forEach(c => labelBox(doc, pu(c.u), py(c.y), c.switches.map(x => x.letter).join(' '), BLACK));
+      wcds.forEach(w => labelBox(doc, pu(w.u), py(w.y), `wcd ${w.group}`, RUN_COLORS.wcd));
+      apps.forEach(a => labelBox(doc, pu(a.u), py(a.y), `${a.code} ${a.group}`, RUN_COLORS.wcd));
+    };
+  }
+
+  // Vloer van een unit (bovenaanzicht vanaf linksvoor): buizen in de vloer + vloer-wcd's.
+  function floorOverlay(el, unit) {
+    if (!el || !el.enabled) return null;
+    const r = unit.rect, b = { x0: r.x0, x1: r.x1, z0: r.z0, z1: r.z1 };
+    const segs = conduitSegs(el, (p, q) => p.floor && q.floor).map(sg => Object.assign(sg, { c: clip(sg.p, sg.q, b) })).filter(sg => sg.c);
+    const vw = el.floorWcds.filter(w => w.unitId === unit.id);
+    if (!segs.length && !vw.length) return null;
+    return (doc, px, py) => {
+      doc.setLineWidth(0.35);
+      segs.forEach(sg => {
+        const [a, c] = sg.c;
+        if (Math.hypot(c.x - a.x, c.z - a.z) < 1) return;
+        lineCol(doc, sg.type);
+        doc.line(px(a.x - r.x0), py(a.z - r.z0), px(c.x - r.x0), py(c.z - r.z0));
+      });
+      vw.forEach(w => labelBox(doc, px(w.x - r.x0), py(w.z - r.z0), `vloer-wcd ${w.group}`, RUN_COLORS.wcd));
+    };
+  }
+
+  // Dakvlak (dek zoals de dakbladen, zelfde omrekening als de doorvoeren in
+  // RoofModel.computeUnitRoof): buizen boven het plafond, verdeeldozen en
+  // binnenspots (met letter) in dit vlak.
+  function roofOverlay(el, unit, pl) {
+    if (!el || !el.enabled) return null;
+    const dm = ElektraModel.roofDeckMap(unit, pl), map = dm.map, b = dm.bounds;
+    const inside = (p) => p.x >= b.x0 - 0.5 && p.x <= b.x1 + 0.5 && p.z >= b.z0 - 0.5 && p.z <= b.z1 + 0.5;
+    const segs = conduitSegs(el, (p, q) => p.ceil && q.ceil).map(sg => Object.assign(sg, { c: clip(sg.p, sg.q, b) })).filter(sg => sg.c);
+    const boxes = el.boxes.filter(bx => inside(bx));
+    const lamps = [];
+    el.switches.forEach(sw => sw.lamps.forEach(l => { if (l.kind === 'binnenspot' && inside(l)) lamps.push({ l, letter: sw.letter }); }));
+    if (!segs.length && !boxes.length && !lamps.length) return null;
+    const BLACK = PdfSheet.COLORS.BLACK;
+    return (doc, px, py) => {
+      doc.setLineWidth(0.35);
+      segs.forEach(sg => {
+        const a = map(sg.c[0]), c = map(sg.c[1]);
+        if (Math.hypot(c.sx - a.sx, c.sy - a.sy) < 1) return;
+        lineCol(doc, sg.type);
+        doc.line(px(a.sx), py(a.sy), px(c.sx), py(c.sy));
+      });
+      doc.setLineWidth(0.2);
+      boxes.forEach(bx => { const m = map(bx); lineCol(doc, 'schakel'); doc.rect(px(m.sx) - 0.9, py(m.sy) - 0.9, 1.8, 1.8, 'S'); });
+      doc.setFontSize(4);
+      lamps.forEach(({ l, letter }) => {
+        const m = map(l);
+        doc.setDrawColor(...BLACK);
+        doc.setFillColor(255, 233, 168);
+        doc.circle(px(m.sx), py(m.sy), 0.8, 'FD');
+        doc.setTextColor(...BLACK);
+        doc.text(letter, px(m.sx) + 1.1, py(m.sy) - 0.8);
+      });
+    };
+  }
+
+  return { RUN_COLORS, drawPlan, drawSheet, PLAN_LEGEND, wallOverlay, floorOverlay, roofOverlay };
+})();

js/floor/floor-model.js

@@ -216,9 +216,14 @@ window.FloorModel = (() => {
   // Vloerafwerking (bovenop de OSB). Texturen in assets/textures/vloer/,
   // naadloos herhalend; tileMM = maat van één tegel van de textuur.
   const FINISHES = {
-    geen: { label: 'Geen (OSB)' },
-    visgraat_001: { label: 'Visgraat (Hongaarse punt)', file: 'assets/textures/vloer/visgraat_001.jpg', tileMM: 3000 }
+    geen: { label: 'Geen (OSB)', color: '#cda86a' },
+    visgraat_001: { label: 'Visgraat (Hongaarse punt)', color: '#a28670', file: 'assets/textures/vloer/visgraat_001.jpg', tileMM: 3000 }
   };
+  // Voorvertoning (assets/textures/vloer/thumb/<px>/<naam>.png) of null.
+  function finishThumbUrl(key, px) {
+    const f = FINISHES[key];
+    return f && f.file ? f.file.replace(/[^/]+$/, (n) => `thumb/${px || 64}/` + n.replace(/\.jpg$/, '.png')) : null;
+  }
   const finishMaterials = {};
   function finishMaterial(key) {
     const f = FINISHES[key];
@@ -252,7 +257,9 @@ window.FloorModel = (() => {
   // Z = -diepte/2), Y = dikte (balkhoogte + OSB). Balken en isolatie zijn
   // simpele dozen; de OSB-onderlaag is een geëxtrudeerd Shape met ronde
   // uitsparingen voor de doorvoeren.
-  // opts: { materials, osbVisible, finish }
+  // opts: { materials, osbVisible, finish, outerJoistsOnly }
+  // outerJoistsOnly: alleen de buitenste balken en kopbalken (de rest is
+  // ingesloten, bijv. dakbalken tussen plafondplaat en dakbedekking).
   // finish (optioneel): { key (FINISHES), originX, originZ } — afwerking als
   // dun vlak op de OSB; UV's in meters vanaf origin (m, woning-coördinaten
   // van het vloermidden), zodat het patroon over units doorloopt.
@@ -272,7 +279,8 @@ window.FloorModel = (() => {
     const rims = calcData.rims || {};
     const joistLenM = (calcData.joistLen || depth) * toM;
     const joistZ = ((rims.front ? joistW : 0) - (rims.back ? joistW : 0)) / 2 * toM;
-    joists.forEach(xMM => {
+    joists.forEach((xMM, i) => {
+      if (opts.outerJoistsOnly && i > 0 && i < joists.length - 1) return;
       const geo = new THREE.BoxGeometry(joistWM, joistHM, joistLenM);
       const mesh = new THREE.Mesh(geo, woodMaterial);
       mesh.position.set(xMM * toM, joistHM / 2, joistZ);
@@ -393,7 +401,7 @@ window.FloorModel = (() => {
   }
 
   return {
-    FINISHES, finishMaterial, validateState, computeFrame, topHeight, resolveOpenings: resolveFloorOpenings, computeChassisWheels,
+    FINISHES, finishMaterial, finishThumbUrl, validateState, computeFrame, topHeight, resolveOpenings: resolveFloorOpenings, computeChassisWheels,
     computeSpecs, computeFromState, createMaterials, build3D
   };
 })();

js/floor/floor-pdf.js

@@ -117,6 +117,10 @@ window.FloorPdf = (() => {
       doc.text('#' + o.id, cx, cy - o.r * scale - 2, { align: 'center' });
     });
 
+    // Extra laag van de aanroeper (bijv. elektra, ElektraPdf): overlay(doc, px, py),
+    // px/py = mm vanaf linksvoor van het dek -> blad-mm.
+    if (opts.overlay) opts.overlay(doc, px, py);
+
     const drawDimLine = (x1, y1, x2, y2) => PdfSheet.dimLine(doc, x1, y1, x2, y2);
 
     doc.setDrawColor(...BLUE);

js/house/house-model.js

@@ -64,7 +64,7 @@ window.HouseModel = (() => {
       //   rabat = vochtdoek + kruislat + rabat (richting: cladding);
       //   steen = cement-gebonden plaat + steenblok (stone = steencode, WallModel.STONE).
       // Het trasraam (eigen afwerking/steen) komt onder beide.
-      facade: { type: 'rabat', stone: 'K490' },
+      facade: { type: 'rabat', stone: 'K490', rabatColor: 'naturel' }, // rabatColor: WallModel.RABAT_COLORS
       cladding: 'horizontaal', // richting rabat, voorlopig voor alle buitenwanden
       // Trasraam: cement-gebonden plaat onderaan alle vochtdoek-gevels, hoogte
       // vanaf het beloopbare vloervlak (WallModel.trasraamFor).
@@ -78,7 +78,8 @@ window.HouseModel = (() => {
       groundLevel: 0, // maaiveld: zoveel mm onder het loopvlak (bovenkant vloer); voor de 3D-omgeving
       floorFinish: 'visgraat_001', // vloerafwerking (FloorModel.FINISHES), voorlopig globaal
       roof: Object.assign({}, RoofModel.DEFAULT_SETTINGS),
-      lighting: Object.assign({}, LightingModel.DEFAULT_SETTINGS)
+      lighting: Object.assign({}, LightingModel.DEFAULT_SETTINGS),
+      elektra: ElektraModel.normalizeSettings() // meterkast, schakelaars, wcd, leidingen (ElektraModel)
     };
   }
 
@@ -98,21 +99,52 @@ window.HouseModel = (() => {
     return { type, stone, override: !!o };
   }
 
-  // TIJDELIJK (testen): een nieuwe woning is standaard het testontwerp:
-  // L-vorm, unit A lessenaar (noord 2600, zuid 3200) met riet. Op false
-  // zetten om terug te gaan naar de gewone standaard (één unit).
+  // TIJDELIJK (testen): een nieuwe woning is standaard het voorbeeldontwerp
+  // (ook als json/premade/vlinderwoning.json): 92 m², A (straat) en B (tuin)
+  // met een vlinderdak (lessenaars laag op de naad), C een lage tuinkamer
+  // met plat dak, veel glas. Op false zetten voor de gewone standaard (één unit).
   const TEST_DEFAULT = true;
 
+  function createVlinderwoning() {
+    const st = { project: createEmptyProject(), settings: createDefaultSettings(), units: [], interiorWalls: [] };
+    st.project.naam = 'Vlinderwoning';
+    st.settings.trasraam.finish = 'K490';
+    const A = createUnitEntry('A', null, { width: 10000, depth: 4000, windowOn: [] });
+    const B = createUnitEntry('B', { to: 'A', side: 'achter', align: 'start', offset: 0 }, { width: 10000, depth: 3600, windowOn: [] });
+    const C = createUnitEntry('C', { to: 'A', side: 'rechts', align: 'start', offset: 0 }, { width: 4000, depth: 4000, windowOn: [] });
+    st.units.push(A, B, C);
+    const h = (u, k, l, r) => Object.assign(u.unit.walls[k].wall, { heightAll: Math.min(l, r), heightLeft: l, heightRight: r, heightMid: null });
+    const HI = 3400, LO = 2700;
+    h(A, 'voor', HI, HI); h(A, 'achter', LO, LO); h(A, 'links', HI, LO); h(A, 'rechts', LO, HI);
+    h(B, 'voor', LO, LO); h(B, 'achter', HI, HI); h(B, 'links', LO, HI); h(B, 'rechts', HI, LO);
+    ['voor', 'achter', 'links', 'rechts'].forEach(k => h(C, k, LO, LO));
+    A.roof.covering = B.roof.covering = 'riet_002';
+    C.roof.covering = 'dakleer';
+    // Vulling (KozijnModel): deuren met glasstrook, ramen met een
+    // borstwering (vanaf 900 mm) met ventilatierooster.
+    const ops = (u, side, list) => {
+      u.unit.walls[side].openings = list.map(([type, w, hh, y, anchor, offset], i) => ({
+        id: i + 1, type, w, h: hh, y, anchor, offset,
+        fill: Object.assign(KozijnModel.defaultFill(type), type === 'raam' ? { rooster: y >= 900 } : { glas: true })
+      }));
+    };
+    ops(A, 'voor', [['raam', 1200, 1100, 1000, 'left', 700], ['voordeur', 1150, 2300, 0, 'left', 2700], ['raam', 500, 2300, 0, 'left', 3950],
+      ['raam', 2200, 600, 2000, 'left', 5200], ['raam', 900, 2100, 300, 'right', 1800], ['raam', 900, 2100, 300, 'right', 600]]);
+    ops(A, 'links', [['raam', 1400, 1200, 900, 'middle', 0]]);
+    ops(B, 'achter', [['raam', 600, 2600, 250, 'left', 800], ['raam', 600, 2600, 250, 'left', 1700], ['deur', 900, 2300, 0, 'middle', -1600],
+      ['raam', 2000, 2300, 0, 'middle', 0], ['deur', 900, 2300, 0, 'middle', 1600], ['raam', 1200, 1200, 1000, 'right', 700]]);
+    ops(B, 'links', [['raam', 1600, 500, 1700, 'middle', 0]]);
+    ops(B, 'rechts', [['raam', 1000, 1300, 900, 'left', 500], ['raam', 1000, 1300, 900, 'right', 500]]);
+    ops(C, 'voor', [['raam', 2600, 1500, 700, 'middle', 0]]);
+    ops(C, 'rechts', [['raam', 1100, 2100, 250, 'left', 500], ['raam', 1100, 2100, 250, 'right', 500]]);
+    ops(C, 'achter', [['deur', 900, 2200, 0, 'left', 500], ['raam', 2000, 2200, 0, 'right', 400]]);
+    ensureSeamWalls(st);
+    computeParts(st, { skip3D: true });
+    return st;
+  }
+
   function createDefaultState(template) {
-    if (TEST_DEFAULT && (!template || template === 'single')) {
-      const st = createDefaultState('L');
-      const A = st.units[0], W = A.unit.walls;
-      const h = (k, l, r) => Object.assign(W[k].wall, { heightAll: Math.min(l, r), heightLeft: l, heightRight: r, heightMid: null });
-      h('achter', 3200, 3200); h('links', 2600, 3200); h('rechts', 3200, 2600);
-      A.roof.covering = 'riet_001';
-      computeParts(st, { skip3D: true });
-      return st;
-    }
+    if (TEST_DEFAULT && (!template || template === 'single')) return createVlinderwoning();
     const state = { project: createEmptyProject(), settings: createDefaultSettings(), units: [], interiorWalls: [] };
     state.units.push(createUnitEntry('A', null, { width: 6000, depth: 3000 }));
     if (template === 'L') {
@@ -120,12 +152,12 @@ window.HouseModel = (() => {
       // Standaard L-woning: voordeur midden in de noordgevel van A, drie
       // ramen in de zuidgevel van B (bovenkanten gelijk met de voordeur).
       state.units[0].unit.walls.voor.openings = [
-        { id: 1, type: 'voordeur', w: 1150, h: 2150, y: 0, anchor: 'middle', offset: 0 }
+        { id: 1, type: 'voordeur', w: 1150, h: 2150, y: 0, anchor: 'middle', offset: 0, fill: KozijnModel.defaultFill('voordeur') }
       ];
       state.units[1].unit.walls.achter.openings = [
-        { id: 1, type: 'raam', w: 500, h: 1900, y: 250, anchor: 'left', offset: 450 },
-        { id: 2, type: 'raam', w: 500, h: 1900, y: 250, anchor: 'middle', offset: 0 },
-        { id: 3, type: 'raam', w: 500, h: 1900, y: 250, anchor: 'right', offset: 450 }
+        { id: 1, type: 'raam', w: 500, h: 1900, y: 250, anchor: 'left', offset: 450, fill: KozijnModel.defaultFill('raam') },
+        { id: 2, type: 'raam', w: 500, h: 1900, y: 250, anchor: 'middle', offset: 0, fill: KozijnModel.defaultFill('raam') },
+        { id: 3, type: 'raam', w: 500, h: 1900, y: 250, anchor: 'right', offset: 450, fill: KozijnModel.defaultFill('raam') }
       ];
     }
     ensureSeamWalls(state);
@@ -276,7 +308,8 @@ window.HouseModel = (() => {
     wall.wall.heightAll = wall.wall.heightLeft = wall.wall.heightRight = height || wall.wall.heightAll;
     wall.materials = { interior: 'spaanplaat', exterior: 'geen' };
     const d = WallModel.OPENING_TYPES.deur;
-    wall.openings = [{ id: 1, type: 'deur', w: d.w, h: d.h, y: d.y, anchor: 'middle', offset: 0 }];
+    // Binnendeur: wit, zonder glas.
+    wall.openings = [{ id: 1, type: 'deur', w: d.w, h: d.h, y: d.y, anchor: 'middle', offset: 0, fill: Object.assign(KozijnModel.defaultFill('deur'), { out: 'wit', in: 'wit' }) }];
     setThickness(wall, DEFAULT_SEAM_LEAF_MM);
     return wall;
   }
@@ -296,6 +329,21 @@ window.HouseModel = (() => {
     });
   }
 
+  // Naadwanden van één unit bijwerken na een gewijzigde koppeling: naadwanden
+  // van die unit waarvan de naad niet meer bestaat vervallen, ontbrekende
+  // naden krijgen er een.
+  function syncSeamWalls(state, unitId) {
+    const { seams } = computeSeams(unitRects(state));
+    state.interiorWalls = state.interiorWalls.filter(iw => !iw.seam || (iw.seam.a !== unitId && iw.seam.b !== unitId) ||
+      seams.some(sm => sameSeam(iw.seam, sm.a, sm.b)));
+    ensureSeamWalls(state, unitId);
+  }
+  // Naden van een unit zonder naadwand (bijv. verwijderd): [{ a, b }].
+  function missingSeamWalls(state, unitId) {
+    const { seams } = computeSeams(unitRects(state));
+    return seams.filter(sm => (sm.a === unitId || sm.b === unitId) && !state.interiorWalls.some(iw => iw.seam && sameSeam(iw.seam, sm.a, sm.b)));
+  }
+
   function interiorLayout(iw) {
     const dx = iw.x2 - iw.x1, dz = iw.z2 - iw.z1;
     const alongX = Math.abs(dx) >= Math.abs(dz);
@@ -310,13 +358,27 @@ window.HouseModel = (() => {
 
   // ------------------------------------------------------------
   // Alle onderdelen doorgerekend (+ 3D, tenzij opts.skip3D).
-  // opts: { wallMaterials, floorMaterials, beplatingVisible, skip3D }
+  // opts: { wallMaterials, floorMaterials, ..., stage, lampenVisible, skip3D }
+  // stage = bouwfase (BuildStages, standaard afgewerkt): bepaalt welke lagen
+  // gebouwd worden; de berekening (stats, totalen) is altijd volledig.
   // ------------------------------------------------------------
   // Past de woning-brede instellingen toe op de onderdeel-states (muteert
   // state): h.o.h. van alle wanden, en de dakmaat als die de vloer volgt.
+  // Grenzen (UnitModel.LIMITS) afdwingen: vloermaat, goot/plat dak en nok.
+  // Muteert state.
+  function enforceLimits(state) {
+    const L = UnitModel.LIMITS;
+    state.units.forEach(u => {
+      UnitModel.clampSize(u.unit.floor.floor);
+      const f = UnitModel.roofForm(u.unit);
+      if (f.low > L.eave + 0.5 || f.high > L.ridge + 0.5) UnitModel.applyRoofForm(u.unit, f);
+    });
+  }
+
   function applyGlobalSettings(state) {
     const sp = state.settings.spacing;
     const tr = state.settings.trasraam;
+    enforceLimits(state);
     state.units.forEach(u => {
       const trasraam = tr.enabled ? WallModel.trasraamFor(tr.height, tr.finish) : null;
       Object.entries(u.unit.walls).forEach(([side, ws]) => {
@@ -324,8 +386,8 @@ window.HouseModel = (() => {
         ws.wall.maxSpacing = sp.exterior.max;
         const fc = facadeFor(state, u, side);
         ws.materials = Object.assign({}, ws.materials, fc.type === 'steen'
-          ? { exterior: 'cementplaat', stone: fc.stone, cladding: state.settings.cladding, trasraam }
-          : { exterior: 'vochtdoek', stone: null, cladding: state.settings.cladding, trasraam });
+          ? { exterior: 'cementplaat', stone: fc.stone, cladding: state.settings.cladding, trasraam, rabatColor: null }
+          : { exterior: 'vochtdoek', stone: null, cladding: state.settings.cladding, trasraam, rabatColor: state.settings.facade.rabatColor });
       });
       if (u.roof.followFloor) {
         u.roof.deck.floor.width = u.unit.floor.floor.width;
@@ -384,6 +446,8 @@ window.HouseModel = (() => {
   function computeParts(state, opts) {
     const o = opts || {};
     const build = !o.skip3D;
+    const stage = BuildStages.clamp(o.stage);
+    const shows = (key) => BuildStages.shows(stage, key);
     applyGlobalSettings(state);
     const rects = unitRects(state);
     const rectById = {};
@@ -391,12 +455,11 @@ window.HouseModel = (() => {
     const wallThickness = (id, side) => WallModel.thicknessOf(WallModel.configFromState(state.units.find(u => u.id === id).unit.walls[side]));
     const { cuts, seams } = computeSeams(rects, wallThickness);
 
-    function buildWall(config, frame, buitenMateriaal, cladding, trasraam, skinExt, facade, skinFrom, spaanplaatBelow, stone, skinAbove, trimTop) {
+    function buildWall(config, frame, buitenMateriaal, cladding, trasraam, skinExt, facade, skinFrom, spaanplaatBelow, stone, skinAbove, trimTop, battenAbove) {
       if (!build) return { group: null, stats: null, specs: null };
       const built = WallModel.build3D(config, frame, {
-        materials: o.wallMaterials, buitenMateriaal, cladding, trasraam, skinExt, facade, skinFrom, spaanplaatBelow, stone, skinAbove, trimTop,
-        painted: state.settings.interiorPaint,
-        spaanplaatVisible: o.beplatingVisible !== false, buitenVisible: o.beplatingVisible !== false
+        materials: o.wallMaterials, buitenMateriaal, cladding, trasraam, skinExt, facade, skinFrom, spaanplaatBelow, stone, skinAbove, trimTop, battenAbove,
+        painted: state.settings.interiorPaint && shows('afwerking'), stage, rabatColor: state.settings.facade.rabatColor
       });
       return { group: built.group, stats: built.stats, specs: WallModel.computeSpecs(config, built.stats, buitenMateriaal) };
     }
@@ -443,21 +506,22 @@ window.HouseModel = (() => {
       const floorData = FloorModel.computeFromState(u.unit.floor, rims);
       const floorSpecs = FloorModel.computeSpecs(floorData.calcData, floorData.resolvedOpenings);
       const floorGroup = build ? FloorModel.build3D(floorData.calcData, floorData.resolvedOpenings, floorData.chassisData, {
-        materials: o.floorMaterials, osbVisible: o.beplatingVisible !== false,
-        finish: { key: state.settings.floorFinish, originX: rect.cx * 0.001, originZ: rect.cz * 0.001 }
+        materials: o.floorMaterials, osbVisible: shows('beplating'),
+        finish: shows('afwerking') ? { key: state.settings.floorFinish, originX: rect.cx * 0.001, originZ: rect.cz * 0.001 } : null
       }) : null;
 
       const walls = layout.walls.map(wl => wallOf(u, rect, layout, wl));
 
       // Dak: dek = vloer-state (180° gespiegeld, RoofModel), in de vorm die
-      // de wanden aangeven (plat, lessenaar of zadel; RoofModel.computeShape).
+      // de wanden aangeven (plat, lessenaar, zadel, mansarde of wolfsdak;
+      // RoofModel.computeShape).
       const shape = RoofModel.computeShape(u.unit, layout);
       const deckFrame = FloorModel.computeFrame(u.roof.deck.floor);
       const roofW = deckFrame.width, roofD = deckFrame.depth;
       const ox = u.roof.offsetX || 0, oz = u.roof.offsetZ || 0;
       const ur = RoofModel.computeUnitRoof(u.roof, shape, { x0: ox - roofW / 2, x1: ox + roofW / 2, z0: oz - roofD / 2, z1: oz + roofD / 2 }, rims);
       const roofCx = rect.cx + ox, roofCz = rect.cz + oz;
-      const shapeLabel = { plat: 'plat', lessenaar: 'lessenaar', zadel: 'zadel' }[shape.type];
+      const shapeLabel = { plat: 'plat', lessenaar: 'lessenaar', zadel: 'zadel', mansarde: 'mansarde', wolf: 'wolfsdak' }[shape.type];
       const multi = ur.planes.length > 1;
       ur.planes.forEach((pl, i) => {
         pl.element = `${u.id}-D${i + 1}`;
@@ -465,7 +529,8 @@ window.HouseModel = (() => {
         pl.label = `Unit ${u.id} dak${multi ? ' deel ' + (i + 1) : ''} (${shapeLabel}${deg ? ', ' + String(deg).replace('.', ',') + '°' : ''})`;
       });
       const roof = {
-        element: `${u.id}-D1`, shape, planes: ur.planes, specs: ur.specs,
+        element: `${u.id}-D1`, shape, covering: ur.covering, planes: ur.planes, specs: ur.specs,
+        unitRoof: ur, // o.a. het bovenste deel van een wolfsdak (cap, RoofModel.capRegions)
         rect: { x0: roofCx - roofW / 2, x1: roofCx + roofW / 2, z0: roofCz - roofD / 2, z1: roofCz + roofD / 2, cx: roofCx, cz: roofCz, W: roofW, D: roofD },
         base: layout.floorTop, // 3D: group-Y = 0 op het loopvlak
         // Onderkant plafond resp. bovenkant dakleer op (x, z) (woning-mm, absoluut).
@@ -473,12 +538,11 @@ window.HouseModel = (() => {
         topAt: (x, z) => layout.floorTop + ur.topAt(x - rect.cx, z - rect.cz),
         ridges: ur.ridges.map(r => ({ axis: r.axis, value: r.value + (r.axis === 'x' ? rect.cx : rect.cz) })),
         top: layout.floorTop + ur.maxTop,
-        // Zichtbaarheid zoals wanden/vloeren: plafondplaat + dakleer (EPDM)
-        // horen bij "Beplating".
+        // Bouwfase: plafondplaat bij "beplating", bedekking bij "gevel".
         group: build ? RoofModel.buildUnit3D(ur, {
           materials: o.roofMaterials,
-          osbVisible: o.beplatingVisible !== false,
-          dakleerVisible: o.beplatingVisible !== false
+          osbVisible: shows('beplating'),
+          dakleerVisible: shows('gevel')
         }) : null
       };
 
@@ -625,15 +689,17 @@ window.HouseModel = (() => {
         const axisOf = (q) => horiz ? q.x - u.rect.cx : q.z - u.rect.cz;
         const W = lf.place.width;
         const pL = axisOf(UnitModel.localToWorld(lf.place, -W / 2, 0)), pR = axisOf(UnitModel.localToWorld(lf.place, W / 2, 0));
-        const peak = prof.length > 2 ? prof[1] : null;
         // Opbouw erboven (raiseSeamWalls): het deel stopt op de voet daarvan.
         const cap = raisedCap[`${lf.uid}|${lf.uid === sm.a ? sm.b : sm.a}`];
         const lim = (h) => cap !== undefined ? Math.min(h, cap) : h;
         const hL = lim(RoofModel.profileHeight(prof, pL)), hR = lim(RoofModel.profileHeight(prof, pR));
-        const hasPeak = !!peak && peak.p > Math.min(pL, pR) + 1 && peak.p < Math.max(pL, pR) - 1 && lim(peak.h) > Math.max(hL, hR) + 0.5;
+        // Tussenpunten (nok, knikken) die in het deel vallen, als fractie vanaf links.
+        const lo = Math.min(pL, pR), hi = Math.max(pL, pR);
+        const inner = prof.slice(1, -1).filter(q => q.p > lo + 1 && q.p < hi - 1)
+          .map(q => ({ f: Math.abs(q.p - pL) / (hi - lo), h: Math.round(lim(q.h)) })).sort((a, b) => a.f - b.f);
         return {
           heightLeft: Math.round(hL), heightRight: Math.round(hR),
-          heightMid: hasPeak ? Math.round(lim(peak.h)) : null, peakX: hasPeak ? Math.abs(peak.p - pL) : undefined
+          heightMid: null, peakX: undefined, topPts: inner.length ? inner : undefined
         };
       };
       const paramsOf = (lf) => Object.assign({}, iw.wall.wall, { width: lf.place.width }, heightsOf(lf));
@@ -654,7 +720,7 @@ window.HouseModel = (() => {
       const first = leaves[0];
       const firstParams = paramsOf(first);
       // Voor de wand-editor: breedte en daklijn van het eerste deel.
-      Object.assign(iw.wall.wall, { width: first.place.width, heightLeft: firstParams.heightLeft, heightRight: firstParams.heightRight, heightMid: firstParams.heightMid });
+      Object.assign(iw.wall.wall, { width: first.place.width, heightLeft: firstParams.heightLeft, heightRight: firstParams.heightRight, heightMid: null, topPts: firstParams.topPts });
       const firstConfig = WallModel.buildConfig(firstParams, iw.wall.openings || []);
       const toLocalU = (pl, q) => {
         const c = Math.cos(pl.rotY), sn = Math.sin(pl.rotY);
@@ -666,8 +732,11 @@ window.HouseModel = (() => {
           const ops = firstConfig.openings.map(op => {
             const wa = UnitModel.localToWorld(first.place, -first.place.width / 2 + op.x, 0);
             const wb = UnitModel.localToWorld(first.place, -first.place.width / 2 + op.x + op.w, 0);
-            const u = Math.min(toLocalU(lf.place, wa), toLocalU(lf.place, wb));
-            return { id: op.id, type: op.type, w: op.w, h: op.h, y: op.y, anchor: 'left', offset: Math.round(u) };
+            const ua = toLocalU(lf.place, wa), ub = toLocalU(lf.place, wb);
+            // Gespiegeld (andere kijkrichting): schuine bovenzijde klapt om.
+            // Het kozijn (fill) staat alleen in het eerste deel.
+            const flip = ua > ub;
+            return { id: op.id, type: op.type, w: op.w, h: flip ? op.hR : op.h, hR: flip ? op.h : op.hR, y: op.y, anchor: 'left', offset: Math.round(Math.min(ua, ub)) };
           });
           config = WallModel.buildConfig(paramsOf(lf), ops);
         }
@@ -689,24 +758,39 @@ window.HouseModel = (() => {
       });
     }
 
+    // Schuine regel op de bovenregel (WallModel, CONFIG.topWedge): helt het
+    // dak dwars over de wand (goot van een zadel-/lessenaardak, onder een
+    // wolfseind), dan zit er tussen de vlakke bovenregel en de onderkant van
+    // het dak een wig. Per positie langs de wand de hoogte van die wig aan
+    // de buiten- (o) en binnenkant (i) van het regelwerk (mm), of null.
+    function topWedge(p, roof) {
+      const cfg = p.config, half = cfg.wallWidth / 2, zF = cfg.studDepth / 2, tl = WallModel.topLine(cfg);
+      const xs = new Set([-half, half].concat(tl.kinks));
+      for (let x = -half + 250; x < half; x += 250) xs.add(x);
+      const pts = [...xs].sort((a, b) => a - b).map(x => {
+        const top = p.place.floorTop + tl.at(x);
+        const at = (z) => { const w = UnitModel.localToWorld(p.place, x, z); return Math.max(0, Math.min(800, roof.ceilingAt(w.x, w.z) - top)); };
+        return { x, o: Math.round(at(zF)), i: Math.round(at(-zF)) };
+      });
+      return pts.some(q => Math.max(q.o, q.i) >= 5) ? { pts } : null;
+    }
+
     // Doek en latwerk volgen de hele gevel (niet per unit/wandstuk), ook
     // over het blootliggende deel van een naadwand. Daarna pas bouwen.
     const extPieces = [];
     units.forEach(u => u.walls.forEach(w => w.pieces.forEach(p => extPieces.push(p))));
-    // Gevel tot onder de dakrand: tussen wandbovenkant en onderkant boeideel
-    // resp. daktrim zit het dakpakket (dek + bedekking, verschilt per dak).
-    // De buitenlagen van de wand lopen daar door (skinAbove, mm), zodat er
-    // geen dakrand bloot ligt, bij elke daksoort.
-    const roofSt = RoofModel.normalizeSettings(state.settings.roof);
-    const flatTopsPre = units.filter(u => u.roof.shape.type === 'plat').map(u => u.roof.top);
-    const flatTopPre = flatTopsPre.length ? Math.max(...flatTopsPre) : 0;
+    // Gevel tot de bovenkant van het dak: tussen wandbovenkant en bovenkant
+    // dak zit het dakpakket (dek + bedekking, verschilt per dak). De
+    // buitenlagen van de wand lopen daar door (skinAbove, mm). Boeideel en
+    // daktrim komen daar bovenop (computeEdge, facadeDepth); de houtconstructie
+    // en de gevel zijn gelijk met of zonder boeideel.
     units.forEach(u => {
-      const su = state.units.find(x => x.id === u.id);
-      const below = su.roof.fascia !== false ? roofSt.fasciaHeight - RoofModel.EDGE_ABOVE_MM : roofSt.trimHeight;
       u.walls.forEach(w => w.pieces.forEach(p => {
         const m = UnitModel.localToWorld(p.place, 0, p.place.thickness / 2);
-        const top = u.roof.shape.type === 'plat' ? flatTopPre : u.roof.topAt(m.x, m.z);
-        p.skinAbove = Math.max(0, Math.round(top - u.roof.ceilingAt(m.x, m.z) - below));
+        // (vanaf de bovenkant van de wand: daar kan nog een schuine regel op)
+        const wallTop = p.place.floorTop + WallModel.topLine(p.config).at(0);
+        p.skinAbove = Math.max(0, Math.round(u.roof.topAt(m.x, m.z) - Math.min(wallTop, u.roof.ceilingAt(m.x, m.z))));
+        p.config.topWedge = topWedge(p, u.roof);
         // Binnenhoek-doorloop (negatieve skinExt): tot de bovenkant van het
         // dak van de buur-unit die daar staat geen buitenlagen (trimTop).
         const e = p.skinExt || {}, W = p.place.width;
@@ -719,9 +803,61 @@ window.HouseModel = (() => {
         });
       }));
     });
+    // Dakrand (boeidelen/daktrim) als één doorlopende rand om alle daken;
+    // boeidelen aan/uit per unit. De rand volgt de dakvorm (en hoogte) van
+    // de unit waar de ribbe bij hoort, ook bij platte daken: een hoogte-
+    // verschil verspringt, en vanaf de boeideelhoogte krijgt het hoge dak een
+    // eigen rand en loopt die van het lage door (RoofModel.computeEdge).
+    // Dikte van de gevelafwerking langs een dakrand-ribbe (boeideel komt
+    // erbovenop): gevelstuk op die lijn met dezelfde buitenrichting (+), of
+    // een gevel van een ander deel die naar dit dak toe kijkt (-).
+    const facadeDepth = (a, b, nrm) => {
+      const horiz = Math.abs(nrm.z) > 0.5;
+      const line = horiz ? a.z : a.x, s0 = Math.min(horiz ? a.x : a.z, horiz ? b.x : b.z), s1 = Math.max(horiz ? a.x : a.z, horiz ? b.x : b.z);
+      let best = 0, bestOv = 1;
+      extPieces.forEach(p => {
+        const pn = { x: p.place.normal.x, z: p.place.normal.y };
+        const dot = pn.x * nrm.x + pn.z * nrm.z;
+        if (Math.abs(dot) < 0.5) return;
+        const q0 = UnitModel.localToWorld(p.place, -p.place.width / 2, p.place.thickness / 2), q1 = UnitModel.localToWorld(p.place, p.place.width / 2, p.place.thickness / 2);
+        if (Math.abs((horiz ? q0.z : q0.x) - line) > 2) return;
+        const ov = Math.min(s1, Math.max(horiz ? q0.x : q0.z, horiz ? q1.x : q1.z)) - Math.max(s0, Math.min(horiz ? q0.x : q0.z, horiz ? q1.x : q1.z));
+        if (ov <= bestOv) return;
+        bestOv = ov;
+        best = Math.sign(dot) * WallModel.claddingOffset(p.buitenMateriaal, p.stone);
+      });
+      return best;
+    };
+    const roofEdge = units.length ? RoofModel.computeEdge(state.settings.roof,
+      units.map(u => ({
+        unitId: u.id, rect: u.roof.rect, fascia: state.units.find(su => su.id === u.id).roof.fascia !== false,
+        topAt: u.roof.topAt, ridges: u.roof.ridges
+      })), facadeDepth) : null;
+    // Latwerk stopt onder het boeideel/de daktrim die boven het wandstuk
+    // zit (battenAbove, mm t.o.v. de wandbovenkant, kan negatief zijn): rand
+    // bovenkant = dak + EDGE_ABOVE, hoogte fasciaHeight resp. trimHeight + EDGE_ABOVE.
+    const pointInPoly = (q, poly) => {
+      let inside = false;
+      for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+        const a = poly[i], b = poly[j];
+        if ((a.z > q.z) !== (b.z > q.z) && q.x < (b.x - a.x) * (q.z - a.z) / (b.z - a.z) + a.x) inside = !inside;
+      }
+      return inside;
+    };
+    if (roofEdge) extPieces.forEach(p => {
+      const nrm = { x: p.place.normal.x, z: p.place.normal.y };
+      const m = UnitModel.localToWorld(p.place, 0, p.place.thickness / 2);
+      // Een paar afstanden vóór de gevel: de rand begint op de dakrand, die
+      // op of iets vóór het wandvlak kan liggen.
+      const sg = [10, 60, 150].map(d => ({ x: m.x + nrm.x * d, z: m.z + nrm.z * d }))
+        .map(q => roofEdge.segments.find(e => pointInPoly(q, [e.a, e.b, e.outerB, e.outerA]))).find(Boolean);
+      if (!sg) return;
+      const h = sg.fascia ? roofEdge.fasciaHeight : roofEdge.trimHeight + roofEdge.edgeAbove;
+      p.battenAbove = (p.skinAbove || 0) + roofEdge.edgeAbove - h;
+    });
     assignFacades(extPieces.concat(interior.filter(p => p.skinFrom !== undefined)));
     extPieces.concat(interior).forEach(p => {
-      const built = buildWall(p.config, p.frame, p.buitenMateriaal, p.cladding, p.trasraam, p.skinExt, p.facade, p.skinFrom, p.spaanplaatBelow, p.stone, p.skinAbove, p.trimTop);
+      const built = buildWall(p.config, p.frame, p.buitenMateriaal, p.cladding, p.trasraam, p.skinExt, p.facade, p.skinFrom, p.spaanplaatBelow, p.stone, p.skinAbove, p.trimTop, p.battenAbove);
       if (built.group && p.shiftZ) {
         const outer = new THREE.Group();
         built.group.position.z = p.shiftZ * 0.001;
@@ -731,35 +867,30 @@ window.HouseModel = (() => {
       Object.assign(p, built);
     });
 
-    // Dakrand (boeidelen/daktrim) als één doorlopende rand om alle daken;
-    // boeidelen aan/uit per unit. De rand volgt de dakvorm van de unit waar
-    // de ribbe bij hoort; platte daken delen één randhoogte (de hoogste).
-    const flatTops = units.filter(u => u.roof.shape.type === 'plat').map(u => u.roof.top);
-    const flatTop = flatTops.length ? Math.max(...flatTops) : 0;
-    const roofEdge = units.length ? RoofModel.computeEdge(state.settings.roof,
-      units.map(u => ({
-        unitId: u.id, rect: u.roof.rect, fascia: state.units.find(su => su.id === u.id).roof.fascia !== false,
-        topAt: u.roof.shape.type === 'plat' ? () => flatTop : u.roof.topAt, ridges: u.roof.ridges
-      }))) : null;
     // Buitenverlichting: gevellampen per wandstuk + boeideel-spots (vult roofEdge.spots).
     const lighting = LightingModel.compute(state.settings.lighting, state.settings.roof, units, state.units, roofEdge);
-    // Zichtbaarheid: boeideel/daktrim volgt "Beplating", spots en lampen volgen "Lampen".
+    // Zichtbaarheid: dakrand en lampen in de laatste bouwfase; lampen ook via "Lampen".
     const roofEdgeGroup = build && roofEdge ? RoofModel.buildEdge3D(roofEdge, o.roofMaterials, {
-      edgeVisible: o.beplatingVisible !== false, spotsVisible: o.lampenVisible !== false
+      edgeVisible: shows('afwerking'), spotsVisible: o.lampenVisible !== false && shows('afwerking')
     }) : null;
     // Binnenspots in het plafond, per unit (LightingModel.computeIndoor).
     lighting.indoor = LightingModel.computeIndoor(state.settings.lighting, units, interior);
     const lightingGroup = build ? LightingModel.build3D(lighting.lamps, o.lightingMaterials || LightingModel.createMaterials(), lighting.indoor) : null;
-    if (lightingGroup) lightingGroup.visible = o.lampenVisible !== false;
+    if (lightingGroup) lightingGroup.visible = o.lampenVisible !== false && shows('afwerking');
+    // Elektra: meterkast, schakelaars (letter = ook op hun lampen), wcd's,
+    // groepen en leidingen naar de meterkast (ElektraModel).
+    const elektra = ElektraModel.compute(state.settings.elektra, units, interior, lighting, roofEdge);
+    const elektraGroup = build ? ElektraModel.build3D(elektra, o.elektraMaterials, stage) : null;
+    if (elektraGroup) elektraGroup.visible = o.elektraVisible !== false && shows('elektra');
 
     // Sandwichpanelen rondom de vloeren, vanaf het loopvlak naar beneden.
     const sandwich = state.settings.sandwich && units.length
       ? SandwichModel.compute(rects, Math.max(...units.map(u => u.layout.floorTop))) : null;
     const sandwichGroup = build && sandwich ? SandwichModel.build3D(sandwich, o.sandwichMaterials || SandwichModel.createMaterials(), {
-      visible: o.beplatingVisible !== false
+      visible: shows('gevel')
     }) : null;
 
-    return { rects, seams, overlaps: overlappingPairs(rects), units, interior, roofEdge, roofEdgeGroup, lighting, lightingGroup, sandwich, sandwichGroup };
+    return { rects, seams, overlaps: overlappingPairs(rects), units, interior, roofEdge, roofEdgeGroup, lighting, lightingGroup, elektra, elektraGroup, sandwich, sandwichGroup };
   }
 
   // Alle wandstukken (buiten + binnen) plat op een rij.
@@ -772,11 +903,118 @@ window.HouseModel = (() => {
   // ------------------------------------------------------------
   // Totalen over de hele woning (overzicht + laatste PDF-blad).
   // ------------------------------------------------------------
+  // ------------------------------------------------------------
+  // Afmetingen (infopaneel 3D + blad 1 PDF). Oppervlakken in m2, maten in mm.
+  //   bruto vloer   = vloer-rechthoeken (tot buitenkant constructie)
+  //   leefbaar      = bruto vloer min de voetafdruk van alle wanden
+  //   gevel         = buitenvlak van alle gevelstukken (incl. doorloop tot
+  //                   onder de dakrand), bruto en netto (min openingen)
+  //   binnenwanden  = geplaatst oppervlak aan de kamerzijde (alle wanden)
+  //   dak           = hellend dakoppervlak (bedekking) en in plattegrond
+  // groundLevel: maaiveld onder het loopvlak (mm), voor de bouwhoogte.
+  // ------------------------------------------------------------
+  function computeDimensions(parts, groundLevel) {
+    const m2 = (mm2) => mm2 / 1e6;
+    const rects = parts.rects;
+    const bx0 = Math.min(...rects.map(r => r.x0)), bx1 = Math.max(...rects.map(r => r.x1));
+    const bz0 = Math.min(...rects.map(r => r.z0)), bz1 = Math.max(...rects.map(r => r.z1));
+    const floorMM2 = rects.reduce((a, r) => a + r.W * r.D, 0);
+    const ext = [], all = allWallPieces(parts);
+    parts.units.forEach(u => u.walls.forEach(w => w.pieces.forEach(p => ext.push(p))));
+    // Voetafdruk: gewone wanden (geen opbouw boven een lager dak).
+    const footprintMM2 = all.filter(p => !p.place.baseY).reduce((a, p) => a + p.place.width * p.place.thickness, 0);
+    const wallArea = (p, y0) => {
+      const tl = WallModel.topLine(p.config), W = p.config.wallWidth;
+      const poly = [{ x: -W / 2, y: y0 }, { x: W / 2, y: y0 }, ...tl.pts.slice().reverse()];
+      return Math.max(0, polygonArea(poly)) + (p.skinAbove || 0) * W;
+    };
+    const openingsMM2 = (p) => (p.config.openings || []).reduce((a, op) => a + WallModel.openingArea(op), 0);
+    const facadePieces = ext.concat(parts.interior.filter(p => p.skinFrom !== undefined));
+    const gevelBruto = facadePieces.reduce((a, p) => a + wallArea(p, p.skinFrom || 0), 0);
+    const gevelOpen = ext.reduce((a, p) => a + openingsMM2(p), 0);
+    const glas = ext.reduce((a, p) => a + (p.config.openings || []).filter(op => op.type === 'raam').reduce((b, op) => b + WallModel.openingArea(op), 0), 0);
+    const binnen = all.reduce((a, p) => a + ((p.stats && p.stats.spaanplaatAreaM2) || 0) + ((p.stats && p.stats.spaanplaatBuitenAreaM2) || 0), 0);
+    const dakM2 = parts.units.reduce((a, u) => a + (u.roof.specs.dakleerM2 || 0) + (u.roof.specs.rietM2 || 0) + (u.roof.specs.felsM2 || 0), 0);
+    const dakPlanMM2 = parts.units.reduce((a, u) => a + u.roof.rect.W * u.roof.rect.D, 0);
+    // Inhoud (bruto): per unit gemiddelde hoogte bovenkant dak boven de
+    // onderkant vloer, bemonsterd op een raster.
+    const inhoudMM3 = parts.units.reduce((a, u) => {
+      const r = u.rect, n = 8;
+      let sum = 0;
+      for (let i = 0; i < n; i++) for (let j = 0; j < n; j++) sum += u.roof.topAt(r.x0 + (i + 0.5) * r.W / n, r.z0 + (j + 0.5) * r.D / n);
+      return a + r.W * r.D * (sum / (n * n));
+    }, 0);
+    const floorTop = Math.max(...parts.units.map(u => u.layout.floorTop));
+    const top = parts.roofEdge ? parts.roofEdge.top : Math.max(...parts.units.map(u => u.roof.top));
+    return {
+      lengthX: bx1 - bx0, lengthZ: bz1 - bz0, height: top - (floorTop - (groundLevel || 0)),
+      brutoM2: m2(floorMM2), leefbaarM2: m2(floorMM2 - footprintMM2),
+      gevelBrutoM2: m2(gevelBruto), gevelOpeningM2: m2(gevelOpen), gevelNettoM2: m2(gevelBruto - gevelOpen), glasM2: m2(glas),
+      binnenwandM2: binnen, dakM2, dakPlanM2: m2(dakPlanMM2), inhoudM3: inhoudMM3 / 1e9
+    };
+  }
+  // Als rijen [label, waarde, eenheid] (UI-kaart en PDF-tabel).
+  function dimensionRows(d, fmt) {
+    return [
+      ['Buitenmaten (b × d)', `${Math.round(d.lengthX)} × ${Math.round(d.lengthZ)}`, 'mm'],
+      ['Bouwhoogte (vanaf maaiveld)', Math.round(d.height), 'mm'],
+      ['Bruto vloeroppervlak (buitenwerks)', fmt(d.brutoM2, 2), 'm²'],
+      ['Leefbare ruimte (netto vloer)', fmt(d.leefbaarM2, 2), 'm²'],
+      ['Gevel buitenkant (bruto)', fmt(d.gevelBrutoM2, 2), 'm²'],
+      ['Openingen in gevel', fmt(d.gevelOpeningM2, 2), 'm²'],
+      ['Gevel buitenkant (netto)', fmt(d.gevelNettoM2, 2), 'm²'],
+      ['Glas (ramen)', fmt(d.glasM2, 2), 'm²'],
+      ['Wanden binnenkant (alle)', fmt(d.binnenwandM2, 2), 'm²'],
+      ['Dak (dakoppervlak)', fmt(d.dakM2, 2), 'm²'],
+      ['Dak (plattegrond)', fmt(d.dakPlanM2, 2), 'm²'],
+      ['Inhoud (bruto)', fmt(d.inhoudM3, 1), 'm³']
+    ];
+  }
+
+  // ------------------------------------------------------------
+  // Transport: elke unit gaat als losse module op de wagen (vloer, wanden
+  // incl. zijn naadwanddelen, dak; zonder dakrand). Buitenmaat incl. de
+  // gevelafwerking (latwerk + rabat, steen). Breedteklassen indicatief
+  // (wegvervoer NL): tot 2550 mm regulier, tot 3500 mm met ontheffing,
+  // daarboven met begeleiding. Controleer altijd bij de vervoerder.
+  // ------------------------------------------------------------
+  const TRANSPORT = { widthRegular: 2550, widthPermit: 3500 };
+  const TRANSPORT_CLASSES = { regulier: 'Regulier', ontheffing: 'Ontheffing', begeleiding: 'Ontheffing + begeleiding' };
+  function computeTransport(parts) {
+    const kgOf = (p) => (p.specs && p.specs.totalKg) || 0;
+    return parts.units.map(u => {
+      const leaves = parts.interior.filter(p => p.seamUnit === u.id);
+      const kg = {
+        vloer: u.floorSpecs.totalKg,
+        wanden: u.walls.reduce((a, w) => a + w.pieces.reduce((b, p) => b + kgOf(p), 0), 0) + leaves.reduce((a, p) => a + kgOf(p), 0),
+        dak: u.roof.specs.totalKg
+      };
+      // Afwerking buiten het wandvlak per zijde (0 als de wand vervalt).
+      const out = (side) => Math.max(0, ...((u.walls.find(w => w.side === side) || { pieces: [] }).pieces
+        .filter(p => !p.baseY)
+        .map(p => Math.max(WallModel.claddingOffset(p.buitenMateriaal, p.stone),
+          p.trasraam && WallModel.isStoneFinish(p.trasraam.finish) ? WallModel.STONE.THICK_MM : 0))));
+      const ew = u.rect.W + out('links') + out('rechts'), ed = u.rect.D + out('voor') + out('achter');
+      const width = Math.min(ew, ed);
+      return {
+        id: u.id, kg, totalKg: kg.vloer + kg.wanden + kg.dak,
+        length: Math.max(ew, ed), width, height: u.roof.top,
+        cls: width <= TRANSPORT.widthRegular ? 'regulier' : width <= TRANSPORT.widthPermit ? 'ontheffing' : 'begeleiding'
+      };
+    });
+  }
+
   function computeTotals(parts) {
     const pieces = allWallPieces(parts);
     const kinds = new Map();
     const sawList = new Map();
-    function addPiece(kind, width, depth, length) {
+    // TIJDELIJK (verwijderen voor productie): zaagmachine-overzicht.
+    const saw = { lengthMM: 0, cuts: 0, angles: new Map() };
+    function addPiece(kind, width, depth, length, cutAngles) {
+      const ca = cutAngles || [0, 0];
+      saw.lengthMM += length;
+      saw.cuts += ca.length;
+      ca.forEach(a => saw.angles.set(a, (saw.angles.get(a) || 0) + 1));
       const k = kinds.get(kind) || { kind, count: 0, lengthMM: 0 };
       k.count++; k.lengthMM += length;
       kinds.set(kind, k);
@@ -792,12 +1030,17 @@ window.HouseModel = (() => {
       ['front', 'back'].filter(k => fc.rims[k]).forEach(() => addPiece('vloerbalk', fc.joistW, fc.joistH, fc.width));
       u.roof.planes.forEach(pl => {
         const rc = pl.data.calcData;
-        rc.joists.forEach(() => addPiece('dakbalk', rc.joistW, rc.joistH, rc.joistLen));
+        // Sporen in een hellend dakvlak: loodrechte snede aan beide koppen.
+        const ang = Math.round(Math.abs(pl.theta || 0) * 180 / Math.PI * 10) / 10;
+        rc.joists.forEach(() => addPiece('dakbalk', rc.joistW, rc.joistH, rc.joistLen, [ang, ang]));
         ['front', 'back'].filter(k => rc.rims[k]).forEach(() => addPiece('dakbalk', rc.joistW, rc.joistH, rc.width));
       });
+      // Wolfsdak: bovenste deel (sporen, hoekkepers, nokbalk, kopbalken).
+      const cap = u.roof.unitRoof && u.roof.unitRoof.cap;
+      if (cap) cap.beams.forEach(bm => addPiece('dakbalk', cap.joistW, cap.joistH, bm.length, [bm.angle, bm.angle]));
     });
     const wallBom = [];
-    pieces.forEach(p => WallModel.computeBOM(p.config, p.frame).forEach(b => { wallBom.push(b); addPiece(b.kind, b.width, b.depth, b.length); }));
+    pieces.forEach(p => WallModel.computeBOM(p.config, p.frame).forEach(b => { wallBom.push(b); addPiece(b.kind, b.width, b.depth, b.length, b.cutAngles); }));
     const purchase = WallModel.planPurchase(wallBom);
 
     const sumP = (fn) => pieces.reduce((acc, p) => acc + fn(p), 0);
@@ -823,6 +1066,11 @@ window.HouseModel = (() => {
     return {
       kinds: kindList,
       sawList: Array.from(sawList.values()).sort((a, b) => b.length - a.length || a.width - b.width),
+      // Zaagmachine: totale zaaglengte, sneden en hoeken (tijd: CostModel).
+      saw: {
+        meters: saw.lengthMM / 1000, cuts: saw.cuts,
+        angles: Array.from(saw.angles.entries()).map(([deg, count]) => ({ deg, count })).sort((a, b) => a.deg - b.deg)
+      },
       beamCount: kindList.reduce((a, k) => a + k.count, 0),
       purchase,
       purchaseWasteMM: purchase.reduce((a, s) => a + s.wasteMM, 0),
@@ -841,7 +1089,9 @@ window.HouseModel = (() => {
         },
         { naam: 'OSB-plaat (vloeren + plafonds dak)', m2: sumU(u => u.floorSpecs.osbAreaM2 + u.roof.specs.osbAreaM2), m3: sumU(u => u.floorSpecs.osbVolM3 + u.roof.specs.osbVolM3), kg: sumU(u => u.floorSpecs.osbKg + u.roof.specs.osbKg) },
         { naam: 'Dakleer (EPDM)', m2: sumU(u => u.roof.specs.dakleerM2), m3: null, kg: sumU(u => u.roof.specs.dakleerKg) },
+        { naam: `Dakbeschot OSB ${RoofModel.BESCHOT_MM} mm (bovenop de sporen)`, m2: sumU(u => u.roof.specs.beschotM2 || 0), m3: sumU(u => u.roof.specs.beschotVolM3 || 0), kg: sumU(u => u.roof.specs.beschotKg || 0) },
         { naam: `Riet (${RoofModel.RIET.thickMM} mm)`, m2: sumU(u => u.roof.specs.rietM2 || 0), m3: null, kg: sumU(u => u.roof.specs.rietKg || 0) },
+        { naam: `Felsplaten (staande naad, ${RoofModel.FELS.thickMM} mm)`, m2: sumU(u => u.roof.specs.felsM2 || 0), m3: null, kg: sumU(u => u.roof.specs.felsKg || 0) },
         {
           naam: 'Cementplaat (buitenzijde)', m2: byMat('cementplaat').reduce((a, p) => a + p.stats.cementplaatAreaM2, 0),
           m3: byMat('cementplaat').reduce((a, p) => a + p.stats.cementplaatVolumeM3, 0), kg: byMat('cementplaat').reduce((a, p) => a + p.specs.buitenKg, 0)
@@ -870,6 +1120,10 @@ window.HouseModel = (() => {
         {
           naam: 'Vochtdoek (buitenzijde)', m2: byMat('vochtdoek').reduce((a, p) => a + p.stats.doekAreaM2, 0),
           m3: null, kg: byMat('vochtdoek').reduce((a, p) => a + p.specs.buitenKg, 0)
+        },
+        {
+          naam: `Rabat ${WallModel.CLADDING_THICK_MM} mm (gevelbekleding)`, m2: byMat('vochtdoek').reduce((a, p) => a + (p.stats.rabatAreaM2 || 0), 0),
+          m3: null, kg: 0 // gewicht volgt
         }
       ],
       weights,
@@ -937,6 +1191,7 @@ window.HouseModel = (() => {
     state.settings.facade = Object.assign(def.facade, state.settings.facade || {});
     if (!FACADE_TYPES[state.settings.facade.type]) state.settings.facade.type = 'rabat';
     if (!WallModel.isStoneFinish(state.settings.facade.stone)) state.settings.facade.stone = def.facade.stone;
+    if (!WallModel.RABAT_COLORS[state.settings.facade.rabatColor]) state.settings.facade.rabatColor = def.facade.rabatColor;
     state.settings.trasraam = Object.assign(def.trasraam, state.settings.trasraam || {});
     state.settings.trasraam.enabled = state.settings.trasraam.enabled !== false;
     if (!(state.settings.trasraam.height > 0)) state.settings.trasraam.height = WallModel.TRASRAAM_DEFAULT_MM;
@@ -955,6 +1210,7 @@ window.HouseModel = (() => {
     if (!lightIn.mode) lightIn.mode = legacyUnitLight ? legacyUnitLight.mode : (oldRoof.spots === false ? 'geen' : 'spots');
     if (!lightIn.direction && legacyUnitLight && legacyUnitLight.direction) lightIn.direction = legacyUnitLight.direction;
     state.settings.lighting = LightingModel.normalizeSettings(lightIn);
+    state.settings.elektra = ElektraModel.normalizeSettings(state.settings.elektra);
     state.units.forEach(u => {
       if (!u.unit.layout) u.unit.layout = { corners: 'voor-achter' };
       if (!u.roof) { u.roof = RoofModel.createDefaultRoof(u.unit.floor); delete u.roof.fascia; }
@@ -972,7 +1228,7 @@ window.HouseModel = (() => {
   return {
     ALIGN_LABELS, SIDE_LABELS, DEFAULT_INTERIOR_THICKNESS, FACADE_TYPES, facadeFor,
     clone, createEmptyProject, createDefaultSettings, createUnitEntry, applyGlobalSettings, nextUnitId, createDefaultState, unitRects, computeSeams, overlappingPairs,
-    interiorWallDefaults, setThickness, thicknessOf, interiorLayout, ensureSeamWalls,
-    computeParts, allWallPieces, computeTotals, validateState, fromUnitDesign, normalize
+    interiorWallDefaults, setThickness, thicknessOf, interiorLayout, ensureSeamWalls, syncSeamWalls, missingSeamWalls,
+    computeParts, allWallPieces, computeTotals, computeDimensions, dimensionRows, TRANSPORT, TRANSPORT_CLASSES, computeTransport, validateState, fromUnitDesign, normalize
   };
 })();

js/house/house-pdf.js

@@ -6,10 +6,12 @@
  */
 // ============================================================
 // house/house-pdf.js — HousePdf: de samenhangende woning-PDF.
-//   Blad 1   plattegrond woning (units, wandstukken, naden, binnenwanden)
+//   Blad 1   aanzichten noord/oost/zuid/west (vlakke "render", vectorvormen)
+//   Blad 2   plattegrond woning (units, wandstukken, naden, binnenwanden)
 //   daarna   per unit: vloer (FloorPdf) + elk wandstuk (WallPdf)
 //   daarna   elke binnenwand (WallPdf)
-//   laatste  totalen (balken, inkoop, zaaglijst, glaswol, plaatwerk, gewicht)
+//   daarna   totalen (balken, inkoop, glaswol, plaatwerk, gewicht, dakrand)
+//   laatste  zaaglijst vuren + zaagmachine-overzicht (tijdelijk)
 // De losse bladen komen uit de gedeelde WallPdf/FloorPdf.
 // Plain script, geladen na house-model.js.
 // ============================================================
@@ -18,9 +20,10 @@ window.HousePdf = (() => {
   const KIND_LABELS = {
     'vloerbalk': 'Vloerbalk', 'dakbalk': 'Dakbalk', 'onderregel': 'Onderregel', 'bovenregel': 'Bovenregel',
     'verticale balk': 'Verticale balk', 'kreupele stijl': 'Kreupele stijl',
-    'bovendorpel': 'Bovendorpel', 'onderdorpel': 'Onderdorpel'
+    'bovendorpel': 'Bovendorpel', 'onderdorpel': 'Onderdorpel', 'schuine regel': 'Schuine regel'
   };
   const PLAN_ELEMENT = 'PL-1';
+  const VIEWS_ELEMENT = 'AZ-1';
 
   function fmt(n, decimals = 1) {
     return n.toLocaleString('nl-NL', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
@@ -35,14 +38,21 @@ window.HousePdf = (() => {
   // Bladvolgorde + elementnummers; gedeeld door generate() en de
   // onderdelenlijst op blad 1.
   function sheetList(parts) {
-    const list = [{ kind: 'plan', element: PLAN_ELEMENT, label: 'Plattegrond woning' }];
+    const list = [
+      { kind: 'views', element: VIEWS_ELEMENT, label: 'Aanzichten woning' },
+      { kind: 'plan', element: PLAN_ELEMENT, label: 'Plattegrond woning' }
+    ];
     parts.units.forEach(u => {
       list.push({ kind: 'floor', element: u.floorElement, label: `Unit ${u.id} vloer`, unit: u });
       u.walls.forEach(w => w.pieces.forEach(p => list.push({ kind: 'wall', element: p.element, label: p.label, piece: p })));
       u.roof.planes.forEach(pl => list.push({ kind: 'roof', element: pl.element, label: pl.label, plane: pl }));
+      // Wolfsdak: het bovenste deel (wolfseinden, nok) op een eigen blad.
+      if (u.roof.unitRoof && u.roof.unitRoof.cap) list.push({ kind: 'cap', element: `${u.id}-D${u.roof.planes.length + 1}`, label: `Unit ${u.id} dak bovenste deel (wolfsdak)`, unit: u });
     });
     parts.interior.forEach(p => list.push({ kind: 'wall', element: p.element, label: p.label, piece: p }));
     list.push({ kind: 'totals', element: 'TOT', label: 'Totalen' });
+    list.push({ kind: 'saw', element: 'ZAAG', label: 'Zaaglijst & zaagmachine' });
+    if (parts.elektra && parts.elektra.enabled) list.push({ kind: 'elektra', element: 'EL', label: 'Elektra' });
     return list;
   }
 
@@ -51,7 +61,7 @@ window.HousePdf = (() => {
     doc.setFont('helvetica', 'normal');
 
     PdfSheet.table(doc, 8, 14, [0, 16, 60], ['Element', 'Onderdeel', 'Blad'],
-      sheets.slice(1).map((s, i) => [s.element, s.label, String(i + 2)]),
+      sheets.map((s, i) => [s.element, s.label, String(i + 1)]).filter(r => r[0] !== PLAN_ELEMENT),
       { title: 'Onderdelen', lastColW: 8, maxY: 285, rowH: 3.9, fontSize: 6 });
     PdfSheet.titleBlock(doc, sheetOpts.project, sheetOpts);
 
@@ -121,6 +131,9 @@ window.HousePdf = (() => {
       doc.rect(px(l.x + l.normal.x * 80) - 0.9, py(l.z + l.normal.z * 80) - 0.9, 1.8, 1.8, 'FD');
     });
 
+    // Elektra: meterkast, schakelaars (letters), wcd, leidingen (ElektraPdf).
+    ElektraPdf.drawPlan(doc, parts.elektra, px, py);
+
     // Naden: gestippeld oranje
     doc.setDrawColor(230, 130, 30);
     doc.setLineWidth(0.4);
@@ -170,6 +183,342 @@ window.HousePdf = (() => {
     doc.setFontSize(6);
     doc.text('Plattegrond woning — oranje gestippeld = naad tussen units (wand vervalt), openingen gekruist, grijs gestippeld = dakrand, zwart gestippeld = ' +
       'boeideel (o = spot), grijs = daktrim, geel blokje = gevellamp', drawX0, drawY1 + 4);
+    if (parts.elektra && parts.elektra.enabled) doc.text(ElektraPdf.PLAN_LEGEND, drawX0, drawY1 + 7.5);
+  }
+
+  // ------------------------------------------------------------
+  // Aanzichten: per windrichting een vlakke "render" van de gevels. Alle
+  // zichtbare vlakken (gevels incl. trasraam en openingen, boeideel/daktrim,
+  // hellende dakvlakken) als polygonen in het aanzicht, van achter naar voren
+  // getekend (schildersalgoritme), in egale kleuren uit het model.
+  // ------------------------------------------------------------
+  const hexRgb = (h) => { const n = parseInt(String(h).replace('#', ''), 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; };
+  const numRgb = (n) => [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  const VIEW_COLORS = {
+    rabat: '#a0805f', cementplaat: '#808285', glas: '#a9c9dc', deur: '#5b4a3b', lijn: [60, 60, 60], grond: [120, 120, 120]
+  };
+  // d = richting van woning naar kijker (x, z); u = horizontale schermas.
+  const VIEWS = [
+    { key: 'noord', title: 'Noordgevel', d: { x: 0, z: -1 }, u: (p) => -p.x },
+    { key: 'oost', title: 'Oostgevel', d: { x: 1, z: 0 }, u: (p) => -p.z },
+    { key: 'zuid', title: 'Zuidgevel', d: { x: 0, z: 1 }, u: (p) => p.x },
+    { key: 'west', title: 'Westgevel', d: { x: -1, z: 0 }, u: (p) => p.z }
+  ];
+
+  // Alle vlakken in wereldcoördinaten: { pts: [{x, y, z}], n: {x, z} | null (dakvlak: nH), color, bias }.
+  function viewFaces(parts, state) {
+    const faces = [];
+    const wallFace = (p, y0, color, depthBias) => {
+      const W = p.place.width, T = p.place.thickness;
+      const c = WallModel.claddingOffset(p.buitenMateriaal, p.stone), e = p.skinExt || {};
+      const xl = -W / 2 - (e.left > 0 ? e.left + c : 0), xr = W / 2 + (e.right > 0 ? e.right + c : 0);
+      const tl = WallModel.topLine(p.config), up = p.skinAbove || 0;
+      const top = (x) => tl.at(Math.max(-W / 2, Math.min(W / 2, x))) + up;
+      const loc = [{ x: xl, y: y0 }, { x: xr, y: y0 }, { x: xr, y: top(xr) }]
+        .concat(tl.pts.slice().reverse().filter(q => q.x > xl + 1 && q.x < xr - 1).map(q => ({ x: q.x, y: q.y + up })))
+        .concat([{ x: xl, y: top(xl) }]);
+      return loc;
+    };
+    const toWorld = (p, lx, y, lz) => { const w = UnitModel.localToWorld(p.place, lx, lz); return { x: w.x, y: p.place.floorTop + y, z: w.z }; };
+    const addWall = (p, y0) => {
+      const n = { x: p.place.normal.x, z: p.place.normal.y };
+      const zOut = p.place.thickness / 2 + WallModel.claddingOffset(p.buitenMateriaal, p.stone);
+      const color = p.stone ? (WallModel.STONE_COLORS[p.stone] || '#a0724f') : WallModel.rabatHex(state.settings.facade.rabatColor);
+      faces.push({ pts: wallFace(p, y0).map(q => toWorld(p, q.x, q.y, zOut)), n, color, bias: 0 });
+      // Trasraam (strook onderaan, iets naar voren)
+      const tr = p.trasraam;
+      if (tr && tr.top > y0) {
+        const W = p.place.width;
+        const band = wallFace(p, y0).map(q => ({ x: q.x, y: Math.min(q.y, tr.top) }));
+        const trColor = WallModel.isStoneFinish(tr.finish) ? (WallModel.STONE_COLORS[tr.finish] || '#a0724f') : VIEW_COLORS.cementplaat;
+        const zT = p.place.thickness / 2 + (WallModel.isStoneFinish(tr.finish) ? WallModel.STONE.THICK_MM : 12);
+        faces.push({ pts: band.map(q => toWorld(p, q.x, q.y, zT)), n, color: trColor, bias: 1 });
+      }
+      // Openingen (glas / deur), vóór de gevel
+      (p.config.openings || []).forEach(op => {
+        if (WallModel.openingTopMax(op) <= y0) return;
+        // Schuine bovenzijde: bovenkant links/rechts.
+        const x0 = -p.place.width / 2 + op.x, x1 = x0 + op.w, ya = Math.max(y0, op.y);
+        const ybL = Math.max(ya, op.y + op.h), ybR = Math.max(ya, op.y + op.hR);
+        const color = op.type === 'raam' ? VIEW_COLORS.glas : VIEW_COLORS.deur;
+        faces.push({ pts: [[x0, ya], [x1, ya], [x1, ybR], [x0, ybL]].map(([lx, ly]) => toWorld(p, lx, ly, zOut)), n, color, bias: 2, window: true });
+      });
+    };
+    parts.units.forEach(u => u.walls.forEach(w => w.pieces.forEach(p => addWall(p, 0))));
+    parts.interior.filter(p => p.skinFrom !== undefined && p.place.normal).forEach(p => addWall(p, p.skinFrom));
+
+    // Hellende dakvlakken (bovenkant, egaal in de kleur van de bedekking).
+    parts.units.forEach(u => {
+      const r = u.roof, sh = r.shape;
+      if (sh.type === 'plat') return;
+      const cov = RoofModel.COVERINGS[r.covering] || RoofModel.COVERINGS.dakleer;
+      const ctr = sh.axis === 'x' ? u.rect.cx : u.rect.cz;
+      const pushRoof = (pts) => {
+        // Normaal (omhoog) uit het vlak.
+        const [A, B, C] = pts;
+        const ux = B.x - A.x, uy = B.y - A.y, uz = B.z - A.z, vx = C.x - A.x, vy = C.y - A.y, vz = C.z - A.z;
+        let nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx;
+        if (ny < 0) { nx = -nx; ny = -ny; nz = -nz; }
+        const len = Math.hypot(nx, ny, nz) || 1;
+        faces.push({ pts, n: { x: nx / len, z: nz / len }, roof: true, color: cov.color || '#2a2a2a', bias: 0 });
+      };
+      // Wolfsdak: bovenste deel per vlak (RoofModel.capRegions, unit-lokaal (p, q)).
+      RoofModel.capRegions(r.unitRoof).forEach(rg => {
+        pushRoof(rg.poly.map(pt => {
+          const x = u.rect.cx + (sh.axis === 'x' ? pt.x : pt.z), z = u.rect.cz + (sh.axis === 'x' ? pt.z : pt.x);
+          return { x, y: u.layout.floorTop + rg.under(pt) + rg.vThick, z };
+        }));
+      });
+      r.planes.forEach(pl => {
+        const a0 = ctr + pl.p0, a1 = ctr + pl.p1, mid = (a0 + a1) / 2;
+        // Hoogte net binnen het vlak (op de nok geeft topAt het hoogste vlak).
+        const inward = (t) => t + Math.sign(mid - t) * 0.5;
+        const corners = sh.axis === 'x'
+          ? [[a0, r.rect.z0], [a1, r.rect.z0], [a1, r.rect.z1], [a0, r.rect.z1]]
+          : [[r.rect.x0, a0], [r.rect.x1, a0], [r.rect.x1, a1], [r.rect.x0, a1]];
+        pushRoof(corners.map(([x, z]) => ({ x, y: sh.axis === 'x' ? r.topAt(inward(x), z) : r.topAt(x, inward(z)), z })));
+      });
+    });
+
+    // Dakrand: elk boeideel / elke daktrim zoals je hem van buiten ziet: de
+    // bovenkant volgt het dak (sg.topAt, langs de ribbe bemonsterd, zodat
+    // knikken van een kopgevel - zadel, mansarde, wolfsdak - meekomen), en
+    // telt zowel de dakkant als de buitenkant mee (bij een hellend dak ligt
+    // de buitenkant lager, de bovenkant van het boeideel dekt de gevel af).
+    const edge = parts.roofEdge;
+    if (edge) {
+      const fc = (RoofModel.FASCIA_COLORS[edge.fasciaColor] || RoofModel.FASCIA_COLORS.antraciet).hex;
+      const lerp = (a, b, t) => ({ x: a.x + (b.x - a.x) * t, z: a.z + (b.z - a.z) * t });
+      edge.segments.forEach(sg => {
+        const h = sg.fascia ? edge.fasciaHeight : edge.trimHeight + edge.edgeAbove;
+        const n = Math.max(1, Math.ceil(Math.hypot(sg.outerB.x - sg.outerA.x, sg.outerB.z - sg.outerA.z) / 100));
+        const top = [], bottom = [];
+        for (let k = 0; k <= n; k++) {
+          const t = k / n, I = lerp(sg.a, sg.b, t), O = lerp(sg.outerA, sg.outerB, t);
+          const tI = sg.topAt(I), tO = sg.topAt(O);
+          top.push({ x: O.x, y: Math.max(tI, tO), z: O.z });
+          bottom.push({ x: O.x, y: Math.min(tI, tO) - h, z: O.z });
+        }
+        faces.push({ pts: top.concat(bottom.reverse()), n: { x: sg.normal.x, z: sg.normal.z }, color: sg.fascia ? fc : 0xb8bcc0, bias: 3 });
+      });
+    }
+    return faces;
+  }
+
+  // Legenda "Afwerking": gevel(s) (incl. overrides), trasraam, dak per unit,
+  // vloer, boeideel/daktrim en binnenwanden. Per item een voorvertoning
+  // (thumb, via PdfSheet.preloadImage vooraf geladen) of een kleurvlak.
+  function materialLegend(state, parts) {
+    const items = [];
+    const st = state.settings;
+    const seen = new Set();
+    state.units.forEach(u => Object.keys(u.unit.walls).forEach(side => {
+      const fc = HouseModel.facadeFor(state, u, side);
+      const key = fc.type === 'steen' ? 'steen:' + fc.stone : 'rabat';
+      if (seen.has(key)) return;
+      seen.add(key);
+      items.push(fc.type === 'steen'
+        ? { label: 'Gevel', value: `Steen ${fc.stone}`, thumb: WallModel.stoneThumbUrl(fc.stone, 64), color: WallModel.STONE_COLORS[fc.stone] }
+        : { label: 'Gevel', value: `Rabat ${((WallModel.RABAT_COLORS[st.facade.rabatColor] || {}).label || '').toLowerCase()} (${(WallModel.CLADDING_DIRECTIONS[st.cladding] || st.cladding).toLowerCase()})`, color: WallModel.rabatHex(st.facade.rabatColor) });
+    }));
+    if (st.trasraam.enabled) {
+      const tf = st.trasraam.finish;
+      items.push(WallModel.isStoneFinish(tf)
+        ? { label: `Trasraam (${st.trasraam.height} mm)`, value: `Steen ${tf}`, thumb: WallModel.stoneThumbUrl(tf, 64), color: WallModel.STONE_COLORS[tf] }
+        : { label: `Trasraam (${st.trasraam.height} mm)`, value: 'Cementplaat', color: VIEW_COLORS.cementplaat });
+    }
+    (parts ? parts.units : state.units).forEach(u => {
+      const cov = parts ? u.roof.covering : (u.roof.covering || 'dakleer');
+      const c = RoofModel.COVERINGS[cov] || RoofModel.COVERINGS.dakleer;
+      items.push({ label: `Dak unit ${u.id}`, value: c.label, thumb: RoofModel.coveringThumbUrl(cov, 64), color: c.color });
+    });
+    const ff = FloorModel.FINISHES[st.floorFinish] || FloorModel.FINISHES.geen;
+    items.push({ label: 'Vloer', value: ff.label, thumb: FloorModel.finishThumbUrl(st.floorFinish, 64), color: ff.color });
+    const fascia = state.units.some(u => u.roof.fascia !== false), trim = state.units.some(u => u.roof.fascia === false);
+    if (fascia) {
+      const fcol = RoofModel.FASCIA_COLORS[st.roof.fasciaColor] || RoofModel.FASCIA_COLORS.antraciet;
+      items.push({ label: 'Boeideel', value: fcol.label, color: fcol.hex });
+    }
+    if (trim) items.push({ label: 'Daktrim', value: 'Aluminium', color: 0xb8bcc0 });
+    items.push(st.interiorPaint
+      ? { label: 'Binnenwanden', value: `Geschilderd ${st.interiorColor}`, color: st.interiorColor }
+      : { label: 'Binnenwanden', value: 'Spaanplaat', color: '#1e4620' });
+    return items;
+  }
+  // Voorvertoningen die de legenda gebruikt (om vooraf te laden).
+  function materialThumbUrls(state) {
+    return materialLegend(state, null).map(i => i.thumb).filter(Boolean);
+  }
+
+  function drawMaterialLegend(doc, items, x0, y0, x1, y1) {
+    const { BLACK, GREY } = PdfSheet.COLORS;
+    doc.setFont('helvetica', 'bold');
+    doc.setFontSize(8);
+    doc.setTextColor(...BLACK);
+    doc.text('Afwerking', x0, y0 + 3);
+    doc.setFont('helvetica', 'normal');
+    const cellW = 45, cellH = 11, sw = 9, top = y0 + 6;
+    const cols = Math.max(1, Math.floor((x1 - x0) / cellW)), rows = Math.max(1, Math.floor((y1 - top) / cellH));
+    items.slice(0, cols * rows).forEach((it, i) => {
+      const cx = x0 + Math.floor(i / rows) * cellW, cy = top + (i % rows) * cellH;
+      const data = PdfSheet.imageData(it.thumb);
+      if (data) doc.addImage(data, 'PNG', cx, cy, sw, sw);
+      else {
+        doc.setFillColor(...(typeof it.color === 'number' ? numRgb(it.color) : hexRgb(it.color || '#cccccc')));
+        doc.rect(cx, cy, sw, sw, 'F');
+      }
+      doc.setDrawColor(...GREY);
+      doc.setLineWidth(0.1);
+      doc.rect(cx, cy, sw, sw, 'S');
+      doc.setFontSize(6);
+      doc.setTextColor(...GREY);
+      doc.text(it.label, cx + sw + 1.5, cy + 3.2);
+      doc.setFontSize(7);
+      doc.setTextColor(...BLACK);
+      doc.text(doc.splitTextToSize(it.value, cellW - sw - 3)[0], cx + sw + 1.5, cy + 7.2);
+    });
+  }
+
+  // Afmetingen (zelfde rijen als het infopaneel in de app), in twee kolommen.
+  function drawDimensions(doc, rows, x0, y0, x1) {
+    const { BLACK, GREY } = PdfSheet.COLORS;
+    doc.setFont('helvetica', 'bold');
+    doc.setFontSize(8);
+    doc.setTextColor(...BLACK);
+    doc.text('Afmetingen', x0, y0 + 3);
+    doc.setFont('helvetica', 'normal');
+    const half = Math.ceil(rows.length / 2), colW = (x1 - x0) / 2, rowH = 4.6;
+    rows.forEach(([label, value, unit], i) => {
+      const cx = x0 + Math.floor(i / half) * colW, cy = y0 + 8 + (i % half) * rowH;
+      doc.setFontSize(5.5);
+      doc.setTextColor(...GREY);
+      doc.text(label, cx, cy - 1.7);
+      doc.setFontSize(7);
+      doc.setTextColor(...BLACK);
+      doc.text(`${value}${unit ? ' ' + unit : ''}`, cx, cy + 0.9);
+    });
+  }
+
+  function drawViewsSheet(doc, parts, state, sheetOpts) {
+    const { BLACK } = PdfSheet.COLORS;
+    const faces = viewFaces(parts, state);
+    const groundY = Math.max(...parts.units.map(u => u.layout.floorTop)) - (state.settings.groundLevel || 0);
+    // Per aanzicht de zichtbare vlakken in (u, v) mm, met diepte.
+    const views = VIEWS.map(v => {
+      const dot = (p) => p.x * v.d.x + p.z * v.d.z;
+      const list = faces.filter(f => f.roof ? (f.n.x * v.d.x + f.n.z * v.d.z) > 0.01 : (f.n.x * v.d.x + f.n.z * v.d.z) > 0.5)
+        .map(f => ({ f, depth: f.pts.reduce((a, p) => a + dot(p), 0) / f.pts.length + f.bias, pts: f.pts.map(p => ({ u: v.u(p), v: p.y })) }))
+        .sort((a, b) => a.depth - b.depth);
+      const us = list.flatMap(l => l.pts.map(p => p.u)), vs = list.flatMap(l => l.pts.map(p => p.v)).concat([groundY]);
+      return { v, list, u0: Math.min(...us), u1: Math.max(...us), v0: Math.min(...vs), v1: Math.max(...vs) };
+    }).filter(x => x.list.length);
+
+    // Raster 2 x 2 boven het titelblok; één schaal voor alle aanzichten.
+    const X0 = 12, X1 = 408, Y0 = 14, Y1 = 248, gap = 10, titleH = 7;
+    const cellW = (X1 - X0 - gap) / 2, cellH = (Y1 - Y0 - gap) / 2;
+    const scale = Math.min(...views.map(w => Math.min((cellW - 16) / (w.u1 - w.u0), (cellH - titleH - 10) / (w.v1 - w.v0))));
+    doc.setFont('helvetica', 'normal');
+    views.forEach((w, i) => {
+      const cx = X0 + (i % 2) * (cellW + gap), cy = Y0 + Math.floor(i / 2) * (cellH + gap);
+      const ox = cx + cellW / 2 - (w.u0 + w.u1) / 2 * scale;
+      const base = cy + cellH - 6; // grondlijn
+      const P = (p) => [ox + p.u * scale, base - (p.v - groundY) * scale];
+      doc.setTextColor(...BLACK);
+      doc.setFontSize(11);
+      doc.text(w.v.title, cx, cy + 5);
+      doc.setLineWidth(0.1);
+      doc.setDrawColor(...VIEW_COLORS.lijn);
+      w.list.forEach(l => {
+        const pts = l.pts.map(P);
+        const col = typeof l.f.color === 'number' ? numRgb(l.f.color) : hexRgb(l.f.color);
+        doc.setFillColor(...col);
+        doc.lines(pts.slice(1).map((q, k) => [q[0] - pts[k][0], q[1] - pts[k][1]]), pts[0][0], pts[0][1], [1, 1], 'FD', true);
+      });
+      // Grondlijn
+      doc.setDrawColor(...VIEW_COLORS.grond);
+      doc.setLineWidth(0.4);
+      doc.line(ox + w.u0 * scale - 6, base, ox + w.u1 * scale + 6, base);
+    });
+    doc.setFontSize(7);
+    doc.setTextColor(...BLACK);
+    doc.text(`Aanzichten (vlakke weergave, schaal ca. 1:${Math.round(1 / scale)}); kleuren: gemiddelde kleur van de gekozen steen / bedekking.`, X0, Y1 + 5);
+    drawMaterialLegend(doc, materialLegend(state, parts), X0, Y1 + 7, 192, 289);
+    drawDimensions(doc, HouseModel.dimensionRows(HouseModel.computeDimensions(parts, state.settings.groundLevel), fmt), 197, Y1 + 7, 285);
+    PdfSheet.titleBlock(doc, sheetOpts.project, sheetOpts);
+  }
+
+  // Blad voor het bovenste deel van een wolfsdak (RoofModel.computeCap):
+  // bovenaanzicht van het houtwerk (sporen, hoekkepers, nokbalk, kopbalken)
+  // op de dakvlakken, en de stuklijst.
+  const CAP_KINDS = { spoor: 'Spoor', hoekkeper: 'Hoekkeper', nokbalk: 'Nokbalk', kopbalk: 'Kopbalk' };
+  function drawCapSheet(doc, u, sheetOpts) {
+    const { RED, BLUE, BLACK, GREY } = PdfSheet.COLORS;
+    const ur = u.roof.unitRoof, c = ur.cap;
+    // (p, q) -> plattegrond (x, z), unit-lokaal mm.
+    const xz = (pt) => ur.alongX ? { x: pt.x, z: pt.z } : { x: pt.z, z: pt.x };
+    const band = [{ x: c.pA, z: c.q0 }, { x: c.pB, z: c.q0 }, { x: c.pB, z: c.q1 }, { x: c.pA, z: c.q1 }].map(xz);
+    const xs = band.map(p => p.x), zs = band.map(p => p.z);
+    const X0 = 20, X1 = 275, Y0 = 32, Y1 = 230;
+    const sc = Math.min((X1 - X0) / (Math.max(...xs) - Math.min(...xs)), (Y1 - Y0) / (Math.max(...zs) - Math.min(...zs)));
+    const ox = (X0 + X1) / 2 - (Math.min(...xs) + Math.max(...xs)) / 2 * sc, oz = (Y0 + Y1) / 2 - (Math.min(...zs) + Math.max(...zs)) / 2 * sc;
+    const P = (p) => [ox + p.x * sc, oz + p.z * sc];
+    const poly = (pts, style) => {
+      const q = pts.map(P);
+      doc.lines(q.slice(1).map((b, k) => [b[0] - q[k][0], b[1] - q[k][1]]), q[0][0], q[0][1], [1, 1], style, true);
+    };
+    doc.setTextColor(...BLACK);
+    doc.setFontSize(11);
+    doc.text('Bovenaanzicht bovenste deel (wolfseinden en nok)', X0, 20);
+    // Dakvlakken (grijs) en de band.
+    doc.setDrawColor(...GREY);
+    doc.setLineWidth(0.15);
+    c.regions.forEach(rg => poly(rg.poly.map(xz), 'S'));
+    // Balken (rood, plattegrond: rechthoek van balkbreedte rond de hartlijn).
+    doc.setDrawColor(...RED);
+    doc.setLineWidth(0.2);
+    c.beams.forEach(bm => poly(bm.poly.map(xz), 'S'));
+    // Maten: lengte en diepte van de band, diepte van een wolfseind.
+    doc.setDrawColor(...BLUE);
+    doc.setTextColor(...BLUE);
+    doc.setFontSize(7);
+    const bx0 = Math.min(...xs), bx1 = Math.max(...xs), bz0 = Math.min(...zs), bz1 = Math.max(...zs);
+    const [ax, ay] = P({ x: bx0, z: bz1 }), [bx, by] = P({ x: bx1, z: bz1 });
+    PdfSheet.dimLine(doc, ax, ay + 8, bx, by + 8);
+    doc.text(`${Math.round(bx1 - bx0)}`, (ax + bx) / 2, ay + 7, { align: 'center' });
+    const [cx0, cy0] = P({ x: bx1, z: bz0 }), [cx1, cy1] = P({ x: bx1, z: bz1 });
+    PdfSheet.dimLine(doc, cx0 + 8, cy0, cx1 + 8, cy1);
+    doc.text(`${Math.round(bz1 - bz0)}`, cx0 + 9.5, (cy0 + cy1) / 2, { angle: 90 });
+
+    // Stuklijst en kerngegevens.
+    const groups = new Map();
+    c.beams.forEach(bm => {
+      const key = `${bm.kind}|${Math.round(bm.length / 10) * 10}|${bm.angle}`;
+      const g = groups.get(key) || { kind: bm.kind, length: Math.round(bm.length / 10) * 10, angle: bm.angle, n: 0 };
+      g.n++;
+      groups.set(key, g);
+    });
+    const order = Object.keys(CAP_KINDS);
+    const rows = [...groups.values()].sort((a, b) => order.indexOf(a.kind) - order.indexOf(b.kind) || b.length - a.length)
+      .map(g => [CAP_KINDS[g.kind] || g.kind, String(g.length), String(g.angle).replace('.', ','), String(g.n)]);
+    const H = (p) => RoofModel.profileHeight(ur.shape.profile, p);
+    const deg = (t) => String(Math.round(Math.atan(t) * 1800 / Math.PI) / 10).replace('.', ',');
+    const hip = c.regions.find(rg => rg.key === 'h1');
+    const facts = [
+      ['Wolfseind (onderkant dak)', `${Math.round(c.hipH)} mm`],
+      ['Nok (onderkant dak)', `${Math.round(H(c.pR))} mm`],
+      ['Helling dakvlakken', `${deg((H(c.pR) - H(c.pA)) / (c.pR - c.pA))}°`],
+      ['Helling wolfseinden', hip ? `${deg(Math.tan(Math.acos(hip.cos)))}°` : '-'],
+      ['Balken', `${c.joistW} x ${c.joistH} mm`],
+      ['Oppervlak (schuin)', `${fmt(c.specs.osbAreaM2, 2)} m²`],
+      ['Hout', `${fmt(c.specs.joistWoodM3, 3)} m³`]
+    ];
+    doc.setTextColor(...BLACK);
+    let y = PdfSheet.table(doc, 290, 20, [0, 52], ['Gegeven', 'Waarde'], facts, { title: 'Wolfsdak, bovenste deel', fontSize: 7, rowH: 4.6, lastColW: 40 });
+    PdfSheet.table(doc, 290, y + 6, [0, 32, 56, 78], ['Soort', 'Lengte (mm)', 'Hoek (°)', 'Aantal'], rows, { title: 'Stuklijst balken', fontSize: 7, rowH: 4.6, lastColW: 14, maxY: 240 });
+    doc.setFontSize(7);
+    doc.setTextColor(...GREY);
+    doc.text('Hoogtes vanaf bovenkant vloer. Lengte = langs de balk; hoek = helling van de balk (zaagsnede aan beide koppen). Grijs = dakvlakken, rood = houtwerk.', X0, 240);
+    PdfSheet.titleBlock(doc, sheetOpts.project, sheetOpts);
   }
 
   function drawTotalsSheet(doc, totals, sheetOpts) {
@@ -197,22 +546,18 @@ window.HousePdf = (() => {
       fmt(totals.purchaseStockMM ? totals.purchaseWasteMM / totals.purchaseStockMM * 100 : 0) + '%']);
     PdfSheet.table(doc, 15, y, [0, 30, 55], ['Doorsnede', 'Lengte', 'Aantal'], purchaseRows, tableOpts('Inkoop wandbalken (alle wanden)'));
 
-    PdfSheet.table(doc, 120, 30, [0, 20, 40, 62], ['Dikte', 'Hoogte', 'Lengte', 'Aantal'],
-      totals.sawList.map(g => [String(g.width), String(g.depth), String(g.length), String(g.count)]),
-      Object.assign(tableOpts('Zaaglijst vuren (totaal)'), { maxY: 285 }));
-
     y = 30;
     const isoRows = totals.isolatie.map(r => [r.label, fmt(r.m3, 3) + ' m3']);
     isoRows.push(['Totaal glaswol', fmt(totals.isolatieM3, 3) + ' m3']);
-    y = PdfSheet.table(doc, 215, y, [0, 50], ['Onderdeel', 'Inhoud'], isoRows, tableOpts('Isolatie (glaswol, spouwvullend)'));
+    y = PdfSheet.table(doc, 120, y, [0, 50], ['Onderdeel', 'Inhoud'], isoRows, tableOpts('Isolatie (glaswol, spouwvullend)'));
     y += 4;
-    y = PdfSheet.table(doc, 215, y, [0, 58, 80, 102], ['Materiaal', 'Opp. (m2)', 'Vol. (m3)', 'Gewicht'],
+    y = PdfSheet.table(doc, 120, y, [0, 58, 80, 102], ['Materiaal', 'Opp. (m2)', 'Vol. (m3)', 'Gewicht'],
       totals.plaatwerk.map(p => [p.naam, fmt(p.m2, 2), p.m3 === null ? 'n.v.t.' : fmt(p.m3, 3), fmt(p.kg) + ' kg']),
       tableOpts('Plaatwerk'));
     y += 4;
     const wRows = totals.weights.map(r => [r.label, fmt(r.kg) + ' kg']);
     wRows.push(['Totaal woning', fmt(totals.totalKg) + ' kg']);
-    y = PdfSheet.table(doc, 215, y, [0, 50], ['Onderdeel', 'Gewicht'], wRows, tableOpts('Gewicht'));
+    y = PdfSheet.table(doc, 120, y, [0, 50], ['Onderdeel', 'Gewicht'], wRows, tableOpts('Gewicht'));
     if (totals.roofEdge) {
       y += 4;
       const e = totals.roofEdge, L = totals.lamps;
@@ -225,32 +570,200 @@ window.HousePdf = (() => {
       rows.push(['Boeideel-spots', e.spots + ' stuks']);
       rows.push(['Gevellampen', `${L.total} stuks (boven+onder ${L.both}, onder ${L.down}, boven ${L.up})`]);
       rows.push(['Binnenspots', `${L.indoor} stuks (plafond)`]);
-      PdfSheet.table(doc, 215, y, [0, 40], ['Onderdeel', 'Hoeveelheid'], rows, tableOpts('Dakrand & verlichting'));
+      PdfSheet.table(doc, 120, y, [0, 40], ['Onderdeel', 'Hoeveelheid'], rows, tableOpts('Dakrand & verlichting'));
     }
 
     PdfSheet.titleBlock(doc, sheetOpts.project, sheetOpts);
   }
 
+  // Eigen blad na de totalen: zaaglijst vuren (in kolommen) + zaagmachine.
+  function drawSawSheet(doc, totals, cost, sheetOpts) {
+    const { BLACK } = PdfSheet.COLORS;
+    doc.setFont('helvetica', 'normal');
+    doc.setTextColor(...BLACK);
+    doc.setFontSize(14);
+    doc.text('Zaaglijst', 15, 18);
+    const tableOpts = (title) => ({ title, fontSize: 7, rowH: 4.6, lastColW: 16 });
+    const rows = totals.sawList.map(g => [String(g.width), String(g.depth), String(g.length), String(g.count)]);
+    const perCol = 52, cols = [15, 100, 185];
+    for (let c = 0; c < cols.length && c * perCol < rows.length; c++) {
+      PdfSheet.table(doc, cols[c], 30, [0, 20, 40, 62], ['Dikte', 'Hoogte', 'Lengte', 'Aantal'], rows.slice(c * perCol, (c + 1) * perCol),
+        tableOpts(c === 0 ? 'Zaaglijst vuren (totaal)' : 'Zaaglijst (vervolg)'));
+    }
+    if (rows.length > perCol * cols.length) {
+      doc.setFontSize(7);
+      doc.text(`+ ${rows.length - perCol * cols.length} regels (niet getoond)`, 15, 285);
+    }
+
+    // TIJDELIJK (verwijderen voor productie): zaagmachine-overzicht.
+    const sw = totals.saw;
+    PdfSheet.table(doc, 290, 30, [0, 55], ['Onderdeel', 'Waarde'], [
+      ['Zaagmeters', fmt(sw.meters, 1) + ' m'],
+      ['Zaagtijd robot', CostModel.uur(cost.saw.robotSec / 3600) + ' uur'],
+      [`Zaagtijd handmatig (\u00d7${cost.settings.zagen.handFactor})`, CostModel.uur(cost.saw.handSec / 3600) + ' uur'],
+      ['Zaagsneden', sw.cuts + ' st.'],
+      ['Verschillende hoeken', String(sw.angles.length)]
+    ].concat(sw.angles.map(a => [a.deg === 0 ? 'Haaks (0\u00b0)' : `Schuin ${fmt(a.deg, 1)}\u00b0`, a.count + ' sneden'])), tableOpts('Zaagmachine (tijdelijk)'));
+
+    PdfSheet.titleBlock(doc, sheetOpts.project, sheetOpts);
+  }
+
+  // ------------------------------------------------------------
+  // Kostenraming (CostModel): samenvatting + regels per element.
+  // ------------------------------------------------------------
+  const COST_ROW_H = 3.4;
+  // Kolommen van een detailblad: x, onderkant (rechts het titelblok).
+  const COST_COLS = [{ x: 15, yMax: 278 }, { x: 150, yMax: 278 }, { x: 285, yMax: 246 }];
+  const COST_Y0 = 30;
+  const clip = (t, n) => (t.length > n ? t.slice(0, n - 1) + '\u2026' : t);
+  // Platte regels voor de detailbladen: kop per element, dan de regels.
+  function costDetailRows(cost) {
+    return cost.elements.flatMap(el => elementCostRows(el));
+  }
+  // Kop + regels van één element.
+  function elementCostRows(el) {
+    const rows = [];
+    if (el.lines.length) {
+      rows.push({ head: true, label: `${el.element}  ${el.label}`, mat: CostModel.eur(el.mat), time: CostModel.uur(el.sec / 3600) });
+      el.lines.forEach(l => rows.push({
+        label: l.label, qty: `${fmt(l.qty, ['st.', 'sneden', 'sectie'].includes(l.unit) ? 0 : 2)} ${l.unit}`,
+        mat: l.mat ? CostModel.eur(l.mat, 2) : '', time: l.sec ? CostModel.uur(l.sec / 3600) : ''
+      }));
+    }
+    return rows;
+  }
+  // Kostenblok op het blad van het onderdeel zelf (onder de hoofdtekening,
+  // links van het titelblok). Te veel regels: rest op het detailblad.
+  function drawElementCost(doc, el, extraLabel) {
+    if (!el || !el.lines.length) return;
+    const x = 132, y = 236, yMax = 287;
+    const rows = elementCostRows(el);
+    rows[0] = Object.assign({}, rows[0], { label: `Kosten ${el.element}${extraLabel ? ' (' + extraLabel + ')' : ''}` });
+    rows.push({ head: true, label: 'Kostprijs (incl. verlies, bezetting, indirect, QA, afschrijving)', mat: CostModel.eur(el.kostprijs), time: '' });
+    const fit = Math.floor((yMax - y - 5) / COST_ROW_H);
+    let shown = rows;
+    if (rows.length > fit) {
+      shown = rows.slice(0, fit - 2).concat([{ label: `+ ${rows.length - fit + 1} regels: zie kostenblad detail`, mat: '', time: '' }, rows[rows.length - 1]]);
+    }
+    drawCostTable(doc, x, y, shown);
+  }
+  // Verdeelt de regels over bladen (kolommen vullen van boven naar beneden).
+  function paginateCostRows(rows) {
+    const pages = [];
+    let i = 0;
+    while (i < rows.length) {
+      const cols = COST_COLS.map(c => {
+        const n = Math.floor((c.yMax - COST_Y0 - 6) / COST_ROW_H);
+        const chunk = rows.slice(i, i + n);
+        i += chunk.length;
+        return chunk;
+      });
+      pages.push(cols);
+    }
+    return pages;
+  }
+  function drawCostTable(doc, x, y, rows) {
+    const { BLACK, GREY } = PdfSheet.COLORS;
+    doc.setFontSize(6.5);
+    doc.setTextColor(...GREY);
+    doc.text('Omschrijving', x, y); doc.text('Hoeveelheid', x + 84, y, { align: 'right' });
+    doc.text('Materiaal', x + 104, y, { align: 'right' }); doc.text('Manuur', x + 124, y, { align: 'right' });
+    doc.setDrawColor(...GREY); doc.setLineWidth(0.15);
+    doc.line(x, y + 1.5, x + 126, y + 1.5);
+    y += 5;
+    rows.forEach(r => {
+      doc.setTextColor(...BLACK);
+      doc.setFont('helvetica', r.head ? 'bold' : 'normal');
+      doc.text(clip(r.label, r.head ? 60 : 52), r.head ? x : x + 2, y);
+      if (r.qty) doc.text(r.qty, x + 84, y, { align: 'right' });
+      doc.text(r.mat, x + 104, y, { align: 'right' });
+      doc.text(r.time, x + 124, y, { align: 'right' });
+      y += COST_ROW_H;
+    });
+    doc.setFont('helvetica', 'normal');
+  }
+
+  function drawCostSheet(doc, cost, sheetOpts) {
+    const { BLACK } = PdfSheet.COLORS;
+    const s = cost.summary, S = cost.settings, eur = (n) => CostModel.eur(n);
+    doc.setFont('helvetica', 'normal');
+    doc.setTextColor(...BLACK);
+    doc.setFontSize(14);
+    doc.text('Kostenraming (indicatief)', 15, 18);
+    const tableOpts = (title) => ({ title, fontSize: 7, rowH: 4.6, lastColW: 24 });
+    let y = PdfSheet.table(doc, 15, 30, [0, 82], ['Post', 'Bedrag'],
+      s.rows.map(r => [r.label, eur(r.amount)]).concat([['Totaal incl. btw', eur(s.inclBtw)]]), tableOpts('Samenvatting'));
+    y = PdfSheet.table(doc, 15, y + 6, [0, 82], ['Groep', 'Materiaal'],
+      cost.categories.filter(r => r.mat > 0).map(r => [r.name, eur(r.mat)]), tableOpts('Materiaal per groep'));
+    PdfSheet.table(doc, 15, y + 6, [0, 82], ['Werkzaamheid', 'Manuur'],
+      cost.activities.filter(r => r.sec > 0).map(r => [r.name, CostModel.uur(r.sec / 3600)])
+        .concat([[`Toeslag indirect ${S.arbeid.toeslagUren}%`, CostModel.uur(s.hoursIndirect)], [`QA ${S.arbeid.qa}%`, CostModel.uur(s.hoursQa)], ['Totaal', CostModel.uur(s.hours)]]),
+      tableOpts('Arbeid per werkzaamheid'));
+
+    PdfSheet.table(doc, 130, 30, [0, 72, 97, 122], ['Element / onderdeel', 'Materiaal', 'Manuur', 'Kostprijs*'],
+      cost.elements.filter(el => el.lines.length).map(el => [clip(`${el.element}  ${el.label}`, 48), eur(el.mat), CostModel.uur(el.sec / 3600), eur(el.kostprijs)]),
+      Object.assign(tableOpts('Per element'), { maxY: 278 }));
+    PdfSheet.table(doc, 290, 30, [0, 40, 65, 88], ['Unit', 'Materiaal', 'Manuur', 'Kostprijs*'],
+      cost.units.map(u => [u.id ? `Unit ${u.id}` : 'Woning-breed', eur(u.mat), CostModel.uur(u.sec / 3600), eur(u.kostprijs)]), tableOpts('Per unit'));
+    doc.setFontSize(6.5);
+    doc.text('* Kostprijs: materiaal incl. verlies en klein materiaal + arbeid (manuren incl. bezetting, indirect en QA) + afschrijving/huisvesting', 290, 236);
+    doc.text('  (+ transport per unit, kraan bij woning-breed); zonder algemene kosten, marge en btw.', 290, 240);
+    doc.text('Schattingen op basis van Instellingen > Kosten & tijden; bedragen excl. btw tenzij vermeld.', 290, 244);
+    PdfSheet.titleBlock(doc, sheetOpts.project, sheetOpts);
+  }
+
+  function drawCostDetailSheet(doc, cols, sheetOpts) {
+    doc.setFont('helvetica', 'normal');
+    doc.setTextColor(...PdfSheet.COLORS.BLACK);
+    doc.setFontSize(14);
+    doc.text('Kostenraming per element (detail)', 15, 18);
+    cols.forEach((rows, i) => { if (rows.length) drawCostTable(doc, COST_COLS[i].x, COST_Y0, rows); });
+    PdfSheet.titleBlock(doc, sheetOpts.project, sheetOpts);
+  }
+
   function generate(state) {
     const parts = HouseModel.computeParts(state, {
       wallMaterials: WallModel.createMaterials(), floorMaterials: FloorModel.createMaterials(), roofMaterials: RoofModel.createMaterials()
     });
     const totals = HouseModel.computeTotals(parts);
     const sheets = sheetList(parts);
+    const cost = CostModel.compute(parts, totals);
+    const costOf = (element) => cost.elements.find(el => el.element === element);
+    const drawWallWithCost = (sheet, opts) => {
+      WallPdf.drawSheet(doc, sheet.piece.config, sheet.piece.frame, Object.assign({ buitenMateriaal: sheet.piece.buitenMateriaal, cladding: sheet.piece.cladding, trasraam: sheet.piece.trasraam, skinExt: sheet.piece.skinExt, facade: sheet.piece.facade, skinFrom: sheet.piece.skinFrom, lamps: sheet.piece.lamps || [],
+        overlay: ElektraPdf.wallOverlay(parts.elektra, sheet.piece) }, opts));
+      drawElementCost(doc, costOf(sheet.element));
+    };
+    const detailPages = paginateCostRows(costDetailRows(cost));
+    sheets.push({ kind: 'cost', element: 'KOST', label: 'Kostenraming' });
+    detailPages.forEach((cols, i) => sheets.push({ kind: 'costdetail', element: `KOST-${i + 1}`, label: 'Kostenraming detail' + (detailPages.length > 1 ? ` (${i + 1})` : ''), cols }));
     const project = state.project;
     const doc = PdfSheet.createDoc();
 
     sheets.forEach((sheet, i) => {
       if (i > 0) doc.addPage('a3', 'landscape');
       const opts = { project, titel: sheet.label, element: sheet.element, blad: `${i + 1} / ${sheets.length}` };
-      if (sheet.kind === 'plan') drawPlanSheet(doc, parts, sheets, opts);
-      else if (sheet.kind === 'floor') FloorPdf.drawSheet(doc, sheet.unit.floorData.calcData, sheet.unit.floorData.resolvedOpenings, opts);
-      else if (sheet.kind === 'roof') FloorPdf.drawSheet(doc, sheet.plane.data.calcData, sheet.plane.data.resolvedOpenings, Object.assign({ roof: true }, opts));
-      else if (sheet.kind === 'wall') WallPdf.drawSheet(doc, sheet.piece.config, sheet.piece.frame, Object.assign({ buitenMateriaal: sheet.piece.buitenMateriaal, cladding: sheet.piece.cladding, trasraam: sheet.piece.trasraam, skinExt: sheet.piece.skinExt, facade: sheet.piece.facade, skinFrom: sheet.piece.skinFrom, lamps: sheet.piece.lamps || [] }, opts));
+      if (sheet.kind === 'views') drawViewsSheet(doc, parts, state, opts);
+      else if (sheet.kind === 'plan') drawPlanSheet(doc, parts, sheets, opts);
+      else if (sheet.kind === 'floor') {
+        FloorPdf.drawSheet(doc, sheet.unit.floorData.calcData, sheet.unit.floorData.resolvedOpenings, Object.assign({ overlay: ElektraPdf.floorOverlay(parts.elektra, sheet.unit) }, opts));
+        drawElementCost(doc, costOf(sheet.element));
+      } else if (sheet.kind === 'roof') {
+        const pu = parts.units.find(u => u.roof.planes.includes(sheet.plane));
+        FloorPdf.drawSheet(doc, sheet.plane.data.calcData, sheet.plane.data.resolvedOpenings, Object.assign({ roof: true, overlay: pu && ElektraPdf.roofOverlay(parts.elektra, pu, sheet.plane) }, opts));
+        // Dakkosten per unit (alle dakvlakken samen): op het eerste dakvlak.
+        if (/-D1$/.test(sheet.element)) drawElementCost(doc, costOf(sheet.element.replace(/\d+$/, '')), 'alle dakvlakken');
+      }
+      else if (sheet.kind === 'cap') drawCapSheet(doc, sheet.unit, opts);
+      else if (sheet.kind === 'wall') drawWallWithCost(sheet, opts);
+      else if (sheet.kind === 'saw') drawSawSheet(doc, totals, cost, opts);
+      else if (sheet.kind === 'elektra') ElektraPdf.drawSheet(doc, parts.elektra, opts);
+      else if (sheet.kind === 'cost') drawCostSheet(doc, cost, opts);
+      else if (sheet.kind === 'costdetail') drawCostDetailSheet(doc, sheet.cols, opts);
       else drawTotalsSheet(doc, totals, opts);
     });
     return doc;
   }
 
-  return { generate, sheetList };
+  return { generate, sheetList, materialThumbUrls, viewFaces, VIEWS };
 })();

js/lighting/lighting-model.js

@@ -191,7 +191,7 @@ window.LightingModel = (() => {
               .filter(u => u >= 0 && u <= cfg.wallWidth).forEach(u => pos.push(uToS(sg, u))));
             return;
           }
-          cfg.openings.filter(op => op.y - sW <= H && op.y + op.h + sW >= H).forEach(op => {
+          cfg.openings.filter(op => op.y - sW <= H && WallModel.openingTopMax(op) + sW >= H).forEach(op => {
             const a = uToS(sg, op.x - sW), b = uToS(sg, op.x + op.w + sW);
             blocked.push([Math.min(a, b), Math.max(a, b)]);
           });
@@ -251,6 +251,23 @@ window.LightingModel = (() => {
     return Math.hypot(p.x - (a.x + t * dx), p.z - (a.z + t * dz));
   }
 
+  // Binnenruimte van een unit (woning-mm): de rect min de buitenwanden, en
+  // waar een naadwanddeel van deze unit tegen de naad staat, tot diens
+  // binnenzijde (net als bij een buitenwand). Ook gebruikt door ElektraModel.
+  function unitInnerRect(u, interior) {
+    const T = {};
+    u.walls.forEach(w => { T[w.side] = w.removed ? 0 : w.thickness; });
+    const r = u.rect;
+    interior.filter(iw => iw.seamUnit === u.id).forEach(iw => {
+      const p = iw.place, horiz = Math.abs(Math.sin(p.rotY)) < 0.5;
+      const [side, d] = horiz
+        ? (Math.abs(p.cz - r.z0) < Math.abs(p.cz - r.z1) ? ['voor', p.cz - r.z0] : ['achter', r.z1 - p.cz])
+        : (Math.abs(p.cx - r.x0) < Math.abs(p.cx - r.x1) ? ['links', p.cx - r.x0] : ['rechts', r.x1 - p.cx]);
+      T[side] = Math.max(T[side] || 0, d + p.thickness / 2);
+    });
+    return { x0: r.x0 + (T.links || 0), x1: r.x1 - (T.rechts || 0), z0: r.z0 + (T.voor || 0), z1: r.z1 - (T.achter || 0) };
+  }
+
   // Binnenspots per unit. units = HouseModel-parts.units (rect, walls, roof.ceilingAt),
   // interior = parts.interior (binnenwanden met place). Geeft
   // [{ unitId, x, z, y, floorY }] (mm, y = onderkant plafond, floorY = loopvlak).
@@ -259,21 +276,10 @@ window.LightingModel = (() => {
     if (!s.indoor) return [];
     const out = [];
     units.forEach(u => {
-      const T = {};
-      u.walls.forEach(w => { T[w.side] = w.removed ? 0 : w.thickness; });
-      const r = u.rect, off = s.indoorOffset;
-      // Naadwanddelen van deze unit staan binnen de rect tegen de naad: het
-      // raster begint dan vanaf hun binnenzijde (net als bij een buitenwand).
+      const off = s.indoorOffset, inner = unitInnerRect(u, interior);
       const own = interior.filter(iw => !iw.seamUnit || iw.seamUnit === u.id);
-      own.filter(iw => iw.seamUnit).forEach(iw => {
-        const p = iw.place, horiz = Math.abs(Math.sin(p.rotY)) < 0.5;
-        const [side, d] = horiz
-          ? (Math.abs(p.cz - r.z0) < Math.abs(p.cz - r.z1) ? ['voor', p.cz - r.z0] : ['achter', r.z1 - p.cz])
-          : (Math.abs(p.cx - r.x0) < Math.abs(p.cx - r.x1) ? ['links', p.cx - r.x0] : ['rechts', r.x1 - p.cx]);
-        T[side] = Math.max(T[side] || 0, d + p.thickness / 2);
-      });
-      const xs = gridPositions(r.x0 + (T.links || 0) + off, r.x1 - (T.rechts || 0) - off, s.indoorMin, s.indoorMax);
-      const zs = gridPositions(r.z0 + (T.voor || 0) + off, r.z1 - (T.achter || 0) - off, s.indoorMin, s.indoorMax);
+      const xs = gridPositions(inner.x0 + off, inner.x1 - off, s.indoorMin, s.indoorMax);
+      const zs = gridPositions(inner.z0 + off, inner.z1 - off, s.indoorMin, s.indoorMax);
       xs.forEach(x => zs.forEach(z => {
         const tooClose = own.some(iw => {
           const half = iw.place.width / 2, c = Math.cos(iw.place.rotY), sn = Math.sin(iw.place.rotY);
@@ -339,16 +345,19 @@ window.LightingModel = (() => {
   // spots = [{ x, z, y }] (mm, boeideel; y = onderkant boeideel, anders spotY),
   // indoor = [{ x, z, y, floorY }] (mm). o.outdoorFactor schaalt de buiten-
   // lampen (overdag lager: dan vallen ze nauwelijks op).
-  const OUTDOOR = { lamp: 2.0, spot: 1.6, angle: 0.5 };
-  const INDOOR = { intensity: 4.0, angle: 1.0, reach: 1.12, decay: 0.6 };
+  // Zacht en breed i.p.v. fel en smal: lagere intensiteit, grotere bundel
+  // en een brede zachte rand (penumbra), zodat naast elkaar liggende spots
+  // niet optellen tot felle vlekken.
+  const OUTDOOR = { lamp: 1.1, spot: 0.9, angle: 0.62, penumbra: 0.85 };
+  const INDOOR = { intensity: 1.4, angle: 1.3, penumbra: 0.9, reach: 1.12, decay: 1.0 };
   const DAY_OUTDOOR_FACTOR = 0.35;
   function buildLights3D(lamps, spots, spotY, indoor, o) {
     const toM = 0.001;
     const fo = (o && o.outdoorFactor !== undefined) ? o.outdoorFactor : 1;
     const group = new THREE.Group();
     // Spot op (x, y, z) die naar (x + tx, y + ty, z + tz) schijnt.
-    const add = (x, y, z, tx, ty, tz, intensity, angle, distance, decay) => {
-      const light = new THREE.SpotLight(0xffd9a0, intensity, distance, angle, 0.6, decay);
+    const add = (x, y, z, tx, ty, tz, intensity, angle, distance, decay, penumbra) => {
+      const light = new THREE.SpotLight(0xffd9a0, intensity, distance, angle, penumbra, decay);
       light.position.set(x, y, z);
       light.target.position.set(x + tx, y + ty, z + tz);
       group.add(light);
@@ -358,21 +367,130 @@ window.LightingModel = (() => {
     lamps.forEach(l => {
       const x = l.x * toM + l.normal.x * 0.12, z = l.z * toM + l.normal.z * 0.12, y = l.y * toM;
       const nx = l.normal.x * tilt, nz = l.normal.z * tilt;
-      if (l.direction !== 'up') add(x, y - 0.09, z, nx, -1, nz, OUTDOOR.lamp * fo, OUTDOOR.angle, 4.5, 1.5);
-      if (l.direction !== 'down') add(x, y + 0.09, z, nx, 1, nz, OUTDOOR.lamp * fo, OUTDOOR.angle, 4.5, 1.5);
+      if (l.direction !== 'up') add(x, y - 0.09, z, nx, -1, nz, OUTDOOR.lamp * fo, OUTDOOR.angle, 4.5, 1.5, OUTDOOR.penumbra);
+      if (l.direction !== 'down') add(x, y + 0.09, z, nx, 1, nz, OUTDOOR.lamp * fo, OUTDOOR.angle, 4.5, 1.5, OUTDOOR.penumbra);
     });
     // Boeideel-spots: naar buiten gekanteld (normaal van de dakrand; op een
     // hoek diagonaal).
     (spots || []).forEach(p => {
       const n = p.normal || { x: 0, z: 0 }, len = Math.hypot(n.x, n.z) || 1;
-      add(p.x * toM, (p.y !== undefined ? p.y : spotY) * toM - 0.02, p.z * toM, n.x / len * tilt, -1, n.z / len * tilt, OUTDOOR.spot * fo, OUTDOOR.angle, 5.5, 1.5);
+      add(p.x * toM, (p.y !== undefined ? p.y : spotY) * toM - 0.02, p.z * toM, n.x / len * tilt, -1, n.z / len * tilt, OUTDOOR.spot * fo, OUTDOOR.angle, 5.5, 1.5, OUTDOOR.penumbra);
     });
     (indoor || []).forEach(p => {
       const drop = (p.y - p.floorY) * toM; // plafond -> loopvlak
-      add(p.x * toM, p.y * toM - 0.02, p.z * toM, 0, -1, 0, INDOOR.intensity, INDOOR.angle, drop * INDOOR.reach, INDOOR.decay);
+      add(p.x * toM, p.y * toM - 0.02, p.z * toM, 0, -1, 0, INDOOR.intensity, INDOOR.angle, drop * INDOOR.reach, INDOOR.decay, INDOOR.penumbra);
+    });
+    if (o && o.walls) group.add(buildWash3D(lamps, spots, spotY, o.walls, o.groundY || 0, fo));
+    return group;
+  }
+
+  // ------------------------------------------------------------
+  // Nep-lichtvlekken (wall-wash) voor de render. Echte spots mogen niet op
+  // de gevel schijnen (geen schaduw: het licht zou door de muur naar binnen
+  // gaan, zie buildLights3D). In plaats daarvan komt op het gevelvlak een
+  // additief, zacht kegelvormig verloop: smal en fel bij de lamp, breder en
+  // zwakker naar beneden (of naar boven bij een up-light). Geen licht-
+  // berekening, dus geen grens aan het aantal.
+  // walls = buitenwandstukken (place, buitenMateriaal, stone); groundY = mm.
+  // ------------------------------------------------------------
+  const WASH = { color: 0xffd9a0, spot: 0.55, lamp: 0.45, spread: 0.5, lampReach: 1800 };
+  let washTexture = null;
+  function getWashTexture() {
+    if (washTexture) return washTexture;
+    const W = 128, H = 256;
+    const canvas = document.createElement('canvas');
+    canvas.width = W; canvas.height = H;
+    const ctx = canvas.getContext('2d');
+    const img = ctx.createImageData(W, H);
+    for (let j = 0; j < H; j++) {
+      const t = j / (H - 1); // 0 = bij de lamp, 1 = einde bundel
+      const half = 0.12 + 0.88 * Math.pow(t, 0.6); // bundelbreedte (fractie van de halve breedte)
+      const fade = Math.min(1, t * 12) * Math.pow(1 - t, 1.6); // zacht begin, uitdoven
+      for (let i = 0; i < W; i++) {
+        const x = Math.abs((i + 0.5) / W * 2 - 1) / half;
+        const v = x >= 1 ? 0 : fade * Math.pow(1 - x * x, 2);
+        const k = (j * W + i) * 4;
+        img.data[k] = img.data[k + 1] = img.data[k + 2] = Math.round(255 * v);
+        img.data[k + 3] = 255;
+      }
+    }
+    ctx.putImageData(img, 0, 0);
+    washTexture = new THREE.CanvasTexture(canvas);
+    return washTexture;
+  }
+  function washMesh(widthM, heightM, opacity, up) {
+    const mat = new THREE.MeshBasicMaterial({
+      map: getWashTexture(), color: WASH.color, transparent: true, opacity,
+      blending: THREE.AdditiveBlending, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -2
+    });
+    const geo = new THREE.PlaneGeometry(widthM, heightM);
+    // Lamp aan de bovenrand (down) resp. onderrand (up).
+    geo.translate(0, up ? heightM / 2 : -heightM / 2, 0);
+    if (up) { // textuur gespiegeld: lamp onderaan
+      const uv = geo.attributes.uv;
+      for (let i = 0; i < uv.count; i++) uv.setY(i, 1 - uv.getY(i));
+    }
+    const m = new THREE.Mesh(geo, mat);
+    m.renderOrder = 2;
+    return m;
+  }
+  function buildWash3D(lamps, spots, spotY, walls, groundY, fo) {
+    const toM = 0.001;
+    const group = new THREE.Group();
+    // Gevelvlak achter een punt (mm) met buitenrichting n: dichtstbijzijnde
+    // wandstuk met dezelfde normaal waar het punt vóór ligt.
+    const facadeBehind = (q, n) => {
+      let best = null;
+      walls.forEach(p => {
+        const pl = p.place;
+        if (pl.normal.x * n.x + pl.normal.y * n.z < 0.9) return;
+        const c = Math.cos(pl.rotY), sn = Math.sin(pl.rotY);
+        const dx = q.x - pl.cx, dz = q.z - pl.cz;
+        const lx = dx * c - dz * sn, lz = dx * sn + dz * c;
+        const face = pl.thickness / 2 + WallModel.claddingOffset(p.buitenMateriaal, p.stone);
+        const d = lz - face;
+        if (Math.abs(lx) > pl.width / 2 + 50 || d < -5 || d > 1500) return;
+        if (!best || d < best.d) best = { d, piece: p, lx, face };
+      });
+      return best;
+    };
+    const place = (mesh, pl, lx, lz, yMM) => {
+      const w = UnitModel.localToWorld(pl, lx, lz);
+      mesh.position.set(w.x * toM, yMM * toM, w.z * toM);
+      mesh.rotation.y = pl.rotY;
+      group.add(mesh);
+    };
+    // Boeideel-spots: van de spot omlaag tot het maaiveld (op een hoek,
+    // diagonale normaal, geen vlek).
+    (spots || []).forEach(sp => {
+      const n = sp.normal || { x: 0, z: 0 }, len = Math.hypot(n.x, n.z) || 1;
+      const nn = { x: n.x / len, z: n.z / len };
+      if (Math.abs(nn.x) > 0.1 && Math.abs(nn.z) > 0.1) return;
+      const top = (sp.y !== undefined ? sp.y : spotY) - 30;
+      const hit = facadeBehind(sp, nn);
+      if (!hit || top - groundY < 300) return;
+      const H = (top - groundY) * toM;
+      place(washMesh(2 * (0.1 + H * WASH.spread), H, WASH.spot * fo), hit.piece.place, hit.lx, hit.face + 6, top);
+    });
+    // Gevellampen (op de gevel): bundel omlaag en/of omhoog.
+    (lamps || []).forEach(l => {
+      const n = { x: l.normal.x, z: l.normal.z };
+      const hit = facadeBehind({ x: l.x + n.x * 20, z: l.z + n.z * 20 }, n);
+      if (!hit) return;
+      const pl = hit.piece.place;
+      if (l.direction !== 'up') {
+        const H = Math.min(WASH.lampReach, l.y - 90 - groundY) * toM;
+        if (H > 0.2) place(washMesh(2 * (0.06 + H * WASH.spread), H, WASH.lamp * fo), pl, hit.lx, hit.face + 6, l.y - 90);
+      }
+      if (l.direction !== 'down') {
+        // Niet boven de gevel uit (tot de bovenkant van het dak).
+        const wallTop = pl.floorTop + WallModel.topLine(hit.piece.config).maxY + (hit.piece.skinAbove || 0);
+        const H = Math.min(WASH.lampReach, wallTop - l.y - 90) * toM;
+        if (H > 0.2) place(washMesh(2 * (0.06 + H * WASH.spread), H, WASH.lamp * fo, true), pl, hit.lx, hit.face + 6, l.y + 90);
+      }
     });
     return group;
   }
 
-  return { DEFAULT_SETTINGS, MODES, DIRECTIONS, WALL_OVERRIDES, createDefaultUnitLighting, DAY_OUTDOOR_FACTOR, normalizeSettings, compute, computeIndoor, createMaterials, build3D, buildLights3D };
+  return { DEFAULT_SETTINGS, MODES, DIRECTIONS, WALL_OVERRIDES, createDefaultUnitLighting, DAY_OUTDOOR_FACTOR, normalizeSettings, compute, computeIndoor, unitInnerRect, freeIntervals, createMaterials, build3D, buildLights3D };
 })();

js/roof/roof-model.js

@@ -13,8 +13,9 @@
 // bovenop. Het "dek" van een dak is dus gewoon een vloer-state.
 //
 // Dakvorm volgt de wanden (computeShape): het paar tegenoverliggende wanden
-// met een schuine bovenrand of middenpunt (nok) zijn de kopgevels, het dak
-// volgt hun daklijn (plat, lessenaar of zadel). UnitModel.syncWallHeights
+// met een schuine bovenrand of tussenpunten (nok, knikken) zijn de kopgevels,
+// het dak volgt hun daklijn (plat, lessenaar, zadel, mansarde of wolfsdak;
+// bij een wolfsdak komen daar de wolfseinden bij, zie computeShape). UnitModel.syncWallHeights
 // houdt de wanden daarvoor consistent. Het dek (in de plattegrond) wordt per
 // dakvlak omgerekend naar een schuin vlak met de balken als sporen (van
 // laag naar hoog); doorvoeren gaan mee naar het vlak waarin ze vallen.
@@ -37,6 +38,7 @@
 
 window.RoofModel = (() => {
   const DAKLEER_MM = 2;             // visuele dikte van het dakleer
+  const BESCHOT_MM = 18;            // dakbeschot (OSB) bovenop de sporen, onder de bedekking
   const DENSITY_DAKLEER_KGM2 = 1.4; // EPDM ~1,4 kg/m2
   const TRIM_THICK_MM = 25;         // daktrim-profiel, uitstekend buiten de dakrand
   const EDGE_ABOVE_MM = 80;         // bovenkant boeideel/daktrim ligt zoveel boven het dakleer
@@ -69,12 +71,35 @@ window.RoofModel = (() => {
   // de stengels lopen langs de helling.
   // Riet: één keuze per textuur assets/textures/dak/riet_<nr>.jpg (nummer
   // hier toevoegen); zelfde opbouw (180 mm, 3,8 kg/m2).
-  const RIET = { thickMM: 180, kgM2: 3.8, tileMM: 1000, nrs: ['001', '002', '003'] };
+  // colors: gemiddelde kleur per textuur (vlakke weergave, PDF-aanzichten).
+  const RIET = { thickMM: 180, kgM2: 3.8, tileMM: 1000, nrs: ['001', '002', '003'], colors: { '001': '#947d69', '002': '#7c4c3f', '003': '#735e43' } };
+  // Felsplaten (staande naad, zink/staal op scheidingslaag): 25 mm hoge
+  // felsnaden elke seamMM langs de helling; alleen hellend.
+  const FELS = { thickMM: 25, kgM2: 6.5, seamMM: 500, colors: { zink: ['Felsplaat zink', '#8e9497'], antraciet: ['Felsplaat antraciet', '#3d4146'], zwart: ['Felsplaat zwart', '#1f2022'] } };
+  // kind: soort bedekking (dakleer | riet | fels) voor specificaties en kosten.
   const COVERINGS = Object.assign({
-    dakleer: { label: 'Dakleer (EPDM)', thickMM: DAKLEER_MM, kgM2: DENSITY_DAKLEER_KGM2 }
+    dakleer: { label: 'Dakleer (EPDM)', kind: 'dakleer', color: '#2a2a2a', thickMM: DAKLEER_MM, kgM2: DENSITY_DAKLEER_KGM2 }
   }, ...RIET.nrs.map(nr => ({
-    ['riet_' + nr]: { label: 'Riet ' + nr, thickMM: RIET.thickMM, kgM2: RIET.kgM2, file: `assets/textures/dak/riet_${nr}.jpg`, tileMM: RIET.tileMM, sloped: true }
+    ['riet_' + nr]: { label: 'Riet ' + nr, kind: 'riet', color: RIET.colors[nr] || '#8a7560', thickMM: RIET.thickMM, kgM2: RIET.kgM2, file: `assets/textures/dak/riet_${nr}.jpg`, tileMM: RIET.tileMM, sloped: true }
+  })), ...Object.entries(FELS.colors).map(([k, [label, color]]) => ({
+    ['fels_' + k]: { label, kind: 'fels', color, thickMM: FELS.thickMM, kgM2: FELS.kgM2, seamMM: FELS.seamMM, sloped: true }
   })));
+  const coverKind = (key) => (COVERINGS[key] || COVERINGS.dakleer).kind;
+  // Hoeveelheden per soort bedekking (zelfde sleutels in elke specs).
+  function coverSpecs(covering, areaM2) {
+    const c = COVERINGS[covering] || COVERINGS.dakleer, kg = areaM2 * c.kgM2, k = c.kind;
+    return {
+      dakleerM2: k === 'dakleer' ? areaM2 : 0, dakleerKg: k === 'dakleer' ? kg : 0,
+      rietM2: k === 'riet' ? areaM2 : 0, rietKg: k === 'riet' ? kg : 0,
+      felsM2: k === 'fels' ? areaM2 : 0, felsKg: k === 'fels' ? kg : 0,
+      coverKg: kg
+    };
+  }
+  // Voorvertoning (assets/textures/dak/thumb/<px>/<naam>.png) of null.
+  function coveringThumbUrl(key, px) {
+    const c = COVERINGS[key];
+    return c && c.file ? c.file.replace(/[^/]+$/, (f) => `thumb/${px || 64}/` + f.replace(/\.jpg$/, '.png')) : null;
+  }
   // Werkelijke bedekking voor een dakvorm (riet niet op een plat dak).
   function coveringFor(key, shapeType) {
     const c = COVERINGS[key];
@@ -83,8 +108,13 @@ window.RoofModel = (() => {
   const coveringMaterials = {};
   function coveringMaterial(key) {
     const c = COVERINGS[key];
-    if (!c || !c.file) return null;
+    if (!c) return null;
     if (coveringMaterials[key]) return coveringMaterials[key];
+    if (c.kind === 'fels') {
+      coveringMaterials[key] = new THREE.MeshStandardMaterial({ color: c.color, roughness: 0.4, metalness: 0.55, side: THREE.DoubleSide });
+      return coveringMaterials[key];
+    }
+    if (!c.file) return null;
     const mat = new THREE.MeshStandardMaterial({ color: 0x9c8466, roughness: 0.95 });
     if (typeof document !== 'undefined' && THREE.TextureLoader) {
       new THREE.TextureLoader().load(c.file, (tex) => {
@@ -111,9 +141,9 @@ window.RoofModel = (() => {
     return { followFloor: true, offsetX: 0, offsetZ: 0, fascia: true, covering: 'dakleer', deck };
   }
 
-  // Dikte dek + bedekking (mm, haaks op het dakvlak).
+  // Dikte dek (plafondplaat + sporen + dakbeschot) + bedekking (mm, haaks op het dakvlak).
   function thickness(calcData, covering) {
-    return calcData.joistH + calcData.underlayThick + (COVERINGS[covering] || COVERINGS.dakleer).thickMM;
+    return calcData.joistH + calcData.underlayThick + BESCHOT_MM + (COVERINGS[covering] || COVERINGS.dakleer).thickMM;
   }
 
   function createMaterials() {
@@ -128,13 +158,17 @@ window.RoofModel = (() => {
   // 3D van één dak (meters, gecentreerd op het dakmidden, Y = 0 onderkant
   // plafondplaat). Het vloer-3D (FloorModel.build3D) wordt gespiegeld
   // (scale.y = -1; three.js corrigeert de vlakoriëntatie zelf), daarna
-  // komt het dakleer er bovenop.
+  // komen het dakbeschot (OSB, fase beplating) en de bedekking (fase gevel)
+  // er bovenop. Felsplaten: dunne plaat met staande naden langs de helling.
   function build3D(calcData, resolvedOpenings, opts) {
     const m = opts.materials;
     const toM = 0.001;
     const group = new THREE.Group();
+    // Plafondplaat én bedekking zichtbaar: de sporen ertussen zijn ingesloten.
+    // Plafondplaat én dakbeschot zichtbaar (fase beplating): de sporen ertussen zijn ingesloten.
     const deck = FloorModel.build3D(calcData, resolvedOpenings, { wheels: [] }, {
-      materials: m, osbVisible: opts.osbVisible !== false
+      materials: m, osbVisible: opts.osbVisible !== false,
+      outerJoistsOnly: opts.osbVisible !== false
     });
     const deckH = (calcData.joistH + calcData.underlayThick) * toM;
     deck.scale.y = -1;
@@ -159,26 +193,46 @@ window.RoofModel = (() => {
     // de textuur (vorm-coördinaten in m = UV; langs de helling = v).
     const cov = COVERINGS[opts.covering] || COVERINGS.dakleer;
     const covMat = coveringMaterial(opts.covering) || m.dakleerMaterial;
-    const leer = new THREE.Mesh(new THREE.ExtrudeGeometry(shape, { steps: 1, depth: cov.thickMM * toM, bevelEnabled: false }), covMat);
-    leer.rotation.x = Math.PI / 2;
-    leer.position.y = deckH + cov.thickMM * toM;
-    leer.castShadow = cov.thickMM > DAKLEER_MM;
-    leer.visible = opts.dakleerVisible !== false;
-    group.add(leer);
+    const bT = BESCHOT_MM * toM;
+    if (opts.osbVisible !== false) {
+      const beschot = new THREE.Mesh(new THREE.ExtrudeGeometry(shape, { steps: 1, depth: bT, bevelEnabled: false }), m.osbMaterial);
+      beschot.rotation.x = Math.PI / 2;
+      beschot.position.y = deckH + bT;
+      beschot.castShadow = true;
+      group.add(beschot);
+    }
+    if (opts.dakleerVisible !== false) {
+      // Felsplaat: dunne plaat + naden; anders de volle laag (dakleer, riet).
+      const slabT = (cov.kind === 'fels' ? 1.5 : cov.thickMM) * toM;
+      const leer = new THREE.Mesh(new THREE.ExtrudeGeometry(shape, { steps: 1, depth: slabT, bevelEnabled: false }), covMat);
+      leer.rotation.x = Math.PI / 2;
+      leer.position.y = deckH + bT + slabT;
+      leer.castShadow = cov.thickMM > DAKLEER_MM;
+      group.add(leer);
+      if (cov.kind === 'fels') {
+        const n = Math.max(0, Math.floor(calcData.width / cov.seamMM));
+        const x0 = -(n * cov.seamMM) / 2;
+        for (let i = 0; i <= n; i++) {
+          const seam = new THREE.Mesh(new THREE.BoxGeometry(0.01, cov.thickMM * toM, dM), covMat);
+          seam.position.set((x0 + i * cov.seamMM) * toM, deckH + bT + cov.thickMM * toM / 2, 0);
+          seam.castShadow = true;
+          group.add(seam);
+        }
+      }
+    }
     return group;
   }
 
-  // Specificaties: die van het dek (FloorModel) + de bedekking (dakleer of
-  // bijv. riet: coveringM2/Kg, dakleer dan 0).
+  // Specificaties: die van het dek (FloorModel; osb = plafondplaat) + het
+  // dakbeschot (beschot*) + de bedekking (coverSpecs: dakleer/riet/fels).
   function computeSpecs(calcData, resolvedOpenings, covering) {
     const deck = FloorModel.computeSpecs(calcData, resolvedOpenings);
     const areaM2 = deck.osbAreaM2; // zelfde vlak minus doorvoeren
-    const isLeer = !COVERINGS[covering] || covering === 'dakleer';
-    const kg = areaM2 * (COVERINGS[covering] || COVERINGS.dakleer).kgM2;
-    return Object.assign({}, deck, {
-      dakleerM2: isLeer ? areaM2 : 0, dakleerKg: isLeer ? kg : 0,
-      rietM2: isLeer ? 0 : areaM2, rietKg: isLeer ? 0 : kg,
-      totalKg: deck.totalKg + kg
+    const cs = coverSpecs(covering, areaM2);
+    const bVol = areaM2 * BESCHOT_MM * 1e-3, bKg = bVol * DENSITY_OSB_KGM3;
+    return Object.assign({}, deck, cs, {
+      beschotM2: areaM2, beschotVolM3: bVol, beschotKg: bKg,
+      totalKg: deck.totalKg + bKg + cs.coverKg
     });
   }
 
@@ -196,22 +250,41 @@ window.RoofModel = (() => {
     const s = UnitModel.WALL_SIDES.find(x => x.key === side);
     const c = s.axis === 'x' ? wl.cx : wl.cz;
     const pts = [{ p: c - s.dir * wl.width / 2, h: w.heightLeft }, { p: c + s.dir * wl.width / 2, h: w.heightRight }];
-    if (w.heightMid > 0) pts.push({ p: c, h: Math.max(w.heightMid, w.heightLeft, w.heightRight) });
+    // Tussenpunten (nok, knikken van mansarde/wolfsdak), x vanaf links.
+    WallModel.wallTopPoints(w, wl.width, w.heightLeft, w.heightRight)
+      .forEach(q => pts.push({ p: c - s.dir * wl.width / 2 + s.dir * q.x, h: q.h }));
     return pts.sort((a, b) => a.p - b.p);
   }
 
   // Dakvorm van een unit. layout = UnitModel.computeLayout-resultaat.
-  // Geeft { type: 'plat'|'lessenaar'|'zadel', axis: 'x'|'z', profile }:
-  // de hoogte van de dakonderkant (vanaf het loopvlak) hangt alleen af van
-  // de positie langs axis (profileHeight). Kopgevels: de eerste wand met
-  // een schuine daklijn (noord/zuid -> dak helt langs X, west/oost -> langs Z).
-  // Zonder schuine wanden: plat op de hoogste wand.
+  // Geeft { type: 'plat'|'lessenaar'|'zadel'|'mansarde'|'wolf', axis: 'x'|'z',
+  // profile, hip? }: de hoogte van de dakonderkant (vanaf het loopvlak)
+  // hangt alleen af van de positie langs axis (profileHeight), behalve bij
+  // een wolfsdak (hip). Kopgevels: de eerste wand met een schuine daklijn
+  // (noord/zuid -> dak helt langs X, west/oost -> langs Z). Zonder schuine
+  // wanden: plat op de hoogste wand.
+  //   zadel     3 punten (goot, nok, goot)
+  //   mansarde  5 punten (goot, knik, nok, knik, goot)
+  //   wolf      4 punten met een vlakke top: de kopgevel stopt op het
+  //             wolfseind. Het profiel wordt dat van het zadeldak (de
+  //             schuine stukken doorgetrokken tot de nok), met de knikken op
+  //             het wolfseind; hip = { h }: de wolfseinden lopen vanaf de
+  //             kopgevels op hoogte h omhoog tot de nok (computeCap).
   function computeShape(unitState, layout) {
     for (const [side, axis] of [['achter', 'x'], ['voor', 'x'], ['links', 'z'], ['rechts', 'z']]) {
       const profile = wallProfile(unitState, layout, side);
-      if (profile.some(q => Math.abs(q.h - profile[0].h) > 0.5)) {
-        return { type: profile.length > 2 ? 'zadel' : 'lessenaar', axis, profile };
+      if (!profile.some(q => Math.abs(q.h - profile[0].h) > 0.5)) continue;
+      if (profile.length === 4 && Math.abs(profile[1].h - profile[2].h) < 0.5) {
+        const [L, A, B, R] = profile, sA = (A.h - L.h) / (A.p - L.p), sB = (R.h - B.h) / (R.p - B.p);
+        // Snijpunt van de doorgetrokken schuine stukken = nok.
+        const pr = Math.abs(sA - sB) > 1e-9 ? (B.h - sB * B.p - A.h + sA * A.p) / (sA - sB) : (A.p + B.p) / 2;
+        const ridge = { p: pr, h: A.h + sA * (pr - A.p) };
+        if (sA > 0 && sB < 0 && pr > A.p && pr < B.p) {
+          return { type: 'wolf', axis, profile: [L, A, ridge, B, R], hip: { h: A.h } };
+        }
       }
+      const type = profile.length === 2 ? 'lessenaar' : profile.length === 5 ? 'mansarde' : 'zadel';
+      return { type, axis, profile };
     }
     const h = Math.max(...Object.values(unitState.walls).map(ws => UnitModel.wallTopOf(ws)));
     return { type: 'plat', axis: 'z', profile: [{ p: 0, h }] };
@@ -291,22 +364,199 @@ window.RoofModel = (() => {
       });
     });
 
-    const planeAt = (q) => planes.find((pl, i) => q < pl.p1 || i === planes.length - 1);
-    const undersideAt = (x, z) => H(alongX ? x : z);
-    const topAt = (x, z) => {
+    // Knik tussen twee vlakken met een verschillende helling (mansarde):
+    // de bovenkanten snijden elkaar vóór (het steilere vlak is verticaal
+    // dikker), dus de vlakken sluiten in verstek aan: onderkant op de knik,
+    // bovenkant op het snijpunt van de bovenvlakken (miter = verschuiving
+    // van de bovenkant t.o.v. de knik, mm langs de as; 0 = verticaal).
+    planes.forEach((pl, i) => { pl.miter0 = 0; pl.miter1 = 0; });
+    planes.slice(0, -1).forEach((pi, i) => {
+      const pj = planes[i + 1], ai = Math.tan(pi.theta), aj = Math.tan(pj.theta);
+      if (Math.abs(ai - aj) < 1e-4) return;
+      const dp = (pj.vThick - pi.vThick) / (ai - aj);
+      pi.miter1 = dp; pj.miter0 = dp;
+    });
+    const mainUnder = (x, z) => H(alongX ? x : z);
+    // Bovenkant: het laagste van de (doorgetrokken) bovenvlakken; de daklijn
+    // is bol, dus dat is precies het dak, ook rond een knik.
+    const mainTop = (x, z) => {
       const q = alongX ? x : z;
-      const onKink = planes.filter(pl => Math.abs(q - pl.p0) < 0.5 || Math.abs(q - pl.p1) < 0.5);
-      const t = onKink.length > 1 ? Math.max(...onKink.map(pl => pl.vThick)) : planeAt(q).vThick;
-      return H(q) + t;
+      return Math.min(...planes.map(pl => pl.h0 + (q - pl.p0) * Math.tan(pl.theta) + pl.vThick));
     };
+    // Wolfsdak: de vlakken tussen de wolfseind-knikken worden geen
+    // rechthoekige dekken; dat bovenste deel (cap, computeCap) is het laagste
+    // van de twee dakvlakken en de twee wolfseinden, met één top.
+    let cap = null, undersideAt = mainUnder, topAt = mainTop, outPlanes = planes;
+    if (shape.type === 'wolf' && shape.hip && kinks.length === 3) {
+      cap = computeCap(roofState, shape, rect, alongX, kinks, covering);
+      outPlanes = planes.filter(pl => !(pl.p0 >= cap.pA - 0.5 && pl.p1 <= cap.pB + 0.5));
+      const at = (x, z) => ({ x: alongX ? x : z, z: alongX ? z : x }); // (p, q)
+      undersideAt = (x, z) => Math.min(mainUnder(x, z), ...cap.regions.map(rg => rg.under(at(x, z))));
+      topAt = (x, z) => Math.min(mainTop(x, z), ...cap.regions.map(rg => rg.under(at(x, z)) + rg.vThick));
+    }
     return {
-      shape, covering, planes, specs: sumSpecs(planes.map(pl => pl.specs)),
-      undersideAt, topAt,
+      shape, covering, planes: outPlanes, specs: sumSpecs(outPlanes.map(pl => pl.specs).concat(cap ? [cap.specs] : [])),
+      undersideAt, topAt, cap, rect, alongX,
       ridges: kinks.map(value => ({ axis: shape.axis, value })),
-      maxTop: Math.max(...planes.map(pl => Math.max(pl.h0, pl.h1) + pl.vThick))
+      maxTop: cap ? cap.maxTop : Math.max(...planes.map(pl => Math.max(pl.h0, pl.h1) + pl.vThick))
     };
   }
 
+  // ------------------------------------------------------------
+  // Bovenste deel van een wolfsdak (cap). Coördinaten (p, q) als { x: p,
+  // z: q } (unit-lokaal mm): p langs de helling van het hoofddak, q langs de
+  // nok. Band p = pA..pB (wolfseind-knikken), q = q0..q1 (de kopgevels).
+  // Vier vlakken (onderkant dak): m1/m2 de twee dakvlakken, h1/h2 de
+  // wolfseinden: vanaf de kopgevel op hipH met de dakhelling omhoog tot de
+  // nokhoogte (driehoek), daartussen een rechte nok op pR. Is de unit te kort
+  // voor een nokstuk, dan worden de wolfseinden steiler en lopen ze in één
+  // punt samen. Per vlak het gebied waar het het laagste is (regions).
+  // Houtwerk zoals de dekken: plafondplaat, sporen (dakvlakken: op dezelfde
+  // q als de balken van het onderste dek; wolfseinden: verdeeld over pA..pB),
+  // hoekkepers van elke hoek van de band naar het nokeinde, nokbalk, kopbalk
+  // langs de voet van een wolfseind.
+  // ------------------------------------------------------------
+  const DENSITY_WOOD_KGM3 = 450, DENSITY_OSB_KGM3 = 650; // zelfde als FloorModel
+  function computeCap(roofState, shape, rect, alongX, kinks, covering) {
+    const H = (p) => profileHeight(shape.profile, p);
+    const [pA, pR, pB] = kinks, hipH = shape.hip.h, top = H(pR);
+    const q0 = alongX ? rect.z0 : rect.x0, q1 = alongX ? rect.z1 : rect.x1, qM = (q0 + q1) / 2;
+    const fp = roofState.deck.floor;
+    const joistW = fp.joistWidth || 70, joistH = fp.joistHeight || 220, underlay = fp.underlayThick || 22;
+    const cov = COVERINGS[covering] || COVERINGS.dakleer;
+    const sA = (top - H(pA)) / (pR - pA), sB = (top - H(pB)) / (pB - pR);
+    // Helling wolfseinden: die van het dak, maar minstens zo steil dat ze de
+    // nokhoogte halen vóór het midden tussen de kopgevels.
+    const tH = Math.max((sA + sB) / 2, (top - hipH) / Math.max(1, qM - q0));
+    const inset = (top - hipH) / tH; // nokeinde vanaf de kopgevel
+    const plane = (key, slope, f, along) => {
+      const cos = Math.cos(Math.atan(slope));
+      return { key, f, along, cos, tV: underlay / cos, jV: joistH / cos, bV: BESCHOT_MM / cos, covV: cov.thickMM / cos };
+    };
+    const fns = [
+      plane('m1', sA, (p) => H(pA) + (p.x - pA) * sA, 'p'),
+      plane('m2', sB, (p) => H(pB) + (pB - p.x) * sB, 'p'),
+      plane('h1', tH, (p) => hipH + (p.z - q0) * tH, 'q'),
+      plane('h2', tH, (p) => hipH + (q1 - p.z) * tH, 'q')
+    ];
+    const band = [{ x: pA, z: q0 }, { x: pB, z: q0 }, { x: pB, z: q1 }, { x: pA, z: q1 }];
+    const regions = fns.map((fi, i) => {
+      let poly = band;
+      fns.forEach((fj, j) => { if (j !== i && poly.length >= 3) poly = clipPoly(poly, (p) => fj.f(p) - fi.f(p)); });
+      // Samenvallende punten (afsnijden door de top) weg.
+      poly = poly.filter((p, k) => { const q = poly[(k + 1) % poly.length]; return Math.hypot(q.x - p.x, q.z - p.z) > 0.5; });
+      return Object.assign({}, fi, { poly, under: fi.f, vThick: fi.tV + fi.jV + fi.bV + fi.covV });
+    }).filter(rg => rg.poly.length >= 3 && quadArea(rg.poly) > 100);
+
+    // Snijden van een lijn (vaste p of vaste q) met een convexe veelhoek.
+    const cutLine = (poly, fixed, v) => {
+      const ts = [];
+      poly.forEach((a, k) => {
+        const b = poly[(k + 1) % poly.length], av = a[fixed], bv = b[fixed];
+        if ((av - v) * (bv - v) > 0 || Math.abs(bv - av) < 1e-9) return;
+        const t = (v - av) / (bv - av), o = fixed === 'x' ? 'z' : 'x';
+        ts.push(a[o] + (b[o] - a[o]) * t);
+      });
+      return ts.length >= 2 ? [Math.min(...ts), Math.max(...ts)] : null;
+    };
+    // Balken als veelhoek in de plattegrond (rechthoek van balkbreedte rond
+    // de hartlijn A-B, afgezaagd tegen de balken waar hij op aansluit) met
+    // de onderkant op het dakvlak (yAt: + plafondplaat). Lengte = langs de
+    // balk, hoek = helling van de balk.
+    const hw = joistW / 2;
+    const rectAround = (A, B) => {
+      const L = Math.hypot(B.x - A.x, B.z - A.z), nx = -(B.z - A.z) / L * hw, nz = (B.x - A.x) / L * hw;
+      return [{ x: A.x - nx, z: A.z - nz }, { x: B.x - nx, z: B.z - nz }, { x: B.x + nx, z: B.z + nz }, { x: A.x + nx, z: A.z + nz }];
+    };
+    // Halfvlak aan de kant van `from` naast het zijvlak van balk m (>= 0 blijft).
+    const awayFrom = (m, from) => {
+      const L = Math.hypot(m.B.x - m.A.x, m.B.z - m.A.z), nx = -(m.B.z - m.A.z) / L, nz = (m.B.x - m.A.x) / L;
+      const d = (p) => (p.x - m.A.x) * nx + (p.z - m.A.z) * nz;
+      const sgn = d(from) >= 0 ? 1 : -1;
+      return (p) => sgn * d(p) - hw;
+    };
+    const distToSeg = (p, m) => {
+      const dx = m.B.x - m.A.x, dz = m.B.z - m.A.z, L2 = dx * dx + dz * dz;
+      const t = Math.max(0, Math.min(1, ((p.x - m.A.x) * dx + (p.z - m.A.z) * dz) / L2));
+      return Math.hypot(p.x - (m.A.x + dx * t), p.z - (m.A.z + dz * t));
+    };
+    const beams = [];
+    const addBeam = (kind, rg, A, B, clips, lineHeight) => {
+      if (Math.hypot(B.x - A.x, B.z - A.z) < 100) return null;
+      let poly = rectAround(A, B);
+      (clips || []).forEach(f => { if (poly.length >= 3) poly = clipPoly(poly, f); });
+      if (poly.length < 3) return null;
+      const dx = B.x - A.x, dz = B.z - A.z, L = Math.hypot(dx, dz);
+      const yA = rg.under(A) + rg.tV, yB = rg.under(B) + rg.tV;
+      // Hartlijnbalk (hoekkeper, nokbalk): hoogte langs de hartlijn; anders op het vlak.
+      const yAt = lineHeight
+        ? (p) => yA + (yB - yA) * Math.max(0, Math.min(1, ((p.x - A.x) * dx + (p.z - A.z) * dz) / (L * L)))
+        : (p) => rg.under(p) + rg.tV;
+      const ts = poly.map(p => ((p.x - A.x) * dx + (p.z - A.z) * dz) / L);
+      const plan = Math.max(...ts) - Math.min(...ts), slope = Math.abs(yB - yA) / L;
+      if (plan < 50) return null;
+      const bm = {
+        kind, A, B, poly, yAt, jV: rg.jV,
+        length: Math.round(plan * Math.sqrt(1 + slope * slope)), angle: Math.round(Math.atan(slope) * 1800 / Math.PI) / 10
+      };
+      beams.push(bm);
+      return bm;
+    };
+    // Raamwerk: kopbalken (binnen de kopgevel, op de bovenregel), hoekkepers
+    // van elke hoek van de band naar het nokeinde, nokbalk ertussen. De
+    // hoekkepers staan op de kopbalk en sluiten bovenin in verstek op elkaar
+    // aan; de nokbalk is afgezaagd tegen de hoekkepers.
+    const mOf = (x) => regions.find(rg => rg.key === (x < pR ? 'm1' : 'm2')) || regions[0];
+    const hOf = (z) => regions.find(rg => rg.key === (z < qM ? 'h1' : 'h2')) || regions[0];
+    const ends = [{ x: pR, z: Math.min(qM, q0 + inset) }, { x: pR, z: Math.max(qM, q1 - inset) }];
+    const hasRidge = ends[1].z - ends[0].z >= 100;
+    const kops = [q0 + hw, q1 - hw].map(qv => addBeam('kopbalk', hOf(qv), { x: pA, z: qv }, { x: pB, z: qv }, [
+      (p) => p.z - q0 - 0.01, (p) => q1 - p.z - 0.01])).filter(Boolean);
+    const hips = band.map(c => {
+      const e = c.z < qM ? ends[0] : ends[1], sp = Math.sign(pR - c.x), sq = Math.sign(qM - c.z);
+      const clips = [(p) => sp * (pR - p.x)];
+      if (!hasRidge) clips.push((p) => sq * (qM - p.z));
+      // Op de kopbalk: vanaf zijn binnenkant.
+      clips.push((p) => sq * (c.z + sq * joistW - p.z) * -1);
+      return addBeam('hoekkeper', mOf(c.x), c, e, clips, true);
+    }).filter(Boolean);
+    let ridgeBeam = null;
+    if (hasRidge) {
+      const mid = { x: pR, z: qM };
+      ridgeBeam = addBeam('nokbalk', mOf(pR - 1), ends[0], ends[1], hips.map(h => awayFrom(h, mid)), true);
+    }
+    const members = kops.concat(hips, ridgeBeam ? [ridgeBeam] : []);
+    // Sporen: afgezaagd tegen de balk(en) waar ze op uitkomen.
+    const spread = (len) => FloorModel.computeFrame({ width: len, depth: 1000, joistWidth: joistW, joistHeight: joistH, minSpacing: fp.minSpacing, maxSpacing: fp.maxSpacing, underlayThick: underlay }).joists.map(x => x + len / 2);
+    const qs = spread(q1 - q0).map(v => q0 + v), ps = spread(pB - pA).map(v => pA + v);
+    regions.forEach(rg => {
+      const fixed = rg.along === 'p' ? 'z' : 'x';
+      (rg.along === 'p' ? qs : ps).forEach(v => {
+        const span = cutLine(rg.poly, fixed, v);
+        if (!span) return;
+        const pt = (t) => fixed === 'z' ? { x: t, z: v } : { x: v, z: t };
+        const A = pt(span[0]), B = pt(span[1]), mid = pt((span[0] + span[1]) / 2);
+        const clips = members.filter(m => distToSeg(A, m) < hw + 1 || distToSeg(B, m) < hw + 1).map(m => awayFrom(m, mid));
+        addBeam('spoor', rg, A, B, clips);
+      });
+    });
+
+    // Specificaties (zelfde sleutels als computeSpecs).
+    const W = joistW * 1e-3, Hh = joistH * 1e-3;
+    const woodM3 = beams.reduce((t, bm) => t + bm.length * 1e-3 * W * Hh, 0);
+    const areaM2 = regions.reduce((t, rg) => t + quadArea(rg.poly) / rg.cos, 0) / 1e6;
+    const cs = coverSpecs(covering, areaM2), osbVol = areaM2 * underlay * 1e-3, bVol = areaM2 * BESCHOT_MM * 1e-3;
+    const specs = Object.assign({
+      joistWoodM3: woodM3, joistWoodKg: woodM3 * DENSITY_WOOD_KGM3,
+      osbAreaM2: areaM2, osbVolM3: osbVol, osbKg: osbVol * DENSITY_OSB_KGM3,
+      beschotM2: areaM2, beschotVolM3: bVol, beschotKg: bVol * DENSITY_OSB_KGM3,
+      voidM3: Math.max(0, areaM2 * Hh - woodM3),
+      totalKg: woodM3 * DENSITY_WOOD_KGM3 + (osbVol + bVol) * DENSITY_OSB_KGM3 + cs.coverKg
+    }, cs);
+    const maxTop = top + Math.max(...regions.map(rg => rg.vThick));
+    return { pA, pR, pB, q0, q1, hipH, joistW, joistH, regions, beams, specs, maxTop };
+  }
+
   // 3D van het dak van één unit (meters, gecentreerd op de dakrechthoek,
   // Y = 0 op het loopvlak): per dakvlak build3D, zo vervormd dat de
   // onderkant van het plafond precies op de daklijn van de wanden ligt.
@@ -321,6 +571,7 @@ window.RoofModel = (() => {
   function buildUnit3D(unitRoof, opts) {
     const toM = 0.001;
     const group = new THREE.Group();
+    if (unitRoof.cap) group.add(buildCap3D(unitRoof, opts));
     unitRoof.planes.forEach(pl => {
       const g = new THREE.Group();
       g.position.set(pl.cx * toM, pl.y * toM, pl.cz * toM);
@@ -333,13 +584,105 @@ window.RoofModel = (() => {
         0, 1 / c, sn, 0,
         0, 0, c, 0,
         0, 0, 0, 1);
-      shear.add(build3D(pl.data.calcData, pl.data.resolvedOpenings, Object.assign({ covering: unitRoof.covering }, opts)));
+      const deck = build3D(pl.data.calcData, pl.data.resolvedOpenings, Object.assign({ covering: unitRoof.covering }, opts));
+      if (pl.miter0 || pl.miter1) miterDeck(deck, pl, c);
+      shear.add(deck);
       g.add(shear);
       group.add(g);
     });
     return group;
   }
 
+  // Verstek op de uiteinden van een dek (vóór de afschuiving; lokaal z
+  // langs de helling, -L/2 .. L/2, y = 0 onderkant .. T bovenkant): elk
+  // hoekpunt op een uiteinde schuift met de hoogte mee naar de verstekhoek
+  // (pl.miter0 / miter1 in mm langs de as, omgerekend langs de helling).
+  function miterDeck(deck, pl, cos) {
+    const toM = 0.001, cd = pl.data.calcData;
+    const L = cd.depth * toM, T = pl.vThick * cos * toM;
+    const d0 = pl.miter0 * toM / cos, d1 = pl.miter1 * toM / cos;
+    const v = new THREE.Vector3(), rel = new THREE.Matrix4(), inv = new THREE.Matrix4();
+    deck.updateMatrixWorld(true);
+    const base = new THREE.Matrix4().copy(deck.matrixWorld).invert();
+    deck.traverse(o => {
+      const pos = o.geometry && o.geometry.attributes && o.geometry.attributes.position;
+      if (!pos) return;
+      rel.multiplyMatrices(base, o.matrixWorld);
+      inv.copy(rel).invert();
+      for (let k = 0; k < pos.count; k++) {
+        v.fromBufferAttribute(pos, k).applyMatrix4(rel);
+        const t = Math.max(0, Math.min(1, v.y / T));
+        if (d1 && v.z > L / 2 - 1e-4) v.z = L / 2 + d1 * t;
+        else if (d0 && v.z < -L / 2 + 1e-4) v.z = -L / 2 + d0 * t;
+        else continue;
+        v.applyMatrix4(inv);
+        pos.setXYZ(k, v.x, v.y, v.z);
+      }
+      pos.needsUpdate = true;
+      o.geometry.computeBoundingSphere();
+      if (o.geometry.attributes.normal) o.geometry.computeVertexNormals();
+    });
+  }
+
+  // Bovenste deel van een wolfsdak (unitRoof.cap, zie computeCap): per
+  // hellend vlak plafondplaat en bedekking (verticale dikte, UV langs de
+  // helling), sporen/hoekkepers/kopbalken als balken met verticale kopse
+  // kanten (zoals de afgeschoven dekken). Plaat én bedekking zichtbaar:
+  // alleen de kopbalken (de rest is ingesloten).
+  function capRegions(unitRoof) { return unitRoof.cap ? unitRoof.cap.regions : []; }
+  function buildCap3D(unitRoof, opts) {
+    const toM = 0.001, m = opts.materials, c = unitRoof.cap, r = unitRoof.rect;
+    const xc = (r.x0 + r.x1) / 2, zc = (r.z0 + r.z1) / 2;
+    const group = new THREE.Group();
+    const osbOn = opts.osbVisible !== false, covOn = opts.dakleerVisible !== false;
+    const covMat = coveringMaterial(unitRoof.covering) || m.dakleerMaterial;
+    // (p, q) -> wereld (m, t.o.v. het dakmidden).
+    const P = (pt, y) => {
+      const x = unitRoof.alongX ? pt.x : pt.z, z = unitRoof.alongX ? pt.z : pt.x;
+      return [(x - xc) * toM, y * toM, (z - zc) * toM];
+    };
+    // Plaat onder een convexe veelhoek: onderkant bottom(pt), dikte h (verticaal).
+    function slab(poly, bottom, h, topMat, sideMat, uvOf) {
+      const n = poly.length, pos = [], uv = [];
+      const T = poly.map(pt => P(pt, bottom(pt) + h)), B = poly.map(pt => P(pt, bottom(pt)));
+      const UV = poly.map(pt => uvOf ? uvOf(pt) : [0, 0]), z2 = [0, 0];
+      const tri = (a, b, cc, ua, ub, uc) => { pos.push(...a, ...b, ...cc); uv.push(...ua, ...ub, ...uc); };
+      // Oriëntatie zo dat de bovenkant naar boven wijst.
+      const up = (T[1][0] - T[0][0]) * (T[2][2] - T[0][2]) - (T[1][2] - T[0][2]) * (T[2][0] - T[0][0]) < 0;
+      for (let k = 1; k < n - 1; k++) up ? tri(T[0], T[k], T[k + 1], UV[0], UV[k], UV[k + 1]) : tri(T[0], T[k + 1], T[k], UV[0], UV[k + 1], UV[k]);
+      const topCount = pos.length / 3;
+      for (let k = 1; k < n - 1; k++) up ? tri(B[0], B[k + 1], B[k], z2, z2, z2) : tri(B[0], B[k], B[k + 1], z2, z2, z2);
+      for (let k = 0; k < n; k++) {
+        const j = (k + 1) % n;
+        up ? (tri(T[k], B[k], B[j], z2, z2, z2), tri(T[k], B[j], T[j], z2, z2, z2))
+          : (tri(T[k], B[j], B[k], z2, z2, z2), tri(T[k], T[j], B[j], z2, z2, z2));
+      }
+      const geo = new THREE.BufferGeometry();
+      geo.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
+      geo.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2));
+      geo.addGroup(0, topCount, 0);
+      geo.addGroup(topCount, pos.length / 3 - topCount, 1);
+      geo.computeVertexNormals();
+      const mesh = new THREE.Mesh(geo, [topMat, sideMat]);
+      mesh.castShadow = true;
+      mesh.receiveShadow = true;
+      group.add(mesh);
+    }
+    c.regions.forEach(rg => {
+      if (osbOn) slab(rg.poly, rg.under, rg.tV, m.osbMaterial, m.osbMaterial);
+      if (osbOn) slab(rg.poly, (pt) => rg.under(pt) + rg.tV + rg.jV, rg.bV, m.osbMaterial, m.osbMaterial); // dakbeschot
+      if (covOn) slab(rg.poly, (pt) => rg.under(pt) + rg.tV + rg.jV + rg.bV, rg.covV, covMat, covMat,
+        (pt) => rg.along === 'p' ? [pt.z * toM, pt.x * toM / rg.cos] : [pt.x * toM, pt.z * toM / rg.cos]);
+    });
+    // Balken: hun (afgezaagde) veelhoek in de plattegrond, onderkant op
+    // bm.yAt, hoogte jV verticaal.
+    c.beams.forEach(bm => {
+      if (osbOn && bm.kind !== 'kopbalk') return; // ingesloten tussen plafondplaat en dakbeschot
+      slab(bm.poly, bm.yAt, bm.jV, m.woodMaterial, m.woodMaterial);
+    });
+    return group;
+  }
+
   // ------------------------------------------------------------
   // Dakrand over de hele woning
   // ------------------------------------------------------------
@@ -379,7 +722,14 @@ window.RoofModel = (() => {
   // dakleer (absoluut, loopt buiten het dak door met de helling). Geeft per
   // ribbe (segments) de geometrie terug; edge.spots wordt door LightingModel
   // gevuld (met y = onderkant boeideel ter plaatse).
-  function computeEdge(settings, roofs) {
+  // facadeDepth(a, b, normal) (optioneel, mm): dikte van de gevelafwerking
+  // (doek + latwerk, steen) buiten het wandvlak langs die ribbe. De gevel
+  // loopt achter het boeideel door tot de bovenkant van het dak; het
+  // boeideel / de daktrim valt er overheen en sluit aan de dakkant aan op
+  // het dak (binnenrand = dakrand, van boven dicht). De spots komen in de
+  // onderplaat vóór de gevel. Negatief = gevel van een ander (hoger) deel
+  // die naar dit dak toe kijkt: de rand stopt tegen die afgewerkte gevel.
+  function computeEdge(settings, roofs, facadeDepth) {
     const s = normalizeSettings(settings);
     const rects = roofs.map(r => r.rect);
     if (!roofs.length) return null;
@@ -441,6 +791,25 @@ window.RoofModel = (() => {
           overRoof: !!nb && !dropped, dropped
         };
       });
+      // Binnenrand: alleen tegen de gevel van een hoger deel (negatieve
+      // diepte) inkorten; spotlijn vóór de gevel. Op een hoek van twee haakse
+      // ribben het snijpunt van beide verschoven lijnen, anders loodrecht.
+      const depRaw = segs.map(sg => (facadeDepth ? facadeDepth(sg.a, sg.b, sg.normal) || 0 : 0));
+      const dep = depRaw.map(d => Math.min(0, d));
+      const spotD = depRaw.map(d => Math.max(0, d) + (s.overhang - Math.max(0, d)) * SPOT_RATIO);
+      const perp = (m1, m2) => Math.abs(m1.x * m2.x + m1.z * m2.z) < 0.5;
+      const shifted = segs.map((sg, i) => {
+        const pi = (i - 1 + n) % n, ni = (i + 1) % n, pv = segs[pi], nx = segs[ni];
+        const at = (v, own, ownD, other, otherD) => perp(own, other)
+          ? { x: v.x + own.x * ownD + other.x * otherD, z: v.z + own.z * ownD + other.z * otherD }
+          : { x: v.x + own.x * ownD, z: v.z + own.z * ownD };
+        return {
+          a: at(sg.a, sg.normal, dep[i], pv.normal, dep[pi]), b: at(sg.b, sg.normal, dep[i], nx.normal, dep[ni]),
+          spotA: at(sg.a, sg.normal, spotD[i], pv.normal, spotD[pi]), spotB: at(sg.b, sg.normal, spotD[i], nx.normal, spotD[ni])
+        };
+      });
+      segs.forEach((sg, i) => Object.assign(sg, shifted[i], { facadeDepth: depRaw[i] }));
+
       // Naast een vervallen ribbe (tegen een hoger dak):
       //   - ligt het verlengde van de rand in het hoge deel, dan loopt hij
       //     recht door tot die gevel (spot op spotafstand van de gevel);
@@ -559,9 +928,9 @@ window.RoofModel = (() => {
   }
 
   return {
-    DAKLEER_MM, EDGE_ABOVE_MM, RIET, OVERHANG_MIN, OVERHANG_MAX, DEFAULT_SETTINGS, SPOT_RATIO, FASCIA_COLORS, COVERINGS, coveringFor,
+    DAKLEER_MM, BESCHOT_MM, EDGE_ABOVE_MM, RIET, FELS, coverKind, OVERHANG_MIN, OVERHANG_MAX, DEFAULT_SETTINGS, SPOT_RATIO, FASCIA_COLORS, COVERINGS, coveringFor, coveringThumbUrl,
     createDefaultRoof, thickness, createMaterials, build3D, computeSpecs,
-    computeShape, wallProfile, profileHeight, computeUnitRoof, buildUnit3D,
+    computeShape, wallProfile, profileHeight, computeUnitRoof, buildUnit3D, capRegions,
     computeEdge, buildEdge3D, normalizeSettings
   };
 })();

js/unit/unit-model.js

@@ -192,24 +192,31 @@ window.UnitModel = (() => {
     const fullConfig = WallModel.configFromState(wallState);
     const W = wallLayout.width;
     const hL = wallState.wall.heightLeft, hR = wallState.wall.heightRight;
-    // Middenpunt (nok) midden op de wand; een stuk krijgt de nok alleen als
-    // die erin valt, anders de daklijn ter plaatse als gewone helling.
-    const hM = wallState.wall.heightMid > 0 ? Math.max(wallState.wall.heightMid, hL, hR) : null;
-    const pU = W / 2;
-    const heightAt = (u) => hM === null ? hL + (u / W) * (hR - hL)
-      : u <= pU ? hL + (u / pU) * (hM - hL) : hM + ((u - pU) / (W - pU)) * (hR - hM);
+    // Tussenpunten van de daklijn (nok, knikken; WallModel.wallTopPoints);
+    // een stuk krijgt de punten die erin vallen, verder de daklijn ter
+    // plaatse als gewone helling.
+    const tops = WallModel.wallTopPoints(wallState.wall, W, hL, hR);
+    const tp = [{ x: 0, h: hL }, ...tops, { x: W, h: hR }];
+    const heightAt = (u) => {
+      let i = 0;
+      while (i < tp.length - 2 && u > tp[i + 1].x) i++;
+      const a = tp[i], b = tp[i + 1];
+      return a.h + (u - a.x) / (b.x - a.x) * (b.h - a.h);
+    };
+    const topsIn = (a, b, base) => {
+      const inner = tops.filter(q => q.x > a + 1 && q.x < b - 1);
+      return inner.length ? { heightMid: null, topPts: inner.map(q => ({ f: (q.x - a) / (b - a), h: q.h - base })) } : { heightMid: null, topPts: undefined };
+    };
     const multi = wallLayout.pieces.length > 1;
     const used = new Set();
 
     const pieces = wallLayout.pieces.map(([a, b, inL, inR], i) => {
       const openings = fullConfig.openings
         .filter(op => op.x >= a - EPS && op.x + op.w <= b + EPS)
-        .map(op => { used.add(op.id); return { id: op.id, type: op.type, w: op.w, h: op.h, y: op.y, anchor: 'left', offset: op.x - a }; });
-      const hasPeak = hM !== null && a < pU - 1 && b > pU + 1;
+        .map(op => { used.add(op.id); return { id: op.id, type: op.type, fill: op.fill, w: op.w, h: op.h, hR: op.hR, y: op.y, anchor: 'left', offset: op.x - a }; });
       const params = Object.assign({}, wallState.wall, {
-        width: b - a, heightLeft: Math.round(heightAt(a)), heightRight: Math.round(heightAt(b)),
-        heightMid: hasPeak ? hM : null, peakX: hasPeak ? pU - a : undefined
-      });
+        width: b - a, heightLeft: Math.round(heightAt(a)), heightRight: Math.round(heightAt(b))
+      }, topsIn(a, b, 0));
       const config = WallModel.buildConfig(params, openings);
       return {
         suffix: multi ? String.fromCharCode(97 + i) : '', // a, b, ...
@@ -228,16 +235,14 @@ window.UnitModel = (() => {
     const ins = wallLayout.endInset || { left: 0, right: 0 };
     raisedList.forEach((r, i) => {
       const { u0: a, u1: b, base } = r;
-      const hasPeak = hM !== null && a < pU - 1 && b > pU + 1;
       const hA = heightAt(a) - base, hB = heightAt(b) - base;
       if (Math.min(hA, hB) < MIN_RAISE_MM) return;
       const openings = fullConfig.openings
         .filter(op => op.x >= a - EPS && op.x + op.w <= b + EPS && op.y >= base - EPS)
-        .map(op => { used.add(op.id); return { id: op.id, type: op.type, w: op.w, h: op.h, y: op.y - base, anchor: 'left', offset: op.x - a }; });
+        .map(op => { used.add(op.id); return { id: op.id, type: op.type, fill: op.fill, w: op.w, h: op.h, hR: op.hR, y: op.y - base, anchor: 'left', offset: op.x - a }; });
       const params = Object.assign({}, wallState.wall, {
-        width: b - a, heightLeft: Math.round(hA), heightRight: Math.round(hB),
-        heightMid: hasPeak ? hM - base : null, peakX: hasPeak ? pU - a : undefined
-      });
+        width: b - a, heightLeft: Math.round(hA), heightRight: Math.round(hB)
+      }, topsIn(a, b, base));
       const config = WallModel.buildConfig(params, openings);
       pieces.push({
         suffix: 'o' + (raisedList.length > 1 ? i + 1 : ''), // opbouw
@@ -258,9 +263,11 @@ window.UnitModel = (() => {
   // Wandhoogtes koppelen, zodat er altijd een logisch dak op past. De
   // bewerkte wand (side) bepaalt de dakvorm:
   //   - de tegenoverliggende wand krijgt dezelfde hoogtes gespiegeld (van
-  //     buitenaf gezien wisselen links en rechts), incl. middenpunt (nok);
-  //   - de twee haakse wanden worden vlak op de hoogte van de hoek waar ze
-  //     op aansluiten (goothoogte bij een lessenaar- of zadeldak).
+  //     buitenaf gezien wisselen links en rechts), incl. nok en knikken;
+  //   - de twee haakse wanden worden vlak op de hoogte van het dak boven
+  //     hun buitenkant (goothoogte bij een lessenaar- of zadeldak). Staat
+  //     de kopgevel tussen de haakse wanden in, dan loopt zijn daklijn
+  //     daarvoor door tot de buitenkant van de vloer (gableSpan).
   // Voorbeeld: west zuid hoger dan noord -> oost ook, noordwand vlak op de
   // lage, zuidwand vlak op de hoge hoogte. Muteert state.
   // Welke haakse wand zit aan de linker/rechterkant (van buitenaf gezien).
@@ -271,22 +278,189 @@ window.UnitModel = (() => {
     rechts: { left: 'achter', right: 'voor' }
   };
   const OPPOSITE = { voor: 'achter', achter: 'voor', links: 'rechts', rechts: 'links' };
+  // Plaats van een wand t.o.v. de volle vloermaat langs zijn as (van
+  // buitenaf gezien): e0/e1 = afstand van de vloerrand tot het linker-/
+  // rechteruiteinde, w = wandlengte, span = vloermaat (= e0 + w + e1).
+  function gableSpan(state, side) {
+    const layout = computeLayout(state, {});
+    const wl = layout.walls.find(x => x.side === side);
+    const s = WALL_SIDES.find(x => x.key === side);
+    const span = s.axis === 'x' ? layout.floorWidth : layout.floorDepth;
+    const c = s.axis === 'x' ? wl.cx : wl.cz;
+    const left = c - s.dir * wl.width / 2, right = c + s.dir * wl.width / 2;
+    const e0 = Math.max(0, Math.abs(left + s.dir * span / 2)), e1 = Math.max(0, Math.abs(s.dir * span / 2 - right));
+    return { e0, e1, w: wl.width, span, layout };
+  }
+  // Daklijn van een wand over de volle vloermaat: [{ u, h }] met u vanaf de
+  // linker vloerrand; de eerste en laatste helling lopen door tot de randen.
+  function fullTopLine(wall, g) {
+    const pts = [{ u: g.e0, h: wall.heightLeft }]
+      .concat(WallModel.wallTopPoints(wall, g.w, wall.heightLeft, wall.heightRight).map(q => ({ u: g.e0 + q.x, h: q.h })))
+      .concat([{ u: g.e0 + g.w, h: wall.heightRight }]);
+    const n = pts.length, s0 = (pts[1].h - pts[0].h) / (pts[1].u - pts[0].u), s1 = (pts[n - 1].h - pts[n - 2].h) / (pts[n - 1].u - pts[n - 2].u);
+    pts[0] = { u: 0, h: pts[0].h - g.e0 * s0 };
+    pts[n - 1] = { u: g.span, h: pts[n - 1].h + g.e1 * s1 };
+    return pts;
+  }
+  // Omgekeerd: een daklijn over de volle vloermaat ([{ u, h }]) op de wand
+  // zetten (hoogtes op de uiteinden, knikken als topPts; één knik in het
+  // midden als heightMid).
+  function setWallTopLine(wall, g, line) {
+    const at = (u) => {
+      let i = 0;
+      while (i < line.length - 2 && u > line[i + 1].u) i++;
+      const a = line[i], b = line[i + 1];
+      return a.h + (u - a.u) / (b.u - a.u) * (b.h - a.h);
+    };
+    const hL = Math.round(at(g.e0)), hR = Math.round(at(g.e0 + g.w));
+    const inner = line.slice(1, -1).filter(q => q.u > g.e0 + 1 && q.u < g.e0 + g.w - 1).map(q => ({ f: (q.u - g.e0) / g.w, h: Math.round(q.h) }));
+    const mid = inner.length === 1 && Math.abs(inner[0].f - 0.5) < 1e-3;
+    Object.assign(wall, { heightLeft: hL, heightRight: hR, heightMid: mid ? inner[0].h : null, heightAll: Math.min(hL, hR) });
+    if (inner.length && !mid) wall.topPts = inner; else delete wall.topPts;
+  }
   function syncWallHeights(state, side) {
     const w = state.walls[side].wall;
     const mid = w.heightMid > 0 ? w.heightMid : null;
-    const set = (key, hL, hR, hM) => {
+    const pts = Array.isArray(w.topPts) && w.topPts.length ? w.topPts : null;
+    // Haakse wanden: op de onderkant van het dak boven hun buiten- of
+    // binnenkant, de laagste van de twee (zo steekt de wand nooit door het
+    // dak; de wig tussen bovenregel en dak vult een schuine regel op, zie
+    // HouseModel / WallModel topWedge).
+    const g = gableSpan(state, side), full = fullTopLine(w, g), n = full.length;
+    const thick = (key) => (g.layout.walls.find(x => x.side === key) || {}).thickness || 0;
+    const s0 = (full[1].h - full[0].h) / (full[1].u - full[0].u), s1 = (full[n - 1].h - full[n - 2].h) / (full[n - 1].u - full[n - 2].u);
+    const edgeL = Math.round(Math.min(full[0].h, full[0].h + thick(WALL_ENDS[side].left) * s0));
+    const edgeR = Math.round(Math.min(full[n - 1].h, full[n - 1].h - thick(WALL_ENDS[side].right) * s1));
+    const set = (key, hL, hR, hM, tp) => {
       const t = state.walls[key].wall;
       t.heightLeft = hL; t.heightRight = hR; t.heightMid = hM;
-      t.heightAll = hM === null && hL === hR ? hL : w.heightAll;
+      if (tp) t.topPts = tp; else delete t.topPts;
+      t.heightAll = hM === null && !tp && hL === hR ? hL : w.heightAll;
     };
-    set(OPPOSITE[side], w.heightRight, w.heightLeft, mid);
-    set(WALL_ENDS[side].left, w.heightLeft, w.heightLeft, null);
-    set(WALL_ENDS[side].right, w.heightRight, w.heightRight, null);
+    // Gespiegeld (van buitenaf gezien): knikken van rechts naar links.
+    set(OPPOSITE[side], w.heightRight, w.heightLeft, mid, pts && pts.map(q => ({ f: 1 - q.f, h: q.h })).reverse());
+    set(WALL_ENDS[side].left, edgeL, edgeL, null);
+    set(WALL_ENDS[side].right, edgeR, edgeR, null);
   }
-  // Hoogste punt van een wand (incl. nok).
+  // Hoogste punt van een wand (incl. nok en knikken).
   function wallTopOf(wallState) {
     const w = wallState.wall;
-    return Math.max(w.heightLeft, w.heightRight, w.heightMid > 0 ? w.heightMid : 0);
+    return Math.max(w.heightLeft, w.heightRight, w.heightMid > 0 ? w.heightMid : 0, ...(w.topPts || []).map(q => q.h));
+  }
+
+  // ------------------------------------------------------------
+  // Dakvorm als invoer. Het dak volgt de wanden (RoofModel.computeShape);
+  // hier de omgekeerde weg: één dakvorm per unit, de wanden volgen
+  // (via syncWallHeights op de kopgevel).
+  //   { type: 'plat', low }                         hoogte
+  //   { type: 'lessenaar', dir, low, high }         dir = hoge zijde (voor/achter/links/rechts)
+  //   { type: 'zadel', ridge, low, high }           ridge = richting nok: 'z' (noord–zuid) of 'x' (west–oost)
+  //   { type: 'mansarde', ridge, low, high, kneeH, kneeIn, kneeRatio }
+  //       steil ondervlak van de goot tot de knik (kneeH, kneeIn = afstand
+  //       van de knik tot de gevel), daarboven flauw tot de nok
+  //   { type: 'wolf', ridge, low, high, cut, cutRatio }
+  //       zadeldak waarvan de kopgevels boven `cut` zijn afgeschuind
+  //       (wolfseinden, dakhelling tot de nok; rechte nok ertussen)
+  // kneeRatio / cutRatio: plaats van de knik resp. het wolfseind tussen goot
+  // (0) en nok (1). Gaat voor kneeH / cut, zodat ze meeschalen als goot of
+  // nok verandert (roofForm geeft ze altijd terug).
+  // low = goothoogte, high = hoge goot resp. nok (mm vanaf het loopvlak),
+  // over de volle vloermaat: de goot ligt boven de buitenkant van de
+  // gevel, de nok in het midden (ook als de kopgevel tussen de haakse
+  // wanden staat; fullTopLine). kneeIn = afstand van de vloerrand.
+  // Mansarde en wolfsdak: de kopgevel krijgt een daklijn met knikken
+  // (wall.topPts, zie WallModel.wallTopPoints).
+  // ------------------------------------------------------------
+  // Grenzen van onze woningen (mm, vanaf het loopvlak; maat van de vloer):
+  // nok (hoogste punt onderkant dak) max 5 m, goot / plat dak max 3 m, een
+  // unit max 4,3 x 14 m (de korte zijde max 4,3 m).
+  const LIMITS = { ridge: 5000, eave: 3000, short: 4300, long: 14000 };
+  // Vloermaat binnen de grenzen (muteert floor = state.floor.floor). keep:
+  // 'width' of 'depth' = de zojuist gewijzigde maat; bij twee lange zijden
+  // wordt die geklemd (anders de kortste).
+  function clampSize(floor, keep) {
+    floor.width = Math.min(LIMITS.long, floor.width);
+    floor.depth = Math.min(LIMITS.long, floor.depth);
+    if (Math.min(floor.width, floor.depth) > LIMITS.short) {
+      const k = keep || (floor.width <= floor.depth ? 'width' : 'depth');
+      floor[k] = LIMITS.short;
+    }
+    return floor;
+  }
+  const ROOF_TYPES = { plat: 'Plat', lessenaar: 'Lessenaar', zadel: 'Zadel', mansarde: 'Mansarde', wolf: 'Wolfsdak' };
+  const RIDGES = { z: 'Noord–zuid', x: 'West–oost' };
+  const hasRidge = (type) => type === 'zadel' || type === 'mansarde' || type === 'wolf';
+  // Kopgevel (wand met de schuine daklijn) bij een dakvorm.
+  function gableOf(form) {
+    if (hasRidge(form.type)) return form.ridge === 'x' ? 'links' : 'achter';
+    if (form.type === 'lessenaar') return form.dir === 'links' || form.dir === 'rechts' ? 'achter' : 'links';
+    return 'achter';
+  }
+  // Huidige dakvorm, afgelezen uit de wanden (zelfde volgorde als computeShape).
+  function roofForm(unitState) {
+    const W = unitState.walls;
+    for (const side of ['achter', 'voor', 'links', 'rechts']) {
+      const w = W[side].wall;
+      const ridge = side === 'voor' || side === 'achter' ? 'z' : 'x';
+      const full = fullTopLine(w, gableSpan(unitState, side));
+      const F = full[full.length - 1].u, inner = full.slice(1, -1);
+      const L = full[0], R = full[full.length - 1], low = Math.round(Math.min(L.h, R.h));
+      if (inner.length === 3) {
+        const high = Math.round(inner[1].h);
+        return { type: 'mansarde', ridge, low, high, kneeH: Math.round(inner[0].h), kneeIn: Math.round(inner[0].u), kneeRatio: (inner[0].h - low) / Math.max(1, high - low) };
+      }
+      if (inner.length === 2 && Math.abs(inner[0].h - inner[1].h) < 0.5) {
+        const slope = (inner[0].h - L.h) / Math.max(1, inner[0].u);
+        const high = Math.round(L.h + slope * F / 2);
+        return { type: 'wolf', ridge, low, high, cut: Math.round(inner[0].h), cutRatio: (inner[0].h - low) / Math.max(1, high - low) };
+      }
+      if (inner.length === 1) return { type: 'zadel', ridge, low, high: Math.round(inner[0].h) };
+      if (Math.abs(L.h - R.h) > 0.5) {
+        const dir = R.h > L.h ? WALL_ENDS[side].right : WALL_ENDS[side].left;
+        return { type: 'lessenaar', dir, low, high: Math.round(Math.max(L.h, R.h)) };
+      }
+    }
+    const h = Math.max(...Object.values(W).map(wallTopOf));
+    return { type: 'plat', low: h, high: h };
+  }
+  // Dakvorm toepassen: de kopgevel krijgt de daklijn (over de volle
+  // vloermaat bepaald, zie fullTopLine), syncWallHeights doet de rest.
+  // Zonder hoogteverschil wordt het een plat dak. Muteert state.
+  function applyRoofForm(unitState, form) {
+    const low = Math.round(Math.min(LIMITS.eave, form.low));
+    const high = Math.round(Math.min(LIMITS.ridge, Math.max(low, form.high || low)));
+    const sloped = form.type !== 'plat' && high > low;
+    const side = sloped ? gableOf(form) : 'achter';
+    const g = gableSpan(unitState, side), F = g.span, half = F / 2;
+    let line = [{ u: 0, h: low }, { u: F, h: low }];
+    if (sloped && form.type === 'zadel') line = [{ u: 0, h: low }, { u: half, h: high }, { u: F, h: low }];
+    else if (sloped && form.type === 'mansarde') {
+      // Knik binnen de halve gevel; altijd boven de rechte lijn goot–nok
+      // (anders geen mansarde maar een hol dak).
+      // (en op de kopgevel zelf, ook als die tussen de haakse wanden staat)
+      const kIn = Math.max(Math.max(g.e0, g.e1) + 100, Math.min(half - 100, Math.round(form.kneeIn || F * 0.18)));
+      const minK = low + (high - low) * kIn / half + 20;
+      const want = form.kneeRatio > 0 ? low + form.kneeRatio * (high - low) : form.kneeH;
+      const kH = Math.round(Math.min(high - 20, Math.max(minK, want || minK)));
+      line = kH > minK - 1 && high - kH >= 20
+        ? [{ u: 0, h: low }, { u: kIn, h: kH }, { u: half, h: high }, { u: F - kIn, h: kH }, { u: F, h: low }]
+        : [{ u: 0, h: low }, { u: half, h: high }, { u: F, h: low }];
+    } else if (sloped && form.type === 'wolf') {
+      // Wolfseind: de kopgevel stopt op `cut`, waar de dakhelling die hoogte haalt.
+      // Op de kopgevel zelf (ook als die tussen de haakse wanden staat).
+      const minR = (Math.max(g.e0, g.e1) + 50) / half;
+      const ratio = form.cutRatio > 0 ? form.cutRatio : form.cut ? (form.cut - low) / (high - low) : 0.6;
+      const cut = Math.round(Math.max(low + 50, Math.min(high - 50, low + Math.max(0.05, minR, Math.min(0.95, ratio)) * (high - low))));
+      const uc = (cut - low) / (high - low) * half;
+      line = high - low > 100
+        ? [{ u: 0, h: low }, { u: uc, h: cut }, { u: F - uc, h: cut }, { u: F, h: low }]
+        : [{ u: 0, h: low }, { u: half, h: high }, { u: F, h: low }];
+    } else if (sloped) {
+      const highLeft = WALL_ENDS[side].left === form.dir;
+      line = [{ u: 0, h: highLeft ? high : low }, { u: F, h: highLeft ? low : high }];
+    }
+    setWallTopLine(unitState.walls[side].wall, g, line);
+    syncWallHeights(unitState, side);
   }
 
   function validateState(design) {
@@ -302,5 +476,5 @@ window.UnitModel = (() => {
     }
   }
 
-  return { WALL_SIDES, CORNER_MODES, clone, createDefaultState, localToWorld, computeLayout, wallPieces, syncWallHeights, wallTopOf, validateState };
+  return { WALL_SIDES, CORNER_MODES, ROOF_TYPES, RIDGES, LIMITS, clampSize, hasRidge, clone, createDefaultState, localToWorld, computeLayout, wallPieces, syncWallHeights, wallTopOf, gableOf, roofForm, applyRoofForm, validateState };
 })();

js/wall/kozijn-model.js

@@ -0,0 +1,253 @@
+/*!
+ * Tectum
+ * Copyright © 2026 Machiel Heinen.
+ * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
+ * Zie LICENTIE.md.
+ */
+// ============================================================
+// wall/kozijn-model.js — Vulling van een opening (window.KozijnModel):
+// kunststof kozijnen naar het voorbeeld van de Aluplast Ideal 7000
+// (examples/Buiten kozijnen.pdf): kader 70 mm in het aanzicht, 120 mm
+// diep, buitenzijde in een andere kleur dan de binnenzijde (folie).
+//
+// Een opening krijgt een (optionele) vulling, opgeslagen bij de opening:
+//   op.fill = { type: 'raam'|'deur', rooster, glas, out, in }
+//     raam   vast glas in het kader; rooster = ventilatierooster bovenin
+//     deur   deurblad (draait links) met dorpel; is de opening breder of
+//            hoger dan één deur, dan vult vast glas de rest (zijlicht,
+//            bovenlicht). glas = glasstrook in het deurblad
+//     out/in kleur buiten/binnen (COLORS)
+// Zonder fill blijft de opening open (zoals voorheen). Het formaat volgt
+// altijd de opening (ook een schuine bovenzijde).
+//
+// Plain script (geen ES-module), geen DOM. Gebruikt door WallModel.build3D.
+// ============================================================
+
+window.KozijnModel = (() => {
+  const COLORS = {
+    wit: { label: 'Wit', ral: 'RAL 9016', hex: 0xf1f0ea },
+    grijs: { label: 'Grijs', ral: 'RAL 7038', hex: 0xaeb0aa },
+    antraciet: { label: 'Antraciet', ral: 'RAL 7016', hex: 0x383e42 },
+    zwart: { label: 'Zwart', ral: 'RAL 9005', hex: 0x151515 }
+  };
+  const FILL_TYPES = { geen: 'Geen (open)', raam: 'Raam (vast glas)', deur: 'Deur' };
+  const DEFAULT_OUT = 'antraciet', DEFAULT_IN = 'wit';
+
+  // Maten (mm).
+  const P = {
+    gap: 5,         // stelruimte rondom
+    kader: 70,      // kader in het aanzicht
+    depth: 120,     // kaderdiepte
+    dorpel: 30,     // deurdorpel (hoogte)
+    tussen: 70,     // tussenstijl/-regel (deur naast zijlicht, onder bovenlicht)
+    rooster: 80,    // ventilatierooster (hoogte)
+    glass: 24,      // glasdikte
+    leafW: 930,     // deurblad (binnenmaat kader) als er een zijlicht naast past
+    leafH: 2200,    // deurblad als er een bovenlicht boven past
+    leafT: 68,      // deurbladdikte
+    minLight: 250   // kleinste zijlicht/bovenlicht
+  };
+
+  const colorKey = (k, def) => COLORS[k] ? k : def;
+  // Volledige vulling (defaults ingevuld) of null (geen vulling).
+  function normalize(fill) {
+    if (!fill || !FILL_TYPES[fill.type] || fill.type === 'geen') return null;
+    return {
+      type: fill.type, rooster: !!fill.rooster, glas: fill.glas !== false,
+      out: colorKey(fill.out, DEFAULT_OUT), in: colorKey(fill.in, DEFAULT_IN)
+    };
+  }
+  // Standaardvulling bij een openingtype (WallModel.OPENING_TYPES); kleuren
+  // van `like` (bijv. de vorige opening) overnemen.
+  function defaultFill(openingType, like) {
+    const l = normalize(like) || {};
+    const type = openingType === 'deur' || openingType === 'voordeur' ? 'deur' : 'raam';
+    return { type, rooster: false, glas: openingType === 'voordeur', out: l.out || DEFAULT_OUT, in: l.in || DEFAULT_IN };
+  }
+
+  // ------------------------------------------------------------
+  // 2D-veelhoeken (mm, tegen de klok in, x vanaf de linkerkant van de
+  // opening, y vanaf de onderkant).
+  // ------------------------------------------------------------
+  // Convexe veelhoek naar binnen verschoven, per zijde (zijde i = punt i ->
+  // punt i+1) een eigen afstand d[i].
+  function insetPoly(pts, d) {
+    const n = pts.length;
+    const lines = pts.map((p, i) => {
+      const q = pts[(i + 1) % n];
+      const len = Math.hypot(q.x - p.x, q.y - p.y) || 1;
+      const dx = (q.x - p.x) / len, dy = (q.y - p.y) / len;
+      return { x: p.x - dy * d[i], y: p.y + dx * d[i], dx, dy };
+    });
+    return pts.map((p, i) => {
+      const a = lines[(i - 1 + n) % n], b = lines[i];
+      const den = a.dx * b.dy - a.dy * b.dx;
+      if (Math.abs(den) < 1e-9) return { x: b.x, y: b.y };
+      const t = ((b.x - a.x) * b.dy - (b.y - a.y) * b.dx) / den;
+      return { x: a.x + a.dx * t, y: a.y + a.dy * t };
+    });
+  }
+  // Veelhoek afgekapt op een halfvlak (Sutherland-Hodgman): f(p) >= 0
+  // blijft, f is lineair.
+  function clipPoly(pts, f) {
+    const out = [];
+    pts.forEach((p, i) => {
+      const q = pts[(i + 1) % pts.length];
+      const fp = f(p), fq = f(q);
+      if (fp >= 0) out.push(p);
+      if ((fp >= 0) !== (fq >= 0)) {
+        const t = fp / (fp - fq);
+        out.push({ x: p.x + (q.x - p.x) * t, y: p.y + (q.y - p.y) * t });
+      }
+    });
+    return out;
+  }
+  const rect = (x0, x1, y0, y1) => [{ x: x0, y: y0 }, { x: x1, y: y0 }, { x: x1, y: y1 }, { x: x0, y: y1 }];
+  const areaOf = (pts) => Math.abs(pts.reduce((a, p, i) => { const q = pts[(i + 1) % pts.length]; return a + p.x * q.y - q.x * p.y; }, 0)) / 2;
+
+  // ------------------------------------------------------------
+  // 3D
+  // ------------------------------------------------------------
+  const mats = {};
+  function colorMat(key) {
+    const k = 'c:' + colorKey(key, DEFAULT_OUT);
+    return mats[k] || (mats[k] = new THREE.MeshStandardMaterial({ color: COLORS[colorKey(key, DEFAULT_OUT)].hex, roughness: 0.45 }));
+  }
+  function mat(key) {
+    if (mats[key]) return mats[key];
+    if (key === 'glass') mats[key] = new THREE.MeshStandardMaterial({ color: 0x9fbfcc, roughness: 0.05, metalness: 0.2, transparent: true, opacity: 0.28, depthWrite: false, side: THREE.DoubleSide });
+    else if (key === 'rubber') mats[key] = new THREE.MeshStandardMaterial({ color: 0x1b1b1b, roughness: 0.8 });
+    else mats[key] = new THREE.MeshStandardMaterial({ color: 0x9a9da0, roughness: 0.3, metalness: 0.7 }); // beslag
+    return mats[key];
+  }
+
+  const toM = 0.001;
+  const toShape = (pts, holes) => {
+    const s = new THREE.Shape(pts.map(p => new THREE.Vector2(p.x * toM, p.y * toM)));
+    (holes || []).forEach(h => s.holes.push(new THREE.Path(h.map(p => new THREE.Vector2(p.x * toM, p.y * toM)))));
+    return s;
+  };
+  // Plaat van z0 tot z1 (mm); buitenvlak (z1) in matOut als dat afwijkt
+  // (folie aan de buitenzijde, de rest in de binnenkleur).
+  function slab(g, pts, holes, z0, z1, matIn, matOut, shadow) {
+    if (pts.length < 3 || areaOf(pts) < 1) return;
+    const FOIL = matOut && matOut !== matIn ? 1 : 0;
+    const add = (a, b, m) => {
+      const mesh = new THREE.Mesh(new THREE.ExtrudeGeometry(toShape(pts, holes), { depth: (b - a) * toM, bevelEnabled: false }), m);
+      mesh.position.z = a * toM;
+      mesh.castShadow = shadow !== false;
+      mesh.receiveShadow = true;
+      g.add(mesh);
+    };
+    add(z0, z1 - FOIL, matIn);
+    if (FOIL) add(z1 - FOIL, z1, matOut);
+  }
+  const box = (g, m, x, y, z, w, h, d) => {
+    const mesh = new THREE.Mesh(new THREE.BoxGeometry(w * toM, h * toM, d * toM), m);
+    mesh.position.set(x * toM, y * toM, z * toM);
+    mesh.castShadow = true;
+    g.add(mesh);
+  };
+
+  // Kozijn in een opening (opgelost: w, h links, hR rechts). Geeft een
+  // groep in mm-lokale coördinaten van de opening (x vanaf links, y vanaf
+  // de onderkant, +z = buiten) in meters, of null.
+  // place: { zOut (mm, buitenvlak kozijn), depth (mm), exterior (dorpel) }
+  function build3D(op, fill, place) {
+    const f = normalize(fill);
+    if (!f) return null;
+    const g = new THREE.Group();
+    const mIn = colorMat(f.in), mOut = colorMat(f.out);
+    const depth = Math.min(P.depth, place.depth || P.depth);
+    const z1 = place.zOut, z0 = z1 - depth;
+    const hR = op.hR !== undefined ? op.hR : op.h;
+    const outer = insetPoly([{ x: 0, y: 0 }, { x: op.w, y: 0 }, { x: op.w, y: hR }, { x: 0, y: op.h }], [P.gap, P.gap, P.gap, P.gap]);
+    // Bovenkant (schuin) van een veelhoek binnen het kader: >= 0 onder de
+    // lijn door TL-TR van `q` (lineair, voor clipPoly).
+    const below = (q) => (p) => {
+      const a = q[3], b = q[2];
+      return (b.y - a.y) * (p.x - a.x) - (b.x - a.x) * (p.y - a.y);
+    };
+    const glass = (pts) => slab(g, pts, null, z1 - 50 - P.glass / 2, z1 - 50 + P.glass / 2, mat('glass'), null, false);
+
+    if (f.type === 'raam') {
+      const inner = insetPoly(outer, [P.kader, P.kader, P.kader, P.kader]);
+      slab(g, outer, [inner], z0, z1, mIn, mOut);
+      let pane = inner;
+      if (f.rooster && Math.min(inner[3].y, inner[2].y) - inner[0].y > P.rooster + 200) {
+        pane = insetPoly(inner, [0, 0, P.rooster, 0]);
+        const band = [pane[3], pane[2], inner[2], inner[3]];
+        slab(g, [band[0], band[1], band[2], band[3]], null, z1 - 105, z1 - 8, mIn, mOut);
+        // Lamellen: donkere sleuven op beide vlakken.
+        [0.3, 0.55, 0.8].forEach(t => {
+          const a = insetPoly(inner, [0, 20, P.rooster * t - 4, 20]), b = insetPoly(inner, [0, 20, P.rooster * t + 4, 20]);
+          const slot = [b[3], b[2], a[2], a[3]];
+          slab(g, slot, null, z1 - 8, z1 - 6, mat('rubber'));
+          slab(g, slot, null, z1 - 107, z1 - 105, mat('rubber'));
+        });
+      }
+      glass(pane);
+      return g;
+    }
+
+    // Deur: kader als U (zonder onderregel) op een dorpel (buitenwand) of
+    // tot de vloer (binnenwand).
+    const sill = place.exterior !== false ? P.dorpel : 0;
+    const frameOuter = insetPoly(outer, [sill, 0, 0, 0]);
+    const inner = insetPoly(frameOuter, [0, P.kader, P.kader, P.kader]);
+    const u = [frameOuter[0], inner[0], inner[3], inner[2], inner[1], frameOuter[1], frameOuter[2], frameOuter[3]];
+    slab(g, u, null, z0, z1, mIn, mOut);
+    if (sill) box(g, mat('rubber'), (outer[0].x + outer[1].x) / 2, outer[0].y + sill / 2, z1 - depth / 2 + 15, outer[1].x - outer[0].x, sill, depth + 30);
+
+    const ix0 = inner[0].x, ix1 = inner[1].x, iy0 = inner[0].y;
+    const top = below(inner);
+    const topAt = (x) => inner[3].y + (x - inner[3].x) / (inner[2].x - inner[3].x) * (inner[2].y - inner[3].y);
+    // Zijlicht rechts als er naast een deurblad nog genoeg ruimte is.
+    const side = ix1 - ix0 - P.leafW - P.tussen >= P.minLight;
+    const lx1 = side ? ix0 + P.leafW : ix1;
+    // Bovenlicht als er boven een deurblad nog genoeg ruimte is (overal).
+    const lowTop = Math.min(topAt(ix0), topAt(ix1));
+    const transom = lowTop - iy0 - P.leafH - P.tussen >= P.minLight;
+    const ly1 = transom ? iy0 + P.leafH : Infinity;
+    const region = (x0, x1, y0, y1) => clipPoly(rect(x0, x1, y0, Math.min(y1, 1e6)), top);
+    const bar = (pts) => slab(g, pts, null, z0 + 10, z1 - 10, mIn, mOut);
+    if (side) {
+      bar(region(lx1, lx1 + P.tussen, iy0, ly1));
+      // Zijlicht: onderregel + glas.
+      bar(region(lx1 + P.tussen, ix1, iy0, iy0 + P.kader));
+      glass(region(lx1 + P.tussen, ix1, iy0 + P.kader, ly1));
+    }
+    if (transom) {
+      bar(region(ix0, ix1, ly1, ly1 + P.tussen));
+      glass(region(ix0, ix1, ly1 + P.tussen, Infinity));
+    }
+
+    // Deurblad (3 mm speling, onderaan 10 mm boven dorpel/vloer).
+    const leaf = clipPoly(rect(ix0 + 3, lx1 - 3, iy0 + (sill ? 3 : 10), Math.min(ly1 - 3, 1e6)), (p) => top({ x: p.x, y: p.y + 3 }));
+    if (leaf.length < 3) return g;
+    const xs = leaf.map(p => p.x), ys = leaf.map(p => p.y);
+    const lx0 = Math.min(...xs), lxR = Math.max(...xs), lb = Math.min(...ys), lt = Math.min(topAt(lx0), topAt(lxR), ly1) - 3;
+    const lzOut = z1 - 15, lzIn = lzOut - P.leafT;
+    let holes = null;
+    const lw = lxR - lx0;
+    if (f.glas && lw >= 500 && lt - lb >= 1400) {
+      const gx = lx0 + lw * 0.3, gw = Math.min(160, lw * 0.18);
+      const strip = rect(gx - gw / 2, gx + gw / 2, lb + 350, lt - 300);
+      holes = [strip];
+      slab(g, strip, null, (lzIn + lzOut) / 2 - P.glass / 2, (lzIn + lzOut) / 2 + P.glass / 2, mat('glass'), null, false);
+    }
+    slab(g, leaf, holes, lzIn, lzOut, mIn, mOut);
+    // Kruk aan beide zijden (scharnieren links, slot rechts).
+    if (lw >= 400) {
+      const hx = lxR - 75, hy = Math.min(lb + 1050, (lb + lt) / 2);
+      [[lzOut, 1], [lzIn, -1]].forEach(([z, s]) => {
+        box(g, mat('beslag'), hx, hy - 30, z + s * 5, 34, 210, 10);       // schild
+        box(g, mat('beslag'), hx, hy, z + s * 30, 20, 20, 50);            // nek
+        box(g, mat('beslag'), hx - 60, hy, z + s * 55, 140, 20, 20);      // greep
+      });
+    }
+    return g;
+  }
+
+  return { COLORS, FILL_TYPES, PROFILE: P, normalize, defaultFill, build3D };
+})();

js/wall/wall-pdf.js

@@ -154,16 +154,17 @@ window.WallPdf = (() => {
       doc.setLineWidth(0.2);
       CONFIG.openings.forEach(op => {
         const opXWorld = -wallWidth / 2 + op.x;
-        const x0 = px(opXWorld), y0 = py(op.y + op.h), x1 = px(opXWorld + op.w), y1 = py(op.y);
-        doc.rect(x0, y0, x1 - x0, y1 - y0, 'S');
+        // Schuine bovenzijde: y0 = bovenkant links, y0r = rechts.
+        const x0 = px(opXWorld), y0 = py(op.y + op.h), y0r = py(op.y + op.hR), x1 = px(opXWorld + op.w), y1 = py(op.y);
+        [[x0, y1, x1, y1], [x1, y1, x1, y0r], [x1, y0r, x0, y0], [x0, y0, x0, y1]].forEach(l => doc.line(...l));
         doc.line(x0, y0, x1, y1);
-        doc.line(x0, y1, x1, y0);
+        doc.line(x0, y1, x1, y0r);
         doc.setTextColor(...BLACK);
         doc.setFontSize(6);
         // Dagmaat-label BINNEN de opening zetten (net onder de bovenkant),
         // i.p.v. erboven — daar overlapte het met de maatketen/omtrek
         // erboven.
-        doc.text(`${op.w}x${op.h}`, (x0 + x1) / 2, y0 + 5, { align: 'center' });
+        doc.text(op.hR !== op.h ? `${op.w}x${op.h}/${op.hR}` : `${op.w}x${op.h}`, (x0 + x1) / 2, Math.max(y0, y0r) + 5, { align: 'center' });
       });
 
       const drawDimLine = (x1, y1, x2, y2) => PdfSheet.dimLine(doc, x1, y1, x2, y2);
@@ -179,13 +180,16 @@ window.WallPdf = (() => {
       doc.text(String(Math.round(hLeft)), px(-wallWidth / 2) - 9, (py(0) + py(hLeft)) / 2, { align: 'center', angle: 90 });
       drawDimLine(px(wallWidth / 2) + 7, py(0), px(wallWidth / 2) + 7, py(hRight));
       doc.text(String(Math.round(hRight)), px(wallWidth / 2) + 11, (py(0) + py(hRight)) / 2, { align: 'center', angle: 90 });
-      if (tl.peak) {
-        // Nokhoogte: stippellijn van vloer tot nok.
+      // Tussenpunten van de daklijn: stippellijn van vloer tot nok/knik
+      // (nok = het enige hoogste punt; mansarde-/wolfsgevel: knikken).
+      const inner = tl.pts.slice(1, -1);
+      inner.forEach(q => {
+        const isNok = inner.filter(o => o.y >= q.y - 0.5).length === 1;
         doc.setLineDashPattern([1, 1], 0);
-        doc.line(px(tl.peak.x), py(0), px(tl.peak.x), py(tl.peak.y));
+        doc.line(px(q.x), py(0), px(q.x), py(q.y));
         doc.setLineDashPattern([], 0);
-        doc.text('nok ' + Math.round(tl.peak.y), px(tl.peak.x) + 1.5, py(tl.peak.y) + 4);
-      }
+        doc.text((isNok ? 'nok ' : 'knik ') + Math.round(q.y), px(q.x) + 1.5, py(q.y) + 4);
+      });
 
       const studEdges = new Set([0, wallWidth]);
       calcData.fullStuds.forEach(x => studEdges.add(Math.round(x - CONFIG.studWidth / 2 + wallWidth / 2)));
@@ -227,6 +231,10 @@ window.WallPdf = (() => {
         doc.text('L', lx + 2, ly + 1);
       });
 
+      // --- Extra laag van de aanroeper (bijv. elektra, ElektraPdf):
+      // overlay(doc, pu, py), pu = wand-x (0..breedte) -> blad-mm.
+      if (opts.overlay) opts.overlay(doc, (u) => px(-wallWidth / 2 + u), py);
+
       // --- Bovenaanzicht (doorsnede op stijlhoogte, zoals de voorbeeld-
       // tekeningen): binnenzijde boven, buitenzijde onder (= de kant van
       // waaruit het vooraanzicht bekeken wordt). Zelfde horizontale schaal.

js/wall/wall.js

@@ -255,6 +255,11 @@ function mountWallEditor(container, callbacks) {
   const lockCladding = callbacks && callbacks.lockCladding;
   // ... en de buitenzijde (gevelbekleding per woning, override per wand).
   const lockExterior = callbacks && callbacks.lockExterior;
+  // Alles op het tabblad Materiaal ligt dan vast: tabblad weg, uitleg op Opbouw.
+  if (lockExterior && lockCladding) {
+    const tabBtn = container.querySelector('.tab-btn[data-tab="tab-materials"]');
+    if (tabBtn) tabBtn.style.display = 'none';
+  }
 
   // Binnen een woning is de h.o.h. globaal (woning-instellingen), niet per wand.
   if (callbacks && callbacks.lockSpacing) {
@@ -279,25 +284,34 @@ function mountWallEditor(container, callbacks) {
     let calcData = { fullStuds: [], studs: [] };
     let wallGroup3D = null;
     let lastBaseHeight = 2400;
+    // Daklijn met knikken (mansarde/wolfsdak, uit de unit-dakvorm): blijft
+    // staan tot een hoogte hier met de hand wordt gewijzigd.
+    let wallTopPts = null;
 
-    // Elke opening: { id, w, h, y, anchor: 'left'|'middle'|'right', offset }
+    // Elke opening: { id, w, h, hR?, y, anchor: 'left'|'middle'|'right', offset, fill? }
+    // fill = vulling (kozijn, KozijnModel); zonder fill blijft hij open.
+    // hR = hoogte rechts (schuine bovenzijde); zonder hR is de bovenkant
+    // recht en is h de hoogte. De onderkant is altijd waterpas.
     // 'offset' betekent afhankelijk van anchor:
     //   left   -> afstand vanaf linker wandrand tot linkerkant opening
     //   right  -> afstand vanaf rechter wandrand tot rechterkant opening
     //   middle -> verschuiving t.o.v. het midden (0 = gecentreerd, + = naar rechts)
     let openings = [
-      { id: 1, type: 'raam', w: 1200, h: 1200, y: 600, anchor: 'middle', offset: 0 }
+      { id: 1, type: 'raam', w: 1200, h: 1200, y: 600, anchor: 'middle', offset: 0, fill: KozijnModel.defaultFill('raam') }
     ];
     let openingIdCounter = 2;
 
     // ------------------------------------------------------------
     // Interactieve selectie/verslepen van openingen in het vooraanzicht
     // (nu het primaire aanzicht). Snap op 50mm, net als de stapgrootte van
-    // de invoervelden. N/Z-handles wijzigen alleen de hoogte, O/W-handles
-    // alleen de breedte — precies zoals bij de meeste 2D-tekentools.
+    // de invoervelden. 9 sleeppunten: 4 hoeken, 4 zijden en het midden
+    // (verplaatsen). N/Z wijzigen de hoogte, O/W de breedte. De bovenste
+    // hoeken (NW/NO) verslepen ook alleen hun eigen kant in de hoogte: zo
+    // ontstaat een schuine bovenzijde. Onderin blijft het altijd waterpas
+    // (ZW/ZO: breedte + onderkant).
     // ------------------------------------------------------------
     let selectedOpeningId = null;
-    let dragInfo = null; // { type:'move'|'resize', handle, openingId, startMouseX, startMouseY, startLocalX, startY, startW, startH }
+    let dragInfo = null; // { type:'move'|'resize', handle, openingId, startMouseX, startMouseY, startLocalX, startY, startW, startH, startHR }
     let frontView = { scale: 1, centerX: 0, floorY: 0 }; // bijgewerkt door draw2DFront()
     let frontOpeningRects = []; // hit-test data, bijgewerkt door draw2DFront()
     let frontHandleRects = [];  // idem, alleen voor de geselecteerde opening
@@ -315,10 +329,17 @@ function mountWallEditor(container, callbacks) {
       op.w = w;
     }
 
+    const isSloped = (op) => op.hR !== undefined;
+    // Ruwe opening zoals opgeslagen (hR alleen bij een schuine bovenzijde).
+    const rawOpening = (o) => Object.assign({ id: o.id, type: o.type || 'raam', w: o.w, h: o.h, y: o.y, anchor: o.anchor, offset: o.offset },
+      o.hR !== undefined ? { hR: o.hR } : {}, o.fill ? { fill: Object.assign({}, o.fill) } : {});
+
     function syncOpeningCardInputs(op) {
       const card = document.querySelector(`.opening-card[data-opening-id="${op.id}"]`);
       if (!card) return;
-      ['w', 'h', 'y', 'offset'].forEach(field => {
+      // Schuin aan/uit veranderd (hoek slepen): kaart opnieuw opbouwen.
+      if (!!card.querySelector('input[data-field="hR"]') !== isSloped(op)) { renderOpeningsList(); return; }
+      ['w', 'h', 'hR', 'y', 'offset'].forEach(field => {
         const input = card.querySelector(`input[data-field="${field}"]`);
         if (input && document.activeElement !== input) input.value = Math.round(op[field]);
       });
@@ -360,7 +381,8 @@ function mountWallEditor(container, callbacks) {
         h: preset.h,
         y: preset.y,
         anchor: 'left',
-        offset: 300 + n * 1400
+        offset: 300 + n * 1400,
+        fill: KozijnModel.defaultFill('raam', lastFill())
       });
       renderOpeningsList();
       updateAll();
@@ -427,8 +449,11 @@ function mountWallEditor(container, callbacks) {
       const tmp = hLeftInput.value;
       hLeftInput.value = hRightInput.value;
       hRightInput.value = tmp;
+      if (wallTopPts) wallTopPts = wallTopPts.map(q => ({ f: 1 - q.f, h: q.h })).reverse();
 
       openings = openings.map(o => {
+        // Schuine bovenzijde klapt mee om.
+        if (isSloped(o)) o = { ...o, h: o.hR, hR: o.h };
         if (o.anchor === 'left') return { ...o, anchor: 'right' };
         if (o.anchor === 'right') return { ...o, anchor: 'left' };
         if (o.anchor === 'middle') return { ...o, offset: -o.offset };
@@ -440,6 +465,40 @@ function mountWallEditor(container, callbacks) {
       setIoStatus('Horizontaal gespiegeld.', 'ok');
     }
 
+    // Vulling (kozijn, KozijnModel): type, rooster/glasstrook en kleuren.
+    function fillControls(op) {
+      const f = KozijnModel.normalize(op.fill);
+      const type = f ? f.type : 'geen';
+      const opts = (entries, cur) => entries.map(([k, label]) => `<option value="${k}" ${k === cur ? 'selected' : ''}>${label}</option>`).join('');
+      const colors = Object.entries(KozijnModel.COLORS).map(([k, c]) => [k, `${c.label} (${c.ral})`]);
+      const sw = (field, label, on, title) => `<div class="control-group"${title ? ` title="${title}"` : ''}>
+                <label>${label}</label>
+                <div><label class="ui-switch"><input type="checkbox" data-field="${field}" data-id="${op.id}" ${on ? 'checked' : ''}><span></span></label></div>
+              </div>`;
+      return `<div class="controls-grid opening-fill">
+            <div>
+              <div class="control-group">
+                <label>Vulling</label>
+                <div><select data-field="fill" data-id="${op.id}">${opts(Object.entries(KozijnModel.FILL_TYPES), type)}</select></div>
+              </div>
+              ${type === 'raam' ? sw('fillRooster', 'Rooster', f.rooster, 'Ventilatierooster bovenin het kozijn') : ''}
+              ${type === 'deur' ? sw('fillGlas', 'Glasstrook', f.glas, 'Glasstrook in het deurblad') : ''}
+            </div>
+            <div>
+              ${f ? `<div class="control-group">
+                <label>Kleur buiten</label>
+                <div><select data-field="fillOut" data-id="${op.id}">${opts(colors, f.out)}</select></div>
+              </div>
+              <div class="control-group">
+                <label>Kleur binnen</label>
+                <div><select data-field="fillIn" data-id="${op.id}">${opts(colors, f.in)}</select></div>
+              </div>` : ''}
+            </div>
+          </div>`;
+    }
+    // Kleuren van de laatste opening met een vulling (voor nieuwe openingen).
+    const lastFill = () => { const o = openings.slice().reverse().find(x => x.fill); return o ? o.fill : null; };
+
     function renderOpeningsList() {
       const list = document.getElementById('openings-list');
       list.innerHTML = openings.map(op => `
@@ -463,9 +522,13 @@ function mountWallEditor(container, callbacks) {
                 <div><input type="number" data-field="w" data-id="${op.id}" value="${op.w}" step="50" min="400" max="2850"><span class="unit">mm</span></div>
               </div>
               <div class="control-group">
-                <label>Hoogte</label>
+                <label>${isSloped(op) ? 'Hoogte links' : 'Hoogte'}</label>
                 <div><input type="number" data-field="h" data-id="${op.id}" value="${op.h}" step="50" min="400"><span class="unit">mm</span></div>
               </div>
+              ${isSloped(op) ? `<div class="control-group">
+                <label>Hoogte rechts</label>
+                <div><input type="number" data-field="hR" data-id="${op.id}" value="${op.hR}" step="50" min="400"><span class="unit">mm</span></div>
+              </div>` : ''}
               <div class="control-group">
                 <label>Afstand tot vloer</label>
                 <div><input type="number" data-field="y" data-id="${op.id}" value="${op.y}" step="50" min="0"><span class="unit">mm</span></div>
@@ -486,8 +549,14 @@ function mountWallEditor(container, callbacks) {
                 <label>${anchorOffsetLabel(op.anchor)}</label>
                 <div><input type="number" data-field="offset" data-id="${op.id}" value="${op.offset}" step="50"><span class="unit">mm</span></div>
               </div>
+              <div class="control-group">
+                <label>Schuine bovenzijde</label>
+                <div><label class="ui-switch"><input type="checkbox" data-field="sloped" data-id="${op.id}" ${isSloped(op) ? 'checked' : ''}><span></span></label></div>
+              </div>
+              ${isSloped(op) ? `<button class="opening-roof-btn" data-action="follow-roof" data-id="${op.id}" title="Hoogte rechts zo zetten dat de bovenkant evenwijdig aan de daklijn loopt"><i class="bi bi-slash-lg"></i> Volg dakhelling</button>` : ''}
             </div>
           </div>
+          ${fillControls(op)}
           <div class="opening-warning-text" data-warning-for="${op.id}" style="display:none;"></div>
         </div>
       `).join('');
@@ -515,10 +584,24 @@ function mountWallEditor(container, callbacks) {
       const op = openings.find(o => o.id === id);
       if (!op) return;
       if (field === 'type') {
-        // Type kiezen = standaardmaat van dat type overnemen (daarna vrij aan te passen).
+        // Type kiezen = standaardmaat en -vulling van dat type overnemen (daarna vrij aan te passen).
         const preset = WallModel.OPENING_TYPES[e.target.value];
         op.type = e.target.value;
         op.w = preset.w; op.h = preset.h; op.y = preset.y;
+        delete op.hR;
+        if (op.fill) op.fill = KozijnModel.defaultFill(op.type, op.fill);
+        renderOpeningsList();
+      } else if (field === 'fill') {
+        const v = e.target.value;
+        if (v === 'geen') delete op.fill;
+        else op.fill = Object.assign(KozijnModel.defaultFill(v === 'deur' ? (op.type === 'raam' ? 'deur' : op.type) : 'raam', op.fill || lastFill()), { type: v });
+        renderOpeningsList();
+      } else if (/^fill(Rooster|Glas|Out|In)$/.test(field)) {
+        if (!op.fill) return;
+        const key = { fillRooster: 'rooster', fillGlas: 'glas', fillOut: 'out', fillIn: 'in' }[field];
+        op.fill[key] = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
+      } else if (field === 'sloped') {
+        if (e.target.checked) op.hR = op.h; else delete op.hR;
         renderOpeningsList();
       } else if (field === 'anchor') {
         op.anchor = e.target.value;
@@ -532,9 +615,24 @@ function mountWallEditor(container, callbacks) {
       if (e.target.dataset.action === 'remove') {
         removeOpening(parseInt(e.target.dataset.id, 10));
       }
+      const roofBtn = e.target.closest('[data-action="follow-roof"]');
+      if (roofBtn) followRoof(parseInt(roofBtn.dataset.id, 10));
     });
     document.getElementById('btn-add-opening').addEventListener('click', addOpening);
 
+    // Bovenkant evenwijdig aan de daklijn: hoogte rechts = hoogte links +
+    // het verschil in daklijn tussen de rechter- en linkerrand (op de
+    // opgeloste positie; met een nok ertussen het rechte stuk ertussen).
+    function followRoof(id) {
+      const op = openings.find(o => o.id === id);
+      const res = (CONFIG.openings || []).find(o => o.id === id);
+      if (!op || !res) return;
+      const at = WallModel.topLine(CONFIG).at, x0 = -CONFIG.wallWidth / 2 + res.x;
+      op.hR = Math.max(400, Math.round(op.h + at(x0 + res.w) - at(x0)));
+      syncOpeningCardInputs(op);
+      updateAll();
+    }
+
     // ============================================================
     // JSON EXPORT / IMPORT — sla het volledige wand-ontwerp (parameters +
     // ruwe, niet-opgeloste openingen) op als JSON, en laad het weer terug.
@@ -555,6 +653,7 @@ function mountWallEditor(container, callbacks) {
         heightRight: parseFloat(document.getElementById('inp-wall-h-right').value),
         // Middenpunt (nok); null = rechte bovenrand.
         heightMid: document.getElementById('inp-wall-peak').checked ? parseFloat(document.getElementById('inp-wall-h-mid').value) : null,
+        topPts: wallTopPts ? wallTopPts.map(q => Object.assign({}, q)) : undefined,
         studWidth: parseFloat(document.getElementById('inp-stud-w').value),
         studDepth: parseFloat(document.getElementById('inp-stud-d').value),
         plateThick: parseFloat(document.getElementById('inp-plate-w').value),
@@ -568,8 +667,8 @@ function mountWallEditor(container, callbacks) {
     function getPureState() {
       return {
         wall: collectWallParams(),
-        materials: { interior: 'spaanplaat', exterior: buitenMateriaal, cladding, trasraam, stone },
-        openings: openings.map(o => ({ id: o.id, type: o.type || 'raam', w: o.w, h: o.h, y: o.y, anchor: o.anchor, offset: o.offset }))
+        materials: { interior: 'spaanplaat', exterior: buitenMateriaal, cladding, trasraam, stone, rabatColor },
+        openings: openings.map(rawOpening)
       };
     }
 
@@ -589,14 +688,16 @@ function mountWallEditor(container, callbacks) {
       document.getElementById('inp-min-sp').value = state.wall.minSpacing;
       document.getElementById('inp-max-sp').value = state.wall.maxSpacing;
       lastBaseHeight = state.wall.heightAll;
+      wallTopPts = Array.isArray(state.wall.topPts) && state.wall.topPts.length ? state.wall.topPts.map(q => Object.assign({}, q)) : null;
 
       buitenMateriaal = (state.materials && state.materials.exterior) || 'vochtdoek';
       cladding = (state.materials && state.materials.cladding) || 'horizontaal';
       trasraam = (state.materials && state.materials.trasraam) || null; // woning-instelling
       stone = (state.materials && state.materials.stone) || null;       // woning-instelling (steen)
+      rabatColor = (state.materials && state.materials.rabatColor) || null; // woning-instelling (rabat)
       syncMaterialButtons();
 
-      openings = state.openings.map(o => ({ id: o.id, type: o.type || 'raam', w: o.w, h: o.h, y: o.y, anchor: o.anchor, offset: o.offset }));
+      openings = state.openings.map(rawOpening);
       openingIdCounter = openings.length ? Math.max(...openings.map(o => o.id)) + 1 : 1;
       selectedOpeningId = null;
 
@@ -747,6 +848,7 @@ function mountWallEditor(container, callbacks) {
         heightLeft: hLeft,
         heightRight: hRight,
         heightMid: peakOn ? hMid : null,
+        topPts: wallTopPts || undefined,
         studWidth: parseFloat(document.getElementById('inp-stud-w').value),
         studDepth: parseFloat(document.getElementById('inp-stud-d').value),
         plateThick: parseFloat(document.getElementById('inp-plate-w').value),
@@ -945,14 +1047,16 @@ function mountWallEditor(container, callbacks) {
       const yAxisRightX = Math.min(w - 10, toCanvasX(halfWMM) + 14);
       drawCanvasDim(ctxFront, yAxisRightX, toCanvasY(0), yAxisRightX, toCanvasY(hRightMM),
         'Y: ' + Math.round(hRightMM) + 'mm', Math.min(w - 4, yAxisRightX + 12), (toCanvasY(0) + toCanvasY(hRightMM)) / 2);
-      if (tl.peak) {
-        const pxC = toCanvasX(tl.peak.x);
+      // Tussenpunten van de daklijn (nok = het enige hoogste punt, anders knik).
+      const inner = tl.pts.slice(1, -1);
+      inner.forEach(q => {
+        const isNok = inner.filter(o => o.y >= q.y - 0.5).length === 1;
         ctxFront.fillStyle = '#9ab';
         ctxFront.font = '11px sans-serif';
         ctxFront.textAlign = 'center';
-        ctxFront.fillText('nok ' + Math.round(tl.peak.y) + 'mm', pxC, Math.max(12, toCanvasY(tl.peak.y) - 6));
+        ctxFront.fillText((isNok ? 'nok ' : 'knik ') + Math.round(q.y) + 'mm', toCanvasX(q.x), Math.max(12, toCanvasY(q.y) - 6));
         ctxFront.textAlign = 'start';
-      }
+      });
 
       // Stijlstuk van y0 tot y1 (of tot de daklijn), zie WallModel.computeFrame.
       const drawStudFront = (st) => {
@@ -980,39 +1084,53 @@ function mountWallEditor(container, callbacks) {
         const x0 = toCanvasX(opLeftMM);
         const x1 = toCanvasX(opLeftMM + op.w);
         const y0 = toCanvasY(op.y);
-        const y1 = toCanvasY(op.y + op.h);
+        const y1 = toCanvasY(op.y + op.h);   // bovenkant links
+        const y1r = toCanvasY(op.y + op.hR); // bovenkant rechts (schuine bovenzijde)
         const isSelected = op.id === selectedOpeningId;
 
-        frontOpeningRects.push({ id: op.id, x0, y0, x1, y1, localX: op.x, y: op.y, w: op.w, h: op.h });
+        frontOpeningRects.push({ id: op.id, x0, y0, x1, y1, y1r, localX: op.x, y: op.y, w: op.w, h: op.h, hR: op.hR });
 
+        const outline = () => {
+          ctxFront.beginPath();
+          ctxFront.moveTo(x0, y0); ctxFront.lineTo(x1, y0); ctxFront.lineTo(x1, y1r); ctxFront.lineTo(x0, y1);
+          ctxFront.closePath();
+        };
+        outline();
         ctxFront.fillStyle = op.overflowing ? 'rgba(255, 60, 60, 0.45)' : 'rgba(255, 50, 50, 0.25)';
-        ctxFront.fillRect(x0, y1, x1 - x0, y0 - y1);
+        ctxFront.fill();
         ctxFront.strokeStyle = isSelected ? '#4da6ff' : '#ff3333';
         ctxFront.lineWidth = isSelected ? 2.5 : 1;
         ctxFront.setLineDash(isSelected ? [] : [3, 3]);
-        ctxFront.strokeRect(x0, y1, x1 - x0, y0 - y1);
+        ctxFront.stroke();
         ctxFront.setLineDash([]);
         ctxFront.lineWidth = 1;
 
         ctxFront.fillStyle = '#fff';
         ctxFront.font = '9px sans-serif';
         ctxFront.textAlign = 'center';
-        ctxFront.fillText('#' + op.id, (x0 + x1) / 2, y1 - 4);
+        ctxFront.fillText('#' + op.id, (x0 + x1) / 2, (y1 + y1r) / 2 - 4);
 
         if (isSelected) {
-          const midX = (x0 + x1) / 2, midY = (y0 + y1) / 2;
+          const midX = (x0 + x1) / 2, midTop = (y1 + y1r) / 2;
           const handles = [
-            { handle: 'n', cx: midX, cy: y1 },
+            { handle: 'nw', cx: x0, cy: y1 },
+            { handle: 'n', cx: midX, cy: midTop },
+            { handle: 'ne', cx: x1, cy: y1r },
+            { handle: 'w', cx: x0, cy: (y0 + y1) / 2 },
+            { handle: 'c', cx: midX, cy: (y0 + midTop) / 2 },
+            { handle: 'e', cx: x1, cy: (y0 + y1r) / 2 },
+            { handle: 'sw', cx: x0, cy: y0 },
             { handle: 's', cx: midX, cy: y0 },
-            { handle: 'e', cx: x1, cy: midY },
-            { handle: 'w', cx: x0, cy: midY }
+            { handle: 'se', cx: x1, cy: y0 }
           ];
           handles.forEach(hd => {
             frontHandleRects.push({ id: op.id, handle: hd.handle, cx: hd.cx, cy: hd.cy });
-            ctxFront.fillStyle = '#4da6ff';
+            ctxFront.fillStyle = hd.handle === 'c' ? '#ffffff' : '#4da6ff';
             ctxFront.strokeStyle = '#0a1a2a';
             ctxFront.beginPath();
-            ctxFront.rect(hd.cx - 5, hd.cy - 5, 10, 10);
+            // Midden (verplaatsen) rond, de rest vierkant.
+            if (hd.handle === 'c') ctxFront.arc(hd.cx, hd.cy, 5, 0, Math.PI * 2);
+            else ctxFront.rect(hd.cx - 5, hd.cy - 5, 10, 10);
             ctxFront.fill();
             ctxFront.stroke();
           });
@@ -1062,9 +1180,12 @@ function mountWallEditor(container, callbacks) {
       return frontHandleRects.find(hd => Math.abs(hd.cx - mx) <= 8 && Math.abs(hd.cy - my) <= 8);
     }
     function frontOpeningAt(mx, my) {
-      return frontOpeningRects.find(r =>
-        mx >= Math.min(r.x0, r.x1) && mx <= Math.max(r.x0, r.x1) &&
-        my >= Math.min(r.y0, r.y1) && my <= Math.max(r.y0, r.y1));
+      // Binnen de (evt. schuine) omtrek: canvas-y loopt omlaag.
+      return frontOpeningRects.find(r => {
+        if (mx < r.x0 || mx > r.x1) return false;
+        const yTop = r.y1 + (mx - r.x0) / ((r.x1 - r.x0) || 1) * (r.y1r - r.y1);
+        return my <= r.y0 && my >= yTop;
+      });
     }
 
     canvas2DFront.classList.add('interactive');
@@ -1077,9 +1198,9 @@ function mountWallEditor(container, callbacks) {
         if (hit) {
           const resolved = frontOpeningRects.find(r => r.id === hit.id);
           dragInfo = {
-            type: 'resize', handle: hit.handle, openingId: hit.id,
+            type: hit.handle === 'c' ? 'move' : 'resize', handle: hit.handle, openingId: hit.id,
             startMouseX: e.clientX, startMouseY: e.clientY,
-            startLocalX: resolved.localX, startY: resolved.y, startW: resolved.w, startH: resolved.h
+            startLocalX: resolved.localX, startY: resolved.y, startW: resolved.w, startH: resolved.h, startHR: resolved.hR
           };
           e.preventDefault();
           return;
@@ -1092,7 +1213,7 @@ function mountWallEditor(container, callbacks) {
         dragInfo = {
           type: 'move', openingId: bodyHit.id,
           startMouseX: e.clientX, startMouseY: e.clientY,
-          startLocalX: bodyHit.localX, startY: bodyHit.y, startW: bodyHit.w, startH: bodyHit.h
+          startLocalX: bodyHit.localX, startY: bodyHit.y, startW: bodyHit.w, startH: bodyHit.h, startHR: bodyHit.hR
         };
         highlightSelectedCard();
         draw2D();
@@ -1121,17 +1242,32 @@ function mountWallEditor(container, callbacks) {
         applyOpeningPosition(op, newLocalX, dragInfo.startW, wallWidth);
         op.y = Math.max(0, snap50(dragInfo.startY + dyMM));
       } else if (dragInfo.type === 'resize') {
-        if (dragInfo.handle === 'n') {
-          op.h = Math.max(400, snap50(dragInfo.startH + dyMM));
-        } else if (dragInfo.handle === 's') {
-          const top = dragInfo.startY + dragInfo.startH;
-          const newY = Math.min(snap50(dragInfo.startY + dyMM), top - 400);
+        // Samengestelde handles: 'nw' = bovenkant links + linkerrand, enz.
+        const hd = dragInfo.handle;
+        const sloped = dragInfo.startHR !== dragInfo.startH || isSloped(op);
+        if (hd === 'n') {
+          // Hele bovenkant omhoog/omlaag (helling blijft).
+          const dh = snap50(dyMM);
+          op.h = Math.max(400, dragInfo.startH + dh);
+          if (sloped) op.hR = Math.max(400, dragInfo.startHR + dh);
+        } else if (hd === 'nw' || hd === 'ne') {
+          // Eén bovenhoek: alleen die kant in de hoogte -> schuine bovenzijde.
+          op.h = hd === 'nw' ? Math.max(400, snap50(dragInfo.startH + dyMM)) : dragInfo.startH;
+          op.hR = hd === 'ne' ? Math.max(400, snap50(dragInfo.startHR + dyMM)) : dragInfo.startHR;
+          if (op.h === op.hR) delete op.hR; // weer recht
+        }
+        if (hd === 's' || hd === 'sw' || hd === 'se') {
+          // Onderkant; de bovenkant blijft staan (onderin altijd waterpas).
+          const topL = dragInfo.startY + dragInfo.startH, topR = dragInfo.startY + dragInfo.startHR;
+          const newY = Math.min(snap50(dragInfo.startY + dyMM), Math.min(topL, topR) - 400);
           op.y = Math.max(0, newY);
-          op.h = top - op.y;
-        } else if (dragInfo.handle === 'e') {
+          op.h = topL - op.y;
+          if (isSloped(op)) op.hR = topR - op.y;
+        }
+        if (hd === 'e' || hd === 'ne' || hd === 'se') {
           const newW = Math.max(400, snap50(dragInfo.startW + dxMM));
           applyOpeningPosition(op, dragInfo.startLocalX, newW, wallWidth);
-        } else if (dragInfo.handle === 'w') {
+        } else if (hd === 'w' || hd === 'nw' || hd === 'sw') {
           const right = dragInfo.startLocalX + dragInfo.startW;
           const newLocalX = Math.min(snap50(dragInfo.startLocalX + dxMM), right - 400);
           applyOpeningPosition(op, newLocalX, right - newLocalX, wallWidth);
@@ -1248,6 +1384,8 @@ function mountWallEditor(container, callbacks) {
     let cladding = 'horizontaal'; // richting gevelbekleding (alleen bij vochtdoek)
     let trasraam = null; // { bottom, top } mm, komt uit de woning-instellingen (WallModel.trasraamFor)
     let stone = null;    // steencode bij cementplaat, komt uit de woning-instellingen
+    let rabatColor = null; // kleur rabat (WallModel.RABAT_COLORS), komt uit de woning-instellingen
+    let stage = BuildStages.FINAL; // bouwfase van de 3D (schuif linksonder)
     function syncMaterialButtons() {
       document.querySelectorAll('.material-toggle-btn[data-material]').forEach(b => b.classList.toggle('active', b.dataset.material === buitenMateriaal));
       document.querySelectorAll('.material-toggle-btn[data-cladding]').forEach(b => b.classList.toggle('active', b.dataset.cladding === cladding));
@@ -1281,6 +1419,7 @@ function mountWallEditor(container, callbacks) {
       Skybox.apply(skyMode, { env: skyEnv, grid, controls, sun: dirLight, ambient, base: { ambient: 0.6, sun: 0.8 }, shadowRoot: wallGroup3D });
     };
     Skybox.createToggle(document.getElementById('wall-toolbar-3d'), (m) => { skyMode = m; applySky(); });
+    BuildStages.createBar(pane3D, stage, (st) => { stage = st; update3DScene(); });
 
     // 3D-opbouw + volume-boekhouding komen uit WallModel.build3D (gedeeld
     // met de unit-editor).
@@ -1289,7 +1428,7 @@ function mountWallEditor(container, callbacks) {
     function update3DScene() {
       if (wallGroup3D) scene.remove(wallGroup3D);
       const result = WallModel.build3D(CONFIG, calcData, {
-        materials: wallMaterials, buitenMateriaal, cladding, trasraam, stone, spaanplaatVisible, buitenVisible
+        materials: wallMaterials, buitenMateriaal, cladding, trasraam, stone, rabatColor, spaanplaatVisible, buitenVisible, stage
       });
       wallGroup3D = result.group;
       lastWallStats = result.stats;
@@ -1351,6 +1490,8 @@ function mountWallEditor(container, callbacks) {
 
     const inputs = document.querySelectorAll('#tab-wall input');
     inputs.forEach(input => {
+      // Hoogte met de hand gewijzigd: de knikken van een mansarde-/wolfsdak vervallen.
+      if (/^inp-wall-(h-|peak)/.test(input.id)) input.addEventListener('input', () => { wallTopPts = null; });
       input.addEventListener('input', updateAll);
     });
 
@@ -1402,6 +1543,6 @@ window.WallEditor = {
       sheathingThick: 10, minSpacing: 240, maxSpacing: 480
     },
     materials: { interior: 'spaanplaat', exterior: 'vochtdoek', cladding: 'horizontaal' },
-    openings: [{ id: 1, type: 'raam', w: 1200, h: 1200, y: 600, anchor: 'middle', offset: 0 }]
+    openings: [{ id: 1, type: 'raam', w: 1200, h: 1200, y: 600, anchor: 'middle', offset: 0, fill: KozijnModel.defaultFill('raam') }]
   })
 };