@flowselections/layout-maker 1.3.2

package/dist-lib/components/LayoutsPage.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea, toast, } from "@flowselections/core";
+import { Copy, FileText, Images, Pencil, Plus, Search, Settings2, Trash2 } from "lucide-react";
+import { dupliceerLayout, maakLayout, updateLayout, useLayouts, verwijderLayout, } from "../lib/useDocumentData";
+import { DOCUMENT_TYPES, PAPIERFORMATEN, documentTypeLabel } from "../lib/documentTypes";
+import { DOCUMENT_PROFIELEN, documentProfiel, primaireProfielen, standaardConfig, } from "../lib/documentProfiles";
+function klantOntwerpLayout(l) {
+    if (l.documenttype !== "sticker")
+        return false;
+    const cfg = (l.config ?? {});
+    return Boolean(cfg?.klantlayout?.gebruik_klantlayout);
+}
+export function LayoutsPage() {
+    const { layouts, loading, reload } = useLayouts();
+    const navigate = useNavigate();
+    const [zoek, setZoek] = useState("");
+    const [typeFilter, setTypeFilter] = useState("alle");
+    const [statusFilter, setStatusFilter] = useState("alle");
+    const [wizardOpen, setWizardOpen] = useState(false);
+    const [stap, setStap] = useState(1);
+    const [naam, setNaam] = useState("");
+    const [documenttype, setDocumenttype] = useState("pakbon");
+    const [omschrijving, setOmschrijving] = useState("");
+    const [formaatCode, setFormaatCode] = useState("A4");
+    const [orientatie, setOrientatie] = useState("portrait");
+    const [klantLayout, setKlantLayout] = useState(false);
+    const [bezig, setBezig] = useState(false);
+    const klantOntwerp = documenttype === "sticker" && klantLayout;
+    // Bewerken van een bestaande layout
+    const [bewerkId, setBewerkId] = useState(null);
+    const [bNaam, setBNaam] = useState("");
+    const [bType, setBType] = useState("pakbon");
+    const [bOms, setBOms] = useState("");
+    const [bFormaat, setBFormaat] = useState("A4");
+    const [bOrientatie, setBOrientatie] = useState("portrait");
+    const [bBezig, setBBezig] = useState(false);
+    const openBewerken = (l) => {
+        setBewerkId(l.id);
+        setBNaam(l.naam ?? "");
+        setBType(l.documenttype);
+        setBOms(l.omschrijving ?? "");
+        setBFormaat(l.papierformaat ?? "A4");
+        setBOrientatie(l.orientatie === "landscape" ? "landscape" : "portrait");
+    };
+    const bewaarBewerking = async () => {
+        if (!bewerkId)
+            return;
+        if (!bNaam.trim()) {
+            toast.error("Geef de layout een naam");
+            return;
+        }
+        const profiel = documentProfiel(bType);
+        const formaat = profiel.formaten.find((f) => f.code === bFormaat) ??
+            PAPIERFORMATEN.find((f) => f.code === bFormaat) ??
+            profiel.formaten[0];
+        setBBezig(true);
+        try {
+            await updateLayout(bewerkId, {
+                naam: bNaam.trim(),
+                documenttype: bType,
+                omschrijving: bOms.trim(),
+                papierformaat: formaat.code,
+                breedte_mm: formaat.breedte,
+                hoogte_mm: formaat.hoogte,
+                orientatie: bOrientatie,
+            });
+            toast.success("Layout bijgewerkt");
+            setBewerkId(null);
+            void reload();
+        }
+        catch {
+            toast.error("Opslaan mislukt");
+        }
+        finally {
+            setBBezig(false);
+        }
+    };
+    const gefilterd = useMemo(() => layouts.filter((l) => {
+        const q = zoek.trim().toLowerCase();
+        if (q && !`${l.naam} ${l.omschrijving ?? ""}`.toLowerCase().includes(q))
+            return false;
+        if (typeFilter !== "alle" && l.documenttype !== typeFilter)
+            return false;
+        if (statusFilter === "actief" && !l.actief)
+            return false;
+        if (statusFilter === "inactief" && l.actief)
+            return false;
+        return true;
+    }), [layouts, zoek, typeFilter, statusFilter]);
+    const aanmaken = async () => {
+        if (!naam.trim()) {
+            toast.error("Geef de layout een naam");
+            return;
+        }
+        const profiel = documentProfiel(documenttype);
+        const formaat = profiel.formaten.find((f) => f.code === formaatCode) ??
+            PAPIERFORMATEN.find((f) => f.code === formaatCode) ??
+            profiel.formaten[0];
+        setBezig(true);
+        try {
+            const id = await maakLayout({
+                naam: naam.trim(),
+                documenttype,
+                omschrijving: omschrijving.trim(),
+                papierformaat: formaat.code,
+                breedte_mm: formaat.breedte,
+                hoogte_mm: formaat.hoogte,
+                orientatie,
+                config: (() => {
+                    const c = standaardConfig(profiel);
+                    if (documenttype === "sticker") {
+                        c.klantlayout = { ...(c.klantlayout ?? {}), gebruik_klantlayout: klantLayout };
+                    }
+                    return c;
+                })(),
+            });
+            toast.success("Layout aangemaakt");
+            setWizardOpen(false);
+            setStap(1);
+            setNaam("");
+            setOmschrijving("");
+            const wasKlantOntwerp = klantOntwerp;
+            setKlantLayout(false);
+            void reload();
+            if (wasKlantOntwerp)
+                return;
+            void navigate(documenttype === "productiebon"
+                ? { to: "/layouts-printers/productiebon/$layoutId", params: { layoutId: id } }
+                : { to: "/layouts-printers/pakbon/$layoutId", params: { layoutId: id } });
+        }
+        catch {
+            toast.error("Aanmaken mislukt");
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    return (_jsxs("main", { className: "p-6 space-y-6", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: "Documentlayouts" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Ontwerp pakbonnen, facturen, etiketten en alle andere documenten." })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => navigate({ to: "/layouts-printers/logos" }), children: [_jsx(Images, { className: "mr-2 h-4 w-4" }), " Logo's"] }), _jsxs(Button, { onClick: () => setWizardOpen(true), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Nieuwe layout"] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Overzicht" }), _jsx(CardDescription, { children: loading ? "Laden…" : `${gefilterd.length} van ${layouts.length} layouts` })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-4", children: [_jsxs("div", { className: "relative md:col-span-2", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { className: "pl-9", placeholder: "Zoek op naam of omschrijving", value: zoek, onChange: (e) => setZoek(e.target.value) })] }), _jsxs(Select, { value: typeFilter, onValueChange: setTypeFilter, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Documenttype" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Alle documenttypes" }), DOCUMENT_TYPES.map((d) => (_jsx(SelectItem, { value: d.value, children: d.label }, d.value)))] })] }), _jsxs(Select, { value: statusFilter, onValueChange: setStatusFilter, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Status" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Alle statussen" }), _jsx(SelectItem, { value: "actief", children: "Actief" }), _jsx(SelectItem, { value: "inactief", children: "Inactief" })] })] })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Naam" }), _jsx(TableHead, { children: "Documenttype" }), _jsx(TableHead, { children: "Formaat" }), _jsx(TableHead, { children: "Versie" }), _jsx(TableHead, { children: "Actief" }), _jsx(TableHead, { className: "text-right", children: "Acties" })] }) }), _jsxs(TableBody, { children: [gefilterd.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 6, className: "py-10 text-center text-sm text-muted-foreground", children: "Geen layouts gevonden." }) })), gefilterd.map((l) => (_jsxs(TableRow, { children: [_jsxs(TableCell, { children: [_jsxs("div", { className: "flex items-center gap-2 font-medium", children: [_jsx(FileText, { className: "h-4 w-4 text-muted-foreground" }), l.naam, l.is_standaard && _jsx(Badge, { variant: "secondary", children: "Standaard" })] }), l.omschrijving && (_jsx("span", { className: "text-xs text-muted-foreground", children: l.omschrijving }))] }), _jsx(TableCell, { children: documentTypeLabel(l.documenttype) }), _jsxs(TableCell, { className: "text-sm text-muted-foreground", children: [l.papierformaat, " \u00B7 ", Number(l.breedte_mm), " \u00D7 ", Number(l.hoogte_mm), " mm"] }), _jsxs(TableCell, { children: ["v", l.huidige_versie] }), _jsx(TableCell, { children: _jsx(Switch, { checked: l.actief, onCheckedChange: async (v) => {
+                                                                await updateLayout(l.id, { actief: v });
+                                                                void reload();
+                                                            } }) }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [klantOntwerpLayout(l) ? (_jsx(Badge, { variant: "outline", children: "Ontwerp van klant" })) : (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(l.documenttype === "productiebon"
+                                                                        ? {
+                                                                            to: "/layouts-printers/productiebon/$layoutId",
+                                                                            params: { layoutId: l.id },
+                                                                        }
+                                                                        : { to: "/layouts-printers/pakbon/$layoutId", params: { layoutId: l.id } }), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), " Ontwerpen"] })), _jsx(Button, { variant: "ghost", size: "sm", title: "Naam, documenttype en formaat wijzigen", onClick: () => openBewerken(l), children: _jsx(Settings2, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: async () => {
+                                                                        try {
+                                                                            await dupliceerLayout(l.id);
+                                                                            toast.success("Layout gedupliceerd");
+                                                                            void reload();
+                                                                        }
+                                                                        catch {
+                                                                            toast.error("Dupliceren mislukt");
+                                                                        }
+                                                                    }, children: _jsx(Copy, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: async () => {
+                                                                        try {
+                                                                            await verwijderLayout(l.id);
+                                                                            toast.success("Layout verwijderd");
+                                                                            void reload();
+                                                                        }
+                                                                        catch {
+                                                                            toast.error("Verwijderen mislukt");
+                                                                        }
+                                                                    }, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }) })] }, l.id)))] })] })] })] }), _jsx(Dialog, { open: wizardOpen, onOpenChange: (v) => {
+                    setWizardOpen(v);
+                    if (!v)
+                        setStap(1);
+                }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: stap === 1 ? "Welk document wil je ontwerpen?" : "Nieuwe layout" }), _jsx(DialogDescription, { children: stap === 1
+                                        ? "Iedere documentsoort heeft eigen velden, instellingen en printregels."
+                                        : `${documentProfiel(documenttype).label} — kies naam en formaat.` })] }), stap === 1 ? (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: primaireProfielen().map((p) => (_jsxs("button", { type: "button", onClick: () => {
+                                            setDocumenttype(p.id);
+                                            setFormaatCode(p.standaardFormaat);
+                                            setOrientatie(p.standaardOrientatie);
+                                            setStap(2);
+                                        }, className: "rounded-md border p-4 text-left transition hover:border-primary hover:bg-accent", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileText, { className: "h-4 w-4 text-muted-foreground" }), _jsx("span", { className: "font-medium", children: p.label })] }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: p.omschrijving })] }, p.id))) }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Andere documentsoort" }), _jsxs(Select, { value: documenttype, onValueChange: (v) => {
+                                                const p = documentProfiel(v);
+                                                setDocumenttype(v);
+                                                setFormaatCode(p.standaardFormaat);
+                                                setOrientatie(p.standaardOrientatie);
+                                                setStap(2);
+                                            }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies documentsoort" }) }), _jsx(SelectContent, { children: DOCUMENT_PROFIELEN.filter((p) => !p.primair).map((p) => (_jsx(SelectItem, { value: p.id, children: p.label }, p.id))) })] })] })] })) : (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "l-naam", children: "Naam" }), _jsx(Input, { id: "l-naam", value: naam, onChange: (e) => setNaam(e.target.value), placeholder: `${documentProfiel(documenttype).label} 2026` })] }), documenttype === "sticker" && (_jsxs("div", { className: "flex items-start justify-between gap-4 rounded-lg border p-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "l-klantlayout", children: "Kies altijd de layout van de klant" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "De klant levert het ontwerp aan. Formaat en ontwerpen zijn dan niet nodig." })] }), _jsx(Switch, { id: "l-klantlayout", checked: klantLayout, onCheckedChange: setKlantLayout })] })), !klantOntwerp && (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Formaat" }), _jsxs(Select, { value: formaatCode, onValueChange: setFormaatCode, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: documentProfiel(documenttype).formaten.map((f) => (_jsx(SelectItem, { value: f.code, children: f.label }, f.code))) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Ori\u00EBntatie" }), _jsxs(Select, { value: orientatie, onValueChange: (v) => setOrientatie(v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "portrait", children: "Staand" }), _jsx(SelectItem, { value: "landscape", children: "Liggend" })] })] })] })] })), _jsx(Separator, {}), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "l-oms", children: "Omschrijving" }), _jsx(Textarea, { id: "l-oms", value: omschrijving, onChange: (e) => setOmschrijving(e.target.value), placeholder: "Waar wordt dit document voor gebruikt?" })] })] })), _jsx(DialogFooter, { children: stap === 2 ? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setStap(1), children: "Vorige" }), _jsx(Button, { onClick: aanmaken, disabled: bezig, children: klantOntwerp ? "Aanmaken" : "Aanmaken en ontwerpen" })] })) : (_jsx(Button, { variant: "outline", onClick: () => setWizardOpen(false), children: "Annuleren" })) })] }) }), _jsx(Dialog, { open: bewerkId !== null, onOpenChange: (v) => !v && setBewerkId(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Layout wijzigen" }), _jsx(DialogDescription, { children: "Pas de naam, het documenttype en het formaat aan." })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "b-naam", children: "Naam" }), _jsx(Input, { id: "b-naam", value: bNaam, onChange: (e) => setBNaam(e.target.value) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Documenttype" }), _jsxs(Select, { value: bType, onValueChange: (v) => {
+                                                const p = documentProfiel(v);
+                                                setBType(v);
+                                                if (!p.formaten.some((f) => f.code === bFormaat)) {
+                                                    setBFormaat(p.standaardFormaat);
+                                                }
+                                            }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: DOCUMENT_PROFIELEN.map((p) => (_jsx(SelectItem, { value: p.id, children: p.label }, p.id))) })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Formaat" }), _jsxs(Select, { value: bFormaat, onValueChange: setBFormaat, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: (() => {
+                                                                const lijst = documentProfiel(bType).formaten;
+                                                                const extra = lijst.some((f) => f.code === bFormaat)
+                                                                    ? []
+                                                                    : PAPIERFORMATEN.filter((f) => f.code === bFormaat);
+                                                                return [...lijst, ...extra].map((f) => (_jsx(SelectItem, { value: f.code, children: f.label }, f.code)));
+                                                            })() })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Ori\u00EBntatie" }), _jsxs(Select, { value: bOrientatie, onValueChange: (v) => setBOrientatie(v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "portrait", children: "Staand" }), _jsx(SelectItem, { value: "landscape", children: "Liggend" })] })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "b-oms", children: "Omschrijving" }), _jsx(Textarea, { id: "b-oms", value: bOms, onChange: (e) => setBOms(e.target.value) })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setBewerkId(null), children: "Annuleren" }), _jsx(Button, { onClick: bewaarBewerking, disabled: bBezig, children: "Opslaan" })] })] }) })] }));
+}

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

@@ -0,0 +1,7 @@
+import { type LogoModel } from "../lib/logoLibrary";
+export declare function LogoBibliotheekDialog({ open, onOpenChange, onKies, }: {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    onKies: (logo: LogoModel) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=LogoBibliotheekDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogoBibliotheekDialog.d.ts","sourceRoot":"","sources":["../../src/components/LogoBibliotheekDialog.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGpG,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,YAAY,EACZ,MAAM,GACP,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACnC,+BAgGA"}

package/dist-lib/components/LogoBibliotheekDialog.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Badge, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
+import { LOGO_CATEGORIEEN, logoCategorieLabel, useLogos } from "../lib/logoLibrary";
+import { LogoThumbnail } from "./LogosPage";
+export function LogoBibliotheekDialog({ open, onOpenChange, onKies, }) {
+    const { logos, loading } = useLogos();
+    const [zoek, setZoek] = useState("");
+    const [categorie, setCategorie] = useState("alle");
+    const [gekozen, setGekozen] = useState(null);
+    const zichtbaar = useMemo(() => {
+        const q = zoek.trim().toLowerCase();
+        return logos.filter((l) => (categorie === "alle" || l.categorie === categorie) && (!q || l.naam.toLowerCase().includes(q)));
+    }, [logos, zoek, categorie]);
+    const bevestig = () => {
+        const logo = logos.find((l) => l.id === gekozen);
+        if (!logo)
+            return;
+        onKies(logo);
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-3xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Logo Bibliotheek" }), _jsx(DialogDescription, { children: "Kies een logo. Het element blijft gekoppeld aan de bibliotheek, dus wijzigingen werken automatisch door." })] }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Input, { placeholder: "Zoek op naam\u2026", value: zoek, onChange: (e) => setZoek(e.target.value), className: "max-w-xs" }), _jsxs(Select, { value: categorie, onValueChange: setCategorie, children: [_jsx(SelectTrigger, { className: "w-48", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Alle categorie\u00EBn" }), LOGO_CATEGORIEEN.map((c) => (_jsx(SelectItem, { value: c.value, children: c.label }, c.value)))] })] })] }), _jsxs("div", { className: "grid max-h-96 grid-cols-2 gap-3 overflow-auto sm:grid-cols-3", children: [loading && _jsx("p", { className: "text-sm text-muted-foreground", children: "Laden\u2026" }), !loading && zichtbaar.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen logo's in de bibliotheek." })), zichtbaar.map((l) => (_jsxs("button", { type: "button", onClick: () => setGekozen(l.id), onDoubleClick: () => {
+                                setGekozen(l.id);
+                                onKies(l);
+                                onOpenChange(false);
+                            }, className: `flex flex-col items-start gap-2 rounded-md border p-3 text-left transition hover:bg-accent ${gekozen === l.id ? "border-primary ring-2 ring-primary" : ""}`, children: [_jsx(LogoThumbnail, { logo: l, className: "h-16 w-full" }), _jsx("span", { className: "text-sm font-medium", children: l.naam }), _jsxs("div", { className: "flex flex-wrap gap-1", children: [_jsx(Badge, { variant: "outline", children: logoCategorieLabel(l.categorie) }), _jsx(Badge, { variant: "secondary", className: "uppercase", children: l.bestandstype })] })] }, l.id)))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Annuleren" }), _jsx(Button, { onClick: bevestig, disabled: !gekozen, children: "Logo gebruiken" })] })] }) }));
+}

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

@@ -0,0 +1,7 @@
+import { type LogoModel } from "../lib/logoLibrary";
+export declare function LogoThumbnail({ logo, className }: {
+    logo: LogoModel;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function LogosPage(): import("react").JSX.Element;
+//# sourceMappingURL=LogosPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogosPage.d.ts","sourceRoot":"","sources":["../../src/components/LogosPage.tsx"],"names":[],"mappings":"AAiCA,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,oBAAoB,CAAC;AAE5B,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,SAAc,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY9F;AASD,wBAAgB,SAAS,gCA4KxB"}

package/dist-lib/components/LogosPage.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea, toast, } from "@flowselections/core";
+import { Download, ImagePlus, Pencil, RefreshCw, Trash2, Upload } from "lucide-react";
+import { LOGO_CATEGORIEEN, TOEGESTANE_LOGO_TYPES, downloadLogo, formatteerBytes, logoCategorieLabel, maakLogo, useLogos, vervangLogoBestand, verwijderLogo, werkLogoBij, } from "../lib/logoLibrary";
+export function LogoThumbnail({ logo, className = "" }) {
+    return (_jsx("div", { className: `flex h-12 w-16 items-center justify-center overflow-hidden rounded border bg-[repeating-conic-gradient(#e5e7eb_0%_25%,#fff_0%_50%)] bg-[length:10px_10px] ${className}`, children: logo.viewUrl ? (_jsx("img", { src: logo.viewUrl, alt: logo.naam, className: "max-h-full max-w-full object-contain" })) : (_jsx(ImagePlus, { className: "h-4 w-4 text-muted-foreground" })) }));
+}
+export function LogosPage() {
+    const { logos, loading, reload } = useLogos();
+    const [zoek, setZoek] = useState("");
+    const [categorie, setCategorie] = useState("alle");
+    const [uploadOpen, setUploadOpen] = useState(false);
+    const [bewerk, setBewerk] = useState(null);
+    const zichtbaar = useMemo(() => {
+        const q = zoek.trim().toLowerCase();
+        return logos.filter((l) => (categorie === "alle" || l.categorie === categorie) &&
+            (!q || l.naam.toLowerCase().includes(q) || (l.omschrijving ?? "").toLowerCase().includes(q)));
+    }, [logos, zoek, categorie]);
+    const vervang = async (logo, file) => {
+        try {
+            await vervangLogoBestand(logo, file);
+            toast.success("Logo vervangen — alle layouts zijn bijgewerkt");
+            await reload();
+        }
+        catch (e) {
+            toast.error(e instanceof Error ? e.message : "Vervangen mislukt");
+        }
+    };
+    const wis = async (logo) => {
+        if (!window.confirm(`Logo "${logo.naam}" verwijderen?`))
+            return;
+        try {
+            await verwijderLogo(logo);
+            toast.success("Logo verwijderd");
+            await reload();
+        }
+        catch {
+            toast.error("Verwijderen mislukt");
+        }
+    };
+    return (_jsxs("main", { className: "flex-1 space-y-6 p-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex-row flex-wrap items-end justify-between gap-3 space-y-0", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Logo Bibliotheek" }), _jsx(CardDescription, { children: "Centraal beheer van alle bedrijfslogo's. Layouts verwijzen naar deze bibliotheek, dus een vervangen logo werkt direct door in elke layout." })] }), _jsxs(Button, { onClick: () => setUploadOpen(true), children: [_jsx(Upload, { className: "mr-2 h-4 w-4" }), " Logo's uploaden"] })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Input, { placeholder: "Zoek op naam of omschrijving\u2026", value: zoek, onChange: (e) => setZoek(e.target.value), className: "max-w-xs" }), _jsxs(Select, { value: categorie, onValueChange: setCategorie, children: [_jsx(SelectTrigger, { className: "w-52", children: _jsx(SelectValue, { placeholder: "Categorie" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Alle categorie\u00EBn" }), LOGO_CATEGORIEEN.map((c) => (_jsx(SelectItem, { value: c.value, children: c.label }, c.value)))] })] })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Voorbeeld" }), _jsx(TableHead, { children: "Naam" }), _jsx(TableHead, { children: "Omschrijving" }), _jsx(TableHead, { children: "Categorie" }), _jsx(TableHead, { children: "Formaat" }), _jsx(TableHead, { children: "Resolutie" }), _jsx(TableHead, { children: "Transparant" }), _jsx(TableHead, { children: "Toegevoegd" }), _jsx(TableHead, { children: "Gewijzigd" }), _jsx(TableHead, { className: "text-right", children: "Acties" })] }) }), _jsxs(TableBody, { children: [loading && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 10, children: "Laden\u2026" }) })), !loading && zichtbaar.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 10, className: "text-muted-foreground", children: "Nog geen logo's gevonden." }) })), zichtbaar.map((l) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(LogoThumbnail, { logo: l }) }), _jsxs(TableCell, { className: "font-medium", children: [l.naam, l.is_standaard && (_jsx(Badge, { variant: "secondary", className: "ml-2", children: "Standaard" }))] }), _jsx(TableCell, { className: "max-w-56 truncate text-muted-foreground", children: l.omschrijving }), _jsx(TableCell, { children: logoCategorieLabel(l.categorie) }), _jsx(TableCell, { className: "uppercase", children: l.bestandstype }), _jsxs(TableCell, { children: [l.breedte && l.hoogte ? `${l.breedte} × ${l.hoogte} px` : "—", _jsx("div", { className: "text-xs text-muted-foreground", children: formatteerBytes(l.bestandsgrootte) })] }), _jsx(TableCell, { children: l.transparant ? "Ja" : "Nee" }), _jsx(TableCell, { children: new Date(l.created_at).toLocaleDateString("nl-NL") }), _jsx(TableCell, { children: new Date(l.updated_at).toLocaleDateString("nl-NL") }), _jsx(TableCell, { children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon", title: "Bewerken", onClick: () => setBewerk(l), children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsxs("label", { title: "Vervangen", children: [_jsx("input", { type: "file", className: "hidden", accept: TOEGESTANE_LOGO_TYPES.join(","), onChange: (e) => {
+                                                                                    const f = e.target.files?.[0];
+                                                                                    if (f)
+                                                                                        void vervang(l, f);
+                                                                                    e.target.value = "";
+                                                                                } }), _jsx("span", { className: "inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md hover:bg-accent", children: _jsx(RefreshCw, { className: "h-4 w-4" }) })] }), _jsx(Button, { variant: "ghost", size: "icon", title: "Downloaden", onClick: () => void downloadLogo(l), children: _jsx(Download, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", title: "Verwijderen", onClick: () => void wis(l), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }) })] }, l.id)))] })] }) })] })] }), _jsx(LogoUploadDialog, { open: uploadOpen, onOpenChange: setUploadOpen, onKlaar: reload }), _jsx(LogoBewerkDialog, { logo: bewerk, onOpenChange: () => setBewerk(null), onKlaar: reload })] }));
+}
+function LogoUploadDialog({ open, onOpenChange, onKlaar, }) {
+    const [bestanden, setBestanden] = useState([]);
+    const [form, setForm] = useState({
+        naam: "",
+        omschrijving: "",
+        categorie: "hoofdlogo",
+        is_standaard: false,
+    });
+    const [bezig, setBezig] = useState(false);
+    const reset = () => {
+        setBestanden([]);
+        setForm({ naam: "", omschrijving: "", categorie: "hoofdlogo", is_standaard: false });
+    };
+    const upload = async () => {
+        if (!bestanden.length) {
+            toast.error("Kies eerst één of meer bestanden");
+            return;
+        }
+        setBezig(true);
+        let gelukt = 0;
+        for (const [i, file] of bestanden.entries()) {
+            const naam = bestanden.length === 1
+                ? form.naam.trim() || file.name.replace(/\.[^.]+$/, "")
+                : `${form.naam.trim() ? `${form.naam.trim()} — ` : ""}${file.name.replace(/\.[^.]+$/, "")}`;
+            try {
+                await maakLogo({
+                    file,
+                    naam,
+                    omschrijving: form.omschrijving,
+                    categorie: form.categorie,
+                    is_standaard: form.is_standaard && i === 0,
+                });
+                gelukt += 1;
+            }
+            catch (e) {
+                toast.error(e instanceof Error ? e.message : `Upload van ${file.name} mislukt`);
+            }
+        }
+        setBezig(false);
+        if (gelukt) {
+            toast.success(`${gelukt} logo${gelukt === 1 ? "" : "'s"} toegevoegd`);
+            reset();
+            onOpenChange(false);
+            await onKlaar();
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: (v) => {
+            if (!v)
+                reset();
+            onOpenChange(v);
+        }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Logo's uploaden" }), _jsx(DialogDescription, { children: "SVG, PNG, JPG en WebP worden ondersteund. Identieke bestanden worden automatisch herkend." })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "logo-bestanden", children: "Bestanden" }), _jsx(Input, { id: "logo-bestanden", type: "file", multiple: true, accept: TOEGESTANE_LOGO_TYPES.join(","), onChange: (e) => setBestanden(Array.from(e.target.files ?? [])) }), bestanden.length > 1 && (_jsxs("p", { className: "text-xs text-muted-foreground", children: [bestanden.length, " bestanden \u2014 de naam van elk bestand wordt gebruikt."] }))] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "logo-naam", children: "Naam" }), _jsx(Input, { id: "logo-naam", value: form.naam, placeholder: "Bijv. Bedrijfslogo wit", onChange: (e) => setForm({ ...form, naam: e.target.value }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "logo-omschrijving", children: "Omschrijving" }), _jsx(Textarea, { id: "logo-omschrijving", rows: 2, value: form.omschrijving, onChange: (e) => setForm({ ...form, omschrijving: e.target.value }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Categorie" }), _jsxs(Select, { value: form.categorie, onValueChange: (v) => setForm({ ...form, categorie: v }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: LOGO_CATEGORIEEN.map((c) => (_jsx(SelectItem, { value: c.value, children: c.label }, c.value))) })] })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md border p-3", children: [_jsxs("div", { children: [_jsx(Label, { children: "Standaardlogo" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Wordt voorgesteld bij nieuwe layouts." })] }), _jsx(Switch, { checked: form.is_standaard, onCheckedChange: (v) => setForm({ ...form, is_standaard: v }) })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Annuleren" }), _jsx(Button, { onClick: () => void upload(), disabled: bezig, children: bezig ? "Bezig…" : "Uploaden" })] })] }) }));
+}
+function LogoBewerkDialog({ logo, onOpenChange, onKlaar, }) {
+    const [form, setForm] = useState(null);
+    const huidig = form ??
+        (logo
+            ? {
+                naam: logo.naam,
+                omschrijving: logo.omschrijving ?? "",
+                categorie: logo.categorie,
+                is_standaard: logo.is_standaard,
+            }
+            : { naam: "", omschrijving: "", categorie: "overig", is_standaard: false });
+    const opslaan = async () => {
+        if (!logo)
+            return;
+        try {
+            await werkLogoBij(logo.id, huidig);
+            toast.success("Logo bijgewerkt");
+            setForm(null);
+            onOpenChange(false);
+            await onKlaar();
+        }
+        catch {
+            toast.error("Opslaan mislukt");
+        }
+    };
+    return (_jsx(Dialog, { open: !!logo, onOpenChange: (v) => {
+            if (!v)
+                setForm(null);
+            onOpenChange(v);
+        }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Logo bewerken" }), _jsx(DialogDescription, { children: "Naam, omschrijving en categorie aanpassen." })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "bw-naam", children: "Naam" }), _jsx(Input, { id: "bw-naam", value: huidig.naam, onChange: (e) => setForm({ ...huidig, naam: e.target.value }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "bw-oms", children: "Omschrijving" }), _jsx(Textarea, { id: "bw-oms", rows: 2, value: huidig.omschrijving, onChange: (e) => setForm({ ...huidig, omschrijving: e.target.value }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Categorie" }), _jsxs(Select, { value: huidig.categorie, onValueChange: (v) => setForm({ ...huidig, categorie: v }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: LOGO_CATEGORIEEN.map((c) => (_jsx(SelectItem, { value: c.value, children: c.label }, c.value))) })] })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md border p-3", children: [_jsx(Label, { children: "Standaardlogo" }), _jsx(Switch, { checked: huidig.is_standaard, onCheckedChange: (v) => setForm({ ...huidig, is_standaard: v }) })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Annuleren" }), _jsx(Button, { onClick: () => void opslaan(), children: "Opslaan" })] })] }) }));
+}

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

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+type Item = {
+    id: string;
+    node: ReactNode;
+    breakBefore?: boolean;
+};
+/**
+ * Verdeelt losse blokken over echte pagina's van het gekozen formaat en toont
+ * er telkens één, met pijltjes om te bladeren. De pagina schaalt automatisch
+ * mee zodat hij volledig binnen het kader past.
+ */
+export declare function PaginaDocument({ items, breedteMm, hoogteMm, padMm, leeg, voet, }: {
+    items: Item[];
+    breedteMm: number;
+    hoogteMm: number;
+    padMm?: number;
+    leeg?: ReactNode;
+    /** Voettekst die onder elke pagina komt te staan. */
+    voet?: (pagina: number, totaal: number) => ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PaginaDocument.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaginaDocument.d.ts","sourceRoot":"","sources":["../../src/components/PaginaDocument.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrF,KAAK,IAAI,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEnE;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,KAAU,EACV,IAAI,EACJ,IAAI,GACL,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qDAAqD;IACrD,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,SAAS,CAAC;CACtD,+BA0IA"}

package/dist-lib/components/PaginaDocument.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Button } from "@flowselections/core";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+/**
+ * Verdeelt losse blokken over echte pagina's van het gekozen formaat en toont
+ * er telkens één, met pijltjes om te bladeren. De pagina schaalt automatisch
+ * mee zodat hij volledig binnen het kader past.
+ */
+export function PaginaDocument({ items, breedteMm, hoogteMm, padMm = 12, leeg, voet, }) {
+    const meetRef = useRef(null);
+    const mmRef = useRef(null);
+    const voetMeetRef = useRef(null);
+    const buiten = useRef(null);
+    const pagina = useRef(null);
+    const [paginas, setPaginas] = useState([items]);
+    const [index, setIndex] = useState(0);
+    const [schaal, setSchaal] = useState(1);
+    // Blokken over pagina's verdelen op basis van gemeten hoogtes.
+    useLayoutEffect(() => {
+        const meet = meetRef.current;
+        const mm = mmRef.current;
+        if (!meet || !mm)
+            return;
+        const pxPerMm = mm.getBoundingClientRect().height / 100;
+        if (!pxPerMm)
+            return;
+        const voetPx = voetMeetRef.current?.getBoundingClientRect().height ?? 0;
+        const maxPx = (hoogteMm - padMm * 2) * pxPerMm - (voetPx ? voetPx + 8 : 0);
+        const kinderen = Array.from(meet.children);
+        const result = [];
+        let huidig = [];
+        let hoogte = 0;
+        kinderen.forEach((el, i) => {
+            const h = el.getBoundingClientRect().height + 12;
+            const forceer = items[i]?.breakBefore && huidig.length > 0;
+            // Een blok dat zelfs alleen niet op een pagina past, verhuist niet:
+            // anders zou de vorige pagina onnodig leeg blijven.
+            const past = h <= maxPx;
+            if (forceer || (huidig.length > 0 && past && hoogte + h > maxPx)) {
+                result.push(huidig);
+                huidig = [];
+                hoogte = 0;
+            }
+            huidig.push(items[i]);
+            hoogte += h;
+        });
+        if (huidig.length)
+            result.push(huidig);
+        setPaginas(result.length ? result : [[]]);
+        setIndex((i) => Math.min(i, Math.max(0, result.length - 1)));
+    }, [items, hoogteMm, breedteMm, padMm, voet]);
+    // Pagina passend schalen op breedte; hoogte mag doorlopen zodat je kunt scrollen.
+    const pas = () => {
+        const b = buiten.current;
+        const p = pagina.current;
+        if (!b || !p)
+            return;
+        const s = Math.min(b.clientWidth / p.offsetWidth, 1);
+        if (s > 0)
+            setSchaal(s);
+    };
+    useLayoutEffect(pas);
+    useEffect(() => {
+        const ro = new ResizeObserver(() => pas());
+        if (buiten.current)
+            ro.observe(buiten.current);
+        return () => ro.disconnect();
+    }, []);
+    const totaal = paginas.length;
+    const huidige = paginas[Math.min(index, totaal - 1)] ?? [];
+    return (_jsxs("div", { className: "flex h-full w-full flex-col gap-2", children: [_jsxs("div", { className: "pointer-events-none absolute -z-10 opacity-0", "aria-hidden": true, children: [_jsx("div", { ref: mmRef, style: { height: "100mm", width: "1px" } }), _jsx("div", { ref: meetRef, className: "bg-white text-[11px] text-neutral-900", style: { width: `${breedteMm - padMm * 2}mm` }, children: items.map((it) => (_jsx("div", { children: it.node }, it.id))) }), _jsx("div", { ref: voetMeetRef, className: "bg-white text-[11px] text-neutral-900", style: { width: `${breedteMm - padMm * 2}mm` }, children: voet?.(1, 1) })] }), _jsx("div", { ref: buiten, className: "flex min-h-0 flex-1 items-start justify-center overflow-auto", children: _jsxs("div", { ref: pagina, className: "flex flex-col bg-white text-[11px] text-neutral-900 shadow-sm", style: {
+                        width: `${breedteMm}mm`,
+                        height: `${hoogteMm}mm`,
+                        padding: `${padMm}mm`,
+                        transform: `scale(${schaal})`,
+                        transformOrigin: "top center",
+                        overflow: "hidden",
+                    }, children: [_jsxs("div", { className: "min-h-0 flex-1 space-y-3", children: [huidige.map((it) => (_jsx("div", { children: it.node }, it.id))), huidige.length === 0 && (_jsx("p", { className: "py-10 text-center text-neutral-400", children: leeg ?? "Nog niets te tonen." }))] }), voet && _jsx("div", { className: "mt-2 shrink-0", children: voet(Math.min(index + 1, totaal), totaal) })] }) }), _jsxs("div", { className: "flex shrink-0 items-center justify-center gap-3", children: [_jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => setIndex((i) => Math.max(0, i - 1)), disabled: index <= 0, "aria-label": "Vorige pagina", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["Pagina ", Math.min(index + 1, totaal), " van ", totaal] }), _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => setIndex((i) => Math.min(totaal - 1, i + 1)), disabled: index >= totaal - 1, "aria-label": "Volgende pagina", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })] }));
+}

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

@@ -0,0 +1,5 @@
+/** Sectiegebaseerde pakbon-builder met live voorbeeld op echte ordergegevens. */
+export declare function PakbonBuilderPage({ layoutId: layoutIdProp }?: {
+    layoutId?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PakbonBuilderPage.d.ts.map

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

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

package/dist-lib/components/PakbonBuilderPage.js

@@ -0,0 +1,69 @@
+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, toast, } from "@flowselections/core";
+import { ArrowLeft, Loader2, Printer, Save } from "lucide-react";
+import { PakbonSectiesPanel } from "./PakbonSectiesPanel";
+import { PakbonPreview } from "./PakbonPreview";
+import { FormaatOrientatieBar } from "./FormaatOrientatieBar";
+import { leesPakbonConfig } from "../lib/pakbonBuilder";
+import { printPakbon, voorbeeldPakbonOrder } from "../lib/pakbonHtml";
+import { haalPrintLogos } from "../lib/logoLibrary";
+import { updateLayout, useLayoutDetail } from "../lib/useDocumentData";
+import { useLayoutIdParam } from "../lib/useLayoutIdParam";
+/** Sectiegebaseerde pakbon-builder met live voorbeeld op echte ordergegevens. */
+export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
+    const layoutId = useLayoutIdParam(layoutIdProp);
+    const { layout, setLayout, loading } = useLayoutDetail(layoutId ?? "");
+    const [config, setConfig] = useState(null);
+    const [bezig, setBezig] = useState(false);
+    const [printen, setPrinten] = useState(false);
+    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 opslaan = async () => {
+        if (!layout || !config)
+            return;
+        setBezig(true);
+        try {
+            await updateLayout(layout.id, { config: { ...(layout.config ?? {}), pakbon: config } });
+            toast.success("Pakbonopbouw opgeslagen");
+        }
+        catch {
+            toast.error("Opslaan mislukt");
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    const voorbeeldPrinten = async () => {
+        if (!config)
+            return;
+        setPrinten(true);
+        try {
+            const logos = await haalPrintLogos();
+            printPakbon(config, voorbeeldPakbonOrder(), {
+                logos,
+                breedteMm: breedte,
+                hoogteMm: hoogte,
+                titel: layout?.naam ?? "Pakbon",
+            });
+        }
+        catch {
+            toast.error("Voorbeeld printen mislukt");
+        }
+        finally {
+            setPrinten(false);
+        }
+    };
+    if (!layoutId)
+        return (_jsxs("main", { className: "p-6 text-sm text-muted-foreground", children: ["Kies eerst een layout via ", _jsx(Link, { to: "/layouts-printers", className: "underline", children: "Layouts" }), "."] }));
+    if (loading)
+        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 gap-2", children: [_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: "Voorbeeldorder met 2 karren, 3 lagen en fusten." })] }), _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 }) }) })] })] })] }));
+}

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

@@ -0,0 +1,13 @@
+import { type PakbonConfig, type PakbonSectie } from "../lib/pakbonBuilder";
+export declare function PakbonPreview({ config, breedteMm, hoogteMm, }: {
+    config: PakbonConfig;
+    breedteMm?: number;
+    hoogteMm?: number;
+}): import("react").JSX.Element;
+/** Losse weergave van één blok — gebruikt door de blokontwerper. */
+export declare function PakbonSectiePreview({ sectie, config, breedteMm, }: {
+    sectie: PakbonSectie;
+    config: PakbonConfig;
+    breedteMm?: number;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PakbonPreview.d.ts.map