@flowselections/layout-maker 1.22.2 → 1.23.2

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.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/AfdrukKnop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AfdrukKnop.d.ts","sourceRoot":"","sources":["../../src/components/AfdrukKnop.tsx"],"names":[],"mappings":"AASA,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAG9D,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;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,YAAY,EACZ,WAAW,EACX,UAAU,EACV,OAAO,EACP,GAAG,EACH,YAAY,EACZ,KAAmB,EACnB,QAAQ,EACR,OAAO,GACR,EAAE,eAAe,+BAwDjB"}
+{"version":3,"file":"AfdrukKnop.d.ts","sourceRoot":"","sources":["../../src/components/AfdrukKnop.tsx"],"names":[],"mappings":"AASA,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAG9D,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;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,YAAY,EACZ,WAAW,EACX,UAAU,EACV,OAAO,EACP,GAAG,EACH,YAAY,EACZ,KAAmB,EACnB,QAAQ,EACR,OAAO,GACR,EAAE,eAAe,2CAwDjB"}

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.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/NetwerkPrintersDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetwerkPrintersDialog.d.ts","sourceRoot":"","sources":["../../src/components/NetwerkPrintersDialog.tsx"],"names":[],"mappings":"AA2BA,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,OAAO,GACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,+BAkHA"}
+{"version":3,"file":"NetwerkPrintersDialog.d.ts","sourceRoot":"","sources":["../../src/components/NetwerkPrintersDialog.tsx"],"names":[],"mappings":"AA2BA,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,OAAO,GACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,2CAkHA"}

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

@@ -1 +1 @@
-{"version":3,"file":"PrinterSetupWizard.d.ts","sourceRoot":"","sources":["../../src/components/PrinterSetupWizard.tsx"],"names":[],"mappings":"AA6CA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAoCD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,cAAc,EACd,iBAAsB,EACtB,eAAoB,EACpB,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;CACjC,+BAiXA"}
+{"version":3,"file":"PrinterSetupWizard.d.ts","sourceRoot":"","sources":["../../src/components/PrinterSetupWizard.tsx"],"names":[],"mappings":"AAkDA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAwCD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,cAAc,EACd,iBAAsB,EACtB,eAAoB,EACpB,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;CACjC,+BA0cA"}

package/dist-lib/components/PrinterSetupWizard.js

@@ -7,14 +7,20 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, Label, toast, } from "@flowselections/core";
 import { Check, CheckCircle2, FileText, Loader2, Printer, RefreshCw, Search, Tag, } from "lucide-react";
 import { supabase } from "../lib/supabaseClient.js";
-import { printDirect } from "../lib/directPrint.js";
+import { printHtml, volgJobStatus } from "../lib/printApi.js";
 import { netwerkPrinters } from "../lib/printService.functions.js";
+import { printerFormaatOpties } from "../lib/papierFormaten.js";
 import { PrintProgrammaUitleg, WerktHetNiet } from "./PrintProgrammaUitleg.js";
 const STAPPEN = ["Printer kiezen", "Naam en locatie", "Klaar"];
-function instellingenVoor(gebruik) {
-    return gebruik === "etiket"
-        ? { soort: "labelprinter", papierformaat: "label" }
-        : { soort: "laserprinter", papierformaat: "A4" };
+/**
+ * De instellingen die bij de printer worden bewaard. Kent de printer zijn eigen
+ * papierformaten, dan gebruiken we de gekozen echte formaatcode; anders vallen
+ * we terug op de eenvoudige keuze papier of etiket.
+ */
+function instellingenVoor(gebruik, optie) {
+    if (optie)
+        return { papierformaat: optie.code };
+    return { papierformaat: gebruik === "etiket" ? "LABEL_100x62" : "A4" };
 }
 function Stappenbalk({ stap }) {
     return (_jsx("div", { className: "flex items-center gap-2", children: STAPPEN.map((s, i) => (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsx("div", { className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-medium ${i < stap
@@ -36,6 +42,9 @@ export function PrinterSetupWizard({ open, onOpenChange, onKlaar, computerFilter
     const [locatie, setLocatie] = useState("");
     const [gebruik, setGebruik] = useState("papier");
     const [printerId, setPrinterId] = useState(null);
+    const [formaten, setFormaten] = useState(null);
+    const [laden, setLaden] = useState([]);
+    const [formaatCode, setFormaatCode] = useState("");
     const zoeken = useCallback(async () => {
         setZoekt(true);
         setFout(null);
@@ -65,6 +74,9 @@ export function PrinterSetupWizard({ open, onOpenChange, onKlaar, computerFilter
             setLocatie("");
             setGebruik("papier");
             setPrinterId(null);
+            setFormaten(null);
+            setLaden([]);
+            setFormaatCode("");
             setZoekterm("");
             setUitlegOpen(false);
             return;
@@ -75,6 +87,17 @@ export function PrinterSetupWizard({ open, onOpenChange, onKlaar, computerFilter
             setNaam(bewerken.naam);
             setLocatie(bewerken.locatie ?? "");
             setGebruik(bewerken.papierformaat === "label" ? "etiket" : "papier");
+            setFormaatCode(bewerken.papierformaat && bewerken.papierformaat !== "label" ? bewerken.papierformaat : "");
+            void (async () => {
+                const { data } = await supabase
+                    .from("printers")
+                    .select("ondersteunde_formaten, ondersteunde_laden")
+                    .eq("id", bewerken.id)
+                    .maybeSingle();
+                const rij = data;
+                setFormaten(rij?.ondersteunde_formaten ?? null);
+                setLaden(Array.isArray(rij?.ondersteunde_laden) ? rij.ondersteunde_laden : []);
+            })();
             return;
         }
         void zoeken();
@@ -88,9 +111,16 @@ export function PrinterSetupWizard({ open, onOpenChange, onKlaar, computerFilter
     const kiesPrinter = (p) => {
         setGekozen(p);
         setNaam(p.naam);
-        setLocatie(p.computer ?? "");
+        setLocatie("");
+        setFormaten(p.formaten ?? null);
+        setLaden(Array.isArray(p.laden) ? p.laden : []);
+        const opties = printerFormaatOpties(p.formaten ?? null);
+        const voorkeur = opties.find((o) => o.code === "A4") ?? opties[0];
+        setFormaatCode(voorkeur?.code ?? "");
         setStap(1);
     };
+    const formaatOpties = useMemo(() => printerFormaatOpties(formaten), [formaten]);
+    const gekozenFormaat = formaatOpties.find((o) => o.code === formaatCode) ?? null;
     const opslaan = async () => {
         const eindnaam = naam.trim() || gekozen?.naam || "";
         if (!eindnaam) {
@@ -105,7 +135,8 @@ export function PrinterSetupWizard({ open, onOpenChange, onKlaar, computerFilter
                     .update({
                     naam: eindnaam,
                     locatie: locatie.trim() || null,
-                    ...instellingenVoor(gebruik),
+                    ...instellingenVoor(gebruik, gekozenFormaat),
+                    ...(formaten ? { ondersteunde_formaten: formaten, ondersteunde_laden: laden, formaten_bijgewerkt_op: new Date().toISOString() } : {}),
                 })
                     .eq("id", bewerken.id);
                 if (error)
@@ -124,7 +155,8 @@ export function PrinterSetupWizard({ open, onOpenChange, onKlaar, computerFilter
                 systeemnaam: gekozen?.naam ?? eindnaam,
                 locatie: locatie.trim() || null,
                 extern_printer_id: gekozen?.id ?? null,
-                ...instellingenVoor(gebruik),
+                ...instellingenVoor(gebruik, gekozenFormaat),
+                ...(formaten ? { ondersteunde_formaten: formaten, ondersteunde_laden: laden, formaten_bijgewerkt_op: new Date().toISOString() } : {}),
             })
                 .select("id")
                 .single();
@@ -142,30 +174,44 @@ export function PrinterSetupWizard({ open, onOpenChange, onKlaar, computerFilter
         }
     };
     const [testStatus, setTestStatus] = useState("leeg");
+    const [testMelding, setTestMelding] = useState("");
     const testpagina = async () => {
+        if (!printerId) {
+            toast.error("De printer is nog niet opgeslagen");
+            return;
+        }
         setTestStatus("bezig");
-        const html = `<div style="padding:20mm;font-size:14pt"><h1 style="font-size:20pt">Testpagina</h1>
-<p>Deze pagina hoort uit: <strong>${naam}</strong></p></div>`;
-        const opdracht = {
-            documenttype: "pakbon",
-            formaatCode: gebruik === "etiket" ? "label" : "A4",
-            orientatie: "portrait",
-            documentnaam: "Testpagina",
-            html,
-            printerId: printerId ?? undefined,
-        };
+        setTestMelding("");
+        const maat = gekozenFormaat ? `${gekozenFormaat.breedte} × ${gekozenFormaat.hoogte} mm` : "standaardformaat";
+        const html = `<div style="padding:15mm;font-family:Arial,Helvetica,sans-serif;font-size:12pt">
+<h1 style="font-size:20pt;margin:0 0 6mm">Testpagina</h1>
+<p style="margin:0 0 3mm">Deze pagina hoort uit: <strong>${naam}</strong></p>
+<p style="margin:0">Papier: ${maat} — ${new Date().toLocaleString("nl-NL")}</p></div>`;
         try {
-            const direct = await printDirect(opdracht);
-            if (direct.gelukt) {
-                setTestStatus("gelukt");
-                return;
-            }
-            if (direct.reden)
-                toast.error(direct.reden);
-            setTestStatus("fout");
+            const { jobId } = await printHtml({
+                documenttype: "vrij",
+                documentnaam: "Testpagina",
+                html,
+                printerId,
+                payload: { is_testpagina: true, test_id: `wizard-${Date.now()}` },
+            });
+            const stop = volgJobStatus(jobId, (st) => {
+                if (st.status === "voltooid") {
+                    setTestStatus("gelukt");
+                    setTestMelding(`Verstuurd naar ${naam}${gekozenFormaat ? ` op ${gekozenFormaat.label}` : ""}.`);
+                    stop();
+                }
+                else if (st.status === "mislukt") {
+                    setTestStatus("fout");
+                    setTestMelding(st.foutmelding ?? "");
+                    stop();
+                }
+            });
+            setTimeout(() => stop(), 60000);
         }
-        catch {
+        catch (e) {
             setTestStatus("fout");
+            setTestMelding(e instanceof Error ? e.message : "");
         }
     };
     const opnieuw = () => {
@@ -178,12 +224,13 @@ export function PrinterSetupWizard({ open, onOpenChange, onKlaar, computerFilter
         void zoeken();
     };
     return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-h-[85vh] overflow-y-auto sm:max-w-xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: bewerken ? "Naam en locatie wijzigen" : "Printer toevoegen" }), _jsx(DialogDescription, { children: bewerken
-                                ? "Pas de naam, de locatie en het soort papier aan."
+                                ? "Pas de naam, de omschrijving en het standaardformaat aan."
                                 : "Kies uw printer, geef hem een herkenbare naam en druk een testpagina af." })] }), !bewerken && _jsx(Stappenbalk, { stap: stap }), stap === 0 && (_jsxs("div", { className: "space-y-4", children: [lijst.length > 6 && (_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground absolute top-2.5 left-3 h-4 w-4" }), _jsx(Input, { className: "pl-9", value: zoekterm, placeholder: "Zoek op printer of computer", onChange: (e) => setZoekterm(e.target.value) })] })), zoekt && (_jsxs("p", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Printers zoeken\u2026"] })), !zoekt && fout && _jsx("p", { className: "text-destructive text-sm", children: fout }), !zoekt && zichtbaar.length > 0 && (_jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: zichtbaar.map((p) => {
                                 const al = bekendeExterneIds.includes(p.id);
                                 return (_jsx("button", { type: "button", disabled: al, onClick: () => kiesPrinter(p), className: `rounded-xl border p-4 text-left transition ${al ? "opacity-60" : "hover:border-primary/50 hover:bg-accent/40"}`, children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Printer, { className: "text-muted-foreground mt-0.5 h-5 w-5 shrink-0" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-medium", children: p.naam }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: p.computer }), _jsxs("span", { className: "mt-2 flex items-center gap-1.5 text-xs", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${p.online ? "bg-primary" : "bg-muted-foreground/40"}` }), al ? "Al toegevoegd" : p.online ? "Beschikbaar" : "Niet aan"] })] })] }) }, p.id));
-                            }) })), !zoekt && zichtbaar.length === 0 && _jsx(PrintProgrammaUitleg, {}), !zoekt && zichtbaar.length > 0 && (_jsxs("div", { className: "space-y-3", children: [_jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground text-sm underline", onClick: () => setUitlegOpen((v) => !v), children: "Ik zie mijn printer niet" }), uitlegOpen && _jsx(PrintProgrammaUitleg, { compact: true })] })), _jsx("div", { className: "flex justify-between", children: _jsxs(Button, { variant: "ghost", onClick: () => void zoeken(), disabled: zoekt, children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), " Opnieuw zoeken"] }) })] })), stap === 1 && (_jsxs("div", { className: "grid gap-5 sm:grid-cols-[1fr_200px]", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Weergavenaam" }), _jsx(Input, { value: naam, placeholder: "Bijvoorbeeld: pakbonprinter voorin", onChange: (e) => setNaam(e.target.value) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Locatie" }), _jsx(Input, { value: locatie, placeholder: "Bijvoorbeeld: magazijn", onChange: (e) => setLocatie(e.target.value) }), bekendeLocaties.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 pt-1", children: bekendeLocaties.slice(0, 6).map((l) => (_jsx("button", { type: "button", onClick: () => setLocatie(l), className: "hover:bg-accent rounded-full border px-3 py-1 text-xs", children: l }, l))) }))] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Wat gaat deze printer afdrukken?" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: [
+                            }) })), !zoekt && zichtbaar.length === 0 && _jsx(PrintProgrammaUitleg, {}), !zoekt && zichtbaar.length > 0 && (_jsxs("div", { className: "space-y-3", children: [_jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground text-sm underline", onClick: () => setUitlegOpen((v) => !v), children: "Ik zie mijn printer niet" }), uitlegOpen && _jsx(PrintProgrammaUitleg, { compact: true })] })), _jsx("div", { className: "flex justify-between", children: _jsxs(Button, { variant: "ghost", onClick: () => void zoeken(), disabled: zoekt, children: [_jsx(RefreshCw, { className: "mr-2 h-4 w-4" }), " Opnieuw zoeken"] }) })] })), stap === 1 && (_jsxs("div", { className: "grid gap-5 sm:grid-cols-[1fr_200px]", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Weergavenaam" }), _jsx(Input, { value: naam, placeholder: "Bijvoorbeeld: pakbonprinter voorin", onChange: (e) => setNaam(e.target.value) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Omschrijving (optioneel)" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Waar staat deze printer? Bijvoorbeeld: magazijn achter." }), _jsx(Input, { value: locatie, placeholder: "Bijvoorbeeld: magazijn achter", onChange: (e) => setLocatie(e.target.value) }), bekendeLocaties.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 pt-1", children: bekendeLocaties.slice(0, 6).map((l) => (_jsx("button", { type: "button", onClick: () => setLocatie(l), className: "hover:bg-accent rounded-full border px-3 py-1 text-xs", children: l }, l))) }))] }), formaatOpties.length > 0 ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Standaardformaat van deze printer" }), _jsxs("p", { className: "text-muted-foreground text-xs", children: ["Deze printer kan: ", formaatOpties.map((o) => o.label.split(" (")[0]).join(", "), "."] }), formaatOpties.length === 1 ? (_jsx("p", { className: "text-sm", children: formaatOpties[0].label })) : (_jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: formaatOpties.map((o) => (_jsxs("button", { type: "button", onClick: () => setFormaatCode(o.code), className: `hover:bg-accent rounded-lg border p-3 text-left transition ${formaatCode === o.code ? "border-primary bg-accent" : ""}`, children: [o.breedte <= 120 && o.hoogte <= 220 ? (_jsx(Tag, { className: "text-muted-foreground mb-1 h-4 w-4" })) : (_jsx(FileText, { className: "text-muted-foreground mb-1 h-4 w-4" })), _jsx("p", { className: "text-sm font-medium", children: o.label.split(" (")[0] }), _jsxs("p", { className: "text-muted-foreground text-xs", children: [o.breedte, " \u00D7 ", o.hoogte, " mm"] })] }, o.code))) }))] })) : (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Wat gaat deze printer afdrukken?" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "De formaten van deze printer konden niet worden opgehaald." }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: [
                                                 { code: "papier", label: "Papier (A4)", sub: "Gewone documenten", Icon: FileText },
                                                 { code: "etiket", label: "Etiketten", sub: "Stickers en labels", Icon: Tag },
-                                            ].map((o) => (_jsxs("button", { type: "button", onClick: () => setGebruik(o.code), className: `hover:bg-accent rounded-lg border p-4 text-left transition ${gebruik === o.code ? "border-primary bg-accent" : ""}`, children: [_jsx(o.Icon, { className: "text-muted-foreground mb-2 h-5 w-5" }), _jsx("p", { className: "text-sm font-medium", children: o.label }), _jsx("p", { className: "text-muted-foreground text-xs", children: o.sub })] }, o.code))) })] }), _jsxs("div", { className: "flex justify-between", children: [!bewerken ? (_jsx(Button, { variant: "ghost", onClick: () => setStap(0), children: "Terug" })) : (_jsx("span", {})), _jsx(Button, { disabled: bezig, onClick: () => void opslaan(), children: bewerken ? "Opslaan" : "Opslaan en verder" })] })] }), _jsxs("div", { className: "hidden sm:block", children: [_jsx("p", { className: "text-muted-foreground mb-2 text-xs", children: "Zo komt hij in de lijst:" }), _jsxs("div", { className: "bg-card rounded-xl border p-3", children: [_jsx(Printer, { className: "text-muted-foreground mb-2 h-4 w-4" }), _jsx("p", { className: "truncate text-sm font-medium", children: naam || "Naam van de printer" }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: locatie || "Geen locatie" })] })] })] })), stap === 2 && (_jsxs("div", { className: "space-y-4 text-center", children: [_jsx(CheckCircle2, { className: "text-primary mx-auto h-10 w-10" }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "De printer is klaar voor gebruik" }), _jsxs("p", { className: "text-muted-foreground text-sm", children: [naam, " ", locatie ? `bij ${locatie}` : "", " drukt voortaan automatisch af."] })] }), testStatus !== "leeg" && (_jsxs("p", { className: "text-muted-foreground text-sm", children: [testStatus === "bezig" && "Onderweg naar de printer…", testStatus === "gelukt" && "De testpagina is verstuurd.", testStatus === "fout" && "De testpagina kon niet worden afgedrukt."] })), _jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => void testpagina(), children: "Testpagina afdrukken" }), _jsx(Button, { variant: "ghost", onClick: opnieuw, children: "Nog een printer toevoegen" }), _jsx(Button, { onClick: () => onOpenChange(false), children: "Klaar" })] }), _jsx(WerktHetNiet, {})] }))] }) }));
+                                            ].map((o) => (_jsxs("button", { type: "button", onClick: () => setGebruik(o.code), className: `hover:bg-accent rounded-lg border p-4 text-left transition ${gebruik === o.code ? "border-primary bg-accent" : ""}`, children: [_jsx(o.Icon, { className: "text-muted-foreground mb-2 h-5 w-5" }), _jsx("p", { className: "text-sm font-medium", children: o.label }), _jsx("p", { className: "text-muted-foreground text-xs", children: o.sub })] }, o.code))) })] })), _jsxs("div", { className: "flex justify-between", children: [!bewerken ? (_jsx(Button, { variant: "ghost", onClick: () => setStap(0), children: "Terug" })) : (_jsx("span", {})), _jsx(Button, { disabled: bezig, onClick: () => void opslaan(), children: bewerken ? "Opslaan" : "Opslaan en verder" })] })] }), _jsxs("div", { className: "hidden sm:block", children: [_jsx("p", { className: "text-muted-foreground mb-2 text-xs", children: "Zo komt hij in de lijst:" }), _jsxs("div", { className: "bg-card rounded-xl border p-3", children: [_jsx(Printer, { className: "text-muted-foreground mb-2 h-4 w-4" }), _jsx("p", { className: "truncate text-sm font-medium", children: naam || "Naam van de printer" }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: locatie || gekozen?.computer || "Geen omschrijving" })] })] })] })), stap === 2 && (_jsxs("div", { className: "space-y-4 text-center", children: [_jsx(CheckCircle2, { className: "text-primary mx-auto h-10 w-10" }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "De printer is klaar voor gebruik" }), _jsxs("p", { className: "text-muted-foreground text-sm", children: [naam, " ", locatie ? `bij ${locatie}` : "", " drukt voortaan automatisch af."] })] }), testStatus !== "leeg" && (_jsxs("p", { className: "text-muted-foreground text-sm", children: [testStatus === "bezig" && "Onderweg naar de printer…", testStatus === "gelukt" && (testMelding || "De testpagina is afgedrukt."), testStatus === "fout" &&
+                                    `De testpagina kon niet worden afgedrukt.${testMelding ? ` ${testMelding}` : ""}`] })), _jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => void testpagina(), children: "Testpagina afdrukken" }), _jsx(Button, { variant: "ghost", onClick: opnieuw, children: "Nog een printer toevoegen" }), _jsx(Button, { onClick: () => onOpenChange(false), children: "Klaar" })] }), _jsx(WerktHetNiet, {})] }))] }) }));
 }

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

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

package/dist-lib/components/PrintersRedirectPage.js

@@ -1,14 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// ============================================================================
-// src/components/PrintersRedirectPage.tsx — oude URL /layouts-printers/printers
-// stuurt door naar de samengevoegde pagina Printplekken.
-// ============================================================================
-import { useEffect } from "react";
-import { useNavigate } from "@tanstack/react-router";
-export function PrintersRedirectPage() {
-    const navigate = useNavigate();
-    useEffect(() => {
-        void navigate({ to: "/layouts-printers/printplekken", replace: true });
-    }, [navigate]);
-    return _jsx("p", { className: "text-muted-foreground p-6 text-sm", children: "Doorsturen naar Printplekken\u2026" });
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+// ============================================================================
+// src/components/PrintersRedirectPage.tsx — oude URL /layouts-printers/printers
+// stuurt door naar de samengevoegde pagina Printplekken.
+// ============================================================================
+import { useEffect } from "react";
+import { useNavigate } from "@tanstack/react-router";
+export function PrintersRedirectPage() {
+    const navigate = useNavigate();
+    useEffect(() => {
+        void navigate({ to: "/layouts-printers/printplekken", replace: true });
+    }, [navigate]);
+    return _jsx("p", { className: "text-muted-foreground p-6 text-sm", children: "Doorsturen naar Printplekken\u2026" });
+}

package/dist-lib/index.d.ts

@@ -14,6 +14,8 @@ export { drukTestpaginaAf } from './lib/testpagina.js';
 export { TestprintDialog } from './components/TestprintDialog.js';
 export { bepaalTestOverzicht, verstuurTestprint } from './lib/testprint.js';
 export type { TestprintContext, TestprintRegel, TestprintResultaat } from './lib/testprint.js';
+export { bedoeldePrinter, formaatDef, paginaCss } from './lib/browserPrint.js';
+export type { Orientatie, PrinterKeuze } from './lib/browserPrint.js';
 export { PrintQueuePage } from './components/PrintQueuePage.js';
 export { AiLayoutImportDialog } from './components/AiLayoutImportDialog.js';
 export { LogosPage, LogoThumbnail } from './components/LogosPage.js';
@@ -58,15 +60,10 @@ export type { PlekNamen } from './lib/printQueue.js';
 export type { PrintJobModel, PrinterModel } from './lib/useDocumentData.js';
 export { beschikbareLayouts, beschikbarePrinters, printDocument, printPdf, printHtml, printerVoorWerkplek, printerVoorDocumenttype, volgJobStatus, DubbeleAanvraagFout, } from './lib/printApi.js';
 export type { PrintDocumentInput, PrintDocumentResult, PrintPdfInput, PrintHtmlInput, JobStatus, } from './lib/printApi.js';
-export { bedoeldePrinter, drukAf, formaatDef, paginaCss } from './lib/browserPrint.js';
-export type { AfdrukOpdracht, AfdrukResultaat, Orientatie, PrinterKeuze } from './lib/browserPrint.js';
 export { printDirect } from './lib/directPrint.js';
 export type { DirectPrintOpdracht, DirectPrintResultaat } from './lib/directPrint.js';
 export { htmlNaarPdfBase64 } from './lib/documentPdf.js';
 export type { PdfOpdracht } from './lib/documentPdf.js';
-export { NetwerkPrintersDialog } from './components/NetwerkPrintersDialog.js';
-export { AfdrukKnop } from './components/AfdrukKnop.js';
-export type { AfdrukKnopProps } from './components/AfdrukKnop.js';
 export { supabase } from './lib/supabaseClient.js';
 export { useLayoutIdParam } from './lib/useLayoutIdParam.js';
 export { PaginaDocument } from './components/PaginaDocument.js';