@flowselections/layout-maker 1.7.1 → 1.7.3

package/README.md

@@ -1,54 +1,69 @@
-# 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 en de geplande taken 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";
-
-   export const Route = createFileRoute("/api/public/print/queue-tick")({
-     server: { handlers: { POST: async ({ request }) => behandelQueueTick(request) } },
-   });
-   ```
-
-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.
+# 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 en de geplande taken 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.

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"
@@ -145,7 +145,7 @@ export function PrinterSetupWizard({ open, onOpenChange, onKlaar, computerFilter
     const [testStatus, setTestStatus] = useState("leeg");
     const testpagina = async () => {
         setTestStatus("bezig");
-        const html = `<div style="padding:20mm;font-size:14pt"><h1 style="font-size:20pt">Testpagina</h1>
+        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",

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 ?? "";