process-graph 1.0.6 → 1.1.1

package/dist/dist-BpCBmnMl.js

@@ -0,0 +1,582 @@
+import { a as TransitionItem$1, i as Lane$1, n as FilterPanel$1, o as ElementCard$1, r as Legend$1, s as StatusBadge$1, t as DetailPanel$1 } from "./detail-panel-B1ZmMuJT.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region ../../ui/graph/ui/dist/index.js
+var vars = {
+	colour: {
+		background: "var(--_1pqhw580)",
+		surface: "var(--_1pqhw581)",
+		text: "var(--_1pqhw582)",
+		muted: "var(--_1pqhw583)",
+		border: "var(--_1pqhw584)",
+		accent: "var(--_1pqhw585)",
+		focus: "var(--_1pqhw586)",
+		critical: "var(--_1pqhw587)",
+		handoff: "var(--_1pqhw588)",
+		status: {
+			done: "var(--_1pqhw589)",
+			ready: "var(--_1pqhw58a)",
+			blocked: "var(--_1pqhw58b)",
+			skipped: "var(--_1pqhw58c)",
+			unknown: "var(--_1pqhw58d)"
+		}
+	},
+	space: {
+		small: "var(--_1pqhw58e)",
+		medium: "var(--_1pqhw58f)",
+		large: "var(--_1pqhw58g)"
+	},
+	radius: {
+		small: "var(--_1pqhw58h)",
+		medium: "var(--_1pqhw58i)"
+	},
+	font: {
+		body: "var(--_1pqhw58j)",
+		mono: "var(--_1pqhw58k)",
+		sizeSmall: "var(--_1pqhw58l)",
+		sizeBody: "var(--_1pqhw58m)",
+		sizeHeading: "var(--_1pqhw58n)",
+		weightStrong: "var(--_1pqhw58o)"
+	},
+	stroke: {
+		thin: "var(--_1pqhw58p)",
+		thick: "var(--_1pqhw58q)"
+	}
+};
+var lightTheme = "_1pqhw58r";
+var darkTheme = "_1pqhw58s";
+/** What both themes share: everything but colour. */
+var shared = {
+	space: {
+		small: "0.25rem",
+		medium: "0.5rem",
+		large: "1rem"
+	},
+	radius: {
+		small: "0.25rem",
+		medium: "0.5rem"
+	},
+	font: {
+		body: "system-ui, -apple-system, \"Segoe UI\", sans-serif",
+		mono: "ui-monospace, \"SFMono-Regular\", Menlo, monospace",
+		sizeSmall: "0.75rem",
+		sizeBody: "0.875rem",
+		sizeHeading: "1rem",
+		weightStrong: "600"
+	},
+	stroke: {
+		thin: "1px",
+		thick: "3px"
+	}
+};
+/** The light theme's values. Each status colour reads as text on both `surface` and `background`. */
+var lightValues = {
+	...shared,
+	colour: {
+		background: "#ffffff",
+		surface: "#f6f8fa",
+		text: "#1f2328",
+		muted: "#59636e",
+		border: "#d1d9e0",
+		accent: "#0969da",
+		focus: "#0969da",
+		critical: "#9a6700",
+		handoff: "#6639ba",
+		status: {
+			done: "#1a7f37",
+			ready: "#0550ae",
+			blocked: "#cf222e",
+			skipped: "#59636e",
+			unknown: "#6639ba"
+		}
+	}
+};
+/** The dark theme's values. Each status colour reads as text on both `surface` and `background`. */
+var darkValues = {
+	...shared,
+	colour: {
+		background: "#0d1117",
+		surface: "#161b22",
+		text: "#e6edf3",
+		muted: "#9198a1",
+		border: "#3d444d",
+		accent: "#4493f8",
+		focus: "#4493f8",
+		critical: "#d29922",
+		handoff: "#ab7df8",
+		status: {
+			done: "#3fb950",
+			ready: "#58a6ff",
+			blocked: "#f85149",
+			skipped: "#9198a1",
+			unknown: "#ab7df8"
+		}
+	}
+};
+var surfaceRoot = "xk03iz0";
+var visuallyHidden = "xk03iz1";
+var focusRing = "xk03iz2";
+var badge = createRuntimeFn({
+	defaultClassName: "_1qote9c0",
+	variantClassNames: { status: {
+		done: "_1qote9c1",
+		ready: "_1qote9c2",
+		blocked: "_1qote9c3",
+		skipped: "_1qote9c4",
+		unknown: "_1qote9c5"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
+var card = createRuntimeFn({
+	defaultClassName: "_1qote9c6 xk03iz2",
+	variantClassNames: {
+		status: {
+			done: "_1qote9c7",
+			ready: "_1qote9c8",
+			blocked: "_1qote9c9",
+			skipped: "_1qote9ca",
+			unknown: "_1qote9cb"
+		},
+		kind: {
+			activity: "_1qote9cc",
+			state: "_1qote9cd",
+			decision: "_1qote9ce",
+			pseudo: "_1qote9cf",
+			message: "_1qote9cg"
+		},
+		critical: {
+			true: "_1qote9ch",
+			false: "_1qote9ci"
+		}
+	},
+	defaultVariants: {},
+	compoundVariants: []
+});
+var cardLabel = "_1qote9cj";
+var criticalMarker = "_1qote9ck";
+var blockersNote = "_1qote9cl";
+var transition = "_1qote9cm";
+var transitionEnd = "_1qote9cn";
+var lane = "_1qote9co";
+var laneHeading = "_1qote9cp";
+var laneBody = "_1qote9cq";
+var legend = "_1qote9cr";
+var legendItem = "_1qote9cs";
+var swatch = "_1qote9ct";
+var filterPanel = "_1qote9cu";
+var filterGroup = "_1qote9cv";
+var filterLegend = "_1qote9cw";
+var filterOption = "_1qote9cx";
+var checkbox = "_1qote9cy xk03iz2";
+var button = "_1qote9cz xk03iz2";
+var detailPanel = "_1qote9c10";
+var detailHeading = "_1qote9c11";
+var detailReason = "_1qote9c12";
+var detailSectionHeading = "_1qote9c13";
+var detailList = "_1qote9c14";
+/** The class that assigns each shipped theme. */
+var themes = {
+	light: lightTheme,
+	dark: darkTheme
+};
+/**
+* Applies a theme to everything inside it: assigns the theme contract's values and sets the page colours and type the components inherit. A consumer with its own theme puts its own `createTheme` class and `surfaceRoot` on an element instead.
+* @param props - The theme and its content.
+* @returns A `div` carrying the theme class and `data-theme`.
+*/
+var GraphTheme = (props) => {
+	const { theme, children } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: `${themes[theme]} ${surfaceRoot}`,
+		"data-theme": theme,
+		children
+	});
+};
+/**
+* A status badge in the status's colour.
+* @param props - The status.
+* @returns The badge.
+*/
+var StatusBadge = (props) => {
+	const { status } = props;
+	return /* @__PURE__ */ jsx(StatusBadge$1, {
+		status,
+		className: badge({ status })
+	});
+};
+/**
+* An element card with its status colour, its kind's shape, the critical path ring and the selection outline.
+* @param props - As for the headless `ElementCard`, without class names.
+* @returns The card.
+*/
+var ElementCard = (props) => {
+	const { element, status, critical = false } = props;
+	return /* @__PURE__ */ jsx(ElementCard$1, {
+		...props,
+		classNames: {
+			root: card({
+				status,
+				kind: element.kind,
+				critical
+			}),
+			label: cardLabel,
+			status: badge({ status }),
+			critical: criticalMarker,
+			blockers: blockersNote
+		}
+	});
+};
+/**
+* A transition, coloured as a hand-off or on the critical path.
+* @param props - As for the headless `TransitionItem`, without class names.
+* @returns An `li`.
+*/
+var TransitionItem = (props) => /* @__PURE__ */ jsx(TransitionItem$1, {
+	...props,
+	classNames: {
+		root: transition,
+		from: transitionEnd,
+		to: transitionEnd
+	}
+});
+/**
+* A bordered swimlane with a small heading.
+* @param props - As for the headless `Lane`, without class names.
+* @returns The lane.
+*/
+var Lane = (props) => /* @__PURE__ */ jsx(Lane$1, {
+	...props,
+	classNames: {
+		root: lane,
+		heading: laneHeading,
+		body: laneBody
+	}
+});
+/**
+* A legend with a coloured swatch per status.
+* @param props - As for the headless `Legend`, without class names.
+* @returns The legend.
+*/
+var Legend = (props) => /* @__PURE__ */ jsx(Legend$1, {
+	...props,
+	classNames: {
+		root: legend,
+		item: legendItem,
+		swatch
+	}
+});
+/**
+* A filter panel of bordered checkbox groups.
+* @param props - As for the headless `FilterPanel`, without class names.
+* @returns The form.
+*/
+var FilterPanel = (props) => /* @__PURE__ */ jsx(FilterPanel$1, {
+	...props,
+	classNames: {
+		root: filterPanel,
+		group: filterGroup,
+		legend: filterLegend,
+		option: filterOption,
+		checkbox,
+		clear: button
+	}
+});
+/**
+* A detail panel on a raised surface.
+* @param props - As for the headless `DetailPanel`, without class names.
+* @returns The panel.
+*/
+var DetailPanel = (props) => {
+	const { explanation } = props;
+	return /* @__PURE__ */ jsx(DetailPanel$1, {
+		...props,
+		classNames: {
+			root: detailPanel,
+			heading: detailHeading,
+			status: badge({ status: explanation.status }),
+			reason: detailReason,
+			sectionHeading: detailSectionHeading,
+			list: detailList
+		}
+	});
+};
+var sequenceFigure = "_1y9ef240";
+var sequenceCaption = "_1y9ef241";
+var sequenceSvg = "_1y9ef242";
+var lifelineHead = "_1y9ef243";
+var lifelineLine = "_1y9ef244";
+var diagramText = "_1y9ef245";
+var messageLabel = "_1y9ef246";
+var messageLine = "_1y9ef247";
+var arrowFilled = "_1y9ef248";
+var arrowOpen = "_1y9ef249";
+var fragmentFrame = "_1y9ef24a";
+var fragmentDivider = "_1y9ef24b";
+var fragmentTag = "_1y9ef24c";
+/** The unit every dimension below is a multiple of: the same grid `graph-layout` places nodes on, so a sequence diagram and a laid-out view share a scale. One unit is also the gap between a label and its arrow, the inset of each level of fragment nesting, and the size of an arrowhead. */
+var GRID = 8;
+/** Each dimension of the drawing, in grid units. */
+var units = {
+	/** The space around the drawing. */
+	margin: 2,
+	/** A lifeline's head: wide enough for a participant's name on one line. */
+	headWidth: 16,
+	headHeight: 5,
+	/** The distance between neighbouring lifelines: a head's width plus room for a message label between them. */
+	lifelineGap: 20,
+	/** One message, or a fragment's heading, per row: room for a label above the arrow. */
+	row: 6,
+	/** A self-message's loop: how far it reaches to the right of its lifeline, and how far it drops before returning. */
+	selfReach: 4,
+	selfDrop: 2,
+	/** A fragment's operator tag. */
+	tagWidth: 6,
+	tagHeight: 3
+};
+var MARGIN = units.margin * GRID;
+var HEAD_WIDTH = units.headWidth * GRID;
+var HEAD_HEIGHT = units.headHeight * GRID;
+var LIFELINE_GRID = units.lifelineGap * GRID;
+var ROW = units.row * GRID;
+var SELF_REACH = units.selfReach * GRID;
+var SELF_DROP = units.selfDrop * GRID;
+var TAG_WIDTH = units.tagWidth * GRID;
+var TAG_HEIGHT = units.tagHeight * GRID;
+/** A text baseline sits this far below the middle of the box it is centred in, so the glyphs look centred. */
+var BASELINE_DROP = GRID / 2;
+/**
+* Gives each message a row and each fragment the rows it spans. A fragment takes a row of its own for its tag and first guard, and another for each later operand's guard, so no label overlaps an arrow.
+*/
+var place = (items) => {
+	const messages = [];
+	const fragments = [];
+	let row = 0;
+	const walk = (level, depth) => {
+		for (const item of level) {
+			if (item.kind === "message") {
+				row += 1;
+				messages.push({
+					message: item.message,
+					y: row * ROW
+				});
+				continue;
+			}
+			const top = row * ROW + ROW / 2;
+			const operands = [];
+			for (const operand of item.operands) {
+				row += 1;
+				operands.push({
+					...operand.guard === void 0 ? {} : { guard: operand.guard },
+					y: row * ROW
+				});
+				walk(operand.items, depth + 1);
+			}
+			fragments.push({
+				operator: item.operator,
+				depth,
+				top,
+				bottom: row * ROW + ROW / 2,
+				operands
+			});
+		}
+	};
+	walk(items, 0);
+	return {
+		messages,
+		fragments,
+		rows: row + 1
+	};
+};
+var describeMessage = (message, labelOf) => `${labelOf(message.from)} to ${labelOf(message.to)}: ${message.label}`;
+/** The text alternative: the items as nested lists, in scenario order. */
+var Steps = (props) => {
+	const { items, labelOf } = props;
+	return /* @__PURE__ */ jsx("ol", { children: items.map((item) => item.kind === "message" ? /* @__PURE__ */ jsx("li", { children: describeMessage(item.message, labelOf) }, item.message.transition) : /* @__PURE__ */ jsxs("li", { children: [item.operator, /* @__PURE__ */ jsx("ol", { children: item.operands.map((operand, index) => /* @__PURE__ */ jsxs("li", { children: [operand.guard === void 0 ? "" : `[${operand.guard}] `, /* @__PURE__ */ jsx(Steps, {
+		items: operand.items,
+		labelOf
+	})] }, index)) })] }, item.fragment ?? item.element)) });
+};
+/**
+* A sequence diagram drawn as SVG: a lifeline per actor in order of first appearance, a message per row as an arrow between lifelines (a loop for a self-message, dashed for a reply, an open head for an asynchronous message), and each fragment as a frame with its operator and operand guards. React Flow has no lifeline layout, so the arrangement is fixed by the diagram's own order. The drawing is hidden from assistive technology, which reads the same steps from a visually hidden list instead.
+* @param props - The diagram, the lifelines' names and a caption.
+* @returns A `figure` holding the caption, the drawing and its text alternative.
+*/
+var SequenceDiagram = (props) => {
+	const { diagram, labelOf, title } = props;
+	const id = useId();
+	const caption = `${id}-caption`;
+	const filled = `${id}-filled`;
+	const open = `${id}-open`;
+	const { messages, fragments, rows } = place(diagram.items);
+	const xOf = new Map(diagram.lifelines.map((actor, index) => [actor, MARGIN + HEAD_WIDTH / 2 + index * LIFELINE_GRID]));
+	const at = (actor) => {
+		const x = xOf.get(actor);
+		if (x === void 0) throw new Error(`"${actor}" sends or receives a message but has no lifeline`);
+		return x;
+	};
+	const width = 2 * MARGIN + HEAD_WIDTH + Math.max(diagram.lifelines.length - 1, 0) * LIFELINE_GRID;
+	const top = MARGIN + HEAD_HEIGHT;
+	const height = top + rows * ROW + MARGIN;
+	return /* @__PURE__ */ jsxs("figure", {
+		className: sequenceFigure,
+		"aria-labelledby": caption,
+		children: [
+			/* @__PURE__ */ jsx("figcaption", {
+				id: caption,
+				className: sequenceCaption,
+				children: title
+			}),
+			/* @__PURE__ */ jsxs("svg", {
+				"aria-hidden": "true",
+				className: sequenceSvg,
+				width,
+				height,
+				viewBox: `0 0 ${width} ${height}`,
+				children: [
+					/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsx("marker", {
+						id: filled,
+						viewBox: `0 0 ${GRID} ${GRID}`,
+						refX: GRID,
+						refY: GRID / 2,
+						markerWidth: GRID,
+						markerHeight: GRID,
+						orient: "auto-start-reverse",
+						children: /* @__PURE__ */ jsx("path", {
+							className: arrowFilled,
+							d: `M 0 0 L ${GRID} ${GRID / 2} L 0 ${GRID} z`
+						})
+					}), /* @__PURE__ */ jsx("marker", {
+						id: open,
+						viewBox: `0 0 ${GRID} ${GRID}`,
+						refX: GRID,
+						refY: GRID / 2,
+						markerWidth: GRID,
+						markerHeight: GRID,
+						orient: "auto-start-reverse",
+						children: /* @__PURE__ */ jsx("path", {
+							className: arrowOpen,
+							d: `M 0 0 L ${GRID} ${GRID / 2} L 0 ${GRID}`
+						})
+					})] }),
+					fragments.map((fragment) => {
+						const inset = MARGIN / 2 + fragment.depth * GRID;
+						const y = top + fragment.top;
+						return /* @__PURE__ */ jsxs("g", {
+							"data-fragment": fragment.operator,
+							children: [
+								/* @__PURE__ */ jsx("rect", {
+									className: fragmentFrame,
+									x: inset,
+									y,
+									width: width - 2 * inset,
+									height: fragment.bottom - fragment.top
+								}),
+								/* @__PURE__ */ jsx("rect", {
+									className: fragmentTag,
+									x: inset,
+									y,
+									width: TAG_WIDTH,
+									height: TAG_HEIGHT
+								}),
+								/* @__PURE__ */ jsx("text", {
+									className: diagramText,
+									x: inset + TAG_WIDTH / 2,
+									y: y + TAG_HEIGHT / 2 + BASELINE_DROP,
+									textAnchor: "middle",
+									children: fragment.operator
+								}),
+								fragment.operands.map((operand, index) => /* @__PURE__ */ jsxs("g", { children: [index === 0 ? null : /* @__PURE__ */ jsx("line", {
+									className: fragmentDivider,
+									x1: inset,
+									x2: width - inset,
+									y1: top + operand.y - ROW / 2,
+									y2: top + operand.y - ROW / 2
+								}), operand.guard === void 0 ? null : /* @__PURE__ */ jsxs("text", {
+									className: messageLabel,
+									x: inset + TAG_WIDTH + GRID,
+									y: top + operand.y - ROW / 2 + TAG_HEIGHT / 2 + BASELINE_DROP,
+									children: [
+										"[",
+										operand.guard,
+										"]"
+									]
+								})] }, operand.y))
+							]
+						}, `${fragment.operator}-${fragment.top}`);
+					}),
+					diagram.lifelines.map((actor) => {
+						const x = at(actor);
+						return /* @__PURE__ */ jsxs("g", {
+							"data-lifeline": actor,
+							children: [
+								/* @__PURE__ */ jsx("line", {
+									className: lifelineLine,
+									x1: x,
+									x2: x,
+									y1: top,
+									y2: height - MARGIN
+								}),
+								/* @__PURE__ */ jsx("rect", {
+									className: lifelineHead,
+									x: x - HEAD_WIDTH / 2,
+									y: MARGIN,
+									width: HEAD_WIDTH,
+									height: HEAD_HEIGHT
+								}),
+								/* @__PURE__ */ jsx("text", {
+									className: diagramText,
+									x,
+									y: MARGIN + HEAD_HEIGHT / 2 + BASELINE_DROP,
+									textAnchor: "middle",
+									children: labelOf(actor)
+								})
+							]
+						}, actor);
+					}),
+					messages.map(({ message, y: row }) => {
+						const from = at(message.from);
+						const to = at(message.to);
+						const y = top + row;
+						const mode = message.mode ?? "sync";
+						const marker = `url(#${mode === "sync" ? filled : open})`;
+						return /* @__PURE__ */ jsxs("g", {
+							"data-transition-id": message.transition,
+							"data-mode": mode,
+							children: [from === to ? /* @__PURE__ */ jsx("path", {
+								className: messageLine,
+								"data-mode": mode,
+								d: `M ${from} ${y} h ${SELF_REACH} v ${SELF_DROP} h ${-SELF_REACH}`,
+								markerEnd: marker
+							}) : /* @__PURE__ */ jsx("line", {
+								className: messageLine,
+								"data-mode": mode,
+								x1: from,
+								x2: to,
+								y1: y,
+								y2: y,
+								markerEnd: marker
+							}), /* @__PURE__ */ jsx("text", {
+								className: messageLabel,
+								x: from === to ? from + SELF_REACH + GRID : (from + to) / 2,
+								y: y - GRID,
+								textAnchor: from === to ? "start" : "middle",
+								children: message.label
+							})]
+						}, message.transition);
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: visuallyHidden,
+				children: /* @__PURE__ */ jsx(Steps, {
+					items: diagram.items,
+					labelOf
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { surfaceRoot as _, Lane as a, visuallyHidden as b, StatusBadge as c, card as d, darkTheme as f, lightValues as g, lightTheme as h, GraphTheme as i, TransitionItem as l, focusRing as m, ElementCard as n, Legend as o, darkValues as p, FilterPanel as r, SequenceDiagram as s, DetailPanel as t, badge as u, themes as v, vars as y };