@flowselections/logistiek-engine 1.0.34 → 1.0.53

package/README.md

@@ -1,24 +1,24 @@
-# logistiek Engine
-
-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/316ec9c5-0f01-408a-b7ec-3d4dccf9b65d).
-
-- **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
-```
+# logistiek Engine
+
+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/316ec9c5-0f01-408a-b7ec-3d4dccf9b65d).
+
+- **Ship faster**: describe what you want to build and Lovable handles the code.
+- **Stay in sync**: every change made in Lovable is committed straight to this repository.
+- **Full ownership**: this code is yours. Push to `main` on GitHub and your changes sync back into Lovable, ready for your next prompt.
+
+## Development
+
+Prefer working locally? You need Node.js and npm — [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating).
+
+```sh
+git clone <this-repository-url>
+cd <repository-name>
+npm i
+npm run dev
+```

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

@@ -0,0 +1,28 @@
+import "@xyflow/react/dist/style.css";
+import { type FlowTree } from "../lib/flowTree";
+import type { RouteMarker } from "../lib/flowRoute";
+import type { NodeTraceGroep } from "../lib/nodeTrace";
+import type { RuleEngineSettings } from "../lib/ruleEngineSchema";
+export type { RouteMarker };
+interface Props {
+    tree: FlowTree;
+    selectedStepId: string | null;
+    /** Alle waarden van de werkwijze, zodat een vakje zijn eigen velden kan tonen. */
+    settings: RuleEngineSettings;
+    /** Markeringen per knoop-id (vastgelopen / bezig / klaar) van een gekozen orderversie. */
+    markers?: Map<string, RouteMarker>;
+    /** Wat de Engine per vakje voor de gekozen order heeft vastgelegd. */
+    nodeTrace?: Map<string, NodeTraceGroep> | null;
+    /** Tekst boven de kaart als een orderroute getoond wordt. */
+    routeLabel?: string | null;
+    /** Korte samenvatting van de gelopen route (waar hij nu staat of vastliep). */
+    routeSummary?: string | null;
+    /** Vakje waarvan het tracepaneel openstaat. */
+    traceNodeId?: string | null;
+    onTraceNode?: (nodeId: string | null) => void;
+    onClearRoute?: () => void;
+    onSelectStep: (stepId: string) => void;
+    onChangeChoice: (storeId: string, fieldKey: string, value: unknown) => void;
+}
+export declare function FlowCanvas(props: Props): import("react").JSX.Element;
+//# sourceMappingURL=FlowCanvas.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowCanvas.d.ts","sourceRoot":"","sources":["../../src/components/FlowCanvas.tsx"],"names":[],"mappings":"AAgDA,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAA6B,KAAK,QAAQ,EAAiB,MAAM,iBAAiB,CAAC;AAC1F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAOlE,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,kFAAkF;IAClF,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,0FAA0F;IAC1F,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACnC,sEAAsE;IACtE,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,GAAG,IAAI,CAAC;IAC/C,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7E;AA87BD,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,+BAMtC"}

package/dist-lib/components/FlowCanvas.js

@@ -0,0 +1,429 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// src/components/FlowCanvas.tsx — vertakkende kaart van de Logistiek Engine
+// ============================================================================
+// Tekent de beslisboom uit buildFlowTree() als node-based flow (React Flow).
+// Elke beslissing laat al haar uitkomsten zien; de actieve route is gekleurd,
+// alternatieve takken lichter en onbereikbare takken grijs/gestippeld. Keuzes
+// in een beslistegel schrijven direct naar dezelfde werkwijze als de engine.
+// ============================================================================
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { BaseEdge, Background, BackgroundVariant, EdgeLabelRenderer, Handle, MiniMap, Position, ReactFlow, ReactFlowProvider, getSmoothStepPath, useReactFlow, } from "@xyflow/react";
+import dagre from "@dagrejs/dagre";
+import { Button } from "@flowselections/core";
+import { AlertTriangle, ArrowDownUp, ArrowLeftRight, CheckCircle2, ChevronDown, ChevronRight, Clock, Maximize2, Minimize2, Expand, ListChecks, Pencil, Settings2, Minus, Plus, X, } from "lucide-react";
+import "@xyflow/react/dist/style.css";
+import { fieldsFor } from "../lib/flowTree";
+import { RuleFieldInput } from "./rule-engine/RuleFieldInput";
+import { NodeTracePanel } from "./NodeTracePanel";
+import { duur as duurTekst, klok } from "./OrderTraceDetails";
+// ── Toestand → uiterlijk ────────────────────────────────────────────────────
+/** Extra opmaak voor vakjes op (of juist buiten) de gelopen orderroute. */
+function routeClass(node) {
+    if (node.route === true)
+        return " ring-2 ring-primary ring-offset-1";
+    if (node.route === false)
+        return " opacity-40";
+    return "";
+}
+const NODE_STATE_CLASS = {
+    active: "border-primary bg-background shadow-md",
+    possible: "border-border bg-background",
+    disabled: "border-dashed border-border bg-muted text-muted-foreground",
+};
+// ── Lay-out ─────────────────────────────────────────────────────────────────
+function layout(tree, collapsed, richting) {
+    const nodes = Array.isArray(tree?.nodes) ? tree.nodes : [];
+    const edges = Array.isArray(tree?.edges) ? tree.edges : [];
+    const verborgen = (ancestors) => ancestors.some((a) => collapsed.has(a));
+    const zichtbaar = nodes.filter((n) => !verborgen(n.ancestors));
+    const zichtbaarIds = new Set(zichtbaar.map((n) => n.id));
+    const zichtbareEdges = edges.filter((e) => zichtbaarIds.has(e.from) && zichtbaarIds.has(e.to) && !verborgen(e.ancestors));
+    // Ingeklapte beslissingen krijgen één samenvattende pijl naar hun samenkomst.
+    const extra = [];
+    for (const id of collapsed) {
+        const dec = nodes.find((n) => n.id === id);
+        if (!dec?.mergeId || !zichtbaarIds.has(id))
+            continue;
+        const aantal = nodes.filter((n) => n.ancestors.includes(id) && n.kind !== "merge").length;
+        extra.push({
+            id: `collapsed:${id}`,
+            from: id,
+            to: dec.mergeId,
+            label: `+${aantal} tegels`,
+            state: dec.state,
+            kind: "flow",
+            ancestors: [],
+        });
+    }
+    const g = new dagre.graphlib.Graph();
+    g.setGraph({
+        rankdir: richting,
+        nodesep: richting === "TB" ? 72 : 56,
+        ranksep: richting === "TB" ? 96 : 130,
+        marginx: 40,
+        marginy: 40,
+    });
+    g.setDefaultEdgeLabel(() => ({}));
+    for (const n of zichtbaar)
+        g.setNode(n.id, { width: n.w, height: n.h });
+    const alle = [...zichtbareEdges, ...extra];
+    for (const e of alle) {
+        // Verwijspijlen tellen niet mee voor de rangorde (anders trekt dagre stappen scheef).
+        if (e.kind === "ref")
+            continue;
+        g.setEdge(e.from, e.to);
+    }
+    dagre.layout(g);
+    const posities = new Map();
+    for (const n of zichtbaar) {
+        const p = g.node(n.id);
+        if (p)
+            posities.set(n.id, { x: p.x - n.w / 2, y: p.y - n.h / 2 });
+    }
+    return { zichtbaar, edges: alle, posities };
+}
+// ── Knopen ──────────────────────────────────────────────────────────────────
+function handles(richting) {
+    const inPos = richting === "TB" ? Position.Top : Position.Left;
+    const outPos = richting === "TB" ? Position.Bottom : Position.Right;
+    return (_jsxs(_Fragment, { children: [_jsx(Handle, { type: "target", position: inPos, className: "!h-1.5 !w-1.5 !border-0 !bg-transparent" }), _jsx(Handle, { type: "source", position: outPos, className: "!h-1.5 !w-1.5 !border-0 !bg-transparent" })] }));
+}
+function VraagTeken({ onClick }) {
+    return (_jsx("button", { type: "button", "aria-label": "Uitleg over dit vakje", title: "Uitleg over dit vakje", className: "nodrag nopan flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-muted-foreground/60 text-[11px] font-semibold text-muted-foreground hover:bg-primary/10", onClick: (e) => {
+            e.stopPropagation();
+            onClick();
+        }, children: "?" }));
+}
+/** Zwevend paneeltje op het vakje zelf: dezelfde velden als in het zijpaneel. */
+function VeldBewerker({ data }) {
+    const { node, settings, onChangeChoice, onBewerk } = data;
+    const velden = fieldsFor(node.storeId, node.fieldKeys);
+    const waarden = (node.storeId ? settings?.[node.storeId]?.fields : undefined) ?? {};
+    if (!velden.length || !node.storeId)
+        return null;
+    return (_jsxs("div", { className: "nodrag nopan nowheel absolute left-0 top-full z-50 mt-2 w-[22rem] max-w-[90vw] space-y-3 rounded-xl border border-primary bg-background p-3 shadow-xl", onClick: (e) => e.stopPropagation(), onDoubleClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("p", { className: "text-xs font-semibold text-foreground", children: [node.label, " aanpassen"] }), _jsx("button", { type: "button", "aria-label": "Bewerken sluiten", className: "rounded text-muted-foreground hover:text-foreground", onClick: () => onBewerk(null), children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsx("div", { className: "max-h-[22rem] space-y-3 overflow-y-auto pr-1", children: velden.map((field) => (_jsx(RuleFieldInput, { field: field, value: waarden[field.key], stepValues: waarden, onChange: (waarde) => onChangeChoice(node.storeId, field.key, waarde) }, field.key))) }), _jsx("p", { className: "text-[10px] text-muted-foreground", children: "Wijzigingen gaan naar dezelfde werkwijze als de engine. Vergeet niet bovenaan op te slaan." })] }));
+}
+/** Kleine hint dat je hier kunt dubbelklikken. */
+function BewerkHint() {
+    return (_jsxs("span", { className: "pointer-events-none absolute bottom-0.5 right-1.5 flex items-center gap-1 text-[9px] text-muted-foreground", children: [_jsx(Pencil, { className: "h-2.5 w-2.5" }), " dubbelklik"] }));
+}
+/**
+ * BPMN-achtige aanduiding linksboven in een vakje: een taak-icoon bij stappen
+ * en instellingen, zodat de notatie herkenbaar is voor wie BPMN gewend is.
+ */
+function TaakTeken({ soort, actief }) {
+    const Icoon = soort === "taak" ? Settings2 : ListChecks;
+    return (_jsx("span", { className: `pointer-events-none absolute left-1 top-1 flex h-4 w-4 items-center justify-center rounded-sm border ${actief ? "border-primary/60 text-primary" : "border-border text-muted-foreground"}`, title: soort === "taak" ? "Taak (BPMN)" : "Regels / instellingen", children: _jsx(Icoon, { className: "h-2.5 w-2.5" }) }));
+}
+/** BPMN-gateway: geruit vakje met een kruis, bij elk beslismoment. */
+function GatewayTeken({ actief }) {
+    return (_jsx("span", { className: `pointer-events-none absolute -left-3 top-1/2 flex h-6 w-6 -translate-y-1/2 rotate-45 items-center justify-center border-2 bg-background ${actief ? "border-primary text-primary" : "border-muted-foreground/60 text-muted-foreground"}`, title: "Beslismoment (BPMN-gateway)", children: _jsx(X, { className: "h-3 w-3 -rotate-45" }) }));
+}
+function TerminalNode({ data }) {
+    const { node, richting, marker } = data;
+    const inactief = node.state !== "active";
+    return (_jsxs("div", { className: `relative flex items-center justify-between gap-2 rounded-full px-4 text-center ${node.kind === "end" ? "border-4" : "border-2"} ${inactief ? "border-border bg-background" : "border-primary bg-primary/10"}`, title: node.kind === "end" ? "Eindgebeurtenis (BPMN)" : "Startgebeurtenis (BPMN)", style: { width: node.w, height: node.h }, children: [_jsx(Markering, { marker: marker, onClick: data.onTrace ? () => data.onTrace?.(node.id) : undefined }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-[14px] font-semibold text-foreground", children: node.label }), node.sublabel && _jsx("p", { className: "text-[11px] text-muted-foreground", children: node.sublabel })] }), _jsx(VraagTeken, { onClick: () => data.onHelp({ titel: node.label, regels: node.help }) }), handles(richting)] }));
+}
+function SourceNode({ data }) {
+    const { node, richting } = data;
+    return (_jsxs("div", { className: "relative flex items-center justify-center", style: { width: node.w, height: node.h }, children: [_jsx("div", { className: "absolute inset-0 border-2 border-primary/70 bg-background", style: { clipPath: "polygon(50% 0, 100% 50%, 50% 100%, 0 50%)" } }), _jsxs("div", { className: "relative z-10 flex items-center gap-2 px-10 text-center", children: [_jsxs("div", { children: [_jsx("p", { className: "text-[12px] font-semibold leading-tight text-foreground", children: node.label }), _jsx("p", { className: "text-[10px] text-muted-foreground", children: node.sublabel })] }), _jsx(VraagTeken, { onClick: () => data.onHelp({ titel: node.label, regels: node.help }) })] }), handles(richting)] }));
+}
+/**
+ * Strook onder een vakje: wat er in dit vakje met de gekozen order gebeurde.
+ * Klikken opent het paneel met alle vastgelegde stappen van dat vakje.
+ */
+function Markering({ marker, onClick }) {
+    if (!marker)
+        return null;
+    const kleur = marker.kind === "stuck"
+        ? "border-destructive bg-destructive text-destructive-foreground"
+        : marker.kind === "done"
+            ? "border-primary bg-primary text-primary-foreground"
+            : "border-amber-500 bg-amber-500 text-white";
+    const Icoon = marker.kind === "stuck" ? AlertTriangle : marker.kind === "done" ? CheckCircle2 : Clock;
+    const feiten = Array.isArray(marker.feiten) ? marker.feiten.slice(0, 3) : [];
+    const details = [
+        marker.at ? klok(marker.at) : null,
+        marker.durationMs !== null && marker.durationMs !== undefined ? duurTekst(marker.durationMs) : null,
+        marker.count && marker.count > 1 ? `${marker.count} gebeurtenissen` : null,
+        marker.attempts && marker.attempts > 1 ? `poging ${marker.attempts}` : null,
+    ].filter(Boolean);
+    return (_jsxs("button", { type: "button", className: `nodrag nopan absolute -bottom-6 left-3 right-3 z-20 flex items-start gap-1 rounded-md border px-2 py-1 text-left text-[10px] font-medium leading-tight shadow ${kleur} ${onClick ? "cursor-pointer hover:brightness-110" : "cursor-default"}`, title: onClick ? "Klik voor alles wat hier is vastgelegd" : marker.text, onClick: (e) => {
+            e.stopPropagation();
+            onClick?.();
+        }, children: [_jsx(Icoon, { className: "mt-0.5 h-3 w-3 shrink-0" }), _jsxs("span", { className: "min-w-0", children: [_jsxs("span", { className: "line-clamp-2 block", children: [marker.kind === "stuck" ? "Vastgelopen: " : "Beslissing: ", marker.beslissing ?? marker.text] }), marker.waarom ? (_jsxs("span", { className: "line-clamp-2 block font-normal opacity-95", children: ["Waarom: ", marker.waarom] })) : null, feiten.length > 0 && _jsx("span", { className: "line-clamp-2 block font-normal opacity-90", children: feiten.join(" · ") }), details.length > 0 && _jsx("span", { className: "block opacity-90", children: details.join(" · ") })] })] }));
+}
+function StepNode({ data }) {
+    const { node, richting, geselecteerd, marker, traceActief } = data;
+    const inactief = node.state !== "active";
+    return (_jsxs("div", { className: `relative flex cursor-pointer items-start justify-between gap-2 rounded-xl border-2 px-4 py-3 ${marker?.kind === "stuck"
+            ? "border-destructive bg-destructive/10 shadow-md ring-2 ring-destructive/40"
+            : traceActief
+                ? "border-primary bg-primary/10 shadow-md ring-2 ring-primary"
+                : geselecteerd
+                    ? "border-primary bg-primary/10 shadow-md"
+                    : inactief
+                        ? "border-border bg-background hover:border-primary"
+                        : "border-primary/50 bg-background hover:border-primary"}`, style: { width: node.w, height: node.h }, onClick: () => {
+            if (marker && data.onTrace)
+                data.onTrace(node.id);
+            else if (node.stepId)
+                data.onSelectStep(node.stepId);
+        }, children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-[15px] font-semibold text-foreground", children: node.label }), _jsx("p", { className: "line-clamp-2 text-[11px] leading-snug text-muted-foreground", children: node.sublabel })] }), _jsx(TaakTeken, { soort: "taak", actief: !inactief }), _jsx(VraagTeken, { onClick: () => data.onHelp({ titel: node.label, regels: node.help }) }), _jsx(Markering, { marker: marker, onClick: data.onTrace ? () => data.onTrace?.(node.id) : undefined }), handles(richting)] }));
+}
+function SettingNode({ data }) {
+    const { node, richting, bewerken } = data;
+    return (_jsxs("div", { className: `relative flex cursor-pointer items-start justify-between gap-2 rounded-lg border px-3 py-2 ${NODE_STATE_CLASS[node.state]}${routeClass(node)} ${bewerken ? "ring-2 ring-primary" : ""}`, style: { width: node.w, height: node.h }, onClick: () => node.stepId && data.onSelectStep(node.stepId), onDoubleClick: (e) => {
+            e.stopPropagation();
+            data.onBewerk(bewerken ? null : node.id);
+        }, title: "Klik voor het zijpaneel \u00B7 dubbelklik om hier aan te passen", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-[11px] font-semibold leading-tight text-foreground", children: node.label }), Array.isArray(node.lines) && node.lines.length ? (_jsxs("ul", { className: "mt-1 space-y-0.5", children: [node.lines.slice(0, 6).map((l) => (_jsx("li", { className: "truncate text-[10px] leading-[16px] text-muted-foreground", children: l }, l))), node.lines.length > 6 && (_jsxs("li", { className: "text-[10px] text-muted-foreground", children: ["+", node.lines.length - 6, " meer\u2026"] }))] })) : (_jsx("p", { className: "truncate text-[11px] text-muted-foreground", children: node.sublabel }))] }), _jsx(TaakTeken, { soort: "regel", actief: node.state === "active" }), _jsx(VraagTeken, { onClick: () => data.onHelp({ titel: node.label, regels: node.help }) }), _jsx(BewerkHint, {}), bewerken && _jsx(VeldBewerker, { data: data }), handles(richting)] }));
+}
+function DecisionNode({ data }) {
+    const { node, richting, ingeklapt, bewerken } = data;
+    const options = Array.isArray(node.options) ? node.options : [];
+    return (_jsxs("div", { className: `relative flex flex-col justify-between rounded-2xl border-2 px-3 py-2 ${NODE_STATE_CLASS[node.state]}${routeClass(node)} ${bewerken ? "ring-2 ring-primary" : ""}`, style: { width: node.w, height: node.h }, onDoubleClick: (e) => {
+            e.stopPropagation();
+            data.onBewerk(bewerken ? null : node.id);
+        }, title: "Beslismoment \u00B7 dubbelklik om deze instelling hier aan te passen", children: [_jsx(GatewayTeken, { actief: node.state === "active" }), _jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("button", { type: "button", className: "nodrag nopan mt-0.5 shrink-0 rounded text-muted-foreground hover:text-foreground", "aria-label": ingeklapt ? "Tak uitklappen" : "Tak inklappen", title: ingeklapt ? "Tak uitklappen" : "Tak inklappen", onClick: (e) => {
+                            e.stopPropagation();
+                            data.onToggleCollapse(node.id);
+                        }, children: ingeklapt ? _jsx(ChevronRight, { className: "h-4 w-4" }) : _jsx(ChevronDown, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0 flex-1 text-center", children: [_jsx("p", { className: "line-clamp-2 text-[12px] font-semibold leading-tight text-foreground", children: node.label }), _jsx("p", { className: "truncate text-[10px] text-muted-foreground", children: node.sublabel })] }), _jsx(VraagTeken, { onClick: () => data.onHelp({ titel: node.label, regels: node.help }) })] }), _jsx("select", { className: "nodrag nopan w-full rounded-md border border-border bg-background px-2 py-1 text-[12px] text-foreground", value: node.currentValue ?? "", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onDoubleClick: (e) => {
+                    e.stopPropagation();
+                    data.onBewerk(bewerken ? null : node.id);
+                }, onChange: (e) => {
+                    const raw = e.target.value;
+                    const waarde = node.isBoolean ? raw === "true" : raw;
+                    if (node.storeId && node.fieldKey)
+                        data.onChangeChoice(node.storeId, node.fieldKey, waarde);
+                }, children: options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }), bewerken && _jsx(VeldBewerker, { data: data }), handles(richting)] }));
+}
+function MergeNode({ data }) {
+    const { node, richting } = data;
+    return (_jsx("div", { className: `rotate-45 border-2 ${node.state === "active" ? "border-primary bg-primary/20" : "border-muted-foreground/50 bg-background"}`, style: { width: node.w, height: node.h }, title: "Samenkomst (BPMN-gateway)", children: handles(richting) }));
+}
+function OptionNode({ data }) {
+    const { node, richting } = data;
+    return (_jsxs("div", { className: `flex items-center justify-center rounded-full border px-3 text-[11px] font-medium ${node.state === "active"
+            ? "border-primary bg-primary/10 text-primary"
+            : node.state === "possible"
+                ? "border-border bg-background text-muted-foreground"
+                : "border-dashed border-border bg-muted text-muted-foreground"}`, style: { width: node.w, height: node.h }, title: node.help.join(" "), children: [_jsx("span", { className: "truncate", children: node.label }), handles(richting)] }));
+}
+const NODE_TYPES = {
+    start: TerminalNode,
+    end: TerminalNode,
+    source: SourceNode,
+    step: StepNode,
+    decision: DecisionNode,
+    setting: SettingNode,
+    option: OptionNode,
+    merge: MergeNode,
+};
+// ── Pijlen ──────────────────────────────────────────────────────────────────
+function StateEdge(props) {
+    const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, markerEnd } = props;
+    const state = data?.state ?? "possible";
+    const isRef = data?.kind === "ref";
+    const [path, labelX, labelY] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+        borderRadius: 10,
+    });
+    const dashed = isRef || state === "disabled";
+    const opRoute = data?.route === true;
+    return (_jsxs(_Fragment, { children: [_jsx(BaseEdge, { path: path, markerEnd: markerEnd, style: {
+                    stroke: opRoute || state === "active" ? "var(--primary)" : "var(--muted-foreground)",
+                    strokeOpacity: opRoute || state === "active" ? 1 : state === "disabled" ? 0.35 : 0.55,
+                    strokeWidth: opRoute ? 5 : state === "active" ? 2.5 : 1.6,
+                    strokeDasharray: dashed && !opRoute ? (isRef ? "4 4" : "5 5") : undefined,
+                } }), data?.label && (_jsx(EdgeLabelRenderer, { children: _jsx("div", { className: `pointer-events-none absolute rounded-md border px-1.5 py-0.5 text-[11px] font-medium shadow-sm ${state === "active"
+                        ? "border-primary/40 bg-background text-primary"
+                        : state === "possible"
+                            ? "border-muted-foreground/40 bg-background text-muted-foreground"
+                            : "border-dashed border-muted-foreground/30 bg-background text-muted-foreground"}`, style: { transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` }, children: isRef ? `hangt af van: ${data.label}` : data.label }) }))] }));
+}
+const EDGE_TYPES = { state: StateEdge };
+// ── Canvas ──────────────────────────────────────────────────────────────────
+function Binnen({ tree, selectedStepId, settings, markers, nodeTrace, routeLabel, routeSummary, traceNodeId, onTraceNode, onClearRoute, onSelectStep, onChangeChoice, }) {
+    const [debug, setDebug] = useState(false);
+    const [bewerktId, setBewerktId] = useState(null);
+    const [uitleg, setUitleg] = useState(null);
+    const [collapsed, setCollapsed] = useState(new Set());
+    const [richting, setRichting] = useState("TB");
+    const [groot, setGroot] = useState(false);
+    // Linkermuisknop ingedrukt houden en scrollen = in-/uitzoomen.
+    const [muisIngedrukt, setMuisIngedrukt] = useState(false);
+    const muisIngedruktRef = useRef(false);
+    const canvasRef = useRef(null);
+    const { fitView, getViewport, setViewport, zoomIn, zoomOut } = useReactFlow();
+    // Escape sluit eerst het bewerkpaneel, daarna het grote scherm.
+    useEffect(() => {
+        if (!bewerktId && !groot)
+            return;
+        const opToets = (e) => {
+            if (e.key !== "Escape")
+                return;
+            if (bewerktId)
+                setBewerktId(null);
+            else
+                setGroot(false);
+        };
+        window.addEventListener("keydown", opToets);
+        return () => window.removeEventListener("keydown", opToets);
+    }, [bewerktId, groot]);
+    // Na het wisselen naar/van groot scherm het schema passend maken.
+    useEffect(() => {
+        const t = setTimeout(() => void fitView({ padding: 0.1, duration: 300 }), 80);
+        return () => clearTimeout(t);
+    }, [groot, fitView]);
+    useEffect(() => {
+        const laatLos = () => {
+            muisIngedruktRef.current = false;
+            setMuisIngedrukt(false);
+        };
+        window.addEventListener("mouseup", laatLos);
+        window.addEventListener("blur", laatLos);
+        return () => {
+            window.removeEventListener("mouseup", laatLos);
+            window.removeEventListener("blur", laatLos);
+        };
+    }, []);
+    useEffect(() => {
+        const el = canvasRef.current;
+        if (!el)
+            return;
+        const zoomTijdensVasthouden = (event) => {
+            if (!muisIngedruktRef.current)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const rect = el.getBoundingClientRect();
+            const px = event.clientX - rect.left;
+            const py = event.clientY - rect.top;
+            const viewport = getViewport();
+            const factor = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 100 : 1;
+            const delta = event.deltaY * factor;
+            const zoom = Math.min(2, Math.max(0.05, viewport.zoom * Math.exp(-delta * 0.0015)));
+            const verhouding = zoom / viewport.zoom;
+            void setViewport({
+                x: px - (px - viewport.x) * verhouding,
+                y: py - (py - viewport.y) * verhouding,
+                zoom,
+            }, { duration: 0 });
+        };
+        el.addEventListener("wheel", zoomTijdensVasthouden, { passive: false, capture: true });
+        return () => el.removeEventListener("wheel", zoomTijdensVasthouden, { capture: true });
+    }, [getViewport, setViewport]);
+    const toggleCollapse = useCallback((id) => {
+        setCollapsed((prev) => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    }, []);
+    const { zichtbaar, edges, posities } = useMemo(() => layout(tree, collapsed, richting), [tree, collapsed, richting]);
+    const rfNodes = useMemo(() => zichtbaar.map((node) => ({
+        id: node.id,
+        type: node.kind,
+        position: posities.get(node.id) ?? { x: 0, y: 0 },
+        draggable: false,
+        // Selecteerbaar houden: anders zet React Flow pointer-events uit en
+        // zijn knoppen en keuzelijsten in het vakje niet klikbaar.
+        selectable: true,
+        // Het bewerkpaneel moet over andere vakjes heen komen te liggen.
+        // Vakjes altijd boven de lijnen, zodat tekst leesbaar blijft.
+        zIndex: bewerktId === node.id ? 1000 : node.kind === "merge" || node.kind === "option" ? 5 : 10,
+        data: {
+            node,
+            richting,
+            geselecteerd: !!node.stepId && node.kind === "step" && node.stepId === selectedStepId,
+            ingeklapt: collapsed.has(node.id),
+            bewerken: bewerktId === node.id,
+            marker: markers?.get(node.id),
+            traceActief: traceNodeId === node.id,
+            settings,
+            onSelectStep,
+            onChangeChoice,
+            onHelp: setUitleg,
+            onToggleCollapse: toggleCollapse,
+            onBewerk: setBewerktId,
+            onTrace: onTraceNode ? (id) => onTraceNode(id) : undefined,
+        },
+    })), [
+        zichtbaar,
+        posities,
+        richting,
+        selectedStepId,
+        collapsed,
+        bewerktId,
+        markers,
+        traceNodeId,
+        onTraceNode,
+        settings,
+        onSelectStep,
+        onChangeChoice,
+        toggleCollapse,
+    ]);
+    const rfEdges = useMemo(() => edges.map((e) => ({
+        id: e.id,
+        source: e.from,
+        target: e.to,
+        type: "state",
+        markerEnd: e.kind === "ref"
+            ? undefined
+            : e.route || e.state === "active"
+                ? "url(#flow-pijl-actief)"
+                : "url(#flow-pijl)",
+        animated: !!e.route,
+        data: { state: e.state, kind: e.kind, label: e.label, route: !!e.route },
+    })), [edges]);
+    // Bij richting- of inklapwissel opnieuw passend maken.
+    useEffect(() => {
+        const t = setTimeout(() => void fitView({ padding: 0.1, duration: 300 }), 50);
+        return () => clearTimeout(t);
+    }, [richting, collapsed, fitView]);
+    // Zodra er een orderroute gekozen is: inzoomen op precies die route.
+    useEffect(() => {
+        if (!routeLabel)
+            return;
+        const ids = zichtbaar.filter((n) => n.state === "active").map((n) => ({ id: n.id }));
+        const t = setTimeout(() => void fitView(ids.length ? { nodes: ids, padding: 0.25, duration: 500 } : { padding: 0.1, duration: 400 }), 80);
+        return () => clearTimeout(t);
+    }, [routeLabel, zichtbaar, fitView]);
+    // Vakje gekozen in de reisbalk of aangeklikt: dat vakje in beeld brengen.
+    useEffect(() => {
+        if (!traceNodeId)
+            return;
+        const t = setTimeout(() => void fitView({ nodes: [{ id: traceNodeId }], padding: 0.6, duration: 400, maxZoom: 1.2 }), 60);
+        return () => clearTimeout(t);
+    }, [traceNodeId, fitView]);
+    const traceGroep = traceNodeId ? nodeTrace?.get(traceNodeId) ?? null : null;
+    const aantalActief = zichtbaar.filter((n) => n.state === "active" && n.kind !== "merge" && n.kind !== "option").length;
+    return (_jsxs("div", { className: groot
+            ? "fixed inset-0 z-50 flex flex-col overflow-hidden border-0 bg-background"
+            : "relative overflow-hidden rounded-xl border border-border bg-muted/20", children: [routeLabel && (_jsxs("div", { className: "absolute left-3 top-3 z-10 flex max-w-[60%] items-start gap-2 rounded-md border border-primary bg-background/95 px-3 py-1.5 text-xs shadow", children: [_jsx("span", { className: "mt-1 inline-block h-2.5 w-6 shrink-0 rounded bg-primary" }), _jsxs("span", { children: ["Route van ", _jsx("strong", { children: routeLabel }), routeSummary && _jsx("span", { className: "block text-muted-foreground", children: routeSummary })] }), onClearRoute && (_jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0", "aria-label": "Route verbergen", onClick: onClearRoute, children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] })), _jsxs("div", { className: "absolute right-3 top-3 z-10 flex gap-1", children: [_jsx(Button, { variant: "outline", size: "icon", "aria-label": "Uitzoomen", onClick: () => void zoomOut(), children: _jsx(Minus, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Inzoomen", onClick: () => void zoomIn(), children: _jsx(Plus, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Alles passend maken", title: "Alles passend maken", onClick: () => void fitView({ padding: 0.1, duration: 300 }), children: _jsx(Maximize2, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", "aria-label": groot ? "Groot scherm sluiten" : "Groot scherm", title: groot ? "Groot scherm sluiten" : "Groot scherm", onClick: () => setGroot((g) => !g), children: groot ? _jsx(Minimize2, { className: "h-4 w-4" }) : _jsx(Expand, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "outline", size: "icon", "aria-label": richting === "TB" ? "Van links naar rechts tekenen" : "Van boven naar beneden tekenen", title: richting === "TB" ? "Van links naar rechts tekenen" : "Van boven naar beneden tekenen", onClick: () => setRichting((r) => (r === "TB" ? "LR" : "TB")), children: richting === "TB" ? _jsx(ArrowLeftRight, { className: "h-4 w-4" }) : _jsx(ArrowDownUp, { className: "h-4 w-4" }) }), collapsed.size > 0 && (_jsx(Button, { variant: "outline", size: "sm", onClick: () => setCollapsed(new Set()), children: "Alles uitklappen" }))] }), _jsxs("div", { className: "absolute bottom-3 left-3 z-10 flex flex-wrap gap-2 rounded-lg border border-border bg-background/90 px-3 py-2 text-[11px] text-muted-foreground backdrop-blur", children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "inline-block h-2.5 w-5 rounded bg-primary" }), " actieve route (", aantalActief, " vakjes)"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "inline-block h-2.5 w-5 rounded bg-muted-foreground/80" }), " mogelijk"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "inline-block h-0 w-5 border-t-2 border-dashed border-muted-foreground/50" }), " niet bereikbaar"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "inline-block h-3 w-3 rotate-45 border-2 border-muted-foreground/60" }), " beslismoment"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "inline-block h-3 w-4 rounded-sm border border-muted-foreground/60" }), " taak"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "inline-block h-3 w-3 rounded-full border-2 border-muted-foreground/60" }), " start"] }), _jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "inline-block h-3 w-3 rounded-full border-4 border-muted-foreground/60" }), " einde"] })] }), _jsxs("div", { ref: canvasRef, className: groot ? "h-full min-h-0 w-full flex-1" : "h-[75vh] min-h-[560px] w-full", onMouseDownCapture: (e) => {
+                    if (e.button !== 0)
+                        return;
+                    muisIngedruktRef.current = true;
+                    setMuisIngedrukt(true);
+                }, onMouseUp: () => {
+                    muisIngedruktRef.current = false;
+                    setMuisIngedrukt(false);
+                }, children: [_jsx("svg", { width: "0", height: "0", className: "absolute", children: _jsxs("defs", { children: [_jsx("marker", { id: "flow-pijl", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: _jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", className: "fill-muted-foreground/50" }) }), _jsx("marker", { id: "flow-pijl-actief", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: _jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", className: "fill-primary" }) })] }) }), _jsxs(ReactFlow, { nodes: rfNodes, edges: rfEdges, nodeTypes: NODE_TYPES, edgeTypes: EDGE_TYPES, fitView: true, fitViewOptions: { padding: 0.1 }, minZoom: 0.05, maxZoom: 2, nodesDraggable: false, nodesConnectable: false, elementsSelectable: true, selectNodesOnDrag: false, onPaneClick: () => setBewerktId(null), panOnScroll: !muisIngedrukt, zoomOnPinch: true, zoomOnScroll: false, "aria-label": "Kaart van de Logistiek Engine", children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 24, size: 1 }), _jsx(MiniMap, { pannable: true, zoomable: true, className: "!bg-background", nodeColor: (n) => {
+                                    const d = n.data?.node;
+                                    if (!d)
+                                        return "transparent";
+                                    return d.state === "active" ? "hsl(var(--primary))" : "hsl(var(--muted-foreground) / 0.4)";
+                                } })] })] }), traceGroep && (_jsx(NodeTracePanel, { groep: traceGroep, orderLabel: routeLabel ?? null, debug: debug, onDebug: setDebug, onClose: () => onTraceNode?.(null) })), uitleg && (_jsxs("div", { className: "absolute bottom-12 left-3 z-20 w-[22rem] max-w-[85%] rounded-xl border border-border bg-background p-4 shadow-lg", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("p", { className: "text-sm font-semibold", children: uitleg.titel }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Uitleg sluiten", onClick: () => setUitleg(null), children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsx("div", { className: "mt-2 space-y-2", children: uitleg.regels.map((regel, i) => (_jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: regel }, i))) })] })), _jsx("p", { className: "border-t border-border px-3 py-2 text-xs text-muted-foreground", children: "Slepen om te verschuiven \u00B7 scrollen verschuift, linkermuisknop ingedrukt houden en scrollen zoomt in en uit \u00B7 dubbelklik op een vakje of keuzelijst om de instellingen daar meteen aan te passen (Escape sluit) \u00B7 klik een stap of instelling om alle regels in het zijpaneel te openen" })] }));
+}
+export function FlowCanvas(props) {
+    return (_jsx(ReactFlowProvider, { children: _jsx(Binnen, { ...props }) }));
+}

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

@@ -0,0 +1,8 @@
+import { type OrderRoute, type OrderVersie } from "../lib/flowRoute";
+interface Props {
+    /** Wordt aangeroepen zodra een versie gekozen/losgelaten wordt. */
+    onRoute: (route: OrderRoute | null, label: string | null, orderRef: string | null, versie: OrderVersie | null) => void;
+}
+export declare function FlowOrders({ onRoute }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=FlowOrders.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowOrders.d.ts","sourceRoot":"","sources":["../../src/components/FlowOrders.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAA2B,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG9F,UAAU,KAAK;IACb,mEAAmE;IACnE,OAAO,EAAE,CACP,KAAK,EAAE,UAAU,GAAG,IAAI,EACxB,KAAK,EAAE,MAAM,GAAG,IAAI,EACpB,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,MAAM,EAAE,WAAW,GAAG,IAAI,KACvB,IAAI,CAAC;CACX;AAoCD,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,KAAK,+BAgN5C"}