@flowselections/layout-maker 1.3.2

package/README.md

@@ -0,0 +1,24 @@
+# Layout maker (pakbonnen, verzendbrieven, ectra)
+
+blank project start
+
+This project was built with [Lovable](https://lovable.dev).
+
+## Build with Lovable
+
+Continue developing this project in the [Lovable editor](https://lovable.dev/projects/4735fccb-b385-4b48-b4f8-ef135f63f4f7).
+
+- **Ship faster**: describe what you want to build and Lovable handles the code.
+- **Stay in sync**: every change made in Lovable is committed straight to this repository.
+- **Full ownership**: this code is yours. Push to `main` on GitHub and your changes sync back into Lovable, ready for your next prompt.
+
+## Development
+
+Prefer working locally? You need Node.js and npm — [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating).
+
+```sh
+git clone <this-repository-url>
+cd <repository-name>
+npm i
+npm run dev
+```

package/dist-lib/_core-safelist.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=_core-safelist.d.ts.map

package/dist-lib/_core-safelist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_core-safelist.d.ts","sourceRoot":"","sources":["../src/_core-safelist.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,CAAC"}

package/dist-lib/_core-safelist.js

@@ -0,0 +1,18 @@
+// Forceert Tailwind classes die uit @flowselections/core komen maar niet
+// voorkomen in de eigen broncode van deze module.
+// Zonder dit bestand worden deze classes weggeoptimaliseerd op de
+// Lovable productie build.
+const _safelist = [
+    // Layout — Sidebar en shell structuur
+    'h-full', 'flex-col', 'flex-1', 'min-h-screen', 'ml-64', 'pt-16',
+    'items-start', 'items-center', 'justify-between', 'border-t',
+    'w-64', 'h-screen', 'h-20', 'overflow-y-auto',
+    // Grid — InstellingenPage
+    'grid', 'lg:grid-cols-2', 'gap-6', 'p-6', 'space-y-6',
+    // Toggle/Switch — aan/uit zichtbaarheid
+    'data-[state=checked]:bg-primary', 'data-[state=unchecked]:bg-input',
+    // Layout-maker — ontwerpvlak en tabellen
+    'lg:grid-cols-[260px_1fr_300px]', 'lg:grid-cols-[240px_1fr_320px]', 'lg:grid-cols-[1fr_360px]', 'md:grid-cols-4', 'grid-cols-4', 'md:col-span-2', 'border-dashed', 'border-primary',
+    'bg-primary/10', 'bg-muted/30', 'bg-muted/50', 'shadow-sm', 'overflow-auto', 'w-10',
+];
+export {};

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

@@ -0,0 +1,13 @@
+import { type Orientatie } from "../lib/browserPrint";
+export interface AfdrukKnopProps {
+    documenttype: string;
+    formaatCode: string | null;
+    orientatie: Orientatie;
+    /** Levert de HTML van het document aan op het moment van afdrukken. */
+    getHtml: () => string;
+    css?: string;
+    documentnaam?: string;
+    label?: string;
+}
+export declare function AfdrukKnop({ documenttype, formaatCode, orientatie, getHtml, css, documentnaam, label, }: AfdrukKnopProps): import("react").JSX.Element;
+//# sourceMappingURL=AfdrukKnop.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AfdrukKnop.d.ts","sourceRoot":"","sources":["../../src/components/AfdrukKnop.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,UAAU,EAAE,UAAU,CAAC;IACvB,uEAAuE;IACvE,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EACzB,YAAY,EACZ,WAAW,EACX,UAAU,EACV,OAAO,EACP,GAAG,EACH,YAAY,EACZ,KAAmB,GACpB,EAAE,eAAe,+BAgCjB"}

package/dist-lib/components/AfdrukKnop.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/AfdrukKnop.tsx — afdrukken met automatisch ingesteld
+// papierformaat, stand en de bedoelde printer.
+// ============================================================================
+import { useState } from "react";
+import { Button, toast } from "@flowselections/core";
+import { Loader2, Printer } from "lucide-react";
+import { drukAf } from "../lib/browserPrint";
+export function AfdrukKnop({ documenttype, formaatCode, orientatie, getHtml, css, documentnaam, label = "Afdrukken", }) {
+    const [bezig, setBezig] = useState(false);
+    const afdrukken = async () => {
+        setBezig(true);
+        try {
+            const { printer } = await drukAf({
+                documenttype,
+                formaatCode,
+                orientatie,
+                html: getHtml(),
+                css,
+                documentnaam,
+            });
+            if (printer) {
+                toast.info(`Kies in het printvenster: ${printer.systeemnaam ?? printer.naam}`);
+            }
+            else {
+                toast.info("Er is nog geen vaste printer ingesteld voor dit document.");
+            }
+        }
+        catch {
+            toast.error("Afdrukken mislukt");
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    return (_jsxs(Button, { variant: "outline", disabled: bezig, onClick: () => void afdrukken(), children: [bezig ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(Printer, { className: "mr-2 h-4 w-4" }), label] }));
+}

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

@@ -0,0 +1,6 @@
+export declare function AiLayoutImportDialog({ open, onOpenChange, onKlaar, }: {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    onKlaar: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=AiLayoutImportDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AiLayoutImportDialog.d.ts","sourceRoot":"","sources":["../../src/components/AiLayoutImportDialog.tsx"],"names":[],"mappings":"AAiCA,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,OAAO,GACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,+BAwMA"}

package/dist-lib/components/AiLayoutImportDialog.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Badge, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, toast, } from "@flowselections/core";
+import { Sparkles, Upload } from "lucide-react";
+import { analyseerDocumentLayout } from "../lib/aiLayout.functions";
+import { supabase } from "../lib/supabaseClient";
+import { useLogos } from "../lib/logoLibrary";
+import { documentProfiel, standaardConfig } from "../lib/documentProfiles";
+export function AiLayoutImportDialog({ open, onOpenChange, onKlaar, }) {
+    const navigate = useNavigate();
+    const { logos } = useLogos();
+    const [nieuweLogos, setNieuweLogos] = useState([]);
+    const [bezig, setBezig] = useState(false);
+    const [bestandsnaam, setBestandsnaam] = useState("");
+    const [voorstel, setVoorstel] = useState(null);
+    const kiesBestand = async (file) => {
+        if (file.size > 8 * 1024 * 1024) {
+            toast.error("Bestand is te groot (max 8 MB)");
+            return;
+        }
+        const dataUrl = await new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(String(reader.result));
+            reader.onerror = () => reject(new Error("Lezen mislukt"));
+            reader.readAsDataURL(file);
+        });
+        setBestandsnaam(file.name);
+        setBezig(true);
+        try {
+            const res = await analyseerDocumentLayout({
+                data: {
+                    bestandsnaam: file.name,
+                    mimeType: file.type || "application/pdf",
+                    dataUrl,
+                    bekendeLogos: logos.map((l) => l.naam),
+                },
+            });
+            if (!res.ok) {
+                toast.error(res.fout);
+                return;
+            }
+            const v = res.voorstel;
+            const onbekend = [];
+            v.elementen = v.elementen.map((e) => {
+                if (e.type !== "logo")
+                    return e;
+                const treffer = logos.find((l) => l.naam.toLowerCase() === (e.content ?? "").trim().toLowerCase());
+                if (treffer)
+                    return { ...e, logoId: treffer.id, config: { ...e.config, bronUrl: treffer.viewUrl ?? "" } };
+                if (e.content)
+                    onbekend.push(e.content);
+                return e;
+            });
+            setNieuweLogos(onbekend);
+            setVoorstel(v);
+            toast.success("Analyse gereed — controleer het voorstel");
+        }
+        catch {
+            toast.error("AI-analyse mislukt");
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    const bevestig = async () => {
+        if (!voorstel)
+            return;
+        setBezig(true);
+        try {
+            const { data, error } = await supabase
+                .from("document_layouts")
+                .insert({
+                naam: voorstel.naam,
+                documenttype: voorstel.documenttype,
+                omschrijving: `Automatisch herkend uit ${bestandsnaam}`,
+                papierformaat: voorstel.papierformaat,
+                breedte_mm: voorstel.breedte_mm,
+                hoogte_mm: voorstel.hoogte_mm,
+                orientatie: voorstel.orientatie,
+                config: standaardConfig(documentProfiel(voorstel.documenttype)),
+            })
+                .select("id")
+                .single();
+            if (error)
+                throw error;
+            const layoutId = data.id;
+            if (voorstel.elementen.length) {
+                await supabase.from("document_layout_elements").insert(voorstel.elementen.map((e, i) => ({
+                    layout_id: layoutId,
+                    element_key: e.key,
+                    type: e.type,
+                    volgorde: i,
+                    x: e.x,
+                    y: e.y,
+                    breedte: e.breedte,
+                    hoogte: e.hoogte,
+                    rotatie: 0,
+                    z_index: i,
+                    content: e.content,
+                    logo_id: e.logoId ?? null,
+                    stijl: e.stijl,
+                    config: e.config,
+                })));
+            }
+            await supabase.from("ai_layout_imports").insert({
+                bestandsnaam,
+                mime_type: "onbekend",
+                status: "klaar",
+                voorstel: voorstel,
+                onzekere_velden: voorstel.onzekere_velden,
+                bevestigd: true,
+                layout_id: layoutId,
+            });
+            toast.success("Layout aangemaakt uit document");
+            onOpenChange(false);
+            setVoorstel(null);
+            onKlaar();
+            void navigate({ to: "/layouts-printers/pakbon/$layoutId", params: { layoutId } });
+        }
+        catch {
+            toast.error("Opslaan mislukt");
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(Sparkles, { className: "h-4 w-4" }), " AI-layoutgenerator"] }), _jsx(DialogDescription, { children: "Upload een bestaande PDF of foto van een document. De AI herkent tekst, tabellen, logo's en barcodes en zet die om naar een bewerkbare layout met veldcodes." })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "ai-bestand", children: "Document" }), _jsx(Input, { id: "ai-bestand", type: "file", accept: "application/pdf,image/png,image/jpeg,image/webp", disabled: bezig, onChange: (e) => {
+                                        const f = e.target.files?.[0];
+                                        if (f)
+                                            void kiesBestand(f);
+                                    } }), bezig && _jsx("p", { className: "text-sm text-muted-foreground", children: "Document wordt geanalyseerd\u2026" })] }), voorstel && (_jsxs("div", { className: "space-y-3 rounded-md border p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-medium", children: voorstel.naam }), _jsxs(Badge, { variant: "secondary", children: [voorstel.elementen.length, " elementen"] })] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [voorstel.papierformaat, " \u00B7 ", voorstel.breedte_mm, " \u00D7 ", voorstel.hoogte_mm, " mm \u00B7", " ", voorstel.orientatie === "portrait" ? "staand" : "liggend"] }), nieuweLogos.length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Nieuwe logo's \u2014 nog niet in de bibliotheek" }), _jsx("div", { className: "flex flex-wrap gap-1", children: nieuweLogos.map((n) => (_jsx(Badge, { variant: "outline", children: n }, n))) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Voeg deze toe via Logo's en koppel ze daarna in de designer. Herkende bestaande logo's zijn al automatisch gekoppeld." })] })), voorstel.onzekere_velden.length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: "Onzekere velden \u2014 controleer deze na import" }), _jsx("div", { className: "flex flex-wrap gap-1", children: voorstel.onzekere_velden.map((v) => (_jsx(Badge, { variant: "outline", children: v }, v))) })] }))] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Annuleren" }), _jsxs(Button, { onClick: bevestig, disabled: !voorstel || bezig, children: [_jsx(Upload, { className: "mr-2 h-4 w-4" }), " Layout aanmaken"] })] })] }) }));
+}

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

@@ -0,0 +1,5 @@
+/** Ontwerp elk pakbon-blok afzonderlijk, los van de volledige pagina. */
+export declare function BlokOntwerperPage({ layoutId: layoutIdProp }?: {
+    layoutId?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=BlokOntwerperPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlokOntwerperPage.d.ts","sourceRoot":"","sources":["../../src/components/BlokOntwerperPage.tsx"],"names":[],"mappings":"AAiCA,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,+BA6LvF"}

package/dist-lib/components/BlokOntwerperPage.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, toast, } from "@flowselections/core";
+import { ArrowLeft, Plus, Save } from "lucide-react";
+import { PakbonSectieEditor, PakbonBlokKaderEditor } from "./PakbonSectiesPanel";
+import { PakbonSectiePreview } from "./PakbonPreview";
+import { SECTIE_REGISTER, leesPakbonConfig, nieuweSectie, sectieDef, } from "../lib/pakbonBuilder";
+import { updateLayout, useLayoutDetail } from "../lib/useDocumentData";
+import { useLayoutIdParam } from "../lib/useLayoutIdParam";
+/** Ontwerp elk pakbon-blok afzonderlijk, los van de volledige pagina. */
+export function BlokOntwerperPage({ layoutId: layoutIdProp } = {}) {
+    const layoutId = useLayoutIdParam(layoutIdProp);
+    const { layout, loading } = useLayoutDetail(layoutId ?? "");
+    const [config, setConfig] = useState(null);
+    const [actief, setActief] = useState(null);
+    const [toevoegen, setToevoegen] = useState("orderregels");
+    const [zoom, setZoom] = useState(1.4);
+    const [bezig, setBezig] = useState(false);
+    useEffect(() => {
+        if (!layout)
+            return;
+        const c = leesPakbonConfig(layout.config);
+        setConfig(c);
+        setActief((huidig) => huidig ?? c.secties[0]?.id ?? null);
+    }, [layout?.id]);
+    const secties = useMemo(() => (Array.isArray(config?.secties) ? config.secties : []), [config]);
+    const sectie = secties.find((s) => s.id === actief) ?? null;
+    const patch = (p) => {
+        if (!config || !sectie)
+            return;
+        setConfig({
+            ...config,
+            secties: secties.map((s) => (s.id === sectie.id ? { ...s, ...p } : s)),
+        });
+    };
+    const opslaan = async () => {
+        if (!layout || !config)
+            return;
+        setBezig(true);
+        try {
+            await updateLayout(layout.id, { config: { ...(layout.config ?? {}), pakbon: config } });
+            toast.success("Blokontwerp opgeslagen");
+        }
+        catch {
+            toast.error("Opslaan mislukt");
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    if (!layoutId)
+        return (_jsxs("main", { className: "p-6 text-sm text-muted-foreground", children: ["Kies eerst een layout via ", _jsx(Link, { to: "/layouts-printers", className: "underline", children: "Layouts" }), "."] }));
+    if (loading)
+        return _jsx("main", { className: "p-6 text-sm text-muted-foreground", children: "Layout laden\u2026" });
+    if (!layout || !config)
+        return _jsx("main", { className: "p-6 text-sm text-muted-foreground", children: "Layout niet gevonden." });
+    return (_jsxs("main", { className: "space-y-4 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsxs(Link, { to: "/layouts-printers/pakbon/$layoutId", params: { layoutId }, children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), " Pakbonopbouw"] }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold", children: "Blokken ontwerpen" }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [layout.naam, " \u00B7 elk blok afzonderlijk vormgeven"] })] })] }), _jsxs(Button, { size: "sm", onClick: opslaan, disabled: bezig, children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Opslaan"] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-[240px_1fr_360px]", children: [_jsxs(Card, { className: "h-fit", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Blokken" }), _jsx(CardDescription, { children: "Kies welk blok je wilt ontwerpen." })] }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [secties.map((s) => (_jsxs("button", { type: "button", onClick: () => setActief(s.id), className: `flex w-full items-center justify-between rounded-md border px-2 py-1.5 text-left text-sm ${s.id === actief ? "border-primary bg-accent" : "hover:bg-accent/50"}`, children: [_jsx("span", { className: "truncate", children: s.titel }), !s.zichtbaar && _jsx(Badge, { variant: "outline", children: "verborgen" })] }, s.id))), secties.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen blokken." }))] }), _jsx(Separator, {}), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { value: toevoegen, onValueChange: (v) => setToevoegen(v), children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: SECTIE_REGISTER.map((d) => (_jsx(SelectItem, { value: d.type, children: d.label }, d.type))) })] }), _jsx(Button, { size: "sm", onClick: () => {
+                                                    const s = nieuweSectie(toevoegen);
+                                                    setConfig({ ...config, secties: [...secties, s] });
+                                                    setActief(s.id);
+                                                }, children: _jsx(Plus, { className: "h-4 w-4" }) })] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex-row items-center justify-between space-y-0 pb-3", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-base", children: sectie ? sectie.titel : "Geen blok gekozen" }), _jsx(CardDescription, { children: sectie ? sectieDef(sectie.type).omschrijving : "Kies links een blok." })] }), _jsx("div", { className: "flex items-center gap-1", children: [1, 1.4, 2].map((z) => (_jsxs(Button, { size: "sm", variant: zoom === z ? "secondary" : "ghost", onClick: () => setZoom(z), children: [z, "\u00D7"] }, z))) })] }), _jsx(CardContent, { children: _jsx("div", { className: "max-h-[70vh] overflow-auto rounded-md border bg-muted/30 p-6", children: sectie ? (_jsx("div", { style: {
+                                            transform: `scale(${zoom})`,
+                                            transformOrigin: "top left",
+                                            width: `${100 / zoom}%`,
+                                        }, children: _jsx(PakbonSectiePreview, { sectie: sectie, config: config }) })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "Geen blok geselecteerd." })) }) })] }), _jsxs(Card, { className: "h-fit", children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Instellingen" }), _jsx(CardDescription, { children: "Inhoud, opmaak en kader van dit blok." })] }), _jsx(CardContent, { className: "space-y-4", children: sectie ? (_jsxs(_Fragment, { children: [_jsx(PakbonBlokKaderEditor, { sectie: sectie, onChange: patch }), _jsx(Separator, {}), _jsx(PakbonSectieEditor, { sectie: sectie, onChange: patch })] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "Kies eerst een blok." })) })] })] })] }));
+}

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

@@ -0,0 +1,13 @@
+import { type DocumentConfig } from "../lib/documentProfiles";
+import type { LayoutModel } from "../lib/documentTypes";
+/**
+ * Documentspecifieke instellingen. Wat hier verschijnt komt volledig uit het
+ * profiel van het documenttype — nieuwe documentsoorten werken automatisch.
+ */
+export declare function DocumentSettingsPanel({ layout, onOpgeslagen, }: {
+    layout: LayoutModel & {
+        config?: DocumentConfig;
+    };
+    onOpgeslagen?: (config: DocumentConfig) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=DocumentSettingsPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentSettingsPanel.d.ts","sourceRoot":"","sources":["../../src/components/DocumentSettingsPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAIL,KAAK,cAAc,EAGpB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,GAAG;QAAE,MAAM,CAAC,EAAE,cAAc,CAAA;KAAE,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CACjD,+BA+DA"}

package/dist-lib/components/DocumentSettingsPanel.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Badge, Button, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Switch, toast, } from "@flowselections/core";
+import { Save } from "lucide-react";
+import { configWaarde, documentProfiel, standaardConfig, } from "../lib/documentProfiles";
+import { updateLayout, usePrinters } from "../lib/useDocumentData";
+import { useFormaatPrinters, zetFormaatPrinter } from "../lib/formaatPrinters";
+/**
+ * Documentspecifieke instellingen. Wat hier verschijnt komt volledig uit het
+ * profiel van het documenttype — nieuwe documentsoorten werken automatisch.
+ */
+export function DocumentSettingsPanel({ layout, onOpgeslagen, }) {
+    const profiel = useMemo(() => documentProfiel(layout.documenttype), [layout.documenttype]);
+    const [config, setConfig] = useState(() => layout.config ?? standaardConfig(profiel));
+    const [bezig, setBezig] = useState(false);
+    useEffect(() => {
+        setConfig(layout.config ?? standaardConfig(profiel));
+    }, [layout.id, layout.config, profiel]);
+    const zet = (groep, key, waarde) => setConfig((c) => ({ ...c, [groep]: { ...(c[groep] ?? {}), [key]: waarde } }));
+    const opslaan = async () => {
+        setBezig(true);
+        try {
+            await updateLayout(layout.id, { config });
+            toast.success("Documentinstellingen opgeslagen");
+            onOpgeslagen?.(config);
+        }
+        catch {
+            toast.error("Opslaan mislukt");
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    return (_jsxs("div", { className: "space-y-5", children: [_jsx("div", { className: "rounded-md border bg-muted/40 p-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "secondary", children: profiel.label }), _jsx("span", { className: "text-xs text-muted-foreground", children: profiel.omschrijving })] }) }), profiel.groepen.map((groep) => (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs uppercase text-muted-foreground", children: groep.label }), groep.omschrijving && (_jsx("p", { className: "text-xs text-muted-foreground", children: groep.omschrijving }))] }), groep.instellingen.map((inst) => (_jsx(Instelling, { inst: inst, waarde: configWaarde(config, groep, inst), onChange: (v) => zet(groep.key, inst.key, v) }, inst.key))), _jsx(Separator, {})] }, groep.key))), profiel.printerPerFormaat && _jsx(FormaatPrinters, { documenttype: profiel.id }), _jsxs(Button, { className: "w-full", onClick: opslaan, disabled: bezig, children: [_jsx(Save, { className: "mr-2 h-4 w-4" }), " Instellingen opslaan"] })] }));
+}
+function Instelling({ inst, waarde, onChange, }) {
+    if (inst.type === "schakelaar") {
+        return (_jsxs("div", { className: "flex items-center justify-between rounded border px-3 py-2", children: [_jsx("span", { className: "text-sm", children: inst.label }), _jsx(Switch, { checked: !!waarde, onCheckedChange: onChange })] }));
+    }
+    if (inst.type === "keuze") {
+        return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: inst.label }), _jsxs(Select, { value: String(waarde ?? ""), onValueChange: onChange, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: (inst.opties ?? []).map((o) => (_jsx(SelectItem, { value: o.value, children: o.label }, o.value))) })] })] }));
+    }
+    if (inst.type === "meerkeuze") {
+        const gekozen = Array.isArray(waarde) ? waarde : [];
+        return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-xs", children: inst.label }), _jsx("div", { className: "space-y-1", children: (inst.opties ?? []).map((o) => (_jsxs("div", { className: "flex items-center justify-between rounded border px-3 py-1.5", children: [_jsx("span", { className: "text-sm", children: o.label }), _jsx(Switch, { checked: gekozen.includes(o.value), onCheckedChange: (aan) => onChange(aan ? [...gekozen, o.value] : gekozen.filter((v) => v !== o.value)) })] }, o.value))) })] }));
+    }
+    return null;
+}
+function FormaatPrinters({ documenttype }) {
+    const profiel = documentProfiel(documenttype);
+    const { printers } = usePrinters();
+    const { koppelingen, reload } = useFormaatPrinters(documenttype);
+    const huidige = (code) => koppelingen.find((k) => k.formaat_code === code)?.printer_id ?? "geen";
+    const kies = async (code, printerId) => {
+        try {
+            await zetFormaatPrinter(documenttype, code, printerId === "geen" ? null : printerId);
+            await reload();
+            toast.success("Standaardprinter bijgewerkt");
+        }
+        catch {
+            toast.error("Opslaan mislukt");
+        }
+    };
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-xs uppercase text-muted-foreground", children: "Standaardprinter per formaat" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Bij afdrukken kiest het systeem automatisch de printer die bij het formaat hoort." })] }), profiel.formaten.map((f) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs", children: f.label }), _jsxs(Select, { value: huidige(f.code), onValueChange: (v) => void kies(f.code, v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Geen printer" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "geen", children: "Geen printer" }), printers.map((p) => (_jsx(SelectItem, { value: p.id, children: p.naam }, p.id)))] })] })] }, f.code))), _jsx(Separator, {})] }));
+}

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

@@ -0,0 +1,10 @@
+import { type LayoutModel } from "../lib/documentTypes";
+/**
+ * Formaat- en oriëntatiekeuze die in elke ontwerp-editor beschikbaar is.
+ * Wijzigingen worden direct opgeslagen en lokaal doorgegeven aan de preview.
+ */
+export declare function FormaatOrientatieBar({ layout, onChange, }: {
+    layout: LayoutModel;
+    onChange: (patch: Partial<LayoutModel>) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=FormaatOrientatieBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormaatOrientatieBar.d.ts","sourceRoot":"","sources":["../../src/components/FormaatOrientatieBar.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxE;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACjD,+BAgHA"}

package/dist-lib/components/FormaatOrientatieBar.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast, } from "@flowselections/core";
+import { RectangleHorizontal, RectangleVertical } from "lucide-react";
+import { PAPIERFORMATEN } from "../lib/documentTypes";
+import { updateLayout } from "../lib/useDocumentData";
+/**
+ * Formaat- en oriëntatiekeuze die in elke ontwerp-editor beschikbaar is.
+ * Wijzigingen worden direct opgeslagen en lokaal doorgegeven aan de preview.
+ */
+export function FormaatOrientatieBar({ layout, onChange, }) {
+    const [bezig, setBezig] = useState(false);
+    const vrij = layout.papierformaat === "VRIJ";
+    const bewaar = async (patch) => {
+        onChange(patch);
+        setBezig(true);
+        try {
+            await updateLayout(layout.id, patch);
+        }
+        catch {
+            toast.error("Formaat opslaan mislukt");
+        }
+        finally {
+            setBezig(false);
+        }
+    };
+    const kiesFormaat = (code) => {
+        const def = PAPIERFORMATEN.find((p) => p.code === code);
+        if (!def)
+            return;
+        void bewaar({
+            papierformaat: code,
+            breedte_mm: def.breedte,
+            hoogte_mm: def.hoogte,
+        });
+    };
+    const kiesOrientatie = (orientatie) => {
+        if (orientatie === layout.orientatie)
+            return;
+        void bewaar({ orientatie });
+    };
+    const maat = (veld, waarde) => {
+        const n = Number(waarde);
+        if (!Number.isFinite(n) || n <= 0)
+            return;
+        void bewaar({ [veld]: n });
+    };
+    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"] })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutsPage.d.ts","sourceRoot":"","sources":["../../src/components/LayoutsPage.tsx"],"names":[],"mappings":"AAyDA,wBAAgB,WAAW,gCAijB1B"}