@sanity/workflow-diagram 0.0.0

package/dist/index.js

@@ -0,0 +1,2112 @@
+import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
+
+import "@xyflow/react/dist/style.css";
+
+import { Stack, Text, Tooltip, Box, Card } from "@sanity/ui";
+
+import { MarkerType, getSmoothStepPath, Handle, Position, BaseEdge, EdgeLabelRenderer, ReactFlowProvider, ReactFlow, Background, BackgroundVariant, Controls } from "@xyflow/react";
+
+import { createContext, useContext, Fragment, useState, useMemo, useEffect, useRef, useCallback } from "react";
+
+import { sentenceCase, describeSiteHeading, describeCondition, checklistLines, isTerminalStage } from "@sanity/workflow-engine";
+
+import ELK from "elkjs/lib/elk.bundled.js";
+
+import { CheckmarkCircleIcon, CircleIcon, LockIcon } from "@sanity/icons";
+
+import { createPortal } from "react-dom";
+
+const DevModeContext = createContext(!1);
+
+function useDevMode() {
+    return useContext(DevModeContext);
+}
+
+const HoveredStageContext = createContext(void 0);
+
+function useHoveredStage() {
+    return useContext(HoveredStageContext);
+}
+
+const ExplainContext = createContext(void 0);
+
+function useExplain() {
+    return useContext(ExplainContext);
+}
+
+function indexExplanations(sites, definition) {
+    const transitions = /* @__PURE__ */ new Map, byStage = /* @__PURE__ */ new Map;
+    for (const site of sites) {
+        if (site.stage === void 0) continue;
+        if (site.address.kind === "transition") {
+            transitions.set(`${site.stage}#${site.address.transition}`, {
+                description: site.description,
+                live: !1
+            });
+            continue;
+        }
+        if (site.address.kind === "action") continue;
+        const heading = sentenceCase(describeSiteHeading(site.address, {
+            definition: definition
+        }).text), list = byStage.get(site.stage) ?? [];
+        list.push({
+            heading: heading,
+            description: site.description,
+            live: !1
+        }), byStage.set(site.stage, list);
+    }
+    return {
+        transition: (stage, name) => transitions.get(`${stage}#${name}`),
+        stageGates: stage => byStage.get(stage) ?? []
+    };
+}
+
+function indexLiveExplanations(evaluation) {
+    const ctx = {
+        definition: evaluation.definition
+    }, stageName = evaluation.currentStage.stage.name, transitions = /* @__PURE__ */ new Map;
+    for (const t of evaluation.currentStage.transitions) transitions.set(`${stageName}#${t.transition.name}`, {
+        description: describeCondition(t.insight, ctx),
+        live: !0
+    });
+    const gates = [], gate = (address, insight) => {
+        insight !== void 0 && gates.push({
+            heading: sentenceCase(describeSiteHeading(address, ctx).text),
+            description: describeCondition(insight, ctx),
+            live: !0
+        });
+    };
+    for (const a of evaluation.currentStage.activities) {
+        const activity = a.activity.name;
+        gate({
+            kind: "activity-filter",
+            activity: activity
+        }, a.filterInsight);
+        for (const [requirement, insight] of Object.entries(a.requirementInsights ?? {})) gate({
+            kind: "requirement",
+            activity: activity,
+            requirement: requirement
+        }, insight);
+        gate({
+            kind: "complete-when",
+            activity: activity
+        }, a.completeWhenInsight), gate({
+            kind: "fail-when",
+            activity: activity
+        }, a.failWhenInsight);
+    }
+    for (const field of evaluation.editableFields) {
+        if (field.scope === "workflow") continue;
+        const address = field.scope === "activity" && field.activity !== void 0 ? {
+            kind: "editable-field",
+            scope: field.scope,
+            name: field.name,
+            activity: field.activity
+        } : {
+            kind: "editable-field",
+            scope: field.scope,
+            name: field.name
+        };
+        gate(address, field.insight);
+    }
+    return {
+        transition: (stage, name) => transitions.get(`${stage}#${name}`),
+        stageGates: stage => stage === stageName ? gates : []
+    };
+}
+
+function mergeExplainData(live, fallback) {
+    return !live || !fallback ? live ?? fallback : {
+        transition: (stage, name) => live.transition(stage, name) ?? fallback.transition(stage, name),
+        stageGates: stage => {
+            const gates = live.stageGates(stage);
+            return gates.length > 0 ? gates : fallback.stageGates(stage);
+        }
+    };
+}
+
+function ExplainChecklist({description: description, marks: marks = !1}) {
+    const root = description.checklist, checklist = root.kind === "group" && root.items.length === 1 ? root.items[0] : root, rows = checklistLines({
+        ...description,
+        checklist: checklist
+    }, {
+        marks: marks
+    });
+    /* @__PURE__ */
+    return jsx(Stack, {
+        space: 2,
+        children: rows.map((row, i) => /* @__PURE__ */ jsx(Text, {
+            size: 1,
+            muted: !0,
+            style: {
+                lineHeight: 1.4,
+                whiteSpace: "pre-wrap"
+            },
+            children: row
+        }, i))
+    });
+}
+
+const STAGE_GATE_CAP = 4;
+
+function cappedGates(gates) {
+    const shown = gates.slice(0, STAGE_GATE_CAP), hidden = gates.length - shown.length;
+    return {
+        shown: shown,
+        overflowNote: hidden > 0 ? `+ ${hidden} more gate${hidden === 1 ? "" : "s"}` : void 0
+    };
+}
+
+function ExplainedGateView({gate: gate}) {
+    /* @__PURE__ */
+    return jsxs(Stack, {
+        space: 2,
+        children: [ 
+        /* @__PURE__ */ jsx(Text, {
+            size: 1,
+            weight: "semibold",
+            muted: !0,
+            children: gate.heading
+        }), 
+        /* @__PURE__ */ jsx(ExplainChecklist, {
+            description: gate.description,
+            marks: gate.live
+        }) ]
+    });
+}
+
+function edgeMarker(traversed) {
+    return {
+        type: MarkerType.ArrowClosed,
+        width: 18,
+        height: 18,
+        color: traversed ? "var(--ws-positive)" : "var(--ws-border)"
+    };
+}
+
+function pointsToPath(points, radius = 8) {
+    const first = points[0];
+    if (!first) return "";
+    if (points.length === 1) return `M${first.x},${first.y}`;
+    const second = points[1];
+    if (points.length === 2) return `M${first.x},${first.y} L${second.x},${second.y}`;
+    let path = `M${first.x},${first.y}`;
+    for (let i = 1; i < points.length - 1; i++) {
+        const prev = points[i - 1], curr = points[i], next = points[i + 1], inDx = curr.x - prev.x, inDy = curr.y - prev.y, outDx = next.x - curr.x, outDy = next.y - curr.y, inLen = Math.hypot(inDx, inDy), outLen = Math.hypot(outDx, outDy), r = Math.min(radius, inLen / 2, outLen / 2);
+        if (r <= 0 || !Number.isFinite(r)) {
+            path += ` L${curr.x},${curr.y}`;
+            continue;
+        }
+        const inEndX = curr.x - inDx / inLen * r, inEndY = curr.y - inDy / inLen * r, outStartX = curr.x + outDx / outLen * r, outStartY = curr.y + outDy / outLen * r;
+        path += ` L${inEndX},${inEndY} Q${curr.x},${curr.y} ${outStartX},${outStartY}`;
+    }
+    const last = points[points.length - 1];
+    return path += ` L${last.x},${last.y}`, path;
+}
+
+const ARROW_LEN = 11, ARROW_HALF_WIDTH = 6;
+
+function arrowHead(points) {
+    const tip = points[points.length - 1], prev = points[points.length - 2], dx = tip.x - prev.x, dy = tip.y - prev.y, len = Math.hypot(dx, dy) || 1, ux = dx / len, uy = dy / len, baseX = tip.x - ux * ARROW_LEN, baseY = tip.y - uy * ARROW_LEN, px = -uy, py = ux, c1x = baseX + px * ARROW_HALF_WIDTH, c1y = baseY + py * ARROW_HALF_WIDTH, c2x = baseX - px * ARROW_HALF_WIDTH, c2y = baseY - py * ARROW_HALF_WIDTH;
+    return {
+        line: [ ...points.slice(0, -1), {
+            x: baseX,
+            y: baseY
+        } ],
+        triangle: `${tip.x},${tip.y} ${c1x},${c1y} ${c2x},${c2y}`
+    };
+}
+
+function transitionPath(route, fallback) {
+    if (route && route.points.length >= 2) {
+        const head = arrowHead(route.points), mid = longestSegmentMidpoint(route.points);
+        return {
+            path: pointsToPath(head.line),
+            markerX: mid.x,
+            markerY: mid.y,
+            triangle: head.triangle
+        };
+    }
+    const [path, markerX, markerY] = getSmoothStepPath({
+        ...fallback,
+        borderRadius: 10
+    });
+    return {
+        path: path,
+        markerX: markerX,
+        markerY: markerY,
+        triangle: null
+    };
+}
+
+function longestSegmentMidpoint(points) {
+    let bestLen = -1, mid = points[0] ?? {
+        x: 0,
+        y: 0
+    };
+    for (let i = 0; i < points.length - 1; i++) {
+        const a = points[i], b = points[i + 1], len = Math.hypot(b.x - a.x, b.y - a.y);
+        len > bestLen && (bestLen = len, mid = {
+            x: (a.x + b.x) / 2,
+            y: (a.y + b.y) / 2
+        });
+    }
+    return mid;
+}
+
+const GHOST_SIZE = 16, ghostId = stage => `ghost:${stage}`;
+
+function makeGhost(id, title) {
+    return {
+        id: id,
+        type: "ghost",
+        position: {
+            x: 0,
+            y: 0
+        },
+        width: GHOST_SIZE,
+        height: GHOST_SIZE,
+        data: {
+            title: title
+        }
+    };
+}
+
+function visibleStages(incident, anchor) {
+    const visible = /* @__PURE__ */ new Set([ anchor.currentStage ]);
+    for (const e of incident) anchor.show !== "previous" && e.source === anchor.currentStage && visible.add(e.target), 
+    anchor.show !== "next" && e.target === anchor.currentStage && visible.add(e.source);
+    return visible;
+}
+
+const GROUP_HEIGHT = 36, GROUP_CHAR_PX = 8.5, GROUP_PAD_X = 14;
+
+function sideAggregate(edges, opts) {
+    const far = e => opts.farEnd === "source" ? e.source : e.target, datas = edges.map(e => e.data), stageNames = [ ...new Set(edges.map(far)) ];
+    return {
+        stageNames: stageNames,
+        stageTitles: stageNames.map(s => opts.titleOf.get(s) ?? s),
+        transitionTitles: datas.map(d => d.transition.title ?? d.transition.name),
+        traversed: datas.some(d => d.wasTraversed),
+        gatedCount: datas.filter(d => d.gated).length
+    };
+}
+
+function groupNode(id, agg) {
+    const count = agg.stageTitles.length, label = `${count} stage${count === 1 ? "" : "s"}`, width = Math.round(label.length * GROUP_CHAR_PX) + GROUP_PAD_X * 2;
+    return {
+        id: id,
+        type: "stageGroup",
+        position: {
+            x: 0,
+            y: 0
+        },
+        width: width,
+        height: GROUP_HEIGHT,
+        data: {
+            label: label,
+            titles: agg.stageTitles,
+            boxWidth: width,
+            boxHeight: GROUP_HEIGHT
+        }
+    };
+}
+
+function groupEdge(agg, route) {
+    return {
+        id: `${route.from}->${route.to}#grouped`,
+        source: route.from,
+        sourceHandle: "t-out",
+        target: route.to,
+        targetHandle: "t-in",
+        type: "transition",
+        markerEnd: edgeMarker(agg.traversed),
+        data: {
+            transition: {
+                name: "grouped",
+                from: route.from,
+                to: route.to,
+                filter: "true"
+            },
+            wasTraversed: agg.traversed,
+            isPrimary: !0,
+            isReturn: !1,
+            gated: route.gated,
+            grouped: {
+                transitions: agg.transitionTitles,
+                gatedCount: agg.gatedCount
+            }
+        }
+    };
+}
+
+const dropLayerPin = n => ({
+    ...n,
+    data: {
+        ...n.data,
+        isInitial: !1
+    }
+});
+
+function sideView(side, ctx) {
+    if (side.edges.length === 0) return {
+        nodes: [],
+        edges: []
+    };
+    const agg = sideAggregate(side.edges, {
+        titleOf: ctx.titleOf,
+        farEnd: side.farEnd
+    });
+    if (agg.stageNames.length === 1) return {
+        nodes: ctx.nodes.filter(n => n.id === agg.stageNames[0]).map(dropLayerPin),
+        edges: side.edges.map(e => ({
+            ...e,
+            data: {
+                ...e.data,
+                isPrimary: !0,
+                isReturn: !1
+            }
+        }))
+    };
+    const gated = side.lockWhenAllGated && agg.gatedCount === side.edges.length, route = side.farEnd === "source" ? {
+        from: side.groupId,
+        to: ctx.currentStage,
+        gated: gated
+    } : {
+        from: ctx.currentStage,
+        to: side.groupId,
+        gated: gated
+    };
+    return {
+        nodes: [ groupNode(side.groupId, agg) ],
+        edges: [ groupEdge(agg, route) ]
+    };
+}
+
+function groupedView(model) {
+    const {nodes: nodes, incident: incident, currentStage: currentStage, titleOf: titleOf} = model, ctx = {
+        nodes: nodes,
+        currentStage: currentStage,
+        titleOf: titleOf
+    }, inSide = sideView({
+        edges: incident.filter(e => e.target === currentStage),
+        farEnd: "source",
+        groupId: "group:in",
+        lockWhenAllGated: !1
+    }, ctx), outSide = sideView({
+        edges: incident.filter(e => e.source === currentStage),
+        farEnd: "target",
+        groupId: "group:out",
+        lockWhenAllGated: !0
+    }, ctx), current = nodes.filter(n => n.id === currentStage).map(dropLayerPin), nodeById = new Map([ ...current, ...inSide.nodes, ...outSide.nodes ].map(n => [ n.id, n ])), edgeById = new Map([ ...inSide.edges, ...outSide.edges ].map(e => [ e.id, e ]));
+    return {
+        nodes: [ ...nodeById.values() ],
+        edges: [ ...edgeById.values() ]
+    };
+}
+
+function applyLocalView({nodes: nodes, edges: edges, currentStage: currentStage, view: view}) {
+    const show = view.show ?? "next", incident = edges.filter(e => e.source === currentStage || e.target === currentStage), titleOf = new Map(nodes.map(n => [ n.id, n.data.stage.title ?? n.data.stage.name ]));
+    if (view.groupEdges) return groupedView({
+        nodes: nodes,
+        incident: incident,
+        currentStage: currentStage,
+        titleOf: titleOf
+    });
+    const visible = visibleStages(incident, {
+        currentStage: currentStage,
+        show: show
+    }), ghosts = /* @__PURE__ */ new Map, ghostFor = stage => {
+        const id = ghostId(stage);
+        return ghosts.has(id) || ghosts.set(id, makeGhost(id, titleOf.get(stage) ?? stage)), 
+        id;
+    }, trimmed = incident.map(e => {
+        const flat = {
+            ...e.data,
+            isPrimary: !0,
+            isReturn: !1
+        };
+        return visible.has(e.source) && visible.has(e.target) ? {
+            ...e,
+            data: flat
+        } : e.source === currentStage ? {
+            ...e,
+            target: ghostFor(e.target),
+            data: {
+                ...flat,
+                hiddenTo: titleOf.get(e.target) ?? e.target
+            }
+        } : {
+            ...e,
+            source: ghostFor(e.source),
+            data: {
+                ...flat,
+                hiddenFrom: titleOf.get(e.source) ?? e.source
+            }
+        };
+    }), renderedSources = new Set(trimmed.map(e => e.source)), continuations = [ ...visible ].filter(name => name !== currentStage && !renderedSources.has(name)).flatMap(name => {
+        const onward = edges.filter(e => e.source === name);
+        if (onward.length === 0) return [];
+        const agg = sideAggregate(onward, {
+            titleOf: titleOf,
+            farEnd: "target"
+        }), id = `ghost:onward:${name}`;
+        return ghosts.set(id, makeGhost(id, agg.stageTitles.join(", "))), [ groupEdge(agg, {
+            from: name,
+            to: id,
+            gated: !1
+        }) ];
+    });
+    return {
+        nodes: [ ...nodes.filter(n => visible.has(n.id)).map(dropLayerPin), ...ghosts.values() ],
+        edges: [ ...trimmed, ...continuations ]
+    };
+}
+
+function NodeShell({width: width, height: height, tooltip: tooltip, children: children}) {
+    /* @__PURE__ */
+    return jsxs("div", {
+        style: {
+            position: "relative",
+            width: width,
+            height: height,
+            overflow: "visible",
+            pointerEvents: "all"
+        },
+        children: [ 
+        /* @__PURE__ */ jsx(Handle, {
+            type: "target",
+            position: Position.Left,
+            id: "t-in",
+            style: {
+                opacity: 0
+            }
+        }), 
+        /* @__PURE__ */ jsx(Handle, {
+            type: "source",
+            position: Position.Right,
+            id: "t-out",
+            style: {
+                opacity: 0
+            }
+        }), 
+        /* @__PURE__ */ jsx(Tooltip, {
+            content: tooltip,
+            placement: "top",
+            portal: !0,
+            children: children
+        }) ]
+    });
+}
+
+function GhostNode({data: data}) {
+    /* @__PURE__ */
+    return jsx(NodeShell, {
+        width: GHOST_SIZE,
+        height: GHOST_SIZE,
+        tooltip: /* @__PURE__ */ jsx(Box, {
+            padding: 3,
+            children: /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                weight: "semibold",
+                children: data.title
+            })
+        }),
+        children: /* @__PURE__ */ jsx("div", {
+            style: {
+                boxSizing: "border-box",
+                width: GHOST_SIZE,
+                height: GHOST_SIZE,
+                borderRadius: 999,
+                border: "2px dashed color-mix(in srgb, var(--ws-ink) 35%, transparent)",
+                cursor: "help"
+            }
+        })
+    });
+}
+
+const DEFAULT_WIDTH = 180, DEFAULT_HEIGHT = 72, elk = new ELK, STAGE_CHAR_PX = 8.5, STAGE_PAD_X = 16, STAGE_ICON_W = 25, STAGE_PAD_Y = 13, STAGE_LINE_H = 18, STAGE_MAX_TEXT_WIDTH = 150, STAGE_MIN_TEXT_WIDTH = 44;
+
+function wrapStageLabel(title) {
+    const words = title.trim().split(/\s+/), lines = [];
+    let line = "";
+    for (const word of words) {
+        const candidate = line ? `${line} ${word}` : word;
+        line && candidate.length * STAGE_CHAR_PX > STAGE_MAX_TEXT_WIDTH ? (lines.push(line), 
+        line = word) : line = candidate;
+    }
+    return [ ...lines, line ];
+}
+
+function stageNodeSize(title) {
+    const lines = wrapStageLabel(title), longest = Math.max(...lines.map(l => l.length)) * STAGE_CHAR_PX, textWidth = Math.min(STAGE_MAX_TEXT_WIDTH, Math.max(STAGE_MIN_TEXT_WIDTH, longest));
+    return {
+        width: Math.round(textWidth) + STAGE_PAD_X * 2 + STAGE_ICON_W,
+        height: lines.length * STAGE_LINE_H + STAGE_PAD_Y * 2
+    };
+}
+
+function defaultLayoutOptions() {
+    return {
+        "elk.algorithm": "layered",
+        "elk.direction": "RIGHT",
+        "elk.edgeRouting": "ORTHOGONAL",
+        "elk.layered.spacing.nodeNodeBetweenLayers": "56",
+        "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
+        "elk.layered.nodePlacement.favorStraightEdges": "true",
+        "elk.layered.spacing.edgeNodeBetweenLayers": "20",
+        "elk.layered.spacing.edgeEdgeBetweenLayers": "16",
+        "elk.spacing.nodeNode": "44",
+        "elk.spacing.edgeNode": "24",
+        "elk.spacing.edgeEdge": "16",
+        "elk.layered.cycleBreaking.strategy": "GREEDY"
+    };
+}
+
+function layerConstraintFor(n) {
+    const d = nodeFlags(n);
+    return d.isInitial ? {
+        layoutOptions: {
+            "elk.layered.layering.layerConstraint": "FIRST"
+        }
+    } : d.isTerminal ? {
+        layoutOptions: {
+            "elk.layered.layering.layerConstraint": "LAST"
+        }
+    } : {};
+}
+
+const nodeFlags = n => n.data ?? {}, edgeFlags = e => e.data ?? {};
+
+function graphBounds(nodes, edges) {
+    const xs = [], ys = [];
+    for (const n of nodes) xs.push(n.position.x, n.position.x + (n.width ?? 0)), ys.push(n.position.y, n.position.y + (n.height ?? 0));
+    for (const e of edges) for (const p of edgeFlags(e).route?.points ?? []) xs.push(p.x), 
+    ys.push(p.y);
+    if (xs.length === 0) return;
+    const x = Math.min(...xs), y = Math.min(...ys);
+    return {
+        x: x,
+        y: y,
+        width: Math.max(...xs) - x,
+        height: Math.max(...ys) - y
+    };
+}
+
+async function layoutGraph(nodes, edges) {
+    if (nodes.length === 0) return {
+        nodes: [ ...nodes ],
+        edges: [ ...edges ]
+    };
+    const railNodes = new Set(edges.flatMap(e => edgeFlags(e).isPrimary ? [ e.source, e.target ] : [])), boxOf = new Map(nodes.map(n => [ n.id, {
+        w: n.width ?? DEFAULT_WIDTH,
+        h: n.height ?? DEFAULT_HEIGHT
+    } ])), portMeta = /* @__PURE__ */ new Map, portFor = args => {
+        const id = `${args.node}.${args.key}`, list = portMeta.get(args.node) ?? [];
+        return list.push({
+            id: id,
+            side: args.side,
+            centered: args.centered,
+            peer: args.peer,
+            out: args.out
+        }), portMeta.set(args.node, list), id;
+    }, sourceSide = (flags, ends) => flags.isPrimary ? "EAST" : railNodes.has(ends.node) ? flags.isReturn && railNodes.has(ends.peer) ? "NORTH" : "SOUTH" : flags.isReturn ? "WEST" : "EAST", targetSide = (flags, ends) => !flags.isReturn || !railNodes.has(ends.node) ? "WEST" : railNodes.has(ends.peer) ? "NORTH" : "SOUTH", elkEdges = edges.filter(e => e.source !== e.target).map(e => {
+        const data = edgeFlags(e), isPrimary = !!data.isPrimary, isReturn = !!data.isReturn, flags = {
+            isPrimary: isPrimary,
+            isReturn: isReturn
+        };
+        return {
+            id: e.id,
+            sources: [ portFor({
+                node: e.source,
+                side: sourceSide(flags, {
+                    node: e.source,
+                    peer: e.target
+                }),
+                key: `out:${e.id}`,
+                centered: isPrimary,
+                peer: e.target,
+                out: !0
+            }) ],
+            targets: [ portFor({
+                node: e.target,
+                side: targetSide(flags, {
+                    node: e.target,
+                    peer: e.source
+                }),
+                key: `in:${e.id}`,
+                centered: isPrimary,
+                peer: e.source,
+                out: !1
+            }) ],
+            ...isPrimary ? {
+                layoutOptions: {
+                    "elk.layered.priority.straightness": "10",
+                    "elk.layered.priority.direction": "10"
+                }
+            } : {}
+        };
+    }), graphWith = (portsOf, constraint) => ({
+        id: "root",
+        layoutOptions: defaultLayoutOptions(),
+        children: nodes.map(n => ({
+            id: n.id,
+            width: n.width ?? DEFAULT_WIDTH,
+            height: n.height ?? DEFAULT_HEIGHT,
+            layoutOptions: {
+                ...layerConstraintFor(n).layoutOptions,
+                "elk.portConstraints": constraint
+            },
+            ports: portsOf(n.id)
+        })),
+        edges: elkEdges
+    }), pass1 = await elk.layout(graphWith(id => (portMeta.get(id) ?? []).map(p => ({
+        id: p.id,
+        layoutOptions: {
+            "elk.port.side": p.side
+        }
+    })), "FIXED_SIDE"));
+    faceOffRailPorts({
+        portMeta: portMeta,
+        railNodes: railNodes,
+        centers: pass1Centers(pass1, boxOf)
+    });
+    const positions = pinnedPortPositions({
+        pass1: pass1,
+        portMeta: portMeta,
+        boxOf: boxOf
+    }), result = await elk.layout(graphWith(id => (portMeta.get(id) ?? []).map(p => ({
+        id: p.id,
+        ...positions.get(p.id) ?? {},
+        layoutOptions: {
+            "elk.port.side": p.side
+        }
+    })), "FIXED_POS"));
+    return materializeLayout({
+        nodes: nodes,
+        edges: edges
+    }, result);
+}
+
+const PORT_STEP = 14;
+
+function faceOffRailPorts(args) {
+    for (const [node, list] of args.portMeta) {
+        if (args.railNodes.has(node)) continue;
+        const here = args.centers.get(node);
+        if (!here) continue;
+        const level = list.filter(p => p.side === "EAST" || p.side === "WEST"), wants = level.map(p => {
+            const peer = args.centers.get(p.peer);
+            return !peer || Math.abs(peer.cx - here.cx) < 1 ? p.side : peer.cx > here.cx ? "EAST" : "WEST";
+        });
+        if (wants.length > 0 && wants.every(w => w === wants[0])) for (const p of level) p.side = wants[0];
+    }
+}
+
+function pass1Centers(pass1, boxOf) {
+    return new Map((pass1.children ?? []).map(c => {
+        const box = boxOf.get(c.id) ?? {
+            w: DEFAULT_WIDTH,
+            h: DEFAULT_HEIGHT
+        };
+        return [ c.id, {
+            cx: (c.x ?? 0) + box.w / 2,
+            cy: (c.y ?? 0) + box.h / 2
+        } ];
+    }));
+}
+
+function orderLevelSide(group, geo) {
+    const here = geo.centers.get(geo.node) ?? {
+        cy: 0
+    }, onRail = group.some(p => p.centered), fromAbove = p => {
+        const peer = geo.centers.get(p.peer) ?? {
+            cy: 0
+        };
+        return onRail && !p.out && Math.abs(peer.cy - here.cy) < 20 ? !1 : geo.along(p.id) < geo.sideMiddle;
+    }, byPass1 = (a, b) => geo.along(a.id) - geo.along(b.id), above = group.filter(p => !p.centered && fromAbove(p)).sort(byPass1), below = group.filter(p => !p.centered && !fromAbove(p)).sort(byPass1);
+    return [ ...group.filter(p => p.centered).map(port => ({
+        port: port,
+        slot: 0
+    })), ...above.map((port, i) => ({
+        port: port,
+        slot: i - above.length
+    })), ...below.map((port, i) => ({
+        port: port,
+        slot: i + 1
+    })) ];
+}
+
+function orderSouthSide(group, geo) {
+    const depth = p => geo.centers.get(p.peer)?.cy ?? 0, base = [ ...group ].sort((a, b) => geo.along(a.id) - geo.along(b.id)), outs = base.filter(p => p.out).sort((a, b) => depth(b) - depth(a) || geo.along(a.id) - geo.along(b.id));
+    let outIdx = 0;
+    const ordered = base.map(p => p.out ? outs[outIdx++] : p), mid = (ordered.length - 1) / 2;
+    return ordered.map((port, i) => ({
+        port: port,
+        slot: i - mid
+    }));
+}
+
+function portPointAt(side, at) {
+    return side === "EAST" ? {
+        x: at.box.w,
+        y: at.box.h / 2 + at.offset
+    } : side === "WEST" ? {
+        x: 0,
+        y: at.box.h / 2 + at.offset
+    } : {
+        x: at.box.w / 2 + at.offset,
+        y: side === "NORTH" ? 0 : at.box.h
+    };
+}
+
+function pinChildPorts(child, ctx) {
+    const laidOut = new Map((child.ports ?? []).map(p => [ p.id, p ]));
+    for (const side of [ "EAST", "WEST", "SOUTH", "NORTH" ]) {
+        const group = ctx.meta.filter(p => p.side === side);
+        if (group.length === 0) continue;
+        const stack = side === "SOUTH" || side === "NORTH", along = id => {
+            const p = laidOut.get(id);
+            return stack ? p?.x ?? 0 : p?.y ?? 0;
+        }, slotted = stack ? orderSouthSide(group, {
+            node: child.id,
+            centers: ctx.centers,
+            along: along
+        }) : orderLevelSide(group, {
+            node: child.id,
+            centers: ctx.centers,
+            along: along,
+            sideMiddle: ctx.box.h / 2
+        });
+        for (const {port: port, slot: slot} of slotted) ctx.out.set(port.id, portPointAt(side, {
+            box: ctx.box,
+            offset: slot * PORT_STEP
+        }));
+    }
+}
+
+function pinnedPortPositions(args) {
+    const centers = pass1Centers(args.pass1, args.boxOf), out = /* @__PURE__ */ new Map;
+    for (const child of args.pass1.children ?? []) pinChildPorts(child, {
+        meta: args.portMeta.get(child.id) ?? [],
+        box: args.boxOf.get(child.id) ?? {
+            w: DEFAULT_WIDTH,
+            h: DEFAULT_HEIGHT
+        },
+        centers: centers,
+        out: out
+    });
+    return out;
+}
+
+function nearestSide(p, rect) {
+    const dLeft = Math.abs(p.x - rect.x), dRight = Math.abs(p.x - (rect.x + rect.w)), dTop = Math.abs(p.y - rect.y), dBottom = Math.abs(p.y - (rect.y + rect.h)), min = Math.min(dLeft, dRight, dTop, dBottom);
+    return min === dLeft ? "left" : min === dRight ? "right" : min === dTop ? "top" : "bottom";
+}
+
+function boundaryPoint({rect: rect, side: side}, offset) {
+    const r = Math.min(rect.w, rect.h) / 2, cx = rect.x + rect.w / 2, cy = rect.y + rect.h / 2;
+    if (side === "left" || side === "right") {
+        const flat2 = rect.h / 2 - r, over2 = Math.max(0, Math.abs(offset) - flat2), inset2 = r - Math.sqrt(Math.max(0, r * r - over2 * over2));
+        return {
+            x: side === "left" ? rect.x + inset2 : rect.x + rect.w - inset2,
+            y: cy + offset
+        };
+    }
+    const flat = rect.w / 2 - r, over = Math.max(0, Math.abs(offset) - flat), inset = r - Math.sqrt(Math.max(0, r * r - over * over));
+    return {
+        x: cx + offset,
+        y: side === "top" ? rect.y + inset : rect.y + rect.h - inset
+    };
+}
+
+function nbrCross(ep) {
+    const nbr = ep.pts[ep.nbrIdx];
+    return ep.side === "left" || ep.side === "right" ? nbr.y : nbr.x;
+}
+
+const FAN_MAX_SPACING = 14, SIDE_PAD = 8;
+
+function placeEndpoints(endpoints) {
+    const groups = /* @__PURE__ */ new Map;
+    for (const ep of endpoints) {
+        const key = `${ep.rect.x},${ep.rect.y}:${ep.side}`, list = groups.get(key);
+        list ? list.push(ep) : groups.set(key, [ ep ]);
+    }
+    for (const group of groups.values()) {
+        const n = group.length, {side: side, rect: rect} = group[0], span = side === "left" || side === "right" ? rect.h : rect.w, usable = Math.max(0, span - 2 * SIDE_PAD);
+        group.sort((a, b) => nbrCross(a) - nbrCross(b));
+        const slots = fanSlots(group), maxAbsSlot = Math.max(...slots.map(Math.abs), 1), spacing = n > 1 ? Math.min(FAN_MAX_SPACING, usable / 2 / maxAbsSlot) : 0;
+        group.forEach((ep, i) => {
+            const offset = slots[i] * spacing, bp = boundaryPoint(ep, offset);
+            ep.pts[ep.endIdx] = bp;
+            const nbr = ep.pts[ep.nbrIdx];
+            nbr && (ep.pts[ep.nbrIdx] = ep.side === "left" || ep.side === "right" ? {
+                x: nbr.x,
+                y: bp.y
+            } : {
+                x: bp.x,
+                y: nbr.y
+            });
+        });
+    }
+    endpoints.forEach(reprojectEndpoint);
+}
+
+function fanSlots(group) {
+    const railIdx = group.findIndex(ep => ep.keepCenter);
+    if (railIdx < 0) return group.map((_, i) => i - (group.length - 1) / 2);
+    const others = group.length - 1, negatives = Math.floor(others / 2), available = [];
+    for (let s = -negatives; s <= others - negatives; s++) s !== 0 && available.push(s);
+    let next = 0;
+    return group.map((_, i) => i === railIdx ? 0 : available[next++]);
+}
+
+function reprojectEndpoint(ep) {
+    const p = ep.pts[ep.endIdx], horizontal = ep.side === "left" || ep.side === "right", mid = horizontal ? ep.rect.y + ep.rect.h / 2 : ep.rect.x + ep.rect.w / 2, cross = (horizontal ? p.y : p.x) - mid;
+    ep.pts[ep.endIdx] = boundaryPoint(ep, cross);
+}
+
+function endpointFor({points: points, rect: rect, keepCenter: keepCenter}, [endIdx, nbrIdx]) {
+    return {
+        pts: points,
+        endIdx: endIdx,
+        nbrIdx: nbrIdx,
+        rect: rect,
+        side: nearestSide(points[endIdx], rect),
+        keepCenter: keepCenter
+    };
+}
+
+function nodeRects(nodes, posById) {
+    const rectById = /* @__PURE__ */ new Map;
+    for (const n of nodes) {
+        const pos = posById.get(n.id);
+        pos && rectById.set(n.id, {
+            x: pos.x,
+            y: pos.y,
+            w: n.width ?? 0,
+            h: n.height ?? 0
+        });
+    }
+    return rectById;
+}
+
+function sectionPolyline(sec) {
+    return [ {
+        x: sec.startPoint.x,
+        y: sec.startPoint.y
+    }, ...(sec.bendPoints ?? []).map(p => ({
+        x: p.x,
+        y: p.y
+    })), {
+        x: sec.endPoint.x,
+        y: sec.endPoint.y
+    } ];
+}
+
+function routeEndpoints(points, rects) {
+    const out = [];
+    return points.length < 2 || (rects.src && rects.src.w > 0 && out.push(endpointFor({
+        points: points,
+        rect: rects.src,
+        keepCenter: rects.primary
+    }, [ 0, 1 ])), rects.tgt && rects.tgt.w > 0 && out.push(endpointFor({
+        points: points,
+        rect: rects.tgt,
+        keepCenter: rects.primary
+    }, [ points.length - 1, points.length - 2 ]))), out;
+}
+
+const JOG = 12, EPS = .01, near = (a, b) => Math.abs(a - b) < EPS;
+
+function jogOrientation(pts, i) {
+    const [a, b, c, d] = [ pts[i - 1], pts[i], pts[i + 1], pts[i + 2] ];
+    if (!(Math.hypot(c.x - b.x, c.y - b.y) >= JOG)) {
+        if (near(a.y, b.y) && near(c.y, d.y) && near(b.x, c.x)) return !0;
+        if (near(a.x, b.x) && near(c.x, d.x) && near(b.y, c.y)) return !1;
+    }
+}
+
+function alignRun({pts: pts, horizontal: horizontal}, {at: at, lane: lane}) {
+    for (const k of [ at, at + 1 ]) {
+        const p = pts[k];
+        pts[k] = horizontal ? {
+            x: p.x,
+            y: lane.y
+        } : {
+            x: lane.x,
+            y: p.y
+        };
+    }
+}
+
+function snapJog(site) {
+    const {pts: pts, i: i, horizontal: horizontal} = site, [a, b, c, d] = [ pts[i - 1], pts[i], pts[i + 1], pts[i + 2] ], abInterior = i - 1 > 0, cdInterior = i + 2 < pts.length - 1, runLen = (p, q) => Math.abs(horizontal ? q.x - p.x : q.y - p.y), snapAb = abInterior && (!cdInterior || runLen(a, b) <= runLen(c, d));
+    return !snapAb && !cdInterior ? !1 : (snapAb ? alignRun(site, {
+        at: i - 1,
+        lane: c
+    }) : alignRun(site, {
+        at: i + 1,
+        lane: b
+    }), !0);
+}
+
+function dropRedundantPoints(pts) {
+    return pts.filter((p, i) => {
+        if (i === 0 || i === pts.length - 1) return !0;
+        const prev = pts[i - 1], next = pts[i + 1];
+        return near(p.x, prev.x) && near(p.y, prev.y) ? !1 : !(near(prev.x, p.x) && near(p.x, next.x) || near(prev.y, p.y) && near(p.y, next.y));
+    });
+}
+
+function dejagRoute(points) {
+    const pts = [ ...points ];
+    for (let pass = 0; pass < 3; pass++) {
+        let changed = !1;
+        for (let i = 1; i + 2 < pts.length; i++) {
+            const horizontal = jogOrientation(pts, i);
+            horizontal !== void 0 && snapJog({
+                pts: pts,
+                i: i,
+                horizontal: horizontal
+            }) && (changed = !0);
+        }
+        if (!changed) break;
+    }
+    return dropRedundantPoints(pts);
+}
+
+const bottomOf = r => r.y + r.h;
+
+function lShape(pts, rects) {
+    if (pts.length !== 3) return;
+    const bottomAt = (i, r) => Math.abs(pts[i].y - bottomOf(r)) < 2, levelAt = (i, r) => Math.abs(pts[i].x - r.x) < 2 || Math.abs(pts[i].x - (r.x + r.w)) < 2;
+    if (bottomAt(0, rects.a) && levelAt(2, rects.b)) return {
+        bottomIdx: 0,
+        levelIdx: 2
+    };
+    if (levelAt(0, rects.a) && bottomAt(2, rects.b)) return {
+        bottomIdx: 2,
+        levelIdx: 0
+    };
+}
+
+function applyL(pts, l) {
+    pts[l.shape.bottomIdx] = {
+        x: l.alpha,
+        y: pts[l.shape.bottomIdx].y
+    }, pts[l.shape.levelIdx] = {
+        x: pts[l.shape.levelIdx].x,
+        y: l.beta
+    }, pts[1] = {
+        x: l.alpha,
+        y: l.beta
+    };
+}
+
+function nestPair({e1: e1, e2: e2}, rectById) {
+    const r1a = rectById.get(e1.ends.source), r1b = rectById.get(e1.ends.target);
+    if (!r1a || !r1b) return;
+    const s1 = lShape(e1.pts, {
+        a: r1a,
+        b: r1b
+    }), s2 = lShape(e2.pts, {
+        a: r1b,
+        b: r1a
+    });
+    if (!s1 || !s2) return;
+    const bottomRect = s1.bottomIdx === 0 ? r1a : r1b, levelRect = s1.bottomIdx === 0 ? r1b : r1a;
+    if ((s2.bottomIdx === 0 ? r1b : r1a) !== bottomRect) return;
+    const alphas = [ e1.pts[s1.bottomIdx].x, e2.pts[s2.bottomIdx].x ], betas = [ e1.pts[s1.levelIdx].y, e2.pts[s2.levelIdx].y ], levelCx = levelRect.x + levelRect.w / 2, bottomCy = bottomRect.y + bottomRect.h / 2, e1Inner = Math.abs(alphas[0] - levelCx) <= Math.abs(alphas[1] - levelCx), innerAlpha = e1Inner ? alphas[0] : alphas[1], outerAlpha = e1Inner ? alphas[1] : alphas[0], e1InnerBeta = Math.abs(betas[0] - bottomCy) <= Math.abs(betas[1] - bottomCy), innerBeta = e1InnerBeta ? betas[0] : betas[1], outerBeta = e1InnerBeta ? betas[1] : betas[0];
+    applyL(e1.pts, {
+        shape: s1,
+        alpha: innerAlpha,
+        beta: innerBeta
+    }), applyL(e2.pts, {
+        shape: s2,
+        alpha: outerAlpha,
+        beta: outerBeta
+    });
+}
+
+function nestOppositePairs(args) {
+    const seen = /* @__PURE__ */ new Map;
+    for (const [id, ends] of args.edgeEnds) {
+        if (!args.routeById.has(id)) continue;
+        const key = [ ends.source, ends.target ].sort().join("⇄"), otherId = seen.get(key);
+        if (otherId === void 0) {
+            seen.set(key, id);
+            continue;
+        }
+        const other = args.edgeEnds.get(otherId);
+        other.source !== ends.target || other.target !== ends.source || nestPair({
+            e1: {
+                pts: args.routeById.get(id).points,
+                ends: ends
+            },
+            e2: {
+                pts: args.routeById.get(otherId).points
+            }
+        }, args.rectById);
+    }
+}
+
+const LANE_STEM = 24, LANE_PASS = 14;
+
+function corridorCandidate(pts, env) {
+    const shape = corridorShape(pts);
+    if (!shape) return;
+    const {laneY: laneY, x1: x1, x2: x2, dir: d} = shape, overlapping = env.rects.filter(r => r.x < x2 + 8 && r.x + r.w > x1 - 8), innerEdge = r => d === 1 ? bottomOf(r) : r.y, outerEdge = r => d === 1 ? r.y : bottomOf(r), passedOver = overlapping.filter(r => (laneY - innerEdge(r)) * d >= -1), beyond = overlapping.filter(r => (outerEdge(r) - laneY) * d >= -1), toward = d === 1 ? Math.max : Math.min, away = d === 1 ? Math.min : Math.max, base = toward(pts[0].y + d * LANE_STEM, pts[3].y + d * LANE_STEM, ...passedOver.map(r => innerEdge(r) + d * LANE_PASS)), cap = away(...beyond.map(r => outerEdge(r) - d * 10));
+    if (!((base - cap) * d > 0)) return {
+        pts: pts,
+        x1: x1,
+        x2: x2,
+        base: base,
+        cap: cap,
+        dir: d
+    };
+}
+
+function corridorShape(pts) {
+    if (pts.length !== 4) return;
+    const [s, a, b, e] = [ pts[0], pts[1], pts[2], pts[3] ];
+    if (Math.abs(a.y - b.y) > .5 || Math.abs(a.x - s.x) > .5 || Math.abs(b.x - e.x) > .5) return;
+    const span = {
+        laneY: a.y,
+        x1: Math.min(a.x, b.x),
+        x2: Math.max(a.x, b.x)
+    };
+    if (a.y > Math.max(s.y, e.y) + 4) return {
+        ...span,
+        dir: 1
+    };
+    if (a.y < Math.min(s.y, e.y) - 4) return {
+        ...span,
+        dir: -1
+    };
+}
+
+function fixedHorizontals(routes, movable) {
+    return routes.filter(r => !movable.has(r.points)).flatMap(r => r.points.slice(1).flatMap((p, i) => {
+        const prev = r.points[i];
+        return near(p.y, prev.y) ? [ {
+            x1: Math.min(p.x, prev.x),
+            x2: Math.max(p.x, prev.x),
+            y: p.y
+        } ] : [];
+    }));
+}
+
+function mergeCorridorLanes(args) {
+    const routes = [ ...args.routeById.values() ], cands = routes.flatMap(route => {
+        const cand = corridorCandidate(route.points, {
+            rects: args.rects
+        });
+        return cand ? [ cand ] : [];
+    }), fixed = fixedHorizontals(routes, new Set(cands.map(c => c.pts)));
+    cands.sort((a, b) => a.x2 - a.x1 - (b.x2 - b.x1) || a.x1 - b.x1);
+    const placed = [];
+    for (const cand of cands) {
+        const d = cand.dir, overlapsSpan = o => o.x1 < cand.x2 - 6 && o.x2 > cand.x1 + 6, cap = (d === 1 ? Math.min : Math.max)(cand.cap, ...fixed.filter(f => (f.y - cand.base) * d >= 0 && overlapsSpan(f)).map(f => f.y - d * 10));
+        let lane = cand.pts[1].y;
+        for (let step = 0; step <= 2 * placed.length; step++) {
+            const y = cand.base + d * step * 16;
+            if ((y - cap) * d > .1) break;
+            if (!placed.some(p => overlapsSpan(p) && Math.abs(p.y - y) < 14)) {
+                lane = y;
+                break;
+            }
+        }
+        cand.pts[1] = {
+            x: cand.pts[1].x,
+            y: lane
+        }, cand.pts[2] = {
+            x: cand.pts[2].x,
+            y: lane
+        }, placed.push({
+            x1: cand.x1,
+            x2: cand.x2,
+            y: lane
+        });
+    }
+}
+
+function stackFanGroups(args) {
+    const groups = /* @__PURE__ */ new Map;
+    for (const [id, route] of args.routeById) {
+        const pts = route.points, source = args.edgeEnds.get(id)?.source ?? "", rect = args.rectById.get(source);
+        if (pts.length < 3 || !rect) continue;
+        const [p0, p1] = [ pts[0], pts[1] ];
+        if (Math.abs(p1.x - p0.x) > .5) continue;
+        const dir = stackDirOf({
+            p0: p0,
+            p1: p1
+        }, rect);
+        if (!dir) continue;
+        const key = `${source}:${dir}`, list = groups.get(key) ?? [];
+        list.push({
+            pts: pts,
+            dir: dir
+        }), groups.set(key, list);
+    }
+    return groups;
+}
+
+function stackDirOf(leg, rect) {
+    if (Math.abs(leg.p0.y - bottomOf(rect)) < 2 && leg.p1.y > leg.p0.y + 4) return 1;
+    if (Math.abs(leg.p0.y - rect.y) < 2 && leg.p1.y < leg.p0.y - 4) return -1;
+}
+
+function untangleStackFans(args) {
+    for (const members of stackFanGroups(args).values()) {
+        if (members.length < 2) continue;
+        const xs = members.map(m => m.pts[0].x).sort((a, b) => a - b), byDepth = [ ...members ].sort((a, b) => (b.pts[1].y - a.pts[1].y) * a.dir), deque = [];
+        for (const {pts: pts} of byDepth) pts[2].x >= pts[1].x ? deque.push(pts) : deque.unshift(pts);
+        deque.forEach((pts, i) => {
+            pts[0] = {
+                x: xs[i],
+                y: pts[0].y
+            }, pts[1] = {
+                x: xs[i],
+                y: pts[1].y
+            };
+        });
+    }
+}
+
+function materializeLayout({nodes: nodes, edges: edges}, result) {
+    const posById = new Map((result.children ?? []).map(c => [ c.id, {
+        x: c.x ?? 0,
+        y: c.y ?? 0
+    } ])), rectById = nodeRects(nodes, posById), edgeEnds = new Map(edges.map(e => [ e.id, {
+        source: e.source,
+        target: e.target,
+        primary: !!edgeFlags(e).isPrimary
+    } ])), endpoints = [], routeById = /* @__PURE__ */ new Map;
+    for (const e of result.edges ?? []) {
+        const sec = e.sections?.[0];
+        if (!sec) continue;
+        const points = dropRedundantPoints(sectionPolyline(sec)), ends = edgeEnds.get(e.id);
+        ends && endpoints.push(...routeEndpoints(points, {
+            src: rectById.get(ends.source),
+            tgt: rectById.get(ends.target),
+            primary: ends.primary
+        })), routeById.set(e.id, {
+            points: points
+        });
+    }
+    mergeCorridorLanes({
+        routeById: routeById,
+        rects: [ ...rectById.values() ]
+    }), untangleStackFans({
+        routeById: routeById,
+        edgeEnds: edgeEnds,
+        rectById: rectById
+    }), nestOppositePairs({
+        routeById: routeById,
+        edgeEnds: edgeEnds,
+        rectById: rectById
+    }), placeEndpoints(endpoints);
+    const positionedNodes = nodes.map(n => ({
+        ...n,
+        position: posById.get(n.id) ?? {
+            x: 0,
+            y: 0
+        }
+    })), enrichedEdges = edges.map(e => {
+        const route = routeById.get(e.id);
+        return route ? {
+            ...e,
+            data: {
+                ...e.data,
+                route: {
+                    points: dejagRoute([ ...route.points ])
+                }
+            }
+        } : e;
+    });
+    return {
+        nodes: positionedNodes,
+        edges: enrichedEdges
+    };
+}
+
+function reachabilityOf(stages) {
+    const byName = new Map(stages.map(s => [ s.name, s ])), cache = /* @__PURE__ */ new Map;
+    return start => {
+        const cached = cache.get(start);
+        if (cached) return cached;
+        const seen = /* @__PURE__ */ new Set;
+        cache.set(start, seen);
+        const stack = [ start ];
+        for (;stack.length > 0; ) {
+            const name = stack.pop();
+            for (const t of byName.get(name)?.transitions ?? []) seen.has(t.to) || (seen.add(t.to), 
+            stack.push(t.to));
+        }
+        return seen;
+    };
+}
+
+function scoreBeats(a, b) {
+    for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return a[i] > b[i];
+    return !1;
+}
+
+const SPINE_BUDGET = 2e4;
+
+function railTransitions(stages, initialStage) {
+    const byName = new Map(stages.map(s => [ s.name, s ])), inDegree = /* @__PURE__ */ new Map;
+    for (const s of stages) for (const t of s.transitions ?? []) inDegree.set(t.to, (inDegree.get(t.to) ?? 0) + 1);
+    let best = [], bestScore = [ -1, 0 ], budget = SPINE_BUDGET;
+    const path = [], visited = /* @__PURE__ */ new Set([ initialStage ]), dfs = name => {
+        const end = path[path.length - 1]?.to ?? initialStage, score = [ path.length, -(inDegree.get(end) ?? 0) ];
+        if (scoreBeats(score, bestScore) && (best = [ ...path ], bestScore = score), !(budget-- <= 0)) for (const t of byName.get(name)?.transitions ?? []) visited.has(t.to) || (visited.add(t.to), 
+        path.push({
+            ...t,
+            from: name
+        }), dfs(t.to), path.pop(), visited.delete(t.to));
+    };
+    return dfs(initialStage), best;
+}
+
+function visitedFromHistory(history) {
+    const visitedStages = /* @__PURE__ */ new Set, traversed = /* @__PURE__ */ new Set;
+    for (const h of history) if (h._type === "stageEntered") visitedStages.add(h.stage), 
+    h.fromStage && (visitedStages.add(h.fromStage), traversed.add(`${h.fromStage}->${h.stage}`)); else if (h._type === "transitionFired") {
+        visitedStages.add(h.fromStage), visitedStages.add(h.toStage);
+        const pair = `${h.fromStage}->${h.toStage}`;
+        traversed.add(h.transition === void 0 ? pair : `${pair}#${h.transition}`);
+    }
+    return {
+        visitedStages: visitedStages,
+        traversed: traversed
+    };
+}
+
+function buildGraphModel({stages: stages, transitions: transitions, initialStage: initialStage, currentStage: currentStage, selectedStage: selectedStage, history: history, guardCount: guardCount, gatedTransitions: gatedTransitions, local: local}) {
+    const {visitedStages: visitedStages, traversed: traversedKeys} = visitedFromHistory(history ?? []), nodes = stages.map(s => {
+        const isTerminal = isTerminalStage(s), box = stageNodeSize(s.title ?? s.name);
+        return {
+            id: s.name,
+            type: "stage",
+            position: {
+                x: 0,
+                y: 0
+            },
+            width: box.width,
+            height: box.height,
+            data: {
+                stage: s,
+                isCurrent: s.name === currentStage,
+                isVisited: visitedStages.has(s.name) && s.name !== currentStage,
+                isSelected: s.name === selectedStage && s.name !== currentStage,
+                isInitial: s.name === initialStage,
+                isTerminal: isTerminal,
+                guardCount: s.name === currentStage ? guardCount ?? 0 : 0,
+                boxWidth: box.width,
+                boxHeight: box.height
+            }
+        };
+    }), railPairs = new Set(railTransitions(stages, initialStage).map(t => `${t.from}->${t.to}#${t.name}`)), reach = reachabilityOf(stages), edges = transitions.map(t => {
+        const traversed = traversedKeys.has(`${t.from}->${t.to}#${t.name}`) || traversedKeys.has(`${t.from}->${t.to}`);
+        return {
+            id: `${t.from}->${t.to}#${t.name}`,
+            source: t.from,
+            sourceHandle: "t-out",
+            target: t.to,
+            targetHandle: "t-in",
+            type: "transition",
+            markerEnd: edgeMarker(traversed),
+            data: {
+                transition: t,
+                wasTraversed: traversed,
+                isPrimary: railPairs.has(`${t.from}->${t.to}#${t.name}`),
+                isReturn: !railPairs.has(`${t.from}->${t.to}#${t.name}`) && reach(t.to).has(t.from),
+                gated: t.from === currentStage && (gatedTransitions ?? []).includes(t.name)
+            }
+        };
+    });
+    if (!local) return {
+        nodes: nodes,
+        edges: edges
+    };
+    if (currentStage === void 0) throw new Error("WorkflowDiagram: the local view needs a currentStage to anchor on");
+    return applyLocalView({
+        nodes: nodes,
+        edges: edges,
+        currentStage: currentStage,
+        view: local
+    });
+}
+
+function GroupNode({data: data}) {
+    /* @__PURE__ */
+    return jsx(NodeShell, {
+        width: data.boxWidth,
+        height: data.boxHeight,
+        tooltip: /* @__PURE__ */ jsx(Box, {
+            padding: 3,
+            style: {
+                maxWidth: 280
+            },
+            children: /* @__PURE__ */ jsxs(Stack, {
+                space: 4,
+                children: [ 
+                /* @__PURE__ */ jsx(Stack, {
+                    space: 2,
+                    children: data.titles.map(title => /* @__PURE__ */ jsx(Text, {
+                        size: 1,
+                        weight: "semibold",
+                        children: `•  ${title}`
+                    }, title))
+                }), 
+                /* @__PURE__ */ jsx(Text, {
+                    size: 1,
+                    muted: !0,
+                    children: "Click to expand"
+                }) ]
+            })
+        }),
+        children: /* @__PURE__ */ jsx("div", {
+            style: {
+                boxSizing: "border-box",
+                width: data.boxWidth,
+                height: data.boxHeight,
+                borderRadius: 999,
+                border: "1.5px dashed color-mix(in srgb, var(--ws-ink) 35%, transparent)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                cursor: "pointer",
+                fontFamily: "var(--ws-font)",
+                fontWeight: 600,
+                fontSize: 12,
+                color: "var(--ws-ink-2)"
+            },
+            children: data.label
+        })
+    });
+}
+
+function MetaTable({rows: rows, description: description, title: title}) {
+    /* @__PURE__ */
+    return jsxs(Stack, {
+        space: 4,
+        style: {
+            minWidth: 240,
+            maxWidth: 340
+        },
+        children: [ title ? /* @__PURE__ */ jsx(Text, {
+            size: 1,
+            weight: "semibold",
+            children: title
+        }) : null, 
+        /* @__PURE__ */ jsx("div", {
+            style: {
+                display: "grid",
+                gridTemplateColumns: "auto 1fr",
+                columnGap: 16,
+                rowGap: 8
+            },
+            children: rows.map(row => /* @__PURE__ */ jsxs(Fragment, {
+                children: [ 
+                /* @__PURE__ */ jsx(Text, {
+                    size: 1,
+                    muted: !0,
+                    children: row.label
+                }), 
+                /* @__PURE__ */ jsx(Text, {
+                    size: 1,
+                    style: row.mono ? {
+                        fontFamily: "monospace",
+                        overflowWrap: "anywhere"
+                    } : void 0,
+                    children: row.value
+                }) ]
+            }, row.label))
+        }), description ? /* @__PURE__ */ jsx(Text, {
+            size: 1,
+            muted: !0,
+            style: {
+                lineHeight: 1.4
+            },
+            children: description
+        }) : null ]
+    });
+}
+
+function StageExplanation({stage: stage}) {
+    const gates = useExplain()?.stageGates(stage) ?? [];
+    if (gates.length === 0) return null;
+    const {shown: shown, overflowNote: overflowNote} = cappedGates(gates);
+    /* @__PURE__ */
+    return jsxs(Stack, {
+        space: 3,
+        children: [ shown.map((gate, i) => /* @__PURE__ */ jsx(ExplainedGateView, {
+            gate: gate
+        }, i)), overflowNote === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+            size: 1,
+            muted: !0,
+            children: overflowNote
+        }) ]
+    });
+}
+
+function stageTooltip(data, devMode) {
+    const {stage: stage} = data;
+    return devMode ? /* @__PURE__ */ jsx(Box, {
+        padding: 3,
+        style: {
+            minWidth: 280
+        },
+        children: /* @__PURE__ */ jsxs(Stack, {
+            space: 3,
+            children: [ 
+            /* @__PURE__ */ jsx(MetaTable, {
+                title: stage.title ?? stage.name,
+                description: stage.description,
+                rows: [ {
+                    label: "Name",
+                    value: stage.name,
+                    mono: !0
+                }, ...data.isTerminal ? [ {
+                    label: "Terminal",
+                    value: "Yes (no transitions out)"
+                } ] : [] ]
+            }), 
+            /* @__PURE__ */ jsx(StageExplanation, {
+                stage: stage.name
+            }) ]
+        })
+    }) : /* @__PURE__ */ jsx(Box, {
+        padding: 3,
+        style: {
+            maxWidth: 320
+        },
+        children: /* @__PURE__ */ jsxs(Stack, {
+            space: 3,
+            children: [ 
+            /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                weight: "semibold",
+                children: stage.title ?? stage.name
+            }), stage.description ? /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                muted: !0,
+                style: {
+                    lineHeight: 1.4
+                },
+                children: stage.description
+            }) : null, 
+            /* @__PURE__ */ jsx(StageExplanation, {
+                stage: stage.name
+            }) ]
+        })
+    });
+}
+
+function emphasisStyle(data) {
+    return data.isCurrent ? {
+        boxShadow: "inset 0 0 0 2.5px var(--ws-accent)"
+    } : data.isSelected ? {
+        outline: "2px dashed var(--ws-accent)",
+        outlineOffset: -4
+    } : {};
+}
+
+function nodeOpacity(data) {
+    return data.isCurrent || data.isSelected ? 1 : data.isVisited ? .95 : .75;
+}
+
+function GuardBadge({count: count}) {
+    /* @__PURE__ */
+    return jsxs("span", {
+        title: `${count} mutation guard${count === 1 ? "" : "s"} active`,
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 2,
+            color: "var(--ws-red)",
+            fontSize: 13,
+            fontWeight: 600
+        },
+        children: [ 
+        /* @__PURE__ */ jsx(LockIcon, {}), " ", count ]
+    });
+}
+
+function StatusIcon({data: data}) {
+    return data.isVisited ? /* @__PURE__ */ jsx("span", {
+        style: {
+            color: "var(--ws-positive)",
+            fontSize: 19,
+            display: "flex"
+        },
+        children: /* @__PURE__ */ jsx(CheckmarkCircleIcon, {})
+    }) : /* @__PURE__ */ jsx("span", {
+        style: {
+            color: data.isCurrent ? "var(--ws-accent)" : "var(--ws-ink-2)",
+            opacity: data.isCurrent ? 1 : .55,
+            fontSize: 19,
+            display: "flex"
+        },
+        children: /* @__PURE__ */ jsx(CircleIcon, {})
+    });
+}
+
+function StageNode({data: data}) {
+    const devMode = useDevMode(), {boxWidth: boxWidth, boxHeight: boxHeight} = data;
+    /* @__PURE__ */
+    return jsx(NodeShell, {
+        width: boxWidth,
+        height: boxHeight,
+        tooltip: stageTooltip(data, devMode),
+        children: /* @__PURE__ */ jsxs("div", {
+            style: {
+                boxSizing: "border-box",
+                cursor: "pointer",
+                width: boxWidth,
+                height: boxHeight,
+                background: "var(--ws-panel)",
+                border: "1.5px solid color-mix(in srgb, var(--ws-ink) 35%, transparent)",
+                borderRadius: boxHeight / 2,
+                boxShadow: "0 1px 2px color-mix(in srgb, var(--ws-ink) 10%, transparent)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 6,
+                padding: `0 ${STAGE_PAD_X}px`,
+                opacity: nodeOpacity(data),
+                ...emphasisStyle(data)
+            },
+            children: [ 
+            /* @__PURE__ */ jsx(StatusIcon, {
+                data: data
+            }), 
+            /* @__PURE__ */ jsx("span", {
+                style: {
+                    fontFamily: "var(--ws-font)",
+                    fontWeight: 600,
+                    fontSize: 14,
+                    lineHeight: "18px",
+                    color: "var(--ws-ink)",
+                    letterSpacing: "-0.005em",
+                    textAlign: "center",
+                    whiteSpace: "pre-line",
+                    overflowWrap: "break-word"
+                },
+                children: wrapStageLabel(data.stage.title ?? data.stage.name).join(`\n`)
+            }), data.isCurrent && data.guardCount > 0 ? /* @__PURE__ */ jsx(GuardBadge, {
+                count: data.guardCount
+            }) : null ]
+        })
+    });
+}
+
+const WS_CARD_TOKENS = {
+    "--ws-accent": "var(--card-focus-ring-color)",
+    "--ws-accent-bg": "color-mix(in srgb, var(--card-focus-ring-color) 18%, transparent)",
+    "--ws-panel": "var(--card-bg-color)",
+    "--ws-ink": "var(--card-fg-color)",
+    "--ws-ink-2": "var(--card-muted-fg-color)",
+    "--ws-border": "var(--card-border-color)",
+    "--ws-red": "var(--card-critical-fg-color)",
+    "--ws-positive": "var(--card-badge-positive-fg-color)",
+    "--ws-font": '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif'
+};
+
+function flattenTransitions(stages) {
+    return stages.flatMap(s => (s.transitions ?? []).map(t => ({
+        ...t,
+        from: s.name
+    })));
+}
+
+function devRows(t) {
+    return [ {
+        label: "Name",
+        value: t.name,
+        mono: !0
+    }, {
+        label: "Filter",
+        value: t.filter,
+        mono: !0
+    }, ...t.effects?.length ? [ {
+        label: "Effects",
+        value: t.effects.map(e => e.name).join(", "),
+        mono: !0
+    } ] : [] ];
+}
+
+const LOCK_SIZE = 18;
+
+function strokeFor(data, hovered) {
+    return data.wasTraversed ? {
+        stroke: "var(--ws-positive)",
+        strokeWidth: hovered ? 2.5 : 2,
+        strokeDasharray: void 0
+    } : hovered ? {
+        stroke: "var(--ws-ink-2)",
+        strokeWidth: 1.75,
+        strokeDasharray: "4 4"
+    } : {
+        stroke: "color-mix(in srgb, var(--ws-ink) 40%, transparent)",
+        strokeWidth: 1.25,
+        strokeDasharray: "4 4"
+    };
+}
+
+function groupedGateNote(data) {
+    const grouped = data.grouped;
+    return !grouped || grouped.gatedCount === 0 || data.gated ? [] : [ `${grouped.gatedCount} of ${grouped.transitions.length} can’t fire yet.` ];
+}
+
+function tooltipNotes(data) {
+    const notes = [];
+    return data.hiddenFrom && notes.push(`From “${data.hiddenFrom}”`), data.hiddenTo && notes.push(`Continues to “${data.hiddenTo}”`), 
+    data.gated && notes.push("Can’t proceed yet — the criteria for this transition aren’t met."), 
+    notes.push(...groupedGateNote(data)), notes;
+}
+
+function TooltipNotes({data: data}) {
+    return tooltipNotes(data).map(note => /* @__PURE__ */ jsx(Text, {
+        size: 1,
+        muted: !0,
+        style: {
+            lineHeight: 1.4
+        },
+        children: note
+    }, note));
+}
+
+function groupedTooltip(grouped, data) {
+    /* @__PURE__ */
+    return jsx(Box, {
+        padding: 3,
+        style: {
+            maxWidth: 320
+        },
+        children: /* @__PURE__ */ jsxs(Stack, {
+            space: 3,
+            children: [ grouped.transitions.map(title => /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                weight: "semibold",
+                children: title
+            }, title)), 
+            /* @__PURE__ */ jsx(TooltipNotes, {
+                data: data
+            }) ]
+        })
+    });
+}
+
+function TransitionExplanation({data: data}) {
+    const explained = useExplain()?.transition(data.transition.from, data.transition.name);
+    return explained ? /* @__PURE__ */ jsx(ExplainedGateView, {
+        gate: {
+            heading: "Transitions when:",
+            ...explained
+        }
+    }) : null;
+}
+
+function endUserTooltip(data) {
+    const t = data.transition;
+    /* @__PURE__ */
+    return jsx(Box, {
+        padding: 3,
+        style: {
+            maxWidth: 320
+        },
+        children: /* @__PURE__ */ jsxs(Stack, {
+            space: 3,
+            children: [ 
+            /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                weight: "semibold",
+                children: t.title ?? t.name
+            }), t.description ? /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                muted: !0,
+                style: {
+                    lineHeight: 1.4
+                },
+                children: t.description
+            }) : null, 
+            /* @__PURE__ */ jsx(TransitionExplanation, {
+                data: data
+            }), 
+            /* @__PURE__ */ jsx(TooltipNotes, {
+                data: data
+            }) ]
+        })
+    });
+}
+
+function hiddenEndpointRows(data) {
+    const rows = [];
+    return data.hiddenFrom && rows.push({
+        label: "From",
+        value: data.transition.from,
+        mono: !0
+    }), data.hiddenTo && rows.push({
+        label: "To",
+        value: data.transition.to,
+        mono: !0
+    }), rows;
+}
+
+function transitionTooltip(data, devMode) {
+    if (data.grouped) return groupedTooltip(data.grouped, data);
+    if (!devMode) return endUserTooltip(data);
+    const t = data.transition;
+    /* @__PURE__ */
+    return jsx(Box, {
+        padding: 3,
+        style: {
+            minWidth: 320
+        },
+        children: /* @__PURE__ */ jsxs(Stack, {
+            space: 3,
+            children: [ 
+            /* @__PURE__ */ jsx(MetaTable, {
+                title: t.title ?? t.name,
+                description: t.description,
+                rows: [ ...hiddenEndpointRows(data), ...devRows(t) ]
+            }), 
+            /* @__PURE__ */ jsx(TransitionExplanation, {
+                data: data
+            }), 
+            /* @__PURE__ */ jsx(TooltipNotes, {
+                data: data
+            }) ]
+        })
+    });
+}
+
+function GatedMarker({gated: gated, at: at, stroke: stroke}) {
+    return gated ? /* @__PURE__ */ jsx("div", {
+        style: {
+            position: "absolute",
+            transform: `translate(-50%, -50%) translate(${at.x}px, ${at.y}px)`,
+            pointerEvents: "none",
+            zIndex: 10
+        },
+        children: /* @__PURE__ */ jsx("div", {
+            style: {
+                width: LOCK_SIZE,
+                height: LOCK_SIZE,
+                borderRadius: 999,
+                background: "var(--ws-panel)",
+                border: `2px solid ${stroke}`,
+                boxShadow: "0 1px 2px color-mix(in srgb, var(--ws-ink) 12%, transparent)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "var(--ws-ink-2)",
+                fontSize: 12
+            },
+            children: /* @__PURE__ */ jsx(LockIcon, {})
+        })
+    }) : null;
+}
+
+function LineTooltip({at: at, data: data}) {
+    const devMode = useDevMode();
+    return at ? createPortal(
+    /* @__PURE__ */ jsx("div", {
+        style: {
+            position: "fixed",
+            left: at.x,
+            top: at.y - 12,
+            transform: "translate(-50%, -100%)",
+            pointerEvents: "none",
+            zIndex: 1e4
+        },
+        children: /* @__PURE__ */ jsx(Card, {
+            radius: 2,
+            shadow: 3,
+            style: {
+                overflow: "hidden"
+            },
+            children: transitionTooltip(data, devMode)
+        })
+    }), document.body) : null;
+}
+
+function fallbackMarker(triangle, markerEnd) {
+    return triangle || !markerEnd ? {} : {
+        markerEnd: markerEnd
+    };
+}
+
+function TransitionEdge({id: id, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, markerEnd: markerEnd, data: data}) {
+    const {path: path, markerX: markerX, markerY: markerY, triangle: triangle} = transitionPath(data.route, {
+        sourceX: sourceX,
+        sourceY: sourceY,
+        sourcePosition: sourcePosition,
+        targetX: targetX,
+        targetY: targetY,
+        targetPosition: targetPosition
+    }), [hoverAt, setHoverAt] = useState(void 0), stageHovered = useHoveredStage() === data.transition.from, {stroke: stroke, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray} = strokeFor(data, stageHovered || hoverAt !== void 0);
+    /* @__PURE__ */
+    return jsxs(Fragment$1, {
+        children: [ 
+        /* @__PURE__ */ jsx(BaseEdge, {
+            id: id,
+            path: path,
+            ...fallbackMarker(triangle, markerEnd),
+            style: {
+                stroke: stroke,
+                strokeWidth: strokeWidth,
+                fill: "none",
+                strokeDasharray: strokeDasharray
+            }
+        }), 
+        /* @__PURE__ */ jsx("path", {
+            d: path,
+            fill: "none",
+            stroke: "transparent",
+            strokeWidth: 16,
+            style: {
+                pointerEvents: "stroke",
+                cursor: "help"
+            },
+            onMouseEnter: e => setHoverAt({
+                x: e.clientX,
+                y: e.clientY
+            }),
+            onMouseLeave: () => setHoverAt(void 0)
+        }), triangle ? /* @__PURE__ */ jsx("polygon", {
+            points: triangle,
+            fill: stroke,
+            stroke: stroke,
+            strokeLinejoin: "round"
+        }) : null, 
+        /* @__PURE__ */ jsx(LineTooltip, {
+            at: hoverAt,
+            data: data
+        }), 
+        /* @__PURE__ */ jsx(EdgeLabelRenderer, {
+            children: /* @__PURE__ */ jsx(GatedMarker, {
+                gated: data.gated,
+                at: {
+                    x: markerX,
+                    y: markerY
+                },
+                stroke: stroke
+            })
+        }) ]
+    });
+}
+
+const nodeTypes = {
+    stage: StageNode,
+    ghost: GhostNode,
+    stageGroup: GroupNode
+}, edgeTypes = {
+    transition: TransitionEdge
+};
+
+function viewportProps(isStatic) {
+    return {
+        panOnDrag: !isStatic,
+        zoomOnPinch: !isStatic,
+        zoomOnDoubleClick: !isStatic,
+        preventScrolling: !isStatic,
+        minZoom: isStatic ? .05 : .3
+    };
+}
+
+const CANVAS_MARGIN = 24, CONTROLS_GUTTER = 44, CONTROLS_MIN_HEIGHT = 130;
+
+function fitRect(bounds, isStatic) {
+    const left = CANVAS_MARGIN + (isStatic ? 0 : CONTROLS_GUTTER);
+    return {
+        x: bounds.x - left,
+        y: bounds.y - CANVAS_MARGIN,
+        width: bounds.width + left + CANVAS_MARGIN,
+        height: bounds.height + CANVAS_MARGIN * 2
+    };
+}
+
+function hugStyle(bounds, opts) {
+    const {height: height, isStatic: isStatic} = opts;
+    if (!bounds) return {
+        height: height,
+        width: "100%"
+    };
+    const gutter = isStatic ? 0 : CONTROLS_GUTTER, hugWidth = Math.ceil(bounds.width) + CANVAS_MARGIN * 2 + gutter, contentHeight = Math.ceil(bounds.height) + CANVAS_MARGIN * 2, hugHeight = isStatic ? contentHeight : Math.max(contentHeight, CONTROLS_MIN_HEIGHT);
+    return {
+        height: typeof height == "number" ? Math.min(height, hugHeight) : height,
+        width: hugWidth,
+        maxWidth: "100%",
+        marginInline: "auto"
+    };
+}
+
+const WS_VARS = WS_CARD_TOKENS;
+
+function WorkflowDiagram({definition: definition, currentStage: currentStage, selectedStage: selectedStage, onSelectStage: onSelectStage, history: history, guardCount: guardCount, gatedTransitions: gatedTransitions, local: local, static: isStatic = !1, devMode: devMode, explain: explain, evaluation: evaluation, height: height = 360}) {
+    const {stages: stages, initialStage: initialStage} = definition, transitions = useMemo(() => flattenTransitions(stages), [ stages ]), hasLocal = local !== void 0, localShow = local?.show, localGroupEdges = local?.groupEdges ?? !1, [groupsExpanded, setGroupsExpanded] = useState(!1), groupEdges = localGroupEdges && !groupsExpanded, base = useMemo(() => buildGraphModel({
+        stages: stages,
+        transitions: transitions,
+        initialStage: initialStage,
+        currentStage: currentStage,
+        selectedStage: selectedStage,
+        history: history,
+        guardCount: guardCount,
+        gatedTransitions: gatedTransitions,
+        local: hasLocal ? {
+            show: localShow,
+            groupEdges: groupEdges
+        } : void 0
+    }), [ stages, transitions, initialStage, currentStage, selectedStage, history, guardCount, gatedTransitions, hasLocal, localShow, groupEdges ]), [laidOut, setLaidOut] = useState({
+        nodes: [],
+        edges: []
+    }), [layoutFailed, setLayoutFailed] = useState(!1), [explained, setExplained] = useState(void 0);
+    useEffect(() => {
+        if (setExplained(void 0), !explain) return;
+        let cancelled = !1;
+        return (async () => {
+            try {
+                const {describeDefinition: describeDefinition} = await import("@sanity/workflow-engine"), sites = await describeDefinition(definition);
+                cancelled || setExplained(indexExplanations(sites, definition));
+            } catch (err) {
+                cancelled || console.error("WorkflowDiagram: describeDefinition failed", err);
+            }
+        })(), () => {
+            cancelled = !0;
+        };
+    }, [ definition, explain ]);
+    const liveExplained = useMemo(() => explain && evaluation ? indexLiveExplanations(evaluation) : void 0, [ explain, evaluation ]), explainData = useMemo(() => mergeExplainData(liveExplained, explained), [ liveExplained, explained ]), flowRef = useRef(null), fittedRef = useRef(!1);
+    useEffect(() => {
+        let cancelled = !1;
+        return (async () => {
+            try {
+                const res = await layoutGraph(base.nodes, base.edges);
+                cancelled || (setLaidOut(res), setLayoutFailed(!1));
+            } catch (err) {
+                console.error("WorkflowDiagram: layout failed", err), cancelled || setLayoutFailed(!0);
+            }
+        })(), () => {
+            cancelled = !0;
+        };
+    }, [ base ]);
+    const bounds = useMemo(() => graphBounds(laidOut.nodes, laidOut.edges), [ laidOut ]), boundsRef = useRef(bounds);
+    boundsRef.current = bounds;
+    const staticRef = useRef(isStatic);
+    staticRef.current = isStatic;
+    const fitAll = useCallback(() => {
+        const b = boundsRef.current, flow = flowRef.current, el = cardRef.current;
+        if (!b || !flow || !el) return;
+        const rect = fitRect(b, staticRef.current);
+        flow.fitBounds(rect, {
+            duration: 0
+        }), flow.getViewport().zoom > 1 && flow.setViewport({
+            x: (el.clientWidth - rect.width) / 2 - rect.x,
+            y: (el.clientHeight - rect.height) / 2 - rect.y,
+            zoom: 1
+        });
+    }, []), prevStaticRef = useRef(isStatic);
+    useEffect(() => {
+        const staticChanged = prevStaticRef.current !== isStatic;
+        if (prevStaticRef.current = isStatic, laidOut.nodes.length === 0 || fittedRef.current && !isStatic && !staticChanged) return;
+        fittedRef.current = !0;
+        const handle = requestAnimationFrame(fitAll);
+        return () => cancelAnimationFrame(handle);
+    }, [ laidOut, isStatic, fitAll ]);
+    const cardRef = useRef(null), userMovedRef = useRef(!1);
+    useEffect(() => {
+        if (typeof ResizeObserver > "u") return;
+        const el = cardRef.current;
+        if (!el) return;
+        const observer = new ResizeObserver(() => {
+            (staticRef.current || !userMovedRef.current) && fitAll();
+        });
+        return observer.observe(el), () => observer.disconnect();
+    }, [ fitAll ]);
+    const onNodeClick = useCallback((_e, node) => {
+        if (node.type === "stageGroup") {
+            setGroupsExpanded(!0);
+            return;
+        }
+        onSelectStage?.(node.id);
+    }, [ onSelectStage ]), onPaneClick = useCallback(() => {
+        setGroupsExpanded(!1), onSelectStage?.(void 0);
+    }, [ onSelectStage ]), [hoveredStage, setHoveredStage] = useState(void 0), onNodeMouseEnter = useCallback((_e, node) => setHoveredStage(node.id), []), onNodeMouseLeave = useCallback(() => setHoveredStage(void 0), []), onMoveStart = useCallback(event => {
+        event && (userMovedRef.current = !0);
+    }, []);
+    return layoutFailed ? /* @__PURE__ */ jsx(Card, {
+        padding: 4,
+        tone: "critical",
+        border: !0,
+        radius: 2,
+        children: /* @__PURE__ */ jsx(Text, {
+            size: 1,
+            children: "Couldn’t lay out this workflow diagram — see the browser console for the underlying error."
+        })
+    }) : /* @__PURE__ */ jsx(Card, {
+        ref: cardRef,
+        style: {
+            ...hugStyle(bounds, {
+                height: height,
+                isStatic: isStatic
+            }),
+            ...WS_VARS,
+            background: "color-mix(in srgb, var(--ws-ink) 3%, var(--ws-panel))",
+            border: "1px solid var(--ws-border)",
+            borderRadius: 6,
+            overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx(DevModeContext.Provider, {
+            value: devMode ?? !1,
+            children: /* @__PURE__ */ jsx(ExplainContext.Provider, {
+                value: explainData,
+                children: /* @__PURE__ */ jsx(HoveredStageContext.Provider, {
+                    value: hoveredStage,
+                    children: /* @__PURE__ */ jsx(ReactFlowProvider, {
+                        children: /* @__PURE__ */ jsxs(ReactFlow, {
+                            nodes: laidOut.nodes,
+                            edges: laidOut.edges,
+                            nodeTypes: nodeTypes,
+                            edgeTypes: edgeTypes,
+                            onInit: instance => {
+                                flowRef.current = instance;
+                            },
+                            ...onSelectStage || localGroupEdges ? {
+                                onNodeClick: onNodeClick,
+                                onPaneClick: onPaneClick
+                            } : {},
+                            onNodeMouseEnter: onNodeMouseEnter,
+                            onNodeMouseLeave: onNodeMouseLeave,
+                            onMoveStart: onMoveStart,
+                            maxZoom: 1.5,
+                            nodesDraggable: !1,
+                            nodesConnectable: !1,
+                            elementsSelectable: !1,
+                            zoomOnScroll: !1,
+                            ...viewportProps(isStatic),
+                            proOptions: {
+                                hideAttribution: !0
+                            },
+                            children: [ 
+                            /* @__PURE__ */ jsx(Background, {
+                                variant: BackgroundVariant.Dots,
+                                gap: 20,
+                                size: 1.5,
+                                color: "color-mix(in srgb, var(--ws-ink) 18%, transparent)"
+                            }), isStatic ? null : /* @__PURE__ */ jsx(Controls, {
+                                showInteractive: !1
+                            }) ]
+                        })
+                    })
+                })
+            })
+        })
+    });
+}
+
+export { WS_CARD_TOKENS, WorkflowDiagram, flattenTransitions };