@flowselections/layout-maker 1.38.4 → 1.45.8

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

@@ -1,8 +1,8 @@
-export declare function NetwerkPrintersDialog({ open, onOpenChange, huidigePrinterId, huidigePrinterNaam, onKlaar, }: {
-    open: boolean;
-    onOpenChange: (v: boolean) => void;
-    huidigePrinterId?: string | null;
-    huidigePrinterNaam?: string | null;
-    onKlaar?: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function NetwerkPrintersDialog({ open, onOpenChange, huidigePrinterId, huidigePrinterNaam, onKlaar, }: {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    huidigePrinterId?: string | null;
+    huidigePrinterNaam?: string | null;
+    onKlaar?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NetwerkPrintersDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PakbonBuilderPage.d.ts","sourceRoot":"","sources":["../../src/components/PakbonBuilderPage.tsx"],"names":[],"mappings":"AA+BA,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,+BAqKvF"}
+{"version":3,"file":"PakbonBuilderPage.d.ts","sourceRoot":"","sources":["../../src/components/PakbonBuilderPage.tsx"],"names":[],"mappings":"AA+BA,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,+BA8LvF"}

package/dist-lib/components/PakbonBuilderPage.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { Link } from "@tanstack/react-router";
 import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast, } from "@flowselections/core";
-import { ArrowLeft, Loader2, Printer, Save } from "lucide-react";
+import { AlertTriangle, ArrowLeft, CheckCircle2, Loader2, Printer, Save } from "lucide-react";
 import { PakbonSectiesPanel } from "./PakbonSectiesPanel.js";
-import { PakbonPreview } from "./PakbonPreview.js";
+import { PdfVoorbeeld } from "./PdfVoorbeeld.js";
 import { FormaatOrientatieBar } from "./FormaatOrientatieBar.js";
-import { leesPakbonConfig } from "../lib/pakbonBuilder.js";
+import { leesPakbonConfig, pickMethode } from "../lib/pakbonBuilder.js";
 import { renderPakbonDocument, voorbeeldPakbonOrder } from "../lib/pakbonHtml.js";
 import { voorbeeldPrint } from "../lib/voorbeeldPrint.js";
 import { haalPrintLogos } from "../lib/logoLibrary.js";
@@ -21,14 +21,22 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
     const [bezig, setBezig] = useState(false);
     const [printen, setPrinten] = useState(false);
     const [voorbeeldVariant, setVoorbeeldVariant] = useState("full_cart");
+    const [logos, setLogos] = useState([]);
+    const [controle, setControle] = useState("controleren");
+    useEffect(() => {
+        void haalPrintLogos()
+            .then((l) => setLogos(Array.isArray(l) ? l : []))
+            .catch(() => setLogos([]));
+    }, []);
     useEffect(() => {
         if (layout)
             setConfig(leesPakbonConfig(layout.config));
     }, [layout?.id]);
     const breedte = useMemo(() => (layout?.orientatie === "landscape" ? layout?.hoogte_mm : layout?.breedte_mm) ?? 210, [layout]);
     const hoogte = useMemo(() => (layout?.orientatie === "landscape" ? layout?.breedte_mm : layout?.hoogte_mm) ?? 297, [layout]);
+    const marge = Number(layout?.marge_boven ?? 10);
     const opslaan = async () => {
-        if (!layout || !config)
+        if (!layout || !config || controle !== "gereed")
             return;
         setBezig(true);
         try {
@@ -42,19 +50,29 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
             setBezig(false);
         }
     };
-    const voorbeeldPrinten = async () => {
+    // Eén bron voor scherm én print: exact dezelfde HTML gaat naar de
+    // server-PDF van het voorbeeld en naar de printopdracht.
+    const voorbeeldHtml = useMemo(() => {
         if (!config)
+            return "";
+        const beideVarianten = voorbeeldVariant === "full_cart" &&
+            pickMethode(Array.isArray(config?.secties) ? config.secties : []) === "beide";
+        return renderPakbonDocument(config, voorbeeldPakbonOrder(), {
+            logos: logos,
+            breedteMm: breedte,
+            hoogteMm: hoogte,
+            margeMm: marge,
+            layoutVariant: voorbeeldVariant,
+            voorbeeldBeideVarianten: beideVarianten,
+            titel: layout?.naam ?? "Pakbon",
+        });
+    }, [config, logos, breedte, hoogte, marge, voorbeeldVariant, layout?.naam]);
+    const voorbeeldPrinten = async () => {
+        if (!config || controle !== "gereed")
             return;
         setPrinten(true);
         try {
-            const logos = await haalPrintLogos();
-            const html = renderPakbonDocument(config, voorbeeldPakbonOrder(), {
-                logos,
-                breedteMm: breedte,
-                hoogteMm: hoogte,
-                layoutVariant: voorbeeldVariant,
-                titel: layout?.naam ?? "Pakbon",
-            });
+            const html = voorbeeldHtml;
             await voorbeeldPrint({
                 ...(layout ?? {}),
                 id: layout?.id ?? layoutId,
@@ -76,5 +94,5 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
         return _jsx("main", { className: "p-6 text-sm text-muted-foreground", children: "Layout laden\u2026" });
     if (!layout || !config)
         return _jsx("main", { className: "p-6 text-sm text-muted-foreground", children: "Layout niet gevonden." });
-    return (_jsxs("main", { className: "space-y-4 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsxs(Link, { to: "/layouts-printers", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " Layouts"] }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold", children: layout.naam }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Pakbon opbouwen uit secties \u00B7 ", config.secties.length, " secties"] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutPrinterSelect, { layoutId: layoutId }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void voorbeeldPrinten(), disabled: printen, children: [printen ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-4 w-4" })), "Voorbeeld printen"] }), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { to: "/layouts-printers/blokken/$layoutId", params: { layoutId }, children: "Blokken ontwerpen" }) }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig, children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] })] }), _jsx(FormaatOrientatieBar, { layout: layout, onChange: (patch) => setLayout((l) => (l ? { ...l, ...patch } : l)) }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[400px_1fr]", children: [_jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden lg:sticky lg:top-4", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Secties" }), _jsx(CardDescription, { children: "Voeg blokken toe, wijzig de volgorde en stel elk blok afzonderlijk in." })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(PakbonSectiesPanel, { config: config, onChange: setConfig }) })] }), _jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden", children: [_jsxs(CardHeader, { className: "flex-row items-center justify-between space-y-0 pb-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Live voorbeeld" }), _jsx(CardDescription, { children: "Bekijk een volle kar of een deelkar met alleen de te verzamelen fusten." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Select, { value: voorbeeldVariant, onValueChange: (value) => setVoorbeeldVariant(value), children: [_jsx(SelectTrigger, { className: "w-48", "aria-label": "Voorbeeldvariant", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "full_cart", children: "Volle kar" }), _jsx(SelectItem, { value: "partial_order", children: "Deelkar" })] })] }), _jsx(Badge, { variant: "secondary", children: "Direct bijgewerkt" })] })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-hidden", children: _jsx("div", { className: "h-full overflow-auto rounded-md border bg-muted/30 p-2", children: _jsx(PakbonPreview, { config: config, breedteMm: breedte, hoogteMm: hoogte, variant: voorbeeldVariant }) }) })] })] })] }));
+    return (_jsxs("main", { className: "space-y-4 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsxs(Link, { to: "/layouts-printers", children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " Layouts"] }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold", children: layout.naam }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Pakbon opbouwen uit secties \u00B7 ", config.secties.length, " secties"] })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutPrinterSelect, { layoutId: layoutId }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void voorbeeldPrinten(), disabled: printen || controle !== "gereed", children: [printen ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Printer, { className: "mr-2 h-4 w-4" })), "Voorbeeld printen"] }), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { to: "/layouts-printers/blokken/$layoutId", params: { layoutId }, children: "Blokken ontwerpen" }) }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig || controle !== "gereed", children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] })] }), _jsx(FormaatOrientatieBar, { layout: layout, onChange: (patch) => setLayout((l) => (l ? { ...l, ...patch } : l)) }), _jsxs("div", { className: "grid items-start gap-4 lg:grid-cols-[400px_1fr]", children: [_jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden lg:sticky lg:top-4", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Secties" }), _jsx(CardDescription, { children: "Voeg blokken toe, wijzig de volgorde en stel elk blok afzonderlijk in." })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(PakbonSectiesPanel, { config: config, onChange: setConfig }) })] }), _jsxs(Card, { className: "flex h-[calc(100vh-14rem)] min-h-[420px] flex-col overflow-hidden", children: [_jsxs(CardHeader, { className: "flex-row items-center justify-between space-y-0 pb-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Live voorbeeld" }), _jsx(CardDescription, { children: "Bekijk een volle kar of een deelkar met alleen de te verzamelen fusten." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Select, { value: voorbeeldVariant, onValueChange: (value) => setVoorbeeldVariant(value), children: [_jsx(SelectTrigger, { className: "w-48", "aria-label": "Voorbeeldvariant", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "full_cart", children: "Volle kar" }), _jsx(SelectItem, { value: "partial_order", children: "Deelkar" })] })] }), _jsxs(Badge, { variant: controle === "afwijking" ? "destructive" : "secondary", children: [controle === "controleren" ? _jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }) : controle === "gereed" ? _jsx(CheckCircle2, { className: "mr-1 h-3 w-3" }) : _jsx(AlertTriangle, { className: "mr-1 h-3 w-3" }), controle === "controleren" ? "Controleren" : controle === "gereed" ? "Afdruk gereed" : "Afwijking gevonden"] })] })] }), _jsx(CardContent, { className: "min-h-0 flex-1 overflow-hidden", children: _jsx("div", { className: "h-full rounded-md border bg-muted/30 p-2", children: voorbeeldHtml ? (_jsx(PdfVoorbeeld, { html: voorbeeldHtml, breedteMm: breedte, hoogteMm: hoogte, margeMm: marge, onControle: (status) => setControle(status) })) : null }) })] })] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PakbonPreview.d.ts","sourceRoot":"","sources":["../../src/components/PakbonPreview.tsx"],"names":[],"mappings":"AAIA,OAAO,EAsBL,KAAK,YAAY,EAEjB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACzB,MAAM,sBAAsB,CAAC;AA6B9B,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAe,EACf,QAAc,EACd,OAAc,GACf,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oFAAoF;IACpF,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACtC,+BAiJA;AAiLD,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"}
+{"version":3,"file":"PakbonPreview.d.ts","sourceRoot":"","sources":["../../src/components/PakbonPreview.tsx"],"names":[],"mappings":"AAKA,OAAO,EAyBL,KAAK,YAAY,EAEjB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACzB,MAAM,sBAAsB,CAAC;AA6B9B,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAe,EACf,QAAc,EACd,OAAc,GACf,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oFAAoF;IACpF,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACtC,+BAiJA;AAiLD,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

@@ -3,7 +3,8 @@ import { useMemo } from "react";
 import { PaginaDocument } from "./PaginaDocument.js";
 import { useLogos } from "../lib/logoLibrary.js";
 import { code128Bars } from "../lib/code128.js";
-import { DEMO_ORDER, deelkarVoorbeeldOrder, conditieContext, groepeerIdentiekeKarren, groepeerIdentiekeLagen, karBundelTekst, fustVerzamellijst, pickMethode, pakbonLayoutVariant, productVeldBreedtes, sectieOnderdruktVoorVariant, kolomLabel, laagBundelTekst, sectieZichtbaar, sorteerProducten, totalen, vulVeldcodes, } from "../lib/pakbonBuilder.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);
@@ -146,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}` })), kar.barcode ? (_jsxs("div", { className: "space-y-1 pt-2", 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] }));
+    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, }) {
@@ -214,6 +215,21 @@ 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") === "kar")
                 return null;
@@ -279,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");
@@ -372,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,8 +1,10 @@
-import { type PakbonConfig, type PakbonSectie, type PickMethode } 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, }: {

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,EAEjB,KAAK,WAAW,EACjB,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,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"}
+{"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);

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