@flowselections/layout-maker 1.69.21 → 1.69.23

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

@@ -1 +1 @@
-{"version":3,"file":"FormaatOrientatieBar.d.ts","sourceRoot":"","sources":["../../src/components/FormaatOrientatieBar.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAIxE;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,WAAmB,GACpB,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,+BAiHA"}
+{"version":3,"file":"FormaatOrientatieBar.d.ts","sourceRoot":"","sources":["../../src/components/FormaatOrientatieBar.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKxE;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,WAAmB,GACpB,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,+BAiHA"}

package/dist-lib/components/FormaatOrientatieBar.js

@@ -5,6 +5,7 @@ import { RectangleHorizontal, RectangleVertical } from "lucide-react";
 import { PAPIERFORMATEN } from "../lib/documentTypes.js";
 import { updateLayout } from "../lib/useDocumentData.js";
 import { foutTekstVan } from "../lib/layoutOpslaan.js";
+import { afdrukMaat, maatTekst, opslagVoorAfdrukMaat } from "../lib/formaatWeergave.js";
 /**
  * Formaat- en oriëntatiekeuze die in elke ontwerp-editor beschikbaar is.
  * Wijzigingen worden direct opgeslagen en lokaal doorgegeven aan de preview.
@@ -41,13 +42,15 @@ export function FormaatOrientatieBar({ layout, onChange, vergrendeld = false, })
             return;
         void bewaar({ orientatie });
     };
-    const maat = (veld, waarde) => {
-        const n = Number(waarde);
-        if (!Number.isFinite(n) || n <= 0)
+    // Vrij formaat: breedte × hoogte zoals ingevuld; de oriëntatie volgt uit de maat.
+    const afdruk = afdrukMaat(layout);
+    const [invoer, setInvoer] = useState({ b: String(afdruk.breedte_mm || ""), h: String(afdruk.hoogte_mm || "") });
+    const bewaarVrij = (b, h) => {
+        const nb = Number(b.replace(",", "."));
+        const nh = Number(h.replace(",", "."));
+        if (!(nb > 0) || !(nh > 0))
             return;
-        void bewaar({ [veld]: n });
+        void bewaar(opslagVoorAfdrukMaat(nb, nh));
     };
-    return (_jsxs("div", { className: "flex flex-wrap items-end gap-3 rounded-md border bg-muted/30 p-3", children: [_jsxs("div", { className: "w-52 space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Papierformaat" }), _jsxs(Select, { value: layout.papierformaat, onValueChange: kiesFormaat, disabled: bezig, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies formaat" }) }), _jsx(SelectContent, { children: PAPIERFORMATEN.map((p) => (_jsx(SelectItem, { value: p.code, children: p.label }, p.code))) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Breedte (mm)" }), _jsx(Input, { type: "number", className: "w-28", value: layout.breedte_mm, disabled: !vrij || bezig, onChange: (e) => onChange({ breedte_mm: Number(e.target.value) }), onBlur: (e) => maat("breedte_mm", e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Hoogte (mm)" }), _jsx(Input, { type: "number", className: "w-28", value: layout.hoogte_mm, disabled: !vrij || bezig, onChange: (e) => onChange({ hoogte_mm: Number(e.target.value) }), onBlur: (e) => maat("hoogte_mm", e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Ori\u00EBntatie" }), _jsxs("div", { className: "flex gap-1", children: [_jsxs(Button, { type: "button", size: "sm", variant: layout.orientatie === "portrait" ? "default" : "outline", onClick: () => kiesOrientatie("portrait"), disabled: bezig, children: [_jsx(RectangleVertical, { className: "mr-2 h-4 w-4" }), " Staand"] }), _jsxs(Button, { type: "button", size: "sm", variant: layout.orientatie === "landscape" ? "default" : "outline", onClick: () => kiesOrientatie("landscape"), disabled: bezig, children: [_jsx(RectangleHorizontal, { className: "mr-2 h-4 w-4" }), " Liggend"] })] })] }), _jsxs("p", { className: "ml-auto text-xs text-muted-foreground", children: ["Afdrukgebied:", " ", layout.orientatie === "landscape"
-                        ? `${layout.hoogte_mm} × ${layout.breedte_mm}`
-                        : `${layout.breedte_mm} × ${layout.hoogte_mm}`, " ", "mm"] })] }));
+    return (_jsxs("div", { className: "flex flex-wrap items-end gap-3 rounded-md border bg-muted/30 p-3", children: [_jsxs("div", { className: "w-52 space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Papierformaat" }), _jsxs(Select, { value: layout.papierformaat, onValueChange: kiesFormaat, disabled: bezig, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Kies formaat" }) }), _jsx(SelectContent, { children: PAPIERFORMATEN.map((p) => (_jsx(SelectItem, { value: p.code, children: p.label }, p.code))) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Breedte (mm)" }), _jsx(Input, { type: "number", className: "w-28", value: vrij ? invoer.b : afdruk.breedte_mm, disabled: !vrij || bezig, onChange: (e) => setInvoer((v) => ({ ...v, b: e.target.value })), onBlur: () => bewaarVrij(invoer.b, invoer.h) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Hoogte (mm)" }), _jsx(Input, { type: "number", className: "w-28", value: vrij ? invoer.h : afdruk.hoogte_mm, disabled: !vrij || bezig, onChange: (e) => setInvoer((v) => ({ ...v, h: e.target.value })), onBlur: () => bewaarVrij(invoer.b, invoer.h) })] }), !vrij ? (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: "Ori\u00EBntatie" }), _jsxs("div", { className: "flex gap-1", children: [_jsxs(Button, { type: "button", size: "sm", variant: layout.orientatie === "portrait" ? "default" : "outline", onClick: () => kiesOrientatie("portrait"), disabled: bezig, children: [_jsx(RectangleVertical, { className: "mr-2 h-4 w-4" }), " Staand"] }), _jsxs(Button, { type: "button", size: "sm", variant: layout.orientatie === "landscape" ? "default" : "outline", onClick: () => kiesOrientatie("landscape"), disabled: bezig, children: [_jsx(RectangleHorizontal, { className: "mr-2 h-4 w-4" }), " Liggend"] })] })] })) : null, _jsxs("p", { className: "ml-auto text-xs text-muted-foreground", children: ["Afdrukgebied: ", maatTekst(afdruk)] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"GeladenEtiketTab.d.ts","sourceRoot":"","sources":["../../src/components/GeladenEtiketTab.tsx"],"names":[],"mappings":"AASA,OAAO,EAAgE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGnH,qGAAqG;AACrG,eAAO,MAAM,6BAA6B,iDAAiD,CAAC;AAC5F,eAAO,MAAM,mBAAmB,qDAAqD,CAAC;AAEtF,2FAA2F;AAC3F,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,GAAE,GAAG,CAAC,MAAM,CAAa,EAAE,KAAK,GAAE,GAAG,CAAC,MAAM,CAAa,GAAG,OAAO,CAM3H;AAED,wBAAgB,gBAAgB,gCA0C/B"}
+{"version":3,"file":"GeladenEtiketTab.d.ts","sourceRoot":"","sources":["../../src/components/GeladenEtiketTab.tsx"],"names":[],"mappings":"AASA,OAAO,EAAgE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAInH,qGAAqG;AACrG,eAAO,MAAM,6BAA6B,iDAAiD,CAAC;AAC5F,eAAO,MAAM,mBAAmB,qDAAqD,CAAC;AAEtF,2FAA2F;AAC3F,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,GAAE,GAAG,CAAC,MAAM,CAAa,EAAE,KAAK,GAAE,GAAG,CAAC,MAAM,CAAa,GAAG,OAAO,CAM3H;AAED,wBAAgB,gBAAgB,gCAiD/B"}

package/dist-lib/components/GeladenEtiketTab.js

@@ -9,6 +9,7 @@ import { AlertTriangle } from "lucide-react";
 import { maatNl } from "../lib/etiketControle.js";
 import { formaatKlasse, printerTitel, usePrinterLijst, useWerkplekken } from "../lib/werkplekken.js";
 import { GeladenEtiketKeuze } from "./WerkplekkenTab.js";
+import { RolKeuze, useEtiketRollen } from "./RolKeuze.js";
 /** Relatief pad binnen de Shell (leading slash, geen domein). Gelijk aan de waarde in het schema. */
 export const LAYOUTS_PRINTER_SETTINGS_PATH = "/layouts-printers/printplekken?tab=etiketten";
 export const GEEN_ETIKET_MELDING = "Stel bij je labelprinter in welk etiket erin zit";
@@ -26,9 +27,10 @@ export function isLabelprinterRij(p, labelIds = new Set(), a4Ids = new Set()) {
 export function GeladenEtiketTab() {
     const { printers, reload } = usePrinterLijst();
     const { werkplekken } = useWerkplekken();
+    const rollen = useEtiketRollen();
     const actief = werkplekken.filter((w) => w.actief);
     const labelIds = new Set(actief.map((w) => w.label_printer_id).filter(Boolean));
     const a4Ids = new Set(actief.map((w) => w.a4_printer_id).filter(Boolean));
     const labels = printers.filter((p) => isLabelprinterRij(p, labelIds, a4Ids));
-    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Geladen etiket" }), _jsx(CardDescription, { children: "Stel per labelprinter in welk etiket erin zit (breedte \u00D7 hoogte in mm). Zonder etiket worden er geen stickers op die printer geprint." })] }), _jsx(CardContent, { className: "space-y-3", children: labels.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Er is nog geen labelprinter gevonden." })) : (labels.map((p) => (_jsxs("div", { className: "rounded-md border p-3", children: [_jsx("div", { className: "font-medium", children: printerTitel(p) }), _jsxs("div", { className: "mt-1 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Geladen etiket: " }), p.geladen_etiket ? (maatNl(p.geladen_etiket.breedte_mm, p.geladen_etiket.hoogte_mm)) : (_jsxs("span", { className: "text-destructive inline-flex items-center gap-1", children: [_jsx(AlertTriangle, { className: "h-4 w-4" }), " ", GEEN_ETIKET_MELDING] }))] }), _jsx("div", { className: "mt-2", children: _jsx(GeladenEtiketKeuze, { printer: p, onGewijzigd: () => void reload() }) })] }, p.id)))) })] }));
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Geladen etiket" }), _jsx(CardDescription, { children: "Stel per labelprinter in welk etiket erin zit (breedte \u00D7 hoogte in mm). Zonder etiket worden er geen stickers op die printer geprint." })] }), _jsx(CardContent, { className: "space-y-3", children: labels.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Er is nog geen labelprinter gevonden." })) : (labels.map((p) => (_jsxs("div", { className: "rounded-md border p-3", children: [_jsx("div", { className: "font-medium", children: printerTitel(p) }), _jsxs("div", { className: "mt-1 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Geladen etiket: " }), p.geladen_etiket ? (maatNl(p.geladen_etiket.breedte_mm, p.geladen_etiket.hoogte_mm)) : (_jsxs("span", { className: "text-destructive inline-flex items-center gap-1", children: [_jsx(AlertTriangle, { className: "h-4 w-4" }), " ", GEEN_ETIKET_MELDING] }))] }), _jsx("div", { className: "mt-2", children: _jsx(RolKeuze, { printer: p, rollen: rollen, onGewijzigd: () => void reload() }, `${p.id}:${p.rol_id ?? ""}`) }), _jsxs("details", { className: "mt-2", children: [_jsx("summary", { className: "text-muted-foreground cursor-pointer text-xs", children: "Papiermaat zoals de printer die meldt" }), _jsx("div", { className: "mt-2", children: _jsx(GeladenEtiketKeuze, { printer: p, onGewijzigd: () => void reload() }) })] })] }, p.id)))) })] }));
 }

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

@@ -0,0 +1,12 @@
+import { type OverzichtRegel } from "../lib/instelOverzicht.js";
+export declare function laadInstelOverzicht(plekId: string): Promise<{
+    regels: OverzichtRegel[];
+    waarschuwingen: string[];
+}>;
+export declare function InstelOverzichtKaart({ plekId, titel }: {
+    plekId: string;
+    titel?: string;
+}): import("react").JSX.Element;
+/** Startlijst: het overzicht voor elke printplek. */
+export declare function InstelOverzichtAllePlekken(): import("react").JSX.Element | null;
+//# sourceMappingURL=InstelOverzichtKaart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InstelOverzichtKaart.d.ts","sourceRoot":"","sources":["../../src/components/InstelOverzichtKaart.tsx"],"names":[],"mappings":"AASA,OAAO,EAAoD,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAQ/G,wBAAsB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;IAAE,MAAM,EAAE,cAAc,EAAE,CAAC;IAAC,cAAc,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,CA4BzH;AAED,wBAAgB,oBAAoB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAkDzF;AAED,qDAAqD;AACrD,wBAAgB,0BAA0B,uCAiBzC"}

package/dist-lib/components/InstelOverzichtKaart.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/InstelOverzichtKaart.tsx — per printplek: wat gebeurt er per
+// documentsoort (1.69.20). Zelfde keuzeregel als de printwachtrij.
+// ============================================================================
+import { useCallback, useEffect, useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@flowselections/core";
+import { AlertTriangle, CheckCircle2, XCircle } from "lucide-react";
+import { supabase } from "../lib/supabaseClient.js";
+import { berekenInstelOverzicht, ondergrensWaarschuwingen } from "../lib/instelOverzicht.js";
+import { leesStickerInstellingenStrikt } from "../lib/stickerUitwijk.js";
+const db = supabase;
+const arr = (v) => (Array.isArray(v) ? v : []);
+const naamVan = (p) => String(p.weergavenaam || p.naam || "Printer");
+export async function laadInstelOverzicht(plekId) {
+    const [{ data: lijst }, { data: perSoort }, { data: plek }, { data: layouts }, a4Res, instRes] = await Promise.all([
+        db.from("print_plek_printers").select("printer_id").eq("print_plek_id", plekId),
+        db.from("document_printplek_printers").select("printer_id, documenttype").eq("print_plek_id", plekId),
+        db.from("print_plekken").select("a4_terugval").eq("id", plekId).maybeSingle(),
+        db.from("document_layouts").select("id, naam, documenttype, bron, actief, systeem, breedte_mm, hoogte_mm, orientatie, config"),
+        db.rpc("printplek_printer", { _plek: plekId, _documenttype: "pakbon" }),
+        db.rpc("layouts_sticker_verkleinen"),
+    ]);
+    const ids = new Set();
+    for (const r of [...arr(lijst), ...arr(perSoort)])
+        if (r.printer_id)
+            ids.add(String(r.printer_id));
+    const a4Id = typeof a4Res?.data === "string" ? a4Res.data : null;
+    if (a4Id)
+        ids.add(a4Id);
+    const { data: pr } = ids.size
+        ? await db.from("printers").select("id, naam, weergavenaam, geladen_etiket, actief").in("id", [...ids])
+        : { data: [] };
+    const printers = arr(pr).filter((p) => p.actief !== false);
+    const a4 = a4Id ? printers.find((p) => String(p.id) === a4Id) : null;
+    const regels = berekenInstelOverzicht({
+        printers: printers.map((p) => ({ id: String(p.id), naam: naamVan(p), geladen_etiket: p.geladen_etiket })),
+        perSoort: arr(perSoort).map((r) => ({ documenttype: String(r.documenttype), printer_id: r.printer_id ? String(r.printer_id) : null })),
+        a4Printer: a4 ? { id: String(a4.id), naam: naamVan(a4) } : null,
+        a4Terugval: plek?.a4_terugval !== false,
+        layouts: arr(layouts),
+    });
+    const inst = instRes?.error ? null : leesStickerInstellingenStrikt(instRes?.data);
+    const waarschuwingen = [...new Set([...regels.flatMap((r) => r.keuze.waarschuwingen), ...ondergrensWaarschuwingen(inst)])];
+    return { regels, waarschuwingen };
+}
+export function InstelOverzichtKaart({ plekId, titel }) {
+    const [data, setData] = useState(null);
+    const [fout, setFout] = useState(null);
+    const laad = useCallback(async () => {
+        try {
+            setData(await laadInstelOverzicht(plekId));
+            setFout(null);
+        }
+        catch (e) {
+            setFout(e instanceof Error ? e.message : "Overzicht laden mislukt");
+        }
+    }, [plekId]);
+    useEffect(() => {
+        if (plekId)
+            void laad();
+    }, [laad, plekId]);
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: titel ?? "Wat gebeurt er per documentsoort" }), _jsx(CardDescription, { children: "Dezelfde regel als bij het printen: eerst een ontwerp dat past, dan het standaardontwerp, dan A4 of weigeren." })] }), _jsxs(CardContent, { className: "space-y-2 text-sm", children: [fout ? _jsx("p", { className: "text-destructive", children: fout }) : null, !data && !fout ? _jsx("p", { className: "text-muted-foreground", children: "Controleren\u2026" }) : null, data && !data.regels.length ? _jsx("p", { className: "text-muted-foreground", children: "Geen stickerdocumenten om te controleren." }) : null, data?.regels.map((r) => (_jsxs("div", { className: "flex items-start gap-2", children: [r.keuze.stap === 5 ? (_jsx(XCircle, { className: "text-destructive mt-0.5 h-4 w-4 shrink-0" })) : r.keuze.stap === 4 ? (_jsx(AlertTriangle, { className: "text-muted-foreground mt-0.5 h-4 w-4 shrink-0" })) : (_jsx(CheckCircle2, { className: "text-primary mt-0.5 h-4 w-4 shrink-0" })), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: r.document }), " ", r.kort, _jsx("div", { className: "text-muted-foreground text-xs", children: r.keuze.reden })] })] }, r.sleutel))), data?.waarschuwingen.length ? (_jsx("ul", { className: "text-muted-foreground list-disc space-y-1 pl-5 text-xs", children: data.waarschuwingen.map((w) => (_jsx("li", { children: w }, w))) })) : null] })] }));
+}
+/** Startlijst: het overzicht voor elke printplek. */
+export function InstelOverzichtAllePlekken() {
+    const [plekken, setPlekken] = useState([]);
+    useEffect(() => {
+        void db
+            .from("print_plekken")
+            .select("id, naam")
+            .order("naam")
+            .then(({ data }) => setPlekken(arr(data).map((p) => ({ id: String(p.id), naam: String(p.naam ?? "Printplek") }))));
+    }, []);
+    if (!plekken.length)
+        return null;
+    return (_jsx("div", { className: "space-y-3", children: plekken.map((p) => (_jsx(InstelOverzichtKaart, { plekId: p.id, titel: `${p.naam}: wat gebeurt er per documentsoort` }, p.id))) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"KlaarOmTePrintenBlok.d.ts","sourceRoot":"","sources":["../../src/components/KlaarOmTePrintenBlok.tsx"],"names":[],"mappings":"AAwBA,2DAA2D;AAC3D,wBAAgB,oBAAoB,gCAsLnC"}
+{"version":3,"file":"KlaarOmTePrintenBlok.d.ts","sourceRoot":"","sources":["../../src/components/KlaarOmTePrintenBlok.tsx"],"names":[],"mappings":"AAyBA,2DAA2D;AAC3D,wBAAgB,oBAAoB,gCA4LnC"}

package/dist-lib/components/KlaarOmTePrintenBlok.js

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from "@flowselections/core";
 import { CheckCircle2, RefreshCw, XCircle } from "lucide-react";
 import { supabase } from "../lib/supabaseClient.js";
+import { InstelOverzichtAllePlekken } from "./InstelOverzichtKaart.js";
 import { documentTypeLabel } from "../lib/documentTypes.js";
 import { routeringVoor } from "../lib/printRoutering.js";
 import { leesGeladenEtiket } from "../lib/etiketControle.js";
@@ -108,5 +109,5 @@ export function KlaarOmTePrintenBlok() {
         void load();
     }, [load]);
     const Vak = ({ v, naar }) => !v ? (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) : (_jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [v.ok ? _jsx(CheckCircle2, { className: "h-4 w-4 text-primary" }) : _jsx(XCircle, { className: "h-4 w-4 text-destructive" }), _jsx("span", { children: v.tekst }), !v.ok && (_jsx(Button, { asChild: true, size: "sm", variant: "outline", children: _jsx("a", { href: naar, children: "Instellen" }) }))] }));
-    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-2 pb-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Klaar om te printen" }), _jsx(CardDescription, { children: "Per documentsoort: is er een layout, een printer en (bij etiketten) het juiste etiket?" })] }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => void load(), disabled: laden, "aria-label": "Opnieuw controleren", children: _jsx(RefreshCw, { className: `h-4 w-4 ${laden ? "animate-spin" : ""}` }) })] }), _jsxs(CardContent, { children: [_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "text-left text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "py-2 pr-4 font-medium", children: "Document" }), _jsx("th", { className: "py-2 pr-4 font-medium", children: "Layout" }), _jsx("th", { className: "py-2 pr-4 font-medium", children: "Printer" }), _jsx("th", { className: "py-2 font-medium", children: "Etiketmaat" })] }) }), _jsxs("tbody", { children: [regels.map((r) => (_jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "py-2 pr-4 font-medium", children: documentTypeLabel(r.soort) }), _jsx("td", { className: "py-2 pr-4", children: _jsx(Vak, { v: r.layout, naar: NAAR_LAYOUTS }) }), _jsx("td", { className: "py-2 pr-4", children: _jsx(Vak, { v: r.printer, naar: NAAR_PRINTEN }) }), _jsx("td", { className: "py-2", children: _jsx(Vak, { v: r.etiket, naar: NAAR_PRINTEN }) })] }, r.soort))), !regels.length && (_jsx("tr", { children: _jsx("td", { colSpan: 4, className: "py-3 text-muted-foreground", children: laden ? "Controleren…" : "Niets te tonen." }) }))] })] }) }), functies.length > 0 && (_jsxs("details", { className: "mt-4 text-sm", children: [_jsxs("summary", { className: "cursor-pointer text-muted-foreground", children: ["Installatiecontrole databasefuncties (", functies.filter((f) => f.in_orde).length, " van ", functies.length, " in orde)"] }), _jsxs("table", { className: "mt-2 w-full text-xs", children: [_jsx("thead", { className: "text-left text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "py-1 pr-3 font-medium", children: "Functie" }), _jsx("th", { className: "py-1 pr-3 font-medium", children: "Aanwezig" }), _jsx("th", { className: "py-1 font-medium", children: "Interne controle" })] }) }), _jsx("tbody", { children: functies.map((f) => (_jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "py-1 pr-3 font-mono", children: f.functie }), _jsx("td", { className: "py-1 pr-3", children: f.aanwezig ? "ja" : "nee" }), _jsx("td", { className: `py-1 ${f.in_orde ? "" : "text-destructive"}`, children: f.interne_controle })] }, f.functie))) })] })] })), waarschuwingen.length > 0 && (_jsxs("div", { className: "mt-4 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm", role: "status", children: [_jsx("div", { className: "mb-1 font-medium", children: "Let op (waarschuwing, er wordt wel geprint)" }), _jsx("ul", { className: "list-disc space-y-1 pl-5", children: waarschuwingen.map((w) => _jsx("li", { children: w }, w)) })] }))] })] }));
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-2 pb-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: "Klaar om te printen" }), _jsx(CardDescription, { children: "Per documentsoort: is er een layout, een printer en (bij etiketten) het juiste etiket?" })] }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => void load(), disabled: laden, "aria-label": "Opnieuw controleren", children: _jsx(RefreshCw, { className: `h-4 w-4 ${laden ? "animate-spin" : ""}` }) })] }), _jsxs(CardContent, { children: [_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "text-left text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "py-2 pr-4 font-medium", children: "Document" }), _jsx("th", { className: "py-2 pr-4 font-medium", children: "Layout" }), _jsx("th", { className: "py-2 pr-4 font-medium", children: "Printer" }), _jsx("th", { className: "py-2 font-medium", children: "Etiketmaat" })] }) }), _jsxs("tbody", { children: [regels.map((r) => (_jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "py-2 pr-4 font-medium", children: documentTypeLabel(r.soort) }), _jsx("td", { className: "py-2 pr-4", children: _jsx(Vak, { v: r.layout, naar: NAAR_LAYOUTS }) }), _jsx("td", { className: "py-2 pr-4", children: _jsx(Vak, { v: r.printer, naar: NAAR_PRINTEN }) }), _jsx("td", { className: "py-2", children: _jsx(Vak, { v: r.etiket, naar: NAAR_PRINTEN }) })] }, r.soort))), !regels.length && (_jsx("tr", { children: _jsx("td", { colSpan: 4, className: "py-3 text-muted-foreground", children: laden ? "Controleren…" : "Niets te tonen." }) }))] })] }) }), functies.length > 0 && (_jsxs("details", { className: "mt-4 text-sm", children: [_jsxs("summary", { className: "cursor-pointer text-muted-foreground", children: ["Installatiecontrole databasefuncties (", functies.filter((f) => f.in_orde).length, " van ", functies.length, " in orde)"] }), _jsxs("table", { className: "mt-2 w-full text-xs", children: [_jsx("thead", { className: "text-left text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "py-1 pr-3 font-medium", children: "Functie" }), _jsx("th", { className: "py-1 pr-3 font-medium", children: "Aanwezig" }), _jsx("th", { className: "py-1 font-medium", children: "Interne controle" })] }) }), _jsx("tbody", { children: functies.map((f) => (_jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "py-1 pr-3 font-mono", children: f.functie }), _jsx("td", { className: "py-1 pr-3", children: f.aanwezig ? "ja" : "nee" }), _jsx("td", { className: `py-1 ${f.in_orde ? "" : "text-destructive"}`, children: f.interne_controle })] }, f.functie))) })] })] })), _jsxs("details", { className: "mt-4 text-sm", open: true, children: [_jsx("summary", { className: "text-muted-foreground cursor-pointer", children: "Per printplek: wat gebeurt er per documentsoort" }), _jsx("div", { className: "mt-2", children: _jsx(InstelOverzichtAllePlekken, {}) })] }), waarschuwingen.length > 0 && (_jsxs("div", { className: "mt-4 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm", role: "status", children: [_jsx("div", { className: "mb-1 font-medium", children: "Let op (waarschuwing, er wordt wel geprint)" }), _jsx("ul", { className: "list-disc space-y-1 pl-5", children: waarschuwingen.map((w) => _jsx("li", { children: w }, w)) })] }))] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutsPage.d.ts","sourceRoot":"","sources":["../../src/components/LayoutsPage.tsx"],"names":[],"mappings":"AAmFA,wBAAgB,WAAW,CAAC,EAAE,OAAe,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,+BAkpB1E"}
+{"version":3,"file":"LayoutsPage.d.ts","sourceRoot":"","sources":["../../src/components/LayoutsPage.tsx"],"names":[],"mappings":"AAyFA,wBAAgB,WAAW,CAAC,EAAE,OAAe,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,+BA+qB1E"}

package/dist-lib/components/LayoutsPage.js

@@ -13,6 +13,10 @@ import { ontbrekendeStandaarden, soortenZonderKeuze } from "../lib/klaarOmTePrin
 import { documentTypeLabel as soortLabel } from "../lib/documentTypes.js";
 import { dupliceerLayout, maakLayout, updateLayout, useLayouts, laatsteLayoutBeheerMelding, verwijderLayout, } from "../lib/useDocumentData.js";
 import { LayoutPrinterSelect } from "./LayoutPrinterSelect.js";
+import { afdrukMaat, maatTekst, opslagVoorAfdrukMaat } from "../lib/formaatWeergave.js";
+import { VELDEN_PER_KLASSE } from "../lib/stickerOntwerp.js";
+import { formaatKlasse } from "../lib/etiketRollen.js";
+import { isStickerOntwerpSoort } from "../lib/stickerRoute.js";
 import { DOCUMENT_TYPES, FLORIDAY_LAYOUT_TOELICHTING, PAPIERFORMATEN, documentTypeLabel, isFloridayLayout, } from "../lib/documentTypes.js";
 import { DOCUMENT_PROFIELEN, documentProfiel, primaireProfielen, standaardConfig, } from "../lib/documentProfiles.js";
 /** Elk documenttype krijgt zijn eigen opbouwpagina. */
@@ -21,6 +25,8 @@ function builderRoute(documenttype, layoutId) {
         return { to: "/layouts-printers/productiebon/$layoutId", params: { layoutId } };
     if (documenttype === "afleverbrief" || documenttype === "veilingbrief")
         return { to: "/layouts-printers/afleverbrief/$layoutId", params: { layoutId } };
+    if (isStickerOntwerpSoort(documenttype))
+        return { to: "/layouts-printers/sticker/$layoutId", params: { layoutId } };
     return { to: "/layouts-printers/pakbon/$layoutId", params: { layoutId } };
 }
 function klantOntwerpLayout(l) {
@@ -53,6 +59,8 @@ export function LayoutsPage({ ingebed = false } = {}) {
     const [omschrijving, setOmschrijving] = useState("");
     const [formaatCode, setFormaatCode] = useState("A4");
     const [orientatie, setOrientatie] = useState("portrait");
+    const [vrijB, setVrijB] = useState("");
+    const [vrijH, setVrijH] = useState("");
     const [klantLayout, setKlantLayout] = useState(false);
     const [bezig, setBezig] = useState(false);
     const klantOntwerp = documenttype === "sticker" && klantLayout;
@@ -130,6 +138,20 @@ export function LayoutsPage({ ingebed = false } = {}) {
         const formaat = profiel.formaten.find((f) => f.code === formaatCode) ??
             PAPIERFORMATEN.find((f) => f.code === formaatCode) ??
             profiel.formaten[0];
+        let maat = {
+            breedte_mm: formaat.breedte,
+            hoogte_mm: formaat.hoogte,
+            orientatie,
+        };
+        if (formaat.code === "VRIJ" && !klantOntwerp) {
+            const b = Number(vrijB.replace(",", "."));
+            const h = Number(vrijH.replace(",", "."));
+            if (!(b > 0) || !(h > 0)) {
+                toast.error("Vul bij Vrij formaat de breedte en hoogte in mm in");
+                return;
+            }
+            maat = opslagVoorAfdrukMaat(b, h);
+        }
         setBezig(true);
         try {
             const id = await maakLayout({
@@ -137,14 +159,16 @@ export function LayoutsPage({ ingebed = false } = {}) {
                 documenttype,
                 omschrijving: omschrijving.trim(),
                 papierformaat: formaat.code,
-                breedte_mm: formaat.breedte,
-                hoogte_mm: formaat.hoogte,
-                orientatie,
+                ...maat,
                 config: (() => {
                     const c = standaardConfig(profiel);
                     if (documenttype === "sticker") {
                         c.klantlayout = { ...(c.klantlayout ?? {}), gebruik_klantlayout: klantLayout };
                     }
+                    if (isStickerOntwerpSoort(documenttype) && !klantOntwerp) {
+                        const a = afdrukMaat(maat);
+                        c.fs_sticker = { velden: VELDEN_PER_KLASSE[formaatKlasse(a.breedte_mm, a.hoogte_mm)] };
+                    }
                     return c;
                 })(),
             });
@@ -177,7 +201,7 @@ export function LayoutsPage({ ingebed = false } = {}) {
                             catch (e) {
                                 toast.error(e instanceof Error ? e.message : "Standaard maken mislukt");
                             }
-                        }, children: "Maak standaard" })] }, o.soort))), soortenZonderKeuze(layouts).map((o) => (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-destructive" }), _jsxs("span", { children: ["Geen standaardlayout voor ", soortLabel(o.soort), " \u2013 er zijn ", o.aantal, " actieve layouts. Kies er zelf \u00E9\u00E9n met ", _jsx("strong", { children: "Maak standaard" }), "."] })] }, `keuze-${o.soort}-${o.bron}`))), _jsx(LayoutVerwijzingenKaart, { onGewijzigd: () => void reload() }), _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-5", 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(Select, { value: bronFilter, onValueChange: setBronFilter, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Herkomst" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Alle herkomsten" }), _jsx(SelectItem, { value: "eigen", children: "Eigen ontwerp" }), _jsx(SelectItem, { value: "floriday", children: "Uit Floriday" })] })] })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Naam" }), _jsx(TableHead, { children: "Documenttype" }), _jsx(TableHead, { children: "Formaat" }), _jsxs(TableHead, { children: [_jsx("div", { children: "Printer nu" }), _jsxs("div", { className: "text-xs font-normal", children: ["bedrijfsstandaard, in te stellen op", " ", _jsx(Link, { to: "/layouts-printers/printplekken", className: "text-primary underline", children: "Printen" })] })] }), _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" }), isFloridayLayout(l) && _jsx(Badge, { variant: "outline", children: "Uit Floriday" })] }), (l.omschrijving || isFloridayLayout(l)) && (_jsx("span", { className: "text-xs text-muted-foreground", children: isFloridayLayout(l) ? FLORIDAY_LAYOUT_TOELICHTING : l.omschrijving })), !isFloridayLayout(l) && !klantOntwerpLayout(l) && (_jsx(StandaardLayoutActies, { layout: l, standaarden: standaarden, onGewijzigd: () => void reload() }))] }), _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"] }), _jsx(TableCell, { className: "min-w-52", children: _jsx(LayoutPrinterSelect, { layoutId: l.id, documenttype: l.documenttype }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: l.actief, onCheckedChange: async (v) => {
+                        }, children: "Maak standaard" })] }, o.soort))), soortenZonderKeuze(layouts).map((o) => (_jsxs("div", { className: "flex items-center gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-destructive" }), _jsxs("span", { children: ["Geen standaardlayout voor ", soortLabel(o.soort), " \u2013 er zijn ", o.aantal, " actieve layouts. Kies er zelf \u00E9\u00E9n met ", _jsx("strong", { children: "Maak standaard" }), "."] })] }, `keuze-${o.soort}-${o.bron}`))), _jsx(LayoutVerwijzingenKaart, { onGewijzigd: () => void reload() }), _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-5", 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(Select, { value: bronFilter, onValueChange: setBronFilter, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Herkomst" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "alle", children: "Alle herkomsten" }), _jsx(SelectItem, { value: "eigen", children: "Eigen ontwerp" }), _jsx(SelectItem, { value: "floriday", children: "Uit Floriday" })] })] })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Naam" }), _jsx(TableHead, { children: "Documenttype" }), _jsx(TableHead, { children: "Formaat" }), _jsxs(TableHead, { children: [_jsx("div", { children: "Printer nu" }), _jsxs("div", { className: "text-xs font-normal", children: ["bedrijfsstandaard, in te stellen op", " ", _jsx(Link, { to: "/layouts-printers/printplekken", className: "text-primary underline", children: "Printen" })] })] }), _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" }), isFloridayLayout(l) && _jsx(Badge, { variant: "outline", children: "Uit Floriday" })] }), (l.omschrijving || isFloridayLayout(l)) && (_jsx("span", { className: "text-xs text-muted-foreground", children: isFloridayLayout(l) ? FLORIDAY_LAYOUT_TOELICHTING : l.omschrijving })), !isFloridayLayout(l) && !klantOntwerpLayout(l) && (_jsx(StandaardLayoutActies, { layout: l, standaarden: standaarden, onGewijzigd: () => void reload() }))] }), _jsx(TableCell, { children: documentTypeLabel(l.documenttype) }), _jsxs(TableCell, { className: "text-sm text-muted-foreground", children: [l.papierformaat, " \u00B7 ", maatTekst(afdrukMaat(l))] }), _jsx(TableCell, { className: "min-w-52", children: _jsx(LayoutPrinterSelect, { layoutId: l.id, documenttype: l.documenttype }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: l.actief, onCheckedChange: async (v) => {
                                                                         await updateLayout(l.id, { actief: v });
                                                                         void reload();
                                                                     } }), !l.is_standaard && (_jsx(Button, { variant: "ghost", size: "sm", onClick: async () => {
@@ -224,7 +248,7 @@ export function LayoutsPage({ ingebed = false } = {}) {
                                                 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) => {
+                                            }, 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))) })] })] }), formaatCode === "VRIJ" ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Maat (breedte \u00D7 hoogte, mm)" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { "aria-label": "Breedte in mm", inputMode: "decimal", value: vrijB, onChange: (e) => setVrijB(e.target.value), placeholder: "breedte" }), _jsx("span", { children: "\u00D7" }), _jsx(Input, { "aria-label": "Hoogte in mm", inputMode: "decimal", value: vrijH, onChange: (e) => setVrijH(e.target.value), placeholder: "hoogte" })] })] })) : (_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)) {

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

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

package/dist-lib/components/PakbonBuilderPage.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { Link } from "@tanstack/react-router";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { isStickerOntwerpSoort } from "../lib/stickerRoute.js";
 import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast, } from "@flowselections/core";
 import { AlertTriangle, ArrowLeft, CheckCircle2, Loader2, Printer, Save } from "lucide-react";
 import { PakbonSectiesPanel } from "./PakbonSectiesPanel.js";
@@ -35,6 +36,13 @@ export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
         if (layout)
             setConfig(leesPakbonConfig(layout.config));
     }, [layout?.id]);
+    // Stickers horen in de stickerontwerper (1.69.20); de inhoud blijft behouden.
+    const naarSticker = useNavigate();
+    useEffect(() => {
+        if (layout && isStickerOntwerpSoort(layout.documenttype)) {
+            void naarSticker({ to: "/layouts-printers/sticker/$layoutId", params: { layoutId: layout.id }, replace: true });
+        }
+    }, [layout?.id, layout?.documenttype]);
     const breedte = useMemo(() => (layout?.orientatie === "landscape" ? layout?.hoogte_mm : layout?.breedte_mm) ?? 210, [layout]);
     const hoogte = useMemo(() => (layout?.orientatie === "landscape" ? layout?.breedte_mm : layout?.hoogte_mm) ?? 297, [layout]);
     const marge = Number(layout?.marge_boven ?? 10);

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

@@ -1 +1 @@
-{"version":3,"file":"PrintersPage.d.ts","sourceRoot":"","sources":["../../src/components/PrintersPage.tsx"],"names":[],"mappings":"AA2BA,wBAAgB,YAAY,CAAC,EAAE,OAAe,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,+BAsM3E"}
+{"version":3,"file":"PrintersPage.d.ts","sourceRoot":"","sources":["../../src/components/PrintersPage.tsx"],"names":[],"mappings":"AA2BA,wBAAgB,YAAY,CAAC,EAAE,OAAe,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,+BAuM3E"}

package/dist-lib/components/PrintersPage.js

@@ -21,7 +21,7 @@ export function PrintersPage({ ingebed = false } = {}) {
     const { layouts } = useLayouts();
     const navigate = useNavigate();
     const { computers, loading: computersLaden, fout: computersFout, reload: herlaadComputers, } = useComputers();
-    const { gevonden, zoek } = useNetwerkPrinters();
+    const { gevonden, zoek, geladen: lijstGeladen } = useNetwerkPrinters();
     const [computerToevoegen, setComputerToevoegen] = useState(false);
     const [zoekterm, setZoekterm] = useState("");
     const [status, setStatus] = useState("alle");
@@ -38,7 +38,8 @@ export function PrintersPage({ ingebed = false } = {}) {
             naam: c.naam,
             online: c.online,
             locatie: info?.locaties.join(" · ") || "Geen locatie",
-            telling: info ?? { gevonden: c.aantalGevonden, ingesteld: 0, gekoppeld: 0, locaties: [] },
+            // Zonder PrintNode-lijst is "ingesteld" niet te tellen; dan alleen het gevonden aantal.
+            telling: info ?? { gevonden: lijstGeladen ? c.aantalGevonden : 0, ingesteld: 0, gekoppeld: 0, locaties: [] },
         };
     });
     const locaties = Array.from(new Set(alleRijen.map((r) => r.locatie))).filter((l) => l !== "Geen locatie");

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

@@ -1 +1 @@
-{"version":3,"file":"PrintplekDetailPage.d.ts","sourceRoot":"","sources":["../../src/components/PrintplekDetailPage.tsx"],"names":[],"mappings":"AA0EA,wBAAgB,mBAAmB,gCA2uBlC"}
+{"version":3,"file":"PrintplekDetailPage.d.ts","sourceRoot":"","sources":["../../src/components/PrintplekDetailPage.tsx"],"names":[],"mappings":"AA2EA,wBAAgB,mBAAmB,gCA6uBlC"}

package/dist-lib/components/PrintplekDetailPage.js

@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // computers, printers (per computer) en welk document naar welke printer gaat.
 // Alles is hier direct bewerkbaar; de wizard is alleen voor een nieuwe plek.
 // ============================================================================
+import { InstelOverzichtKaart } from "./InstelOverzichtKaart.js";
 import { useEffect, useMemo, useState } from "react";
 import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, toast, } from "@flowselections/core";
 import { Link, useNavigate, useParams } from "@tanstack/react-router";
@@ -257,7 +258,7 @@ export function PrintplekDetailPage() {
                                         }, children: _jsx(Check, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => setNaamBewerken(false), children: _jsx(X, { className: "h-4 w-4" }) })] })) : (_jsx("h1", { className: "cursor-pointer text-xl font-semibold", onClick: () => {
                                     setNaam(plek.naam);
                                     setNaamBewerken(true);
-                                }, children: plek.naam })), _jsx("p", { className: "text-muted-foreground text-sm", children: plek.omschrijving ?? "Hier stel je alles in wat er op deze plek wordt afgedrukt." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => setTestprintOpen(true), children: [_jsx(Printer, { className: "mr-2 h-4 w-4" }), " Testprint controleren"] }), _jsxs(Button, { variant: "ghost", className: "text-destructive", onClick: () => setVerwijderOpen(true), children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), " Verwijderen"] })] })] }), _jsx(PrintplekVerwijderenDialog, { plek: verwijderOpen ? { id: plek.id, naam: plek.naam } : null, onOpenChange: setVerwijderOpen, onKlaar: () => void navigate({ to: "/layouts-printers/printplekken" }) }), _jsx(TestprintDialog, { open: testprintOpen, onOpenChange: setTestprintOpen, printplekId: plekId, printplekNaam: plek.naam }), uitgevallen.length > 0 && (_jsxs("div", { role: "alert", className: "rounded-lg border border-destructive bg-destructive/10 px-4 py-3 text-sm text-destructive", children: [_jsx("strong", { children: "Computer niet verbonden:" }), " ", uitgevallen.join(", "), ". Opdrachten voor deze plek worden pas geprint als de computer weer verbonden is, en verlopen anders."] })), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [_jsx(Monitor, { className: "h-4 w-4" }), " Computers op deze plek"] }), _jsx(CardDescription, { children: "Het bolletje laat zien of de computer nu aan staat." })] }), vrijeComputers.length > 0 ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("select", { className: selectKlasse, value: computerToevoegen, onChange: (e) => setComputerToevoegen(e.target.value), "aria-label": "Computer kiezen", children: [_jsx("option", { value: "", children: "Computer kiezen\u2026" }), vrijeComputers.map((c) => (_jsx("option", { value: c.naam, children: c.naam }, c.id)))] }), _jsxs(Button, { size: "sm", disabled: !computerToevoegen, onClick: async () => {
+                                }, children: plek.naam })), _jsx("p", { className: "text-muted-foreground text-sm", children: plek.omschrijving ?? "Hier stel je alles in wat er op deze plek wordt afgedrukt." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => setTestprintOpen(true), children: [_jsx(Printer, { className: "mr-2 h-4 w-4" }), " Testprint controleren"] }), _jsxs(Button, { variant: "ghost", className: "text-destructive", onClick: () => setVerwijderOpen(true), children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), " Verwijderen"] })] })] }), _jsx(PrintplekVerwijderenDialog, { plek: verwijderOpen ? { id: plek.id, naam: plek.naam } : null, onOpenChange: setVerwijderOpen, onKlaar: () => void navigate({ to: "/layouts-printers/printplekken" }) }), _jsx(TestprintDialog, { open: testprintOpen, onOpenChange: setTestprintOpen, printplekId: plekId, printplekNaam: plek.naam }), uitgevallen.length > 0 && (_jsxs("div", { role: "alert", className: "rounded-lg border border-destructive bg-destructive/10 px-4 py-3 text-sm text-destructive", children: [_jsx("strong", { children: "Computer niet verbonden:" }), " ", uitgevallen.join(", "), ". Opdrachten voor deze plek worden pas geprint als de computer weer verbonden is, en verlopen anders."] })), _jsx(InstelOverzichtKaart, { plekId: plekId }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [_jsx(Monitor, { className: "h-4 w-4" }), " Computers op deze plek"] }), _jsx(CardDescription, { children: "Het bolletje laat zien of de computer nu aan staat." })] }), vrijeComputers.length > 0 ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("select", { className: selectKlasse, value: computerToevoegen, onChange: (e) => setComputerToevoegen(e.target.value), "aria-label": "Computer kiezen", children: [_jsx("option", { value: "", children: "Computer kiezen\u2026" }), vrijeComputers.map((c) => (_jsx("option", { value: c.naam, children: c.naam }, c.id)))] }), _jsxs(Button, { size: "sm", disabled: !computerToevoegen, onClick: async () => {
                                             try {
                                                 await koppelComputerAanPrintplek(plekId, computerToevoegen, computers.find((k) => k.naam === computerToevoegen)?.id);
                                                 setComputerToevoegen("");

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

@@ -0,0 +1,9 @@
+import { type EtiketRol } from "../lib/etiketRollen.js";
+import { type PrinterRij } from "../lib/werkplekken.js";
+export declare function useEtiketRollen(): EtiketRol[];
+export declare function RolKeuze({ printer, rollen, onGewijzigd }: {
+    printer: PrinterRij;
+    rollen: EtiketRol[];
+    onGewijzigd: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=RolKeuze.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RolKeuze.d.ts","sourceRoot":"","sources":["../../src/components/RolKeuze.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAsD,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEzG,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMvE,wBAAgB,eAAe,gBAiB9B;AAED,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE;IAAE,OAAO,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,SAAS,EAAE,CAAC;IAAC,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,+BA0G/H"}

package/dist-lib/components/RolKeuze.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ============================================================================
+// src/components/RolKeuze.tsx — per printer kiezen welke etiketrol erin zit
+// (1.69.20). De keuzelijst komt uit print_etiketrollen (data, niet code), plus
+// "Zelf invullen". Opslaan zet rol_* én geladen_etiket (dat leest de wachtrij).
+// ============================================================================
+import { useEffect, useState } from "react";
+import { Button, Input, toast } from "@flowselections/core";
+import { AlertTriangle } from "lucide-react";
+import { supabase } from "../lib/supabaseClient.js";
+import { leesbareFout } from "../lib/foutTekst.js";
+import { INVOERRICHTINGEN, leesRollen, rolNaarGeladenEtiket } from "../lib/etiketRollen.js";
+import { maatNl } from "../lib/etiketControle.js";
+import { zetPrinterVelden } from "../lib/werkplekken.js";
+const db = supabase;
+const selectKlasse = "border-input bg-background rounded-md border px-2 py-1 text-sm";
+const ZELF = "__zelf__";
+export function useEtiketRollen() {
+    const [rollen, setRollen] = useState([]);
+    useEffect(() => {
+        let actief = true;
+        void db
+            .from("print_etiketrollen")
+            .select("*")
+            .eq("actief", true)
+            .order("volgorde")
+            .then(({ data }) => {
+            if (actief)
+                setRollen(leesRollen(data));
+        });
+        return () => {
+            actief = false;
+        };
+    }, []);
+    return rollen;
+}
+export function RolKeuze({ printer, rollen, onGewijzigd }) {
+    const huidigeRol = rollen.find((r) => r.id === printer.rol_id) ?? null;
+    const e = printer.geladen_etiket;
+    const [keuze, setKeuze] = useState(huidigeRol?.id ?? (e ? ZELF : ""));
+    const [breedte, setBreedte] = useState(e && !huidigeRol ? String(e.breedte_mm) : "");
+    const [hoogte, setHoogte] = useState(e && !huidigeRol ? String(e.hoogte_mm) : "");
+    const [richting, setRichting] = useState(printer.rol_invoerrichting ?? "korte_zijde");
+    const [marge, setMarge] = useState(printer.rol_marge_mm != null ? String(printer.rol_marge_mm) : "0");
+    const [doorlopend, setDoorlopend] = useState(printer.rol_doorlopend ?? huidigeRol?.doorlopend ?? false);
+    const [bezig, setBezig] = useState(false);
+    useEffect(() => {
+        setKeuze(huidigeRol?.id ?? (e ? ZELF : ""));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [huidigeRol?.id]);
+    const opslaan = async () => {
+        let maat = null;
+        let rolId = null;
+        if (keuze === ZELF) {
+            const b = Number(breedte.replace(",", "."));
+            const h = Number(hoogte.replace(",", "."));
+            if (!(b > 0) || !(h > 0)) {
+                toast.error("Vul breedte en hoogte in mm in.");
+                return;
+            }
+            maat = { naam: `${b} × ${h} mm`, breedte_mm: b, hoogte_mm: h };
+        }
+        else if (keuze) {
+            const r = rollen.find((x) => x.id === keuze);
+            if (!r)
+                return;
+            rolId = r.id;
+            maat = { naam: r.naam, breedte_mm: r.breedte_mm, hoogte_mm: r.hoogte_mm };
+        }
+        const m = Number(marge.replace(",", "."));
+        setBezig(true);
+        try {
+            await zetPrinterVelden(printer.id, {
+                rol_id: rolId,
+                rol_invoerrichting: maat ? richting : null,
+                rol_marge_mm: maat && m >= 0 ? m : null,
+                rol_doorlopend: maat ? doorlopend : null,
+                geladen_etiket: maat ? rolNaarGeladenEtiket(maat, printer.ondersteunde_formaten) : null,
+            });
+            toast.success(maat ? `Rol opgeslagen: ${maatNl(maat.breedte_mm, maat.hoogte_mm)}` : "Rol gewist: formaat onbekend");
+            onGewijzigd();
+        }
+        catch (err) {
+            toast.error(leesbareFout(err, "Opslaan mislukt"));
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    return (_jsxs("div", { className: "space-y-2 text-sm", id: `rol-${printer.id}`, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Rol in de printer:" }), _jsxs("select", { className: selectKlasse, value: keuze, onChange: (ev) => setKeuze(ev.target.value), "aria-label": "Rol in de printer", children: [_jsx("option", { value: "", children: "\u2014 formaat onbekend \u2014" }), rollen.map((r) => (_jsxs("option", { value: r.id, children: [r.naam, " (", maatNl(r.breedte_mm, r.hoogte_mm), ")"] }, r.id))), _jsx("option", { value: ZELF, children: "Zelf invullen\u2026" })] }), keuze === ZELF ? (_jsxs(_Fragment, { children: [_jsx(Input, { className: "h-8 w-20", inputMode: "decimal", placeholder: "breedte", value: breedte, onChange: (ev) => setBreedte(ev.target.value), "aria-label": "Breedte in mm" }), _jsx("span", { children: "\u00D7" }), _jsx(Input, { className: "h-8 w-20", inputMode: "decimal", placeholder: "hoogte", value: hoogte, onChange: (ev) => setHoogte(ev.target.value), "aria-label": "Hoogte in mm" }), _jsx("span", { className: "text-muted-foreground", children: "mm" })] })) : null] }), keuze ? (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("label", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-muted-foreground", children: "Invoer:" }), _jsx("select", { className: selectKlasse, value: richting, onChange: (ev) => setRichting(ev.target.value), children: INVOERRICHTINGEN.map((r) => (_jsx("option", { value: r.waarde, children: r.label }, r.waarde))) })] }), _jsxs("label", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-muted-foreground", children: "Marge:" }), _jsx(Input, { className: "h-8 w-16", inputMode: "decimal", value: marge, onChange: (ev) => setMarge(ev.target.value), "aria-label": "Marge in mm" }), _jsx("span", { className: "text-muted-foreground", children: "mm" })] }), _jsxs("label", { className: "flex items-center gap-1", children: [_jsx("input", { type: "checkbox", checked: doorlopend, onChange: (ev) => setDoorlopend(ev.target.checked) }), _jsx("span", { children: "Doorlopend (anders ponsband)" })] })] })) : (_jsxs("p", { className: "text-destructive flex items-center gap-1 text-xs", children: [_jsx(AlertTriangle, { className: "h-3 w-3" }), " Formaat onbekend: stel in welke rol erin zit. Er wordt niet aangenomen dat het A4 is."] })), _jsx(Button, { size: "sm", variant: "outline", disabled: bezig, onClick: () => void opslaan(), children: "Rol opslaan" })] }));
+}

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

@@ -0,0 +1,4 @@
+export declare function StickerOntwerpPage({ layoutId: layoutIdProp }?: {
+    layoutId?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=StickerOntwerpPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StickerOntwerpPage.d.ts","sourceRoot":"","sources":["../../src/components/StickerOntwerpPage.tsx"],"names":[],"mappings":"AA6BA,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,+BA6IxF"}