@flowselections/layout-maker 1.3.2

package/dist-lib/components/ProductiebonBlokkenPanel.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Badge, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Switch, } from "@flowselections/core";
+import { ChevronDown, ChevronUp, Plus, Trash2 } from "lucide-react";
+import { LETTERTYPEN, MATERIAAL_KOLOMMEN, PB_BLOK_REGISTER, PB_CONDITIE_VELDEN, PRODUCTINFO_VELDEN, SAMENSTELLING_KOLOMMEN, nieuwBlok, pbNieuweKolom, nieuwVeld, pbBlokDef, } from "../lib/productiebonBuilder";
+/** Beheer van de blokken waaruit de productiebon is opgebouwd. */
+export function ProductiebonBlokkenPanel({ config, onChange, }) {
+    const blokken = Array.isArray(config?.blokken) ? config.blokken : [];
+    const [open, setOpen] = useState(blokken[0]?.id ?? null);
+    const [toevoegen, setToevoegen] = useState("productinfo");
+    const zet = (nieuw) => onChange({ ...config, blokken: nieuw });
+    const update = (id, patch) => zet(blokken.map((b) => (b.id === id ? { ...b, ...patch } : b)));
+    const verplaats = (index, richting) => {
+        const doel = index + richting;
+        if (doel < 0 || doel >= blokken.length)
+            return;
+        const kopie = [...blokken];
+        [kopie[index], kopie[doel]] = [kopie[doel], kopie[index]];
+        zet(kopie);
+    };
+    return (_jsxs("div", { className: "space-y-3", children: [_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: PB_BLOK_REGISTER.map((d) => (_jsx(SelectItem, { value: d.type, children: d.label }, d.type))) })] }), _jsx(Button, { size: "sm", onClick: () => {
+                            const b = nieuwBlok(toevoegen);
+                            zet([...blokken, b]);
+                            setOpen(b.id);
+                        }, children: _jsx(Plus, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "space-y-2", children: [blokken.map((b, i) => {
+                        const uitgeklapt = open === b.id;
+                        return (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "flex items-center gap-2 px-2 py-1.5", children: [_jsxs("button", { type: "button", className: "flex-1 text-left text-sm font-medium", onClick: () => setOpen(uitgeklapt ? null : b.id), children: [b.titel, !b.zichtbaar && (_jsx(Badge, { variant: "outline", className: "ml-2", children: "verborgen" })), b.condities.length > 0 && (_jsxs(Badge, { variant: "secondary", className: "ml-2", children: [b.condities.length, " voorwaarde", b.condities.length > 1 ? "n" : ""] }))] }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => verplaats(i, -1), children: _jsx(ChevronUp, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => verplaats(i, 1), children: _jsx(ChevronDown, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => zet(blokken.filter((x) => x.id !== b.id)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), uitgeklapt && (_jsx("div", { className: "border-t px-3 py-3", children: _jsx(BlokEditor, { blok: b, onChange: (patch) => update(b.id, patch) }) }))] }, b.id));
+                    }), blokken.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen blokken toegevoegd." }))] })] }));
+}
+function BlokEditor({ blok, onChange, }) {
+    const def = pbBlokDef(blok.type);
+    const bibliotheek = def.kolommen === "materiaal" ? MATERIAAL_KOLOMMEN : SAMENSTELLING_KOLOMMEN;
+    const zetOptie = (key, waarde) => onChange({ opties: { ...blok.opties, [key]: waarde } });
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: def.omschrijving }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Bloktitel" }), _jsx(Input, { value: blok.titel, onChange: (e) => onChange({ titel: e.target.value }) })] }), _jsxs("div", { className: "flex items-center justify-between rounded border px-3 py-2", children: [_jsx("span", { className: "text-sm", children: "Blok tonen" }), _jsx(Switch, { checked: blok.zichtbaar, onCheckedChange: (v) => onChange({ zichtbaar: v }) })] }), def.opties.map((o) => (_jsx(OptieVeld, { def: o, waarde: blok.opties?.[o.key], onChange: (v) => zetOptie(o.key, v) }, o.key))), def.velden && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(VeldenEditor, { velden: Array.isArray(blok.velden) ? blok.velden : [], onChange: (velden) => onChange({ velden }) })] })), def.kolommen && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(KolommenEditor, { kolommen: Array.isArray(blok.kolommen) ? blok.kolommen : [], bibliotheek: bibliotheek, onChange: (kolommen) => onChange({ kolommen }) })] })), _jsx(Separator, {}), _jsx(CondtiesEditor, { condities: blok.condities ?? [], onChange: (condities) => onChange({ condities }) })] }));
+}
+function OptieVeld({ def, waarde, onChange, }) {
+    if (def.type === "schakelaar") {
+        return (_jsxs("div", { className: "flex items-center justify-between rounded border px-3 py-2", children: [_jsx("span", { className: "text-sm", children: def.label }), _jsx(Switch, { checked: !!waarde, onCheckedChange: onChange })] }));
+    }
+    if (def.type === "keuze") {
+        return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: def.label }), _jsxs(Select, { value: String(waarde ?? ""), onValueChange: onChange, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: (def.opties ?? []).map((o) => (_jsx(SelectItem, { value: o.value, children: o.label }, o.value))) })] })] }));
+    }
+    if (def.type === "meerkeuze") {
+        const gekozen = Array.isArray(waarde) ? waarde : [];
+        return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: def.label }), _jsx("div", { className: "space-y-1", children: (def.opties ?? []).map((o) => (_jsxs("div", { className: "flex items-center justify-between rounded border px-3 py-1.5", children: [_jsx("span", { className: "text-sm", children: o.label }), _jsx(Switch, { checked: gekozen.includes(o.value), onCheckedChange: (aan) => onChange(aan ? [...gekozen, o.value] : gekozen.filter((v) => v !== o.value)) })] }, o.value))) })] }));
+    }
+    if (def.type === "getal") {
+        return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: def.label }), _jsx(Input, { type: "number", value: Number(waarde ?? 0), onChange: (e) => onChange(Number(e.target.value)) })] }));
+    }
+    if (def.type === "kleur") {
+        return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: def.label }), _jsx(Input, { type: "color", value: String(waarde ?? "#111827"), onChange: (e) => onChange(e.target.value) })] }));
+    }
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: def.label }), _jsx(Input, { value: String(waarde ?? ""), onChange: (e) => onChange(e.target.value) }), def.hint && _jsx("p", { className: "text-xs text-muted-foreground", children: def.hint })] }));
+}
+function VeldenEditor({ velden, onChange, }) {
+    const [open, setOpen] = useState(null);
+    const lijst = PRODUCTINFO_VELDEN.map((d) => velden.find((v) => v.key === d.key) ?? nieuwVeld(d.key));
+    const zet = (key, patch) => onChange(lijst.map((v) => (v.key === key ? { ...v, ...patch } : v)));
+    const verplaats = (key, r) => {
+        const i = lijst.findIndex((v) => v.key === key);
+        const d = i + r;
+        if (i < 0 || d < 0 || d >= lijst.length)
+            return;
+        const kopie = [...lijst];
+        [kopie[i], kopie[d]] = [kopie[d], kopie[i]];
+        onChange(kopie);
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-xs uppercase text-muted-foreground", children: "Zichtbare gegevens" }), lijst.map((v) => (_jsxs("div", { className: "rounded border", children: [_jsxs("div", { className: "flex items-center gap-2 px-2 py-1.5", children: [_jsx("button", { type: "button", className: "flex-1 text-left text-sm", onClick: () => setOpen(open === v.key ? null : v.key), children: v.label }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-6 w-6", onClick: () => verplaats(v.key, -1), children: _jsx(ChevronUp, { className: "h-3.5 w-3.5" }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-6 w-6", onClick: () => verplaats(v.key, 1), children: _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) }), _jsx(Switch, { checked: v.tonen, onCheckedChange: (aan) => zet(v.key, { tonen: aan }) })] }), open === v.key && (_jsxs("div", { className: "grid grid-cols-2 gap-2 border-t p-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Positie" }), _jsxs(Select, { value: v.kolom, onValueChange: (w) => zet(v.key, { kolom: w }), children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "links", children: "Linkerkolom" }), _jsx(SelectItem, { value: "rechts", children: "Rechterkolom" }), _jsx(SelectItem, { value: "volledig", children: "Volle breedte" })] })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Grootte" }), _jsx(Input, { className: "h-8", type: "number", value: v.grootte, onChange: (e) => zet(v.key, { grootte: Number(e.target.value) }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Lettertype" }), _jsxs(Select, { value: v.fontfamilie, onValueChange: (w) => zet(v.key, { fontfamilie: w }), children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: LETTERTYPEN.map((f) => (_jsx(SelectItem, { value: f, children: f }, f))) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Uitlijning" }), _jsxs(Select, { value: v.uitlijning, onValueChange: (w) => zet(v.key, { uitlijning: w }), children: [_jsx(SelectTrigger, { className: "h-8", 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: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Kleur" }), _jsx(Input, { className: "h-8", type: "color", value: v.kleur, onChange: (e) => zet(v.key, { kleur: e.target.value }) })] }), _jsxs("div", { className: "flex items-end justify-between rounded border px-2 py-1", children: [_jsx("span", { className: "text-xs", children: "Vet" }), _jsx(Switch, { checked: v.vet, onCheckedChange: (aan) => zet(v.key, { vet: aan }) })] })] }))] }, v.key)))] }));
+}
+function KolommenEditor({ kolommen, bibliotheek, onChange, }) {
+    const [nieuw, setNieuw] = useState(bibliotheek[0].key);
+    const zet = (i, patch) => onChange(kolommen.map((k, idx) => (idx === i ? { ...k, ...patch } : k)));
+    const verplaats = (i, r) => {
+        const d = i + r;
+        if (d < 0 || d >= kolommen.length)
+            return;
+        const kopie = [...kolommen];
+        [kopie[i], kopie[d]] = [kopie[d], kopie[i]];
+        onChange(kopie);
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-xs uppercase text-muted-foreground", children: "Kolommen" }), kolommen.map((k, i) => (_jsxs("div", { className: "space-y-2 rounded border p-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { className: "h-8 flex-1", value: k.label, onChange: (e) => zet(i, { label: e.target.value }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => verplaats(i, -1), children: _jsx(ChevronUp, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => verplaats(i, 1), children: _jsx(ChevronDown, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => onChange(kolommen.filter((_, idx) => idx !== i)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Breedte %" }), _jsx(Input, { className: "h-8", type: "number", value: k.breedte, onChange: (e) => zet(i, { breedte: Number(e.target.value) }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Uitlijning" }), _jsxs(Select, { value: k.uitlijning, onValueChange: (v) => zet(i, { uitlijning: v }), children: [_jsx(SelectTrigger, { className: "h-8", 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: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Tekstgrootte" }), _jsx(Input, { className: "h-8", type: "number", value: k.fontgrootte ?? 9, onChange: (e) => zet(i, { fontgrootte: Number(e.target.value) }) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-[10px]", children: "Kleur" }), _jsx(Input, { className: "h-8", type: "color", value: k.kleur ?? "#111827", onChange: (e) => zet(i, { kleur: e.target.value }) })] })] })] }, `${k.key}-${i}`))), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { value: nieuw, onValueChange: setNieuw, children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: bibliotheek.map((k) => (_jsx(SelectItem, { value: k.key, children: k.label }, k.key))) })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => onChange([...kolommen, pbNieuweKolom(nieuw, bibliotheek)]), children: _jsx(Plus, { className: "h-4 w-4" }) })] })] }));
+}
+function CondtiesEditor({ condities, onChange, }) {
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-xs uppercase text-muted-foreground", children: "Alleen tonen wanneer" }), condities.map((c, i) => (_jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-2 rounded border p-2", children: [_jsxs("div", { className: "grid gap-2", children: [_jsxs(Select, { value: c.veld, onValueChange: (v) => onChange(condities.map((x, idx) => (idx === i ? { ...x, veld: v } : x))), children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, { placeholder: "Veld" }) }), _jsx(SelectContent, { children: PB_CONDITIE_VELDEN.map((v) => (_jsx(SelectItem, { value: v.value, children: v.label }, v.value))) })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { value: c.operator, onValueChange: (v) => onChange(condities.map((x, idx) => idx === i ? { ...x, operator: v } : x)), children: [_jsx(SelectTrigger, { className: "h-8 w-28", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "=", children: "is gelijk" }), _jsx(SelectItem, { value: "!=", children: "is niet" }), _jsx(SelectItem, { value: ">", children: "groter dan" }), _jsx(SelectItem, { value: "<", children: "kleiner dan" }), _jsx(SelectItem, { value: "bevat", children: "bevat" }), _jsx(SelectItem, { value: "leeg", children: "is leeg" }), _jsx(SelectItem, { value: "niet_leeg", children: "niet leeg" })] })] }), _jsx(Input, { className: "h-8", value: c.waarde, onChange: (e) => onChange(condities.map((x, idx) => (idx === i ? { ...x, waarde: e.target.value } : x))) })] })] }), _jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", onClick: () => onChange(condities.filter((_, idx) => idx !== i)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, i))), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => onChange([...condities, { veld: "productgroep", operator: "=", waarde: "" }]), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Voorwaarde"] })] }));
+}

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

@@ -0,0 +1,5 @@
+/** Eigen editor voor de productiebon: modulaire blokken met live voorbeeld. */
+export declare function ProductiebonBuilderPage({ layoutId: layoutIdProp }?: {
+    layoutId?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ProductiebonBuilderPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductiebonBuilderPage.d.ts","sourceRoot":"","sources":["../../src/components/ProductiebonBuilderPage.tsx"],"names":[],"mappings":"AAoBA,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,+BAsG7F"}

package/dist-lib/components/ProductiebonBuilderPage.js

@@ -0,0 +1,48 @@
+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, Save } from "lucide-react";
+import { ProductiebonBlokkenPanel } from "./ProductiebonBlokkenPanel";
+import { ProductiebonPreview } from "./ProductiebonPreview";
+import { FormaatOrientatieBar } from "./FormaatOrientatieBar";
+import { leesProductiebonConfig } from "../lib/productiebonBuilder";
+import { updateLayout, useLayoutDetail } from "../lib/useDocumentData";
+import { useLayoutIdParam } from "../lib/useLayoutIdParam";
+/** Eigen editor voor de productiebon: modulaire blokken met live voorbeeld. */
+export function ProductiebonBuilderPage({ layoutId: layoutIdProp } = {}) {
+    const layoutId = useLayoutIdParam(layoutIdProp);
+    const { layout, setLayout, loading } = useLayoutDetail(layoutId ?? "");
+    const [config, setConfig] = useState(null);
+    const [bezig, setBezig] = useState(false);
+    useEffect(() => {
+        if (layout)
+            setConfig(leesProductiebonConfig(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 ?? {}), productiebon: config },
+            });
+            toast.success("Productiebon opgeslagen");
+        }
+        catch {
+            toast.error("Opslaan mislukt");
+        }
+        finally {
+            setBezig(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: ["Productiebon opbouwen uit blokken \u00B7 ", config.blokken.length, " blokken"] })] })] }), _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: "Blokken" }), _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(ProductiebonBlokkenPanel, { 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: "Voorbeeldproductieorder met samenstelling en belading." })] }), _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(ProductiebonPreview, { config: config, breedteMm: breedte, hoogteMm: hoogte }) }) })] })] })] }));
+}

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

@@ -0,0 +1,12 @@
+import { type ProductiebonBlok, type ProductiebonConfig } from "../lib/productiebonBuilder";
+/** Live voorbeeld van de volledige productiebon, verdeeld over pagina's. */
+export declare function ProductiebonPreview({ config, breedteMm, hoogteMm, }: {
+    config: ProductiebonConfig;
+    breedteMm?: number;
+    hoogteMm?: number;
+}): import("react").JSX.Element;
+/** Voorbeeld van één los blok, voor de blokontwerper. */
+export declare function ProductiebonBlokPreview({ blok }: {
+    blok: ProductiebonBlok;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ProductiebonPreview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductiebonPreview.d.ts","sourceRoot":"","sources":["../../src/components/ProductiebonPreview.tsx"],"names":[],"mappings":"AAEA,OAAO,EAYL,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EAGxB,MAAM,4BAA4B,CAAC;AAIpC,4EAA4E;AAC5E,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAe,EACf,QAAc,GACf,EAAE;IACD,MAAM,EAAE,kBAAkB,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,+BAaA;AAED,yDAAyD;AACzD,wBAAgB,uBAAuB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,+BAM3E"}

package/dist-lib/components/ProductiebonPreview.js

@@ -0,0 +1,237 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PaginaDocument } from "./PaginaDocument";
+import { BELADING_LABELS, DEMO_PRODUCTIEBON, EXTRA_LABELS, FUST_LABELS, ONDERDEEL_LABELS, QR_LABELS, pbBlokZichtbaar, pbConditieContext, splitsLijst, vulPbVeldcodes, } from "../lib/productiebonBuilder";
+const data = DEMO_PRODUCTIEBON;
+/** Live voorbeeld van de volledige productiebon, verdeeld over pagina's. */
+export function ProductiebonPreview({ config, breedteMm = 210, hoogteMm = 297, }) {
+    const blokken = Array.isArray(config?.blokken) ? config.blokken : [];
+    const ctx = pbConditieContext(data);
+    const zichtbaar = blokken.filter((b) => pbBlokZichtbaar(b, ctx));
+    return (_jsx(PaginaDocument, { breedteMm: breedteMm, hoogteMm: hoogteMm, leeg: "Nog geen zichtbare blokken.", items: zichtbaar.map((b) => ({ id: b.id, node: _jsx(BlokRender, { blok: b }) })) }));
+}
+/** Voorbeeld van één los blok, voor de blokontwerper. */
+export function ProductiebonBlokPreview({ blok }) {
+    return (_jsx("div", { className: "bg-white p-4 text-[11px] text-neutral-900", children: _jsx(BlokRender, { blok: blok }) }));
+}
+function Titel({ blok }) {
+    if (blok.opties?.toonTitel === false)
+        return null;
+    return (_jsx("div", { className: "mb-1 border-b border-neutral-300 pb-0.5 text-[11px] font-semibold uppercase tracking-wide", children: blok.titel }));
+}
+function Kader({ aan, children }) {
+    return _jsx("div", { className: aan ? "rounded border border-neutral-300 p-2" : "", children: children });
+}
+function BlokRender({ blok }) {
+    switch (blok.type) {
+        case "productinfo":
+            return _jsx(ProductInfo, { blok: blok });
+        case "productfotos":
+            return _jsx(Fotos, { blok: blok });
+        case "samenstelling":
+            return _jsx(Samenstelling, { blok: blok });
+        case "instructies":
+            return _jsx(Instructies, { blok: blok });
+        case "productiestappen":
+            return _jsx(Stappen, { blok: blok });
+        case "fustinformatie":
+            return _jsx(Gegevensblok, { blok: blok, bron: data.fust, labels: FUST_LABELS });
+        case "belading":
+            return _jsx(Belading, { blok: blok });
+        case "visueleopbouw":
+            return _jsx(VisueleOpbouw, { blok: blok });
+        case "materialen":
+            return _jsx(Materialen, { blok: blok });
+        case "controlepunten":
+            return _jsx(Controlepunten, { blok: blok });
+        case "extrainfo":
+            return _jsx(Extra, { blok: blok });
+        case "qrblok":
+            return _jsx(QrBlok, { blok: blok });
+        case "tekstblok":
+            return _jsx(Tekstblok, { blok: blok });
+        default:
+            return null;
+    }
+}
+// --- algemene productinformatie --------------------------------------------
+function veldWaarde(key) {
+    const p = data.product;
+    return String(p[key] ?? "");
+}
+function VeldRegel({ veld }) {
+    if (veld.key === "productfoto_groot" || veld.key === "productfotos") {
+        const aantal = veld.key === "productfotos" ? 3 : 1;
+        return (_jsx("div", { className: "flex gap-2", children: Array.from({ length: aantal }).map((_, i) => (_jsx(Fotovlak, { hoogte: veld.grootte, label: i === 0 ? "Productfoto" : `Detail ${i}` }, i))) }));
+    }
+    if (veld.key === "barcode") {
+        return (_jsxs("div", { style: { textAlign: veld.uitlijning }, children: [_jsx("div", { className: "h-6 w-full", style: { background: "repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px)" } }), _jsx("div", { className: "text-[8px]", children: veldWaarde("barcode") })] }));
+    }
+    if (veld.key === "qrcode") {
+        return (_jsx("div", { style: { textAlign: veld.uitlijning }, children: _jsx(QrVlak, { grootte: 22 }) }));
+    }
+    return (_jsxs("div", { className: "flex gap-2", style: {
+            fontFamily: veld.fontfamilie,
+            fontSize: `${veld.grootte}px`,
+            color: veld.kleur,
+            textAlign: veld.uitlijning,
+            fontWeight: veld.vet ? 700 : 400,
+        }, children: [_jsx("span", { className: "min-w-[34%] text-neutral-500", children: veld.label }), _jsx("span", { className: "flex-1", children: veldWaarde(veld.key) || "—" })] }));
+}
+function ProductInfo({ blok }) {
+    const velden = (Array.isArray(blok.velden) ? blok.velden : []).filter((v) => v.tonen);
+    const links = velden.filter((v) => v.kolom === "links");
+    const rechts = velden.filter((v) => v.kolom === "rechts");
+    const vol = velden.filter((v) => v.kolom === "volledig");
+    const twee = blok.opties?.indeling !== "een";
+    return (_jsxs(Kader, { aan: blok.opties?.kader !== false, children: [blok.opties?.toonTitel ? _jsx(Titel, { blok: blok }) : null, _jsxs("div", { className: "space-y-2", children: [vol.map((v) => (_jsx(VeldRegel, { veld: v }, v.key))), _jsxs("div", { className: twee ? "grid grid-cols-2 gap-x-4 gap-y-1" : "space-y-1", children: [_jsx("div", { className: "space-y-1", children: links.map((v) => (_jsx(VeldRegel, { veld: v }, v.key))) }), twee && (_jsx("div", { className: "space-y-1", children: rechts.map((v) => (_jsx(VeldRegel, { veld: v }, v.key))) })), !twee &&
+                                rechts.map((v) => _jsx(VeldRegel, { veld: v }, v.key))] })] })] }));
+}
+// --- afbeeldingen -----------------------------------------------------------
+function Fotovlak({ hoogte, label }) {
+    return (_jsx("div", { className: "flex flex-1 items-center justify-center rounded border border-dashed border-neutral-300 bg-neutral-50 text-[9px] text-neutral-400", style: { height: `${hoogte}mm` }, children: label }));
+}
+function QrVlak({ grootte }) {
+    return (_jsx("div", { className: "inline-block", style: {
+            width: `${grootte}mm`,
+            height: `${grootte}mm`,
+            background: "repeating-conic-gradient(#111 0% 25%, #fff 0% 50%) 0 0/22% 22%",
+        } }));
+}
+function Fotos({ blok }) {
+    const aantal = Math.max(1, Number(blok.opties?.aantal ?? 3));
+    const hoogte = Number(blok.opties?.hoogte ?? 35);
+    const uitlijning = String(blok.opties?.uitlijning ?? "left");
+    return (_jsxs("div", { children: [_jsx(Titel, { blok: blok }), _jsx("div", { className: "flex gap-2", style: { justifyContent: uitlijning === "center" ? "center" : uitlijning === "right" ? "flex-end" : "flex-start" }, children: Array.from({ length: aantal }).map((_, i) => (_jsxs("div", { className: "flex-1 space-y-1", children: [_jsx(Fotovlak, { hoogte: hoogte, label: `Foto ${i + 1}` }), blok.opties?.bijschrift !== false && (_jsxs("div", { className: "text-center text-[8px] text-neutral-400", children: ["Weergave ", i + 1] }))] }, i))) })] }));
+}
+function VisueleOpbouw({ blok }) {
+    const weergaven = Array.isArray(blok.opties?.weergaven) ? blok.opties.weergaven : [];
+    const labels = {
+        eindfoto: "Grote eindfoto",
+        detail: "Detailfoto's",
+        explosie: "Explosietekening",
+        voorbeeld: "Voorbeeld eindresultaat",
+    };
+    const hoogte = Number(blok.opties?.hoogte ?? 50);
+    return (_jsxs("div", { children: [_jsx(Titel, { blok: blok }), _jsxs("div", { className: blok.opties?.naastElkaar === false ? "space-y-2" : "flex gap-2", children: [weergaven.map((w) => (_jsx("div", { className: "flex-1", children: _jsx(Fotovlak, { hoogte: hoogte, label: labels[w] ?? w }) }, w))), weergaven.length === 0 && _jsx("p", { className: "text-neutral-400", children: "Geen afbeeldingen geselecteerd." })] })] }));
+}
+// --- tabellen ---------------------------------------------------------------
+function cel(item, key) {
+    if (key === "foto")
+        return _jsx(Fotovlak, { hoogte: 10, label: "foto" });
+    if (key === "qrcode")
+        return _jsx(QrVlak, { grootte: 8 });
+    if (key === "barcode")
+        return _jsx("div", { className: "h-3 w-full", style: { background: "repeating-linear-gradient(90deg,#111 0 1.5px,#fff 1.5px 3px)" } });
+    const v = item[key];
+    return v === undefined || v === null || v === "" ? "—" : String(v);
+}
+function Tabel({ kolommen, rijen, toonKoppen, regelhoogte, streepjes, }) {
+    return (_jsxs("table", { className: "w-full border-collapse", children: [toonKoppen && (_jsx("thead", { children: _jsx("tr", { children: kolommen.map((k) => (_jsx("th", { className: "border-b border-neutral-400 pb-0.5 font-semibold", style: { width: `${k.breedte}%`, textAlign: k.uitlijning, fontSize: `${k.fontgrootte ?? 9}px` }, children: k.label }, k.key))) }) })), _jsx("tbody", { children: rijen.map((r, i) => (_jsx("tr", { className: streepjes ? "border-b border-neutral-200" : "", children: kolommen.map((k) => (_jsx("td", { style: {
+                            textAlign: k.uitlijning,
+                            fontSize: `${k.fontgrootte ?? 9}px`,
+                            color: k.kleur ?? "#111827",
+                            fontFamily: k.fontfamilie,
+                            fontWeight: k.vet ? 700 : 400,
+                            height: `${regelhoogte}mm`,
+                        }, children: cel(r, k.key) }, k.key))) }, `${r.artikelnummer}-${i}`))) })] }));
+}
+function Samenstelling({ blok }) {
+    const kolommen = Array.isArray(blok.kolommen) ? blok.kolommen : [];
+    const soorten = Array.isArray(blok.opties?.onderdelen) ? blok.opties.onderdelen : [];
+    const rijen = data.onderdelen.filter((x) => soorten.includes(x.soort));
+    const groeperen = blok.opties?.groepeerPerSoort !== false;
+    const regelhoogte = Number(blok.opties?.regelhoogte ?? 7);
+    const toonKoppen = blok.opties?.toonKoppen !== false;
+    const streepjes = blok.opties?.streepjes !== false;
+    return (_jsxs("div", { children: [_jsx(Titel, { blok: blok }), rijen.length === 0 && _jsx("p", { className: "text-neutral-400", children: "Geen onderdelen geselecteerd." }), groeperen ? (soorten
+                .filter((s) => rijen.some((r) => r.soort === s))
+                .map((s) => (_jsxs("div", { className: "mb-1.5", children: [_jsx("div", { className: "bg-neutral-100 px-1 py-0.5 text-[9px] font-semibold uppercase", children: ONDERDEEL_LABELS[s] ?? s }), _jsx(Tabel, { kolommen: kolommen, rijen: rijen.filter((r) => r.soort === s), toonKoppen: toonKoppen, regelhoogte: regelhoogte, streepjes: streepjes })] }, s)))) : (_jsx(Tabel, { kolommen: kolommen, rijen: rijen, toonKoppen: toonKoppen, regelhoogte: regelhoogte, streepjes: streepjes }))] }));
+}
+function Materialen({ blok }) {
+    const kolommen = Array.isArray(blok.kolommen) ? blok.kolommen : [];
+    const groepering = String(blok.opties?.groepering ?? "geen");
+    const regelhoogte = Number(blok.opties?.regelhoogte ?? 7);
+    const toonKoppen = blok.opties?.toonKoppen !== false;
+    const rijen = data.onderdelen;
+    const sleutel = (r) => groepering === "locatie"
+        ? r.locatie
+        : groepering === "leverancier"
+            ? r.leverancier
+            : groepering === "stap"
+                ? r.stap
+                : ONDERDEEL_LABELS[r.productgroep] ?? r.productgroep;
+    const groepen = groepering === "geen" ? [] : Array.from(new Set(rijen.map(sleutel)));
+    return (_jsxs("div", { children: [_jsx(Titel, { blok: blok }), groepering === "geen" ? (_jsx(Tabel, { kolommen: kolommen, rijen: rijen, toonKoppen: toonKoppen, regelhoogte: regelhoogte, streepjes: true })) : (groepen.map((g) => (_jsxs("div", { className: "mb-1.5", children: [_jsx("div", { className: "bg-neutral-100 px-1 py-0.5 text-[9px] font-semibold uppercase", children: g }), _jsx(Tabel, { kolommen: kolommen, rijen: rijen.filter((r) => sleutel(r) === g), toonKoppen: toonKoppen, regelhoogte: regelhoogte, streepjes: true })] }, g)))), blok.opties?.toonTotaal !== false && (_jsxs("div", { className: "mt-1 border-t border-neutral-400 pt-0.5 text-right font-semibold", children: ["Totaal ", rijen.length, " materialen"] }))] }));
+}
+// --- instructies & stappen --------------------------------------------------
+function Instructies({ blok }) {
+    const gekozen = Array.isArray(blok.opties?.onderdelen) ? blok.opties.onderdelen : [];
+    const volgorde = String(blok.opties?.volgorde ?? "")
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean);
+    const keys = [...volgorde.filter((k) => gekozen.includes(k)), ...gekozen.filter((k) => !volgorde.includes(k))];
+    const genummerd = blok.opties?.genummerd !== false;
+    const inhoud = {
+        stappen: (_jsx("ol", { className: genummerd ? "list-decimal space-y-0.5 pl-4" : "space-y-0.5", children: splitsLijst("Pak de juiste pot;Plaats de plant;Voeg decoratie toe;Plaats de sticker;Controleer de kwaliteit").map((s) => (_jsx("li", { children: s }, s))) })),
+        eigentekst: _jsx("p", { children: vulPbVeldcodes(String(blok.opties?.eigenTekst ?? ""), data) || "—" }),
+        controlepunten: _jsx("p", { children: data.instructies.controlepunten }),
+        veiligheid: _jsx("p", { children: data.instructies.veiligheid }),
+        gereedschap: _jsx("p", { children: data.instructies.gereedschap }),
+        tijd: _jsx("p", { children: data.instructies.tijd }),
+        opmerkingen: _jsx("p", { children: data.instructies.opmerkingen }),
+    };
+    const labels = {
+        stappen: "Stap voor stap",
+        eigentekst: "Eigen tekst",
+        controlepunten: "Controlepunten",
+        veiligheid: "Veiligheid",
+        gereedschap: "Gereedschap",
+        tijd: "Benodigde tijd",
+        opmerkingen: "Opmerkingen",
+    };
+    return (_jsxs("div", { children: [_jsx(Titel, { blok: blok }), _jsxs("div", { className: "space-y-1.5", children: [keys.map((k) => (_jsxs("div", { children: [_jsx("div", { className: "text-[9px] font-semibold uppercase text-neutral-500", children: labels[k] ?? k }), inhoud[k]] }, k))), keys.length === 0 && _jsx("p", { className: "text-neutral-400", children: "Geen onderdelen geselecteerd." })] })] }));
+}
+function Stappen({ blok }) {
+    const stappen = splitsLijst(blok.opties?.stappen);
+    const velden = Array.isArray(blok.opties?.velden) ? blok.opties.velden : [];
+    const nummeren = blok.opties?.nummeren !== false;
+    const regelhoogte = Number(blok.opties?.regelhoogte ?? 9);
+    return (_jsxs("div", { children: [_jsx(Titel, { blok: blok }), _jsxs("div", { className: "space-y-1", children: [stappen.map((s, i) => (_jsxs("div", { className: "flex items-start gap-2 border-b border-neutral-200 pb-1", style: { minHeight: `${regelhoogte}mm` }, children: [velden.includes("controlevak") && _jsx("span", { className: "mt-0.5 h-3 w-3 border border-neutral-500" }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "font-semibold", children: [nummeren ? `${i + 1}. ` : "", s] }), velden.includes("omschrijving") && (_jsx("div", { className: "text-neutral-500", children: "Voer deze stap uit volgens de werkinstructie." })), _jsxs("div", { className: "flex gap-3 text-[9px] text-neutral-500", children: [velden.includes("tijd") && _jsx("span", { children: "\u00B1 30 sec" }), velden.includes("gereedschap") && _jsxs("span", { children: ["Gereedschap: ", data.instructies.gereedschap] }), velden.includes("materialen") && _jsxs("span", { children: ["Materialen: ", data.onderdelen[i % data.onderdelen.length].artikelnaam] })] })] }), velden.includes("foto") && (_jsx("div", { className: "w-16", children: _jsx(Fotovlak, { hoogte: 12, label: "foto" }) }))] }, `${s}-${i}`))), stappen.length === 0 && _jsx("p", { className: "text-neutral-400", children: "Nog geen stappen ingevuld." })] })] }));
+}
+// --- fust, belading, controle, extra ---------------------------------------
+function Gegevensblok({ blok, bron, labels, }) {
+    const keys = Array.isArray(blok.opties?.velden) ? blok.opties.velden : [];
+    const tabel = String(blok.opties?.weergave ?? "tabel") === "tabel";
+    return (_jsxs("div", { children: [_jsx(Titel, { blok: blok }), _jsxs("div", { className: tabel ? "grid grid-cols-2 gap-x-4 gap-y-0.5" : "space-y-0.5", children: [keys.map((k) => k === "afbeelding" ? (_jsx("div", { className: "col-span-2", children: _jsx(Fotovlak, { hoogte: 20, label: "Afbeelding fust" }) }, k)) : k === "barcode" ? (_jsxs("div", { className: "col-span-2", children: [_jsx("div", { className: "h-5 w-32", style: { background: "repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px)" } }), _jsx("div", { className: "text-[8px]", children: bron.barcode })] }, k)) : (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "min-w-[45%] text-neutral-500", children: labels[k] ?? k }), _jsx("span", { children: bron[k] ?? "—" })] }, k))), keys.length === 0 && _jsx("p", { className: "text-neutral-400", children: "Geen gegevens geselecteerd." })] })] }));
+}
+function Belading({ blok }) {
+    const keys = Array.isArray(blok.opties?.velden) ? blok.opties.velden : [];
+    const karhoogte = Number(blok.opties?.karhoogte ?? 45);
+    return (_jsxs("div", { children: [_jsx(Titel, { blok: blok }), _jsx("div", { className: "grid grid-cols-2 gap-x-4 gap-y-0.5", children: keys
+                    .filter((k) => !["laagoverzicht", "visueel"].includes(k))
+                    .map((k) => (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "min-w-[45%] text-neutral-500", children: BELADING_LABELS[k] ?? k }), _jsx("span", { children: data.belading[k] ?? "—" })] }, k))) }), keys.includes("laagoverzicht") && (_jsxs("table", { className: "mt-1.5 w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "border-b border-neutral-400 text-left", children: "Laag" }), _jsx("th", { className: "border-b border-neutral-400 text-left", children: "Inhoud" }), _jsx("th", { className: "border-b border-neutral-400 text-left", children: "Opmerking" })] }) }), _jsx("tbody", { children: data.lagen.map((l) => (_jsxs("tr", { className: "border-b border-neutral-200", children: [_jsxs("td", { children: ["Laag ", l.laag] }), _jsx("td", { children: l.inhoud }), _jsx("td", { children: l.opmerking || "—" })] }, l.laag))) })] })), keys.includes("visueel") && (_jsx("div", { className: "mt-1.5 flex flex-col-reverse gap-0.5", style: { height: `${karhoogte}mm` }, children: data.lagen.map((l) => (_jsxs("div", { className: "flex flex-1 items-center justify-between rounded border border-neutral-300 bg-neutral-50 px-1 text-[9px]", children: [_jsxs("span", { children: ["Laag ", l.laag] }), _jsx("span", { children: l.inhoud })] }, l.laag))) }))] }));
+}
+function Controlepunten({ blok }) {
+    const punten = splitsLijst(blok.opties?.punten);
+    const kolommen = Number(blok.opties?.kolommenAantal ?? 2);
+    return (_jsxs("div", { children: [_jsx(Titel, { blok: blok }), _jsxs("div", { className: "grid gap-x-4 gap-y-1", style: { gridTemplateColumns: `repeat(${Math.max(1, kolommen)}, minmax(0, 1fr))` }, children: [punten.map((p) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-3 w-3 border border-neutral-500" }), _jsx("span", { className: "flex-1", children: p }), blok.opties?.paraaf ? _jsx("span", { className: "h-3 w-10 border-b border-neutral-400" }) : null] }, p))), punten.length === 0 && _jsx("p", { className: "text-neutral-400", children: "Geen controlepunten ingesteld." })] })] }));
+}
+function Extra({ blok }) {
+    const keys = Array.isArray(blok.opties?.onderdelen) ? blok.opties.onderdelen : [];
+    return (_jsxs(Kader, { aan: blok.opties?.kader !== false, children: [_jsx(Titel, { blok: blok }), _jsxs("div", { className: "space-y-1", children: [keys.map((k) => (_jsxs("div", { children: [_jsx("div", { className: "text-[9px] font-semibold uppercase text-neutral-500", children: EXTRA_LABELS[k] ?? k }), _jsx("p", { children: data.extra[k] ?? "—" })] }, k))), keys.length === 0 && _jsx("p", { className: "text-neutral-400", children: "Geen onderdelen geselecteerd." })] })] }));
+}
+function QrBlok({ blok }) {
+    const codes = Array.isArray(blok.opties?.codes) ? blok.opties.codes : [];
+    const grootte = Number(blok.opties?.grootte ?? 22);
+    const uitlijning = String(blok.opties?.uitlijning ?? "left");
+    return (_jsxs("div", { children: [_jsx(Titel, { blok: blok }), _jsxs("div", { className: "flex gap-4", style: { justifyContent: uitlijning === "center" ? "center" : uitlijning === "right" ? "flex-end" : "flex-start" }, children: [codes.map((c) => (_jsxs("div", { className: "text-center", children: [_jsx(QrVlak, { grootte: grootte }), blok.opties?.bijschrift !== false && (_jsx("div", { className: "text-[8px] text-neutral-500", children: QR_LABELS[c] ?? c }))] }, c))), codes.length === 0 && _jsx("p", { className: "text-neutral-400", children: "Geen QR-codes geselecteerd." })] })] }));
+}
+function Tekstblok({ blok }) {
+    return (_jsxs(Kader, { aan: !!blok.opties?.kader, children: [_jsx(Titel, { blok: blok }), _jsx("p", { style: {
+                    fontSize: `${Number(blok.opties?.fontgrootte ?? 10)}px`,
+                    color: String(blok.opties?.kleur ?? "#111827"),
+                    textAlign: String(blok.opties?.uitlijning ?? "left"),
+                    whiteSpace: "pre-wrap",
+                }, children: vulPbVeldcodes(String(blok.opties?.tekst ?? ""), data) })] }));
+}

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

@@ -0,0 +1,6 @@
+interface TemplateModuleLogoProps {
+    className?: string;
+}
+export declare function TemplateModuleLogo({ className }: TemplateModuleLogoProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TemplateModuleLogo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateModuleLogo.d.ts","sourceRoot":"","sources":["../../src/components/TemplateModuleLogo.tsx"],"names":[],"mappings":"AAQA,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,EAAE,uBAAuB,+BAwBxE"}

package/dist-lib/components/TemplateModuleLogo.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TemplateModuleLogo({ className }) {
+    return (_jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": "true", children: [_jsx("rect", { width: "40", height: "40", rx: "8", fill: "currentColor", opacity: "0.1" }), _jsx("text", { x: "50%", y: "50%", dominantBaseline: "middle", textAnchor: "middle", fontSize: "18", fontWeight: "600", fill: "currentColor", children: "M" })] }));
+}

package/dist-lib/components/settings/MijnModuleSettingsCard.d.ts

@@ -0,0 +1,2 @@
+export declare function MijnModuleSettingsCard(): import("react").JSX.Element;
+//# sourceMappingURL=MijnModuleSettingsCard.d.ts.map

package/dist-lib/components/settings/MijnModuleSettingsCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MijnModuleSettingsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/MijnModuleSettingsCard.tsx"],"names":[],"mappings":"AAiCA,wBAAgB,sBAAsB,gCA+CrC"}

package/dist-lib/components/settings/MijnModuleSettingsCard.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/settings/MijnModuleSettingsCard.tsx — EXAMPLE SETTINGS CARD
+// ============================================================================
+// This is an example of a settings card for your module.
+// It appears on the main settings page when registered in src/index.ts.
+//
+// RULES:
+//   - Must return a <Card> as its root element
+//   - Handles its own data fetching — no props are passed by the core
+//   - Use the same Card primitives from @flowselections/core
+//
+// WHAT TO DO:
+//   - Rename this file to match your card's purpose
+//   - Add your real settings UI
+//   - Register it in src/index.ts under settingsCards
+//   - Delete this file entirely if your module has no settings
+// ============================================================================
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, Button, Input, Label, toast, } from "@flowselections/core";
+import { Settings2 } from "lucide-react";
+export function MijnModuleSettingsCard() {
+    // Replace with your real settings state
+    const [setting, setSetting] = useState("");
+    const [saving, setSaving] = useState(false);
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            // Example: save to a table — replace with your real query
+            // const { error } = await supabase.from("my_settings").upsert({ ... });
+            // if (error) throw error;
+            toast.success("Instellingen opgeslagen");
+        }
+        catch {
+            toast.error("Fout bij het opslaan");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Settings2, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { children: "Module Instellingen" }), " "] }), _jsx(CardDescription, { children: "Beheer de instellingen voor deze module " })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "setting", children: "Instelling" }), _jsx(Input, { id: "setting", value: setting, onChange: (e) => setSetting(e.target.value), placeholder: "Waarde..." })] }), _jsx(Button, { onClick: handleSave, disabled: saving, children: saving ? "Opslaan..." : "Opslaan" })] })] }));
+}

package/dist-lib/hooks/useMijnModuleData.d.ts

@@ -0,0 +1,13 @@
+interface MijnItem {
+    id: string;
+    created_at: string;
+    [key: string]: unknown;
+}
+export declare function useMijnModuleData(): {
+    items: MijnItem[];
+    loading: boolean;
+    error: string | null;
+    reload: () => Promise<void>;
+};
+export {};
+//# sourceMappingURL=useMijnModuleData.d.ts.map

package/dist-lib/hooks/useMijnModuleData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMijnModuleData.d.ts","sourceRoot":"","sources":["../../src/hooks/useMijnModuleData.ts"],"names":[],"mappings":"AAkBA,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,wBAAgB,iBAAiB;;;;;EAkChC"}

package/dist-lib/hooks/useMijnModuleData.js

@@ -0,0 +1,49 @@
+// ============================================================================
+// src/hooks/useMijnModuleData.ts — EXAMPLE DATA HOOK
+// ============================================================================
+// Put your data fetching logic in hooks like this, not directly in components.
+// This keeps your pages clean and makes it easy to reuse data across pages.
+//
+// WHAT TO DO:
+//   - Rename to match your data (e.g. useProducts, useOrders, useSuppliers)
+//   - Replace the example query with your real Supabase query
+//   - Replace MijnItem with your actual table's row type
+//   - Import and use in your page components
+//   - Delete this file if you prefer a different pattern
+// ============================================================================
+import { useState, useEffect, useCallback } from "react";
+import { supabase, toast } from "@flowselections/core";
+export function useMijnModuleData() {
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const load = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const { data, error } = await supabase
+                .from("products") // ← CHANGE THIS to your table
+                .select("*")
+                .order("created_at", { ascending: false });
+            if (error)
+                throw error;
+            setItems(data ?? []);
+        }
+        catch {
+            setError("Fout bij het laden van gegevens");
+            toast.error("Fout bij het laden van gegevens");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        load();
+    }, [load]);
+    return {
+        items,
+        loading,
+        error,
+        reload: load,
+    };
+}

package/dist-lib/index.d.ts

@@ -0,0 +1,38 @@
+import type { FlowModule } from "@flowselections/core";
+export * from './_core-safelist';
+export * from './components/LayoutsPage';
+export * from './components/PrintersPage';
+export * from './components/PrintQueuePage';
+export * from './components/AiLayoutImportDialog';
+export * from './components/LogosPage';
+export * from './components/PakbonBuilderPage';
+export * from './components/BlokOntwerperPage';
+export * from './components/PakbonSectiesPanel';
+export * from './components/PakbonPreview';
+export * from './lib/pakbonBuilder';
+export * from './lib/pakbonHtml';
+export * from './components/ProductiebonBuilderPage';
+export * from './components/ProductiebonBlokkenPanel';
+export * from './components/ProductiebonPreview';
+export * from './lib/productiebonBuilder';
+export * from './components/LogoBibliotheekDialog';
+export * from './lib/logoLibrary';
+export * from './lib/documentProfiles';
+export * from './lib/formaatPrinters';
+export * from './components/DocumentSettingsPanel';
+export * from './lib/documentTypes';
+export * from './lib/fieldRegistry';
+export * from './lib/layoutPreview';
+export * from './lib/useDocumentData';
+export * from './lib/printApi';
+export * from './lib/browserPrint';
+export * from './components/AfdrukKnop';
+export * from './lib/supabaseClient';
+export * from './lib/useLayoutIdParam';
+export * from './components/PaginaDocument';
+export * from './components/PreviewFit';
+export * from './components/FormaatOrientatieBar';
+export * from './components/PrinterSetupWizard';
+export { TemplateModuleLogo } from './components/TemplateModuleLogo';
+export declare const layoutmodule: FlowModule;
+//# sourceMappingURL=index.d.ts.map