process-graph 1.0.5 → 1.1.0

package/dist/react-flow.d.ts

@@ -0,0 +1,173 @@
+import { F as Status } from "./index-CCfe0csl.js";
+import { G as IdSpace, O as Projection, g as Model, x as Element } from "./index-CmZOswkx.js";
+import { A as Flowchart, E as Swimlane, x as StateMachine } from "./index-CoA6vXqe.js";
+import { i as LayoutView, n as LayoutOptions, r as LayoutResult, s as Direction } from "./index-CrM5qWUA.js";
+import { A as ElementFilter, rt as Run, y as NamedElement } from "./index-DricKcyl.js";
+import { ReactElement } from "react";
+import { ColorMode, Edge, EdgeProps, Node, NodeProps } from "@xyflow/react";
+//#region ../../ui/graph/react-flow/dist/use-layout.d.ts
+/** Where laying out a view stands. */
+type LayoutState<I extends IdSpace> = {
+  readonly status: "pending";
+} | {
+  readonly status: "placed";
+  readonly result: LayoutResult<I>;
+} | {
+  readonly status: "failed";
+  readonly error: unknown;
+};
+/** The layout options a view is laid out with: everything `layout` takes but the signal, which the hook owns. */
+type FlowLayoutOptions = Omit<LayoutOptions, "signal">;
+/**
+ * Lays out a view with `graph-layout`'s `layout`, again whenever the view or the options change, aborting a layout that is no longer wanted.
+ * @param view - The flowchart, swimlane or state machine to place. Keep it stable between renders.
+ * @param options - Direction, spacing and the engine. Keep it stable between renders.
+ * @returns `pending` until the layout resolves, then `placed` with the positions, sizes and lanes, or `failed` with what the engine threw.
+ */
+export declare const useLayout: <I extends IdSpace>(view: LayoutView<I>, options: FlowLayoutOptions) => LayoutState<I>;
+//#endregion
+//#region ../../ui/graph/react-flow/dist/process-flow.d.ts
+/** A projection React Flow can draw: anything but a sequence diagram, which `SequenceDiagram` draws. */
+type FlowProjection<I extends IdSpace> = Exclude<Projection<I>, {
+  readonly notation: "sequence";
+}>;
+interface ProcessFlowProps<I extends IdSpace> {
+  /** The model, its overlay and facts. Keep each part stable between renders. */
+  readonly run: Run<I>;
+  /** The view to draw: a flowchart, a swimlane or a state machine. Keep it stable between renders. */
+  readonly projection: FlowProjection<I>;
+  /** The canvas's accessible name. */
+  readonly label: string;
+  /** Direction, spacing and the layout engine, passed to `graph-layout`. The engine defaults to elkjs; a test injects a stub. Keep it stable between renders. */
+  readonly layout?: FlowLayoutOptions | undefined;
+  /** Which elements to show. Defaults to all of them. */
+  readonly filter?: ElementFilter | undefined;
+  /** React Flow's own colour mode, for its controls and background. Pair it with the graph-ui theme around the view. */
+  readonly colorMode?: ColorMode | undefined;
+  /** Called with each element a click or key selects, and with `undefined` when the selection is cleared. */
+  readonly onSelect?: ((id: I["element"] | undefined) => void) | undefined;
+  /**
+   * The selected element, when the owner keeps the selection, as `useGraphSelection`'s option of the same name: give the key, even as `undefined`, and the canvas shows this selection and reports through `onSelect` what a click or key asks for, so the canvas and other views of the model share one selection. Leave it out for the canvas to keep its own.
+   */
+  readonly selected?: I["element"] | undefined;
+}
+/**
+ * A process view on a React Flow canvas: the projection laid out by `graph-layout`, each element as a styled card with its status and what blocks it, lanes as group nodes in a swimlane, and the critical path's elements and steps highlighted. Elements are selected by a click, or with the arrow, Home, End and Escape keys once the canvas has focus; the filter hides elements and the edges that touch them. Nothing is drawn until the layout resolves, and a layout that fails throws to the nearest error boundary.
+ * @param props - The run, the projection, a label, and optionally the layout, a filter, the colour mode and a selection listener.
+ * @returns The canvas, which fills its container.
+ */
+export declare const ProcessFlow: <I extends IdSpace>(props: ProcessFlowProps<I>) => ReactElement;
+//#endregion
+//#region ../../ui/graph/react-flow/dist/process-view.d.ts
+interface ProcessViewProps<I extends IdSpace> extends Omit<ProcessFlowProps<I>, "projection"> {
+  /** Any of the model's projections. */
+  readonly projection: Projection<I>;
+}
+/**
+ * Any projection of a model: a sequence projection as graph-ui's SVG sequence diagram, since React Flow has no lifeline layout, and every other as a `ProcessFlow` canvas.
+ * @param props - As for `ProcessFlow`, with any projection. A sequence diagram uses only the run's model and the label, as its caption.
+ * @returns The view.
+ */
+export declare const ProcessView: <I extends IdSpace>(props: ProcessViewProps<I>) => ReactElement;
+//#endregion
+//#region ../../ui/graph/react-flow/dist/flow.d.ts
+/** A view React Flow draws: a flowchart, a swimlane or a state machine, with its notation. */
+type FlowView<I extends IdSpace> = {
+  readonly notation: "flowchart";
+  readonly view: Flowchart<I>;
+} | {
+  readonly notation: "swimlane";
+  readonly view: Swimlane<I>;
+} | {
+  readonly notation: "stateMachine";
+  readonly view: StateMachine<I>;
+};
+/** What an element node shows. Node and edge data are `Readonly` mapped types rather than interfaces, because React Flow requires data assignable to `Record<string, unknown>`, which an interface is not. */
+type ElementNodeData<I extends IdSpace> = Readonly<{
+  element: Element<I["element"], I>;
+  status: Status;
+  critical: boolean;
+  /** The open work it waits on; absent when it is not blocked. */
+  blockedBy?: readonly NamedElement[];
+}>;
+/** An element of the view, drawn as a styled element card. */
+type ElementNode<I extends IdSpace> = Node<ElementNodeData<I>, "element">;
+/** What a lane node shows. */
+type LaneNodeData = Readonly<{
+  participant: string;
+  label: string;
+}>;
+/** A swimlane, drawn as a group node that holds the nodes of its participant's elements. */
+type LaneNode = Node<LaneNodeData, "lane">;
+/** A node of a process view. */
+type ProcessNode<I extends IdSpace> = ElementNode<I> | LaneNode;
+/** What a transition edge shows. */
+type TransitionEdgeData = Readonly<{
+  /** The model transitions the edge stands for. */
+  transitions: readonly string[];
+  label?: string;
+  /** Whether it passes work between actors; only a swimlane marks hand-offs. */
+  handoff: boolean;
+  /** Whether it joins two consecutive elements of the critical path. */
+  critical: boolean;
+}>;
+/** A transition of the view, drawn as a labelled edge. */
+type TransitionEdge = Edge<TransitionEdgeData, "transition">;
+/** What a view is drawn from besides its projection and its layout: the run's state. */
+interface FlowRun<I extends IdSpace> {
+  readonly model: Model<I>;
+  readonly statuses: ReadonlyMap<I["element"], Status>;
+  /** The critical path, in dependency order. */
+  readonly criticalPath: readonly I["element"][];
+  /** Each blocked element's blockers, from `useBlockers`. */
+  readonly blockers: ReadonlyMap<I["element"], readonly I["element"][]>;
+  /** The elements to show; the others are hidden, and so is every edge with a hidden end. */
+  readonly shown: ReadonlySet<I["element"]>;
+  /** The direction the view was laid out in, which decides the side each edge leaves and enters a node. */
+  readonly direction: Direction;
+}
+/**
+ * The React Flow nodes and edges of a laid-out view: a node per element at its laid-out position and size, a group node per swimlane lane holding its participant's elements, and an edge per drawn edge or transition. Each element node carries its status, whether it is on the critical path and what it is blocked by; each edge whether it is a hand-off and whether it is on the critical path. Group nodes come before the nodes they hold, as React Flow requires.
+ * @param flow - The projected view.
+ * @param placement - The view's layout.
+ * @param run - The run's state and the elements to show.
+ * @returns The nodes and edges.
+ * @throws Error when the layout lacks a position, size or lane the view needs.
+ */
+export declare const toFlow: <I extends IdSpace>(flow: FlowView<I>, placement: LayoutResult<I>, run: FlowRun<I>) => {
+  readonly nodes: ProcessNode<I>[];
+  readonly edges: TransitionEdge[];
+};
+//#endregion
+//#region ../../ui/graph/react-flow/dist/nodes.d.ts
+/**
+ * An element of a process view: graph-ui's element card, with the handles React Flow routes edges to.
+ * @param props - The node React Flow renders, with the element's data.
+ * @returns The node's content.
+ */
+export declare const ElementNodeView: (props: NodeProps<ElementNode<IdSpace>>) => ReactElement;
+/**
+ * A swimlane: graph-ui's lane, filling the group node that holds its participant's elements.
+ * @param props - The node React Flow renders, with the lane's data.
+ * @returns The node's content.
+ */
+export declare const LaneNodeView: (props: NodeProps<LaneNode>) => ReactElement;
+/** The node components, by node type. Defined once, outside any component, as React Flow requires. */
+export declare const nodeTypes: {
+  element: (props: NodeProps<ElementNode<IdSpace>>) => ReactElement;
+  lane: (props: NodeProps<LaneNode>) => ReactElement;
+};
+//#endregion
+//#region ../../ui/graph/react-flow/dist/edges.d.ts
+/**
+ * A transition: a stepped line with an arrowhead and its label, coloured as a hand-off or a step of the critical path. Its group carries `data-transitions` with the model transitions it stands for, and `data-handoff` and `data-critical` as they apply.
+ * @param props - The edge React Flow renders, with the transition's data.
+ * @returns The edge's SVG.
+ */
+export declare const TransitionEdgeView: (props: EdgeProps<TransitionEdge>) => ReactElement;
+/** The edge components, by edge type. Defined once, outside any component, as React Flow requires. */
+export declare const edgeTypes: {
+  transition: (props: EdgeProps<TransitionEdge>) => ReactElement;
+};
+//#endregion
+export type { ElementNode, ElementNodeData, FlowLayoutOptions, FlowProjection, FlowRun, FlowView, LaneNode, LaneNodeData, LayoutState, ProcessFlowProps, ProcessNode, ProcessViewProps, TransitionEdge, TransitionEdgeData };

package/dist/react-flow.js

@@ -0,0 +1,450 @@
+import { _ as toSwimlane, g as toStateMachine, m as toSequence, y as toFlowchart } from "./queries-CCexJAE2.js";
+import { t as layout } from "./layout-CCM-KBdp.js";
+import { d as useBlockers, f as useCriticalPath, h as useStatuses, i as filterElements, r as emptyFilter, t as useGraphSelection } from "./selection-BW_xXWOy.js";
+import { c as elementLabel } from "./detail-panel-B1ZmMuJT.js";
+import { a as Lane, n as ElementCard, s as SequenceDiagram } from "./dist-BpCBmnMl.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BaseEdge, Handle, MarkerType, Position, ReactFlow, getSmoothStepPath } from "@xyflow/react";
+//#region ../../ui/graph/react-flow/dist/index.js
+var elementNode = "_15mv3qb0";
+var laneNode = "_15mv3qb1";
+var handle = "_15mv3qb2";
+var transitionEdge = "_15mv3qb3";
+var handoffEdge = "_15mv3qb4";
+var criticalEdge = "_15mv3qb5";
+/**
+* A transition: a stepped line with an arrowhead and its label, coloured as a hand-off or a step of the critical path. Its group carries `data-transitions` with the model transitions it stands for, and `data-handoff` and `data-critical` as they apply.
+* @param props - The edge React Flow renders, with the transition's data.
+* @returns The edge's SVG.
+*/
+var TransitionEdgeView = (props) => {
+	const { id, data, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd } = props;
+	const [path, labelX, labelY] = getSmoothStepPath({
+		sourceX,
+		sourceY,
+		targetX,
+		targetY,
+		sourcePosition,
+		targetPosition
+	});
+	const classes = [
+		transitionEdge,
+		data?.handoff === true ? handoffEdge : void 0,
+		data?.critical === true ? criticalEdge : void 0
+	].filter((name) => name !== void 0);
+	return /* @__PURE__ */ jsx("g", {
+		className: classes.join(" "),
+		"data-transitions": data?.transitions.join(" "),
+		"data-handoff": data?.handoff === true ? "" : void 0,
+		"data-critical": data?.critical === true ? "" : void 0,
+		children: /* @__PURE__ */ jsx(BaseEdge, {
+			id,
+			path,
+			...markerEnd === void 0 ? {} : { markerEnd },
+			label: data?.label,
+			labelX,
+			labelY
+		})
+	});
+};
+/** The edge components, by edge type. Defined once, outside any component, as React Flow requires. */
+var edgeTypes = { transition: TransitionEdgeView };
+/** The side an edge enters a node, and the side it leaves, for each layout direction. */
+var sides = {
+	right: {
+		target: Position.Left,
+		source: Position.Right
+	},
+	down: {
+		target: Position.Top,
+		source: Position.Bottom
+	},
+	left: {
+		target: Position.Right,
+		source: Position.Left
+	},
+	up: {
+		target: Position.Bottom,
+		source: Position.Top
+	}
+};
+/** The middle of each side of a box, relative to the box. */
+var anchors = {
+	[Position.Left]: (size) => ({
+		x: 0,
+		y: size.height / 2
+	}),
+	[Position.Right]: (size) => ({
+		x: size.width,
+		y: size.height / 2
+	}),
+	[Position.Top]: (size) => ({
+		x: size.width / 2,
+		y: 0
+	}),
+	[Position.Bottom]: (size) => ({
+		x: size.width / 2,
+		y: size.height
+	})
+};
+/** A node's handles, given up front so React Flow can route edges without measuring the node first. */
+var handlesOf = (direction, size) => {
+	const { target, source } = sides[direction];
+	return [{
+		type: "target",
+		position: target,
+		...anchors[target](size)
+	}, {
+		type: "source",
+		position: source,
+		...anchors[source](size)
+	}];
+};
+var laneId = (participant) => `lane:${participant}`;
+var required = (value, what) => {
+	if (value === void 0) throw new Error(`The layout has no ${what}`);
+	return value;
+};
+/** The label of a state machine transition in the notation's form: `event [guard] / effect`. */
+var transitionLabel = (model, transition) => {
+	const event = model.events.find((candidate) => candidate.id === transition.event);
+	const effect = model.actions.find((candidate) => candidate.id === transition.effect);
+	const label = [
+		event?.name,
+		transition.guard === void 0 ? void 0 : `[${transition.guard}]`,
+		effect === void 0 ? void 0 : `/ ${effect.name}`
+	].filter((part) => part !== void 0).join(" ");
+	return label === "" ? void 0 : label;
+};
+/**
+* The React Flow nodes and edges of a laid-out view: a node per element at its laid-out position and size, a group node per swimlane lane holding its participant's elements, and an edge per drawn edge or transition. Each element node carries its status, whether it is on the critical path and what it is blocked by; each edge whether it is a hand-off and whether it is on the critical path. Group nodes come before the nodes they hold, as React Flow requires.
+* @param flow - The projected view.
+* @param placement - The view's layout.
+* @param run - The run's state and the elements to show.
+* @returns The nodes and edges.
+* @throws Error when the layout lacks a position, size or lane the view needs.
+*/
+var toFlow = (flow, placement, run) => {
+	const { model, statuses, criticalPath, blockers, shown, direction } = run;
+	const positions = required(placement.views[flow.notation], "positions");
+	const elements = new Map(model.elements.map((element) => [element.id, element]));
+	const step = new Map(criticalPath.map((id, index) => [id, index]));
+	const sideOf = sides[direction];
+	const laneOf = /* @__PURE__ */ new Map();
+	const lanes = [];
+	if (flow.notation === "swimlane") flow.view.lanes.forEach((lane, index) => {
+		const bounds = required(placement.lanes[index], `lane for ${lane.participant}`);
+		for (const node of lane.nodes) laneOf.set(node, bounds);
+		lanes.push({
+			id: laneId(lane.participant),
+			type: "lane",
+			position: {
+				x: bounds.x,
+				y: bounds.y
+			},
+			width: bounds.width,
+			height: bounds.height,
+			selectable: false,
+			focusable: false,
+			draggable: false,
+			data: {
+				participant: lane.participant,
+				label: lane.label
+			}
+		});
+	});
+	const ids = flow.notation === "stateMachine" ? flow.view.states.map((state) => state.id) : flow.view.nodes.map((node) => node.id);
+	const labelOf = (id) => elementLabel(required(elements.get(id), `element ${id} in the model`));
+	const elementNodes = ids.map((id) => {
+		const element = required(elements.get(id), `element ${id} in the model`);
+		const status = required(statuses.get(id), `status for ${id}`);
+		const size = required(placement.sizes[id], `size for ${id}`);
+		const at = required(positions[id], `position for ${id}`);
+		const lane = laneOf.get(id);
+		const blockedBy = blockers.get(id);
+		return {
+			id,
+			type: "element",
+			position: lane === void 0 ? at : {
+				x: at.x - lane.x,
+				y: at.y - lane.y
+			},
+			...lane === void 0 ? {} : {
+				parentId: laneId(lane.participant),
+				extent: "parent"
+			},
+			width: size.width,
+			height: size.height,
+			handles: handlesOf(direction, size),
+			sourcePosition: sideOf.source,
+			targetPosition: sideOf.target,
+			hidden: !shown.has(id),
+			draggable: false,
+			ariaLabel: `${elementLabel(element)}, ${status}`,
+			data: {
+				element,
+				status,
+				critical: step.has(id),
+				...blockedBy === void 0 ? {} : { blockedBy: blockedBy.map((blocker) => ({
+					id: blocker,
+					label: labelOf(blocker)
+				})) }
+			}
+		};
+	});
+	const handoffs = new Set(flow.notation === "swimlane" ? flow.view.handoffs.map((handoff) => handoff.transition) : []);
+	const onCriticalPath = (from, to) => {
+		const at = step.get(from);
+		return at !== void 0 && step.get(to) === at + 1;
+	};
+	const edges = (flow.notation === "stateMachine" ? flow.view.transitions.map((transition) => ({
+		from: transition.source,
+		to: transition.target,
+		transitions: transition.transitions,
+		label: transitionLabel(model, transition)
+	})) : flow.view.edges.map((edge) => ({
+		from: edge.from,
+		to: edge.to,
+		transitions: edge.transitions,
+		label: edge.label
+	}))).map((edge) => {
+		const critical = onCriticalPath(edge.from, edge.to);
+		const handoff = edge.transitions.some((id) => handoffs.has(id));
+		return {
+			id: `transition:${edge.transitions.join(",")}`,
+			type: "transition",
+			source: edge.from,
+			target: edge.to,
+			hidden: !shown.has(edge.from) || !shown.has(edge.to),
+			markerEnd: { type: MarkerType.ArrowClosed },
+			data: {
+				transitions: edge.transitions,
+				...edge.label === void 0 ? {} : { label: edge.label },
+				handoff,
+				critical
+			}
+		};
+	});
+	return {
+		nodes: [...lanes, ...elementNodes],
+		edges
+	};
+};
+/**
+* An element of a process view: graph-ui's element card, with the handles React Flow routes edges to.
+* @param props - The node React Flow renders, with the element's data.
+* @returns The node's content.
+*/
+var ElementNodeView = (props) => {
+	const { data, sourcePosition, targetPosition, selected } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: elementNode,
+		"data-selected": selected ? "" : void 0,
+		children: [
+			targetPosition === void 0 ? null : /* @__PURE__ */ jsx(Handle, {
+				type: "target",
+				position: targetPosition,
+				isConnectable: false,
+				className: handle
+			}),
+			/* @__PURE__ */ jsx(ElementCard, {
+				element: data.element,
+				status: data.status,
+				critical: data.critical,
+				blockedBy: data.blockedBy
+			}),
+			sourcePosition === void 0 ? null : /* @__PURE__ */ jsx(Handle, {
+				type: "source",
+				position: sourcePosition,
+				isConnectable: false,
+				className: handle
+			})
+		]
+	});
+};
+/**
+* A swimlane: graph-ui's lane, filling the group node that holds its participant's elements.
+* @param props - The node React Flow renders, with the lane's data.
+* @returns The node's content.
+*/
+var LaneNodeView = (props) => {
+	const { data } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: laneNode,
+		children: /* @__PURE__ */ jsx(Lane, {
+			participant: data.participant,
+			label: data.label
+		})
+	});
+};
+/** The node components, by node type. Defined once, outside any component, as React Flow requires. */
+var nodeTypes = {
+	element: ElementNodeView,
+	lane: LaneNodeView
+};
+var pending = { status: "pending" };
+/**
+* Lays out a view with `graph-layout`'s `layout`, again whenever the view or the options change, aborting a layout that is no longer wanted.
+* @param view - The flowchart, swimlane or state machine to place. Keep it stable between renders.
+* @param options - Direction, spacing and the engine. Keep it stable between renders.
+* @returns `pending` until the layout resolves, then `placed` with the positions, sizes and lanes, or `failed` with what the engine threw.
+*/
+var useLayout = (view, options) => {
+	const [state, setState] = useState({
+		view,
+		options,
+		value: pending
+	});
+	useEffect(() => {
+		const controller = new AbortController();
+		const settle = (value) => {
+			setState({
+				view,
+				options,
+				value
+			});
+		};
+		layout(view, {
+			...options,
+			signal: controller.signal
+		}).then((result) => {
+			settle({
+				status: "placed",
+				result
+			});
+		}, (error) => {
+			if (!controller.signal.aborted) settle({
+				status: "failed",
+				error
+			});
+		});
+		return () => {
+			controller.abort();
+		};
+	}, [view, options]);
+	return state.view === view && state.options === options ? state.value : pending;
+};
+/** The direction a view is laid out in when its options name none: edges point right, as `graph-layout`'s own default. */
+var defaultDirection = "right";
+var projectFlow = (run, projection) => {
+	if (projection.notation === "stateMachine") return {
+		notation: "stateMachine",
+		view: toStateMachine(run.model, projection.subject)
+	};
+	return projection.notation === "swimlane" ? {
+		notation: "swimlane",
+		view: toSwimlane(run.model)
+	} : {
+		notation: "flowchart",
+		view: toFlowchart(run.model)
+	};
+};
+/**
+* A process view on a React Flow canvas: the projection laid out by `graph-layout`, each element as a styled card with its status and what blocks it, lanes as group nodes in a swimlane, and the critical path's elements and steps highlighted. Elements are selected by a click, or with the arrow, Home, End and Escape keys once the canvas has focus; the filter hides elements and the edges that touch them. Nothing is drawn until the layout resolves, and a layout that fails throws to the nearest error boundary.
+* @param props - The run, the projection, a label, and optionally the layout, a filter, the colour mode and a selection listener.
+* @returns The canvas, which fills its container.
+*/
+var ProcessFlow = (props) => {
+	const { run, projection, label, layout, filter = emptyFilter, colorMode, onSelect } = props;
+	const direction = layout?.direction ?? defaultDirection;
+	const options = useMemo(() => ({
+		...layout,
+		direction
+	}), [layout, direction]);
+	const flow = useMemo(() => projectFlow(run, projection), [run, projection]);
+	const placement = useLayout(flow.view, options);
+	const statuses = useStatuses(run);
+	const blockers = useBlockers(run);
+	const { path } = useCriticalPath(run);
+	const shown = useMemo(() => filterElements(run.model, statuses, filter), [
+		run.model,
+		statuses,
+		filter
+	]);
+	const canvas = useRef(null);
+	const focus = useCallback((id) => {
+		const node = canvas.current?.querySelector(`.react-flow__node[data-id="${CSS.escape(id)}"]`);
+		if (node instanceof HTMLElement) node.focus();
+	}, []);
+	const { selected, select, containerProps } = useGraphSelection(shown, {
+		onChange: onSelect,
+		focus,
+		..."selected" in props ? { selected: props.selected } : {}
+	});
+	const drawn = useMemo(() => {
+		if (placement.status !== "placed") return;
+		return toFlow(flow, placement.result, {
+			model: run.model,
+			statuses,
+			criticalPath: path,
+			blockers,
+			shown: new Set(shown),
+			direction
+		});
+	}, [
+		flow,
+		placement,
+		run.model,
+		statuses,
+		path,
+		blockers,
+		shown,
+		direction
+	]);
+	if (placement.status === "failed") throw new Error(`${label} could not be laid out`, { cause: placement.error });
+	if (drawn === void 0) return /* @__PURE__ */ jsxs("p", {
+		role: "status",
+		children: ["Laying out ", label]
+	});
+	return /* @__PURE__ */ jsx(ReactFlow, {
+		ref: canvas,
+		"aria-label": label,
+		nodes: drawn.nodes.map((node) => node.id === selected ? {
+			...node,
+			selected: true
+		} : node),
+		edges: drawn.edges,
+		nodeTypes,
+		edgeTypes,
+		...colorMode === void 0 ? {} : { colorMode },
+		nodesDraggable: false,
+		nodesConnectable: false,
+		fitView: true,
+		onKeyDown: containerProps.onKeyDown,
+		onNodeClick: (_event, node) => {
+			if (node.type === "element") select(node.id);
+		},
+		onPaneClick: () => {
+			select(void 0);
+		}
+	});
+};
+var SequenceView = (props) => {
+	const { run, projection, label } = props;
+	const diagram = useMemo(() => toSequence(run.model, projection.scenario), [run.model, projection]);
+	const participants = useMemo(() => new Map(run.model.participants.map((participant) => [participant.id, participant.label])), [run.model]);
+	return /* @__PURE__ */ jsx(SequenceDiagram, {
+		diagram,
+		title: label,
+		labelOf: (actor) => participants.get(actor) ?? actor
+	});
+};
+/**
+* Any projection of a model: a sequence projection as graph-ui's SVG sequence diagram, since React Flow has no lifeline layout, and every other as a `ProcessFlow` canvas.
+* @param props - As for `ProcessFlow`, with any projection. A sequence diagram uses only the run's model and the label, as its caption.
+* @returns The view.
+*/
+var ProcessView = (props) => {
+	const { projection, run, label } = props;
+	return projection.notation === "sequence" ? /* @__PURE__ */ jsx(SequenceView, {
+		run,
+		projection,
+		label
+	}) : /* @__PURE__ */ jsx(ProcessFlow, {
+		...props,
+		projection
+	});
+};
+//#endregion
+export { ElementNodeView, LaneNodeView, ProcessFlow, ProcessView, TransitionEdgeView, edgeTypes, nodeTypes, toFlow, useLayout };

package/dist/react.d.ts

@@ -0,0 +1,2 @@
+import { $ as useWhyStatus, A as ElementFilter, B as useElementFilter, C as ruleDescriptions, D as SelectionContainerProps, E as GraphSelectionOptions, F as emptyFilter, G as BlockedChain, H as ViewsByNotation, I as filterElements, J as useBlockers, K as stepWeight, L as filterOptions, M as FilterOption, N as FilterOptions, O as SelectionItemProps, P as actorsOf, Q as useStatuses, R as matchesFilter, S as elementLabel, T as GraphSelection, U as project, V as ProjectedView, W as useProjection, X as useImpact, Y as useCriticalPath, Z as useReadySet, _ as ElementCardPart, a as FilterPanelPart, b as StatusBadge, c as LegendPart, d as LanePart, et as ModelClient, f as LaneProps, g as ElementCard, h as TransitionItemProps, i as FilterPanel, it as noFacts, j as ElementFilterState, k as useGraphSelection, l as LegendProps, m as TransitionItemPart, n as DetailPanelPart, nt as useModel, o as FilterPanelProps, p as TransitionItem, q as useBlockedChain, r as DetailPanelProps, rt as Run, s as Legend, t as DetailPanel, tt as ModelState, u as Lane, v as ElementCardProps, w as statusLabels, x as StatusBadgeProps, y as NamedElement, z as sourceScope } from "./index-DricKcyl.js";
+export { type BlockedChain, DetailPanel, type DetailPanelPart, type DetailPanelProps, ElementCard, type ElementCardPart, type ElementCardProps, type ElementFilter, type ElementFilterState, type FilterOption, type FilterOptions, FilterPanel, type FilterPanelPart, type FilterPanelProps, type GraphSelection, type GraphSelectionOptions, Lane, type LanePart, type LaneProps, Legend, type LegendPart, type LegendProps, type ModelClient, type ModelState, type NamedElement, type ProjectedView, type Run, type SelectionContainerProps, type SelectionItemProps, StatusBadge, type StatusBadgeProps, TransitionItem, type TransitionItemPart, type TransitionItemProps, type ViewsByNotation, actorsOf, elementLabel, emptyFilter, filterElements, filterOptions, matchesFilter, noFacts, project, ruleDescriptions, sourceScope, statusLabels, stepWeight, useBlockedChain, useBlockers, useCriticalPath, useElementFilter, useGraphSelection, useImpact, useModel, useProjection, useReadySet, useStatuses, useWhyStatus };