@flowselections/layout-maker 1.28.0 → 1.29.0

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

@@ -8,11 +8,29 @@ export interface Knoop {
 }
 /** Zet HTML om naar een boom. Alleen de <body> wordt gebruikt. */
 export declare function ontleedHtml(html: string): Knoop;
+interface Samenstel {
+    tag?: string;
+    klassen: string[];
+}
+interface CssRegel {
+    keten: Samenstel[];
+    gewicht: number;
+    volgorde: number;
+    decls: Record<string, string>;
+}
+/** Haalt de inhoud van alle <style>-blokken uit een HTML-document. */
+export declare function leesStylesheets(html: string): string;
+/** Ontleedt een stylesheet naar regels. At-rules (@page, @media) worden overgeslagen. */
+export declare function ontleedCss(css: string): CssRegel[];
+/** Rekent de stylesheet uit voor elk element en bewaart dat bij de knoop. */
+export declare function stempelCss(wortel: Knoop, regels: CssRegel[]): void;
 export interface Stijl {
     grootte: number;
     vet: boolean;
     kleur: RGB;
     uitlijning: "left" | "center" | "right";
+    /** text-transform: uppercase uit de stylesheet. */
+    hoofdletters?: boolean;
 }
 export interface DocumentPdfOpties {
     html: string;
@@ -26,4 +44,5 @@ export interface DocumentPdfOpties {
 /** Zet print-HTML om naar een PDF en levert die als base64 (zonder prefix). */
 export declare function htmlNaarPdfBytes(opties: DocumentPdfOpties): Promise<Uint8Array>;
 export declare function bytesNaarBase64(bytes: Uint8Array): string;
+export {};
 //# sourceMappingURL=htmlPdf.server.d.ts.map

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;AAw9BD,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,CAiErF;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) {
@@ -151,7 +275,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 +290,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 +321,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;
@@ -211,7 +343,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;
@@ -291,7 +423,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 +438,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 +486,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 +498,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 +607,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 +642,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 +653,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;
@@ -626,7 +794,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 +923,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 +950,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 +996,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 +1069,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 +1086,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,10 +1122,13 @@ 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)
     const voetKnoop = zoekVoet(wortel);

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"}

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

@@ -215,7 +215,7 @@ export async function laadPakbonData(db, opties) {
         const extra = (p["custom_fields"] ?? {});
         return {
             artikelnummer: String(p["article_number"] ?? ""),
-            artikelnaam: String(bron["product_name"] ?? p["product"] ?? ""),
+            artikelnaam: taalTekst(bron["product_name"]) || taalTekst(p["product"]),
             potmaat: String(extra["potmaat"] ?? extra["Potmaat"] ?? ""),
             aantal: aantalPlanten,
             barcode: String(p["barcode"] ?? ""),
@@ -277,6 +277,37 @@ export async function laadPakbonData(db, opties) {
  * Kopsecties bij één of meerdere orders. Conservatief: bij meerdere orders
  * tonen we de klant (als die gelijk is) en géén willekeurig ordernummer.
  */
+/** Leest een naam die als JSON met taalvarianten in de database staat. */
+function taalTekst(waarde) {
+    if (waarde == null)
+        return "";
+    if (typeof waarde === "object") {
+        const o = waarde;
+        const keus = o["nl"] ?? Object.values(o)[0];
+        return keus == null ? "" : String(keus);
+    }
+    const tekst = String(waarde);
+    if (tekst.trim().startsWith("{")) {
+        try {
+            return taalTekst(JSON.parse(tekst));
+        }
+        catch {
+            return tekst;
+        }
+    }
+    return tekst;
+}
+/** Zet een ISO-timestamp of datumtekst om naar een leesbare datum (dd-mm-jjjj). */
+function datumTekst(waarde) {
+    const tekst = waarde == null ? "" : String(waarde).trim();
+    if (!tekst)
+        return "";
+    const d = new Date(tekst);
+    if (Number.isNaN(d.getTime()))
+        return tekst;
+    const p = (n) => String(n).padStart(2, "0");
+    return `${p(d.getUTCDate())}-${p(d.getUTCMonth() + 1)}-${d.getUTCFullYear()}`;
+}
 function maakKopsecties(orders, scope) {
     const nummers = uniek(orders.map((o) => o["order_number"]));
     const klanten = uniek(orders.map((o) => o["customer_name"]));
@@ -287,8 +318,8 @@ function maakKopsecties(orders, scope) {
     return {
         order: {
             nummer: meer ? "" : String(eerste["order_number"] ?? ""),
-            datum: String(eerste["order_date"] ?? ""),
-            leverdatum: String(eerste["delivery_date"] ?? ""),
+            datum: datumTekst(eerste["order_date"]),
+            leverdatum: datumTekst(eerste["delivery_date"]),
             referentie: lijst(nummers),
             opmerking: meer ? "" : String(eerste["notes"] ?? ""),
             aantal_orders: orders.length,

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

@@ -1 +1 @@
-{"version":3,"file":"printQueue.server.d.ts","sourceRoot":"","sources":["../../src/lib/printQueue.server.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAsB5D,KAAK,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE/B,mFAAmF;AACnF,MAAM,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAEpD;;;;GAIG;AACH,wBAAsB,gBAAgB,CAAC,EAAE,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAW1E;AAeD;;;;;GAKG;AACH,KAAK,WAAW,GAAG;IAAE,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC;IAAC,WAAW,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhE,yEAAyE;AACzE,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,CAAC;AAE1F,6EAA6E;AAC7E,MAAM,MAAM,YAAY,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AAcnD,4EAA4E;AAC5E,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAI7D;AAkHD;;;GAGG;AACH,wBAAsB,cAAc,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA+BnF;AAgPD;;;;GAIG;AACH,wBAAsB,QAAQ,CAC5B,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,YAAY,GACtB,OAAO,CAAC,MAAM,CAAC,CA8IjB;AAGD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAY1D;AAmRD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,oFAAoF;AACpF,wBAAsB,eAAe,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,SAAI,GAAG,OAAO,CAAC,iBAAiB,CAAC,CA4BtF"}
+{"version":3,"file":"printQueue.server.d.ts","sourceRoot":"","sources":["../../src/lib/printQueue.server.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAsB5D,KAAK,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE/B,mFAAmF;AACnF,MAAM,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAEpD;;;;GAIG;AACH,wBAAsB,gBAAgB,CAAC,EAAE,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAW1E;AAeD;;;;;GAKG;AACH,KAAK,WAAW,GAAG;IAAE,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC;IAAC,WAAW,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhE,yEAAyE;AACzE,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,CAAC;AAE1F,6EAA6E;AAC7E,MAAM,MAAM,YAAY,GAAG;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,CAAC;AAcnD,4EAA4E;AAC5E,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAI7D;AAkHD;;;GAGG;AACH,wBAAsB,cAAc,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA+BnF;AA+PD;;;;GAIG;AACH,wBAAsB,QAAQ,CAC5B,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,YAAY,GACtB,OAAO,CAAC,MAAM,CAAC,CA8IjB;AAGD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAY1D;AAmRD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,oFAAoF;AACpF,wBAAsB,eAAe,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,SAAI,GAAG,OAAO,CAAC,iBAAiB,CAAC,CA4BtF"}

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

@@ -416,26 +416,42 @@ async function zoekPrinter(db, job, layout) {
 }
 /** Haalt de logo's op die in de layout gebruikt worden, met tijdelijke URL. */
 async function logosVoor(db, layout) {
-    const logoId = layout?.config?.logo?.logoId ?? null;
-    if (!logoId)
+    const config = layout?.config ?? null;
+    const ids = new Set();
+    const documentLogo = config?.logo?.logoId;
+    if (documentLogo)
+        ids.add(String(documentLogo));
+    // Ook logo's die als blok in de ontwerper staan meenemen.
+    for (const sectie of Array.isArray(config?.sections) ? config.sections : []) {
+        const id = sectie?.opties?.logoId ?? sectie?.logoId;
+        if (id)
+            ids.add(String(id));
+    }
+    for (const blok of Array.isArray(config?.blokken) ? config.blokken : []) {
+        const id = blok?.opties?.logoId ?? blok?.logoId;
+        if (id)
+            ids.add(String(id));
+    }
+    if (!ids.size)
         return [];
     const { data } = await db
         .from("layout_logos")
         .select("id, naam, bestandspad, bestand_url")
-        .eq("id", logoId)
-        .maybeSingle();
-    const logo = data;
-    if (!logo)
-        return [];
-    let viewUrl = logo.bestand_url ?? null;
-    if (logo.bestandspad) {
-        const { data: sign } = await db.storage
-            .from("layout-logos")
-            .createSignedUrl(logo.bestandspad, 3600);
-        if (sign?.signedUrl)
-            viewUrl = sign.signedUrl;
-    }
-    return viewUrl ? [{ id: logo.id, naam: logo.naam, viewUrl }] : [];
+        .in("id", [...ids]);
+    const uit = [];
+    for (const logo of Array.isArray(data) ? data : []) {
+        let viewUrl = logo["bestand_url"] ?? null;
+        if (logo["bestandspad"]) {
+            const { data: sign } = await db.storage
+                .from("layout-logos")
+                .createSignedUrl(String(logo["bestandspad"]), 3600);
+            if (sign?.signedUrl)
+                viewUrl = sign.signedUrl;
+        }
+        if (viewUrl)
+            uit.push({ id: logo["id"], naam: logo["naam"], viewUrl });
+    }
+    return uit;
 }
 /**
  * Bouwt de HTML van de opdracht.