@flowselections/layout-maker 1.3.2

package/dist-lib/components/PakbonPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PakbonPreview.d.ts","sourceRoot":"","sources":["../../src/components/PakbonPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAoBL,KAAK,YAAY,EAEjB,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAS9B,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAe,EACf,QAAc,GACf,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,+BAgFA;AAsKD,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAmCA"}

package/dist-lib/components/PakbonPreview.js

@@ -0,0 +1,423 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { PaginaDocument } from "./PaginaDocument";
+import { useLogos } from "../lib/logoLibrary";
+import { DEMO_ORDER, conditieContext, groepeerIdentiekeKarren, groepeerIdentiekeLagen, karBundelTekst, fustVerzamellijst, pickMethode, productVeldBreedtes, sectieOnderdrukt, kolomLabel, laagBundelTekst, sectieZichtbaar, sorteerProducten, totalen, vulVeldcodes, } from "../lib/pakbonBuilder";
+export function PakbonPreview({ config, breedteMm = 210, hoogteMm = 297, }) {
+    const order = DEMO_ORDER;
+    const ctx = conditieContext(order);
+    const alleSecties = Array.isArray(config?.secties) ? config.secties : [];
+    const methode = pickMethode(alleSecties);
+    const secties = alleSecties.filter((s) => sectieZichtbaar(s, ctx) && !sectieOnderdrukt(s.type, methode));
+    const zoek = (type) => secties.find((s) => s.type === type);
+    const segmenten = [];
+    if (config?.logo?.logoId) {
+        segmenten.push({
+            key: "documentlogo",
+            node: (_jsx(DocumentLogo, { logoId: config.logo.logoId, hoogte: config.logo.hoogte ?? 18, uitlijning: config.logo.uitlijning ?? "left" })),
+        });
+    }
+    const totalenSectie = zoek("totalen");
+    const totalenElkePagina = totalenSectie
+        ? opt(totalenSectie, "elke_pagina", false) === true
+        : false;
+    const toonPaginanummer = totalenSectie
+        ? opt(totalenSectie, "toon_paginanummer", false) === true
+        : false;
+    for (const s of secties) {
+        if (s.type === "karren") {
+            segmenten.push(...karSegmenten(s, order, zoek));
+        }
+        else if (s.type === "totalen" && (totalenElkePagina || toonPaginanummer)) {
+            // wordt als voettekst onder elke pagina getoond
+        }
+        else {
+            segmenten.push({
+                key: s.id,
+                node: (_jsx(BlokFrame, { sectie: s, children: _jsx(SectieView, { sectie: s, order: order, zoek: zoek }) })),
+            });
+        }
+    }
+    const voet = totalenSectie && (totalenElkePagina || toonPaginanummer)
+        ? (pagina, totaalPaginas) => (_jsxs("div", { className: "space-y-1", children: [totalenElkePagina && (_jsx(BlokFrame, { sectie: totalenSectie, children: _jsx(SectieView, { sectie: totalenSectie, order: order, zoek: zoek }) })), toonPaginanummer && (_jsxs("div", { className: "text-right text-[9px] text-neutral-500", children: ["Pagina ", pagina, " van ", totaalPaginas] }))] }))
+        : undefined;
+    return (_jsx(PaginaDocument, { breedteMm: breedteMm, hoogteMm: hoogteMm, leeg: "Nog geen zichtbare secties.", voet: voet, items: segmenten.map((seg) => ({
+            id: seg.key,
+            node: seg.node,
+            breakBefore: seg.breakBefore,
+        })) }));
+}
+/** Bouwt de segmenten voor de karrensectie, inclusief pagina-afbrekingen. */
+function karSegmenten(s, order, zoek) {
+    const modus = optS(s, "modus", "pagina");
+    if (modus === "geen")
+        return [];
+    const scheiding = optS(s, "scheiding", "kop");
+    const lagenSectie = zoek("lagen");
+    const productSectie = zoek("producten");
+    const fustSectie = zoek("fusten");
+    const nieuwePaginaPerKar = modus === "pagina" || scheiding === "pagina";
+    const lagenModus = lagenSectie ? optS(lagenSectie, "modus", "apart") : "geen";
+    const nieuwePaginaPerLaag = modus !== "nummer" && lagenModus === "pagina";
+    const wrap = (node) => _jsx(BlokFrame, { sectie: s, children: node });
+    const bundelKarren = opt(s, "bundel_identiek", true) !== false;
+    // Bij samenvoegen staat er geen uniek karnummer meer op de kar.
+    const velden = lijst(s, "velden").filter((v) => !(bundelKarren && (v === "karnummer" || v === "barcode" || v === "qrcode")));
+    const karGroepen = groepeerIdentiekeKarren(order.karren, bundelKarren);
+    if (modus === "naast") {
+        return [
+            {
+                key: s.id,
+                node: wrap(_jsx("div", { className: "grid grid-cols-2 gap-3", children: karGroepen.map((g) => (_jsx(KarBlok, { sectie: s, kar: g.kar, aantal: g.aantal, velden: velden, lagen: g.kar.lagen, lagenSectie: lagenSectie, productSectie: productSectie, fustSectie: fustSectie, omkaderd: false }, g.kar.karnummer))) })),
+            },
+        ];
+    }
+    const segmenten = [];
+    karGroepen.forEach((groep, i) => {
+        const kar = groep.kar;
+        const lagenVanKar = modus === "nummer" ? [] : kar.lagen;
+        if (nieuwePaginaPerLaag && lagenVanKar.length > 0) {
+            const laagGroepen = groepeerIdentiekeLagen(lagenVanKar, String(lagenModus) === "gebundeld");
+            laagGroepen.forEach((lg, j) => {
+                segmenten.push({
+                    key: `${s.id}-${kar.karnummer}-${lg.laag.laagnummer}`,
+                    breakBefore: i > 0 || j > 0,
+                    node: wrap(_jsx(KarBlok, { sectie: s, kar: kar, aantal: groep.aantal, velden: velden, lagen: [lg.laag], lagenSectie: lagenSectie, productSectie: productSectie, fustSectie: fustSectie, omkaderd: modus === "blok" || modus === "passend" })),
+                });
+            });
+            return;
+        }
+        segmenten.push({
+            key: `${s.id}-${kar.karnummer}`,
+            breakBefore: i > 0 && nieuwePaginaPerKar,
+            node: wrap(_jsxs("div", { className: "space-y-2", children: [i > 0 && !nieuwePaginaPerKar && _jsx(Scheiding, { modus: scheiding }), _jsx(KarBlok, { sectie: s, kar: kar, aantal: groep.aantal, velden: velden, lagen: lagenVanKar, lagenSectie: lagenSectie, productSectie: productSectie, fustSectie: fustSectie, omkaderd: modus === "blok" || modus === "passend" })] })),
+        });
+    });
+    return segmenten;
+}
+/** Melding boven een gebundelde kar of laag. */
+function BundelMelding({ tekst }) {
+    return (_jsx("div", { className: "rounded border border-dashed px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide", children: tekst }));
+}
+function KarBlok({ sectie, kar, velden, lagen, lagenSectie, productSectie, fustSectie, omkaderd, aantal = 1, }) {
+    return (_jsxs("div", { className: `space-y-2 ${omkaderd ? "rounded border p-2" : ""}`, children: [_jsx(KarKop, { sectie: sectie, kar: kar, velden: velden, bundelTekst: karBundelTekst(aantal) }), lagen.length > 0 && lagenSectie && (_jsx(LagenView, { sectie: lagenSectie, lagen: lagen, productSectie: productSectie, fustSectie: fustSectie })), fustSectie && optS(fustSectie, "modus", "totaal") === "kar" && (_jsx(FustTabel, { velden: lijst(fustSectie, "velden"), fusten: lagen.flatMap((l) => l.fusten), titel: `Fusten kar ${kar.karnummer}` }))] }));
+}
+/** Losse weergave van één blok — gebruikt door de blokontwerper. */
+export function PakbonSectiePreview({ sectie, config, breedteMm, }) {
+    const order = DEMO_ORDER;
+    const alle = Array.isArray(config?.secties) ? config.secties : [];
+    const zoek = (type) => alle.find((s) => s.type === type);
+    const segmenten = sectie.type === "karren" ? karSegmenten(sectie, order, zoek) : null;
+    return (_jsx("div", { className: "mx-auto bg-background p-4 text-[10px] leading-snug text-foreground shadow-sm", style: breedteMm ? { width: `${breedteMm}mm` } : undefined, children: segmenten ? (_jsxs("div", { className: "space-y-3", children: [segmenten.map((seg, i) => (_jsxs("div", { className: "space-y-1", children: [seg.breakBefore && (_jsx("div", { className: "border-t-2 border-dashed pt-1 text-center text-[8px] uppercase text-muted-foreground", children: "Nieuwe pagina" })), seg.node, i === segmenten.length - 1 && null] }, seg.key))), segmenten.length === 0 && (_jsx("p", { className: "text-muted-foreground", children: "Deze sectie is uitgeschakeld." }))] })) : (_jsx(BlokFrame, { sectie: sectie, children: _jsx(SectieView, { sectie: sectie, order: order, zoek: zoek }) })) }));
+}
+/** Kaderinstellingen (breedte, uitlijning, marges, achtergrond, rand) per blok. */
+function BlokFrame({ sectie, children }) {
+    const o = sectie.opties ?? {};
+    const breedte = Number(o.blok_breedte ?? 100);
+    const uitlijning = String(o.blok_uitlijning ?? "left");
+    const marge = Number(o.blok_marge ?? 0);
+    const padding = Number(o.blok_padding ?? 0);
+    const achtergrond = o.blok_achtergrond ? String(o.blok_achtergrond) : undefined;
+    const randKleur = o.blok_randkleur ? String(o.blok_randkleur) : "#e5e7eb";
+    const rand = !!o.blok_rand;
+    const radius = Number(o.blok_radius ?? 0);
+    const schaal = Number(o.blok_tekstschaal ?? 100);
+    return (_jsx("div", { style: {
+            display: "flow-root",
+            width: `${Math.min(Math.max(breedte, 5), 100)}%`,
+            marginLeft: uitlijning === "right" ? "auto" : uitlijning === "center" ? "auto" : undefined,
+            marginRight: uitlijning === "left" ? "auto" : uitlijning === "center" ? "auto" : undefined,
+            marginTop: `${marge}mm`,
+            marginBottom: `${marge}mm`,
+            padding: padding ? `${padding}mm` : undefined,
+            background: achtergrond,
+            border: rand ? `0.3mm solid ${randKleur}` : undefined,
+            borderRadius: radius ? `${radius}mm` : undefined,
+            fontSize: schaal !== 100 ? `${(10 * schaal) / 100}px` : undefined,
+        }, children: children }));
+}
+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] : [];
+function Blok({ titel, children }) {
+    return (_jsxs("div", { className: "space-y-1", children: [titel && _jsx("div", { className: "text-[9px] font-semibold uppercase text-muted-foreground", children: titel }), children] }));
+}
+function SectieView({ sectie, order, zoek, }) {
+    const s = sectie;
+    switch (s.type) {
+        case "logo":
+            return _jsx(LogoSectie, { sectie: s });
+        case "bedrijfsgegevens":
+            return (_jsxs(Blok, { titel: s.titel, children: [opt(s, "toonNaam", true) && _jsx("div", { className: "font-semibold", children: order.bedrijf.naam }), opt(s, "toonAdres", true) && (_jsxs("div", { children: [order.bedrijf.adres, " \u00B7 ", order.bedrijf.plaats] })), opt(s, "toonContact", true) && (_jsxs("div", { children: [order.bedrijf.telefoon, " \u00B7 ", order.bedrijf.email] })), opt(s, "toonKvk", false) && (_jsxs("div", { children: [order.bedrijf.kvk, " \u00B7 ", order.bedrijf.btw] }))] }));
+        case "klantgegevens":
+            return (_jsxs(Blok, { titel: s.titel, children: [_jsx("div", { className: "font-semibold", children: order.klant.naam }), opt(s, "toonKlantnummer", true) && _jsxs("div", { children: ["Klantnummer: ", order.klant.nummer] }), opt(s, "toonContact", true) && _jsxs("div", { children: ["Contact: ", order.klant.contact] }), opt(s, "toonReferentie", true) && _jsxs("div", { children: ["Referentie: ", order.klant.referentie] })] }));
+        case "afleveradres":
+        case "factuuradres": {
+            const a = s.type === "afleveradres" ? order.afleveradres : order.factuuradres;
+            return (_jsxs(Blok, { titel: s.titel, children: [_jsx("div", { className: "font-semibold", children: a.naam }), _jsx("div", { children: a.adres }), _jsx("div", { children: a.plaats }), opt(s, "toonLand", true) && _jsx("div", { children: a.land })] }));
+        }
+        case "orderinformatie":
+            return (_jsx(Blok, { titel: s.titel, children: _jsxs("div", { className: "grid grid-cols-2 gap-x-4", children: [opt(s, "toonOrdernummer", true) && _jsx(Rij, { label: "Ordernummer", waarde: order.order.nummer }), opt(s, "toonDatum", true) && _jsx(Rij, { label: "Orderdatum", waarde: order.order.datum }), opt(s, "toonLeverdatum", true) && _jsx(Rij, { label: "Leverdatum", waarde: order.order.leverdatum }), opt(s, "toonReferentie", true) && _jsx(Rij, { label: "Referentie", waarde: order.order.referentie })] }) }));
+        case "transportinformatie":
+            return (_jsx(Blok, { titel: s.titel, children: _jsxs("div", { className: "grid grid-cols-2 gap-x-4", children: [opt(s, "toonTransporteur", true) && (_jsx(Rij, { label: "Transporteur", waarde: order.transport.transporteur })), opt(s, "toonRoute", true) && _jsx(Rij, { label: "Route", waarde: order.transport.route }), opt(s, "toonChauffeur", false) && _jsx(Rij, { label: "Chauffeur", waarde: order.transport.chauffeur }), opt(s, "toonTrack", false) && _jsx(Rij, { label: "Track & trace", waarde: order.transport.track })] }) }));
+        case "opmerkingen":
+            return (_jsxs("div", { className: opt(s, "kader", true) ? "rounded border p-2" : "", children: [_jsx("span", { className: "font-semibold", children: "Opmerkingen: " }), order.order.opmerking] }));
+        case "orderregels": {
+            const kolommen = Array.isArray(s.kolommen) ? s.kolommen : [];
+            const groepering = optS(s, "groepering", "order");
+            const groepen = groepeer(order, groepering, optS(s, "sortering", "eigen"));
+            return (_jsx("div", { className: "space-y-2", children: groepen.map((g) => (_jsxs("div", { className: "space-y-1", children: [g.titel !== "—" && _jsx("div", { className: "font-semibold", children: g.titel }), _jsx(RegelWeergave, { producten: g.producten, kolommen: kolommen, weergave: optS(s, "weergave", "tabel"), toonKoppen: opt(s, "toonKoppen", true), zebra: opt(s, "zebra", false), randen: opt(s, "randen", true) })] }, g.titel))) }));
+        }
+        case "pickmethode":
+            if (optS(s, "methode", "kar") !== "fusten")
+                return null;
+            return (_jsx(FustVerzamellijst, { order: order, kop: String(s.opties?.["kop"] ?? "Te verzamelen fusten — karindeling zelf bepalen"), velden: lijst(s, "velden"), toonFusthoogte: opt(s, "toonFusthoogte", true) !== false, toonTotaal: opt(s, "toonTotaal", true) !== false }));
+        case "karren":
+            // wordt via karSegmenten gerenderd (pagina-afbrekingen)
+            return null;
+        case "lagen":
+        case "producten":
+            // worden binnen de karrensectie gerenderd
+            return null;
+        case "fusten": {
+            const modus = optS(s, "modus", "totaal");
+            if (modus !== "totaal")
+                return null;
+            const alle = order.karren.flatMap((k) => k.lagen.flatMap((l) => l.fusten));
+            return _jsx(FustTabel, { velden: lijst(s, "velden"), fusten: alle, titel: 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")));
+            return (_jsx("div", { className: "flex flex-wrap gap-4 border-t pt-2 font-medium", style: { justifyContent: optS(s, "uitlijning", "right") === "right" ? "flex-end" : "flex-start" }, children: velden.map((v) => (_jsx("span", { children: t[v] ?? v }, v))) }));
+        }
+        case "handtekening":
+            return (_jsxs("div", { className: "mt-3 space-y-1", children: [_jsx("div", { className: "text-[9px] uppercase text-muted-foreground", children: opt(s, "label", "") }), opt(s, "toonNaam", true) && _jsx("div", { className: "mt-3 border-b border-foreground/40 pb-3", children: "Naam" }), opt(s, "toonDatum", true) && _jsx("div", { className: "mt-3 border-b border-foreground/40 pb-3", children: "Datum" }), _jsx("div", { className: "mt-3 h-12 border-b border-foreground/40" })] }));
+        case "tekstblok":
+            return (_jsx("div", { className: opt(s, "kader", false) ? "rounded border p-2" : "", style: { fontSize: `${opt(s, "fontgrootte", 9)}pt` }, children: vulVeldcodes(String(opt(s, "tekst", "")), order) }));
+        case "qrcode":
+            return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "flex items-center justify-center border border-dashed text-muted-foreground", style: { width: `${opt(s, "grootte", 25)}mm`, height: `${opt(s, "grootte", 25)}mm` }, children: "QR" }), _jsx("div", { className: "text-[8px] text-muted-foreground", children: vulVeldcodes(String(opt(s, "waarde", "")), order) })] }));
+        case "barcode":
+            return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "w-48", style: {
+                            height: `${opt(s, "hoogte", 15)}mm`,
+                            backgroundImage: "repeating-linear-gradient(to right, currentColor 0 2px, transparent 2px 5px)",
+                        } }), _jsx("div", { children: vulVeldcodes(String(opt(s, "waarde", "")), order) })] }));
+        case "afbeelding": {
+            const url = String(opt(s, "url", ""));
+            return url ? (_jsx("img", { src: url, alt: s.titel, style: { height: `${opt(s, "hoogte", 25)}mm` } })) : (_jsx("div", { className: "flex items-center justify-center rounded border border-dashed text-muted-foreground", style: { height: `${opt(s, "hoogte", 25)}mm` }, children: "Afbeelding" }));
+        }
+        default:
+            return null;
+    }
+}
+function Rij({ label, waarde }) {
+    return (_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("span", { className: "font-medium", children: waarde })] }));
+}
+function alignToFlex(v) {
+    return v === "center" ? "center" : v === "right" ? "flex-end" : "flex-start";
+}
+function Scheiding({ modus }) {
+    if (modus === "geen")
+        return null;
+    if (modus === "lijn")
+        return _jsx("div", { className: "border-t" });
+    if (modus === "balk")
+        return _jsx("div", { className: "h-1 w-full bg-foreground/70" });
+    if (modus === "kop" || modus === "kleur")
+        return null; // kop/kleur zit in de karkop zelf
+    return _jsx("div", { className: "border-t" });
+}
+function KarKop({ sectie, kar, velden, bundelTekst = "" }) {
+    const scheiding = optS(sectie, "scheiding", "kop");
+    const tekst = String(opt(sectie, "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"))
+        info.push(kar.gewicht);
+    if (velden.includes("chauffeur"))
+        info.push(kar.chauffeur);
+    if (velden.includes("route"))
+        info.push(kar.route);
+    const groot = scheiding === "kop";
+    const gekleurd = scheiding === "kleur" || groot;
+    const toonNummer = velden.includes("karnummer");
+    if (!toonNummer &&
+        info.length === 0 &&
+        !bundelTekst &&
+        !velden.includes("barcode") &&
+        !velden.includes("qrcode"))
+        return null;
+    return (_jsxs("div", { className: `flex items-center justify-between rounded px-2 py-1 ${groot ? "text-[13px] font-bold" : "font-semibold"}`, style: gekleurd ? { background: String(opt(sectie, "kleur", "#e8eef7")) } : undefined, children: [_jsxs("span", { className: "flex items-center gap-2", children: [toonNummer && _jsx("span", { children: tekst }), bundelTekst && _jsx(BundelMelding, { tekst: bundelTekst })] }), _jsxs("span", { className: "flex gap-3 text-[9px] font-normal", children: [info.map((t) => (_jsx("span", { children: t }, t))), velden.includes("barcode") && _jsxs("span", { children: ["\u25AE\u25AF\u25AE\u25AF\u25AE ", kar.karnummer] }), velden.includes("qrcode") && _jsx("span", { children: "[QR]" })] })] }));
+}
+function LagenView({ sectie, lagen, productSectie, fustSectie, }) {
+    const modus = optS(sectie, "modus", "apart");
+    if (modus === "geen")
+        return null;
+    const velden = lijst(sectie, "velden");
+    const toonProducten = modus !== "nummer" && modus !== "regel";
+    const bundel = modus === "gebundeld";
+    const groepen = groepeerIdentiekeLagen(lagen, bundel);
+    return (_jsx("div", { className: "space-y-2", children: groepen.map(({ laag, aantal }, index) => (_jsxs("div", { className: "space-y-1", children: [_jsx(LaagKop, { sectie: sectie, laag: laag, velden: velden, compact: modus === "regel", bundelTekst: aantal > 1 ? laagBundelTekst(aantal) : "" }), toonProducten && productSectie && (_jsx(ProductenView, { sectie: productSectie, laag: laag, toonKop: index === 0 || opt(productSectie, "kop_eenmalig", true) === false })), fustSectie && optS(fustSectie, "modus", "totaal") === "laag" && (_jsx(FustTabel, { velden: lijst(fustSectie, "velden"), fusten: laag.fusten, titel: `Fusten laag ${laag.laagnummer}` })), fustSectie && optS(fustSectie, "modus", "totaal") === "product" && (_jsx(FustTabel, { velden: lijst(fustSectie, "velden"), fusten: laag.fusten, titel: `Fusten per product · laag ${laag.laagnummer}` }))] }, laag.laagnummer))) }));
+}
+function LaagKop({ sectie, laag, velden, compact, bundelTekst = "", }) {
+    const tekst = String(opt(sectie, "koptekst", "Laag {laag}")).replace(/{laag}/g, String(laag.laagnummer));
+    const info = [];
+    if (velden.includes("belading"))
+        info.push(`Belading ${laag.belading}`);
+    if (velden.includes("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"))
+        info.push(laag.gewicht);
+    if (velden.includes("opmerking") && laag.opmerking)
+        info.push(laag.opmerking);
+    if (!velden.includes("laagnummer") && info.length === 0 && !bundelTekst)
+        return null;
+    return (_jsxs("div", { className: `flex items-center justify-between ${compact ? "" : "border-b pb-0.5"}`, children: [_jsxs("span", { className: "flex items-center gap-2 font-medium", children: [velden.includes("laagnummer") ? tekst : "", bundelTekst && _jsx(BundelMelding, { tekst: bundelTekst })] }), _jsx("span", { className: "flex gap-3 text-[9px] text-muted-foreground", children: info.map((t) => (_jsx("span", { children: t }, t))) })] }));
+}
+function ProductenView({ sectie, laag, toonKop = true, }) {
+    const velden = lijst(sectie, "velden");
+    const weergave = optS(sectie, "weergave", "tabel");
+    let producten = sorteerProducten(laag.producten, String(opt(sectie, "sortering", "eigen")));
+    if (opt(sectie, "groeperen", false)) {
+        const map = new Map();
+        for (const p of producten) {
+            const bestaand = map.get(p.artikelnummer);
+            if (bestaand) {
+                bestaand.aantal += p.aantal;
+                bestaand.fust_aantal += p.fust_aantal;
+            }
+            else
+                map.set(p.artikelnummer, { ...p });
+        }
+        producten = [...map.values()];
+    }
+    if (!velden.length)
+        return null;
+    const cel = (p, v) => {
+        if (v === "foto")
+            return "🖼";
+        if (v === "qrcode")
+            return "[QR]";
+        return String(p[v] ?? "");
+    };
+    const label = (v) => (v === "foto" ? "Foto" : v === "qrcode" ? "QR-code" : kolomLabel(v));
+    const breedtes = productVeldBreedtes(velden);
+    if (weergave === "tabel") {
+        return (_jsxs("table", { className: "w-full table-fixed border-collapse", children: [_jsx("colgroup", { children: velden.map((veld, index) => (_jsx("col", { style: { width: `${breedtes[index]}%` } }, veld))) }), toonKop && (_jsx("thead", { children: _jsx("tr", { children: velden.map((v) => (_jsx("th", { className: "break-words border-b px-1 py-0.5 text-left text-[9px] text-muted-foreground", children: label(v) }, v))) }) })), _jsx("tbody", { children: producten.map((p, i) => (_jsx("tr", { children: velden.map((v) => (_jsx("td", { className: "break-words border-b px-1 py-0.5 align-top", children: cel(p, v) }, v))) }, `${p.artikelnummer}-${i}`))) })] }));
+    }
+    return (_jsx("div", { className: weergave === "naast" ? "grid grid-cols-2 gap-1" : "space-y-0.5", children: producten.map((p, i) => (_jsx("div", { className: "flex gap-2", children: velden.map((v) => (_jsx("span", { children: cel(p, v) }, v))) }, `${p.artikelnummer}-${i}`))) }));
+}
+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, incl. producten. */
+function FustVerzamellijst({ order, kop = "Te verzamelen fusten — karindeling zelf bepalen", velden, toonFusthoogte = true, toonTotaal = true, }) {
+    const groepen = fustVerzamellijst(order?.karren);
+    const kolommen = (Array.isArray(velden) && velden.length
+        ? velden
+        : Object.keys(FUST_KOLOM_LABELS)).filter((v) => FUST_KOLOM_LABELS[v]);
+    const totaal = groepen.reduce((n, f) => n + f.aantal, 0);
+    if (!groepen.length)
+        return _jsx("p", { className: "text-muted-foreground", children: "Geen fusten in deze order." });
+    return (_jsxs("div", { className: "space-y-2", children: [kop && (_jsx("div", { className: "text-[9px] font-semibold uppercase text-muted-foreground", children: kop })), groepen.map((f) => (_jsxs("div", { className: "space-y-0.5", children: [_jsxs("div", { className: "flex items-baseline justify-between border-b border-foreground/40 pb-0.5", children: [_jsxs("span", { className: "font-semibold", children: [f.fusttype, toonFusthoogte && f.hoogte ? ` · ${f.hoogte}` : "", toonFusthoogte && f.belading ? ` · ${f.belading}` : ""] }), _jsxs("span", { className: "font-semibold", children: [f.aantal, "\u00D7 fust"] })] }), kolommen.length > 0 && (_jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsx("tr", { className: "text-muted-foreground", children: kolommen.map((k) => (_jsx("th", { className: `px-1 py-0.5 font-medium ${FUST_RECHTS.has(k) ? "text-right" : "text-left"}`, children: FUST_KOLOM_LABELS[k] }, k))) }) }), _jsxs("tbody", { children: [f.producten.map((pr) => (_jsx("tr", { className: "border-b", children: kolommen.map((k) => (_jsx("td", { className: `px-1 py-0.5 ${FUST_RECHTS.has(k) ? "text-right" : ""}`, children: String(pr[k] ?? "") }, k))) }, pr.artikelnummer))), f.producten.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: kolommen.length, className: "px-1 py-0.5 text-muted-foreground", children: "Geen producten bekend." }) }))] })] }))] }, f.fusttype))), toonTotaal && (_jsxs("div", { className: "flex justify-between border-t border-foreground/40 pt-0.5 font-semibold", children: [_jsx("span", { children: "Totaal fusten" }), _jsx("span", { children: totaal })] }))] }));
+}
+function FustTabel({ velden, fusten, titel, }) {
+    if (!fusten.length || !velden.length)
+        return null;
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-[9px] font-semibold uppercase text-muted-foreground", children: titel }), _jsx("table", { className: "w-full border-collapse", children: _jsx("tbody", { children: fusten.map((f, i) => (_jsx("tr", { children: velden.map((v) => (_jsx("td", { className: "border-b px-1 py-0.5", children: String(f[v] ?? "") }, v))) }, i))) }) })] }));
+}
+function RegelWeergave({ producten, kolommen, weergave, toonKoppen, zebra, randen, }) {
+    const stijl = (k) => ({
+        textAlign: k.uitlijning,
+        fontFamily: k.fontfamilie || undefined,
+        fontSize: k.fontgrootte ? `${k.fontgrootte}pt` : undefined,
+        color: k.kleur || undefined,
+        fontWeight: k.vet ? 700 : undefined,
+        background: k.achtergrond || undefined,
+        border: k.rand ? "1px solid currentColor" : undefined,
+        overflowWrap: "anywhere",
+    });
+    // Vaste kolombreedtes zodat elke laag/kar dezelfde uitlijning houdt
+    const breedtes = useMemo(() => {
+        const opgegeven = kolommen.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;
+        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);
+    }, [kolommen]);
+    if (!kolommen.length)
+        return null;
+    if (weergave === "tabel") {
+        return (_jsxs("table", { className: "w-full border-collapse", style: { tableLayout: "fixed" }, children: [_jsx("colgroup", { children: kolommen.map((k, i) => (_jsx("col", { style: { width: `${breedtes[i]}%` } }, k.key))) }), toonKoppen && (_jsx("thead", { children: _jsx("tr", { children: kolommen.map((k) => (_jsx("th", { className: `px-1 py-0.5 text-[9px] uppercase text-muted-foreground ${randen ? "border" : "border-b"}`, style: stijl(k), children: k.label }, k.key))) }) })), _jsx("tbody", { children: producten.map((p, i) => (_jsx("tr", { className: zebra && i % 2 === 1 ? "bg-muted/50" : "", children: kolommen.map((k) => (_jsx("td", { className: `px-1 py-0.5 ${randen ? "border" : "border-b"}`, style: stijl(k), children: String(p[k.key] ?? "") }, k.key))) }, i))) })] }));
+    }
+    return (_jsx("div", { className: weergave === "naast" ? "grid grid-cols-2 gap-1" : "space-y-0.5", children: producten.map((p, i) => (_jsx("div", { className: "flex gap-2", children: kolommen.map((k) => (_jsx("span", { style: stijl(k), children: String(p[k.key] ?? "") }, k.key))) }, i))) }));
+}
+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))];
+}
+/** Toont het gekozen bibliotheek-logo, of een placeholder wanneer er geen is. */
+function LogoSectie({ sectie }) {
+    const { logos } = useLogos();
+    const logoId = typeof sectie.opties?.logoId === "string" ? sectie.opties.logoId : null;
+    const logo = Array.isArray(logos) ? logos.find((l) => l.id === logoId) : undefined;
+    const hoogte = `${opt(sectie, "hoogte", 18)}mm`;
+    return (_jsx("div", { className: "flex", style: { justifyContent: alignToFlex(optS(sectie, "uitlijning", "left")) }, children: logo?.viewUrl ? (_jsx("img", { src: logo.viewUrl, alt: logo.naam, style: { height: hoogte }, className: "object-contain" })) : (_jsx("div", { className: "flex items-center justify-center rounded border border-dashed px-6 text-muted-foreground", style: { height: hoogte }, children: "LOGO" })) }));
+}
+/** Documentlogo bovenaan het document, gekoppeld aan de Logo Bibliotheek. */
+function DocumentLogo({ logoId, hoogte, uitlijning, }) {
+    const { logos } = useLogos();
+    const logo = Array.isArray(logos) ? logos.find((l) => l.id === logoId) : undefined;
+    if (!logo?.viewUrl)
+        return null;
+    return (_jsx("div", { className: "mb-2 flex", style: { justifyContent: alignToFlex(uitlijning) }, children: _jsx("img", { src: logo.viewUrl, alt: logo.naam, style: { height: `${hoogte}mm` }, className: "object-contain" }) }));
+}

package/dist-lib/components/PakbonSectiesPanel.d.ts

@@ -0,0 +1,18 @@
+import { type PakbonConfig, type PakbonSectie } from "../lib/pakbonBuilder";
+/** Beheer van de secties waaruit de pakbon is opgebouwd. */
+export declare function PakbonSectiesPanel({ config, onChange, }: {
+    config: PakbonConfig;
+    onChange: (c: PakbonConfig) => void;
+}): import("react").JSX.Element;
+/** Volledige instellingen van één blok — herbruikt in de blokontwerper. */
+export declare function PakbonSectieEditor({ sectie, onChange, methode, }: {
+    sectie: PakbonSectie;
+    onChange: (patch: Partial<PakbonSectie>) => void;
+    methode?: "kar" | "fusten";
+}): import("react").JSX.Element;
+/** Kaderinstellingen (breedte, uitlijning, marges, opmaak) van één blok. */
+export declare function PakbonBlokKaderEditor({ sectie, onChange, }: {
+    sectie: PakbonSectie;
+    onChange: (patch: Partial<PakbonSectie>) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PakbonSectiesPanel.d.ts.map

package/dist-lib/components/PakbonSectiesPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PakbonSectiesPanel.d.ts","sourceRoot":"","sources":["../../src/components/PakbonSectiesPanel.tsx"],"names":[],"mappings":"AAmBA,OAAO,EASL,KAAK,YAAY,EAEjB,KAAK,YAAY,EAElB,MAAM,sBAAsB,CAAC;AAE9B,4DAA4D;AAC5D,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CACrC,+BA6KA;AA0TD,2EAA2E;AAC3E,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,QAAQ,EACR,OAAe,GAChB,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACjD,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC5B,+BAiGA;AAED,4EAA4E;AAC5E,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;CAClD,+BA4FA"}