@flowselections/layout-maker 1.3.2

package/dist-lib/lib/documentTypes.js

@@ -0,0 +1,74 @@
+// ============================================================================
+// src/lib/documentTypes.ts — types & constanten voor Document Layouts
+// ============================================================================
+export const DOCUMENT_TYPES = [
+    { value: "pakbon", label: "Pakbon" },
+    { value: "sticker", label: "Sticker" },
+    { value: "productiebon", label: "Productiebon" },
+    { value: "factuur", label: "Factuur" },
+    { value: "offerte", label: "Offerte" },
+    { value: "orderbevestiging", label: "Orderbevestiging" },
+    { value: "etiket", label: "Etiket" },
+    { value: "verzendlabel", label: "Verzendlabel" },
+    { value: "productlabel", label: "Productlabel" },
+    { value: "barcode_label", label: "Barcode label" },
+    { value: "magazijnlijst", label: "Magazijnlijst" },
+    { value: "controlelijst", label: "Controlelijst" },
+    { value: "transportdocument", label: "Transportdocument" },
+    { value: "vrij", label: "Vrij document" },
+];
+export function documentTypeLabel(value) {
+    return DOCUMENT_TYPES.find((d) => d.value === value)?.label ?? value;
+}
+export const PAPIERFORMATEN = [
+    { code: "A4", label: "A4 (210 × 297 mm)", breedte: 210, hoogte: 297 },
+    { code: "A5", label: "A5 (148 × 210 mm)", breedte: 148, hoogte: 210 },
+    { code: "A6", label: "A6 (105 × 148 mm)", breedte: 105, hoogte: 148 },
+    { code: "LETTER", label: "Letter (216 × 279 mm)", breedte: 216, hoogte: 279 },
+    { code: "BON80", label: "Bon 80 mm", breedte: 80, hoogte: 200 },
+    { code: "LABEL_100x150", label: "Label 100 × 150 mm", breedte: 100, hoogte: 150 },
+    { code: "LABEL_100x62", label: "Label 100 × 62 mm", breedte: 100, hoogte: 62 },
+    { code: "LABEL_57x32", label: "Label 57 × 32 mm", breedte: 57, hoogte: 32 },
+    { code: "VRIJ", label: "Vrij formaat", breedte: 210, hoogte: 297 },
+];
+export const ELEMENT_STANDAARD = {
+    tekst: { label: "Tekst", breedte: 60, hoogte: 8, content: "Nieuwe tekst" },
+    veld: { label: "Databaseveld", breedte: 60, hoogte: 8, content: "{{order.nummer}}" },
+    afbeelding: { label: "Afbeelding", breedte: 40, hoogte: 30, content: "" },
+    logo: { label: "Logo", breedte: 45, hoogte: 18, content: "Bedrijfslogo" },
+    lijn: { label: "Lijn", breedte: 80, hoogte: 0.5, content: "" },
+    rechthoek: { label: "Rechthoek", breedte: 50, hoogte: 25, content: "" },
+    cirkel: { label: "Cirkel", breedte: 25, hoogte: 25, content: "" },
+    barcode: { label: "Barcode", breedte: 60, hoogte: 18, content: "{{order.nummer}}" },
+    qrcode: { label: "QR-code", breedte: 30, hoogte: 30, content: "{{order.track_trace}}" },
+    tabel: { label: "Tabel", breedte: 180, hoogte: 100, content: "" },
+    lijst: { label: "Lijst", breedte: 90, hoogte: 40, content: "" },
+    paginanummer: { label: "Paginanummer", breedte: 40, hoogte: 8, content: "Pagina {p} van {n}" },
+    datum: { label: "Datum", breedte: 40, hoogte: 8, content: "{{systeem.datum}}" },
+    tijd: { label: "Tijd", breedte: 30, hoogte: 8, content: "{{systeem.tijd}}" },
+    handtekening: { label: "Handtekeningvak", breedte: 70, hoogte: 30, content: "Handtekening" },
+    svg: { label: "SVG / icoon", breedte: 20, hoogte: 20, content: "" },
+    html: { label: "HTML blok", breedte: 90, hoogte: 30, content: "<b>HTML</b>" },
+};
+export const STANDAARD_STIJL = {
+    fontfamilie: "Helvetica",
+    fontgrootte: 10,
+    vet: false,
+    cursief: false,
+    onderstreept: false,
+    kleur: "#111827",
+    achtergrond: "transparent",
+    randbreedte: 0,
+    randkleur: "#111827",
+    padding: 0,
+    uitlijning: "left",
+    transparantie: 100,
+    regelhoogte: 1.2,
+};
+export const STANDAARD_KOLOMMEN = [
+    { key: "code", kop: "Artikelcode", veldpad: "regel.artikelcode", breedte: 20 },
+    { key: "naam", kop: "Omschrijving", veldpad: "regel.artikelnaam", breedte: 40 },
+    { key: "aantal", kop: "Aantal", veldpad: "regel.aantal", breedte: 12, uitlijning: "right" },
+    { key: "prijs", kop: "Prijs", veldpad: "regel.prijs", breedte: 14, uitlijning: "right" },
+    { key: "totaal", kop: "Totaal", veldpad: "regel.totaal", breedte: 14, uitlijning: "right", totaal: true },
+];

package/dist-lib/lib/fieldRegistry.d.ts

@@ -0,0 +1,20 @@
+export type VeldSoort = "tekst" | "getal" | "bedrag" | "datum" | "boolean" | "lijst";
+export interface VeldDefinitie {
+    pad: string;
+    label: string;
+    soort: VeldSoort;
+    voorbeeld?: string | number;
+}
+export interface EntiteitDefinitie {
+    key: string;
+    label: string;
+    moduleId: string;
+    isLijst?: boolean;
+    velden: VeldDefinitie[];
+}
+export declare function registreerEntiteit(def: EntiteitDefinitie): void;
+export declare function veldRegisterSubscribe(l: () => void): () => void;
+export declare function alleEntiteiten(): EntiteitDefinitie[];
+export declare function alleVelden(): VeldDefinitie[];
+export declare function zoekVeld(pad: string): VeldDefinitie | undefined;
+//# sourceMappingURL=fieldRegistry.d.ts.map

package/dist-lib/lib/fieldRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldRegistry.d.ts","sourceRoot":"","sources":["../../src/lib/fieldRegistry.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAErF,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,aAAa,EAAE,CAAC;CACzB;AAKD,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,iBAAiB,QAGxD;AAED,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,MAAM,IAAI,cAKlD;AAED,wBAAgB,cAAc,IAAI,iBAAiB,EAAE,CAEpD;AAED,wBAAgB,UAAU,IAAI,aAAa,EAAE,CAE5C;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAE/D"}

package/dist-lib/lib/fieldRegistry.js

@@ -0,0 +1,123 @@
+// ============================================================================
+// src/lib/fieldRegistry.ts — dynamisch veldregister
+// ============================================================================
+// Iedere ERP-module registreert hier zijn entiteiten en velden. De editor
+// leest uitsluitend dit register, waardoor nieuwe modules automatisch
+// beschikbaar komen zonder dat de editor aangepast hoeft te worden.
+// ============================================================================
+const registry = new Map();
+const listeners = new Set();
+export function registreerEntiteit(def) {
+    registry.set(def.key, def);
+    listeners.forEach((l) => l());
+}
+export function veldRegisterSubscribe(l) {
+    listeners.add(l);
+    return () => {
+        listeners.delete(l);
+    };
+}
+export function alleEntiteiten() {
+    return Array.from(registry.values());
+}
+export function alleVelden() {
+    return alleEntiteiten().flatMap((e) => e.velden);
+}
+export function zoekVeld(pad) {
+    return alleVelden().find((v) => v.pad === pad);
+}
+// --- Basisregistratie: kernentiteiten van het ERP -------------------------
+registreerEntiteit({
+    key: "order",
+    label: "Order",
+    moduleId: "core",
+    velden: [
+        { pad: "order.nummer", label: "Ordernummer", soort: "tekst", voorbeeld: "ORD-10231" },
+        { pad: "order.datum", label: "Orderdatum", soort: "datum", voorbeeld: "12-03-2026" },
+        { pad: "order.leverdatum", label: "Leverdatum", soort: "datum", voorbeeld: "15-03-2026" },
+        { pad: "order.referentie", label: "Referentie", soort: "tekst", voorbeeld: "Inkoop 8891" },
+        { pad: "order.verkoper", label: "Verkoper", soort: "tekst", voorbeeld: "Jan de Vries" },
+        { pad: "order.opmerking", label: "Opmerking", soort: "tekst", voorbeeld: "Voor 10:00 leveren" },
+        { pad: "order.transporteur", label: "Transporteur", soort: "tekst", voorbeeld: "DHL" },
+        { pad: "order.track_trace", label: "Track & Trace", soort: "tekst", voorbeeld: "3SDHL0099213" },
+        { pad: "order.locatie", label: "Locatie", soort: "tekst", voorbeeld: "Magazijn 2" },
+        { pad: "order.aantal_karren", label: "Aantal karren", soort: "getal", voorbeeld: 3 },
+        { pad: "order.totaal", label: "Ordertotaal", soort: "bedrag", voorbeeld: "€ 1.284,50" },
+        { pad: "order.btw", label: "BTW-bedrag", soort: "bedrag", voorbeeld: "€ 269,75" },
+        { pad: "order.korting", label: "Korting", soort: "bedrag", voorbeeld: "€ 45,00" },
+        { pad: "order.gewicht", label: "Gewicht", soort: "getal", voorbeeld: 128 },
+    ],
+});
+registreerEntiteit({
+    key: "klant",
+    label: "Klant",
+    moduleId: "core",
+    velden: [
+        { pad: "klant.naam", label: "Klantnaam", soort: "tekst", voorbeeld: "Bloemenhuis De Roos" },
+        { pad: "klant.bedrijfsnaam", label: "Bedrijfsnaam", soort: "tekst", voorbeeld: "De Roos B.V." },
+        { pad: "klant.adres", label: "Adres", soort: "tekst", voorbeeld: "Kerkstraat 12" },
+        { pad: "klant.postcode", label: "Postcode", soort: "tekst", voorbeeld: "1234 AB" },
+        { pad: "klant.plaats", label: "Plaats", soort: "tekst", voorbeeld: "Aalsmeer" },
+        { pad: "klant.land", label: "Land", soort: "tekst", voorbeeld: "Nederland" },
+        { pad: "klant.btw_nummer", label: "BTW-nummer", soort: "tekst", voorbeeld: "NL001234567B01" },
+        { pad: "klant.kvk_nummer", label: "KvK-nummer", soort: "tekst", voorbeeld: "34567890" },
+        { pad: "klant.email", label: "E-mail", soort: "tekst", voorbeeld: "info@deroos.nl" },
+        { pad: "klant.telefoon", label: "Telefoon", soort: "tekst", voorbeeld: "0297-123456" },
+        { pad: "klant.taal", label: "Taal", soort: "tekst", voorbeeld: "NL" },
+    ],
+});
+registreerEntiteit({
+    key: "regel",
+    label: "Orderregels",
+    moduleId: "core",
+    isLijst: true,
+    velden: [
+        { pad: "regel.artikelcode", label: "Artikelcode", soort: "tekst", voorbeeld: "ART-001" },
+        { pad: "regel.artikelnaam", label: "Artikelnaam", soort: "tekst", voorbeeld: "Rosa Avalanche 60cm" },
+        { pad: "regel.aantal", label: "Aantal", soort: "getal", voorbeeld: 24 },
+        { pad: "regel.prijs", label: "Prijs", soort: "bedrag", voorbeeld: "€ 0,45" },
+        { pad: "regel.korting_pct", label: "Kortingspercentage", soort: "getal", voorbeeld: 5 },
+        { pad: "regel.totaal", label: "Regeltotaal", soort: "bedrag", voorbeeld: "€ 10,80" },
+        { pad: "regel.belading", label: "Belading", soort: "tekst", voorbeeld: "5 × 12" },
+        { pad: "regel.potmaat", label: "Potmaat", soort: "tekst", voorbeeld: "12 cm" },
+        { pad: "regel.barcode", label: "Barcode", soort: "tekst", voorbeeld: "8712345678904" },
+        { pad: "regel.locatie", label: "Locatie", soort: "tekst", voorbeeld: "A-12-3" },
+    ],
+});
+registreerEntiteit({
+    key: "factuur",
+    label: "Factuur",
+    moduleId: "core",
+    velden: [
+        { pad: "factuur.nummer", label: "Factuurnummer", soort: "tekst", voorbeeld: "F-2026-0042" },
+        { pad: "factuur.datum", label: "Factuurdatum", soort: "datum", voorbeeld: "12-03-2026" },
+        { pad: "factuur.vervaldatum", label: "Vervaldatum", soort: "datum", voorbeeld: "26-03-2026" },
+        { pad: "factuur.subtotaal", label: "Subtotaal", soort: "bedrag", voorbeeld: "€ 1.014,75" },
+        { pad: "factuur.btw_pct", label: "BTW-percentage", soort: "getal", voorbeeld: 21 },
+        { pad: "factuur.totaal", label: "Totaal", soort: "bedrag", voorbeeld: "€ 1.284,50" },
+        { pad: "factuur.betaalwijze", label: "Betaalwijze", soort: "tekst", voorbeeld: "Automatische incasso" },
+    ],
+});
+registreerEntiteit({
+    key: "bedrijf",
+    label: "Eigen bedrijf",
+    moduleId: "core",
+    velden: [
+        { pad: "bedrijf.naam", label: "Bedrijfsnaam", soort: "tekst", voorbeeld: "FlowSelections B.V." },
+        { pad: "bedrijf.adres", label: "Adres", soort: "tekst", voorbeeld: "Handelsweg 5" },
+        { pad: "bedrijf.postcode", label: "Postcode", soort: "tekst", voorbeeld: "1431 GX" },
+        { pad: "bedrijf.plaats", label: "Plaats", soort: "tekst", voorbeeld: "Aalsmeer" },
+        { pad: "bedrijf.btw_nummer", label: "BTW-nummer", soort: "tekst", voorbeeld: "NL009876543B01" },
+        { pad: "bedrijf.iban", label: "IBAN", soort: "tekst", voorbeeld: "NL00 RABO 0123 4567 89" },
+    ],
+});
+registreerEntiteit({
+    key: "systeem",
+    label: "Systeem",
+    moduleId: "core",
+    velden: [
+        { pad: "systeem.datum", label: "Huidige datum", soort: "datum", voorbeeld: "29-07-2026" },
+        { pad: "systeem.tijd", label: "Huidige tijd", soort: "tekst", voorbeeld: "09:14" },
+        { pad: "systeem.gebruiker", label: "Ingelogde gebruiker", soort: "tekst", voorbeeld: "Anna Bakker" },
+    ],
+});

package/dist-lib/lib/formaatPrinters.d.ts

@@ -0,0 +1,14 @@
+export interface FormaatPrinter {
+    id: string;
+    documenttype: string;
+    formaat_code: string;
+    printer_id: string | null;
+}
+export declare function useFormaatPrinters(documenttype: string): {
+    koppelingen: FormaatPrinter[];
+    reload: () => Promise<void>;
+};
+export declare function zetFormaatPrinter(documenttype: string, formaat_code: string, printer_id: string | null): Promise<void>;
+/** Bepaalt welke printer bij een formaat hoort (voor automatisch afdrukken). */
+export declare function printerVoorFormaat(documenttype: string, formaat_code: string): Promise<string | null>;
+//# sourceMappingURL=formaatPrinters.d.ts.map

package/dist-lib/lib/formaatPrinters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formaatPrinters.d.ts","sourceRoot":"","sources":["../../src/lib/formaatPrinters.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAID,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,MAAM;;;EAgBtD;AAED,wBAAsB,iBAAiB,CACrC,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,GAAG,IAAI,iBAQ1B;AAED,gFAAgF;AAChF,wBAAsB,kBAAkB,CACtC,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,GACnB,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAQxB"}

package/dist-lib/lib/formaatPrinters.js

@@ -0,0 +1,39 @@
+// ============================================================================
+// src/lib/formaatPrinters.ts — standaardprinter per documentsoort en formaat
+// ============================================================================
+import { useCallback, useEffect, useState } from "react";
+import { supabase } from "./supabaseClient";
+const arr = (v) => (Array.isArray(v) ? v : []);
+export function useFormaatPrinters(documenttype) {
+    const [koppelingen, setKoppelingen] = useState([]);
+    const load = useCallback(async () => {
+        const { data } = await supabase
+            .from("document_formaat_printers")
+            .select("*")
+            .eq("documenttype", documenttype);
+        setKoppelingen(arr(data));
+    }, [documenttype]);
+    useEffect(() => {
+        void load();
+    }, [load]);
+    return { koppelingen, reload: load };
+}
+export async function zetFormaatPrinter(documenttype, formaat_code, printer_id) {
+    const { error } = await supabase
+        .from("document_formaat_printers")
+        .upsert({ documenttype, formaat_code, printer_id }, {
+        onConflict: "documenttype,formaat_code",
+    });
+    if (error)
+        throw error;
+}
+/** Bepaalt welke printer bij een formaat hoort (voor automatisch afdrukken). */
+export async function printerVoorFormaat(documenttype, formaat_code) {
+    const { data } = await supabase
+        .from("document_formaat_printers")
+        .select("printer_id")
+        .eq("documenttype", documenttype)
+        .eq("formaat_code", formaat_code)
+        .maybeSingle();
+    return data?.printer_id ?? null;
+}

package/dist-lib/lib/layoutPreview.d.ts

@@ -0,0 +1,18 @@
+import type { LayoutElementModel, LayoutModel } from "./documentTypes";
+export declare function voorbeeldContext(): Record<string, string>;
+export declare function vulVelden(tekst: string, ctx: Record<string, string>): string;
+export declare function conditieVoldoet(el: LayoutElementModel, ctx: Record<string, string>): boolean;
+export declare const VOORBEELD_REGELS: {
+    artikelcode: string;
+    artikelnaam: string;
+    aantal: string;
+    prijs: string;
+    totaal: string;
+    barcode: string;
+    locatie: string;
+    potmaat: string;
+    belading: string;
+    korting_pct: string;
+}[];
+export declare function bouwDocumentHtml(layout: LayoutModel, elementen: LayoutElementModel[]): string;
+//# sourceMappingURL=layoutPreview.d.ts.map

package/dist-lib/lib/layoutPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutPreview.d.ts","sourceRoot":"","sources":["../../src/lib/layoutPreview.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEvE,wBAAgB,gBAAgB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAIzD;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAE5E;AAED,wBAAgB,eAAe,CAAC,EAAE,EAAE,kBAAkB,EAAE,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,OAAO,CAuB5F;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;GAI5B,CAAC;AA0FF,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAY7F"}

package/dist-lib/lib/layoutPreview.js

@@ -0,0 +1,134 @@
+// ============================================================================
+// src/lib/layoutPreview.ts — voorbeeldgegevens, veldvervanging en print-HTML
+// ============================================================================
+import { alleVelden } from "./fieldRegistry";
+export function voorbeeldContext() {
+    const ctx = {};
+    for (const v of alleVelden())
+        ctx[v.pad] = String(v.voorbeeld ?? v.label);
+    return ctx;
+}
+export function vulVelden(tekst, ctx) {
+    return (tekst ?? "").replace(/\{\{\s*([\w.]+)\s*\}\}/g, (_m, pad) => ctx[pad] ?? `⟨${pad}⟩`);
+}
+export function conditieVoldoet(el, ctx) {
+    const cond = Array.isArray(el.condities) ? el.condities : [];
+    return cond.every((c) => {
+        const w = ctx[c.veld] ?? "";
+        switch (c.operator) {
+            case "=":
+                return w === c.waarde;
+            case "!=":
+                return w !== c.waarde;
+            case ">":
+                return Number(w) > Number(c.waarde);
+            case "<":
+                return Number(w) < Number(c.waarde);
+            case "bevat":
+                return w.toLowerCase().includes(c.waarde.toLowerCase());
+            case "leeg":
+                return w === "";
+            case "niet_leeg":
+                return w !== "";
+            default:
+                return true;
+        }
+    });
+}
+export const VOORBEELD_REGELS = [
+    { artikelcode: "ART-001", artikelnaam: "Rosa Avalanche 60cm", aantal: "24", prijs: "€ 0,45", totaal: "€ 10,80", barcode: "8712345678904", locatie: "A-12-3", potmaat: "-", belading: "5 × 12", korting_pct: "0" },
+    { artikelcode: "ART-014", artikelnaam: "Gerbera mini mix", aantal: "60", prijs: "€ 0,32", totaal: "€ 19,20", barcode: "8712345671142", locatie: "B-04-1", potmaat: "-", belading: "6 × 10", korting_pct: "5" },
+    { artikelcode: "ART-221", artikelnaam: "Phalaenopsis 2-tak", aantal: "12", prijs: "€ 4,95", totaal: "€ 59,40", barcode: "8712345629911", locatie: "C-01-2", potmaat: "12 cm", belading: "4 × 8", korting_pct: "0" },
+];
+function esc(s) {
+    return s.replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[c]);
+}
+function elementHtml(el, ctx) {
+    const s = el.stijl ?? {};
+    const base = [
+        "position:absolute",
+        `left:${el.x}mm`,
+        `top:${el.y}mm`,
+        `width:${el.breedte}mm`,
+        `height:${el.hoogte}mm`,
+        `transform:rotate(${el.rotatie || 0}deg)`,
+        `z-index:${el.zIndex ?? 0}`,
+        `font-family:${s.fontfamilie ?? "Helvetica"},sans-serif`,
+        `font-size:${s.fontgrootte ?? 10}pt`,
+        `font-weight:${s.vet ? 700 : 400}`,
+        `font-style:${s.cursief ? "italic" : "normal"}`,
+        `text-decoration:${s.onderstreept ? "underline" : "none"}`,
+        `color:${s.kleur ?? "#111827"}`,
+        `background:${s.achtergrond && s.achtergrond !== "transparent" ? s.achtergrond : "transparent"}`,
+        `text-align:${s.uitlijning ?? "left"}`,
+        `padding:${s.padding ?? 0}mm`,
+        `opacity:${(s.transparantie ?? 100) / 100}`,
+        `line-height:${s.regelhoogte ?? 1.2}`,
+        s.randbreedte ? `border:${s.randbreedte}mm solid ${s.randkleur ?? "#111827"}` : "",
+        "box-sizing:border-box",
+        "overflow:hidden",
+    ]
+        .filter(Boolean)
+        .join(";");
+    const inhoud = vulVelden(el.content ?? "", ctx);
+    switch (el.type) {
+        case "lijn":
+            return `<div style="${base};background:${s.kleur ?? "#111827"}"></div>`;
+        case "rechthoek":
+            return `<div style="${base};border:${s.randbreedte || 0.3}mm solid ${s.randkleur ?? "#111827"}"></div>`;
+        case "cirkel":
+            return `<div style="${base};border-radius:50%;border:${s.randbreedte || 0.3}mm solid ${s.randkleur ?? "#111827"}"></div>`;
+        case "barcode":
+            return `<div style="${base};display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:monospace">
+        <div style="width:100%;height:70%;background:repeating-linear-gradient(90deg,#111 0 1.2px,#fff 1.2px 3px)"></div>
+        <div style="font-size:7pt">${esc(inhoud)}</div></div>`;
+        case "qrcode":
+            return `<div style="${base};background:repeating-conic-gradient(#111 0% 25%, #fff 0% 50%) 0 0/22% 22%"></div>`;
+        case "logo":
+        case "afbeelding":
+            return el.config?.bronUrl
+                ? `<div style="${base};display:flex;align-items:center;justify-content:center"><img src="${esc(el.config.bronUrl)}" alt="${esc(inhoud)}" style="max-width:100%;max-height:100%;object-fit:contain" /></div>`
+                : `<div style="${base};display:flex;align-items:center;justify-content:center;border:0.2mm dashed #9ca3af;font-size:8pt">${esc(inhoud || "Afbeelding")}</div>`;
+        case "handtekening":
+            return `<div style="${base};display:flex;align-items:flex-end;border-bottom:0.3mm solid #111827;font-size:8pt">${esc(inhoud)}</div>`;
+        case "html":
+            return `<div style="${base}">${el.config?.html ?? inhoud}</div>`;
+        case "svg":
+            return `<div style="${base}">${el.config?.svg ?? ""}</div>`;
+        case "tabel": {
+            const kolommen = Array.isArray(el.config?.kolommen) ? el.config.kolommen : [];
+            const kop = el.config?.toonKoppen === false ? "" :
+                `<tr>${kolommen.map((k) => `<th style="text-align:${k.uitlijning ?? "left"};border-bottom:0.3mm solid #111;padding:1mm 0.5mm">${esc(k.kop)}</th>`).join("")}</tr>`;
+            const rijen = VOORBEELD_REGELS.map((r) => `<tr>${kolommen
+                .map((k) => {
+                const veld = k.veldpad.split(".").pop() ?? "";
+                const w = r[veld] ?? "";
+                return `<th style="font-weight:400;text-align:${k.uitlijning ?? "left"};padding:0.8mm 0.5mm;border-bottom:0.1mm solid #d1d5db">${esc(w)}</th>`;
+            })
+                .join("")}</tr>`).join("");
+            const totaal = el.config?.toonTotalen
+                ? `<tr>${kolommen
+                    .map((k) => k.totaal
+                    ? `<th style="text-align:right;padding:1mm 0.5mm;border-top:0.3mm solid #111">€ 89,40</th>`
+                    : `<th></th>`)
+                    .join("")}</tr>`
+                : "";
+            return `<div style="${base}"><table style="width:100%;border-collapse:collapse;font-size:inherit">${kop}${rijen}${totaal}</table></div>`;
+        }
+        default:
+            return `<div style="${base}">${esc(inhoud)}</div>`;
+    }
+}
+export function bouwDocumentHtml(layout, elementen) {
+    const ctx = voorbeeldContext();
+    const zichtbaar = elementen.filter((e) => !e.verborgen && conditieVoldoet(e, ctx));
+    const body = zichtbaar.map((e) => elementHtml(e, ctx)).join("");
+    const b = layout.orientatie === "landscape" ? layout.hoogte_mm : layout.breedte_mm;
+    const h = layout.orientatie === "landscape" ? layout.breedte_mm : layout.hoogte_mm;
+    return `<!doctype html><html lang="nl"><head><meta charset="utf-8"><title>${esc(layout.naam)}</title>
+<style>@page{size:${b}mm ${h}mm;margin:0}
+body{margin:0;background:#e5e7eb}
+.pagina{position:relative;width:${b}mm;height:${h}mm;background:#fff;margin:0 auto;overflow:hidden}
+@media print{body{background:#fff}}</style></head>
+<body><div class="pagina">${body}</div></body></html>`;
+}

package/dist-lib/lib/logoLibrary.d.ts

@@ -0,0 +1,80 @@
+export declare const LOGO_BUCKET = "layout-logos";
+export declare const LOGO_CATEGORIEEN: readonly [{
+    readonly value: "hoofdlogo";
+    readonly label: "Hoofdlogo";
+}, {
+    readonly value: "facturen";
+    readonly label: "Facturen";
+}, {
+    readonly value: "merken";
+    readonly label: "Merken";
+}, {
+    readonly value: "labels";
+    readonly label: "Labels";
+}, {
+    readonly value: "klanten";
+    readonly label: "Klanten";
+}, {
+    readonly value: "overig";
+    readonly label: "Overig";
+}];
+export declare function logoCategorieLabel(v: string): string;
+export interface LogoModel {
+    id: string;
+    naam: string;
+    omschrijving: string;
+    categorie: string;
+    bestand_url: string;
+    bestandspad: string | null;
+    bestandstype: string;
+    breedte: number;
+    hoogte: number;
+    bestandsgrootte: number;
+    transparant: boolean;
+    is_standaard: boolean;
+    hash: string | null;
+    created_at: string;
+    updated_at: string;
+    /** tijdelijke, ondertekende weergave-URL */
+    viewUrl?: string;
+}
+export declare const TOEGESTANE_LOGO_TYPES: string[];
+export declare function bestandstypeVan(file: File): string;
+export declare function bestandHash(file: File): Promise<string>;
+export declare function leesAfmetingen(file: File): Promise<{
+    breedte: number;
+    hoogte: number;
+    transparant: boolean;
+}>;
+export declare function haalLogos(): Promise<LogoModel[]>;
+export declare function useLogos(): {
+    logos: LogoModel[];
+    loading: boolean;
+    reload: () => Promise<void>;
+};
+export interface UploadInput {
+    file: File;
+    naam: string;
+    omschrijving: string;
+    categorie: string;
+    is_standaard: boolean;
+}
+export declare function bestaatHash(hash: string): Promise<LogoModel | null>;
+export declare function maakLogo(input: UploadInput): Promise<LogoModel>;
+export declare function werkLogoBij(id: string, patch: Partial<LogoModel>): Promise<void>;
+/** Vervangt het bestand van een bestaand logo — alle layouts volgen automatisch. */
+export declare function vervangLogoBestand(logo: LogoModel, file: File): Promise<void>;
+export declare function verwijderLogo(logo: LogoModel): Promise<void>;
+export declare function downloadLogo(logo: LogoModel): Promise<void>;
+export declare function formatteerBytes(n: number): string;
+/**
+ * Logo's als ingebedde data-URL. Nodig bij afdrukken: een printvenster kan
+ * tijdelijke (ondertekende) URL's soms niet op tijd laden, waardoor het logo
+ * als kapotte afbeelding op papier komt.
+ */
+export declare function haalPrintLogos(): Promise<{
+    id: string;
+    naam: string;
+    viewUrl: string | null;
+}[]>;
+//# sourceMappingURL=logoLibrary.d.ts.map

package/dist-lib/lib/logoLibrary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logoLibrary.d.ts","sourceRoot":"","sources":["../../src/lib/logoLibrary.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAE1C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;EAOnB,CAAC;AAEX,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,MAAM,UAE3C;AAED,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAID,eAAO,MAAM,qBAAqB,UAA6D,CAAC;AAEhG,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAQlD;AAED,wBAAsB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAM7D;AAED,wBAAsB,cAAc,CAClC,IAAI,EAAE,IAAI,GACT,OAAO,CAAC;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,OAAO,CAAA;CAAE,CAAC,CA2CpE;AAaD,wBAAsB,SAAS,IAAI,OAAO,CAAC,SAAS,EAAE,CAAC,CAOtD;AAED,wBAAgB,QAAQ;;;;EAmBvB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CAGzE;AAaD,wBAAsB,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAAC,SAAS,CAAC,CA8BrE;AAUD,wBAAsB,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,iBAOtE;AAED,oFAAoF;AACpF,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,iBAwBnE;AAED,wBAAsB,aAAa,CAAC,IAAI,EAAE,SAAS,iBAKlD;AAED,wBAAsB,YAAY,CAAC,IAAI,EAAE,SAAS,iBAUjD;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,MAAM,UAKxC;AAED;;;;GAIG;AACH,wBAAsB,cAAc,IAAI,OAAO,CAC7C;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,EAAE,CACvD,CAoBA"}