@flowselections/layout-maker 1.36.7 → 1.45.8

package/dist-lib/components/PakbonPreview.js

@@ -2,14 +2,34 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { PaginaDocument } from "./PaginaDocument.js";
 import { useLogos } from "../lib/logoLibrary.js";
-import { DEMO_ORDER, conditieContext, groepeerIdentiekeKarren, groepeerIdentiekeLagen, karBundelTekst, fustVerzamellijst, pickMethode, productVeldBreedtes, sectieOnderdrukt, kolomLabel, laagBundelTekst, sectieZichtbaar, sorteerProducten, totalen, vulVeldcodes, } from "../lib/pakbonBuilder.js";
-export function PakbonPreview({ config, breedteMm = 210, hoogteMm = 297, }) {
-    const order = DEMO_ORDER;
+import { code128Bars } from "../lib/code128.js";
+import { karMetadata } from "../lib/pakbonPresentation.js";
+import { DEMO_ORDER, deelkarVoorbeeldOrder, conditieContext, groepeerIdentiekeKarren, groepeerIdentiekeLagen, karBundelTekst, fustVerzamellijst, fustRegels, FUSTREGEL_LABELS, FUSTREGEL_RECHTS, pickMethode, pakbonLayoutVariant, productVeldBreedtes, sectieOnderdruktVoorVariant, kolomLabel, laagBundelTekst, sectieZichtbaar, sorteerProducten, totalen, vulVeldcodes, } from "../lib/pakbonBuilder.js";
+/** Voorbeeldbarcode: alleen bedoeld om de plek en hoogte te tonen. */
+function BarcodeStrepen({ waarde, hoogteMm = 15 }) {
+    const bars = code128Bars(waarde);
+    if (!bars)
+        return null;
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "flex w-48 bg-white", style: { height: `${hoogteMm}mm` }, children: bars.split("").map((bar, i) => (_jsx("span", { className: `block h-full ${bar === "1" ? "bg-foreground" : "bg-transparent"}`, style: { flex: `0 0 ${100 / bars.length}%` } }, i))) }), _jsx("div", { className: "text-[9px]", children: waarde })] }));
+}
+export function PakbonPreview({ config, breedteMm = 210, hoogteMm = 297, variant = null, }) {
+    // De deelkarweergave gebruikt bewust een beperkte demo-order. Daardoor zie
+    // je in het voorbeeld alleen de fusten die voor deze deelkar verzameld
+    // moeten worden, nooit een misleidende volledige karindeling.
+    const order = variant === "partial_order" ? deelkarVoorbeeldOrder() : 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 actieveVariant = pakbonLayoutVariant(variant);
+    const secties = alleSecties.filter((s) => sectieZichtbaar(s, ctx) && !sectieOnderdruktVoorVariant(s.type, methode, actieveVariant));
     const zoek = (type) => secties.find((s) => s.type === type);
+    const pickSectie = alleSecties.find((s) => s.type === "pickmethode");
+    const barcodeAan = !alleSecties.some((s) => s.type === "barcode") &&
+        (pickSectie ? opt(pickSectie, "toonBarcode", true) !== false : true);
+    const barcodeHoogte = pickSectie ? Number(opt(pickSectie, "barcodeHoogte", 15)) : 15;
+    const heeftKarBarcodes = secties.some((s) => s.type === "karren") &&
+        order.karren.some((kar) => Boolean(String(kar.barcode ?? "").trim()));
+    const paginaLabel = actieveVariant === "partial_order" ? "Deelkar" : "Hele kar";
     const segmenten = [];
     if (config?.logo?.logoId) {
         segmenten.push({
@@ -28,23 +48,47 @@ export function PakbonPreview({ config, breedteMm = 210, hoogteMm = 297, }) {
         if (s.type === "karren") {
             segmenten.push(...karSegmenten(s, order, zoek));
         }
+        else if (s.type === "barcode" && heeftKarBarcodes) {
+            // De barcode wordt binnen ieder afzonderlijk karblok getoond.
+        }
         else if (s.type === "totalen" && (totalenElkePagina || toonPaginanummer)) {
             // wordt als voettekst onder elke pagina getoond
         }
         else {
             segmenten.push({
                 key: s.id,
+                pageLabel: paginaLabel,
                 node: (_jsx(BlokFrame, { sectie: s, children: _jsx(SectieView, { sectie: s, order: order, zoek: zoek }) })),
             });
         }
     }
+    if (barcodeAan && !heeftKarBarcodes) {
+        segmenten.push({
+            key: "engine-barcode",
+            pageLabel: paginaLabel,
+            node: (_jsxs("div", { className: "space-y-1 pt-2", children: [_jsx(BarcodeStrepen, { waarde: "VOORBEELD-BARCODE", hoogteMm: barcodeHoogte }), _jsx("div", { className: "text-[8px] text-muted-foreground", children: "Voorbeeld \u2014 de echte barcode komt uit de opdracht van de Engine." })] })),
+        });
+    }
+    // Het volle-karvoorbeeld is bewust een complete serie: vier hele karren en
+    // als vijfde pagina één deelkar zonder karindeling. Zo is het verschil in
+    // dezelfde voorbeeldreeks direct zichtbaar.
+    if (actieveVariant === "full_cart" && methode === "beide" && pickSectie) {
+        const deelOrder = deelkarVoorbeeldOrder();
+        segmenten.push({
+            key: "deelkar-voorbeeldpagina",
+            breakBefore: true,
+            pageLabel: "Deelkar",
+            node: (_jsxs("div", { className: "space-y-3", children: [_jsx(BlokFrame, { sectie: pickSectie, children: _jsx(SectieView, { sectie: pickSectie, order: deelOrder, zoek: zoek }) }), _jsxs("div", { className: "space-y-1 pt-2", children: [_jsx(BarcodeStrepen, { waarde: "VOORBEELD-DEELKAR", hoogteMm: barcodeHoogte }), _jsx("div", { className: "text-[8px] text-muted-foreground", children: "Voorbeeld \u2014 de echte barcode komt uit de opdracht van de Engine." })] })] })),
+        });
+    }
     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) => ({
+    return (_jsx(PaginaDocument, { breedteMm: breedteMm, hoogteMm: hoogteMm, leeg: "Nog geen zichtbare secties.", voet: voet, kop: (label) => (_jsx("div", { className: "mb-3 border-y-2 border-neutral-900 py-2 text-center text-base font-bold uppercase", children: label ?? paginaLabel })), items: segmenten.map((seg) => ({
             id: seg.key,
             node: seg.node,
             breakBefore: seg.breakBefore,
+            pageLabel: seg.pageLabel ?? paginaLabel,
         })) }));
 }
 /** Bouwt de segmenten voor de karrensectie, inclusief pagina-afbrekingen. */
@@ -68,6 +112,7 @@ function karSegmenten(s, order, zoek) {
         return [
             {
                 key: s.id,
+                pageLabel: "Hele kar",
                 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))) })),
             },
         ];
@@ -82,6 +127,7 @@ function karSegmenten(s, order, zoek) {
                 segmenten.push({
                     key: `${s.id}-${kar.karnummer}-${lg.laag.laagnummer}`,
                     breakBefore: i > 0 || j > 0,
+                    pageLabel: "Hele kar",
                     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" })),
                 });
             });
@@ -90,6 +136,7 @@ function karSegmenten(s, order, zoek) {
         segmenten.push({
             key: `${s.id}-${kar.karnummer}`,
             breakBefore: i > 0 && nieuwePaginaPerKar,
+            pageLabel: "Hele kar",
             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" })] })),
         });
     });
@@ -100,7 +147,7 @@ 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}` }))] }));
+    return (_jsxs("div", { className: `space-y-2 ${omkaderd ? "rounded border p-2" : ""}`, children: [_jsx(KarKop, { sectie: sectie, kar: kar, velden: velden, bundelTekst: karBundelTekst(aantal) }), kar.barcode ? (_jsxs("div", { className: "space-y-1 py-1", children: [_jsx(BarcodeStrepen, { waarde: kar.barcode, hoogteMm: Number(opt(sectie, "barcodeHoogte", 15)) }), _jsx("div", { className: "text-[8px] text-muted-foreground", children: "Voorbeeld \u2014 iedere kar krijgt de eigen barcode van de Engine." })] })) : null, 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, }) {
@@ -168,8 +215,23 @@ function SectieView({ sectie, order, zoek, }) {
             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 "fustregels": {
+            const velden = lijst(s, "velden").filter((v) => FUSTREGEL_LABELS[v]);
+            const regels = fustRegels(order.karren, {
+                comprimeren: opt(s, "comprimeren", true) !== false,
+                sortering: optS(s, "sortering", "fustsoort"),
+            });
+            if (!velden.length || !regels.length)
+                return null;
+            const randen = opt(s, "randen", true) !== false;
+            const zebra = opt(s, "zebra", false);
+            const cel = randen ? "border-b border-neutral-300 px-1 py-0.5" : "px-1 py-0.5";
+            const totaalFusten = regels.reduce((n, r) => n + r.fust_aantal, 0);
+            const totaalPlanten = regels.reduce((n, r) => n + r.aantal, 0);
+            return (_jsxs("div", { className: "space-y-1", children: [_jsxs("table", { className: "w-full border-collapse", children: [opt(s, "toonKoppen", true) !== false && (_jsx("thead", { children: _jsx("tr", { children: velden.map((v) => (_jsx("th", { className: `${cel} font-semibold ${FUSTREGEL_RECHTS.has(v) ? "text-right" : "text-left"}`, children: FUSTREGEL_LABELS[v] }, v))) }) })), _jsx("tbody", { children: regels.map((r, i) => (_jsx("tr", { className: zebra && i % 2 === 1 ? "bg-neutral-100" : undefined, children: velden.map((v) => (_jsx("td", { className: `${cel} ${FUSTREGEL_RECHTS.has(v) ? "text-right" : "text-left"}`, children: String(r[v] ?? "") }, v))) }, i))) })] }), opt(s, "toonTotaal", true) !== false && (_jsxs("div", { className: "flex justify-end gap-3 font-semibold", children: [_jsxs("span", { children: [totaalFusten, " fusten"] }), _jsxs("span", { children: [totaalPlanten, " planten"] })] }))] }));
+        }
         case "pickmethode":
-            if (optS(s, "methode", "kar") !== "fusten")
+            if (optS(s, "methode", "kar") === "kar")
                 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":
@@ -199,10 +261,7 @@ function SectieView({ sectie, order, zoek, }) {
         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) })] }));
+            return (_jsxs("div", { className: "space-y-1", children: [_jsx(BarcodeStrepen, { waarde: "VOORBEELD-BARCODE", hoogteMm: Number(opt(s, "hoogte", 15)) }), _jsx("div", { className: "text-[8px] text-muted-foreground", children: "Voorbeeld \u2014 de echte barcode komt uitsluitend uit de Engine-opdracht." })] }));
         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" }));
@@ -236,17 +295,7 @@ function KarKop({ sectie, kar, velden, bundelTekst = "" }) {
         .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 info = karMetadata(kar, velden);
     const groot = scheiding === "kop";
     const gekleurd = scheiding === "kleur" || groot;
     const toonNummer = velden.includes("karnummer");
@@ -256,7 +305,7 @@ function KarKop({ sectie, kar, velden, 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]" })] })] }));
+    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") && kar.barcode ? (_jsx(BarcodeStrepen, { waarde: kar.barcode, hoogteMm: Number(opt(sectie, "barcodeHoogte", 15)) })) : null, velden.includes("qrcode") && _jsx("span", { children: "[QR]" })] })] }));
 }
 function LagenView({ sectie, lagen, productSectie, fustSectie, }) {
     const modus = optS(sectie, "modus", "apart");
@@ -329,9 +378,10 @@ const FUST_KOLOM_LABELS = {
     locatie: "Locatie",
     fustsoort: "Tray/fust",
     planten_per_fust: "Pl./fust",
+    fust_aantal: "Fusten",
     aantal: "Planten",
 };
-const FUST_RECHTS = new Set(["planten_per_fust", "aantal"]);
+const FUST_RECHTS = new Set(["planten_per_fust", "fust_aantal", "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);

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

@@ -1,14 +1,16 @@
-import { type PakbonConfig, type PakbonSectie } from "../lib/pakbonBuilder.js";
+import { type PakbonConfig, type PakbonSectie, type PakbonSectieType, type PickMethode } from "../lib/pakbonBuilder.js";
 /** Beheer van de secties waaruit de pakbon is opgebouwd. */
-export declare function PakbonSectiesPanel({ config, onChange, }: {
+export declare function PakbonSectiesPanel({ config, onChange, beschikbareTypes, }: {
     config: PakbonConfig;
     onChange: (c: PakbonConfig) => void;
+    /** Beperkt de keuzelijst met blokken (bijvoorbeeld voor de afleverbrief). */
+    beschikbareTypes?: PakbonSectieType[];
 }): 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";
+    methode?: PickMethode;
 }): import("react").JSX.Element;
 /** Kaderinstellingen (breedte, uitlijning, marges, opmaak) van één blok. */
 export declare function PakbonBlokKaderEditor({ sectie, onChange, }: {

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

@@ -1 +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,+BAgHA;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"}
+{"version":3,"file":"PakbonSectiesPanel.d.ts","sourceRoot":"","sources":["../../src/components/PakbonSectiesPanel.tsx"],"names":[],"mappings":"AAmBA,OAAO,EASL,KAAK,YAAY,EAEjB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAE9B,4DAA4D;AAC5D,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,QAAQ,EACR,gBAAgB,GACjB,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IACpC,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACvC,+BAkLA;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,WAAW,CAAC;CACvB,+BAuHA;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"}

package/dist-lib/components/PakbonSectiesPanel.js

@@ -7,12 +7,14 @@ import { LogoBibliotheekDialog } from "./LogoBibliotheekDialog.js";
 import { LogoThumbnail } from "./LogosPage.js";
 import { BESCHIKBARE_KOLOMMEN, CONDITIE_VELDEN, SECTIE_REGISTER, nieuweKolom, nieuweSectie, pickMethode, sectieDef, sectieOnderdrukt, } from "../lib/pakbonBuilder.js";
 /** Beheer van de secties waaruit de pakbon is opgebouwd. */
-export function PakbonSectiesPanel({ config, onChange, }) {
+export function PakbonSectiesPanel({ config, onChange, beschikbareTypes, }) {
     const alleSecties = Array.isArray(config?.secties) ? config.secties : [];
     const methode = pickMethode(alleSecties);
+    const toegestaan = (t) => !beschikbareTypes || beschikbareTypes.includes(t);
     const secties = alleSecties.filter((s) => !sectieOnderdrukt(s.type, methode));
     const [open, setOpen] = useState(secties[0]?.id ?? null);
-    const [toevoegen, setToevoegen] = useState("orderregels");
+    const keuzes = SECTIE_REGISTER.filter((d) => !sectieOnderdrukt(d.type, methode) && toegestaan(d.type));
+    const [toevoegen, setToevoegen] = useState(keuzes.find((d) => d.type === "orderregels")?.type ?? keuzes[0]?.type ?? "tekstblok");
     // Onderdrukte blokken blijven bewaard in de configuratie, ook al staan ze niet in de lijst.
     const verborgen = alleSecties.filter((s) => sectieOnderdrukt(s.type, methode));
     const zet = (nieuw) => onChange({ ...config, secties: [...nieuw, ...verborgen] });
@@ -43,7 +45,7 @@ export function PakbonSectiesPanel({ config, onChange, }) {
                                                 ...(config.logo ?? { logoId: null }),
                                                 uitlijning: v,
                                             },
-                                        }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "left", children: "Links" }), _jsx(SelectItem, { value: "center", children: "Midden" }), _jsx(SelectItem, { value: "right", children: "Rechts" })] })] })] })] }))] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { value: toevoegen, onValueChange: (v) => setToevoegen(v), children: [_jsx(SelectTrigger, { className: "h-9", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: SECTIE_REGISTER.filter((d) => !sectieOnderdrukt(d.type, methode)).map((d) => (_jsx(SelectItem, { value: d.type, children: d.label }, d.type))) })] }), _jsx(Button, { size: "sm", onClick: () => {
+                                        }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "left", children: "Links" }), _jsx(SelectItem, { value: "center", children: "Midden" }), _jsx(SelectItem, { value: "right", children: "Rechts" })] })] })] })] }))] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { value: toevoegen, onValueChange: (v) => setToevoegen(v), children: [_jsx(SelectTrigger, { className: "h-9", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: keuzes.map((d) => (_jsx(SelectItem, { value: d.type, children: d.label }, d.type))) })] }), _jsx(Button, { size: "sm", onClick: () => {
                             const s = nieuweSectie(toevoegen);
                             zet([...secties, s]);
                             setOpen(s.id);
@@ -93,7 +95,8 @@ export function PakbonSectieEditor({ sectie, onChange, methode = "kar", }) {
     const s = sectie;
     const def = sectieDef(s.type);
     const bundelAan = s.type === "karren" && (s.opties?.bundel_identiek ?? true);
-    // Instellingen van de fustverzamellijst gelden alleen bij picken per fust.
+    // Instellingen van de fustverzamellijst gelden alleen bij picken per fust
+    // of bij de gecombineerde methode.
     const verzamellijstUit = s.type === "pickmethode" && methode === "kar";
     const aangepasteOpties = def.opties
         .filter((o) => !(verzamellijstUit && o.key !== "methode"))
@@ -119,7 +122,7 @@ export function PakbonSectieEditor({ sectie, onChange, methode = "kar", }) {
                         logoId: logo?.id ?? null,
                         logoNaam: logo?.naam ?? null,
                     },
-                }) })), verzamellijstUit && (_jsxs("p", { className: "rounded border border-dashed px-3 py-2 text-xs text-muted-foreground", children: ["De instellingen voor de fustverzamellijst (koptekst, gegevens per fust, fusthoogte en totaal) gelden alleen bij \u201COrder picken per fusten\u201D. Kies die pickmethode om ze in te stellen; bij picken per kar stel je de fustgegevens in bij het blok ", _jsx("span", { className: "font-medium", children: "Fusten" }), "."] })), aangepasteOpties.map((o) => {
+                }) })), s.type === "pickmethode" && methode === "beide" && (_jsxs("p", { className: "rounded border border-dashed px-3 py-2 text-xs text-muted-foreground", children: ["De Logistics Engine kiest per opdracht de variant: ", _jsx("span", { className: "font-medium", children: "volle kar" }), "toont de karrenindeling; ", _jsx("span", { className: "font-medium", children: "deelkar" }), " toont alleen de te verzamelen fusten. De barcode hieronder wordt alleen gevuld met de barcode uit die opdracht."] })), verzamellijstUit && (_jsxs("p", { className: "rounded border border-dashed px-3 py-2 text-xs text-muted-foreground", children: ["De instellingen voor de fustverzamellijst gelden bij picken per fusten of bij de gecombineerde methode. Bij picken per kar stel je de fustgegevens in bij het blok", _jsx("span", { className: "font-medium", children: " Fusten" }), "."] })), aangepasteOpties.map((o) => {
                 const isVelden = o.key === "velden";
                 const basisWaarde = s.opties?.[o.key] ?? o.standaard;
                 const waarde = isVelden && bundelAan

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

@@ -1,7 +1,8 @@
 type PdfMapToestemmingBannerProps = {
     alleenActieNodig?: boolean;
     zwevend?: boolean;
+    printplekId?: string;
 };
-export declare function PdfMapToestemmingBanner({ alleenActieNodig, zwevend, }?: PdfMapToestemmingBannerProps): import("react").JSX.Element | null;
+export declare function PdfMapToestemmingBanner({ alleenActieNodig, zwevend, printplekId, }?: PdfMapToestemmingBannerProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=PdfMapToestemmingBanner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PdfMapToestemmingBanner.d.ts","sourceRoot":"","sources":["../../src/components/PdfMapToestemmingBanner.tsx"],"names":[],"mappings":"AAuBA,KAAK,4BAA4B,GAAG;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,EACtC,gBAAwB,EACxB,OAAe,GAChB,GAAE,4BAAiC,sCAwKnC"}
+{"version":3,"file":"PdfMapToestemmingBanner.d.ts","sourceRoot":"","sources":["../../src/components/PdfMapToestemmingBanner.tsx"],"names":[],"mappings":"AA0BA,KAAK,4BAA4B,GAAG;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,EACtC,gBAAwB,EACxB,OAAe,EACf,WAAW,GACZ,GAAE,4BAAiC,sCAuQnC"}

package/dist-lib/components/PdfMapToestemmingBanner.js

@@ -10,12 +10,24 @@ import { Button, toast } from "@flowselections/core";
 import { FolderCheck, FolderOpen, ShieldAlert, ShieldCheck } from "lucide-react";
 import { usePrinters } from "../lib/useDocumentData.js";
 import { zorgVoorPdfPrinter } from "../lib/pdfPrinter.js";
-import { draaitInIframe, herstelPdfMapToestemming, kiesPdfMap, mapKiezenMogelijk, openInEigenTabblad, pdfMapNaam, pdfMapToestemming, } from "../lib/pdfMap.js";
-export function PdfMapToestemmingBanner({ alleenActieNodig = false, zwevend = false, } = {}) {
+import { supabase } from "../lib/supabaseClient.js";
+import { draaitInIframe, herstelPdfMapToestemming, kiesPdfMap, mapKiezenMogelijk, openInEigenTabblad, lokalePdfPrintplek, pdfMapKoppeling, pdfMapNaam, pdfMapToestemming, } from "../lib/pdfMap.js";
+export function PdfMapToestemmingBanner({ alleenActieNodig = false, zwevend = false, printplekId, } = {}) {
     const { printers, reload } = usePrinters();
     const pdfPrinter = printers.find((p) => p.afdrukmethode === "pdf");
     const [naam, setNaam] = useState(null);
     const [toestand, setToestand] = useState("laden");
+    const [gekoppeldePrintplek, setGekoppeldePrintplek] = useState(null);
+    const [persistent, setPersistent] = useState(null);
+    const [instellingOpen, setInstellingOpen] = useState(false);
+    const [aangevraagdePrintplek, setAangevraagdePrintplek] = useState(null);
+    useEffect(() => {
+        const params = new URLSearchParams(window.location.search);
+        const gevraagd = params.get("pdf-printplek")?.trim() || null;
+        setInstellingOpen(params.get("pdf-map-instellen") === "1");
+        setAangevraagdePrintplek(gevraagd);
+        void lokalePdfPrintplek().then((lokaal) => setGekoppeldePrintplek(gevraagd ?? lokaal));
+    }, []);
     // Zorg dat de virtuele PDF-printer bestaat, ook als de gebruiker nog geen
     // wizard heeft doorlopen. Daarna herladen zodat de banner direct zichtbaar is.
     useEffect(() => {
@@ -44,7 +56,23 @@ export function PdfMapToestemmingBanner({ alleenActieNodig = false, zwevend = fa
         }
         setNaam(await pdfMapNaam(pdfPrinter.id));
         setToestand(await pdfMapToestemming(pdfPrinter.id));
-    }, [pdfPrinter]);
+        const koppeling = await pdfMapKoppeling();
+        let doelPrintplek = printplekId ?? aangevraagdePrintplek ?? koppeling?.printPlekId ?? null;
+        if (!doelPrintplek) {
+            const { data } = await supabase
+                .from("document_printplek_printers")
+                .select("print_plek_id")
+                .eq("printer_id", pdfPrinter.id);
+            const ids = [
+                ...new Set((Array.isArray(data) ? data : [])
+                    .map((rij) => String(rij.print_plek_id ?? "").trim())
+                    .filter(Boolean)),
+            ];
+            doelPrintplek = ids.length === 1 ? ids[0] ?? null : null;
+        }
+        setGekoppeldePrintplek(doelPrintplek);
+        setPersistent(koppeling?.persistent ?? null);
+    }, [aangevraagdePrintplek, pdfPrinter, printplekId]);
     useEffect(() => {
         void laad();
     }, [laad]);
@@ -58,14 +86,24 @@ export function PdfMapToestemmingBanner({ alleenActieNodig = false, zwevend = fa
             document.removeEventListener("visibilitychange", h);
         };
     }, [laad]);
-    if (!pdfPrinter)
+    // In een iframe (o.a. de Lovable-preview) heeft de balk geen nut: de
+    // mappenverkenner werkt daar niet en de gebruiker kan alleen via "Open in
+    // eigen tabblad" verder. De balk daar niet tonen houdt de preview schoon;
+    // in een eigen tabblad blijft hij volledig zichtbaar.
+    const inIframe = draaitInIframe();
+    if (inIframe)
         return null;
-    // Banner blijft altijd zichtbaar zolang er een PDF-printer is, zodat de
-    // maptoestemming ook proactief te vernieuwen is (groen = in orde).
-    const inOrde = toestand === "granted" && !!naam;
-    if (alleenActieNodig && (toestand === "laden" || inOrde))
+    // De banner mag nooit onzichtbaar zijn: zonder PDF-printer is de mapkeuze
+    // onmogelijk en zonder mapkeuze mislukt elke lokale PDF-opslag. Toon daarom
+    // ook een waarschuwing terwijl de printer nog (aan)ge(maakt) wordt.
+    const vereistePrintplek = printplekId ?? aangevraagdePrintplek ?? gekoppeldePrintplek;
+    const inOrde = !!pdfPrinter &&
+        toestand === "granted" &&
+        !!naam &&
+        !!gekoppeldePrintplek &&
+        (!vereistePrintplek || gekoppeldePrintplek === vereistePrintplek);
+    if (alleenActieNodig && !instellingOpen && (!pdfPrinter ? false : toestand === "laden" || inOrde))
         return null;
-    const inIframe = draaitInIframe();
     const ondersteund = mapKiezenMogelijk();
     const geefToestemming = async () => {
         if (!pdfPrinter)
@@ -94,13 +132,14 @@ export function PdfMapToestemmingBanner({ alleenActieNodig = false, zwevend = fa
                 description: "Open de app in een eigen tabblad om de mappenverkenner te gebruiken.",
                 action: {
                     label: "Open in eigen tabblad",
-                    onClick: openInEigenTabblad,
+                    onClick: () => openInEigenTabblad(printplekId ?? gekoppeldePrintplek ?? undefined),
                 },
                 duration: 15000,
             });
             return;
         }
-        const uitkomst = await kiesPdfMap(pdfPrinter.id);
+        const doelPrintplek = printplekId ?? gekoppeldePrintplek ?? undefined;
+        const uitkomst = await kiesPdfMap(pdfPrinter.id, doelPrintplek);
         if (uitkomst.status === "gekozen") {
             toast.success("Map gekozen", { description: `PDF's worden opgeslagen in “${uitkomst.naam}”.` });
             await laad();
@@ -113,7 +152,10 @@ export function PdfMapToestemmingBanner({ alleenActieNodig = false, zwevend = fa
         else if (uitkomst.status === "iframe-geblokkeerd") {
             toast.error("Map kiezen werkt niet in een iframe", {
                 description: "Open de app in een eigen tabblad.",
-                action: { label: "Open in eigen tabblad", onClick: openInEigenTabblad },
+                action: {
+                    label: "Open in eigen tabblad",
+                    onClick: () => openInEigenTabblad(printplekId ?? gekoppeldePrintplek ?? undefined),
+                },
                 duration: 15000,
             });
         }
@@ -121,12 +163,27 @@ export function PdfMapToestemmingBanner({ alleenActieNodig = false, zwevend = fa
             toast.error("Map kiezen is mislukt", { description: uitkomst.melding });
         }
     };
-    const icoon = toestand === "granted"
+    const icoon = inOrde
         ? ShieldCheck
         : toestand === "denied"
             ? ShieldAlert
             : FolderOpen;
     const Icoon = icoon;
+    if (!pdfPrinter) {
+        return (_jsxs("div", { role: "status", "aria-live": "polite", className: `${zwevend ? "fixed inset-x-4 top-4 z-[100] mx-auto max-w-4xl shadow-lg" : ""} flex flex-wrap items-center justify-between gap-3 rounded-lg border border-amber-300/60 bg-amber-50 p-3 dark:border-amber-700/60 dark:bg-amber-950/30`, children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(ShieldAlert, { className: "h-4 w-4 text-amber-600 dark:text-amber-400" }), _jsx("span", { className: "font-medium", children: "PDF-maptoestemming" }), _jsx("span", { className: "text-muted-foreground", children: "De virtuele \u201COpslaan als PDF\u201D-printer wordt aangemaakt of kon nog niet worden geladen." })] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                        void (async () => {
+                            try {
+                                await zorgVoorPdfPrinter();
+                                await reload(true);
+                            }
+                            catch (fout) {
+                                toast.error("PDF-printer kon niet worden aangemaakt", {
+                                    description: fout instanceof Error ? fout.message : undefined,
+                                });
+                            }
+                        })();
+                    }, children: [_jsx(FolderOpen, { className: "mr-2 h-4 w-4" }), " PDF-printer aanmaken"] })] }));
+    }
     return (_jsxs("div", { role: "status", "aria-live": "polite", className: `${inOrde
             ? "border-emerald-300/60 bg-emerald-50 dark:border-emerald-700/60 dark:bg-emerald-950/30"
             : "border-amber-300/60 bg-amber-50 dark:border-amber-700/60 dark:bg-amber-950/30"} ${zwevend
@@ -135,5 +192,7 @@ export function PdfMapToestemmingBanner({ alleenActieNodig = false, zwevend = fa
                             ? "h-4 w-4 text-emerald-600 dark:text-emerald-400"
                             : "h-4 w-4 text-amber-600 dark:text-amber-400" }), _jsx("span", { className: "font-medium", children: "PDF-maptoestemming" }), _jsxs("span", { className: "text-muted-foreground", children: [naam
                                 ? `Map “${naam}” — toestemming ${toestand === "granted" ? "verleend" : "vereist vernieuwen"}`
-                                : "Nog geen map gekozen op deze computer", !ondersteund ? " (browser ondersteunt geen mapkeuze)" : ""] })] }), _jsxs("div", { className: "flex gap-2", children: [naam ? (_jsxs(Button, { size: "sm", variant: inOrde ? "outline" : "default", onClick: () => void geefToestemming(), children: [_jsx(FolderCheck, { className: "mr-2 h-4 w-4" }), inOrde ? "Toestemming controleren" : "Maptoestemming geven"] })) : null, _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void kiesNieuweMap(), children: [_jsx(FolderOpen, { className: "mr-2 h-4 w-4" }), " ", naam ? "Andere map kiezen" : "Map kiezen"] })] })] }));
+                                : "Nog geen map gekozen op deze computer", !ondersteund ? " (browser ondersteunt geen mapkeuze)" : "", inIframe
+                                ? " — de preview draait in een iframe; de mapkeuze geldt per webadres en moet hier opnieuw worden gezet"
+                                : "", !inIframe && gekoppeldePrintplek ? " — gekoppeld aan deze printplek" : "", !inIframe && persistent === false ? " — browseropslag is niet permanent gegarandeerd" : ""] })] }), _jsxs("div", { className: "flex gap-2", children: [naam ? (_jsxs(Button, { size: "sm", variant: inOrde ? "outline" : "default", onClick: () => void geefToestemming(), children: [_jsx(FolderCheck, { className: "mr-2 h-4 w-4" }), inOrde ? "Toestemming controleren" : "Maptoestemming geven"] })) : null, _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void kiesNieuweMap(), children: [_jsx(FolderOpen, { className: "mr-2 h-4 w-4" }), " ", naam ? "Andere map kiezen" : "Map kiezen"] }), inIframe ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => openInEigenTabblad(printplekId ?? gekoppeldePrintplek ?? undefined), children: "Open in eigen tabblad" })) : null] })] }));
 }

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

@@ -0,0 +1,20 @@
+interface Props {
+    /** Print-HTML, exact zoals die ook naar de printwachtrij gaat. */
+    html: string;
+    breedteMm: number;
+    hoogteMm: number;
+    margeMm: number;
+    onControle?: (status: "controleren" | "gereed" | "afwijking", fout?: string) => void;
+}
+/**
+ * Toont het voorbeeld altijd: de print-HTML wordt direct getoond op ware
+ * papiergrootte (werkt ook binnen een shell-iframe, waar Chrome ingesloten
+ * PDF's blokkeert). De echte print-PDF blijft opvraagbaar in een eigen tabblad.
+ *
+ * Pagina's stapelen verticaal; het hele kader wordt met een CSS-schaling op
+ * de beschikbare breedte passend gemaakt, zodat het document altijd volledig
+ * zichtbaar is (met verticaal scrollen bij meerdere pagina's).
+ */
+export declare function PdfVoorbeeld({ html, breedteMm, hoogteMm, margeMm, onControle }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PdfVoorbeeld.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdfVoorbeeld.d.ts","sourceRoot":"","sources":["../../src/components/PdfVoorbeeld.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,GAAG,QAAQ,GAAG,WAAW,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACtF;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,KAAK,+BAyGrF"}

package/dist-lib/components/PdfVoorbeeld.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@flowselections/core";
+import { AlertTriangle, ExternalLink, Loader2 } from "lucide-react";
+import { maakVoorbeeldPdf } from "../lib/documentVoorbeeld.functions.js";
+/**
+ * Toont het voorbeeld altijd: de print-HTML wordt direct getoond op ware
+ * papiergrootte (werkt ook binnen een shell-iframe, waar Chrome ingesloten
+ * PDF's blokkeert). De echte print-PDF blijft opvraagbaar in een eigen tabblad.
+ *
+ * Pagina's stapelen verticaal; het hele kader wordt met een CSS-schaling op
+ * de beschikbare breedte passend gemaakt, zodat het document altijd volledig
+ * zichtbaar is (met verticaal scrollen bij meerdere pagina's).
+ */
+export function PdfVoorbeeld({ html, breedteMm, hoogteMm, margeMm, onControle }) {
+    const renderVolgorde = useRef(0);
+    const controleCallback = useRef(onControle);
+    const [paginas, setPaginas] = useState([]);
+    const [bezigPdf, setBezigPdf] = useState(false);
+    const [fout, setFout] = useState(null);
+    const [pdfBase64, setPdfBase64] = useState(null);
+    useEffect(() => {
+        controleCallback.current = onControle;
+    }, [onControle]);
+    useEffect(() => {
+        const volgorde = ++renderVolgorde.current;
+        const timer = window.setTimeout(() => {
+            setBezigPdf(true);
+            setFout(null);
+            controleCallback.current?.("controleren");
+            void maakVoorbeeldPdf({ data: { html, breedteMm, hoogteMm, margeMm } })
+                .then(async (res) => {
+                if (volgorde !== renderVolgorde.current)
+                    return;
+                const bin = atob(res.pdfBase64);
+                const bytes = new Uint8Array(bin.length);
+                for (let i = 0; i < bin.length; i += 1)
+                    bytes[i] = bin.charCodeAt(i);
+                const pdfjs = await import("pdfjs-dist");
+                pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString();
+                const taak = pdfjs.getDocument({ data: bytes });
+                const pdf = await taak.promise;
+                const nieuw = [];
+                for (let nummer = 1; nummer <= pdf.numPages; nummer += 1) {
+                    const pagina = await pdf.getPage(nummer);
+                    const viewport = pagina.getViewport({ scale: 1.5 });
+                    const canvas = document.createElement("canvas");
+                    canvas.width = viewport.width;
+                    canvas.height = viewport.height;
+                    const context = canvas.getContext("2d");
+                    if (!context)
+                        throw new Error("De afdrukpagina kon niet worden getoond.");
+                    await pagina.render({ canvas, canvasContext: context, viewport }).promise;
+                    nieuw.push(canvas.toDataURL("image/png"));
+                }
+                if (volgorde !== renderVolgorde.current)
+                    return;
+                setPaginas(nieuw);
+                setPdfBase64(res.pdfBase64);
+                controleCallback.current?.("gereed");
+            })
+                .catch((e) => {
+                if (volgorde !== renderVolgorde.current)
+                    return;
+                const melding = e instanceof Error ? e.message : "Afdrukcontrole mislukt";
+                setPaginas([]);
+                setPdfBase64(null);
+                setFout(melding);
+                controleCallback.current?.("afwijking", melding);
+            })
+                .finally(() => {
+                if (volgorde === renderVolgorde.current)
+                    setBezigPdf(false);
+            });
+        }, 350);
+        return () => window.clearTimeout(timer);
+    }, [html, breedteMm, hoogteMm, margeMm]);
+    const openPdf = async () => {
+        if (!pdfBase64)
+            return;
+        try {
+            const bin = atob(pdfBase64);
+            const bytes = new Uint8Array(bin.length);
+            for (let i = 0; i < bin.length; i += 1)
+                bytes[i] = bin.charCodeAt(i);
+            const url = URL.createObjectURL(new Blob([bytes], { type: "application/pdf" }));
+            window.open(url, "_blank", "noopener,noreferrer");
+            setTimeout(() => URL.revokeObjectURL(url), 60000);
+        }
+        catch (e) {
+            setFout(e instanceof Error ? e.message : "PDF kon niet worden geopend");
+        }
+    };
+    return (_jsxs("div", { className: "relative h-full w-full overflow-hidden", children: [_jsx("div", { className: "h-full w-full overflow-y-auto overflow-x-hidden rounded-md bg-muted p-3", children: _jsxs("div", { className: "mx-auto flex max-w-full flex-col items-center gap-4", children: [paginas.map((src, index) => (_jsx("img", { src: src, alt: `Afdrukpagina ${index + 1}`, className: "h-auto max-w-full border bg-background shadow-sm" }, `${index}-${src.length}`))), bezigPdf ? _jsx(Loader2, { className: "mt-8 h-6 w-6 animate-spin text-muted-foreground" }) : null, fout ? _jsxs("div", { className: "mt-8 flex max-w-md items-start gap-2 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), fout] }) : null] }) }), _jsx("div", { className: "pointer-events-none absolute right-3 top-3 flex flex-col items-end gap-2", children: _jsxs(Button, { size: "sm", variant: "outline", className: "pointer-events-auto", onClick: () => void openPdf(), disabled: bezigPdf || !pdfBase64, children: [bezigPdf ? (_jsx(Loader2, { className: "mr-2 h-3 w-3 animate-spin" })) : (_jsx(ExternalLink, { className: "mr-2 h-3 w-3" })), "Print-PDF openen"] }) })] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"PrintProgrammaUitleg.d.ts","sourceRoot":"","sources":["../../src/components/PrintProgrammaUitleg.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,oBAAoB,CAAC,EAAE,OAAe,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,+BAmC9E;AAED,wBAAgB,YAAY,gCAa3B"}
+{"version":3,"file":"PrintProgrammaUitleg.d.ts","sourceRoot":"","sources":["../../src/components/PrintProgrammaUitleg.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,oBAAoB,CAAC,EAAE,OAAe,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,+BAmC9E;AAED,wBAAgB,YAAY,gCAc3B"}

package/dist-lib/components/PrintProgrammaUitleg.js

@@ -15,5 +15,5 @@ export function PrintProgrammaUitleg({ compact = false }) {
     return (_jsxs("div", { className: "bg-muted/40 space-y-4 rounded-xl border p-5", children: [!compact && (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-background rounded-lg border p-2", children: _jsx(MonitorSmartphone, { className: "text-muted-foreground h-5 w-5" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: "We zien nog geen printers" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Zet de computer klaar in drie korte stappen." })] })] })), _jsx("ol", { className: "space-y-3", children: STAPPEN.map((tekst, i) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { className: "bg-background text-foreground flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs font-medium", children: i + 1 }), _jsx("span", { className: "text-sm", children: tekst })] }, tekst))) }), _jsx(Button, { asChild: true, variant: "outline", children: _jsxs("a", { href: DOWNLOAD_URL, target: "_blank", rel: "noreferrer", children: [_jsx(Download, { className: "mr-2 h-4 w-4" }), " Printprogramma downloaden"] }) })] }));
 }
 export function WerktHetNiet() {
-    return (_jsxs("details", { className: "group rounded-lg border p-3", children: [_jsxs("summary", { className: "flex cursor-pointer items-center gap-2 text-sm font-medium", children: [_jsx(HelpCircle, { className: "text-muted-foreground h-4 w-4" }), " Werkt het niet?"] }), _jsxs("ul", { className: "text-muted-foreground mt-3 space-y-2 text-sm", children: [_jsx("li", { children: "De computer staat uit of is in slaapstand." }), _jsx("li", { children: "Het printprogramma is nog niet gestart op die computer." }), _jsx("li", { children: "Er is ingelogd met andere gegevens dan die u van uw beheerder kreeg." })] })] }));
+    return (_jsxs("details", { className: "group rounded-lg border p-3", children: [_jsxs("summary", { className: "flex cursor-pointer items-center gap-2 text-sm font-medium", children: [_jsx(HelpCircle, { className: "text-muted-foreground h-4 w-4" }), " Werkt het niet?"] }), _jsxs("ul", { className: "text-muted-foreground mt-3 space-y-2 text-sm", children: [_jsx("li", { children: "De computer staat uit, is in slaapstand of heeft geen internet." }), _jsx("li", { children: "Het printprogramma is nog niet gestart op die computer." }), _jsx("li", { children: "Er is ingelogd met een eigen/ander PrintNode-account in plaats van de beheerdergegevens \u2014 alleen computers onder het gekoppelde account verschijnen hier." }), _jsx("li", { children: "De computer heet anders dan je verwacht: de naam in de lijst is de naam zoals macOS die aan PrintNode doorgeeft." })] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PrintQueuePage.d.ts","sourceRoot":"","sources":["../../src/components/PrintQueuePage.tsx"],"names":[],"mappings":"AAoFA,wBAAgB,cAAc,gCAsT7B"}
+{"version":3,"file":"PrintQueuePage.d.ts","sourceRoot":"","sources":["../../src/components/PrintQueuePage.tsx"],"names":[],"mappings":"AAuFA,wBAAgB,cAAc,gCA2X7B"}