@flowselections/layout-maker 1.38.4 → 1.45.9

package/dist-lib/lib/pakbonDocument.js

@@ -0,0 +1,735 @@
+// ============================================================================
+// src/lib/pakbonDocument.ts — het DocumentModel en de centrale layout-engine.
+// ----------------------------------------------------------------------------
+// Hier — en NERGENS anders — wordt bepaald waar iets op de pakbon terechtkomt:
+// pagina, x, y, breedte, hoogte, fontgrootte, regelafbreking, kolombreedtes,
+// rijhoogtes en pagina-einden. Alle uitvoerkanalen (React-voorbeeld, HTML en
+// PDF) zijn "domme" renderers die uitsluitend dit model natekenen.
+//
+//   inhoudsmodel (Flow[])  ->  layout-engine  ->  DocumentModel (mm)  ->  renderers
+// ============================================================================
+import { breekAf, regelHoogtePt, tekstBreedtePt } from "./fontMetrics.js";
+export const PT_PER_MM = 2.834645669291339;
+export const mmNaarPt = (mm) => mm * PT_PER_MM;
+export const ptNaarMm = (pt) => pt / PT_PER_MM;
+export const DOCUMENT_MODEL_VERSIE = 1;
+export const KLEUR_DONKER = "#111827";
+export const KLEUR_GRIJS = "#6b7280";
+export const KLEUR_MIDDEN = "#4b5563";
+export const KLEUR_LIJN = "#d1d5db";
+class Layouter {
+    constructor(o) {
+        this.o = o;
+        this.paginas = [];
+        this.y = 0;
+        this.kopHoogte = 0;
+        this.kop = [];
+        this.links = o.margeMm;
+        this.breedte = o.breedteMm - o.margeMm * 2;
+        this.bovenkant = o.margeMm;
+        this.onderkant = o.hoogteMm - o.margeMm;
+    }
+    zetVoetHoogte(hoogteMm) {
+        this.onderkant = this.o.hoogteMm - this.o.margeMm - hoogteMm;
+    }
+    zetKop(kop) {
+        this.kop = kop;
+        this.kopHoogte = kop.length ? this.meet(kop, this.breedte) : 0;
+    }
+    get ruimte() {
+        return this.onderkant - this.y;
+    }
+    get paginaHoogte() {
+        return this.onderkant - this.bovenkant - this.kopHoogte;
+    }
+    huidige() {
+        if (!this.paginas.length)
+            this.nieuwePagina();
+        return this.paginas[this.paginas.length - 1];
+    }
+    nieuwePagina() {
+        this.paginas.push([]);
+        this.y = this.bovenkant;
+        if (this.kop.length) {
+            const pagina = this.paginas[this.paginas.length - 1];
+            for (const f of this.kop) {
+                const g = maakBlok(f, this.links, this.breedte, this.o.basisGroottePt);
+                pagina.push(...g.teken(this.y));
+                this.y += g.hoogteMm;
+            }
+        }
+    }
+    zorgVoor(hoogteMm) {
+        if (!this.paginas.length)
+            this.nieuwePagina();
+        else if (hoogteMm > this.ruimte && this.y > this.bovenkant + this.kopHoogte + 0.01)
+            this.nieuwePagina();
+    }
+    emit(g) {
+        this.zorgVoor(g.hoogteMm);
+        this.huidige().push(...g.teken(this.y));
+        this.y += g.hoogteMm;
+    }
+    meet(flows, breedte) {
+        let h = 0;
+        for (const f of flows) {
+            if (f.kind === "paginabreuk")
+                continue;
+            h += maakBlok(f, 0, breedte, this.o.basisGroottePt).hoogteMm;
+        }
+        return h;
+    }
+    plaats(flows) {
+        for (const f of flows)
+            this.plaatsEen(f);
+    }
+    plaatsEen(f) {
+        if (f.kind === "paginabreuk") {
+            if (this.paginas.length && this.y > this.bovenkant + this.kopHoogte + 0.01)
+                this.nieuwePagina();
+            else if (!this.paginas.length)
+                this.nieuwePagina();
+            return;
+        }
+        if (!this.paginas.length)
+            this.nieuwePagina();
+        if (f.kind === "tabel") {
+            this.plaatsTabel(f, this.links, this.breedte);
+            return;
+        }
+        if (f.kind === "groep") {
+            this.plaatsGroep(f);
+            return;
+        }
+        this.emit(maakBlok(f, this.links, this.breedte, this.o.basisGroottePt));
+    }
+    plaatsGroep(g) {
+        const breedte = (this.breedte * Math.min(Math.max(g.breedtePercent ?? 100, 5), 100)) / 100;
+        const x = g.uitlijning === "right"
+            ? this.links + this.breedte - breedte
+            : g.uitlijning === "center"
+                ? this.links + (this.breedte - breedte) / 2
+                : this.links;
+        const padding = g.paddingMm ?? (g.kader ? 1.5 : 0);
+        const binnenBreedte = breedte - padding * 2;
+        const hoogte = this.meet(g.kinderen, binnenBreedte) + padding * 2;
+        const bijElkaar = g.bijElkaar === true;
+        if (bijElkaar && hoogte <= this.paginaHoogte)
+            this.zorgVoor(hoogte);
+        const start = this.y;
+        const startPagina = this.paginas.length;
+        if (padding)
+            this.y += padding;
+        const buiten = { links: this.links, breedte: this.breedte };
+        this.links = x + padding;
+        this.breedte = binnenBreedte;
+        for (const kind of g.kinderen)
+            this.plaatsEen(kind);
+        this.links = buiten.links;
+        this.breedte = buiten.breedte;
+        if (padding)
+            this.y += padding;
+        // Kader/achtergrond alleen wanneer de groep binnen één pagina bleef.
+        if ((g.kader || g.achtergrond) && this.paginas.length === startPagina) {
+            this.huidige().unshift({
+                type: "vlak",
+                xMm: x,
+                yMm: start,
+                breedteMm: breedte,
+                hoogteMm: this.y - start,
+                vulling: g.achtergrond,
+                randKleur: g.kader ? KLEUR_LIJN : undefined,
+                randMm: g.kader ? 0.25 : undefined,
+            });
+        }
+        this.y += g.margeOnderMm ?? 0;
+    }
+    plaatsTabel(t, x, breedte) {
+        const grootte = t.groottePt ?? this.o.basisGroottePt;
+        const kopGrootte = t.kopGroottePt ?? grootte * 0.9;
+        const breedtes = kolomBreedtesMm(t.kolommen, breedte);
+        const kopRij = t.toonKop !== false ? kopRijHoogte(t, breedtes, kopGrootte) : null;
+        const randen = t.randen ?? "onder";
+        if (!this.paginas.length)
+            this.nieuwePagina();
+        let kopGetekend = false;
+        const tekenKop = () => {
+            if (!kopRij)
+                return;
+            this.zorgVoor(kopRij.hoogte + rijHoogte(t, 0, breedtes, grootte));
+            this.huidige().push(...kopRij.teken(this.y, x, breedtes, randen));
+            this.y += kopRij.hoogte;
+            kopGetekend = true;
+        };
+        tekenKop();
+        for (let i = 0; i < t.rijen.length; i++) {
+            const h = rijHoogte(t, i, breedtes, grootte);
+            if (h > this.ruimte && this.y > this.bovenkant + this.kopHoogte + 0.01) {
+                this.nieuwePagina();
+                if (kopRij && t.kopHerhalen !== false && kopGetekend) {
+                    this.huidige().push(...kopRij.teken(this.y, x, breedtes, randen));
+                    this.y += kopRij.hoogte;
+                }
+            }
+            this.huidige().push(...tekenRij(t, i, this.y, x, breedtes, grootte, randen));
+            this.y += h;
+        }
+    }
+}
+// --- 4. blokken meten en tekenen ---------------------------------------------
+function kolomBreedtesMm(kolommen, breedteMm) {
+    const ruw = kolommen.map((k) => (Number(k.breedte) > 0 ? Number(k.breedte) : 0));
+    const som = ruw.reduce((a, b) => a + b, 0);
+    const leeg = ruw.filter((b) => b === 0).length;
+    const rest = Math.max(0, 100 - som);
+    const per = leeg ? rest / leeg : 0;
+    const gevuld = ruw.map((b) => (b === 0 ? per : b));
+    const totaal = gevuld.reduce((a, b) => a + b, 0) || 1;
+    return gevuld.map((b) => (b / totaal) * breedteMm);
+}
+const CEL_PAD_X = 1;
+const CEL_PAD_Y = 0.7;
+function celRegels(tekst, breedteMm, groottePt, vet) {
+    const max = mmNaarPt(Math.max(breedteMm - CEL_PAD_X * 2, 1));
+    return breekAf(tekst, max, groottePt, vet);
+}
+function rijHoogte(t, index, breedtes, groottePt) {
+    const rij = t.rijen[index] ?? [];
+    let regels = 1;
+    t.kolommen.forEach((k, i) => {
+        const n = celRegels(String(rij[i] ?? ""), breedtes[i] ?? 0, k.groottePt ?? groottePt, !!k.vet).length;
+        if (n > regels)
+            regels = n;
+    });
+    return ptNaarMm(regelHoogtePt(groottePt)) * regels + CEL_PAD_Y * 2;
+}
+function tekenRij(t, index, yMm, xMm, breedtes, groottePt, randen) {
+    const rij = t.rijen[index] ?? [];
+    const hoogte = rijHoogte(t, index, breedtes, groottePt);
+    const uit = [];
+    if (t.zebra && index % 2 === 1)
+        uit.push({
+            type: "vlak",
+            xMm,
+            yMm,
+            breedteMm: breedtes.reduce((a, b) => a + b, 0),
+            hoogteMm: hoogte,
+            vulling: "#f3f4f6",
+        });
+    let x = xMm;
+    t.kolommen.forEach((k, i) => {
+        const b = breedtes[i] ?? 0;
+        const grootte = k.groottePt ?? groottePt;
+        const regels = celRegels(String(rij[i] ?? ""), b, grootte, !!k.vet);
+        uit.push({
+            type: "tekst",
+            xMm: x + CEL_PAD_X,
+            yMm: yMm + CEL_PAD_Y,
+            breedteMm: b - CEL_PAD_X * 2,
+            regels,
+            groottePt: grootte,
+            vet: !!k.vet,
+            kleur: KLEUR_DONKER,
+            uitlijning: k.uitlijning ?? "left",
+            regelhoogteMm: ptNaarMm(regelHoogtePt(grootte)),
+        });
+        if (randen === "rand")
+            uit.push({
+                type: "vlak",
+                xMm: x,
+                yMm,
+                breedteMm: b,
+                hoogteMm: hoogte,
+                randKleur: KLEUR_LIJN,
+                randMm: 0.2,
+            });
+        x += b;
+    });
+    if (randen === "onder")
+        uit.push({
+            type: "lijn",
+            xMm,
+            yMm: yMm + hoogte,
+            breedteMm: breedtes.reduce((a, b) => a + b, 0),
+            dikteMm: 0.2,
+            kleur: KLEUR_LIJN,
+        });
+    return uit;
+}
+function kopRijHoogte(t, breedtes, kopGrootte) {
+    let regels = 1;
+    t.kolommen.forEach((k, i) => {
+        const n = celRegels(k.label, breedtes[i] ?? 0, kopGrootte, true).length;
+        if (n > regels)
+            regels = n;
+    });
+    const hoogte = ptNaarMm(regelHoogtePt(kopGrootte)) * regels + CEL_PAD_Y * 2;
+    return {
+        hoogte,
+        teken: (yMm, xMm, br, randen) => {
+            const uit = [];
+            let x = xMm;
+            t.kolommen.forEach((k, i) => {
+                const b = br[i] ?? 0;
+                uit.push({
+                    type: "tekst",
+                    xMm: x + CEL_PAD_X,
+                    yMm: yMm + CEL_PAD_Y,
+                    breedteMm: b - CEL_PAD_X * 2,
+                    regels: celRegels(k.label.toUpperCase(), b, kopGrootte, true),
+                    groottePt: kopGrootte,
+                    vet: true,
+                    kleur: KLEUR_GRIJS,
+                    uitlijning: k.uitlijning ?? "left",
+                    regelhoogteMm: ptNaarMm(regelHoogtePt(kopGrootte)),
+                });
+                if (randen === "rand")
+                    uit.push({ type: "vlak", xMm: x, yMm, breedteMm: b, hoogteMm: hoogte, randKleur: KLEUR_LIJN, randMm: 0.2 });
+                x += b;
+            });
+            if (randen === "onder")
+                uit.push({
+                    type: "lijn",
+                    xMm,
+                    yMm: yMm + hoogte,
+                    breedteMm: br.reduce((a, b) => a + b, 0),
+                    dikteMm: 0.2,
+                    kleur: KLEUR_LIJN,
+                });
+            return uit;
+        },
+    };
+}
+function tekstBlok(tekst, x, breedte, groottePt, opties = {}) {
+    const regels = breekAf(tekst, mmNaarPt(breedte), groottePt, !!opties.vet);
+    const rh = ptNaarMm(regelHoogtePt(groottePt));
+    const marge = opties.margeOnderMm ?? 0;
+    return {
+        hoogteMm: rh * regels.length + marge,
+        teken: (y) => [
+            {
+                type: "tekst",
+                xMm: x,
+                yMm: y,
+                breedteMm: breedte,
+                regels,
+                groottePt,
+                vet: !!opties.vet,
+                kleur: opties.kleur ?? KLEUR_DONKER,
+                uitlijning: opties.uitlijning ?? "left",
+                regelhoogteMm: rh,
+            },
+        ],
+    };
+}
+/** Zet één inhoudsblok om naar meetbare/tekenbare uitvoer op vaste positie. */
+function maakBlok(f, x, breedte, basis) {
+    switch (f.kind) {
+        case "tekst":
+            return tekstBlok(f.tekst, x, breedte, f.groottePt ?? basis, {
+                vet: f.vet,
+                kleur: f.kleur,
+                uitlijning: f.uitlijning,
+                margeOnderMm: f.margeOnderMm ?? 0,
+            });
+        case "band": {
+            const grootte = f.groottePt ?? basis;
+            const metaGrootte = f.metaGroottePt ?? grootte * 0.78;
+            const padX = 1.5;
+            const padY = 0.8;
+            const titelRegels = breekAf(f.titel, mmNaarPt(breedte - padX * 2), grootte, true);
+            const metaRegels = f.meta ? breekAf(f.meta, mmNaarPt(breedte - padX * 2), metaGrootte, false) : [];
+            const rhT = ptNaarMm(regelHoogtePt(grootte));
+            const rhM = ptNaarMm(regelHoogtePt(metaGrootte));
+            const inhoud = rhT * titelRegels.length + rhM * metaRegels.length;
+            const hoogte = inhoud + padY * 2 + (f.margeOnderMm ?? 1);
+            return {
+                hoogteMm: hoogte,
+                teken: (y) => {
+                    const uit = [];
+                    if (f.achtergrond)
+                        uit.push({
+                            type: "vlak",
+                            xMm: x,
+                            yMm: y,
+                            breedteMm: breedte,
+                            hoogteMm: inhoud + padY * 2,
+                            vulling: f.achtergrond,
+                        });
+                    if (f.lijnBovenOnder) {
+                        uit.push({ type: "lijn", xMm: x, yMm: y, breedteMm: breedte, dikteMm: 0.6, kleur: KLEUR_DONKER });
+                        uit.push({
+                            type: "lijn",
+                            xMm: x,
+                            yMm: y + inhoud + padY * 2,
+                            breedteMm: breedte,
+                            dikteMm: 0.6,
+                            kleur: KLEUR_DONKER,
+                        });
+                    }
+                    uit.push({
+                        type: "tekst",
+                        xMm: x + padX,
+                        yMm: y + padY,
+                        breedteMm: breedte - padX * 2,
+                        regels: titelRegels,
+                        groottePt: grootte,
+                        vet: true,
+                        kleur: KLEUR_DONKER,
+                        uitlijning: f.uitlijning ?? "left",
+                        regelhoogteMm: rhT,
+                    });
+                    if (metaRegels.length)
+                        uit.push({
+                            type: "tekst",
+                            xMm: x + padX,
+                            yMm: y + padY + rhT * titelRegels.length,
+                            breedteMm: breedte - padX * 2,
+                            regels: metaRegels,
+                            groottePt: metaGrootte,
+                            vet: false,
+                            kleur: KLEUR_MIDDEN,
+                            uitlijning: f.uitlijning ?? "left",
+                            regelhoogteMm: rhM,
+                        });
+                    return uit;
+                },
+            };
+        }
+        case "kv": {
+            const grootte = f.groottePt ?? basis;
+            const rh = ptNaarMm(regelHoogtePt(grootte));
+            const labelBreedte = Math.min(breedte * 0.55, ptNaarMm(tekstBreedtePt(f.label, grootte, false)) + 1);
+            const waardeRegels = breekAf(f.waarde, mmNaarPt(breedte - labelBreedte - 2), grootte, true);
+            return {
+                hoogteMm: rh * Math.max(1, waardeRegels.length),
+                teken: (y) => [
+                    {
+                        type: "tekst",
+                        xMm: x,
+                        yMm: y,
+                        breedteMm: labelBreedte,
+                        regels: [f.label],
+                        groottePt: grootte,
+                        vet: false,
+                        kleur: KLEUR_GRIJS,
+                        uitlijning: "left",
+                        regelhoogteMm: rh,
+                    },
+                    {
+                        type: "tekst",
+                        xMm: x + labelBreedte + 2,
+                        yMm: y,
+                        breedteMm: breedte - labelBreedte - 2,
+                        regels: waardeRegels,
+                        groottePt: grootte,
+                        vet: true,
+                        kleur: KLEUR_DONKER,
+                        uitlijning: "right",
+                        regelhoogteMm: rh,
+                    },
+                ],
+            };
+        }
+        case "kvgrid": {
+            const kolommen = Math.max(1, f.kolommen);
+            const kolomBreedte = (breedte - 6 * (kolommen - 1)) / kolommen;
+            const cellen = f.items.map((it) => maakBlok({ kind: "kv", label: it.label, waarde: it.waarde, groottePt: f.groottePt }, 0, kolomBreedte, basis));
+            const rijen = [];
+            for (let i = 0; i < cellen.length; i += kolommen)
+                rijen.push(cellen.map((_, j) => j).slice(i, i + kolommen));
+            const rijHoogtes = rijen.map((r) => Math.max(...r.map((i) => cellen[i].hoogteMm), 0));
+            return {
+                hoogteMm: rijHoogtes.reduce((a, b) => a + b, 0),
+                teken: (y) => {
+                    const uit = [];
+                    let cy = y;
+                    rijen.forEach((r, ri) => {
+                        r.forEach((idx, ci) => {
+                            const item = f.items[idx];
+                            const cx = x + ci * (kolomBreedte + 6);
+                            const blok = maakBlok({ kind: "kv", label: item.label, waarde: item.waarde, groottePt: f.groottePt }, cx, kolomBreedte, basis);
+                            uit.push(...blok.teken(cy));
+                        });
+                        cy += rijHoogtes[ri] ?? 0;
+                    });
+                    return uit;
+                },
+            };
+        }
+        case "tussen": {
+            const grootte = f.groottePt ?? basis;
+            const rh = ptNaarMm(regelHoogtePt(grootte));
+            const padOnder = 0.5;
+            const hoogte = rh + padOnder + (f.lijnOnder ? 0.6 : 0) + (f.lijnBoven ? 1.2 : 0);
+            return {
+                hoogteMm: hoogte,
+                teken: (y) => {
+                    const uit = [];
+                    let ty = y;
+                    if (f.lijnBoven) {
+                        uit.push({ type: "lijn", xMm: x, yMm: y, breedteMm: breedte, dikteMm: 0.25, kleur: KLEUR_LIJN });
+                        ty += 1.2;
+                    }
+                    uit.push({
+                        type: "tekst",
+                        xMm: x,
+                        yMm: ty,
+                        breedteMm: breedte * 0.7,
+                        regels: [f.links],
+                        groottePt: grootte,
+                        vet: f.vet !== false,
+                        kleur: KLEUR_DONKER,
+                        uitlijning: "left",
+                        regelhoogteMm: rh,
+                    });
+                    uit.push({
+                        type: "tekst",
+                        xMm: x + breedte * 0.7,
+                        yMm: ty,
+                        breedteMm: breedte * 0.3,
+                        regels: [f.rechts],
+                        groottePt: grootte,
+                        vet: f.vet !== false,
+                        kleur: KLEUR_DONKER,
+                        uitlijning: "right",
+                        regelhoogteMm: rh,
+                    });
+                    if (f.lijnOnder)
+                        uit.push({
+                            type: "lijn",
+                            xMm: x,
+                            yMm: ty + rh + padOnder,
+                            breedteMm: breedte,
+                            dikteMm: 0.45,
+                            kleur: KLEUR_DONKER,
+                        });
+                    return uit;
+                },
+            };
+        }
+        case "barcode": {
+            const grootte = basis * 0.85;
+            const rh = ptNaarMm(regelHoogtePt(grootte));
+            const toonWaarde = f.toonWaarde !== false;
+            const bx = f.uitlijning === "right"
+                ? x + breedte - f.breedteMm
+                : f.uitlijning === "left"
+                    ? x
+                    : x + (breedte - f.breedteMm) / 2;
+            return {
+                hoogteMm: f.hoogteMm + (toonWaarde ? rh : 0) + 1.5,
+                teken: (y) => {
+                    const uit = [
+                        {
+                            type: "barcode",
+                            xMm: bx,
+                            yMm: y,
+                            breedteMm: f.breedteMm,
+                            hoogteMm: f.hoogteMm,
+                            waarde: f.waarde,
+                            formaat: "CODE128",
+                        },
+                    ];
+                    if (toonWaarde)
+                        uit.push({
+                            type: "tekst",
+                            xMm: bx,
+                            yMm: y + f.hoogteMm + 0.5,
+                            breedteMm: f.breedteMm,
+                            regels: [f.waarde],
+                            groottePt: grootte,
+                            vet: false,
+                            kleur: KLEUR_DONKER,
+                            uitlijning: "center",
+                            regelhoogteMm: rh,
+                        });
+                    return uit;
+                },
+            };
+        }
+        case "afbeelding": {
+            const b = Math.min(f.breedteMm ?? f.hoogteMm * 3, breedte);
+            const ix = f.uitlijning === "right"
+                ? x + breedte - b
+                : f.uitlijning === "center"
+                    ? x + (breedte - b) / 2
+                    : x;
+            return {
+                hoogteMm: f.hoogteMm + 1,
+                teken: (y) => [
+                    { type: "afbeelding", xMm: ix, yMm: y, breedteMm: b, hoogteMm: f.hoogteMm, src: f.src },
+                ],
+            };
+        }
+        case "lijn": {
+            const marge = f.margeMm ?? 1.5;
+            return {
+                hoogteMm: marge * 2 + (f.dikteMm ?? 0.25),
+                teken: (y) => [
+                    {
+                        type: "lijn",
+                        xMm: x,
+                        yMm: y + marge,
+                        breedteMm: breedte,
+                        dikteMm: f.dikteMm ?? 0.25,
+                        kleur: f.kleur ?? KLEUR_LIJN,
+                    },
+                ],
+            };
+        }
+        case "lijnveld": {
+            const grootte = basis;
+            const rh = ptNaarMm(regelHoogtePt(grootte));
+            const hoogte = f.hoogteMm;
+            return {
+                hoogteMm: hoogte + 1.5,
+                teken: (y) => {
+                    const uit = [];
+                    if (f.label)
+                        uit.push({
+                            type: "tekst",
+                            xMm: x,
+                            yMm: y,
+                            breedteMm: breedte,
+                            regels: [f.label],
+                            groottePt: grootte,
+                            vet: false,
+                            kleur: KLEUR_DONKER,
+                            uitlijning: "left",
+                            regelhoogteMm: rh,
+                        });
+                    uit.push({
+                        type: "lijn",
+                        xMm: x,
+                        yMm: y + hoogte,
+                        breedteMm: breedte,
+                        dikteMm: 0.25,
+                        kleur: KLEUR_GRIJS,
+                    });
+                    return uit;
+                },
+            };
+        }
+        case "ruimte":
+            return { hoogteMm: f.hoogteMm, teken: () => [] };
+        case "groep": {
+            const b = (breedte * Math.min(Math.max(f.breedtePercent ?? 100, 5), 100)) / 100;
+            const padding = f.paddingMm ?? (f.kader ? 1.5 : 0);
+            const gx = f.uitlijning === "right" ? x + breedte - b : f.uitlijning === "center" ? x + (breedte - b) / 2 : x;
+            const kinderen = f.kinderen
+                .filter((k) => k.kind !== "paginabreuk")
+                .map((k) => maakBlok(k, gx + padding, b - padding * 2, basis));
+            const inhoud = kinderen.reduce((a, k) => a + k.hoogteMm, 0);
+            const hoogte = inhoud + padding * 2 + (f.margeOnderMm ?? 0);
+            return {
+                hoogteMm: hoogte,
+                teken: (y) => {
+                    const uit = [];
+                    if (f.kader || f.achtergrond)
+                        uit.push({
+                            type: "vlak",
+                            xMm: gx,
+                            yMm: y,
+                            breedteMm: b,
+                            hoogteMm: inhoud + padding * 2,
+                            vulling: f.achtergrond,
+                            randKleur: f.kader ? KLEUR_LIJN : undefined,
+                            randMm: f.kader ? 0.25 : undefined,
+                        });
+                    let cy = y + padding;
+                    for (const k of kinderen) {
+                        uit.push(...k.teken(cy));
+                        cy += k.hoogteMm;
+                    }
+                    return uit;
+                },
+            };
+        }
+        case "tabel": {
+            const grootte = f.groottePt ?? basis;
+            const kopGrootte = f.kopGroottePt ?? grootte * 0.9;
+            const breedtes = kolomBreedtesMm(f.kolommen, breedte);
+            const kop = f.toonKop !== false ? kopRijHoogte(f, breedtes, kopGrootte) : null;
+            const randen = f.randen ?? "onder";
+            const rijHoogtes = f.rijen.map((_, i) => rijHoogte(f, i, breedtes, grootte));
+            return {
+                hoogteMm: (kop?.hoogte ?? 0) + rijHoogtes.reduce((a, b) => a + b, 0),
+                teken: (y) => {
+                    const uit = [];
+                    let cy = y;
+                    if (kop) {
+                        uit.push(...kop.teken(cy, x, breedtes, randen));
+                        cy += kop.hoogte;
+                    }
+                    f.rijen.forEach((_, i) => {
+                        uit.push(...tekenRij(f, i, cy, x, breedtes, grootte, randen));
+                        cy += rijHoogtes[i] ?? 0;
+                    });
+                    return uit;
+                },
+            };
+        }
+        case "paginabreuk":
+            return { hoogteMm: 0, teken: () => [] };
+    }
+}
+// --- 5. publieke ingang ------------------------------------------------------
+/**
+ * Rekent het inhoudsmodel één keer door tot een bevroren DocumentModel in mm.
+ * Dezelfde invoer levert altijd hetzelfde model: geen DOM-metingen, geen
+ * browser-afhankelijkheden en geen willekeur.
+ */
+export function berekenDocumentModel(flows, opties) {
+    const o = {
+        breedteMm: opties.breedteMm,
+        hoogteMm: opties.hoogteMm,
+        margeMm: opties.margeMm,
+        basisGroottePt: opties.basisGroottePt ?? 8.5,
+        paginanummers: opties.paginanummers ?? false,
+    };
+    const l = new Layouter(o);
+    const voet = opties.paginaVoet ?? [];
+    let voetHoogte = 0;
+    if (voet.length) {
+        voetHoogte = l.meet(voet, l.breedte) + 1.5;
+        l.zetVoetHoogte(voetHoogte);
+    }
+    if (opties.paginaKop?.length)
+        l.zetKop(opties.paginaKop);
+    l.plaats(flows);
+    if (!l.paginas.length)
+        l.nieuwePagina();
+    if (voet.length) {
+        const voetY = o.hoogteMm - o.margeMm - voetHoogte + 1.5;
+        for (const pagina of l.paginas) {
+            let y = voetY;
+            for (const f of voet) {
+                const g = maakBlok(f, o.margeMm, o.breedteMm - o.margeMm * 2, o.basisGroottePt);
+                pagina.push(...g.teken(y));
+                y += g.hoogteMm;
+            }
+        }
+    }
+    const model = {
+        documentModelVersie: DOCUMENT_MODEL_VERSIE,
+        breedteMm: o.breedteMm,
+        hoogteMm: o.hoogteMm,
+        margeMm: o.margeMm,
+        basisGroottePt: o.basisGroottePt,
+        paginanummers: o.paginanummers,
+        paginas: l.paginas.map((elementen) => ({ elementen })),
+    };
+    return bevries(model);
+}
+/** Maakt het model definitief; renderers mogen niets meer wijzigen. */
+export function bevries(model) {
+    for (const p of model.paginas) {
+        for (const e of p.elementen)
+            Object.freeze(e);
+        Object.freeze(p.elementen);
+        Object.freeze(p);
+    }
+    Object.freeze(model.paginas);
+    return Object.freeze(model);
+}