@flowselections/layout-maker 1.3.2

package/dist-lib/lib/pakbonHtml.js

@@ -0,0 +1,754 @@
+// ============================================================================
+// src/lib/pakbonHtml.ts — canonieke print-HTML van een pakbon
+// ----------------------------------------------------------------------------
+// Dit is de ENIGE plek waar een pakbon naar printbare HTML wordt vertaald.
+// Andere modules (bijv. het pickstation) mogen GEEN eigen pakbon-sjabloon meer
+// bevatten: zij roepen `renderPakbonDocument()` of `printPakbon()` aan met de
+// layoutconfiguratie en de echte ordergegevens. Zo tonen het live voorbeeld en
+// de afdruk altijd exact dezelfde secties — inclusief de orderregels.
+// ============================================================================
+import { DEMO_ORDER, conditieContext, groepeerIdentiekeKarren, groepeerIdentiekeLagen, karBundelTekst, fustVerzamellijst, pickMethode, productVeldBreedtes, sectieOnderdrukt, laagBundelTekst, leesPakbonConfig, sectieZichtbaar, sorteerProducten, totalen, vulVeldcodes, } from "./pakbonBuilder";
+import { haalPrintLogos } from "./logoLibrary";
+// --- kleine hulpjes ---------------------------------------------------------
+const arr = (v) => (Array.isArray(v) ? v : []);
+const opt = (s, key, fallback) => s.opties?.[key] ?? fallback;
+const optS = (s, key, fallback) => String(s.opties?.[key] ?? fallback);
+const lijst = (s, key) => Array.isArray(s.opties?.[key]) ? s.opties[key].map(String) : [];
+export function esc(v) {
+    return String(v ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+}
+const cel = (p, veld) => {
+    if (veld === "foto")
+        return "";
+    if (veld === "qrcode")
+        return "";
+    return String(p[veld] ?? "");
+};
+/**
+ * Vult ontbrekende onderdelen aan met veilige lege waarden, zodat een module
+ * die maar een deel van de gegevens heeft nooit een lege of stukke pakbon
+ * afdrukt.
+ */
+export function maakPakbonOrder(input) {
+    const bron = (input && typeof input === "object" ? input : {});
+    const groep = (naam, velden) => {
+        const b = (bron[naam] && typeof bron[naam] === "object" ? bron[naam] : {});
+        const out = {};
+        for (const v of velden)
+            out[v] = b[v] === undefined || b[v] === null ? "" : String(b[v]);
+        return out;
+    };
+    const karren = arr(bron["karren"]).map((k, i) => ({
+        karnummer: Number(k["karnummer"] ?? i + 1),
+        route: String(k["route"] ?? ""),
+        chauffeur: String(k["chauffeur"] ?? ""),
+        gewicht: String(k["gewicht"] ?? ""),
+        lagen: arr(k["lagen"]).map((l, j) => ({
+            laagnummer: Number(l["laagnummer"] ?? j + 1),
+            belading: String(l["belading"] ?? ""),
+            potmaat: String(l["potmaat"] ?? ""),
+            gewicht: String(l["gewicht"] ?? ""),
+            opmerking: String(l["opmerking"] ?? ""),
+            producten: arr(l["producten"]).map(normProduct),
+            fusten: arr(l["fusten"]).map((f) => ({
+                fusttype: String(f["fusttype"] ?? f["fustsoort"] ?? ""),
+                aantal: Number(f["aantal"] ?? 0) || 0,
+                hoogte: String(f["hoogte"] ?? ""),
+                belading: String(f["belading"] ?? ""),
+                barcode: String(f["barcode"] ?? ""),
+            })),
+        })),
+    }));
+    // Losse orderregels zonder karren: in één kar/laag zetten zodat elke
+    // sectie-instelling (orderregels, producten) gewoon werkt.
+    const losseRegels = arr(bron["producten"] ?? bron["regels"]).map(normProduct);
+    if (!karren.length && losseRegels.length) {
+        karren.push({
+            karnummer: 1,
+            route: "",
+            chauffeur: "",
+            gewicht: "",
+            lagen: [
+                {
+                    laagnummer: 1,
+                    belading: "",
+                    potmaat: "",
+                    gewicht: "",
+                    opmerking: "",
+                    producten: losseRegels,
+                    fusten: [],
+                },
+            ],
+        });
+    }
+    return {
+        order: groep("order", ["nummer", "datum", "leverdatum", "referentie", "opmerking"]),
+        bedrijf: groep("bedrijf", ["naam", "adres", "plaats", "telefoon", "email", "kvk", "btw"]),
+        klant: groep("klant", ["naam", "nummer", "contact", "referentie"]),
+        afleveradres: groep("afleveradres", ["naam", "adres", "plaats", "land"]),
+        factuuradres: groep("factuuradres", ["naam", "adres", "plaats", "land"]),
+        transport: groep("transport", ["transporteur", "route", "chauffeur", "track"]),
+        karren,
+    };
+}
+function normProduct(p) {
+    const aantal = Number(p["aantal"] ?? 0) || 0;
+    return {
+        artikelnummer: String(p["artikelnummer"] ?? p["artikelcode"] ?? ""),
+        artikelnaam: String(p["artikelnaam"] ?? p["naam"] ?? p["product_name"] ?? ""),
+        potmaat: String(p["potmaat"] ?? ""),
+        aantal,
+        belading: String(p["belading"] ?? ""),
+        barcode: String(p["barcode"] ?? ""),
+        opmerking: String(p["opmerking"] ?? ""),
+        locatie: String(p["locatie"] ?? ""),
+        gewicht: String(p["gewicht"] ?? ""),
+        productgroep: String(p["productgroep"] ?? ""),
+        kleur: String(p["kleur"] ?? ""),
+        fust_aantal: Number(p["fust_aantal"] ?? 0) || 0,
+        fustsoort: String(p["fustsoort"] ?? ""),
+        planten_per_fust: Number(p["planten_per_fust"] ?? 0) || 0,
+    };
+}
+// --- secties ----------------------------------------------------------------
+function blokFrame(s, inhoud) {
+    if (!inhoud)
+        return "";
+    const o = s.opties ?? {};
+    const breedte = Math.min(Math.max(Number(o["blok_breedte"] ?? 100), 5), 100);
+    const uitlijning = String(o["blok_uitlijning"] ?? "left");
+    const marge = Number(o["blok_marge"] ?? 0);
+    const padding = Number(o["blok_padding"] ?? 0);
+    const rand = !!o["blok_rand"];
+    const radius = Number(o["blok_radius"] ?? 0);
+    const schaal = Number(o["blok_tekstschaal"] ?? 100);
+    const stijl = [
+        "display:flow-root",
+        `width:${breedte}%`,
+        uitlijning === "right" || uitlijning === "center" ? "margin-left:auto" : "",
+        uitlijning === "left" || uitlijning === "center" ? "margin-right:auto" : "",
+        `margin-top:${marge}mm`,
+        `margin-bottom:${marge}mm`,
+        padding ? `padding:${padding}mm` : "",
+        o["blok_achtergrond"] ? `background:${String(o["blok_achtergrond"])}` : "",
+        rand ? `border:0.3mm solid ${String(o["blok_randkleur"] ?? "#e5e7eb")}` : "",
+        radius ? `border-radius:${radius}mm` : "",
+        schaal !== 100 ? `font-size:${schaal}%` : "",
+    ]
+        .filter(Boolean)
+        .join(";");
+    return `<div class="blok" style="${stijl}">${inhoud}</div>`;
+}
+function titelHtml(s) {
+    return s.titel ? `<div class="sectitel">${esc(s.titel)}</div>` : "";
+}
+// Vaste kolombreedtes: zorgt dat elke tabel (elke laag/kar) exact dezelfde
+// kolomuitlijning heeft, ook als de koppen maar één keer getoond worden.
+function kolBreedtes(kols) {
+    const opgegeven = kols.map((k) => (Number(k.breedte) > 0 ? Number(k.breedte) : 0));
+    const som = opgegeven.reduce((a, b) => a + b, 0);
+    const leeg = opgegeven.filter((b) => b === 0).length;
+    if (!leeg && som > 0)
+        return opgegeven.map((b) => (b / som) * 100);
+    const rest = Math.max(0, 100 - som);
+    const per = leeg ? rest / leeg : 0;
+    const ruw = opgegeven.map((b) => (b === 0 ? per : b));
+    const totaal = ruw.reduce((a, b) => a + b, 0) || 1;
+    return ruw.map((b) => (b / totaal) * 100);
+}
+function colgroupHtml(kols) {
+    const b = kolBreedtes(kols);
+    return `<colgroup>${b.map((w) => `<col style="width:${w.toFixed(4)}%">`).join("")}</colgroup>`;
+}
+function rij(label, waarde) {
+    if (waarde === null || waarde === undefined || waarde === "")
+        return "";
+    return `<div class="kv"><span class="k">${esc(label)}</span><span class="v">${esc(waarde)}</span></div>`;
+}
+function regelWeergave(producten, kolommen, weergave, toonKoppen, zebra, randen) {
+    const kols = kolommen.length ? kolommen : [];
+    if (!kols.length || !producten.length)
+        return "";
+    const kstijl = (k) => [
+        "",
+        `text-align:${k.uitlijning ?? "left"}`,
+        k.fontfamilie ? `font-family:${k.fontfamilie}` : "",
+        k.fontgrootte ? `font-size:${k.fontgrootte}pt` : "",
+        k.kleur ? `color:${k.kleur}` : "",
+        k.vet ? "font-weight:700" : "",
+        k.achtergrond ? `background:${k.achtergrond}` : "",
+    ]
+        .filter(Boolean)
+        .join(";");
+    if (weergave === "tabel" || weergave === "compact") {
+        const kop = toonKoppen
+            ? `<thead><tr>${kols
+                .map((k) => `<th style="${kstijl(k)}" class="${randen ? "rand" : "onder"}">${esc(k.label)}</th>`)
+                .join("")}</tr></thead>`
+            : "";
+        const body = producten
+            .map((p, i) => `<tr${zebra && i % 2 === 1 ? ' class="zebra"' : ""}>${kols
+            .map((k) => `<td style="${kstijl(k)}" class="${randen ? "rand" : "onder"}">${esc(cel(p, k.key))}</td>`)
+            .join("")}</tr>`)
+            .join("");
+        return `<table class="regels vast ${weergave === "compact" ? "compact" : ""}">${colgroupHtml(kols)}${kop}<tbody>${body}</tbody></table>`;
+    }
+    const items = producten
+        .map((p) => `<div class="regelrij">${kols
+        .map((k) => `<span style="${kstijl(k)}">${esc(cel(p, k.key))}</span>`)
+        .join("")}</div>`)
+        .join("");
+    return weergave === "naast" ? `<div class="tweekolom">${items}</div>` : `<div>${items}</div>`;
+}
+function groepeer(order, groepering, sortering) {
+    const alle = order.karren.flatMap((k) => k.lagen.flatMap((l) => l.producten.map((p) => ({ p, kar: k, laag: l }))));
+    const maak = (titel, items) => ({
+        titel,
+        producten: sorteerProducten(items, sortering),
+    });
+    if (groepering === "kar")
+        return order.karren.map((k) => maak(`Kar ${k.karnummer}`, k.lagen.flatMap((l) => l.producten)));
+    if (groepering === "laag") {
+        const map = new Map();
+        for (const r of alle) {
+            const t = `Kar ${r.kar.karnummer} · laag ${r.laag.laagnummer}`;
+            map.set(t, [...(map.get(t) ?? []), r.p]);
+        }
+        return [...map.entries()].map(([t, items]) => maak(t, items));
+    }
+    if (groepering === "productgroep") {
+        const map = new Map();
+        for (const r of alle)
+            map.set(r.p.productgroep, [...(map.get(r.p.productgroep) ?? []), r.p]);
+        return [...map.entries()].map(([t, items]) => maak(t, items));
+    }
+    if (groepering === "afleveradres")
+        return [maak(order.afleveradres.naam, alle.map((r) => r.p))];
+    if (groepering === "klant")
+        return [maak(order.klant.naam, alle.map((r) => r.p))];
+    return [maak("—", alle.map((r) => r.p))];
+}
+function fustTabel(velden, fusten, titel) {
+    if (!velden.length || !fusten.length)
+        return "";
+    const label = {
+        fusttype: "Fustsoort",
+        aantal: "Aantal",
+        hoogte: "Hoogte",
+        belading: "Belading",
+        barcode: "Barcode",
+    };
+    const kop = `<tr>${velden.map((v) => `<th class="onder">${esc(label[v] ?? v)}</th>`).join("")}</tr>`;
+    const rijen = fusten
+        .map((f) => `<tr>${velden
+        .map((v) => `<td class="onder">${esc(f[v] ?? "")}</td>`)
+        .join("")}</tr>`)
+        .join("");
+    return `${titel ? `<div class="sectitel">${esc(titel)}</div>` : ""}<table class="regels">${kop}${rijen}</table>`;
+}
+function productenHtml(sectie, laag, toonKop = true) {
+    const velden = lijst(sectie, "velden");
+    if (!velden.length)
+        return "";
+    let producten = sorteerProducten(laag.producten, optS(sectie, "sortering", "eigen"));
+    if (opt(sectie, "groeperen", false)) {
+        const map = new Map();
+        for (const p of producten) {
+            const b = map.get(p.artikelnummer);
+            if (b) {
+                b.aantal += p.aantal;
+                b.fust_aantal += p.fust_aantal;
+            }
+            else
+                map.set(p.artikelnummer, { ...p });
+        }
+        producten = [...map.values()];
+    }
+    if (!producten.length)
+        return "";
+    const label = (v) => v === "foto" ? "Foto" : v === "qrcode" ? "QR-code" : PRODUCT_LABELS[v] ?? v;
+    const weergave = optS(sectie, "weergave", "tabel");
+    if (weergave === "lijst") {
+        return `<ul class="plijst">${producten
+            .map((p) => `<li>${velden.map((v) => esc(cel(p, v))).filter(Boolean).join(" · ")}</li>`)
+            .join("")}</ul>`;
+    }
+    const kop = toonKop && opt(sectie, "toonKoppen", true) !== false
+        ? `<tr>${velden.map((v) => `<th class="onder">${esc(label(v))}</th>`).join("")}</tr>`
+        : "";
+    const breedtes = productVeldBreedtes(velden);
+    const colgroup = `<colgroup>${velden
+        .map((_, index) => `<col style="width:${(breedtes[index] ?? 0).toFixed(4)}%">`)
+        .join("")}</colgroup>`;
+    const rijen = producten
+        .map((p) => `<tr>${velden.map((v) => `<td class="onder">${esc(cel(p, v))}</td>`).join("")}</tr>`)
+        .join("");
+    return `<table class="regels vast">${colgroup}${kop}${rijen}</table>`;
+}
+const PRODUCT_LABELS = {
+    artikelnummer: "Artikelnr",
+    artikelnaam: "Artikel",
+    potmaat: "Potmaat",
+    aantal: "Aantal",
+    belading: "Belading",
+    barcode: "Barcode",
+    opmerking: "Opmerking",
+    locatie: "Locatie",
+    gewicht: "Gewicht",
+    productgroep: "Productgroep",
+    kleur: "Kleur",
+    fust_aantal: "Aantal fusten",
+    fustsoort: "Fustsoort",
+    planten_per_fust: "Planten per fust",
+};
+function karKop(s, kar, velden, bundelTekst = "") {
+    const scheiding = optS(s, "scheiding", "kop");
+    const tekst = optS(s, "koptekst", "KAR {kar}")
+        .replace(/\{kar\}/g, String(kar.karnummer))
+        .replace(/\{route\}/g, kar.route)
+        .replace(/\{chauffeur\}/g, kar.chauffeur)
+        .replace(/\{lagen\}/g, String(kar.lagen.length))
+        .replace(/\{producten\}/g, String(kar.lagen.reduce((n, l) => n + l.producten.length, 0)));
+    const info = [];
+    if (velden.includes("lagen"))
+        info.push(`${kar.lagen.length} lagen`);
+    if (velden.includes("producten"))
+        info.push(`${kar.lagen.reduce((n, l) => n + l.producten.reduce((m, p) => m + p.aantal, 0), 0)} producten`);
+    if (velden.includes("gewicht") && kar.gewicht)
+        info.push(kar.gewicht);
+    if (velden.includes("chauffeur") && kar.chauffeur)
+        info.push(kar.chauffeur);
+    if (velden.includes("route") && kar.route)
+        info.push(kar.route);
+    const toonNummer = velden.includes("karnummer");
+    if (!toonNummer && !info.length && !bundelTekst)
+        return "";
+    const groot = scheiding === "kop";
+    const gekleurd = scheiding === "kleur" || groot;
+    const stijl = [
+        gekleurd ? `background:${optS(s, "kleur", "#e8eef7")}` : "",
+        groot ? "font-size:117%;font-weight:700" : "font-weight:600",
+    ]
+        .filter(Boolean)
+        .join(";");
+    const links = [
+        toonNummer ? esc(tekst) : "",
+        bundelTekst ? `<span class="bundel">${esc(bundelTekst)}</span>` : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return `<div class="karkop" style="${stijl}"><span>${links}</span><span class="meta">${info
+        .map((t) => `<span>${esc(t)}</span>`)
+        .join("")}</span></div>`;
+}
+function laagKop(s, laag, velden, compact, bundelTekst = "") {
+    const tekst = optS(s, "koptekst", "Laag {laag}").replace(/\{laag\}/g, String(laag.laagnummer));
+    const info = [];
+    if (velden.includes("belading") && laag.belading)
+        info.push(`Belading ${laag.belading}`);
+    if (velden.includes("potmaat") && laag.potmaat)
+        info.push(laag.potmaat);
+    if (velden.includes("producten"))
+        info.push(`${laag.producten.reduce((n, p) => n + p.aantal, 0)} producten`);
+    if (velden.includes("fusten"))
+        info.push(`${laag.fusten.reduce((n, f) => n + f.aantal, 0)} fusten`);
+    if (velden.includes("gewicht") && laag.gewicht)
+        info.push(laag.gewicht);
+    if (velden.includes("opmerking") && laag.opmerking)
+        info.push(laag.opmerking);
+    if (!velden.includes("laagnummer") && !info.length && !bundelTekst)
+        return "";
+    return `<div class="laagkop${compact ? " compact" : ""}"><span>${velden.includes("laagnummer") ? esc(tekst) : ""}${bundelTekst ? ` <span class="bundel">${esc(bundelTekst)}</span>` : ""}</span><span class="meta">${info.map((t) => `<span>${esc(t)}</span>`).join("")}</span></div>`;
+}
+function bundelMelding(tekst) {
+    return `<div class="bundel">${esc(tekst)}</div>`;
+}
+function karBlok(s, kar, lagen, zoek, omkaderd, aantal = 1) {
+    // Bij samenvoegen van identieke karren vervalt het unieke karnummer.
+    const bundelt = opt(s, "bundel_identiek", true) !== false;
+    const velden = lijst(s, "velden").filter((v) => !(bundelt && (v === "karnummer" || v === "barcode" || v === "qrcode")));
+    const lagenSectie = zoek("lagen");
+    const productSectie = zoek("producten");
+    const fustSectie = zoek("fusten");
+    const lagenModus = lagenSectie ? optS(lagenSectie, "modus", "apart") : "geen";
+    let inhoud = karKop(s, kar, velden, karBundelTekst(aantal));
+    if (lagen.length && lagenSectie && lagenModus !== "geen") {
+        const lVelden = lijst(lagenSectie, "velden");
+        const toonProducten = lagenModus !== "nummer" && lagenModus !== "regel";
+        const bundelLagen = lagenModus === "gebundeld";
+        inhoud += groepeerIdentiekeLagen(lagen, bundelLagen)
+            .map(({ laag, aantal: laagAantal }, index) => {
+            let l = laagKop(lagenSectie, laag, lVelden, lagenModus === "regel", laagAantal > 1 ? laagBundelTekst(laagAantal) : "");
+            if (toonProducten && productSectie)
+                l += productenHtml(productSectie, laag, index === 0 || opt(productSectie, "kop_eenmalig", true) === false);
+            if (fustSectie && ["laag", "product"].includes(optS(fustSectie, "modus", "totaal")))
+                l += fustTabel(lijst(fustSectie, "velden"), laag.fusten, `Fusten laag ${laag.laagnummer}`);
+            return `<div class="laag">${l}</div>`;
+        })
+            .join("");
+    }
+    if (fustSectie && optS(fustSectie, "modus", "totaal") === "kar")
+        inhoud += fustTabel(lijst(fustSectie, "velden"), lagen.flatMap((l) => l.fusten), `Fusten kar ${kar.karnummer}`);
+    return `<div class="karblok${omkaderd ? " omkaderd" : ""}">${inhoud}</div>`;
+}
+const FUST_KOLOM_LABELS = {
+    artikelnummer: "Artikel",
+    artikelnaam: "Omschrijving",
+    potmaat: "Potmaat",
+    kleur: "Kleur",
+    productgroep: "Productgroep",
+    locatie: "Locatie",
+    fustsoort: "Tray/fust",
+    planten_per_fust: "Pl./fust",
+    aantal: "Planten",
+};
+const FUST_RECHTS = new Set(["planten_per_fust", "aantal"]);
+/** Verzamellijst met alle te picken fusten per fusttype. */
+function fustVerzamellijstHtml(order, s) {
+    const groepen = fustVerzamellijst(order?.karren);
+    if (!groepen.length)
+        return "";
+    const gekozen = s ? lijst(s, "velden") : [];
+    const kolommen = (gekozen.length ? gekozen : Object.keys(FUST_KOLOM_LABELS)).filter((k) => FUST_KOLOM_LABELS[k]);
+    const kopTekst = s
+        ? String(s.opties?.["kop"] ?? "Te verzamelen fusten — karindeling zelf bepalen")
+        : "Te verzamelen fusten — karindeling zelf bepalen";
+    const toonHoogte = s ? opt(s, "toonFusthoogte", true) !== false : true;
+    const toonTotaal = s ? opt(s, "toonTotaal", true) !== false : true;
+    const totaal = groepen.reduce((n, f) => n + f.aantal, 0);
+    const blokken = groepen
+        .map((f) => {
+        const kop = `<div class="sectitel" style="display:flex;justify-content:space-between"><span>${esc([f.fusttype, toonHoogte ? f.hoogte : "", toonHoogte ? f.belading : ""]
+            .filter(Boolean)
+            .join(" · "))}</span><span>${f.aantal}× fust</span></div>`;
+        if (!kolommen.length)
+            return kop;
+        const koppen = kolommen
+            .map((k) => `<th class="onder"${FUST_RECHTS.has(k) ? ' style="text-align:right"' : ""}>${esc(FUST_KOLOM_LABELS[k])}</th>`)
+            .join("");
+        const rijen = f.producten
+            .map((pr) => `<tr>${kolommen
+            .map((k) => `<td class="onder"${FUST_RECHTS.has(k) ? ' style="text-align:right"' : ""}>${esc(String(pr[k] ?? ""))}</td>`)
+            .join("")}</tr>`)
+            .join("");
+        return `${kop}<table class="regels"><tr>${koppen}</tr>${rijen}</table>`;
+    })
+        .join("");
+    const totaalHtml = toonTotaal
+        ? `<table class="regels"><tr><td style="font-weight:700">Totaal fusten</td><td style="font-weight:700;text-align:right">${totaal}</td></tr></table>`
+        : "";
+    return `${kopTekst ? `<div class="sectitel">${esc(kopTekst)}</div>` : ""}${blokken}${totaalHtml}`;
+}
+function karrenHtml(s, order, zoek) {
+    const modus = optS(s, "modus", "pagina");
+    if (modus === "geen")
+        return "";
+    const scheiding = optS(s, "scheiding", "kop");
+    const lagenSectie = zoek("lagen");
+    const lagenModus = lagenSectie ? optS(lagenSectie, "modus", "apart") : "geen";
+    const perPagina = modus === "pagina" || scheiding === "pagina";
+    const perLaagPagina = modus !== "nummer" && lagenModus === "pagina";
+    const bundelKarren = opt(s, "bundel_identiek", true) !== false;
+    const karGroepen = groepeerIdentiekeKarren(order.karren, bundelKarren);
+    if (modus === "naast") {
+        return blokFrame(s, `<div class="tweekolom">${karGroepen
+            .map((g) => karBlok(s, g.kar, g.kar.lagen, zoek, false, g.aantal))
+            .join("")}</div>`);
+    }
+    const delen = [];
+    karGroepen.forEach((groep, i) => {
+        const kar = groep.kar;
+        const lagen = modus === "nummer" ? [] : kar.lagen;
+        if (perLaagPagina && lagen.length) {
+            const laagGroepen = groepeerIdentiekeLagen(lagen, String(lagenModus) === "gebundeld");
+            laagGroepen.forEach((lg, j) => {
+                const breek = i > 0 || j > 0;
+                delen.push(`<div class="${breek ? "breekvoor" : ""}">${blokFrame(s, karBlok(s, kar, [lg.laag], zoek, modus === "blok" || modus === "passend", groep.aantal))}</div>`);
+            });
+            return;
+        }
+        const breek = i > 0 && perPagina;
+        const scheider = i > 0 && !perPagina ? scheidingHtml(scheiding) : "";
+        delen.push(`<div class="${breek ? "breekvoor" : ""} ${modus === "passend" ? "heelhouden" : ""}">${scheider}${blokFrame(s, karBlok(s, kar, lagen, zoek, modus === "blok" || modus === "passend", groep.aantal))}</div>`);
+    });
+    return delen.join("");
+}
+function scheidingHtml(modus) {
+    if (modus === "lijn")
+        return `<div class="lijn"></div>`;
+    if (modus === "balk")
+        return `<div class="balk"></div>`;
+    return "";
+}
+function sectieHtml(s, order, zoek, opties) {
+    switch (s.type) {
+        case "logo": {
+            const logoId = typeof s.opties?.["logoId"] === "string" ? String(s.opties["logoId"]) : null;
+            // Geen eigen logo gekozen? Dan niets tonen — het documentlogo staat al bovenaan.
+            if (!logoId)
+                return "";
+            const logos = arr(opties.logos);
+            const logo = logos.find((l) => l.id === logoId);
+            if (!logo?.viewUrl)
+                return "";
+            const align = optS(s, "uitlijning", "left");
+            return `<div style="text-align:${esc(align)}"><img src="${esc(logo.viewUrl)}" alt="${esc(logo.naam ?? "")}" style="height:${Number(opt(s, "hoogte", 18))}mm;object-fit:contain" /></div>`;
+        }
+        case "bedrijfsgegevens":
+            return (titelHtml(s) +
+                [
+                    opt(s, "toonNaam", true) ? `<div class="vet">${esc(order.bedrijf.naam)}</div>` : "",
+                    opt(s, "toonAdres", true)
+                        ? `<div>${esc([order.bedrijf.adres, order.bedrijf.plaats].filter(Boolean).join(" · "))}</div>`
+                        : "",
+                    opt(s, "toonContact", true)
+                        ? `<div>${esc([order.bedrijf.telefoon, order.bedrijf.email].filter(Boolean).join(" · "))}</div>`
+                        : "",
+                    opt(s, "toonKvk", false)
+                        ? `<div>${esc([order.bedrijf.kvk, order.bedrijf.btw].filter(Boolean).join(" · "))}</div>`
+                        : "",
+                ].join(""));
+        case "klantgegevens":
+            return (titelHtml(s) +
+                `<div class="vet">${esc(order.klant.naam)}</div>` +
+                (opt(s, "toonKlantnummer", true) ? rij("Klantnummer", order.klant.nummer) : "") +
+                (opt(s, "toonContact", true) ? rij("Contact", order.klant.contact) : "") +
+                (opt(s, "toonReferentie", true) ? rij("Referentie", order.klant.referentie) : ""));
+        case "afleveradres":
+        case "factuuradres": {
+            const a = s.type === "afleveradres" ? order.afleveradres : order.factuuradres;
+            return (titelHtml(s) +
+                `<div class="vet">${esc(a.naam)}</div><div>${esc(a.adres)}</div><div>${esc(a.plaats)}</div>` +
+                (opt(s, "toonLand", true) ? `<div>${esc(a.land)}</div>` : ""));
+        }
+        case "orderinformatie":
+            return (titelHtml(s) +
+                `<div class="grid2">${[
+                    opt(s, "toonOrdernummer", true) ? rij("Ordernummer", order.order.nummer) : "",
+                    opt(s, "toonDatum", true) ? rij("Orderdatum", order.order.datum) : "",
+                    opt(s, "toonLeverdatum", true) ? rij("Leverdatum", order.order.leverdatum) : "",
+                    opt(s, "toonReferentie", true) ? rij("Referentie", order.order.referentie) : "",
+                ].join("")}</div>`);
+        case "transportinformatie":
+            return (titelHtml(s) +
+                `<div class="grid2">${[
+                    opt(s, "toonTransporteur", true) ? rij("Transporteur", order.transport.transporteur) : "",
+                    opt(s, "toonRoute", true) ? rij("Route", order.transport.route) : "",
+                    opt(s, "toonChauffeur", false) ? rij("Chauffeur", order.transport.chauffeur) : "",
+                    opt(s, "toonTrack", false) ? rij("Track & trace", order.transport.track) : "",
+                ].join("")}</div>`);
+        case "opmerkingen":
+            if (!order.order.opmerking)
+                return "";
+            return `<div class="${opt(s, "kader", true) ? "kader" : ""}"><span class="vet">Opmerkingen: </span>${esc(order.order.opmerking)}</div>`;
+        case "orderregels": {
+            const kolommen = arr(s.kolommen);
+            const groepen = groepeer(order, optS(s, "groepering", "order"), optS(s, "sortering", "eigen"));
+            const body = groepen
+                .map((g) => {
+                const tabel = regelWeergave(g.producten, kolommen, optS(s, "weergave", "tabel"), opt(s, "toonKoppen", true) !== false, !!opt(s, "zebra", false), opt(s, "randen", true) !== false);
+                if (!tabel)
+                    return "";
+                return `<div class="groep">${g.titel !== "—" ? `<div class="vet">${esc(g.titel)}</div>` : ""}${tabel}</div>`;
+            })
+                .join("");
+            return titelHtml(s) + body;
+        }
+        case "pickmethode":
+            if (optS(s, "methode", "kar") !== "fusten")
+                return "";
+            return fustVerzamellijstHtml(order, s);
+        case "karren":
+        case "lagen":
+        case "producten":
+            return ""; // apart afgehandeld
+        case "fusten": {
+            if (optS(s, "modus", "totaal") !== "totaal")
+                return "";
+            const alle = order.karren.flatMap((k) => k.lagen.flatMap((l) => l.fusten));
+            return fustTabel(lijst(s, "velden"), alle, s.titel);
+        }
+        case "totalen": {
+            const t = totalen(order);
+            const perFust = optS(zoek("pickmethode") ?? s, "methode", "kar") === "fusten";
+            const velden = lijst(s, "velden").filter((v) => !(perFust && (v === "karren" || v === "lagen")));
+            if (!velden.length)
+                return "";
+            const rechts = optS(s, "uitlijning", "right") === "right";
+            return `<div class="totalen" style="justify-content:${rechts ? "flex-end" : "flex-start"}">${velden
+                .map((v) => `<span>${esc(t[v] ?? v)}</span>`)
+                .join("")}</div>`;
+        }
+        case "handtekening":
+            return (`<div class="handtekening">${opt(s, "label", "") ? `<div class="sectitel">${esc(opt(s, "label", ""))}</div>` : ""}` +
+                (opt(s, "toonNaam", true) ? `<div class="lijnveld">Naam</div>` : "") +
+                (opt(s, "toonDatum", true) ? `<div class="lijnveld">Datum</div>` : "") +
+                `<div class="lijnveld hoog"></div></div>`);
+        case "tekstblok":
+            return `<div class="${opt(s, "kader", false) ? "kader" : ""}" style="font-size:${Number(opt(s, "fontgrootte", 9))}pt">${esc(vulVeldcodes(optS(s, "tekst", ""), order))}</div>`;
+        case "qrcode":
+            return `<div><div class="qr" style="width:${Number(opt(s, "grootte", 25))}mm;height:${Number(opt(s, "grootte", 25))}mm"></div><div class="klein">${esc(vulVeldcodes(optS(s, "waarde", ""), order))}</div></div>`;
+        case "barcode":
+            return `<div><div class="streepjes" style="height:${Number(opt(s, "hoogte", 15))}mm"></div><div>${esc(vulVeldcodes(optS(s, "waarde", ""), order))}</div></div>`;
+        case "afbeelding": {
+            const url = optS(s, "url", "");
+            return url
+                ? `<img src="${esc(url)}" alt="${esc(s.titel)}" style="height:${Number(opt(s, "hoogte", 25))}mm" />`
+                : "";
+        }
+        default:
+            return "";
+    }
+}
+// --- publieke API -----------------------------------------------------------
+/** Bouwt alleen de inhoud (zonder <html>-wrapper) van de pakbon. */
+export function renderPakbonBody(config, order, opties = {}) {
+    const cfg = leesPakbonConfig(config);
+    const ctx = conditieContext(order);
+    const alleSecties = arr(cfg.secties);
+    const methode = pickMethode(alleSecties);
+    const secties = alleSecties.filter((s) => sectieZichtbaar(s, ctx) && !sectieOnderdrukt(s.type, methode));
+    const zoek = (t) => secties.find((s) => s.type === t);
+    const opts = { ...opties, logoId: opties.logoId ?? cfg.logo?.logoId ?? null };
+    const kop = documentLogoHtml(cfg.logo, opts);
+    const totalenSectie = zoek("totalen");
+    const totalenElkePagina = !!totalenSectie && opt(totalenSectie, "elke_pagina", false) === true;
+    const inhoud = secties
+        .filter((s) => !(s.type === "totalen" && totalenElkePagina))
+        .map((s) => s.type === "karren" ? karrenHtml(s, order, zoek) : blokFrame(s, sectieHtml(s, order, zoek, opts)))
+        .join("");
+    const voet = totalenElkePagina && totalenSectie
+        ? `<div class="paginavoet">${sectieHtml(totalenSectie, order, zoek, opts)}</div>`
+        : "";
+    return kop + inhoud + voet;
+}
+/** Het documentlogo bovenaan de pakbon. */
+function documentLogoHtml(logoCfg, opties) {
+    if (!logoCfg?.logoId)
+        return "";
+    const logos = arr(opties.logos);
+    const logo = logos.find((l) => l.id === logoCfg.logoId);
+    if (!logo?.viewUrl)
+        return "";
+    return `<div class="blok" style="text-align:${esc(logoCfg.uitlijning ?? "left")}"><img src="${esc(logo.viewUrl)}" alt="${esc(logo.naam ?? "")}" style="height:${Number(logoCfg.hoogte ?? 18)}mm;object-fit:contain" /></div>`;
+}
+/** Bouwt een volledig printbaar HTML-document van de pakbon. */
+export function renderPakbonDocument(config, order, opties = {}) {
+    const b = opties.breedteMm ?? 210;
+    const h = opties.hoogteMm ?? 297;
+    const marge = opties.margeMm ?? 12;
+    const font = opties.lettertype ?? 'Arial, Helvetica, "Segoe UI", sans-serif';
+    const grootte = opties.lettergrootte ?? 8.5;
+    const body = renderPakbonBody(config, order, opties);
+    return `<!doctype html><html lang="nl"><head><meta charset="utf-8" />
+<title>${esc(opties.titel ?? "Pakbon")}</title>
+<style>
+@page { size: ${b}mm ${h}mm; margin: ${marge}mm; }
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body { font-family: ${font}; font-size: ${grootte}pt; color: #111827; line-height: 1.35; }
+.blok { margin-bottom: 2mm; }
+.sectitel { font-size: 90%; font-weight: 600; text-transform: uppercase; color: #6b7280; margin-bottom: 0.6mm; }
+.vet { font-weight: 600; }
+.kv { display: flex; justify-content: space-between; gap: 3mm; }
+.kv .k { color: #6b7280; }
+.kv .v { font-weight: 500; }
+.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6mm; }
+.kader { border: 0.25mm solid #d1d5db; border-radius: 1mm; padding: 1.5mm; }
+table.regels { width: 100%; border-collapse: collapse; }
+table.regels.vast { table-layout: fixed; }
+table.regels.vast td, table.regels.vast th { overflow-wrap: anywhere; }
+table.regels th, table.regels td { padding: 0.7mm 1mm; vertical-align: top; }
+table.regels th { font-size: 90%; text-transform: uppercase; color: #6b7280; font-weight: 600; text-align: left; }
+.rand { border: 0.2mm solid #d1d5db; }
+.onder { border-bottom: 0.2mm solid #d1d5db; }
+table.regels.compact th, table.regels.compact td { padding: 0.3mm 0.8mm; }
+tr.zebra td { background: #f3f4f6; }
+.plijst { margin: 0; padding-left: 4mm; }
+.groep { margin-bottom: 1.5mm; }
+.regelrij { display: flex; gap: 2mm; }
+.tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
+.karblok { margin-bottom: 2mm; }
+.karblok.omkaderd { border: 0.25mm solid #d1d5db; border-radius: 1mm; padding: 1.5mm; }
+.karkop { display: flex; justify-content: space-between; align-items: center; padding: 0.8mm 1.5mm; border-radius: 1mm; margin-bottom: 1mm; }
+.bundel { display: inline-block; border: 0.3mm dashed #6b7280; border-radius: 1mm; padding: 0.4mm 1.5mm; margin-bottom: 1mm; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2mm; font-size: 90%; }
+.laag { margin-bottom: 1.5mm; }
+.laagkop { display: flex; justify-content: space-between; font-weight: 500; border-bottom: 0.2mm solid #d1d5db; padding-bottom: 0.4mm; margin-bottom: 0.6mm; }
+.laagkop.compact { border-bottom: none; }
+.meta { display: flex; gap: 3mm; font-size: 88%; font-weight: 400; color: #4b5563; }
+.totalen { display: flex; flex-wrap: wrap; gap: 5mm; border-top: 0.25mm solid #d1d5db; padding-top: 1.2mm; font-weight: 500; }
+.paginavoet { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; }
+.handtekening { margin-top: 3mm; }
+.lijnveld { margin-top: 4mm; border-bottom: 0.25mm solid #6b7280; padding-bottom: 3mm; }
+.lijnveld.hoog { padding-bottom: 10mm; }
+.lijn { border-top: 0.25mm solid #d1d5db; margin: 1.5mm 0; }
+.balk { height: 1mm; background: #374151; margin: 1.5mm 0; }
+.qr { border: 0.25mm dashed #9ca3af; }
+.streepjes { width: 45mm; background: repeating-linear-gradient(to right, #111827 0 2px, transparent 2px 5px); }
+.klein { font-size: 85%; color: #6b7280; }
+.breekvoor { break-before: page; page-break-before: always; }
+.heelhouden { break-inside: avoid; page-break-inside: avoid; }
+img { max-width: 100%; }
+</style></head>
+<body>${body}</body></html>`;
+}
+/** Handig voor testen: het document met de voorbeeldgegevens. */
+export function voorbeeldPakbonOrder() {
+    return DEMO_ORDER;
+}
+/**
+ * Opent het printvenster met de pakbon. Andere modules hoeven hiervoor niets
+ * zelf te bouwen: layoutconfiguratie + ordergegevens erin, afdruk eruit.
+ */
+export function printPakbon(config, order, opties = {}) {
+    if (typeof window === "undefined")
+        return;
+    const html = renderPakbonDocument(config, order, opties);
+    const frame = document.createElement("iframe");
+    frame.setAttribute("aria-hidden", "true");
+    frame.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0";
+    document.body.appendChild(frame);
+    const doc = frame.contentDocument;
+    if (!doc) {
+        frame.remove();
+        return;
+    }
+    doc.open();
+    doc.write(html);
+    doc.close();
+    const start = () => {
+        frame.contentWindow?.focus();
+        frame.contentWindow?.print();
+        window.setTimeout(() => frame.remove(), 60000);
+    };
+    // Wachten tot afbeeldingen (logo's) geladen zijn, anders drukt de browser
+    // een pakbon af zonder logo.
+    const wachtOpAfbeeldingen = async () => {
+        const imgs = Array.from(doc.images ?? []);
+        await Promise.all(imgs.map((img) => img.complete
+            ? Promise.resolve()
+            : new Promise((res) => {
+                img.onload = () => res();
+                img.onerror = () => res();
+            })));
+        start();
+    };
+    window.setTimeout(() => void wachtOpAfbeeldingen(), 200);
+}
+/**
+ * Zelfde als `printPakbon`, maar haalt de logo's zelf uit de centrale Logo
+ * Bibliotheek en bedt ze in. Andere modules hoeven zo niets over logo's te
+ * weten: het documentlogo verschijnt automatisch op de afdruk.
+ */
+export async function printPakbonMetLogos(config, order, opties = {}) {
+    let logos = opties.logos;
+    if (!Array.isArray(logos) || logos.length === 0) {
+        try {
+            logos = await haalPrintLogos();
+        }
+        catch {
+            logos = [];
+        }
+    }
+    printPakbon(config, order, { ...opties, logos });
+}