@flowselections/layout-maker 1.7.2 → 1.8.0

package/README.md

@@ -42,13 +42,90 @@ npm run dev
    import { behandelQueueTick } from "@flowselections/layout-maker/print";
 
    export const Route = createFileRoute("/api/public/print/queue-tick")({
-     server: { handlers: { POST: async ({ request }) => behandelQueueTick(request) } },
+     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 },              // gegevens voor de layout
+});
+
+// 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
+});
+
+// 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,4 +1,4 @@
-import { type Orientatie } from "../lib/browserPrint";
+import { type Orientatie } from "../lib/browserPrint.js";
 export interface AfdrukKnopProps {
     documenttype: string;
     formaatCode: string | null;

package/dist-lib/components/AfdrukKnop.js

@@ -7,8 +7,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button, toast } from "@flowselections/core";
 import { Loader2, Printer } from "lucide-react";
-import { drukAf } from "../lib/browserPrint";
-import { printDirect } from "../lib/directPrint";
+import { drukAf } from "../lib/browserPrint.js";
+import { printDirect } from "../lib/directPrint.js";
 export function AfdrukKnop({ documenttype, formaatCode, orientatie, getHtml, css, documentnaam, label = "Afdrukken", layoutId, kopieen, }) {
     const [bezig, setBezig] = useState(false);
     const afdrukken = async () => {

package/dist-lib/components/AiLayoutImportDialog.js

@@ -3,10 +3,10 @@ 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";
+import { analyseerDocumentLayout } from "../lib/aiLayout.functions.js";
+import { supabase } from "../lib/supabaseClient.js";
+import { useLogos } from "../lib/logoLibrary.js";
+import { documentProfiel, standaardConfig } from "../lib/documentProfiles.js";
 export function AiLayoutImportDialog({ open, onOpenChange, onKlaar, }) {
     const navigate = useNavigate();
     const { logos } = useLogos();

package/dist-lib/components/BlokOntwerperPage.js

@@ -3,11 +3,11 @@ 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";
+import { PakbonSectieEditor, PakbonBlokKaderEditor } from "./PakbonSectiesPanel.js";
+import { PakbonSectiePreview } from "./PakbonPreview.js";
+import { SECTIE_REGISTER, leesPakbonConfig, nieuweSectie, sectieDef, } from "../lib/pakbonBuilder.js";
+import { updateLayout, useLayoutDetail } from "../lib/useDocumentData.js";
+import { useLayoutIdParam } from "../lib/useLayoutIdParam.js";
 /** Ontwerp elk pakbon-blok afzonderlijk, los van de volledige pagina. */
 export function BlokOntwerperPage({ layoutId: layoutIdProp } = {}) {
     const layoutId = useLayoutIdParam(layoutIdProp);

package/dist-lib/components/ComputersLijst.js

@@ -6,8 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { Button, Card, CardContent, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@flowselections/core";
 import { Loader2, Monitor, Plus, RefreshCw } from "lucide-react";
-import { netwerkComputers, netwerkPrinters } from "../lib/printService.functions";
-import { PrintProgrammaUitleg, WerktHetNiet } from "./PrintProgrammaUitleg";
+import { netwerkComputers, netwerkPrinters } from "../lib/printService.functions.js";
+import { PrintProgrammaUitleg, WerktHetNiet } from "./PrintProgrammaUitleg.js";
 export function useComputers() {
     const [computers, setComputers] = useState([]);
     const [loading, setLoading] = useState(true);

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

@@ -1,5 +1,5 @@
-import { type DocumentConfig } from "../lib/documentProfiles";
-import type { LayoutModel } from "../lib/documentTypes";
+import { type DocumentConfig } from "../lib/documentProfiles.js";
+import type { LayoutModel } from "../lib/documentTypes.js";
 /**
  * Documentspecifieke instellingen. Wat hier verschijnt komt volledig uit het
  * profiel van het documenttype — nieuwe documentsoorten werken automatisch.

package/dist-lib/components/DocumentSettingsPanel.js

@@ -2,9 +2,9 @@ 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";
+import { configWaarde, documentProfiel, standaardConfig, } from "../lib/documentProfiles.js";
+import { updateLayout, usePrinters } from "../lib/useDocumentData.js";
+import { useFormaatPrinters, zetFormaatPrinter } from "../lib/formaatPrinters.js";
 /**
  * Documentspecifieke instellingen. Wat hier verschijnt komt volledig uit het
  * profiel van het documenttype — nieuwe documentsoorten werken automatisch.

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

@@ -1,4 +1,4 @@
-import { type LayoutModel } from "../lib/documentTypes";
+import { type LayoutModel } from "../lib/documentTypes.js";
 /**
  * Formaat- en oriëntatiekeuze die in elke ontwerp-editor beschikbaar is.
  * Wijzigingen worden direct opgeslagen en lokaal doorgegeven aan de preview.

package/dist-lib/components/FormaatOrientatieBar.js

@@ -2,8 +2,8 @@ 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";
+import { PAPIERFORMATEN } from "../lib/documentTypes.js";
+import { updateLayout } from "../lib/useDocumentData.js";
 /**
  * Formaat- en oriëntatiekeuze die in elke ontwerp-editor beschikbaar is.
  * Wijzigingen worden direct opgeslagen en lokaal doorgegeven aan de preview.

package/dist-lib/components/LayoutsPage.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { useAutoRefresh } from "../lib/useAutoRefresh";
+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, Images, Pencil, Plus, Search, Settings2, Trash2 } from "lucide-react";
-import { dupliceerLayout, maakLayout, updateLayout, useLayouts, verwijderLayout, } from "../lib/useDocumentData";
-import { DOCUMENT_TYPES, PAPIERFORMATEN, documentTypeLabel } from "../lib/documentTypes";
-import { DOCUMENT_PROFIELEN, documentProfiel, primaireProfielen, standaardConfig, } from "../lib/documentProfiles";
+import { dupliceerLayout, maakLayout, updateLayout, useLayouts, verwijderLayout, } from "../lib/useDocumentData.js";
+import { DOCUMENT_TYPES, PAPIERFORMATEN, documentTypeLabel } from "../lib/documentTypes.js";
+import { DOCUMENT_PROFIELEN, documentProfiel, primaireProfielen, standaardConfig, } from "../lib/documentProfiles.js";
 function klantOntwerpLayout(l) {
     if (l.documenttype !== "sticker")
         return false;

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

@@ -1,4 +1,4 @@
-import { type LogoModel } from "../lib/logoLibrary";
+import { type LogoModel } from "../lib/logoLibrary.js";
 export declare function LogoBibliotheekDialog({ open, onOpenChange, onKies, }: {
     open: boolean;
     onOpenChange: (v: boolean) => void;

package/dist-lib/components/LogoBibliotheekDialog.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { Badge, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
-import { LOGO_CATEGORIEEN, logoCategorieLabel, useLogos } from "../lib/logoLibrary";
-import { LogoThumbnail } from "./LogosPage";
+import { LOGO_CATEGORIEEN, logoCategorieLabel, useLogos } from "../lib/logoLibrary.js";
+import { LogoThumbnail } from "./LogosPage.js";
 export function LogoBibliotheekDialog({ open, onOpenChange, onKies, }) {
     const { logos, loading } = useLogos();
     const [zoek, setZoek] = useState("");

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

@@ -1,4 +1,4 @@
-import { type LogoModel } from "../lib/logoLibrary";
+import { type LogoModel } from "../lib/logoLibrary.js";
 export declare function LogoThumbnail({ logo, className }: {
     logo: LogoModel;
     className?: string;

package/dist-lib/components/LogosPage.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea, toast, } from "@flowselections/core";
 import { Download, ImagePlus, Pencil, RefreshCw, Trash2, Upload } from "lucide-react";
-import { useAutoRefresh } from "../lib/useAutoRefresh";
-import { LOGO_CATEGORIEEN, TOEGESTANE_LOGO_TYPES, downloadLogo, formatteerBytes, logoCategorieLabel, maakLogo, useLogos, vervangLogoBestand, verwijderLogo, werkLogoBij, } from "../lib/logoLibrary";
+import { useAutoRefresh } from "../lib/useAutoRefresh.js";
+import { LOGO_CATEGORIEEN, TOEGESTANE_LOGO_TYPES, downloadLogo, formatteerBytes, logoCategorieLabel, maakLogo, useLogos, vervangLogoBestand, verwijderLogo, werkLogoBij, } from "../lib/logoLibrary.js";
 export function LogoThumbnail({ logo, className = "" }) {
     return (_jsx("div", { className: `flex h-12 w-16 items-center justify-center overflow-hidden rounded border bg-[repeating-conic-gradient(#e5e7eb_0%_25%,#fff_0%_50%)] bg-[length:10px_10px] ${className}`, children: logo.viewUrl ? (_jsx("img", { src: logo.viewUrl, alt: logo.naam, className: "max-h-full max-w-full object-contain" })) : (_jsx(ImagePlus, { className: "h-4 w-4 text-muted-foreground" })) }));
 }

package/dist-lib/components/NetwerkPrintersDialog.js

@@ -6,8 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, toast, } from "@flowselections/core";
 import { Loader2, Printer, RefreshCw } from "lucide-react";
-import { supabase } from "../lib/supabaseClient";
-import { netwerkPrinters } from "../lib/printService.functions";
+import { supabase } from "../lib/supabaseClient.js";
+import { netwerkPrinters } from "../lib/printService.functions.js";
 export function NetwerkPrintersDialog({ open, onOpenChange, huidigePrinterId, huidigePrinterNaam, onKlaar, }) {
     const [bezig, setBezig] = useState(false);
     const [fout, setFout] = useState(null);

package/dist-lib/components/PakbonBuilderPage.js

@@ -3,14 +3,14 @@ import { useEffect, useMemo, useState } from "react";
 import { Link } from "@tanstack/react-router";
 import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, toast, } from "@flowselections/core";
 import { ArrowLeft, Loader2, Printer, Save } from "lucide-react";
-import { PakbonSectiesPanel } from "./PakbonSectiesPanel";
-import { PakbonPreview } from "./PakbonPreview";
-import { FormaatOrientatieBar } from "./FormaatOrientatieBar";
-import { leesPakbonConfig } from "../lib/pakbonBuilder";
-import { printPakbon, voorbeeldPakbonOrder } from "../lib/pakbonHtml";
-import { haalPrintLogos } from "../lib/logoLibrary";
-import { updateLayout, useLayoutDetail } from "../lib/useDocumentData";
-import { useLayoutIdParam } from "../lib/useLayoutIdParam";
+import { PakbonSectiesPanel } from "./PakbonSectiesPanel.js";
+import { PakbonPreview } from "./PakbonPreview.js";
+import { FormaatOrientatieBar } from "./FormaatOrientatieBar.js";
+import { leesPakbonConfig } from "../lib/pakbonBuilder.js";
+import { printPakbon, voorbeeldPakbonOrder } from "../lib/pakbonHtml.js";
+import { haalPrintLogos } from "../lib/logoLibrary.js";
+import { updateLayout, useLayoutDetail } from "../lib/useDocumentData.js";
+import { useLayoutIdParam } from "../lib/useLayoutIdParam.js";
 /** Sectiegebaseerde pakbon-builder met live voorbeeld op echte ordergegevens. */
 export function PakbonBuilderPage({ layoutId: layoutIdProp } = {}) {
     const layoutId = useLayoutIdParam(layoutIdProp);

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

@@ -1,4 +1,4 @@
-import { type PakbonConfig, type PakbonSectie } from "../lib/pakbonBuilder";
+import { type PakbonConfig, type PakbonSectie } from "../lib/pakbonBuilder.js";
 export declare function PakbonPreview({ config, breedteMm, hoogteMm, }: {
     config: PakbonConfig;
     breedteMm?: number;

package/dist-lib/components/PakbonPreview.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { PaginaDocument } from "./PaginaDocument";
-import { useLogos } from "../lib/logoLibrary";
-import { DEMO_ORDER, conditieContext, groepeerIdentiekeKarren, groepeerIdentiekeLagen, karBundelTekst, fustVerzamellijst, pickMethode, productVeldBreedtes, sectieOnderdrukt, kolomLabel, laagBundelTekst, sectieZichtbaar, sorteerProducten, totalen, vulVeldcodes, } from "../lib/pakbonBuilder";
+import { PaginaDocument } from "./PaginaDocument.js";
+import { useLogos } from "../lib/logoLibrary.js";
+import { DEMO_ORDER, conditieContext, groepeerIdentiekeKarren, groepeerIdentiekeLagen, karBundelTekst, fustVerzamellijst, pickMethode, productVeldBreedtes, sectieOnderdrukt, kolomLabel, laagBundelTekst, sectieZichtbaar, sorteerProducten, totalen, vulVeldcodes, } from "../lib/pakbonBuilder.js";
 export function PakbonPreview({ config, breedteMm = 210, hoogteMm = 297, }) {
     const order = DEMO_ORDER;
     const ctx = conditieContext(order);

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

@@ -1,4 +1,4 @@
-import { type PakbonConfig, type PakbonSectie } from "../lib/pakbonBuilder";
+import { type PakbonConfig, type PakbonSectie } from "../lib/pakbonBuilder.js";
 /** Beheer van de secties waaruit de pakbon is opgebouwd. */
 export declare function PakbonSectiesPanel({ config, onChange, }: {
     config: PakbonConfig;

package/dist-lib/components/PakbonSectiesPanel.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Badge, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Switch, } from "@flowselections/core";
 import { ChevronDown, ChevronUp, ImagePlus, Plus, Trash2 } from "lucide-react";
-import { useLogos } from "../lib/logoLibrary";
-import { LogoBibliotheekDialog } from "./LogoBibliotheekDialog";
-import { LogoThumbnail } from "./LogosPage";
-import { BESCHIKBARE_KOLOMMEN, CONDITIE_VELDEN, SECTIE_REGISTER, nieuweKolom, nieuweSectie, pickMethode, sectieDef, sectieOnderdrukt, } from "../lib/pakbonBuilder";
+import { useLogos } from "../lib/logoLibrary.js";
+import { LogoBibliotheekDialog } from "./LogoBibliotheekDialog.js";
+import { LogoThumbnail } from "./LogosPage.js";
+import { BESCHIKBARE_KOLOMMEN, CONDITIE_VELDEN, SECTIE_REGISTER, nieuweKolom, nieuweSectie, pickMethode, sectieDef, sectieOnderdrukt, } from "../lib/pakbonBuilder.js";
 /** Beheer van de secties waaruit de pakbon is opgebouwd. */
 export function PakbonSectiesPanel({ config, onChange, }) {
     const alleSecties = Array.isArray(config?.secties) ? config.secties : [];

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

@@ -1 +1 @@
-{"version":3,"file":"PrintQueuePage.d.ts","sourceRoot":"","sources":["../../src/components/PrintQueuePage.tsx"],"names":[],"mappings":"AAsCA,wBAAgB,cAAc,gCAuN7B"}
+{"version":3,"file":"PrintQueuePage.d.ts","sourceRoot":"","sources":["../../src/components/PrintQueuePage.tsx"],"names":[],"mappings":"AAuCA,wBAAgB,cAAc,gCAoN7B"}

package/dist-lib/components/PrintQueuePage.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState } from "react";
 import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, toast, } from "@flowselections/core";
 import { RotateCcw, Search, XCircle } from "lucide-react";
-import { bijgewerktTekst, useAutoRefresh } from "../lib/useAutoRefresh";
-import { maakPrintJob, updateJobStatus, useLayouts, usePrinters, usePrintJobs } from "../lib/useDocumentData";
-import { printStatus, wachtrijTick } from "../lib/printService.functions";
-import { documentTypeLabel } from "../lib/documentTypes";
+import { bijgewerktTekst, useAutoRefresh } from "../lib/useAutoRefresh.js";
+import { maakPrintJob, updateJobStatus, useLayouts, usePrinters, usePrintJobs } from "../lib/useDocumentData.js";
+import { printStatus } from "../lib/printService.functions.js";
+import { vraagWachtrijRonde } from "../lib/queueTickClient.js";
+import { documentTypeLabel } from "../lib/documentTypes.js";
 const STATUS_VARIANT = {
     wachtend: "outline",
     bezig: "secondary",
@@ -44,8 +45,8 @@ export function PrintQueuePage() {
         // achtergrondtaak nog niet is langsgekomen in een verse installatie.
         if (jobsRef.current.some((j) => j.status === "wachtend")) {
             try {
-                const res = (await wachtrijTick({ data: undefined }));
-                setTickFout(res?.ok === false ? res.fout ?? "Verwerken mislukt" : null);
+                const res = await vraagWachtrijRonde();
+                setTickFout(res.ok ? null : res.fout ?? "Verwerken mislukt");
             }
             catch (e) {
                 setTickFout(e instanceof Error ? e.message : "Achtergrondprinten werkt nu niet.");

package/dist-lib/components/PrinterSetupWizard.js

@@ -6,11 +6,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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";
-import { drukAf } from "../lib/browserPrint";
-import { printDirect } from "../lib/directPrint";
-import { netwerkPrinters } from "../lib/printService.functions";
-import { PrintProgrammaUitleg, WerktHetNiet } from "./PrintProgrammaUitleg";
+import { supabase } from "../lib/supabaseClient.js";
+import { drukAf } from "../lib/browserPrint.js";
+import { printDirect } from "../lib/directPrint.js";
+import { netwerkPrinters } from "../lib/printService.functions.js";
+import { PrintProgrammaUitleg, WerktHetNiet } from "./PrintProgrammaUitleg.js";
 const STAPPEN = ["Printer kiezen", "Naam en locatie", "Klaar"];
 function instellingenVoor(gebruik) {
     return gebruik === "etiket"

package/dist-lib/components/PrintersPage.js

@@ -7,13 +7,13 @@ import { useMemo, useState } from "react";
 import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@flowselections/core";
 import { Link } from "@tanstack/react-router";
 import { CheckCircle2, FileText, ListChecks, Monitor, Plus, Printer, Search } from "lucide-react";
-import { bijgewerktTekst, useAutoRefresh } from "../lib/useAutoRefresh";
-import { useLayouts, usePrinters } from "../lib/useDocumentData";
-import { useNetwerkPrinters } from "../lib/useNetwerkPrinters";
-import { PrinterSetupWizard } from "./PrinterSetupWizard";
-import { ComputersLijst, useComputers } from "./ComputersLijst";
-import { PrinterStatsKaarten } from "./PrinterStatsKaarten";
-import { WerkplekkenTabel } from "./WerkplekkenTabel";
+import { bijgewerktTekst, useAutoRefresh } from "../lib/useAutoRefresh.js";
+import { useLayouts, usePrinters } from "../lib/useDocumentData.js";
+import { useNetwerkPrinters } from "../lib/useNetwerkPrinters.js";
+import { PrinterSetupWizard } from "./PrinterSetupWizard.js";
+import { ComputersLijst, useComputers } from "./ComputersLijst.js";
+import { PrinterStatsKaarten } from "./PrinterStatsKaarten.js";
+import { WerkplekkenTabel } from "./WerkplekkenTabel.js";
 export function PrintersPage() {
     const { printers, koppelingen, reload } = usePrinters();
     const { layouts } = useLayouts();

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

@@ -1,4 +1,4 @@
-import { type ProductiebonConfig } from "../lib/productiebonBuilder";
+import { type ProductiebonConfig } from "../lib/productiebonBuilder.js";
 /** Beheer van de blokken waaruit de productiebon is opgebouwd. */
 export declare function ProductiebonBlokkenPanel({ config, onChange, }: {
     config: ProductiebonConfig;

package/dist-lib/components/ProductiebonBlokkenPanel.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from "react";
 import { Badge, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Switch, } from "@flowselections/core";
 import { ChevronDown, ChevronUp, Plus, Trash2 } from "lucide-react";
-import { LETTERTYPEN, MATERIAAL_KOLOMMEN, PB_BLOK_REGISTER, PB_CONDITIE_VELDEN, PRODUCTINFO_VELDEN, SAMENSTELLING_KOLOMMEN, nieuwBlok, pbNieuweKolom, nieuwVeld, pbBlokDef, } from "../lib/productiebonBuilder";
+import { LETTERTYPEN, MATERIAAL_KOLOMMEN, PB_BLOK_REGISTER, PB_CONDITIE_VELDEN, PRODUCTINFO_VELDEN, SAMENSTELLING_KOLOMMEN, nieuwBlok, pbNieuweKolom, nieuwVeld, pbBlokDef, } from "../lib/productiebonBuilder.js";
 /** Beheer van de blokken waaruit de productiebon is opgebouwd. */
 export function ProductiebonBlokkenPanel({ config, onChange, }) {
     const blokken = Array.isArray(config?.blokken) ? config.blokken : [];

package/dist-lib/components/ProductiebonBuilderPage.js

@@ -3,12 +3,12 @@ import { useEffect, useMemo, useState } from "react";
 import { Link } from "@tanstack/react-router";
 import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, toast, } from "@flowselections/core";
 import { ArrowLeft, Save } from "lucide-react";
-import { ProductiebonBlokkenPanel } from "./ProductiebonBlokkenPanel";
-import { ProductiebonPreview } from "./ProductiebonPreview";
-import { FormaatOrientatieBar } from "./FormaatOrientatieBar";
-import { leesProductiebonConfig } from "../lib/productiebonBuilder";
-import { updateLayout, useLayoutDetail } from "../lib/useDocumentData";
-import { useLayoutIdParam } from "../lib/useLayoutIdParam";
+import { ProductiebonBlokkenPanel } from "./ProductiebonBlokkenPanel.js";
+import { ProductiebonPreview } from "./ProductiebonPreview.js";
+import { FormaatOrientatieBar } from "./FormaatOrientatieBar.js";
+import { leesProductiebonConfig } from "../lib/productiebonBuilder.js";
+import { updateLayout, useLayoutDetail } from "../lib/useDocumentData.js";
+import { useLayoutIdParam } from "../lib/useLayoutIdParam.js";
 /** Eigen editor voor de productiebon: modulaire blokken met live voorbeeld. */
 export function ProductiebonBuilderPage({ layoutId: layoutIdProp } = {}) {
     const layoutId = useLayoutIdParam(layoutIdProp);

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

@@ -1,4 +1,4 @@
-import { type ProductiebonBlok, type ProductiebonConfig } from "../lib/productiebonBuilder";
+import { type ProductiebonBlok, type ProductiebonConfig } from "../lib/productiebonBuilder.js";
 /** Live voorbeeld van de volledige productiebon, verdeeld over pagina's. */
 export declare function ProductiebonPreview({ config, breedteMm, hoogteMm, }: {
     config: ProductiebonConfig;

package/dist-lib/components/ProductiebonPreview.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PaginaDocument } from "./PaginaDocument";
-import { BELADING_LABELS, DEMO_PRODUCTIEBON, EXTRA_LABELS, FUST_LABELS, ONDERDEEL_LABELS, QR_LABELS, pbBlokZichtbaar, pbConditieContext, splitsLijst, vulPbVeldcodes, } from "../lib/productiebonBuilder";
+import { PaginaDocument } from "./PaginaDocument.js";
+import { BELADING_LABELS, DEMO_PRODUCTIEBON, EXTRA_LABELS, FUST_LABELS, ONDERDEEL_LABELS, QR_LABELS, pbBlokZichtbaar, pbConditieContext, splitsLijst, vulPbVeldcodes, } from "../lib/productiebonBuilder.js";
 const data = DEMO_PRODUCTIEBON;
 /** Live voorbeeld van de volledige productiebon, verdeeld over pagina's. */
 export function ProductiebonPreview({ config, breedteMm = 210, hoogteMm = 297, }) {

package/dist-lib/components/WerkplekConfiguratiePage.js

@@ -7,13 +7,13 @@ import { useMemo, useState } from "react";
 import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, Input, toast, } from "@flowselections/core";
 import { Link, useParams } from "@tanstack/react-router";
 import { ChevronRight, Monitor, Plus, Printer, Search } from "lucide-react";
-import { bijgewerktTekst, useAutoRefresh } from "../lib/useAutoRefresh";
-import { toggleKoppeling, useLayouts, usePrinters, verwijderPrinter } from "../lib/useDocumentData";
-import { useNetwerkPrinters } from "../lib/useNetwerkPrinters";
-import { drukTestpaginaAf } from "../lib/testpagina";
-import { useComputers } from "./ComputersLijst";
-import { PrinterKaart } from "./PrinterKaart";
-import { PrinterSetupWizard } from "./PrinterSetupWizard";
+import { bijgewerktTekst, useAutoRefresh } from "../lib/useAutoRefresh.js";
+import { toggleKoppeling, useLayouts, usePrinters, verwijderPrinter } from "../lib/useDocumentData.js";
+import { useNetwerkPrinters } from "../lib/useNetwerkPrinters.js";
+import { drukTestpaginaAf } from "../lib/testpagina.js";
+import { useComputers } from "./ComputersLijst.js";
+import { PrinterKaart } from "./PrinterKaart.js";
+import { PrinterSetupWizard } from "./PrinterSetupWizard.js";
 export function WerkplekConfiguratiePage() {
     const params = useParams({ strict: false });
     const computerId = params.computerId ?? "";