@flowselections/pick-schermen-kwekers 1.0.21 → 1.0.23

package/dist-lib/lib/layoutMaker/pakbonHtml.js

@@ -1,703 +0,0 @@
-// ============================================================================
-// 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, 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>` : "";
-}
-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) => [
-        k.breedte ? `width:${k.breedte}%` : "",
-        `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") {
-        // Vaste kolombreedtes zodat elke laag/kar exact onder dezelfde koppen uitlijnt,
-        // ook wanneer de koppen maar één keer worden getoond.
-        const zonder = kols.filter((k) => !k.breedte).length;
-        const gebruikt = kols.reduce((som, k) => som + (Number(k.breedte) || 0), 0);
-        const rest = zonder > 0 ? Math.max(0, 100 - gebruikt) / zonder : 0;
-        const colgroup = `<colgroup>${kols
-            .map((k) => `<col style="width:${Number(k.breedte) || rest || 100 / kols.length}%" />`)
-            .join("")}</colgroup>`;
-        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 ${weergave === "compact" ? "compact" : ""}">${colgroup}${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 rijen = producten
-        .map((p) => `<tr>${velden.map((v) => `<td class="onder">${esc(cel(p, v))}</td>`).join("")}</tr>`)
-        .join("");
-    return `<table class="regels">${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>`;
-}
-/** Verzamellijst met alle te picken fusten per fusttype. */
-function fustVerzamellijstHtml(order) {
-    const lijst = fustVerzamellijst(order?.karren);
-    if (!lijst.length)
-        return "";
-    const totaal = lijst.reduce((n, f) => n + f.aantal, 0);
-    const blokken = lijst
-        .map((f) => {
-        const kop = `<div class="sectitel" style="display:flex;justify-content:space-between"><span>${esc([f.fusttype, f.hoogte, f.belading].filter(Boolean).join(" · "))}</span><span>${f.aantal}× fust</span></div>`;
-        const rijen = f.producten
-            .map((pr) => `<tr><td class="onder">${esc(pr.artikelnummer)}</td><td class="onder">${esc(pr.artikelnaam)}</td><td class="onder">${esc(pr.potmaat)}</td><td class="onder">${esc(pr.kleur)}</td><td class="onder">${esc(pr.locatie)}</td><td class="onder">${esc(pr.fustsoort)}</td><td class="onder" style="text-align:right">${pr.planten_per_fust}</td><td class="onder" style="text-align:right">${pr.aantal}</td></tr>`)
-            .join("");
-        return `${kop}<table class="regels"><tr><th class="onder">Artikel</th><th class="onder">Omschrijving</th><th class="onder">Potmaat</th><th class="onder">Kleur</th><th class="onder">Locatie</th><th class="onder">Tray/fust</th><th class="onder" style="text-align:right">Pl./fust</th><th class="onder" style="text-align:right">Planten</th></tr>${rijen}</table>`;
-    })
-        .join("");
-    return `<div class="sectitel">Te verzamelen fusten — karindeling zelf bepalen</div>${blokken}<table class="regels"><tr><td style="font-weight:700">Totaal fusten</td><td style="font-weight:700;text-align:right">${totaal}</td></tr></table>`;
-}
-function karrenHtml(s, order, zoek) {
-    const modus = optS(s, "modus", "pagina");
-    if (modus === "geen")
-        return "";
-    if (optS(s, "pickmethode", "kar") === "fusten")
-        return blokFrame(s, fustVerzamellijstHtml(order));
-    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 "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 velden = lijst(s, "velden");
-            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 secties = arr(cfg.secties).filter((s) => sectieZichtbaar(s, ctx));
-    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-layout: fixed; }
-table.regels th, table.regels td { 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 });
-}