@flowselections/layout-maker 1.28.0 → 1.31.0

package/dist-lib/lib/htmlPdf.server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"htmlPdf.server.d.ts","sourceRoot":"","sources":["../../src/lib/htmlPdf.server.ts"],"names":[],"mappings":"AAWA,OAAO,EAOL,KAAK,GAAG,EACT,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,EAAE,oBAAoB,CAAC;AAIpC,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuBD,kEAAkE;AAClE,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,CAuC/C;AAID,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,OAAO,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACzC;AAg4BD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,+EAA+E;AAC/E,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,CA8DrF;AA0BD,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAQzD"}
+{"version":3,"file":"htmlPdf.server.d.ts","sourceRoot":"","sources":["../../src/lib/htmlPdf.server.ts"],"names":[],"mappings":"AAWA,OAAO,EAOL,KAAK,GAAG,EACT,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,EAAE,oBAAoB,CAAC;AAIpC,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuBD,kEAAkE;AAClE,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,CAuC/C;AAUD,UAAU,SAAS;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AACD,UAAU,QAAQ;IAChB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B;AAED,sEAAsE;AACtE,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAMpD;AA2BD,yFAAyF;AACzF,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,EAAE,CAgClD;AAqBD,6EAA6E;AAC7E,wBAAgB,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAiBlE;AAKD,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,OAAO,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,mDAAmD;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AA4gCD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,+EAA+E;AAC/E,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,CA+DrF;AA0BD,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAQzD"}

package/dist-lib/lib/htmlPdf.server.js

@@ -73,6 +73,124 @@ export function ontleedHtml(html) {
     }
     return wortel;
 }
+/** Haalt de inhoud van alle <style>-blokken uit een HTML-document. */
+export function leesStylesheets(html) {
+    let uit = "";
+    const re = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+    let m;
+    while ((m = re.exec(html)))
+        uit += `\n${m[1] ?? ""}`;
+    return uit;
+}
+function leesDecls(blok) {
+    const uit = {};
+    for (const deel of blok.split(";")) {
+        const i = deel.indexOf(":");
+        if (i <= 0)
+            continue;
+        const naam = deel.slice(0, i).trim().toLowerCase();
+        const waarde = deel.slice(i + 1).replace(/!important/i, "").trim();
+        if (naam && waarde)
+            uit[naam] = waarde;
+    }
+    return uit;
+}
+function leesSelector(sel) {
+    const schoon = sel.trim();
+    if (!schoon || /[:\[\]>+~#]/.test(schoon))
+        return null;
+    const keten = [];
+    for (const stuk of schoon.split(/\s+/)) {
+        const klassen = (stuk.match(/\.[-\w]+/g) ?? []).map((k) => k.slice(1));
+        const tag = stuk.replace(/\.[-\w]+/g, "").trim().toLowerCase();
+        if (!tag && !klassen.length)
+            return null;
+        keten.push({ tag: tag && tag !== "*" ? tag : undefined, klassen });
+    }
+    return keten.length ? keten : null;
+}
+/** Ontleedt een stylesheet naar regels. At-rules (@page, @media) worden overgeslagen. */
+export function ontleedCss(css) {
+    const tekst = css.replace(/\/\*[\s\S]*?\*\//g, "");
+    const regels = [];
+    let i = 0;
+    let volgorde = 0;
+    while (i < tekst.length) {
+        const open = tekst.indexOf("{", i);
+        if (open < 0)
+            break;
+        const kop = tekst.slice(i, open).trim();
+        // bijbehorend sluithaakje zoeken (at-rules kunnen geneste blokken hebben)
+        let diepte = 0;
+        let j = open;
+        for (; j < tekst.length; j++) {
+            if (tekst[j] === "{")
+                diepte++;
+            else if (tekst[j] === "}") {
+                diepte--;
+                if (!diepte)
+                    break;
+            }
+        }
+        const inhoud = tekst.slice(open + 1, j);
+        i = j + 1;
+        if (kop.startsWith("@"))
+            continue;
+        const decls = leesDecls(inhoud);
+        if (!Object.keys(decls).length)
+            continue;
+        for (const sel of kop.split(",")) {
+            const keten = leesSelector(sel);
+            if (!keten)
+                continue;
+            const gewicht = keten.reduce((n, s) => n + s.klassen.length * 10 + (s.tag ? 1 : 0), 0);
+            regels.push({ keten, gewicht, volgorde: volgorde++, decls });
+        }
+    }
+    return regels;
+}
+function past(n, s) {
+    if (s.tag && n.tag !== s.tag)
+        return false;
+    if (!s.klassen.length)
+        return true;
+    const eigen = klassen(n);
+    return s.klassen.every((k) => eigen.includes(k));
+}
+function ketenPast(keten, pad) {
+    const laatste = pad[pad.length - 1];
+    if (!past(laatste, keten[keten.length - 1]))
+        return false;
+    let idx = keten.length - 2;
+    for (let p = pad.length - 2; p >= 0 && idx >= 0; p--) {
+        if (past(pad[p], keten[idx]))
+            idx--;
+    }
+    return idx < 0;
+}
+const BEREKEND = new WeakMap();
+/** Rekent de stylesheet uit voor elk element en bewaart dat bij de knoop. */
+export function stempelCss(wortel, regels) {
+    if (!regels.length)
+        return;
+    const loop = (n, pad) => {
+        const eigenPad = [...pad, n];
+        if (n.tag !== "#tekst") {
+            const raak = regels
+                .filter((r) => ketenPast(r.keten, eigenPad))
+                .sort((a, b) => a.gewicht - b.gewicht || a.volgorde - b.volgorde);
+            if (raak.length) {
+                const uit = {};
+                for (const r of raak)
+                    Object.assign(uit, r.decls);
+                BEREKEND.set(n, uit);
+            }
+        }
+        for (const k of n.kinderen)
+            loop(k, eigenPad);
+    };
+    loop(wortel, []);
+}
 const GRIJS = rgb(0.42, 0.45, 0.5);
 const DONKER = rgb(0.07, 0.09, 0.15);
 const LIJN = rgb(0.82, 0.84, 0.86);
@@ -89,6 +207,12 @@ function inline(n) {
     }
     return out;
 }
+/** Alle stijlwaarden van een element: stylesheet eerst, inline wint. */
+function eig(n) {
+    const uit = BEREKEND.get(n);
+    const eigen = inline(n);
+    return uit ? { ...uit, ...eigen } : eigen;
+}
 function hexNaarRgb(v) {
     const m = /^#?([0-9a-f]{6})$/i.exec(v.trim());
     if (m) {
@@ -134,7 +258,9 @@ function stijlVan(n, ouder) {
     const cl = klassen(n);
     if (n.tag === "th" || cl.includes("vet") || n.tag === "b" || n.tag === "strong")
         s.vet = true;
-    if (cl.includes("sectitel")) {
+    // De stylesheet is leidend voor .sectitel; alleen zonder opmaakregels valt de
+    // motor terug op de bekende grijze kop.
+    if (cl.includes("sectitel") && !Object.keys(eig(n)).length) {
         s.grootte = ouder.grootte * 0.9;
         s.vet = true;
         s.kleur = GRIJS;
@@ -151,7 +277,7 @@ function stijlVan(n, ouder) {
         s.vet = true;
     if (cl.includes("karkop") || cl.includes("laagkop") || cl.includes("totalen"))
         s.vet = true;
-    const st = inline(n);
+    const st = eig(n);
     const fs = st["font-size"];
     if (fs) {
         const g = /%$/.test(fs) ? (parseFloat(fs) / 100) * ouder.grootte : lengte(fs);
@@ -166,6 +292,11 @@ function stijlVan(n, ouder) {
     const ta = st["text-align"];
     if (ta === "left" || ta === "center" || ta === "right")
         s.uitlijning = ta;
+    const tt = st["text-transform"];
+    if (tt === "uppercase")
+        s.hoofdletters = true;
+    else if (tt === "none" || tt === "lowercase")
+        s.hoofdletters = false;
     return s;
 }
 // --- 3. tekenhulp -----------------------------------------------------------
@@ -192,6 +323,9 @@ function veiligeTekst(t) {
     }
     return out;
 }
+function metTransform(t, s) {
+    return s.hoofdletters ? t.toUpperCase() : t;
+}
 class Tekenaar {
     constructor(pdf, breedte, hoogte, marge, normaal, vet) {
         this.pdf = pdf;
@@ -203,6 +337,8 @@ class Tekenaar {
         this.paginas = [];
         this.voetHoogte = 0;
         this.voetTekenaar = null;
+        /** Zolang dit aanstaat komt er geen nieuwe pagina bij (voet tekenen). */
+        this.vast = false;
         this.pagina = pdf.addPage([breedte, hoogte]);
         this.paginas.push(this.pagina);
         this.y = hoogte - marge;
@@ -211,7 +347,7 @@ class Tekenaar {
         return s.vet ? this.vet : this.normaal;
     }
     breedteVan(t, s) {
-        return this.font(s).widthOfTextAtSize(veiligeTekst(t), s.grootte);
+        return this.font(s).widthOfTextAtSize(metTransform(veiligeTekst(t), s), s.grootte);
     }
     get bodem() {
         return this.marge + this.voetHoogte;
@@ -224,6 +360,8 @@ class Tekenaar {
         this.voetTekenaar = teken;
     }
     nieuwePagina() {
+        if (this.vast)
+            return;
         this.pagina = this.pdf.addPage([this.breedte, this.hoogte]);
         this.paginas.push(this.pagina);
         this.y = this.hoogte - this.marge;
@@ -260,6 +398,26 @@ class Tekenaar {
         this.voetHoogte = bewaard.voet;
         return hoogte;
     }
+    /** Tekent iets op een bestaande pagina, bijvoorbeeld de vaste voet. */
+    async opPagina(p, y, teken) {
+        const bewaard = { pagina: this.pagina, y: this.y, paginas: this.paginas, voet: this.voetHoogte };
+        this.pagina = p;
+        this.y = y;
+        this.paginas = [p];
+        this.voetHoogte = 0;
+        this.vast = true;
+        try {
+            await teken();
+        }
+        catch {
+            // een voet mag het document nooit blokkeren
+        }
+        this.pagina = bewaard.pagina;
+        this.y = bewaard.y;
+        this.paginas = bewaard.paginas;
+        this.voetHoogte = bewaard.voet;
+        this.vast = false;
+    }
     rondAf() {
         if (!this.voetTekenaar)
             return;
@@ -291,7 +449,7 @@ function breekAf(tk, tekst, s, breedte) {
     return regels;
 }
 function tekenRegel(tk, regel, x, breedte, y, s) {
-    const t = veiligeTekst(regel);
+    const t = metTransform(veiligeTekst(regel), s);
     const w = tk.breedteVan(t, s);
     const dx = s.uitlijning === "right" ? breedte - w : s.uitlijning === "center" ? (breedte - w) / 2 : 0;
     tk.pagina.drawText(t, {
@@ -306,7 +464,7 @@ const inlineTags = new Set(["#tekst", "span", "b", "strong", "em", "i", "small",
 function isInline(n) {
     if (!inlineTags.has(n.tag))
         return false;
-    const st = inline(n);
+    const st = eig(n);
     return !st["height"] && !st["width"];
 }
 /** Verzamelt de platte tekst van een knoop (met spatie tussen losse stukjes). */
@@ -354,7 +512,7 @@ function kolomBreedtes(tabel, rijen, totaal) {
     if (!aantal)
         return [totaal];
     if (cols.length === aantal) {
-        const rauw = cols.map((c) => lengte(inline(c)["width"] ?? c.attrs["width"], totaal));
+        const rauw = cols.map((c) => lengte(eig(c)["width"] ?? c.attrs["width"], totaal));
         const som = rauw.reduce((a, b) => a + (b ?? 0), 0);
         if (som > 1) {
             const factor = totaal / som;
@@ -366,7 +524,7 @@ function kolomBreedtes(tabel, rijen, totaal) {
 async function tekenBlok(ctx, n, vak, ouderStijl) {
     const tk = ctx.tk;
     const s = stijlVan(n, ouderStijl);
-    const st = inline(n);
+    const st = eig(n);
     const cl = klassen(n);
     if (n.tag === "#tekst") {
         const regels = breekAf(tk, n.tekst ?? "", s, vak.breedte);
@@ -475,16 +633,26 @@ async function tekenBlok(ctx, n, vak, ouderStijl) {
         }
         return;
     }
-    // kader / achtergrond
-    const kader = cl.includes("kader") || cl.includes("rand") || cl.includes("omkaderd");
-    const achtergrond = st["background"] ? hexNaarRgb(st["background"].split(" ")[0] ?? "") : null;
-    const padding = kader ? 1.5 * MM : 0;
-    if (cl.includes("breekvoor") && tk.y < tk.hoogte - tk.marge - 1)
+    // kader / achtergrond / afstand — uit de stylesheet, met de bekende klassen
+    // als terugval voor HTML zonder eigen opmaak.
+    const randRondom = randVan(st["border"]);
+    const randOnder = randVan(st["border-bottom"]);
+    const randBoven = randVan(st["border-top"]);
+    const kader = !!randRondom || cl.includes("kader") || cl.includes("rand") || cl.includes("omkaderd");
+    const achtergrond = vlakKleur(st["background"] ?? st["background-color"]);
+    const padding = lengte(st["padding"]?.split(/\s+/)[0]) ?? (kader ? 1.5 * MM : 0);
+    const margeOnder = lengte(st["margin-bottom"]);
+    const margeBoven = lengte(st["margin-top"]);
+    const breekVoor = cl.includes("breekvoor") || /page|always/.test(st["break-before"] ?? st["page-break-before"] ?? "");
+    if (breekVoor && tk.y < tk.hoogte - tk.marge - 1)
         tk.nieuwePagina();
+    if (margeBoven)
+        tk.y -= margeBoven;
+    const heelHouden = cl.includes("heelhouden") || /avoid/.test(st["break-inside"] ?? st["page-break-inside"] ?? "");
     const binnenVak = { x: vak.x + padding, breedte: vak.breedte - padding * 2 };
-    if (!ctx.meten && (cl.includes("heelhouden") || achtergrond)) {
+    if (!ctx.meten && (heelHouden || achtergrond)) {
         const nodig = (await meetHoogte(ctx, n, binnenVak, s)) + padding * 2;
-        if (cl.includes("heelhouden") && nodig > tk.ruimte && nodig < tk.hoogte - tk.marge * 2) {
+        if (heelHouden && nodig > tk.ruimte && nodig < tk.hoogte - tk.marge * 2) {
             tk.nieuwePagina();
         }
         if (achtergrond) {
@@ -500,10 +668,10 @@ async function tekenBlok(ctx, n, vak, ouderStijl) {
     }
     const startY = tk.y;
     const startPagina = tk.pagina;
-    if (kader || achtergrond)
+    if (padding)
         tk.y -= padding;
     await tekenKinderen(ctx, n, binnenVak, s);
-    if (kader || achtergrond)
+    if (padding)
         tk.y -= padding;
     if (kader && tk.pagina === startPagina && startY - tk.y > 0) {
         startPagina.drawRectangle({
@@ -511,36 +679,62 @@ async function tekenBlok(ctx, n, vak, ouderStijl) {
             y: tk.y,
             width: vak.breedte,
             height: startY - tk.y,
-            borderWidth: 0.6,
-            borderColor: LIJN,
+            borderWidth: randRondom?.dikte ?? 0.6,
+            borderColor: randRondom?.kleur ?? LIJN,
         });
     }
-    if (cl.includes("onder") || cl.includes("laagkop")) {
+    if (randOnder || cl.includes("onder") || cl.includes("laagkop")) {
         tk.pagina.drawLine({
             start: { x: vak.x, y: tk.y + 0.6 * MM },
             end: { x: vak.x + vak.breedte, y: tk.y + 0.6 * MM },
-            thickness: 0.5,
-            color: LIJN,
+            thickness: randOnder?.dikte ?? 0.5,
+            color: randOnder?.kleur ?? LIJN,
         });
     }
-    if (cl.includes("totalen")) {
+    if (randBoven || cl.includes("totalen")) {
         tk.pagina.drawLine({
             start: { x: vak.x, y: startY },
             end: { x: vak.x + vak.breedte, y: startY },
-            thickness: 0.7,
-            color: LIJN,
+            thickness: randBoven?.dikte ?? 0.7,
+            color: randBoven?.kleur ?? LIJN,
         });
     }
-    if (cl.includes("blok") || cl.includes("groep") || cl.includes("karblok") || cl.includes("laag"))
+    if (margeOnder !== null)
+        tk.y -= margeOnder;
+    else if (cl.includes("blok") || cl.includes("groep") || cl.includes("karblok") || cl.includes("laag"))
         tk.y -= 1.6 * MM;
 }
+/** Leest `0.25mm solid #d1d5db` (of px/pt) uit een border-eigenschap. */
+function randVan(v) {
+    if (!v || /^none$/i.test(v.trim()))
+        return null;
+    const m = /(-?[\d.]+\s*(?:mm|pt|px))?\s*(solid|dashed|dotted)?\s*(#[0-9a-f]{3,6}|black|white)?/i.exec(v);
+    if (!m || (!m[1] && !m[3]))
+        return null;
+    return { dikte: Math.max(0.3, lengte(m[1]?.trim()) ?? 0.5), kleur: hexNaarRgb(m[3] ?? "") ?? LIJN };
+}
+/** Achtergrondkleur uit een background(-color); verlopen tellen niet mee. */
+function vlakKleur(v) {
+    if (!v || /gradient/i.test(v))
+        return null;
+    return hexNaarRgb(v.split(/\s+/)[0] ?? "");
+}
 async function tekenAfbeelding(ctx, n, vak, s) {
     const tk = ctx.tk;
     const src = n.attrs["src"] ?? "";
     const afb = ctx.afbeeldingen.get(src);
-    const hoogte = lengte(inline(n)["height"]) ?? 18 * MM;
+    const hoogte = lengte(eig(n)["height"]) ?? 18 * MM;
     if (!afb) {
-        tk.y -= hoogte + 1 * MM;
+        // Een leeg vlak vertelt niemand dat er iets misging: melding op de afdruk.
+        const reden = ctx.beeldFouten?.get(src) ?? "Afbeelding niet beschikbaar";
+        const melding = { ...s, grootte: Math.min(s.grootte, 7), vet: false, kleur: rgb(0.7, 0.15, 0.15) };
+        const regels = breekAf(tk, `[${reden}]`, melding, vak.breedte);
+        tk.zorgVoor(Math.max(hoogte, regels.length * regelHoogte(melding)) + 1 * MM);
+        for (const r of regels) {
+            tk.y -= regelHoogte(melding);
+            tekenRegel(tk, r, vak.x, vak.breedte, tk.y + melding.grootte * 0.25, melding);
+        }
+        tk.y -= 1 * MM;
         return;
     }
     const schaal = hoogte / afb.height;
@@ -567,6 +761,13 @@ async function tekenTabel(ctx, tabel, vak, s) {
     const padX = compact ? 0.8 * MM : 1 * MM;
     const randen = heeft(tabel, "rand");
     const kopRij = rijen.find((r) => r.kinderen.some((c) => c.tag === "th")) ?? null;
+    /** Celrand onderaan: uit de stylesheet, met de klasse `onder` als terugval. */
+    const celRandOnder = (c) => randVan(eig(c)["border-bottom"]) ??
+        randVan(eig(c)["border"]) ??
+        (klassen(c).includes("onder") || klassen(c).includes("rand") ? { dikte: 0.5, kleur: LIJN } : null);
+    // Zodra de cellen zelf randen dragen, is de automatische lijn onder de koprij
+    // dubbelop en landt hij op de verkeerde regel.
+    const eigenCelRanden = rijen.some((r) => r.kinderen.some((c) => (c.tag === "td" || c.tag === "th") && !!celRandOnder(c)));
     const tekenRij = (rij, herhaald = false) => {
         const cellen = rij.kinderen.filter((c) => c.tag === "td" || c.tag === "th");
         const cellenStijl = cellen.map((c) => stijlVan(c, s));
@@ -607,14 +808,28 @@ async function tekenTabel(ctx, tabel, vak, s) {
                     borderColor: LIJN,
                 });
             }
+            else {
+                const cr = celRandOnder(c);
+                if (cr) {
+                    tk.pagina.drawLine({
+                        start: { x, y: bovenY - hoogte },
+                        end: { x: x + b, y: bovenY - hoogte },
+                        thickness: cr.dikte,
+                        color: cr.kleur,
+                    });
+                }
+            }
             x += b;
         });
-        if (!randen && (rij === kopRij || heeft(rij, "onder"))) {
+        const rijRand = randVan(eig(rij)["border-bottom"]) ?? (heeft(rij, "onder") ? { dikte: 0.5, kleur: LIJN } : null);
+        const automatisch = !eigenCelRanden && rij === kopRij ? { dikte: 0.5, kleur: LIJN } : null;
+        const lijn = !randen ? (rijRand ?? automatisch) : null;
+        if (lijn) {
             tk.pagina.drawLine({
                 start: { x: vak.x, y: bovenY - hoogte },
                 end: { x: vak.x + vak.breedte, y: bovenY - hoogte },
-                thickness: 0.5,
-                color: LIJN,
+                thickness: lijn.dikte,
+                color: lijn.kleur,
             });
         }
         tk.y = bovenY - hoogte;
@@ -626,7 +841,7 @@ async function tekenTabel(ctx, tabel, vak, s) {
 /** Tekent een element dat met vaste coördinaten geplaatst is (position:absolute). */
 async function tekenAbsoluut(ctx, n, s) {
     const tk = ctx.tk;
-    const st = inline(n);
+    const st = eig(n);
     const eigen = stijlVan(n, s);
     const x = lengte(st["left"]) ?? 0;
     const top = lengte(st["top"]) ?? 0;
@@ -755,7 +970,7 @@ async function tekenAbsoluut(ctx, n, s) {
 }
 /** Zoekt een streepjes- of blokjespatroon (barcode/QR) in de knoop of kinderen. */
 function zoekGradient(n) {
-    const css = `${inline(n)["background"] ?? ""} ${inline(n)["background-image"] ?? ""}`;
+    const css = `${eig(n)["background"] ?? ""} ${eig(n)["background-image"] ?? ""}`;
     if (/repeating-linear-gradient/i.test(css))
         return "streepjes";
     if (/repeating-conic-gradient/i.test(css))
@@ -782,21 +997,28 @@ async function tekenKinderen(ctx, n, vak, s) {
     const tk = ctx.tk;
     const cl = klassen(n);
     const alle = n.kinderen.filter((k) => k.tag !== "#tekst" || (k.tekst ?? "").trim().length);
-    const absolute = alle.filter((k) => /absolute/.test(inline(k)["position"] ?? ""));
+    const absolute = alle.filter((k) => /absolute/.test(eig(k)["position"] ?? ""));
     for (const k of absolute)
         await tekenAbsoluut(ctx, k, s);
     const kinderen = alle.filter((k) => !absolute.includes(k));
     if (!kinderen.length)
         return;
-    const tweeKolommen = cl.includes("grid2") || cl.includes("tweekolom");
-    const rijModus = cl.includes("kv") ||
+    const st = eig(n);
+    const display = st["display"] ?? "";
+    const kolommen = st["grid-template-columns"] ?? "";
+    const gapCss = lengte((st["gap"] ?? "").split(/\s+/).slice(-1)[0]);
+    const tweeKolommen = cl.includes("grid2") ||
+        cl.includes("tweekolom") ||
+        (/grid/.test(display) && kolommen.trim().split(/\s+/).length === 2);
+    const rijModus = /flex/.test(display) ||
+        cl.includes("kv") ||
         cl.includes("karkop") ||
         cl.includes("laagkop") ||
         cl.includes("meta") ||
         cl.includes("totalen") ||
         cl.includes("regelrij");
     if (tweeKolommen) {
-        const gap = 6 * MM;
+        const gap = gapCss ?? 6 * MM;
         const kolomBreedte = (vak.breedte - gap) / 2;
         const links = kinderen.filter((_, i) => i % 2 === 0);
         const rechts = kinderen.filter((_, i) => i % 2 === 1);
@@ -821,12 +1043,17 @@ async function tekenKinderen(ctx, n, vak, s) {
         const breedtesTekst = stukken.map((p) => tk.breedteVan(p.tekst, p.stijl));
         const hoogte = Math.max(...stukken.map((p) => regelHoogte(p.stijl)), regelHoogte(s));
         const totaalTekst = breedtesTekst.reduce((a, b) => a + b, 0);
-        const gap = 3 * MM;
+        const gap = gapCss ?? 3 * MM;
         tk.zorgVoor(hoogte);
         tk.y -= hoogte;
         const yTekst = tk.y + s.grootte * 0.3;
-        const spreiden = (cl.includes("kv") || cl.includes("karkop") || cl.includes("laagkop")) && stukken.length > 1;
-        const rechtsUit = cl.includes("totalen") && inline(n)["justify-content"] === "flex-end";
+        const verdeel = st["justify-content"] ?? "";
+        const spreiden = stukken.length > 1 &&
+            (verdeel === "space-between" ||
+                verdeel === "space-around" ||
+                ((!verdeel || verdeel === "normal") &&
+                    (cl.includes("kv") || cl.includes("karkop") || cl.includes("laagkop"))));
+        const rechtsUit = verdeel === "flex-end" || verdeel === "right" || verdeel === "end";
         if (spreiden) {
             let x = vak.x;
             stukken.forEach((p, i) => {
@@ -889,11 +1116,16 @@ function verzamelBronnen(n, uit) {
 async function laadAfbeeldingen(pdf, wortel) {
     const bronnen = new Set();
     verzamelBronnen(wortel, bronnen);
-    const uit = new Map();
+    const beelden = new Map();
+    const fouten = new Map();
     await Promise.all([...bronnen].slice(0, 20).map(async (src) => {
         try {
             let bytes;
             let png = /\.png(\?|$)/i.test(src);
+            if (/^data:image\/svg|\.svg(\?|$)/i.test(src)) {
+                fouten.set(src, "SVG-afbeelding wordt niet ondersteund - gebruik PNG of JPG");
+                return;
+            }
             if (src.startsWith("data:")) {
                 const komma = src.indexOf(",");
                 png = /image\/png/i.test(src.slice(0, komma));
@@ -901,22 +1133,30 @@ async function laadAfbeeldingen(pdf, wortel) {
             }
             else if (/^https?:/i.test(src)) {
                 const res = await fetch(src);
-                if (!res.ok)
+                if (!res.ok) {
+                    fouten.set(src, `Afbeelding niet opgehaald (${res.status})`);
                     return;
+                }
                 const type = res.headers.get("content-type") ?? "";
+                if (/svg/i.test(type)) {
+                    fouten.set(src, "SVG-afbeelding wordt niet ondersteund - gebruik PNG of JPG");
+                    return;
+                }
                 png = /png/i.test(type) || png;
                 bytes = new Uint8Array(await res.arrayBuffer());
             }
-            else
+            else {
+                fouten.set(src, "Onbekende afbeeldingsbron");
                 return;
+            }
             const afb = png ? await pdf.embedPng(bytes) : await pdf.embedJpg(bytes);
-            uit.set(src, afb);
+            beelden.set(src, afb);
         }
-        catch {
-            // afbeelding overslaan: het document moet altijd afdrukbaar blijven
+        catch (e) {
+            fouten.set(src, e instanceof Error ? `Afbeelding onleesbaar: ${e.message}` : "Afbeelding onleesbaar");
         }
     }));
-    return uit;
+    return { beelden, fouten };
 }
 /** Zet print-HTML om naar een PDF en levert die als base64 (zonder prefix). */
 export async function htmlNaarPdfBytes(opties) {
@@ -929,37 +1169,37 @@ export async function htmlNaarPdfBytes(opties) {
     const normaal = await pdf.embedFont(StandardFonts.Helvetica);
     const vet = await pdf.embedFont(StandardFonts.HelveticaBold);
     const wortel = ontleedHtml(opties.html);
-    const afbeeldingen = await laadAfbeeldingen(pdf, wortel);
+    // De opmaak uit het <style>-blok wordt hier per element uitgerekend, zodat
+    // het document er hetzelfde uitziet als in het voorbeeld op het scherm.
+    stempelCss(wortel, ontleedCss(leesStylesheets(opties.html)));
+    const { beelden: afbeeldingen, fouten: beeldFouten } = await laadAfbeeldingen(pdf, wortel);
     const basis = basisGrootte(opties.html);
     const tk = new Tekenaar(pdf, breedte, hoogte, marge, normaal, vet);
-    const ctx = { tk, afbeeldingen };
+    const ctx = { tk, afbeeldingen, beeldFouten };
     const stijl = { grootte: basis, vet: false, kleur: DONKER, uitlijning: "left" };
-    // vaste paginavoet (bijv. totalen op elke pagina)
+    // vaste paginavoet (bijv. totalen op elke pagina) — als volwaardig blok
+    const voetVak = { x: marge, breedte: breedte - marge * 2 };
     const voetKnoop = zoekVoet(wortel);
-    if (voetKnoop) {
+    const voetOuder = voetKnoop
+        ? { tag: "div", attrs: {}, kinderen: [voetKnoop] }
+        : null;
+    let voetHoogte = 0;
+    if (voetOuder) {
         verwijder(wortel, voetKnoop);
-        tk.zetVoet(regelHoogte(stijl) + 2 * MM, () => { });
+        voetHoogte = await tk.meet(() => tekenKinderen(ctx, voetOuder, voetVak, stijl));
+        tk.zetVoet(voetHoogte + 2 * MM, () => { });
     }
     await tekenKinderen(ctx, wortel, { x: marge, breedte: breedte - marge * 2 }, stijl);
-    if (voetKnoop) {
-        const tekst = plattTekst(voetKnoop).trim();
-        for (const p of tk.paginas) {
-            p.drawLine({
-                start: { x: marge, y: marge + regelHoogte(stijl) + 1.5 * MM },
-                end: { x: breedte - marge, y: marge + regelHoogte(stijl) + 1.5 * MM },
-                thickness: 0.6,
-                color: LIJN,
-            });
-            p.drawText(veiligeTekst(tekst).slice(0, 300), {
-                x: marge,
-                y: marge + 2,
-                size: stijl.grootte,
-                font: normaal,
-                color: DONKER,
-            });
+    if (voetOuder) {
+        for (const p of [...tk.paginas]) {
+            await tk.opPagina(p, marge + voetHoogte + 1 * MM, () => tekenKinderen(ctx, voetOuder, voetVak, stijl));
         }
     }
-    if (opties.paginanummers !== false && tk.paginas.length > 1) {
+    // De layout bepaalt of paginanummers meegaan; zonder voorkeur alleen bij
+    // meerdere pagina's.
+    const uitMeta = /name=["']pdf-paginanummers["']\s+content=["']ja["']/i.test(opties.html);
+    const nummers = opties.paginanummers ?? (uitMeta ? true : tk.paginas.length > 1);
+    if (nummers) {
         tk.paginas.forEach((p, i) => {
             const t = `Pagina ${i + 1} van ${tk.paginas.length}`;
             p.drawText(t, {

package/dist-lib/lib/orderData.server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"orderData.server.d.ts","sourceRoot":"","sources":["../../src/lib/orderData.server.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAEnD,KAAK,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAwBtD,mEAAmE;AACnE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CAKvD;AAED,+EAA+E;AAC/E,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG;IACrD,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAgCA;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG;IAC7C,KAAK,EAAE,WAAW,CAAC;IACnB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B,CAMA;AAED;;;GAGG;AACH,wBAAsB,cAAc,CAClC,EAAE,EAAE,OAAO,EACX,MAAM,EAAE;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,GAC7E,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,CA2OrB;AAkCD;;;GAGG;AACH,wBAAsB,uBAAuB,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,CAGhG"}
+{"version":3,"file":"orderData.server.d.ts","sourceRoot":"","sources":["../../src/lib/orderData.server.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAEnD,KAAK,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAwBtD,mEAAmE;AACnE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CAKvD;AAED,+EAA+E;AAC/E,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG;IACrD,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAgCA;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG;IAC7C,KAAK,EAAE,WAAW,CAAC;IACnB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B,CAMA;AAED;;;GAGG;AACH,wBAAsB,cAAc,CAClC,EAAE,EAAE,OAAO,EACX,MAAM,EAAE;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,GAC7E,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,CA2OrB;AA+DD;;;GAGG;AACH,wBAAsB,uBAAuB,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,CAGhG"}