@flowselections/layout-maker 1.32.0 → 1.38.4

package/README.md

@@ -1,139 +1,139 @@
-# 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
-```
-
-## Installeren in een andere shell
-
-1. Draai `sql/print-schema.sql` één keer in de Supabase-database van die shell
-   (SQL editor). Het script is idempotent en zet tabellen, rechten, RLS,
-   functies, de geplande taken én de opslagmap `layout-logos` voor de Logo
-   Bibliotheek klaar. Zorg dat de extensies `pg_cron` en `pg_net` aan staan.
-
-2. Zet in de omgeving van de shell:
-   - `SUPABASE_URL` en `SERVICE_ROLE_KEY` — nodig voor achtergrondprinten
-   - `CENTRAL_AUTH_URL` en `CENTRAL_AUTH_SECRET` — nodig voor de printdienst
-3. Zorg dat de shell het tick-eindpunt host. De setup-CLI doet dit automatisch
-   op basis van `flowselections.serverRoutes` in `package.json`. Handmatig
-   opgezette shells maken zelf dit bestand aan:
-
-   ```ts
-   // src/routes/api/public/print/queue-tick.ts
-   import { createFileRoute } from "@tanstack/react-router";
-   import { behandelQueueTick } from "@flowselections/layout-maker/print";
-
-   export const Route = createFileRoute("/api/public/print/queue-tick")({
-     server: {
-       handlers: {
-         POST: async ({ request }) => {
-           // De shell levert de databaseverbinding; de module maakt er nooit zelf een.
-           const { supabaseAdmin } = await import(
-             "../../../../integrations/supabase/client.server"
-           );
-           return behandelQueueTick(request, supabaseAdmin);
-         },
-       },
-     },
-   });
-   ```
-
-   Het eindpunt accepteert drie toegangsbewijzen: een runner-sleutel uit
-   `print_queue_runners.tick_sleutel`, `SUPABASE_PUBLISHABLE_KEY` (de cron) of
-   het sessietoken van een ingelogde gebruiker (de knop in de Printwachtrij).
-
-
-4. Klaar. Zodra de module in de shell draait meldt hij zichzelf aan als
-   verwerker van de printwachtrij. Een nieuwe printopdracht wordt meteen
-   opgepakt; daarnaast verwerkt de geplande taak `print-queue-tick` elke minuut
-   de wachtende opdrachten. Reageert een shell een uur lang niet, dan wordt hij
-   automatisch op inactief gezet. De taak `print-queue-cleanup` ruimt dagelijks
-   oude opdrachten en bestanden op.
-
-## Printen vanuit een andere module
-
-Andere modules in dezelfde shell gebruiken uitsluitend de print-API van deze
-module; zij hoeven de printtabellen niet te kennen en mogen er ook niet zelf in
-schrijven (dan blijft de opdracht wachten tot de volgende cronronde).
-
-```ts
-import {
-  printDocument, printPdf, printHtml,
-  printerVoorWerkplek, printerVoorDocumenttype, volgJobStatus,
-} from "@flowselections/layout-maker";
-
-// 1. Document dat via een ontwerp uit deze module wordt opgemaakt
-const { jobId } = await printDocument({
-  documenttype: "pakbon",          // moet een bestaande documentsoort zijn
-  documentnaam: "PB-2601284",
-  payload: { order, order_id: order.id }, // order_id: verplicht kenmerk
-});
-
-// 2. Kant-en-klare PDF (Floriday-document, klantsticker, externe factuur)
-//    Zonder printerId wordt de printer bepaald via de gekoppelde layout van
-//    de documentsoort (of de koppeling op papierformaat).
-await printPdf({
-  documenttype: "factuur",
-  documentnaam: "F-2026-00123",
-  pdfBase64,                       // met of zonder data:-voorvoegsel
-  payload: { order_id: factuur.id },
-});
-
-// Geef in payload altijd een order-kenmerk mee: queue_item_id, order_id of
-// ordernummer. De wachtrij gebruikt dat om dubbele aanvragen te herkennen;
-// zonder kenmerk kunnen twee orders met dezelfde documentnaam binnen tien
-// minuten als dubbel worden gezien.
-
-
-// Of expliciet per werkplek:
-const printerId = await printerVoorWerkplek("PICKSTATION-1", "A4");
-await printPdf({
-  documenttype: "afleverbrief",
-  documentnaam: "AFL-12345",
-  pdfBase64,
-  printerId: printerId!,
-});
-
-
-// 3. Eigen opmaak afdrukken (geen layout, anders wint de layout)
-await printHtml({
-  documenttype: "controlelijst",
-  documentnaam: "Controlelijst kar 12",
-  html,
-  printerId: printerId!,
-});
-
-// Status live volgen (realtime staat aan op print_jobs)
-const stop = volgJobStatus(jobId, (s) => console.log(s.status, s.foutmelding));
-```
-
-Belangrijk:
-
-- **Documentsoorten** liggen vast in de database: pakbon, factuur, offerte,
-  orderbevestiging, etiket, verzendlabel, productlabel, barcode_label,
-  magazijnlijst, controlelijst, transportdocument, sticker, productiebon,
-  veilingbon, afleverbrief, veilingbrief en vrij.
-- **Beslisvolgorde bij het afdrukken**: kant-en-klare PDF > gekoppelde layout >
-  meegestuurde opmaak > actieve layout van de documentsoort.
-- **Dubbelbeveiliging**: een identieke aanvraag binnen 10 minuten wordt
-  genegeerd; de aanroep werpt dan `DubbeleAanvraagFout`. Geef bij bulkprints per
-  document een eigen `documentnaam` zodat elke opdracht uniek is.
+# 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
+```
+
+## Installeren in een andere shell
+
+1. Draai `sql/print-schema.sql` één keer in de Supabase-database van die shell
+   (SQL editor). Het script is idempotent en zet tabellen, rechten, RLS,
+   functies, de geplande taken én de opslagmap `layout-logos` voor de Logo
+   Bibliotheek klaar. Zorg dat de extensies `pg_cron` en `pg_net` aan staan.
+
+2. Zet in de omgeving van de shell:
+   - `SUPABASE_URL` en `SERVICE_ROLE_KEY` — nodig voor achtergrondprinten
+   - `CENTRAL_AUTH_URL` en `CENTRAL_AUTH_SECRET` — nodig voor de printdienst
+3. Zorg dat de shell het tick-eindpunt host. De setup-CLI doet dit automatisch
+   op basis van `flowselections.serverRoutes` in `package.json`. Handmatig
+   opgezette shells maken zelf dit bestand aan:
+
+   ```ts
+   // src/routes/api/public/print/queue-tick.ts
+   import { createFileRoute } from "@tanstack/react-router";
+   import { behandelQueueTick } from "@flowselections/layout-maker/print";
+
+   export const Route = createFileRoute("/api/public/print/queue-tick")({
+     server: {
+       handlers: {
+         POST: async ({ request }) => {
+           // De shell levert de databaseverbinding; de module maakt er nooit zelf een.
+           const { supabaseAdmin } = await import(
+             "../../../../integrations/supabase/client.server"
+           );
+           return behandelQueueTick(request, supabaseAdmin);
+         },
+       },
+     },
+   });
+   ```
+
+   Het eindpunt accepteert drie toegangsbewijzen: een runner-sleutel uit
+   `print_queue_runners.tick_sleutel`, `SUPABASE_PUBLISHABLE_KEY` (de cron) of
+   het sessietoken van een ingelogde gebruiker (de knop in de Printwachtrij).
+
+
+4. Klaar. Zodra de module in de shell draait meldt hij zichzelf aan als
+   verwerker van de printwachtrij. Een nieuwe printopdracht wordt meteen
+   opgepakt; daarnaast verwerkt de geplande taak `print-queue-tick` elke minuut
+   de wachtende opdrachten. Reageert een shell een uur lang niet, dan wordt hij
+   automatisch op inactief gezet. De taak `print-queue-cleanup` ruimt dagelijks
+   oude opdrachten en bestanden op.
+
+## Printen vanuit een andere module
+
+Andere modules in dezelfde shell gebruiken uitsluitend de print-API van deze
+module; zij hoeven de printtabellen niet te kennen en mogen er ook niet zelf in
+schrijven (dan blijft de opdracht wachten tot de volgende cronronde).
+
+```ts
+import {
+  printDocument, printPdf, printHtml,
+  printerVoorWerkplek, printerVoorDocumenttype, volgJobStatus,
+} from "@flowselections/layout-maker";
+
+// 1. Document dat via een ontwerp uit deze module wordt opgemaakt
+const { jobId } = await printDocument({
+  documenttype: "pakbon",          // moet een bestaande documentsoort zijn
+  documentnaam: "PB-2601284",
+  payload: { order, order_id: order.id }, // order_id: verplicht kenmerk
+});
+
+// 2. Kant-en-klare PDF (Floriday-document, klantsticker, externe factuur)
+//    Zonder printerId wordt de printer bepaald via de gekoppelde layout van
+//    de documentsoort (of de koppeling op papierformaat).
+await printPdf({
+  documenttype: "factuur",
+  documentnaam: "F-2026-00123",
+  pdfBase64,                       // met of zonder data:-voorvoegsel
+  payload: { order_id: factuur.id },
+});
+
+// Geef in payload altijd een order-kenmerk mee: queue_item_id, order_id of
+// ordernummer. De wachtrij gebruikt dat om dubbele aanvragen te herkennen;
+// zonder kenmerk kunnen twee orders met dezelfde documentnaam binnen tien
+// minuten als dubbel worden gezien.
+
+
+// Of expliciet per werkplek:
+const printerId = await printerVoorWerkplek("PICKSTATION-1", "A4");
+await printPdf({
+  documenttype: "afleverbrief",
+  documentnaam: "AFL-12345",
+  pdfBase64,
+  printerId: printerId!,
+});
+
+
+// 3. Eigen opmaak afdrukken (geen layout, anders wint de layout)
+await printHtml({
+  documenttype: "controlelijst",
+  documentnaam: "Controlelijst kar 12",
+  html,
+  printerId: printerId!,
+});
+
+// Status live volgen (realtime staat aan op print_jobs)
+const stop = volgJobStatus(jobId, (s) => console.log(s.status, s.foutmelding));
+```
+
+Belangrijk:
+
+- **Documentsoorten** liggen vast in de database: pakbon, factuur, offerte,
+  orderbevestiging, etiket, verzendlabel, productlabel, barcode_label,
+  magazijnlijst, controlelijst, transportdocument, sticker, productiebon,
+  veilingbon, afleverbrief, veilingbrief en vrij.
+- **Beslisvolgorde bij het afdrukken**: kant-en-klare PDF > gekoppelde layout >
+  meegestuurde opmaak > actieve layout van de documentsoort.
+- **Dubbelbeveiliging**: een identieke aanvraag binnen 10 minuten wordt
+  genegeerd; de aanroep werpt dan `DubbeleAanvraagFout`. Geef bij bulkprints per
+  document een eigen `documentnaam` zodat elke opdracht uniek is.

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

@@ -1,20 +1,20 @@
-import { type Orientatie } from "../lib/browserPrint.js";
-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;
-    layoutId?: string | null;
-    kopieen?: number;
-}
-/**
- * @deprecated Verouderd — deze knop gebruikt het browser-printvenster als
- * terugval. Gebruik `printHtml()` / `printPdf()` uit `printApi` zodat alles
- * via PrintNode loopt.
- */
-export declare function AfdrukKnop({ documenttype, formaatCode, orientatie, getHtml, css, documentnaam, label, layoutId, kopieen, }: AfdrukKnopProps): import("react/jsx-runtime").JSX.Element;
+import { type Orientatie } from "../lib/browserPrint.js";
+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;
+    layoutId?: string | null;
+    kopieen?: number;
+}
+/**
+ * @deprecated Verouderd — deze knop gebruikt het browser-printvenster als
+ * terugval. Gebruik `printHtml()` / `printPdf()` uit `printApi` zodat alles
+ * via PrintNode loopt.
+ */
+export declare function AfdrukKnop({ documenttype, formaatCode, orientatie, getHtml, css, documentnaam, label, layoutId, kopieen, }: AfdrukKnopProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AfdrukKnop.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComputersLijst.d.ts","sourceRoot":"","sources":["../../src/components/ComputersLijst.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,6DAA6D;IAC7D,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,YAAY;;;;;EA6C3B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,qBAAqB,EACrB,YAAoB,GACrB,EAAE;IACD,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,OAAO,CAAC;IACvB,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,+BAuHA"}
+{"version":3,"file":"ComputersLijst.d.ts","sourceRoot":"","sources":["../../src/components/ComputersLijst.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,6DAA6D;IAC7D,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,YAAY;;;;;EA6C3B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,qBAAqB,EACrB,YAAoB,GACrB,EAAE;IACD,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,OAAO,CAAC;IACvB,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,+BAwIA"}

package/dist-lib/components/ComputersLijst.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // ============================================================================
 // src/components/ComputersLijst.tsx — overzicht van computers die het
 // printprogramma draaien, plus een korte stroom om er een toe te voegen.
@@ -68,8 +68,8 @@ export function ComputersLijst({ computers, loading, fout, onVernieuw, onPrinter
         if (gevonden)
             setNieuw(gevonden);
     }, [computers, toevoegenOpen, wachtOp, nieuw]);
-    return (_jsxs("div", { className: alleenDialog ? "" : "space-y-3", children: [!alleenDialog && loading && _jsx("p", { className: "text-muted-foreground text-sm", children: "Laden\u2026" }), !alleenDialog && !loading && fout && (_jsx(Card, { children: _jsxs(CardContent, { className: "space-y-3 py-6", children: [_jsx("p", { className: "font-medium", children: "Geen verbinding" }), _jsx("p", { className: "text-muted-foreground text-sm", children: fout }), _jsxs(Button, { variant: "outline", onClick: onVernieuw, children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), " Opnieuw proberen"] })] }) })), !alleenDialog && !loading && !fout && computers.length === 0 && (_jsx(Card, { children: _jsxs(CardContent, { className: "space-y-4 py-8", children: [_jsx(PrintProgrammaUitleg, {}), _jsxs(Button, { onClick: () => onToevoegenOpenChange(true), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Computer toevoegen"] })] }) })), !alleenDialog && computers.map((c) => (_jsxs("div", { className: "bg-card flex items-center gap-4 rounded-xl border p-4", children: [_jsx("div", { className: "bg-muted rounded-lg p-2.5", children: _jsx(Monitor, { className: "text-muted-foreground h-5 w-5" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate font-medium", children: c.naam }), _jsxs("p", { className: "text-muted-foreground text-sm", children: [c.aantalGevonden, " ", c.aantalGevonden === 1 ? "printer gevonden" : "printers gevonden"] })] }), _jsx("span", { className: `rounded-full px-2.5 py-1 text-xs font-medium ${c.online ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"}`, children: c.online ? "Aan" : "Uit" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onPrintersToevoegen(c.naam), children: "Printers toevoegen" })] }, c.id))), !alleenDialog && computers.length > 0 && _jsx(WerktHetNiet, {}), _jsx(Dialog, { open: toevoegenOpen, onOpenChange: onToevoegenOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Computer toevoegen" }), _jsx(DialogDescription, { children: "Zet het printprogramma klaar op de computer waar de printers aan hangen." })] }), _jsx(PrintProgrammaUitleg, { compact: true }), _jsx("div", { className: "rounded-lg border p-4 text-sm", children: nieuw ? (_jsxs("div", { className: "space-y-3", children: [_jsxs("p", { className: "font-medium", children: ["Computer gevonden: ", nieuw.naam] }), _jsx(Button, { onClick: () => {
-                                            onToevoegenOpenChange(false);
-                                            onPrintersToevoegen(nieuw.naam);
-                                        }, children: "Printers van deze computer toevoegen" })] })) : (_jsxs("p", { className: "text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " We wachten tot de computer zich meldt\u2026"] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { variant: "outline", onClick: () => onToevoegenOpenChange(false), children: "Sluiten" }) }), _jsx(WerktHetNiet, {})] }) })] }));
+    return (_jsxs("div", { className: alleenDialog ? "" : "space-y-3", children: [!alleenDialog && loading && _jsx("p", { className: "text-muted-foreground text-sm", children: "Laden\u2026" }), !alleenDialog && !loading && fout && (_jsx(Card, { children: _jsxs(CardContent, { className: "space-y-3 py-6", children: [_jsx("p", { className: "font-medium", children: "Geen verbinding" }), _jsx("p", { className: "text-muted-foreground text-sm", children: fout }), _jsxs(Button, { variant: "outline", onClick: onVernieuw, children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), " Opnieuw proberen"] })] }) })), !alleenDialog && !loading && !fout && computers.length === 0 && (_jsx(Card, { children: _jsxs(CardContent, { className: "space-y-4 py-8", children: [_jsx(PrintProgrammaUitleg, {}), _jsxs(Button, { onClick: () => onToevoegenOpenChange(true), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Computer toevoegen"] })] }) })), !alleenDialog && computers.map((c) => (_jsxs("div", { className: "bg-card flex items-center gap-4 rounded-xl border p-4", children: [_jsx("div", { className: "bg-muted rounded-lg p-2.5", children: _jsx(Monitor, { className: "text-muted-foreground h-5 w-5" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate font-medium", children: c.naam }), _jsxs("p", { className: "text-muted-foreground text-sm", children: [c.aantalGevonden, " ", c.aantalGevonden === 1 ? "printer gevonden" : "printers gevonden"] })] }), _jsx("span", { className: `rounded-full px-2.5 py-1 text-xs font-medium ${c.online ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"}`, children: c.online ? "Aan" : "Uit" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onPrintersToevoegen(c.naam), children: "Printers toevoegen" })] }, c.id))), !alleenDialog && computers.length > 0 && _jsx(WerktHetNiet, {}), _jsx(Dialog, { open: toevoegenOpen, onOpenChange: onToevoegenOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Computer toevoegen" }), _jsx(DialogDescription, { children: "Zet het printprogramma klaar op de computer waar de printers aan hangen." })] }), _jsx(PrintProgrammaUitleg, { compact: true }), _jsx("div", { className: "space-y-2 rounded-lg border p-4 text-sm", children: computers.length === 0 ? (_jsxs("p", { className: "text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " We wachten tot de computer zich meldt\u2026"] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "font-medium", children: nieuw ? `Nieuwe computer gevonden: ${nieuw.naam}` : "Gevonden computers" }), computers.map((c) => (_jsxs("div", { className: "flex items-center gap-3 rounded-md border p-2", children: [_jsx(Monitor, { className: "text-muted-foreground h-4 w-4" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: c.naam }), _jsx("span", { className: "text-muted-foreground text-xs", children: c.online ? "Aan" : "Uit" }), _jsx(Button, { size: "sm", onClick: () => {
+                                                    onToevoegenOpenChange(false);
+                                                    onPrintersToevoegen(c.naam);
+                                                }, children: "Printers toevoegen" })] }, c.id))), _jsx("p", { className: "text-muted-foreground text-xs", children: "Staat jouw Mac er niet bij? Controleer of het printprogramma draait en of je daar met dezelfde beheerdergegevens bent ingelogd." })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { variant: "outline", onClick: () => onToevoegenOpenChange(false), children: "Sluiten" }) }), _jsx(WerktHetNiet, {})] }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DocumentenPage.d.ts","sourceRoot":"","sources":["../../src/components/DocumentenPage.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,cAAc,CAAC,EAAE,GAAe,EAAE,EAAE;IAAE,GAAG,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;CAAE,+BAchF"}
+{"version":3,"file":"DocumentenPage.d.ts","sourceRoot":"","sources":["../../src/components/DocumentenPage.tsx"],"names":[],"mappings":"AAiBA,wBAAgB,cAAc,CAAC,EAAE,GAAe,EAAE,EAAE;IAAE,GAAG,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;CAAE,+BAiBhF"}

package/dist-lib/components/DocumentenPage.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // ============================================================================
 // src/components/DocumentenPage.tsx — één menu-item "Documenten" met tabbladen
 // voor de documentontwerpen en de logobibliotheek.
@@ -8,11 +8,12 @@ import { FileText, Image } from "lucide-react";
 import { ModuleTabs } from "./ModuleTabs.js";
 import { LayoutsPage } from "./LayoutsPage.js";
 import { LogosPage } from "./LogosPage.js";
+import { PdfMapAutoSaver } from "./PdfMapAutoSaver.js";
 const TABS = [
     { id: "layouts", label: "Documenten", icon: FileText },
     { id: "logos", label: "Logo's", icon: Image },
 ];
 export function DocumentenPage({ tab = "layouts" }) {
     const [actiefTab, setActiefTab] = useState(tab);
-    return (_jsx(ModuleTabs, { titel: "Documenten", omschrijving: "Ontwerp pakbonnen, facturen, stickers en beheer de logo's die daarop staan.", tabs: TABS, actiefTab: actiefTab, onTabWijzig: (nieuwTab) => setActiefTab(nieuwTab === "logos" ? "logos" : "layouts"), children: actiefTab === "logos" ? _jsx(LogosPage, { ingebed: true }) : _jsx(LayoutsPage, { ingebed: true }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(PdfMapAutoSaver, {}), _jsx(ModuleTabs, { titel: "Documenten", omschrijving: "Ontwerp pakbonnen, facturen, stickers en beheer de logo's die daarop staan.", tabs: TABS, actiefTab: actiefTab, onTabWijzig: (nieuwTab) => setActiefTab(nieuwTab === "logos" ? "logos" : "layouts"), children: actiefTab === "logos" ? _jsx(LogosPage, { ingebed: true }) : _jsx(LayoutsPage, { ingebed: true }) })] }));
 }

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

@@ -0,0 +1,8 @@
+/**
+ * Printerkeuze voor één layout (zelfde koppeling als de kolom op de
+ * Documenten-pagina). Compact, bedoeld voor de header van de builders.
+ */
+export declare function LayoutPrinterSelect({ layoutId }: {
+    layoutId: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=LayoutPrinterSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutPrinterSelect.d.ts","sourceRoot":"","sources":["../../src/components/LayoutPrinterSelect.tsx"],"names":[],"mappings":"AAUA;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,+BAgCrE"}

package/dist-lib/components/LayoutPrinterSelect.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast, } from "@flowselections/core";
+import { usePrinters, zetLayoutPrinter } from "../lib/useDocumentData.js";
+/**
+ * Printerkeuze voor één layout (zelfde koppeling als de kolom op de
+ * Documenten-pagina). Compact, bedoeld voor de header van de builders.
+ */
+export function LayoutPrinterSelect({ layoutId }) {
+    const { printers, koppelingen, reload } = usePrinters();
+    const huidige = koppelingen.find((k) => k.layout_id === layoutId)?.printer_id ?? "geen";
+    return (_jsxs(Select, { value: huidige, onValueChange: async (printerId) => {
+            try {
+                await zetLayoutPrinter(layoutId, printerId === "geen" ? null : printerId);
+                await reload(true);
+                toast.success("Printer bij document opgeslagen");
+            }
+            catch {
+                toast.error("Printerkeuze opslaan mislukt");
+            }
+        }, children: [_jsx(SelectTrigger, { className: "h-8 w-48 text-sm", "aria-label": "Printer bij dit document", children: _jsx(SelectValue, { placeholder: "Geen printer" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "geen", children: "Geen printer" }), printers
+                        .filter((p) => p.actief)
+                        .map((printer) => (_jsx(SelectItem, { value: printer.id, children: printer.naam }, printer.id)))] })] }));
+}

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

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

package/dist-lib/components/LayoutsPage.js

@@ -4,7 +4,7 @@ import { useAutoRefresh } from "../lib/useAutoRefresh.js";
 import { useNavigate } from "@tanstack/react-router";
 import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea, toast, } from "@flowselections/core";
 import { Copy, FileText, Pencil, Plus, Search, Settings2, Trash2 } from "lucide-react";
-import { dupliceerLayout, maakLayout, updateLayout, useLayouts, verwijderLayout, } from "../lib/useDocumentData.js";
+import { dupliceerLayout, maakLayout, updateLayout, useLayouts, usePrinters, zetLayoutPrinter, verwijderLayout, } from "../lib/useDocumentData.js";
 import { DOCUMENT_TYPES, FLORIDAY_LAYOUT_TOELICHTING, PAPIERFORMATEN, documentTypeLabel, isFloridayLayout, } from "../lib/documentTypes.js";
 import { DOCUMENT_PROFIELEN, documentProfiel, primaireProfielen, standaardConfig, } from "../lib/documentProfiles.js";
 function klantOntwerpLayout(l) {
@@ -15,7 +15,11 @@ function klantOntwerpLayout(l) {
 }
 export function LayoutsPage({ ingebed = false } = {}) {
     const { layouts, loading, reload } = useLayouts();
-    useAutoRefresh(() => reload(true), 30000);
+    const { printers, koppelingen, reload: reloadPrinters } = usePrinters();
+    useAutoRefresh(() => {
+        void reload(true);
+        void reloadPrinters(true);
+    }, 30000);
     const navigate = useNavigate();
     const [zoek, setZoek] = useState("");
     const [typeFilter, setTypeFilter] = useState("alle");
@@ -145,7 +149,16 @@ export function LayoutsPage({ ingebed = false } = {}) {
         }
     };
     const Wrapper = ingebed ? "div" : "main";
-    return (_jsxs(Wrapper, { className: ingebed ? "space-y-6" : "p-6 space-y-6", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", children: [!ingebed && (_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: "Documentlayouts" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Ontwerp pakbonnen, facturen, etiketten en alle andere documenten." })] })), _jsx("div", { className: "ml-auto flex gap-2", children: _jsxs(Button, { onClick: () => setWizardOpen(true), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Nieuwe layout"] }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Overzicht" }), _jsx(CardDescription, { children: loading ? "Laden…" : `${gefilterd.length} van ${layouts.length} layouts` })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-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" }), _jsx(TableHead, { children: "Actief" }), _jsx(TableHead, { className: "text-right", children: "Acties" })] }) }), _jsxs(TableBody, { children: [gefilterd.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, 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 }))] }), _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, { children: _jsx(Switch, { checked: l.actief, onCheckedChange: async (v) => {
+    return (_jsxs(Wrapper, { className: ingebed ? "space-y-6" : "p-6 space-y-6", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-4", children: [!ingebed && (_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: "Documentlayouts" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Ontwerp pakbonnen, facturen, etiketten en alle andere documenten." })] })), _jsx("div", { className: "ml-auto flex gap-2", children: _jsxs(Button, { onClick: () => setWizardOpen(true), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Nieuwe layout"] }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: "Overzicht" }), _jsx(CardDescription, { children: loading ? "Laden…" : `${gefilterd.length} van ${layouts.length} layouts` })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-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" }), _jsx(TableHead, { children: "Printer bij document" }), _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 }))] }), _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: _jsxs(Select, { value: koppelingen.find((k) => k.layout_id === l.id)?.printer_id ?? "geen", onValueChange: async (printerId) => {
+                                                                try {
+                                                                    await zetLayoutPrinter(l.id, printerId === "geen" ? null : printerId);
+                                                                    await reloadPrinters(true);
+                                                                    toast.success("Printer bij document opgeslagen");
+                                                                }
+                                                                catch {
+                                                                    toast.error("Printerkeuze opslaan mislukt");
+                                                                }
+                                                            }, children: [_jsx(SelectTrigger, { "aria-label": `Printer voor ${l.naam}`, children: _jsx(SelectValue, { placeholder: "Geen printer" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "geen", children: "Geen printer" }), printers.filter((p) => p.actief).map((printer) => (_jsx(SelectItem, { value: printer.id, children: printer.naam }, printer.id)))] })] }) }), _jsx(TableCell, { children: _jsx(Switch, { checked: l.actief, onCheckedChange: async (v) => {
                                                                 await updateLayout(l.id, { actief: v });
                                                                 void reload();
                                                             } }) }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [isFloridayLayout(l) ? (_jsx("span", { className: "text-xs text-muted-foreground", children: "Niet aanpasbaar \u2014 komt uit Floriday" })) : klantOntwerpLayout(l) ? (_jsx(Badge, { variant: "outline", children: "Ontwerp van klant" })) : (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(l.documenttype === "productiebon"

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

@@ -1,8 +1,8 @@
-export declare function NetwerkPrintersDialog({ open, onOpenChange, huidigePrinterId, huidigePrinterNaam, onKlaar, }: {
-    open: boolean;
-    onOpenChange: (v: boolean) => void;
-    huidigePrinterId?: string | null;
-    huidigePrinterNaam?: string | null;
-    onKlaar?: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function NetwerkPrintersDialog({ open, onOpenChange, huidigePrinterId, huidigePrinterNaam, onKlaar, }: {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    huidigePrinterId?: string | null;
+    huidigePrinterNaam?: string | null;
+    onKlaar?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NetwerkPrintersDialog.d.ts.map

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

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

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

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

package/dist-lib/components/PaginaDocument.js

@@ -7,10 +7,11 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
  * er telkens één, met pijltjes om te bladeren. De pagina schaalt automatisch
  * mee zodat hij volledig binnen het kader past.
  */
-export function PaginaDocument({ items, breedteMm, hoogteMm, padMm = 12, leeg, voet, }) {
+export function PaginaDocument({ items, breedteMm, hoogteMm, padMm = 12, leeg, voet, kop, }) {
     const meetRef = useRef(null);
     const mmRef = useRef(null);
     const voetMeetRef = useRef(null);
+    const kopMeetRef = useRef(null);
     const buiten = useRef(null);
     const pagina = useRef(null);
     const [paginas, setPaginas] = useState([items]);
@@ -26,7 +27,10 @@ export function PaginaDocument({ items, breedteMm, hoogteMm, padMm = 12, leeg, v
         if (!pxPerMm)
             return;
         const voetPx = voetMeetRef.current?.getBoundingClientRect().height ?? 0;
-        const maxPx = (hoogteMm - padMm * 2) * pxPerMm - (voetPx ? voetPx + 8 : 0);
+        const kopPx = kopMeetRef.current?.getBoundingClientRect().height ?? 0;
+        const maxPx = (hoogteMm - padMm * 2) * pxPerMm -
+            (voetPx ? voetPx + 8 : 0) -
+            (kopPx ? kopPx + 12 : 0);
         const kinderen = Array.from(meet.children);
         const result = [];
         let huidig = [];
@@ -49,7 +53,7 @@ export function PaginaDocument({ items, breedteMm, hoogteMm, padMm = 12, leeg, v
             result.push(huidig);
         setPaginas(result.length ? result : [[]]);
         setIndex((i) => Math.min(i, Math.max(0, result.length - 1)));
-    }, [items, hoogteMm, breedteMm, padMm, voet]);
+    }, [items, hoogteMm, breedteMm, padMm, voet, kop]);
     // Pagina passend schalen op breedte; hoogte mag doorlopen zodat je kunt scrollen.
     const pas = () => {
         const b = buiten.current;
@@ -69,12 +73,13 @@ export function PaginaDocument({ items, breedteMm, hoogteMm, padMm = 12, leeg, v
     }, []);
     const totaal = paginas.length;
     const huidige = paginas[Math.min(index, totaal - 1)] ?? [];
-    return (_jsxs("div", { className: "flex h-full w-full flex-col gap-2", children: [_jsxs("div", { className: "pointer-events-none absolute -z-10 opacity-0", "aria-hidden": true, children: [_jsx("div", { ref: mmRef, style: { height: "100mm", width: "1px" } }), _jsx("div", { ref: meetRef, className: "bg-white text-[11px] text-neutral-900", style: { width: `${breedteMm - padMm * 2}mm` }, children: items.map((it) => (_jsx("div", { children: it.node }, it.id))) }), _jsx("div", { ref: voetMeetRef, className: "bg-white text-[11px] text-neutral-900", style: { width: `${breedteMm - padMm * 2}mm` }, children: voet?.(1, 1) })] }), _jsx("div", { ref: buiten, className: "flex min-h-0 flex-1 items-start justify-center overflow-auto", children: _jsxs("div", { ref: pagina, className: "flex flex-col bg-white text-[11px] text-neutral-900 shadow-sm", style: {
+    const huidigLabel = huidige.find((item) => item.pageLabel)?.pageLabel;
+    return (_jsxs("div", { className: "flex h-full w-full flex-col gap-2", children: [_jsxs("div", { className: "pointer-events-none absolute -z-10 opacity-0", "aria-hidden": true, children: [_jsx("div", { ref: mmRef, style: { height: "100mm", width: "1px" } }), _jsx("div", { ref: meetRef, className: "bg-white text-[11px] text-neutral-900", style: { width: `${breedteMm - padMm * 2}mm` }, children: items.map((it) => (_jsx("div", { children: it.node }, it.id))) }), _jsx("div", { ref: kopMeetRef, className: "bg-white text-[11px] text-neutral-900", style: { width: `${breedteMm - padMm * 2}mm` }, children: kop?.("Hele kar") }), _jsx("div", { ref: voetMeetRef, className: "bg-white text-[11px] text-neutral-900", style: { width: `${breedteMm - padMm * 2}mm` }, children: voet?.(1, 1) })] }), _jsx("div", { ref: buiten, className: "flex min-h-0 flex-1 items-start justify-center overflow-auto", children: _jsxs("div", { ref: pagina, className: "flex flex-col bg-white text-[11px] text-neutral-900 shadow-sm", style: {
                         width: `${breedteMm}mm`,
                         height: `${hoogteMm}mm`,
                         padding: `${padMm}mm`,
                         transform: `scale(${schaal})`,
                         transformOrigin: "top center",
                         overflow: "hidden",
-                    }, children: [_jsxs("div", { className: "min-h-0 flex-1 space-y-3", children: [huidige.map((it) => (_jsx("div", { children: it.node }, it.id))), huidige.length === 0 && (_jsx("p", { className: "py-10 text-center text-neutral-400", children: leeg ?? "Nog niets te tonen." }))] }), voet && _jsx("div", { className: "mt-2 shrink-0", children: voet(Math.min(index + 1, totaal), totaal) })] }) }), _jsxs("div", { className: "flex shrink-0 items-center justify-center gap-3", children: [_jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => setIndex((i) => Math.max(0, i - 1)), disabled: index <= 0, "aria-label": "Vorige pagina", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["Pagina ", Math.min(index + 1, totaal), " van ", totaal] }), _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => setIndex((i) => Math.min(totaal - 1, i + 1)), disabled: index >= totaal - 1, "aria-label": "Volgende pagina", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })] }));
+                    }, children: [kop?.(huidigLabel), _jsxs("div", { className: "min-h-0 flex-1 space-y-3", children: [huidige.map((it) => (_jsx("div", { children: it.node }, it.id))), huidige.length === 0 && (_jsx("p", { className: "py-10 text-center text-neutral-400", children: leeg ?? "Nog niets te tonen." }))] }), voet && _jsx("div", { className: "mt-2 shrink-0", children: voet(Math.min(index + 1, totaal), totaal) })] }) }), _jsxs("div", { className: "flex shrink-0 items-center justify-center gap-3", children: [_jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => setIndex((i) => Math.max(0, i - 1)), disabled: index <= 0, "aria-label": "Vorige pagina", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["Pagina ", Math.min(index + 1, totaal), " van ", totaal] }), _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => setIndex((i) => Math.min(totaal - 1, i + 1)), disabled: index >= totaal - 1, "aria-label": "Volgende pagina", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })] }));
 }

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

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