@stealthscale/component-graphs 0.1.0 → 0.2.2

package/dist/shared-DOF4V8-Q.js

@@ -0,0 +1,3808 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { t as recipe } from "./recipes-lWPA4IJC.js";
+import { createContext, isValidElement, use, useEffect, useId, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { Button, ButtonPropsProvider, IconButton } from "@stealthscale/component-actions";
+import { Badge, Status } from "@stealthscale/component-data";
+import { createLabelling, createRequiredContext, omitUndefined, useControllableState } from "@stealthscale/hooks";
+import { Graph, layout } from "@dagrejs/dagre";
+import { Background, BaseEdge, EdgeLabelRenderer, Handle, MiniMap, Position, ReactFlow, ReactFlowProvider, addEdge, applyNodeChanges, getBezierPath, getViewportForBounds, useNodeId, useReactFlow, useStore, useStoreApi } from "@xyflow/react";
+import { createSlotRecipeContext } from "@stealthscale/theme";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { RovingFocus } from "@stealthscale/component-a11y";
+import { LocaleContext } from "@stealthscale/provider-locale";
+import { forceCenter, forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY } from "d3-force";
+//#region src/graph/words.ts
+/**
+* Instruction every node of an editable canvas is described by, unless stated.
+*/
+const NODE = "Press Enter or Space to select the node, the arrow keys to move it, Delete to remove it and Escape to clear the selection.";
+/**
+* Instruction every edge of an editable canvas is described by, unless stated.
+*/
+const EDGE = "Press Enter or Space to select the connection, Delete to remove it and Escape to clear the selection.";
+/**
+* Writes the announcement of a move, unless stated.
+*/
+function moveAnnouncementOf({ direction }) {
+	return `Moved the selected node ${direction}.`;
+}
+/**
+* Writes the name of an edge from the names of its ends, unless stated.
+*/
+function edgeNameOf({ source, target }) {
+	return `${source} to ${target}`;
+}
+/**
+* Writes the name of an edge's remove control from the names of its ends, unless stated.
+*/
+function removeNameOf({ source, target }) {
+	return `Remove the connection from ${source} to ${target}`;
+}
+/**
+* Returns React Flow's words for a canvas: the caller's or the English defaults while it takes
+* edits, and no instructions while it is read-only.
+*
+* @param words - The caller's words.
+* @param editable - Whether the canvas takes edits.
+*/
+function ariaWordsOf(words, editable) {
+	const node = editable ? words.nodeDescription ?? NODE : "";
+	return {
+		"edge.a11yDescription.default": editable ? words.edgeDescription ?? EDGE : "",
+		"node.a11yDescription.ariaLiveMessage": words.moveAnnouncement ?? moveAnnouncementOf,
+		"node.a11yDescription.default": node,
+		"node.a11yDescription.keyboardDisabled": node
+	};
+}
+//#endregion
+//#region src/diff/diff.ts
+/**
+* Compares two versions of a graph: the nodes and edges the later version adds, changes or removes.
+*
+* @remarks
+*   A node is the same node in both versions while its id is the same, and it is changed while a
+*   field of its `data` differs. Each field is compared by its JSON with object keys sorted, so a
+*   node that only moved, or whose data lists its keys in another order, is unchanged. A React
+*   element in the data, such as an icon, is compared by its component and its props. An edge is
+*   the same edge in both versions while it joins the same ports of the same nodes, so an edge is
+*   added or removed, never changed. The entries follow the later version's order, and the removed
+*   ones follow in the earlier version's order.
+*/
+/**
+* Returns a function that writes a value's JSON with object keys sorted and each React element as
+* its component's number of first sight and its props.
+*/
+function canonicalOf() {
+	const components = /* @__PURE__ */ new Map();
+	/**
+	* Replaces a React element and an object with the forms the comparison reads.
+	*/
+	const replacer = (_key, value) => {
+		if (isValidElement(value)) {
+			if (!components.has(value.type)) components.set(value.type, components.size);
+			return {
+				component: components.get(value.type),
+				props: value.props
+			};
+		}
+		if (value === null || typeof value !== "object" || Array.isArray(value)) return value;
+		const fields = new Map(Object.entries(value));
+		return Object.fromEntries([...fields.keys()].toSorted().map((key) => [key, fields.get(key)]));
+	};
+	return (value) => JSON.stringify(value, replacer) ?? "";
+}
+/**
+* Returns a node's name: its data's string `label`, else its id.
+*/
+function labelOf(node) {
+	const label = node.data["label"];
+	return typeof label === "string" ? label : node.id;
+}
+/**
+* Returns the fields of two versions of a node's data that differ, sorted.
+*/
+function fieldsOf(before, after, canonical) {
+	return [.../* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(after)])].filter((key) => canonical(before[key]) !== canonical(after[key])).toSorted();
+}
+/**
+* Returns a node's entry with the fields of its data that differ.
+*/
+function nodeEntryOf(node, change, fields = []) {
+	return {
+		change,
+		fields,
+		id: node.id,
+		label: labelOf(node)
+	};
+}
+/**
+* Returns an entry for every node of either version.
+*/
+function nodesOf(before, after) {
+	const canonical = canonicalOf();
+	const earlier = new Map(before.nodes.map((node) => [node.id, node]));
+	const later = new Set(after.nodes.map((node) => node.id));
+	const kept = after.nodes.map((node) => {
+		const previous = earlier.get(node.id);
+		if (previous === void 0) return nodeEntryOf(node, "added");
+		const fields = fieldsOf(previous.data, node.data, canonical);
+		return nodeEntryOf(node, fields.length > 0 ? "changed" : "unchanged", fields);
+	});
+	const gone = before.nodes.filter((node) => !later.has(node.id));
+	return [...kept, ...gone.map((node) => nodeEntryOf(node, "removed"))];
+}
+/**
+* Returns the name of each node of a version by its id.
+*/
+function namesOf(version) {
+	return new Map(version.nodes.map((node) => [node.id, labelOf(node)]));
+}
+/**
+* Returns the key an edge is the same edge by: its ends and its ports.
+*/
+function keyOf(edge) {
+	return JSON.stringify([
+		edge.source,
+		edge.sourceHandle ?? null,
+		edge.target,
+		edge.targetHandle ?? null
+	]);
+}
+/**
+* Returns an entry for every edge of either version, each named from the names of its ends in the
+* version it is in.
+*/
+function edgesOf$2(before, after, edgeName) {
+	const earlier = new Set(before.edges.map(keyOf));
+	const later = new Set(after.edges.map(keyOf));
+	const [earlierNames, laterNames] = [namesOf(before), namesOf(after)];
+	/**
+	* Returns an edge's entry, named from the names of its version's nodes.
+	*/
+	const entry = (edge, change, names) => ({
+		change,
+		fields: [],
+		id: edge.id,
+		label: edgeName({
+			source: names.get(edge.source) ?? edge.source,
+			target: names.get(edge.target) ?? edge.target
+		})
+	});
+	return [...after.edges.map((edge) => entry(edge, earlier.has(keyOf(edge)) ? "unchanged" : "added", laterNames)), ...before.edges.filter((edge) => !later.has(keyOf(edge))).map((edge) => entry(edge, "removed", earlierNames))];
+}
+/**
+* Returns what the later version of a graph adds, changes and removes, node by node and edge by
+* edge.
+*
+* @param before - The earlier version.
+* @param after - The later version.
+* @param edgeName - Writes an edge's name from the names of its ends. `Orders to Revenue` unless
+*   stated.
+*/
+function diffGraphs(before, after, edgeName = edgeNameOf) {
+	return {
+		edges: edgesOf$2(before, after, edgeName),
+		nodes: nodesOf(before, after)
+	};
+}
+//#endregion
+//#region src/directed-graph/branches.ts
+/**
+* Returns the ids each node's links lead to, from the links that leave a known node, or from every
+* link without a set of known nodes.
+*/
+function childrenOf(links, known) {
+	const children = /* @__PURE__ */ new Map();
+	for (const { source, target } of links) if (known === void 0 || known.has(source)) children.set(source, [...children.get(source) ?? [], target]);
+	return children;
+}
+/**
+* Returns the ids a walk visits from its starts, leaving the children of a node it stops at out of
+* the walk.
+*/
+function walkFrom(starts, children, stops) {
+	const visited = new Set(starts);
+	const queue = [...visited];
+	for (const id of queue) for (const child of stops.has(id) ? [] : children.get(id) ?? []) if (!visited.has(child)) {
+		visited.add(child);
+		queue.push(child);
+	}
+	return visited;
+}
+/**
+* Returns the ids of every node a node leads to, not counting the node itself.
+*/
+function descendantsOf(links, id) {
+	const visited = walkFrom([id], childrenOf(links), /* @__PURE__ */ new Set());
+	visited.delete(id);
+	return visited;
+}
+/**
+* Returns the ids of the nodes the collapsed nodes hide.
+*
+* @param ids - Every node of the graph.
+* @param links - The graph's links.
+* @param collapsed - The nodes whose branches are closed.
+*/
+function hiddenBy(ids, links, collapsed) {
+	const children = childrenOf(links, new Set(ids));
+	const entered = new Set([...children.values()].flat());
+	const roots = ids.filter((id) => !entered.has(id));
+	const rooted = walkFrom(roots, children, /* @__PURE__ */ new Set());
+	const shown = walkFrom([...roots, ...ids.filter((id) => !rooted.has(id))], children, collapsed);
+	return new Set(ids.filter((id) => !shown.has(id)));
+}
+//#endregion
+//#region src/graph/walk.ts
+/**
+* Returns the nodes a walk along the links visits from a node within a number of hops.
+*
+* @param links - The graph's links.
+* @param from - The node the walk starts from, which it never counts.
+* @param depth - How many hops the walk takes.
+* @param forward - Whether the walk follows a link from its source to its target, or back.
+*/
+function walk(links, from, depth, forward) {
+	const visited = /* @__PURE__ */ new Set();
+	let frontier = /* @__PURE__ */ new Set([from]);
+	for (let hop = 0; hop < depth && frontier.size > 0; hop += 1) {
+		const next = /* @__PURE__ */ new Set();
+		for (const link of links) {
+			const [start, end] = forward ? [link.source, link.target] : [link.target, link.source];
+			if (frontier.has(start) && end !== from && !visited.has(end)) {
+				visited.add(end);
+				next.add(end);
+			}
+		}
+		frontier = next;
+	}
+	return visited;
+}
+//#endregion
+//#region src/directed-graph/trace.ts
+/**
+* Traces a directed graph from one node: the nodes that feed it and the nodes it feeds, within a
+* number of hops.
+*
+* @remarks
+*   A lineage question is "what feeds this" and "what breaks if this breaks". The focused node is
+*   in neither set, so a cycle that leads back to it does not make it its own ancestor. A node that
+*   is both upstream and downstream, which happens only in a cycle, counts as downstream, because
+*   what breaks is the more consequential of the two. The walks stop at a node they visited
+*   before, so a cycle never hangs them.
+*/
+/**
+* Returns the nodes that feed a node and the nodes it feeds, within `depth` hops.
+*
+* @param links - Every edge of the graph, by the ids of its ends.
+* @param id - The node the trace starts from, which is in neither set.
+* @param depth - How many hops each way count. Every hop unless stated.
+*/
+function traceGraph(links, id, depth = Number.POSITIVE_INFINITY) {
+	return {
+		downstream: walk(links, id, depth, true),
+		upstream: walk(links, id, depth, false)
+	};
+}
+/**
+* Returns where a node is against the focused node of a trace.
+*/
+function relationOf(id, focus, trace) {
+	if (id === focus) return "focus";
+	if (trace.downstream.has(id)) return "downstream";
+	return trace.upstream.has(id) ? "upstream" : "unrelated";
+}
+//#endregion
+//#region src/graph/marks.ts
+/**
+* Returns the attributes that mark an edge on or off a traced path.
+*
+* @param on - Whether the edge is on the traced path.
+*/
+function traceMarkOf(on) {
+	return { "data-trace": on ? "on" : "off" };
+}
+//#endregion
+//#region src/layout/size.ts
+/**
+* Size of a node that states none and has not been measured, in pixels.
+*/
+const SIZE = {
+	height: 44,
+	width: 256
+};
+/**
+* Returns the size a layout places a node by: the measured size, the stated size, the initial
+* size, or the default.
+*/
+function sizeOf(node) {
+	return {
+		height: node.measured?.height ?? node.height ?? node.initialHeight ?? SIZE.height,
+		width: node.measured?.width ?? node.width ?? node.initialWidth ?? SIZE.width
+	};
+}
+//#endregion
+//#region src/layout/rank.ts
+/**
+* Places a node graph's nodes in ranks with dagre, so its edges run down the canvas or across it.
+*
+* @remarks
+*   Dagre centres a node on the point it returns, and React Flow places a node by its top-left
+*   corner, so each position is that point less half the node's size. A node's size is the size
+*   React Flow measured, else its stated `width` and `height`, else its `initialWidth` and
+*   `initialHeight`, else 256 by 44 pixels. A node comes back with that size as its initial size,
+*   which React Flow applies to the node's wrapper until it measures the card inside and which the
+*   overview map sizes the node by. After the measurement the wrapper, and the focus ring on it,
+*   fit the card. Ranks are 128px apart and the nodes of one
+*   rank 48px apart, which leaves room for the names of ports outside a node's box. An edge whose
+*   ends are not both nodes of the graph takes no part. Dagre knows no ports, and it places the
+*   targets of one node in the reverse of the order their edges are added, so the edges are added
+*   last first: the targets of a node, and the sources of a node, follow the order of their edges,
+*   and edges listed in their ports' order do not cross.
+*/
+/**
+* Space between two ranks and between two nodes of one rank, in pixels.
+*/
+const SPACING = {
+	nodesep: 48,
+	ranksep: 128
+};
+/**
+* Returns the nodes placed in ranks, each with the size it was placed by as its initial size and
+* the sides its edges leave and enter.
+*
+* @typeParam N - One node of the graph.
+* @param nodes - The graph's nodes, in any order.
+* @param edges - The links between the nodes, of which one to a node outside `nodes` takes no part.
+* @param options - The direction and the spacing.
+*/
+function layoutGraph(nodes, edges, options = {}) {
+	const { direction = "down", nodesep = SPACING.nodesep, ranksep = SPACING.ranksep } = options;
+	const graph = new Graph();
+	const down = direction === "down";
+	graph.setDefaultEdgeLabel(() => ({}));
+	graph.setGraph({
+		nodesep,
+		rankdir: down ? "TB" : "LR",
+		ranksep
+	});
+	for (const node of nodes) graph.setNode(node.id, { ...sizeOf(node) });
+	for (const edge of edges.toReversed()) if (graph.hasNode(edge.source) && graph.hasNode(edge.target)) graph.setEdge(edge.source, edge.target);
+	layout(graph);
+	return nodes.map((node) => {
+		const { height, width } = sizeOf(node);
+		const { x = 0, y = 0 } = graph.node(node.id);
+		return {
+			...node,
+			initialHeight: height,
+			initialWidth: width,
+			position: {
+				x: x - width / 2,
+				y: y - height / 2
+			},
+			sourcePosition: down ? Position.Bottom : Position.Right,
+			targetPosition: down ? Position.Top : Position.Left
+		};
+	});
+}
+//#endregion
+//#region src/directed-graph/view.ts
+/**
+* Returns the ids of the nodes the canvas shows.
+*/
+function shownOf(input, hidden, traced) {
+	const kept = input.nodes.map((node) => node.id).filter((id) => !hidden.has(id));
+	if (input.trace !== "isolate" || traced === void 0) return new Set(kept);
+	return new Set(kept.filter((id) => id === input.focus || traced.upstream.has(id) || traced.downstream.has(id)));
+}
+/**
+* Returns the relation of each shown node to the focused node, while a trace shows relations.
+*/
+function relationsOf(input, shown, traced) {
+	const { focus, trace } = input;
+	if (focus === null || traced === void 0 || trace === "off") return /* @__PURE__ */ new Map();
+	return new Map([...shown].map((id) => [id, relationOf(id, focus, traced)]));
+}
+/**
+* Returns the word for a relation, or undefined for an unrelated node.
+*/
+function tagOf$1(relation, words) {
+	if (relation === "focus") return words.focusLabel;
+	if (relation === "upstream") return words.upstreamLabel;
+	return relation === "downstream" ? words.downstreamLabel : void 0;
+}
+/**
+* Returns a node's branch control: the number of nodes a press hides or shows, or undefined while
+* a press changes nothing.
+*/
+function branchOf(id, input, scope) {
+	if (!input.collapsible) return void 0;
+	const expanded = !input.collapsed.has(id);
+	const toggled = new Set(input.collapsed);
+	if (expanded) toggled.add(id);
+	else toggled.delete(id);
+	const count = Math.abs(hiddenBy(scope.ids, input.edges, toggled).size - scope.hidden.size);
+	const label = expanded ? input.words.collapseLabel(count) : input.words.expandLabel(count);
+	return count === 0 ? void 0 : {
+		expanded,
+		label
+	};
+}
+/**
+* Returns the card of one node, unplaced.
+*/
+function cardOf(node, input, scope) {
+	const { words } = input;
+	const relation = scope.relations.get(node.id);
+	const tag = tagOf$1(relation, words);
+	const size = input.sizes.get(node.id);
+	const data = {
+		branch: branchOf(node.id, input, scope),
+		detail: node.detail,
+		dimmed: relation === "unrelated",
+		icon: node.icon,
+		inputs: [{
+			id: "in",
+			label: words.upstreamLabel,
+			unused: !scope.entered.has(node.id)
+		}],
+		kind: node.kind,
+		label: node.label,
+		outputs: [{
+			id: "out",
+			label: words.downstreamLabel,
+			unused: !scope.left.has(node.id)
+		}],
+		status: node.status,
+		tag
+	};
+	return {
+		ariaLabel: tag === void 0 ? node.label : `${node.label}, ${tag}`,
+		data,
+		id: node.id,
+		position: {
+			x: 0,
+			y: 0
+		},
+		selected: node.id === input.focus,
+		type: "directed",
+		...size === void 0 ? {} : { measured: size }
+	};
+}
+/**
+* Returns the edges whose ends are both among the visible nodes, each with the nodes at its ends.
+*/
+function keptOf(edges, visible) {
+	return edges.flatMap((edge) => {
+		const from = visible.get(edge.source);
+		const to = visible.get(edge.target);
+		return from === void 0 || to === void 0 ? [] : [{
+			edge,
+			from,
+			to
+		}];
+	});
+}
+/**
+* Returns the kept edges for React Flow, named by their ends and marked on or off a traced path
+* while a trace shows relations.
+*/
+function edgesOf$1(input, kept, scope) {
+	return kept.map(({ edge, from, to }) => {
+		const on = [from, to].every((end) => scope.relations.get(end.id) !== "unrelated");
+		return {
+			ariaLabel: input.words.edgeName({
+				source: from.label,
+				target: to.label
+			}),
+			id: edge.id ?? `${from.id}-${to.id}`,
+			selectable: false,
+			source: from.id,
+			target: to.id,
+			...scope.relations.size === 0 ? {} : { domAttributes: traceMarkOf(on) }
+		};
+	});
+}
+/**
+* Returns the trace of the focused node in numbers, named by the node's label, else by its id.
+*/
+function countsOf(input, traced) {
+	const { focus, nodes } = input;
+	if (focus === null || traced === void 0) return void 0;
+	return {
+		downstream: traced.downstream.size,
+		name: nodes.find((node) => node.id === focus)?.label ?? focus,
+		upstream: traced.upstream.size
+	};
+}
+/**
+* Returns the view of a directed graph: its cards and edges, placed once every node has been
+* measured.
+*
+* @param input - The graph, its state, the measured sizes and the words.
+*/
+function viewOf$1(input) {
+	const ids = input.nodes.map((node) => node.id);
+	const complete = ids.every((id) => input.sizes.has(id));
+	const traced = input.focus === null ? void 0 : traceGraph(input.edges, input.focus, input.depth);
+	const hidden = input.collapsible ? hiddenBy(ids, input.edges, input.collapsed) : /* @__PURE__ */ new Set();
+	const shown = complete ? shownOf(input, hidden, traced) : new Set(ids);
+	const visible = new Map(input.nodes.filter((node) => shown.has(node.id)).map((node) => [node.id, node]));
+	const kept = keptOf(input.edges, visible);
+	const scope = {
+		entered: new Set(kept.map(({ to }) => to.id)),
+		hidden,
+		ids,
+		left: new Set(kept.map(({ from }) => from.id)),
+		relations: relationsOf(input, shown, traced)
+	};
+	const cards = [...visible.values()].map((node) => cardOf(node, input, scope));
+	const edges = edgesOf$1(input, kept, scope);
+	return {
+		complete,
+		counts: countsOf(input, traced),
+		edges,
+		nodes: complete ? layoutGraph(cards, edges, { direction: input.direction }) : cards
+	};
+}
+//#endregion
+//#region src/graph/changes.ts
+/**
+* Returns the id of the node the changes select, `null` when they only clear the selection, or
+* undefined when they change no selection.
+*/
+function selectedBy(changes) {
+	const selections = changes.filter((change) => change.type === "select");
+	if (selections.length === 0) return void 0;
+	return selections.find((change) => change.selected)?.id ?? null;
+}
+/**
+* Returns the sizes with every size the changes measured, or the same sizes when they measured
+* none that differs.
+*
+* @param sizes - The sizes measured before.
+* @param changes - The changes React Flow reported.
+*/
+function measuredBy(sizes, changes) {
+	const next = new Map(sizes);
+	let changed = false;
+	for (const change of changes) if (change.type === "dimensions" && change.dimensions !== void 0) {
+		const { height, width } = change.dimensions;
+		const known = sizes.get(change.id);
+		if (known?.height !== height || known.width !== width) {
+			next.set(change.id, {
+				height,
+				width
+			});
+			changed = true;
+		}
+	}
+	return changed ? next : sizes;
+}
+/**
+* Returns the positions with every position the changes moved a node to, or the same positions
+* when they moved none.
+*
+* @param positions - The positions people moved nodes to before.
+* @param changes - The changes React Flow reported.
+*/
+function movedBy(positions, changes) {
+	const moves = changes.flatMap((change) => change.type === "position" && change.position !== void 0 ? [[change.id, change.position]] : []);
+	return moves.length === 0 ? positions : new Map([...positions, ...moves]);
+}
+//#endregion
+//#region src/directed-graph/state.ts
+/**
+* Keeps a directed graph's focus, closed branches and measured sizes, and shares the function that
+* opens and closes a branch with the graph's cards.
+*
+* @remarks
+*   The focus and the closed branches are controlled where the caller passes them. A focus of
+*   `null` is a controlled graph with no focus, because `undefined` leaves the focus to the graph.
+*   React Flow renders each card inside the canvas, where the graph's state is out of reach of the
+*   card's props, so the graph provides the function around the canvas.
+*/
+/**
+* Provides the function that opens and closes the branch of the node whose id it receives, and
+* reads it back.
+*/
+const [BranchProvider, useToggle] = createRequiredContext("DirectedGraph");
+/**
+* Returns the ids of the closed branches after a press on a node's branch control.
+*/
+function toggled(closed, id) {
+	return closed.includes(id) ? closed.filter((known) => known !== id) : [...closed, id];
+}
+/**
+* Returns the graph's view in its current state and the functions that change the state.
+*
+* @param props - The graph, its focus and branches, its words and its direction.
+*/
+function useTraced(props) {
+	const $ = c(36);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ new Map();
+		$[0] = t0;
+	} else t0 = $[0];
+	const [sizes, setSizes] = useState(t0);
+	const t1 = props.defaultFocus ?? null;
+	let t2;
+	if ($[1] !== props.focus || $[2] !== props.onFocusChange || $[3] !== t1) {
+		t2 = {
+			defaultValue: t1,
+			onChange: props.onFocusChange,
+			value: props.focus
+		};
+		$[1] = props.focus;
+		$[2] = props.onFocusChange;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	const [focus, setFocus] = useControllableState(t2);
+	let t3;
+	if ($[5] !== props.defaultCollapsed) {
+		t3 = props.defaultCollapsed ?? [];
+		$[5] = props.defaultCollapsed;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = [...t3];
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== props.collapsed) {
+		t5 = props.collapsed === void 0 ? void 0 : [...props.collapsed];
+		$[9] = props.collapsed;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== props.onCollapsedChange || $[12] !== t4 || $[13] !== t5) {
+		t6 = {
+			defaultValue: t4,
+			onChange: props.onCollapsedChange,
+			value: t5
+		};
+		$[11] = props.onCollapsedChange;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	const [collapsed, setCollapsed] = useControllableState(t6);
+	let t7;
+	if ($[15] !== collapsed || $[16] !== focus || $[17] !== props.collapsible || $[18] !== props.depth || $[19] !== props.direction || $[20] !== props.edges || $[21] !== props.nodes || $[22] !== props.trace || $[23] !== props.words || $[24] !== sizes) {
+		t7 = viewOf$1({
+			collapsed: new Set(collapsed),
+			collapsible: props.collapsible === true,
+			depth: props.depth ?? Number.POSITIVE_INFINITY,
+			direction: props.direction,
+			edges: props.edges,
+			focus,
+			nodes: props.nodes,
+			sizes,
+			trace: props.trace ?? "highlight",
+			words: props.words
+		});
+		$[15] = collapsed;
+		$[16] = focus;
+		$[17] = props.collapsible;
+		$[18] = props.depth;
+		$[19] = props.direction;
+		$[20] = props.edges;
+		$[21] = props.nodes;
+		$[22] = props.trace;
+		$[23] = props.words;
+		$[24] = sizes;
+		$[25] = t7;
+	} else t7 = $[25];
+	const view = t7;
+	let t8;
+	let t9;
+	if ($[26] !== setFocus) {
+		t8 = () => {
+			setFocus(null);
+		};
+		t9 = (changes) => {
+			const selected = selectedBy(changes);
+			if (selected !== void 0) setFocus(selected);
+			setSizes((known) => measuredBy(known, changes));
+		};
+		$[26] = setFocus;
+		$[27] = t8;
+		$[28] = t9;
+	} else {
+		t8 = $[27];
+		t9 = $[28];
+	}
+	let t10;
+	if ($[29] !== setCollapsed) {
+		t10 = (id) => {
+			setCollapsed((closed) => toggled(closed, id));
+		};
+		$[29] = setCollapsed;
+		$[30] = t10;
+	} else t10 = $[30];
+	let t11;
+	if ($[31] !== t10 || $[32] !== t8 || $[33] !== t9 || $[34] !== view) {
+		t11 = {
+			clear: t8,
+			onNodesChange: t9,
+			toggle: t10,
+			view
+		};
+		$[31] = t10;
+		$[32] = t8;
+		$[33] = t9;
+		$[34] = view;
+		$[35] = t11;
+	} else t11 = $[35];
+	return t11;
+}
+//#endregion
+//#region src/graph/context.ts
+/**
+* Binds the graph recipe to its parts.
+*
+* @remarks
+*   The binding is apart from the recipe, because a compiler reads the recipe at build time and the
+*   binding imports the runtime.
+*/
+/**
+* Binds the recipe once. The root provides the variants and every other part reads them.
+*/
+const { withContext, withProvider } = createSlotRecipeContext(recipe);
+//#endregion
+//#region src/graph/diffed.ts
+/**
+* Shares a comparison's changes with a canvas's nodes, names the changes, and marks each edge with
+* its change for the recipe.
+*
+* @remarks
+*   A canvas given `changes` provides each node's change by its id and the words of the changes. A
+*   node's card reads its own through React Flow's node id: a changed, added or removed card takes
+*   the change as its tag, and an unchanged card recedes. An edge takes `data-change` on React
+*   Flow's element, which the recipe reads. A node or an edge the comparison does not list, and
+*   every node and edge of a canvas without `changes`, is marked by nothing. Each marked copy of an
+*   edge is kept for the edge it was made from while its change is the same, so an unchanged edge
+*   yields the same copy on every render.
+*/
+/**
+* Provides the changes a canvas marks, or undefined while it marks none.
+*/
+const DiffContext = createContext(void 0);
+/**
+* Marked copy of each edge object, kept while the edge's change is the same.
+*/
+const MARKED = /* @__PURE__ */ new WeakMap();
+/**
+* Returns the word a change is marked by, or undefined for no change.
+*/
+function wordOf(change, words) {
+	if (change === "added") return words.addedLabel ?? "Added";
+	if (change === "changed") return words.changedLabel ?? "Changed";
+	return change === "removed" ? words.removedLabel ?? "Removed" : void 0;
+}
+/**
+* Returns the changes a canvas marks from its comparison and words, or undefined without a
+* comparison.
+*/
+function diffedOf(changes, words) {
+	if (changes === void 0) return void 0;
+	return {
+		edges: new Map(changes.edges.map(({ change, id }) => [id, change])),
+		nodes: new Map(changes.nodes.map(({ change, id }) => [id, change])),
+		words
+	};
+}
+/**
+* Returns the copy of an edge marked with a change: the kept copy while its change matches, else a
+* new copy, which replaces it.
+*/
+function marked(kept, edge, change) {
+	const known = kept.get(edge);
+	if (known?.change === change) return known.copy;
+	const attributes = {
+		...edge.domAttributes,
+		"data-change": change
+	};
+	const copy = {
+		...edge,
+		domAttributes: attributes
+	};
+	kept.set(edge, {
+		change,
+		copy
+	});
+	return copy;
+}
+/**
+* Returns the edges, each the comparison lists marked with its change.
+*
+* @typeParam E - One edge of the graph.
+*/
+function markedEdges(edges, diffed) {
+	const kept = MARKED;
+	return edges.map((edge) => {
+		const change = diffed.edges.get(edge.id);
+		return change === void 0 ? edge : marked(kept, edge, change);
+	});
+}
+/**
+* Returns the change of the node a card renders for, or undefined outside a canvas that marks
+* changes and for a node the comparison does not list.
+*/
+function useNodeChange() {
+	const $ = c(4);
+	const id = useNodeId();
+	const diffed = use(DiffContext);
+	if (id === null || diffed === void 0) return;
+	let t0;
+	if ($[0] !== diffed.nodes || $[1] !== diffed.words || $[2] !== id) {
+		const change = diffed.nodes.get(id);
+		t0 = change === void 0 ? void 0 : {
+			change,
+			word: wordOf(change, diffed.words)
+		};
+		$[0] = diffed.nodes;
+		$[1] = diffed.words;
+		$[2] = id;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
+}
+//#endregion
+//#region src/graph/ports.tsx
+/**
+* Renders the port's name with the recipe's port name class.
+*/
+const Name$1 = withContext("span", "portName");
+/**
+* Returns the side of the node the ports of a kind are on.
+*/
+function sideOf(direction, kind) {
+	if (direction === "right") return kind === "target" ? Position.Left : Position.Right;
+	return kind === "target" ? Position.Top : Position.Bottom;
+}
+/**
+* Renders a handle per port, spread along the side, each containing its name.
+*
+* @param props - The direction, the kind and the ports.
+*/
+function Ports(t0) {
+	const $ = c(17);
+	const { direction, kind, ports } = t0;
+	const connectable = useStore(_temp$4);
+	let t1;
+	if ($[0] !== direction || $[1] !== kind) {
+		t1 = sideOf(direction, kind);
+		$[0] = direction;
+		$[1] = kind;
+		$[2] = t1;
+	} else t1 = $[2];
+	const side = t1;
+	const shown = ports.length > 1;
+	let t2;
+	if ($[3] !== connectable || $[4] !== kind || $[5] !== ports || $[6] !== shown || $[7] !== side) {
+		let t3;
+		if ($[9] !== connectable || $[10] !== kind || $[11] !== ports.length || $[12] !== shown || $[13] !== side) {
+			t3 = (port, index) => {
+				const open = connectable && port.disabled !== true;
+				const along = { "--graph-port-along": `${String((index + 1) / (ports.length + 1) * 100)}%` };
+				return /* @__PURE__ */ jsx(Handle, {
+					"data-unused": port.unused === true ? "" : void 0,
+					id: port.id,
+					isConnectable: open,
+					isConnectableStart: open,
+					position: side,
+					style: along,
+					type: kind,
+					children: /* @__PURE__ */ jsx(Name$1, {
+						"data-hidden": shown ? void 0 : "",
+						children: port.label
+					})
+				}, port.id);
+			};
+			$[9] = connectable;
+			$[10] = kind;
+			$[11] = ports.length;
+			$[12] = shown;
+			$[13] = side;
+			$[14] = t3;
+		} else t3 = $[14];
+		t2 = ports.map(t3);
+		$[3] = connectable;
+		$[4] = kind;
+		$[5] = ports;
+		$[6] = shown;
+		$[7] = side;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[15] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Fragment, { children: t2 });
+		$[15] = t2;
+		$[16] = t3;
+	} else t3 = $[16];
+	return t3;
+}
+function _temp$4(state) {
+	return state.nodesConnectable;
+}
+//#endregion
+//#region src/graph/state.ts
+/**
+* Shares the graph's direction, its caption's identity and the edges' remove controls with the
+* parts.
+*
+* @remarks
+*   A node places its ports on the sides its edges leave and enter. It reads the direction from the
+*   root, so a caller states it once per graph. The caption reports itself to the root, which names
+*   the figure by it while it renders.
+*/
+/**
+* Provides the way the graph's edges run, down unless a root states otherwise.
+*/
+const DirectionContext = createContext("down");
+/**
+* Returns the way the graph's edges run.
+*/
+function useGraphDirection() {
+	return use(DirectionContext);
+}
+/**
+* Provides the root's setter the caption reports itself through, and the hook that reports it.
+*/
+const [LabellingProvider, useLabelled] = createLabelling("Graph");
+/**
+* Provides the ID the caption renders with, and reads it back.
+*/
+const [CaptionProvider, useCaptionId] = createRequiredContext("GraphCaption");
+/**
+* Provides the edges' remove glyph, the words that name each remove control, and whether the
+* canvas takes edits.
+*/
+const RemovalContext = createContext({
+	editable: false,
+	glyph: void 0,
+	name: removeNameOf
+});
+//#endregion
+//#region src/graph/node.tsx
+/**
+* Renders the card with the recipe's node class.
+*/
+const Card$1 = withContext("div", "node");
+/**
+* Renders the header row with the recipe's node header class.
+*/
+const Header = withContext("div", "nodeHeader");
+/**
+* Renders the icon's box with the recipe's node icon class.
+*/
+const Icon = withContext("span", "nodeIcon");
+/**
+* Renders the title and the subtitle's column with the recipe's node text class.
+*/
+const Text = withContext("span", "nodeText");
+/**
+* Renders the title with the recipe's node title class.
+*/
+const Title = withContext("span", "nodeTitle");
+/**
+* Renders the subtitle with the recipe's node subtitle class.
+*/
+const Subtitle = withContext("span", "nodeSubtitle");
+/**
+* Renders the actions' row with the recipe's node actions class.
+*/
+const Actions = withContext("span", "nodeActions");
+/**
+* Renders the body with the recipe's node body class.
+*/
+const Body = withContext("div", "nodeBody");
+/**
+* Renders the problem line with the recipe's node problem class.
+*/
+const Problem = withContext("div", "nodeProblem");
+/**
+* Renders the tag's box with the recipe's node tag class.
+*/
+const Tag = withContext("span", "nodeTag");
+/**
+* Renders the branch control's box with the recipe's node branch class.
+*/
+const Branch = withContext("span", "nodeBranch");
+/**
+* Palette of each change's tag.
+*/
+const PALETTES = {
+	added: "success",
+	changed: "warning",
+	removed: "error",
+	unchanged: "neutral"
+};
+/**
+* Mark of each change's tag, before its word, so a color is never the only signal.
+*/
+const MARKS = {
+	added: "+",
+	changed: "~",
+	removed: "−",
+	unchanged: ""
+};
+/**
+* Returns the card's header: the icon, the title and the subtitle, the status and the actions.
+*/
+function headerOf({ actions, icon, status, subtitle, title }) {
+	return /* @__PURE__ */ jsxs(Header, { children: [
+		icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": true,
+			children: icon
+		}),
+		/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Title, { children: title }), subtitle === void 0 ? null : /* @__PURE__ */ jsx(Subtitle, { children: subtitle })] }),
+		status === void 0 ? null : /* @__PURE__ */ jsxs(Status.Root, {
+			palette: status.palette,
+			size: "sm",
+			children: [/* @__PURE__ */ jsx(Status.Indicator, {}), status.label]
+		}),
+		actions === void 0 ? null : /* @__PURE__ */ jsx(Actions, {
+			className: "nodrag nopan",
+			children: actions
+		})
+	] });
+}
+/**
+* Returns the card's body, its problem line while the node is invalid, and its tag.
+*/
+function contentOf({ children, invalid, problem, tag }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		children === void 0 ? null : /* @__PURE__ */ jsx(Body, { children }),
+		invalid === true && problem !== void 0 ? /* @__PURE__ */ jsx(Problem, { children: problem }) : null,
+		tag === void 0 ? null : /* @__PURE__ */ jsx(Tag, { children: tag })
+	] });
+}
+/**
+* Returns the tag of a card's change: a badge with the change's mark and word, or nothing for an
+* unchanged node and for a node without a change.
+*/
+function changeTagOf(change) {
+	if (change?.word === void 0) return void 0;
+	return /* @__PURE__ */ jsx(Badge, {
+		"aria-hidden": true,
+		palette: PALETTES[change.change],
+		size: "sm",
+		variant: "surface",
+		children: `${MARKS[change.change]} ${change.word}`
+	});
+}
+/**
+* Renders the card with its ports, header, body, problem line, tag and branch control.
+*
+* @remarks
+*   The branch control renders after the ports, so it covers the handle of the side it is on.
+* @param props - The title, the details, the ports and the states.
+*/
+function Node$1(props) {
+	const $ = c(28);
+	const { branch, inputs: t0, outputs: t1 } = props;
+	let t2;
+	if ($[0] !== t0) {
+		t2 = t0 === void 0 ? [] : t0;
+		$[0] = t0;
+		$[1] = t2;
+	} else t2 = $[1];
+	const inputs = t2;
+	let t3;
+	if ($[2] !== t1) {
+		t3 = t1 === void 0 ? [] : t1;
+		$[2] = t1;
+		$[3] = t3;
+	} else t3 = $[3];
+	const outputs = t3;
+	const flow = useGraphDirection();
+	const change = useNodeChange();
+	const direction = props.direction ?? flow;
+	const t4 = props.dimmed ?? change?.change === "unchanged" ? "" : void 0;
+	const t5 = props.invalid === true ? "" : void 0;
+	let t6;
+	if ($[4] !== direction || $[5] !== inputs) {
+		t6 = /* @__PURE__ */ jsx(Ports, {
+			direction,
+			kind: "target",
+			ports: inputs
+		});
+		$[4] = direction;
+		$[5] = inputs;
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== props) {
+		t7 = headerOf(props);
+		$[7] = props;
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] !== change || $[10] !== props.tag) {
+		t8 = props.tag ?? changeTagOf(change);
+		$[9] = change;
+		$[10] = props.tag;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== props || $[13] !== t8) {
+		t9 = contentOf({
+			...props,
+			tag: t8
+		});
+		$[12] = props;
+		$[13] = t8;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== direction || $[16] !== outputs) {
+		t10 = /* @__PURE__ */ jsx(Ports, {
+			direction,
+			kind: "source",
+			ports: outputs
+		});
+		$[15] = direction;
+		$[16] = outputs;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== branch) {
+		t11 = branch === void 0 ? null : /* @__PURE__ */ jsx(Branch, { children: branch });
+		$[18] = branch;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== t10 || $[21] !== t11 || $[22] !== t4 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(Card$1, {
+			"data-dimmed": t4,
+			"data-invalid": t5,
+			children: [
+				t6,
+				t7,
+				t9,
+				t10,
+				t11
+			]
+		});
+		$[20] = t10;
+		$[21] = t11;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t7;
+		$[26] = t9;
+		$[27] = t12;
+	} else t12 = $[27];
+	return t12;
+}
+//#endregion
+//#region src/directed-graph/card.tsx
+/**
+* Renders the node's card from its data.
+*
+* @param props - React Flow's node props: the node's id and its data among them.
+*/
+function Card(t0) {
+	const $ = c(17);
+	const { data, id } = t0;
+	const toggle = useToggle();
+	const { branch, tag } = data;
+	let t1;
+	if ($[0] !== branch || $[1] !== id || $[2] !== toggle) {
+		t1 = branch === void 0 ? void 0 : /* @__PURE__ */ jsx(Button, {
+			"aria-expanded": branch.expanded,
+			className: "nokey nodrag nopan",
+			onClick: (event) => {
+				event.stopPropagation();
+				toggle(id);
+			},
+			palette: "neutral",
+			size: "xs",
+			variant: "surface",
+			children: branch.label
+		});
+		$[0] = branch;
+		$[1] = id;
+		$[2] = toggle;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== tag) {
+		t2 = tag === void 0 ? void 0 : /* @__PURE__ */ jsx(Badge, {
+			"aria-hidden": true,
+			palette: "neutral",
+			size: "sm",
+			variant: "surface",
+			children: tag
+		});
+		$[4] = tag;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== data.detail || $[7] !== data.dimmed || $[8] !== data.icon || $[9] !== data.inputs || $[10] !== data.kind || $[11] !== data.label || $[12] !== data.outputs || $[13] !== data.status || $[14] !== t1 || $[15] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Node$1, {
+			branch: t1,
+			dimmed: data.dimmed,
+			icon: data.icon,
+			inputs: data.inputs,
+			outputs: data.outputs,
+			status: data.status,
+			subtitle: data.kind,
+			tag: t2,
+			title: data.label,
+			children: data.detail
+		});
+		$[6] = data.detail;
+		$[7] = data.dimmed;
+		$[8] = data.icon;
+		$[9] = data.inputs;
+		$[10] = data.kind;
+		$[11] = data.label;
+		$[12] = data.outputs;
+		$[13] = data.status;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+	} else t3 = $[16];
+	return t3;
+}
+//#endregion
+//#region src/graph/drop.ts
+/**
+* Type of the drag data a palette item writes its id under.
+*/
+const ITEM = "application/x-stealth-graph-item";
+/**
+* Returns the handlers that take a palette item's drop and report it with the point it was dropped
+* at, or no handler without a caller to report to.
+*
+* @param onDropItem - Called with the item's id and the point it was dropped at.
+*/
+function useDrop(onDropItem) {
+	const $ = c(4);
+	const flow = useReactFlow();
+	if (onDropItem === void 0) {
+		let t0;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t0 = {};
+			$[0] = t0;
+		} else t0 = $[0];
+		return t0;
+	}
+	let t0;
+	if ($[1] !== flow || $[2] !== onDropItem) {
+		t0 = {
+			onDragOver: _temp$3,
+			onDrop: (event_0) => {
+				const item = event_0.dataTransfer.getData(ITEM);
+				if (item === "") return;
+				event_0.preventDefault();
+				onDropItem(item, flow.screenToFlowPosition({
+					x: event_0.clientX,
+					y: event_0.clientY
+				}));
+			}
+		};
+		$[1] = flow;
+		$[2] = onDropItem;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
+}
+function _temp$3(event) {
+	if (!event.dataTransfer.types.includes("application/x-stealth-graph-item")) return;
+	event.preventDefault();
+	event.dataTransfer.dropEffect = "copy";
+}
+/**
+* Returns a function that returns the middle of what the canvas shows, in the graph's coordinates,
+* or the graph's origin while no canvas renders.
+*/
+function useViewCentre() {
+	const $ = c(3);
+	const flow = useReactFlow();
+	const store = useStoreApi();
+	let t0;
+	if ($[0] !== flow || $[1] !== store) {
+		t0 = () => {
+			const { domNode, height, width } = store.getState();
+			if (domNode === null) return {
+				x: 0,
+				y: 0
+			};
+			const box = domNode.getBoundingClientRect();
+			return flow.screenToFlowPosition({
+				x: box.left + width / 2,
+				y: box.top + height / 2
+			});
+		};
+		$[0] = flow;
+		$[1] = store;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+//#endregion
+//#region src/graph/editing.ts
+/**
+* Turns React Flow's changes into whole graphs for a caller's history: a connection, a move that
+* ends and a removal each arrive once, as the graph after the edit and a step that names it.
+*
+* @remarks
+*   A drag reports a node's position on every frame and a last position with `dragging` false, and
+*   an arrow key reports one position with `dragging` false, so a move arrives once, where it ends.
+*   A removal by Delete, Backspace or an edge's remove control arrives once with every node and
+*   edge it removed, and a removed node takes its edges with it. A connection that repeats an edge
+*   the graph has already adds nothing and arrives as nothing. A selection and a measurement are no
+*   edits. The caller's own `onConnect`, `onDelete` and `onNodesChange` run first, so a caller that
+*   applies React Flow's changes keeps doing so.
+*/
+/**
+* Returns the positions a move ended at, or no change while no move ended.
+*/
+function endsOf(changes) {
+	return changes.filter((change) => change.type === "position" && change.dragging === false);
+}
+/**
+* Returns the handlers that report each edit through `onGraphChange` after the caller's own.
+*
+* @typeParam N - One node of the graph.
+* @typeParam E - One edge of the graph.
+*/
+function editingOf(input) {
+	const { edges, nodes, onGraphChange } = input;
+	return {
+		onConnect: (connection) => {
+			input.onConnect?.(connection);
+			const next = addEdge(connection, edges);
+			const added = next.filter((edge) => !edges.includes(edge)).map(({ id }) => id);
+			if (added.length > 0) onGraphChange({
+				edges: next,
+				nodes
+			}, {
+				edges: added,
+				nodes: [],
+				type: "connect"
+			});
+		},
+		onDelete: (removed) => {
+			input.onDelete?.(removed);
+			const [nodeIds, edgeIds] = [new Set(removed.nodes.map(({ id }) => id)), new Set(removed.edges.map(({ id }) => id))];
+			const graph = {
+				edges: edges.filter(({ id }) => !edgeIds.has(id)),
+				nodes: nodes.filter(({ id }) => !nodeIds.has(id))
+			};
+			onGraphChange(graph, {
+				edges: [...edgeIds],
+				nodes: [...nodeIds],
+				type: "remove"
+			});
+		},
+		onNodesChange: (changes) => {
+			input.onNodesChange?.(changes);
+			const ends = endsOf(changes);
+			if (ends.length > 0) onGraphChange({
+				edges,
+				nodes: applyNodeChanges(ends, nodes)
+			}, {
+				edges: [],
+				nodes: ends.map(({ id }) => id),
+				type: "move"
+			});
+		}
+	};
+}
+/**
+* Returns the handlers a canvas gives React Flow for its edits and drops: the drop target, and the
+* edit handlers while the caller takes edits through `onGraphChange`.
+*
+* @typeParam N - One node of the graph.
+* @typeParam E - One edge of the graph.
+*/
+function useEdits(input) {
+	const $ = c(14);
+	const drop = useDrop(input.onDropItem);
+	const { onGraphChange } = input;
+	if (onGraphChange === void 0) return drop;
+	let t0;
+	if ($[0] !== input.edges) {
+		t0 = input.edges ?? [];
+		$[0] = input.edges;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== input.nodes) {
+		t1 = input.nodes ?? [];
+		$[2] = input.nodes;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	let t3;
+	if ($[4] !== drop || $[5] !== input || $[6] !== onGraphChange || $[7] !== t0 || $[8] !== t1) {
+		const graph = {
+			edges: t0,
+			nodes: t1
+		};
+		t2 = drop;
+		t3 = editingOf({
+			...input,
+			...graph,
+			onGraphChange
+		});
+		$[4] = drop;
+		$[5] = input;
+		$[6] = onGraphChange;
+		$[7] = t0;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else {
+		t2 = $[9];
+		t3 = $[10];
+	}
+	let t4;
+	if ($[11] !== t2 || $[12] !== t3) {
+		t4 = {
+			...t2,
+			...t3
+		};
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+//#endregion
+//#region src/graph/names.ts
+/**
+* Named copy of each node object, kept while the node's name is unchanged.
+*/
+const NODES = /* @__PURE__ */ new WeakMap();
+/**
+* Named copy of each edge object, kept while the edge's name is unchanged.
+*/
+const EDGES = /* @__PURE__ */ new WeakMap();
+/**
+* Returns the name a node takes: its own `ariaLabel`, else its data's string `label`.
+*/
+function nameOf(node) {
+	const label = node.data["label"];
+	return node.ariaLabel ?? (typeof label === "string" ? label : void 0);
+}
+/**
+* Returns the copy of an element named `name`: the kept copy while its name matches, else a new
+* copy, which replaces it.
+*/
+function named(kept, element, name) {
+	const copy = kept.get(element);
+	if (copy?.ariaLabel === name) return copy;
+	const made = {
+		...element,
+		ariaLabel: name
+	};
+	kept.set(element, made);
+	return made;
+}
+/**
+* Returns no word, for a node or an edge the canvas marks no change on.
+*/
+function none() {}
+/**
+* Returns the nodes, each without a name of its own named by its data's `label`, and each with a
+* change named with the change's word after its name, else after its id.
+*
+* @typeParam N - One node of the graph.
+* @param nodes - The graph's nodes.
+* @param changeOf - Returns the word of a node's change by its id, or undefined for none.
+*/
+function namedNodes(nodes, changeOf = none) {
+	const kept = NODES;
+	return nodes.map((node) => {
+		const name = nameOf(node);
+		const word = changeOf(node.id);
+		if (word !== void 0) return named(kept, node, `${name ?? node.id}, ${word}`);
+		return node.ariaLabel !== void 0 || name === void 0 ? node : named(kept, node, name);
+	});
+}
+/**
+* Returns the edges, each without a name of its own named by the names of its ends, and each with a
+* change named with the change's word after its name.
+*
+* @typeParam E - One edge of the graph.
+* @param edges - Links between the nodes.
+* @param nodes - The graph's nodes, whose names name the ends. An end without a name is named by
+*   its id.
+* @param nameEdge - The canvas's words for an edge between two named ends.
+* @param changeOf - Returns the word of an edge's change by its id, or undefined for none.
+*/
+function namedEdges(edges, nodes, nameEdge, changeOf = none) {
+	const kept = EDGES;
+	const names = new Map(nodes.map((node) => [node.id, nameOf(node)]));
+	return edges.map((edge) => {
+		const word = changeOf(edge.id);
+		if (edge.ariaLabel !== void 0 && word === void 0) return edge;
+		const name = edge.ariaLabel ?? nameEdge({
+			source: names.get(edge.source) ?? edge.source,
+			target: names.get(edge.target) ?? edge.target
+		});
+		return named(kept, edge, word === void 0 ? name : `${name}, ${word}`);
+	});
+}
+/**
+* Returns the function that reads the word of a node's or an edge's change, or no word while the
+* canvas marks no change.
+*/
+function changesOf(diffed, kind) {
+	return diffed === void 0 ? none : (id) => wordOf(diffed[kind].get(id), diffed.words);
+}
+/**
+* Returns the edges named, and each marked with its change while the canvas marks changes.
+*/
+function edgesOf(edges, nodes, nameEdge, diffed) {
+	const labelled = namedEdges(edges, nodes, nameEdge, changesOf(diffed, "edges"));
+	return diffed === void 0 ? labelled : markedEdges(labelled, diffed);
+}
+/**
+* Returns the graph with its nodes and edges named, leaving out what the graph leaves out.
+*
+* @typeParam N - One node of the graph.
+* @typeParam E - One edge of the graph.
+* @param graph - The nodes and the edges, either of which may be absent.
+* @param nameEdge - The canvas's words for an edge between two named ends.
+* @param diffed - The changes the canvas marks, or undefined for none.
+*/
+function namedGraph({ edges, nodes }, nameEdge, diffed) {
+	return omitUndefined({
+		edges: edges === void 0 ? void 0 : edgesOf(edges, nodes ?? [], nameEdge, diffed),
+		nodes: nodes === void 0 ? void 0 : namedNodes(nodes, changesOf(diffed, "nodes"))
+	});
+}
+/**
+* Room a fit keeps clear on each side of the canvas, in pixels.
+*/
+const PADDING = {
+	bottom: "32px",
+	left: "24px",
+	right: "24px",
+	top: "32px"
+};
+/**
+* How the view fits the graph: at most at its own size, clear of the canvas's edges and the
+* attribution.
+*/
+const FIT = {
+	maxZoom: 1,
+	padding: PADDING
+};
+/**
+* Smallest zoom the view takes.
+*/
+const MIN_ZOOM = .1;
+//#endregion
+//#region src/graph/edge.tsx
+/**
+* Renders the kit's edge: React Flow's bezier between two ports, and a control that removes it.
+*
+* @remarks
+*   React Flow's edge is a path 1px wide with a thin area the pointer can hit, which a mouse hits
+*   with difficulty and a finger misses. While the canvas takes edits and has a `removeGlyph`, a
+*   deletable edge renders the actions `IconButton` at its middle with the glyph, in React Flow's
+*   label layer, a tab stop like any button. The control is named by the edge data's
+*   `removeLabel`, else by the canvas's `removeName` over the names of the edge's ends, so an edge
+*   a person connects has a control too. A press removes the edge through React Flow, which calls
+*   `onEdgesDelete` as the Delete key does. The control leaves with its edge, so focus then moves
+*   to the node the edge left, unless the removal was refused.
+*/
+/**
+* Renders the box the remove control is placed in, with the recipe's remove class.
+*/
+const Place = withContext("span", "remove");
+/**
+* Returns the name of an edge's end: the node's own name, else its id.
+*/
+function endOf(state, id) {
+	return nameOf(state.nodeLookup.get(id)) ?? id;
+}
+/**
+* Focuses the node of an id inside a canvas, where it renders.
+*
+* @param canvas - React Flow's element, which contains the canvas's nodes.
+*/
+function focusNode(canvas, id) {
+	[...canvas.querySelectorAll(".react-flow__node")].find((node) => node.dataset["id"] === id)?.focus();
+}
+/**
+* Removes an edge through React Flow, then focuses the node it left unless the removal was
+* refused.
+*
+* @param flow - React Flow's instance, which removes the edge and calls the canvas's handlers.
+* @param canvas - React Flow's element, which contains the canvas's nodes.
+* @param edge - The edge's id and the id of the node it leaves.
+*/
+async function removed(flow, canvas, edge) {
+	const { deletedEdges } = await flow.deleteElements({ edges: [{ id: edge.id }] });
+	if (deletedEdges.length > 0) focusNode(canvas, edge.source);
+}
+/**
+* Renders the edge's path, and its remove control while the canvas takes edits.
+*
+* @param props - React Flow's edge props: its ends, its sides and its data among them.
+*/
+function Edge$1(props) {
+	const $ = c(29);
+	let t0;
+	if ($[0] !== props) {
+		t0 = getBezierPath(props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [path, labelX, labelY] = t0;
+	const flow = useReactFlow();
+	const canvas = useStore(_temp$2);
+	let t1;
+	if ($[2] !== props.source) {
+		t1 = (state_0) => endOf(state_0, props.source);
+		$[2] = props.source;
+		$[3] = t1;
+	} else t1 = $[3];
+	const source = useStore(t1);
+	let t2;
+	if ($[4] !== props.target) {
+		t2 = (state_1) => endOf(state_1, props.target);
+		$[4] = props.target;
+		$[5] = t2;
+	} else t2 = $[5];
+	const target = useStore(t2);
+	const { editable, glyph, name } = use(RemovalContext);
+	const t3 = `${String(labelX)}px`;
+	const t4 = `${String(labelY)}px`;
+	let t5;
+	if ($[6] !== t3 || $[7] !== t4) {
+		t5 = {
+			"--graph-edge-x": t3,
+			"--graph-edge-y": t4
+		};
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	const at = t5;
+	const t6 = props.id;
+	let t7;
+	if ($[9] !== props.markerEnd || $[10] !== props.markerStart) {
+		t7 = omitUndefined({
+			markerEnd: props.markerEnd,
+			markerStart: props.markerStart
+		});
+		$[9] = props.markerEnd;
+		$[10] = props.markerStart;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== path || $[13] !== props.id || $[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(BaseEdge, {
+			id: t6,
+			path,
+			...t7
+		});
+		$[12] = path;
+		$[13] = props.id;
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== at || $[17] !== canvas || $[18] !== editable || $[19] !== flow || $[20] !== glyph || $[21] !== name || $[22] !== props || $[23] !== source || $[24] !== target) {
+		t9 = editable && props.deletable !== false && glyph !== void 0 ? /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(Place, {
+			className: "nodrag nopan",
+			style: at,
+			children: /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": props.data?.removeLabel ?? name({
+					source,
+					target
+				}),
+				onClick: () => {
+					removed(flow, canvas, props);
+				},
+				size: "xs",
+				variant: "outline",
+				children: glyph
+			})
+		}) }) : null;
+		$[16] = at;
+		$[17] = canvas;
+		$[18] = editable;
+		$[19] = flow;
+		$[20] = glyph;
+		$[21] = name;
+		$[22] = props;
+		$[23] = source;
+		$[24] = target;
+		$[25] = t9;
+	} else t9 = $[25];
+	let t10;
+	if ($[26] !== t8 || $[27] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Fragment, { children: [t8, t9] });
+		$[26] = t8;
+		$[27] = t9;
+		$[28] = t10;
+	} else t10 = $[28];
+	return t10;
+}
+function _temp$2(state) {
+	return state.domNode;
+}
+//#endregion
+//#region src/graph/label-node.tsx
+/**
+* Port edges enter, unless the data states the node's inputs.
+*/
+const INPUTS = [{
+	id: "in",
+	label: "In"
+}];
+/**
+* Port edges leave, unless the data states the node's outputs.
+*/
+const OUTPUTS = [{
+	id: "out",
+	label: "Out"
+}];
+/**
+* Renders the card of a built-in node from its data, with the ports its type has.
+*
+* @param props - React Flow's node props: its data and its type among them.
+*/
+function LabelNode(t0) {
+	const $ = c(18);
+	const { data, type } = t0;
+	let t1;
+	if ($[0] !== data.inputs || $[1] !== type) {
+		t1 = data.inputs ?? (type === "input" ? [] : INPUTS);
+		$[0] = data.inputs;
+		$[1] = type;
+		$[2] = t1;
+	} else t1 = $[2];
+	const inputs = t1;
+	let t2;
+	if ($[3] !== data.outputs || $[4] !== type) {
+		t2 = data.outputs ?? (type === "output" ? [] : OUTPUTS);
+		$[3] = data.outputs;
+		$[4] = type;
+		$[5] = t2;
+	} else t2 = $[5];
+	const outputs = t2;
+	const t3 = data.label;
+	let t4;
+	if ($[6] !== data.icon || $[7] !== data.invalid || $[8] !== data.problem || $[9] !== data.status || $[10] !== data.subtitle) {
+		t4 = omitUndefined({
+			icon: data.icon,
+			invalid: data.invalid,
+			problem: data.problem,
+			status: data.status,
+			subtitle: data.subtitle
+		});
+		$[6] = data.icon;
+		$[7] = data.invalid;
+		$[8] = data.problem;
+		$[9] = data.status;
+		$[10] = data.subtitle;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== data.detail || $[13] !== data.label || $[14] !== inputs || $[15] !== outputs || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Node$1, {
+			inputs,
+			outputs,
+			title: t3,
+			...t4,
+			children: data.detail
+		});
+		$[12] = data.detail;
+		$[13] = data.label;
+		$[14] = inputs;
+		$[15] = outputs;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
+}
+//#endregion
+//#region src/graph/types.ts
+/**
+* Maps React Flow's `default`, `input` and `output` node types to the kit's node.
+*/
+const NODE_TYPES$2 = {
+	default: LabelNode,
+	input: LabelNode,
+	output: LabelNode
+};
+/**
+* Maps React Flow's `default` edge type to the kit's edge.
+*/
+const EDGE_TYPES = { default: Edge$1 };
+//#endregion
+//#region src/graph/settings.ts
+/**
+* React Flow's switches for a canvas that is read and not edited.
+*/
+const READ_ONLY = {
+	deleteKeyCode: null,
+	disableKeyboardA11y: true,
+	edgesFocusable: false,
+	elementsSelectable: false,
+	nodesConnectable: false,
+	nodesDraggable: false
+};
+/**
+* React Flow's switches for a canvas that takes edits: both keys that remove the selection.
+*/
+const EDITABLE = { deleteKeyCode: ["Backspace", "Delete"] };
+/**
+* Returns the props a canvas gives React Flow before the caller's own, for its mode and its
+* words.
+*
+* @param readOnly - Whether the canvas is read and not edited.
+* @param words - The words a screen reader hears.
+*/
+function settingsOf(readOnly, words) {
+	return {
+		ariaLabelConfig: ariaWordsOf(omitUndefined(words), !readOnly),
+		attributionPosition: "bottom-left",
+		edgeTypes: EDGE_TYPES,
+		fitView: true,
+		fitViewOptions: FIT,
+		minZoom: MIN_ZOOM,
+		nodeTypes: NODE_TYPES$2,
+		...readOnly ? READ_ONLY : EDITABLE
+	};
+}
+//#endregion
+//#region src/graph/canvas.tsx
+/**
+* Renders the canvas's box with the recipe's canvas class.
+*/
+const Box$2 = withContext("div", "canvas");
+/**
+* Renders React Flow in the canvas's box with the kit's types, words, names, switches and edits.
+*
+* @typeParam N - One node of the graph.
+* @typeParam E - One edge of the graph.
+* @param props - The graph, its name, its mode, its words, its edits, and React Flow's props.
+*/
+function Canvas(props) {
+	const $ = c(57);
+	let addedLabel;
+	let changedLabel;
+	let changes;
+	let children;
+	let edgeDescription;
+	let edges;
+	let flow;
+	let label;
+	let moveAnnouncement;
+	let nodeDescription;
+	let nodes;
+	let onDropItem;
+	let onGraphChange;
+	let removeGlyph;
+	let removedLabel;
+	let t0;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== props) {
+		({addedLabel, background: t0, changedLabel, changes, children, edgeDescription, edgeName: t1, edges, label, moveAnnouncement, nodeDescription, nodes, onDropItem, onGraphChange, readOnly: t2, removedLabel, removeGlyph, removeName: t3, ...flow} = props);
+		$[0] = props;
+		$[1] = addedLabel;
+		$[2] = changedLabel;
+		$[3] = changes;
+		$[4] = children;
+		$[5] = edgeDescription;
+		$[6] = edges;
+		$[7] = flow;
+		$[8] = label;
+		$[9] = moveAnnouncement;
+		$[10] = nodeDescription;
+		$[11] = nodes;
+		$[12] = onDropItem;
+		$[13] = onGraphChange;
+		$[14] = removeGlyph;
+		$[15] = removedLabel;
+		$[16] = t0;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t3;
+	} else {
+		addedLabel = $[1];
+		changedLabel = $[2];
+		changes = $[3];
+		children = $[4];
+		edgeDescription = $[5];
+		edges = $[6];
+		flow = $[7];
+		label = $[8];
+		moveAnnouncement = $[9];
+		nodeDescription = $[10];
+		nodes = $[11];
+		onDropItem = $[12];
+		onGraphChange = $[13];
+		removeGlyph = $[14];
+		removedLabel = $[15];
+		t0 = $[16];
+		t1 = $[17];
+		t2 = $[18];
+		t3 = $[19];
+	}
+	const background = t0 === void 0 ? true : t0;
+	const edgeName = t1 === void 0 ? edgeNameOf : t1;
+	const readOnly = t2 === void 0 ? false : t2;
+	const removeName = t3 === void 0 ? removeNameOf : t3;
+	const diffed = diffedOf(changes, {
+		addedLabel,
+		changedLabel,
+		removedLabel
+	});
+	let t4;
+	if ($[20] !== edges || $[21] !== flow || $[22] !== nodes || $[23] !== onDropItem || $[24] !== onGraphChange) {
+		t4 = {
+			...flow,
+			edges,
+			nodes,
+			onDropItem,
+			onGraphChange
+		};
+		$[20] = edges;
+		$[21] = flow;
+		$[22] = nodes;
+		$[23] = onDropItem;
+		$[24] = onGraphChange;
+		$[25] = t4;
+	} else t4 = $[25];
+	const edits = useEdits(t4);
+	const T0 = RemovalContext;
+	const t5 = !readOnly;
+	let t6;
+	if ($[26] !== removeGlyph || $[27] !== removeName || $[28] !== t5) {
+		t6 = {
+			editable: t5,
+			glyph: removeGlyph,
+			name: removeName
+		};
+		$[26] = removeGlyph;
+		$[27] = removeName;
+		$[28] = t5;
+		$[29] = t6;
+	} else t6 = $[29];
+	const T1 = DiffContext;
+	const T2 = Box$2;
+	const T3 = ReactFlow;
+	let t7;
+	if ($[30] !== edgeDescription || $[31] !== moveAnnouncement || $[32] !== nodeDescription || $[33] !== readOnly) {
+		t7 = settingsOf(readOnly, {
+			edgeDescription,
+			moveAnnouncement,
+			nodeDescription
+		});
+		$[30] = edgeDescription;
+		$[31] = moveAnnouncement;
+		$[32] = nodeDescription;
+		$[33] = readOnly;
+		$[34] = t7;
+	} else t7 = $[34];
+	const t8 = namedGraph({
+		edges,
+		nodes
+	}, edgeName, diffed);
+	let t9;
+	if ($[35] !== background) {
+		t9 = background ? /* @__PURE__ */ jsx(Background, {}) : null;
+		$[35] = background;
+		$[36] = t9;
+	} else t9 = $[36];
+	let t10;
+	if ($[37] !== T3 || $[38] !== children || $[39] !== edits || $[40] !== flow || $[41] !== label || $[42] !== t7 || $[43] !== t8 || $[44] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(T3, {
+			"aria-label": label,
+			...t7,
+			...flow,
+			...edits,
+			...t8,
+			children: [t9, children]
+		});
+		$[37] = T3;
+		$[38] = children;
+		$[39] = edits;
+		$[40] = flow;
+		$[41] = label;
+		$[42] = t7;
+		$[43] = t8;
+		$[44] = t9;
+		$[45] = t10;
+	} else t10 = $[45];
+	let t11;
+	if ($[46] !== T2 || $[47] !== t10) {
+		t11 = /* @__PURE__ */ jsx(T2, { children: t10 });
+		$[46] = T2;
+		$[47] = t10;
+		$[48] = t11;
+	} else t11 = $[48];
+	let t12;
+	if ($[49] !== T1 || $[50] !== diffed || $[51] !== t11) {
+		t12 = /* @__PURE__ */ jsx(T1, {
+			value: diffed,
+			children: t11
+		});
+		$[49] = T1;
+		$[50] = diffed;
+		$[51] = t11;
+		$[52] = t12;
+	} else t12 = $[52];
+	let t13;
+	if ($[53] !== T0 || $[54] !== t12 || $[55] !== t6) {
+		t13 = /* @__PURE__ */ jsx(T0, {
+			value: t6,
+			children: t12
+		});
+		$[53] = T0;
+		$[54] = t12;
+		$[55] = t6;
+		$[56] = t13;
+	} else t13 = $[56];
+	return t13;
+}
+//#endregion
+//#region src/graph/placed.ts
+/**
+* Fits a preset's view to its layout and reports whether the canvas is still placing its nodes.
+*
+* @remarks
+*   React Flow takes a controlled graph's nodes into its store in an effect of its own, one step
+*   after the render that laid them out, so a canvas shown in that step renders the old positions.
+*   The canvas places until every node has been measured and until React Flow's store has every
+*   node where the layout put it, and the recipe hides the viewport while it places. The view fits
+*   the layout once every node has been measured and whenever the layout moves a node after that,
+*   in an effect that runs after React Flow's, so the bounds are the measured nodes at their new
+*   positions. The fit is at most at the graph's own size and clear of the
+*   canvas's edges, as `Graph.Canvas` fits it. A change that moves no node, such as a new focus,
+*   keeps the view where a person panned and zoomed it. A node a person moved counts for neither:
+*   a drag moves no view, and the step the store trails a drag by does not hide the viewport.
+*/
+/**
+* Ids of no node, for a graph whose nodes nobody moved.
+*/
+const NONE = /* @__PURE__ */ new Set();
+/**
+* Returns a string that differs whenever a node is added, removed or moved.
+*/
+function signatureOf(nodes) {
+	return nodes.map(({ id, position }) => `${id}:${String(position.x)},${String(position.y)}`).join(";");
+}
+/**
+* Fits the view to the laid-out nodes whenever the layout moves them, and returns whether the
+* canvas is still placing them.
+*
+* @param nodes - The nodes where the layout put them.
+* @param complete - Whether every node of the graph has been measured and laid out.
+* @param moved - Ids of the nodes a person moved away from where the layout put them.
+*/
+function usePlaced(nodes, complete, t0) {
+	const $ = c(16);
+	const moved = t0 === void 0 ? NONE : t0;
+	const flow = useReactFlow();
+	const store = useStoreApi();
+	let t1;
+	if ($[0] !== nodes) {
+		t1 = signatureOf(nodes);
+		$[0] = nodes;
+		$[1] = t1;
+	} else t1 = $[1];
+	const signature = t1;
+	let t2;
+	if ($[2] !== moved || $[3] !== nodes) {
+		let t3;
+		if ($[5] !== moved) {
+			t3 = (node) => !moved.has(node.id);
+			$[5] = moved;
+			$[6] = t3;
+		} else t3 = $[6];
+		t2 = signatureOf(nodes.filter(t3));
+		$[2] = moved;
+		$[3] = nodes;
+		$[4] = t2;
+	} else t2 = $[4];
+	const settled = t2;
+	let t3;
+	if ($[7] !== moved) {
+		t3 = (state) => signatureOf(state.nodes.filter((node_0) => !moved.has(node_0.id)));
+		$[7] = moved;
+		$[8] = t3;
+	} else t3 = $[8];
+	const stored = useStore(t3);
+	const fitted = useRef("");
+	let t4;
+	let t5;
+	if ($[9] !== complete || $[10] !== flow || $[11] !== nodes || $[12] !== signature || $[13] !== store) {
+		t4 = () => {
+			if (!complete || fitted.current === signature) return;
+			const { height, width } = store.getState();
+			const bounds = flow.getNodesBounds([...nodes]);
+			fitted.current = signature;
+			flow.setViewport(getViewportForBounds(bounds, width, height, MIN_ZOOM, 1, PADDING));
+		};
+		t5 = [
+			complete,
+			flow,
+			nodes,
+			signature,
+			store
+		];
+		$[9] = complete;
+		$[10] = flow;
+		$[11] = nodes;
+		$[12] = signature;
+		$[13] = store;
+		$[14] = t4;
+		$[15] = t5;
+	} else {
+		t4 = $[14];
+		t5 = $[15];
+	}
+	useEffect(t4, t5);
+	return !complete || stored !== settled;
+}
+//#endregion
+//#region src/graph/summary.ts
+/**
+* Renders the `div` with the recipe's summary class.
+*/
+const Summary = withContext("div", "summary");
+//#endregion
+//#region src/graph/readout.tsx
+/**
+* Renders the words, the clear control and the elements at the row's end in the graph's summary
+* row.
+*
+* @param props - The words, the focus, the clear handler and the elements at the row's end.
+*/
+function Readout(t0) {
+	const $ = c(13);
+	const { children, clearLabel, focused, onClear, text } = t0;
+	let t1;
+	if ($[0] !== text) {
+		t1 = /* @__PURE__ */ jsx("output", { children: text });
+		$[0] = text;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = focused ? void 0 : true;
+	let t3;
+	if ($[2] !== focused || $[3] !== onClear) {
+		t3 = () => {
+			if (focused) onClear();
+		};
+		$[2] = focused;
+		$[3] = onClear;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== clearLabel || $[6] !== t2 || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Button, {
+			"aria-disabled": t2,
+			onClick: t3,
+			size: "sm",
+			variant: "outline",
+			children: clearLabel
+		});
+		$[5] = clearLabel;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== children || $[10] !== t1 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Summary, { children: [
+			t1,
+			t4,
+			children
+		] });
+		$[9] = children;
+		$[10] = t1;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+//#endregion
+//#region src/directed-graph/traced.tsx
+/**
+* Maps the directed graph's node type to its card.
+*/
+const NODE_TYPES$1 = { directed: Card };
+/**
+* Renders the canvas over the graph's view and the readout below it.
+*
+* @param props - The graph, its focus and branches, its words and its direction.
+*/
+function Traced(props) {
+	const $ = c(20);
+	const { clear, onNodesChange, toggle, view } = useTraced(props);
+	const placing = usePlaced(view.nodes, view.complete);
+	const { counts } = view;
+	const { words } = props;
+	const t0 = placing ? "" : void 0;
+	let t1;
+	if ($[0] !== onNodesChange || $[1] !== props.label || $[2] !== t0 || $[3] !== view.edges || $[4] !== view.nodes || $[5] !== words.nodeDescription) {
+		t1 = /* @__PURE__ */ jsx(Canvas, {
+			"data-placing": t0,
+			edges: view.edges,
+			edgesFocusable: false,
+			label: props.label,
+			multiSelectionKeyCode: null,
+			nodeDescription: words.nodeDescription,
+			nodes: view.nodes,
+			nodesConnectable: false,
+			nodesDraggable: false,
+			nodeTypes: NODE_TYPES$1,
+			onNodesChange,
+			selectionKeyCode: null
+		});
+		$[0] = onNodesChange;
+		$[1] = props.label;
+		$[2] = t0;
+		$[3] = view.edges;
+		$[4] = view.nodes;
+		$[5] = words.nodeDescription;
+		$[6] = t1;
+	} else t1 = $[6];
+	const t2 = counts !== void 0;
+	let t3;
+	if ($[7] !== counts || $[8] !== words) {
+		t3 = counts === void 0 ? words.promptLabel : words.summary(counts);
+		$[7] = counts;
+		$[8] = words;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== clear || $[11] !== props.overview || $[12] !== t2 || $[13] !== t3 || $[14] !== words.clearLabel) {
+		t4 = /* @__PURE__ */ jsx(Readout, {
+			clearLabel: words.clearLabel,
+			focused: t2,
+			onClear: clear,
+			text: t3,
+			children: props.overview
+		});
+		$[10] = clear;
+		$[11] = props.overview;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = words.clearLabel;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== t1 || $[17] !== t4 || $[18] !== toggle) {
+		t5 = /* @__PURE__ */ jsxs(BranchProvider, {
+			value: toggle,
+			children: [t1, t4]
+		});
+		$[16] = t1;
+		$[17] = t4;
+		$[18] = toggle;
+		$[19] = t5;
+	} else t5 = $[19];
+	return t5;
+}
+//#endregion
+//#region src/directed-graph/words.ts
+/**
+* Writes the words a directed graph renders, from the caller's words and the English defaults.
+*
+* @remarks
+*   A caller that states a word replaces the default and keeps every other default. The counts of
+*   a branch control are the nodes the press hides or shows, so the words name no kind of node and
+*   suit a lineage and an org chart alike.
+*/
+/**
+* Writes the words of a control that closes a branch, unless stated.
+*/
+function hidden(count) {
+	return `Hide ${String(count)}`;
+}
+/**
+* Writes the words of a control that opens a branch, unless stated.
+*/
+function shown(count) {
+	return `Show ${String(count)}`;
+}
+/**
+* Writes the summary of a trace, unless stated.
+*/
+function summarised({ downstream, name, upstream }) {
+	return `${name}: ${String(upstream)} upstream, ${String(downstream)} downstream`;
+}
+/**
+* English words of a directed graph.
+*/
+const WORDS$1 = {
+	clearLabel: "Clear focus",
+	collapseLabel: hidden,
+	downstreamLabel: "Downstream",
+	edgeName: edgeNameOf,
+	emptyLabel: "No nodes to show.",
+	expandLabel: shown,
+	focusLabel: "Focus",
+	nodeDescription: "Press Enter or Space to trace the node, and Escape to clear the trace.",
+	promptLabel: "Select a node to trace what feeds it and what it feeds.",
+	summary: summarised,
+	upstreamLabel: "Upstream"
+};
+/**
+* Returns the caller's words over the English defaults.
+*
+* @param words - The words the caller states.
+*/
+function wordsOf$1(words) {
+	return {
+		...WORDS$1,
+		...omitUndefined(words)
+	};
+}
+//#endregion
+//#region src/graph/caption.tsx
+/**
+* Renders the `figcaption` with the recipe's caption class.
+*/
+const Shown$1 = withContext("figcaption", "caption");
+/**
+* Renders the caption with the ID the root names the figure by.
+*
+* @param props - The props of the `figcaption`.
+*/
+function Caption(props) {
+	const $ = c(3);
+	useLabelled();
+	const t0 = useCaptionId();
+	let t1;
+	if ($[0] !== props || $[1] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Shown$1, {
+			id: t0,
+			...props
+		});
+		$[0] = props;
+		$[1] = t0;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+//#endregion
+//#region src/graph/empty.ts
+/**
+* Renders the `div` with the recipe's empty class.
+*/
+const Empty = withContext("div", "empty");
+//#endregion
+//#region src/graph/root.tsx
+/**
+* Renders a graph's figure and the React Flow provider every part reads.
+*
+* @remarks
+*   The element is a `figure`, named by its `Graph.Caption` through `aria-labelledby` while a
+*   caption renders. The root renders React Flow's provider, so the controls and the overview map
+*   read the canvas's store from anywhere inside the figure. `direction` tells every node which
+*   sides its ports are on. The root takes the recipe's `ratio`, which sets the canvas's height.
+*/
+/**
+* Renders the `figure` that provides the recipe's variants.
+*/
+const Figure = withProvider("figure", "root");
+/**
+* Renders the figure inside React Flow's provider, named by its caption while one renders.
+*
+* @param props - The direction, the recipe's variants and the props of a `figure`.
+* @returns The `figure` element inside the providers.
+*/
+function Root(t0) {
+	const $ = c(12);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({direction: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const direction = t1 === void 0 ? "down" : t1;
+	const captionId = useId();
+	const [captioned, setCaptioned] = useState(false);
+	const t2 = captioned ? captionId : void 0;
+	let t3;
+	if ($[3] !== props || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Figure, {
+			"aria-labelledby": t2,
+			...props
+		});
+		$[3] = props;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== captionId || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(LabellingProvider, {
+			value: setCaptioned,
+			children: /* @__PURE__ */ jsx(CaptionProvider, {
+				value: captionId,
+				children: t3
+			})
+		});
+		$[6] = captionId;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== direction || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(DirectionContext, {
+			value: direction,
+			children: t4
+		}) });
+		$[9] = direction;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+//#endregion
+//#region src/directed-graph/directed-graph.tsx
+/**
+* Splits a directed graph's props into its words, the canvas's props and the figure's props.
+*/
+function split$1(props) {
+	const { clearLabel, collapsed, collapseLabel, collapsible, defaultCollapsed, defaultFocus, depth, downstreamLabel, edgeName, edges, emptyLabel, expandLabel, focus, focusLabel, label, nodeDescription, nodes, onCollapsedChange, onFocusChange, overview, promptLabel, summary, trace, upstreamLabel, ...rest } = props;
+	const words = {
+		clearLabel,
+		collapseLabel,
+		downstreamLabel,
+		edgeName,
+		emptyLabel,
+		expandLabel
+	};
+	const more = {
+		focusLabel,
+		nodeDescription,
+		promptLabel,
+		summary,
+		upstreamLabel
+	};
+	const state = {
+		collapsed,
+		collapsible,
+		defaultCollapsed,
+		defaultFocus,
+		depth,
+		focus,
+		trace
+	};
+	const graph = {
+		edges,
+		label,
+		nodes,
+		onCollapsedChange,
+		onFocusChange,
+		overview
+	};
+	return [
+		{
+			...words,
+			...more
+		},
+		{
+			...state,
+			...graph
+		},
+		rest
+	];
+}
+/**
+* Renders the figure: the controls, the canvas, its readout with the overview, and the caption,
+* or the empty state while the graph has no node.
+*
+* @param props - The graph, its focus and branches, its parts, its words and the figure's props.
+*/
+function DirectedGraph(props) {
+	const $ = c(21);
+	let caption;
+	let controls;
+	let direction;
+	let own;
+	let root;
+	let t0;
+	if ($[0] !== props) {
+		const [stated, t1, rest] = split$1(props);
+		own = t1;
+		const { caption: t2, controls: t3, direction: t4, ...t5 } = rest;
+		caption = t2;
+		controls = t3;
+		root = t5;
+		direction = t4 === void 0 ? "down" : t4;
+		t0 = wordsOf$1(stated);
+		$[0] = props;
+		$[1] = caption;
+		$[2] = controls;
+		$[3] = direction;
+		$[4] = own;
+		$[5] = root;
+		$[6] = t0;
+	} else {
+		caption = $[1];
+		controls = $[2];
+		direction = $[3];
+		own = $[4];
+		root = $[5];
+		t0 = $[6];
+	}
+	const words = t0;
+	let t1;
+	if ($[7] !== direction || $[8] !== root) {
+		t1 = {
+			direction,
+			...root
+		};
+		$[7] = direction;
+		$[8] = root;
+		$[9] = t1;
+	} else t1 = $[9];
+	const figure = t1;
+	let t2;
+	if ($[10] !== controls || $[11] !== direction || $[12] !== own || $[13] !== words) {
+		t2 = own.nodes.length === 0 ? /* @__PURE__ */ jsx(Empty, { children: words.emptyLabel }) : /* @__PURE__ */ jsxs(Fragment, { children: [controls, /* @__PURE__ */ jsx(Traced, {
+			direction,
+			words,
+			...own
+		})] });
+		$[10] = controls;
+		$[11] = direction;
+		$[12] = own;
+		$[13] = words;
+		$[14] = t2;
+	} else t2 = $[14];
+	let t3;
+	if ($[15] !== caption) {
+		t3 = caption === void 0 ? null : /* @__PURE__ */ jsx(Caption, { children: caption });
+		$[15] = caption;
+		$[16] = t3;
+	} else t3 = $[16];
+	let t4;
+	if ($[17] !== figure || $[18] !== t2 || $[19] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Root, {
+			...figure,
+			children: [t2, t3]
+		});
+		$[17] = figure;
+		$[18] = t2;
+		$[19] = t3;
+		$[20] = t4;
+	} else t4 = $[20];
+	return t4;
+}
+//#endregion
+//#region src/directed-graph/tree.ts
+/**
+* Returns an edge from each item's parent to the item, for every item whose parent is in the list.
+*
+* @typeParam T - One item of the list.
+* @param items - The items, in any order.
+* @param parentOf - Returns an item's parent's id, or undefined for an item without one.
+*/
+function treeEdges(items, parentOf) {
+	const ids = new Set(items.map((item) => item.id));
+	return items.flatMap((item) => {
+		const parent = parentOf(item);
+		return parent !== void 0 && ids.has(parent) ? [{
+			id: `${parent}-${item.id}`,
+			source: parent,
+			target: item.id
+		}] : [];
+	});
+}
+//#endregion
+//#region src/graph/control.tsx
+/**
+* Renders the control as a toolbar item that zooms or fits the view when pressed.
+*
+* @param props - The action, the name and the item's props.
+*/
+function Control(t0) {
+	const $ = c(11);
+	let action;
+	let label;
+	let props;
+	if ($[0] !== t0) {
+		({action, label, ...props} = t0);
+		$[0] = t0;
+		$[1] = action;
+		$[2] = label;
+		$[3] = props;
+	} else {
+		action = $[1];
+		label = $[2];
+		props = $[3];
+	}
+	const flow = useReactFlow();
+	let t1;
+	if ($[4] !== action || $[5] !== flow) {
+		t1 = function act() {
+			if (action === "fit") flow.fitView(FIT);
+			else if (action === "zoomIn") flow.zoomIn();
+			else flow.zoomOut();
+		};
+		$[4] = action;
+		$[5] = flow;
+		$[6] = t1;
+	} else t1 = $[6];
+	const act = t1;
+	let t2;
+	if ($[7] !== act || $[8] !== label || $[9] !== props) {
+		t2 = /* @__PURE__ */ jsx(RovingFocus.Item, {
+			"aria-label": label,
+			as: IconButton,
+			onClick: act,
+			...props
+		});
+		$[7] = act;
+		$[8] = label;
+		$[9] = props;
+		$[10] = t2;
+	} else t2 = $[10];
+	return t2;
+}
+//#endregion
+//#region src/graph/controls.tsx
+/**
+* Renders the roving focus group with the recipe's controls class.
+*/
+const Bar = withContext(RovingFocus.Root, "controls");
+/**
+* Renders the toolbar with small ghost buttons.
+*
+* @param props - The name and the group's props.
+*/
+function Controls(t0) {
+	const $ = c(7);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({label: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const label = t1 === void 0 ? "Canvas" : t1;
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			size: "sm",
+			variant: "ghost"
+		};
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== label || $[5] !== props) {
+		t3 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: t2,
+			children: /* @__PURE__ */ jsx(Bar, {
+				"aria-label": label,
+				className: "nokey",
+				role: "toolbar",
+				...props
+			})
+		});
+		$[4] = label;
+		$[5] = props;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+//#endregion
+//#region src/graph/minimap.tsx
+/**
+* Renders the box the map is placed in, with the recipe's overview class.
+*/
+const Box$1 = withContext("div", "overview");
+/**
+* Renders React Flow's minimap in the overview box, named, pannable and zoomable.
+*
+* @param props - The name and the props of React Flow's minimap.
+*/
+function MiniMap$1(t0) {
+	const $ = c(6);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({label: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const label = t1 === void 0 ? "Overview" : t1;
+	let t2;
+	if ($[3] !== label || $[4] !== props) {
+		t2 = /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(MiniMap, {
+			ariaLabel: label,
+			pannable: true,
+			zoomable: true,
+			...props
+		}) });
+		$[3] = label;
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+//#endregion
+//#region src/graph/palette-item.tsx
+/**
+* Renders the item as a button a person drags onto the canvas or presses.
+*
+* @param props - The kind of node, what a press does, and the button's props.
+*/
+function PaletteItem(t0) {
+	const $ = c(14);
+	let item;
+	let onAdd;
+	let props;
+	if ($[0] !== t0) {
+		({item, onAdd, ...props} = t0);
+		$[0] = t0;
+		$[1] = item;
+		$[2] = onAdd;
+		$[3] = props;
+	} else {
+		item = $[1];
+		onAdd = $[2];
+		props = $[3];
+	}
+	const centre = useViewCentre();
+	let t1;
+	if ($[4] !== centre || $[5] !== item || $[6] !== onAdd) {
+		t1 = () => {
+			onAdd(item, centre());
+		};
+		$[4] = centre;
+		$[5] = item;
+		$[6] = onAdd;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== item) {
+		t2 = (event) => {
+			event.dataTransfer.setData(ITEM, item);
+			event.dataTransfer.effectAllowed = "copy";
+		};
+		$[8] = item;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== props || $[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			draggable: true,
+			onClick: t1,
+			onDragStart: t2,
+			variant: "outline",
+			...props
+		});
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
+}
+//#endregion
+//#region src/graph/zoom-level.tsx
+/**
+* Renders the canvas's zoom level as a percentage in the toolbar.
+*
+* @remarks
+*   The element is an `output`, which reads its value to a screen reader when it changes. The
+*   percentage is written in `locale`, else the nearest `LocaleProvider`'s, else the runtime's.
+*/
+/**
+* Renders the `output` with the recipe's level class.
+*/
+const Shown = withContext("output", "level");
+/**
+* Renders the canvas's zoom as a percentage.
+*
+* @param props - The locale and the props of the `output`.
+*/
+function ZoomLevel(t0) {
+	const $ = c(14);
+	let locale;
+	let props;
+	if ($[0] !== t0) {
+		({locale, ...props} = t0);
+		$[0] = t0;
+		$[1] = locale;
+		$[2] = props;
+	} else {
+		locale = $[1];
+		props = $[2];
+	}
+	const zoom = useStore(_temp$1);
+	const scoped = use(LocaleContext)?.locale;
+	let T0;
+	let t1;
+	let t2;
+	if ($[3] !== locale || $[4] !== props || $[5] !== scoped || $[6] !== zoom) {
+		const percent = new Intl.NumberFormat(locale ?? scoped, { style: "percent" });
+		T0 = Shown;
+		t1 = props;
+		t2 = percent.format(zoom);
+		$[3] = locale;
+		$[4] = props;
+		$[5] = scoped;
+		$[6] = zoom;
+		$[7] = T0;
+		$[8] = t1;
+		$[9] = t2;
+	} else {
+		T0 = $[7];
+		t1 = $[8];
+		t2 = $[9];
+	}
+	let t3;
+	if ($[10] !== T0 || $[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			children: t2
+		});
+		$[10] = T0;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
+}
+function _temp$1(state) {
+	return state.transform[2];
+}
+//#endregion
+//#region src/graph/index.ts
+var graph_exports = /* @__PURE__ */ __exportAll({
+	Canvas: () => Canvas,
+	Caption: () => Caption,
+	Control: () => Control,
+	Controls: () => Controls,
+	Edge: () => Edge$1,
+	Empty: () => Empty,
+	LabelNode: () => LabelNode,
+	MiniMap: () => MiniMap$1,
+	Node: () => Node$1,
+	PaletteItem: () => PaletteItem,
+	Root: () => Root,
+	Summary: () => Summary,
+	ZoomLevel: () => ZoomLevel,
+	edgeTypes: () => EDGE_TYPES,
+	nodeTypes: () => NODE_TYPES$2,
+	useGraphDirection: () => useGraphDirection
+});
+//#endregion
+//#region src/layout/start.ts
+/**
+* Returns a seat for each id, linked to the seats its links reach. A link with an end outside the
+* graph links nothing.
+*/
+function seatsOf(ids, links) {
+	const seats = ids.map((id) => ({
+		children: [],
+		depth: -1,
+		id,
+		leaves: 1,
+		neighbours: /* @__PURE__ */ new Set()
+	}));
+	const byId = new Map(seats.map((seat) => [seat.id, seat]));
+	for (const { source, target } of links) {
+		const [from, to] = [byId.get(source), byId.get(target)];
+		if (from !== void 0 && to !== void 0) {
+			from.neighbours.add(to);
+			to.neighbours.add(from);
+		}
+	}
+	return seats;
+}
+/**
+* Returns the seats in an order the number source shuffles.
+*/
+function shuffled(seats, random) {
+	return seats.map((seat) => ({
+		key: random(),
+		seat
+	})).toSorted((a, b) => a.key - b.key).map(({ seat }) => seat);
+}
+/**
+* Returns the seats in their order, except that each seat linked to the one before it comes next.
+*/
+function chained(seats) {
+	const chain = [];
+	const left = [...seats];
+	for (let at = 0; at < seats.length; at += 1) {
+		const last = chain.at(-1);
+		const next = last === void 0 ? 0 : left.findIndex((seat) => last.neighbours.has(seat));
+		chain.push(...left.splice(Math.max(next, 0), 1));
+	}
+	return chain;
+}
+/**
+* Walks each part breadth first from its most-linked seat, gives every seat its depth and its
+* children, and returns the seat each part starts from.
+*/
+function rootsOf(seats, random) {
+	const roots = [];
+	for (const hub of seats.toSorted((a, b) => b.neighbours.size - a.neighbours.size)) {
+		if (hub.depth >= 0) continue;
+		const part = [hub];
+		hub.depth = 0;
+		roots.push(hub);
+		for (const seat of part) {
+			const unvisited = [...seat.neighbours].filter((neighbour) => neighbour.depth < 0);
+			for (const child of chained(shuffled(unvisited, random))) {
+				child.depth = seat.depth + 1;
+				seat.children.push(child);
+				part.push(child);
+			}
+		}
+		for (const seat of part.toReversed()) if (seat.children.length > 0) seat.leaves = seat.children.reduce((sum, child) => sum + child.leaves, 0);
+	}
+	return roots;
+}
+/**
+* Returns the start of every node of a force layout.
+*
+* @param ids - The graph's nodes.
+* @param links - The links between the nodes, read as undirected.
+* @param random - The number source the order of each node's neighbours and the first angle come
+*   from.
+* @param step - The distance between two rings, in pixels.
+*/
+function startsOf(ids, links, random, step) {
+	const roots = rootsOf(seatsOf(ids, links), random);
+	const total = roots.reduce((sum, root) => sum + root.leaves, 0);
+	const offset = roots.length > 1 ? 1 : 0;
+	const arcs = [];
+	const starts = /* @__PURE__ */ new Map();
+	let from = random() * Math.PI * 2;
+	for (const seat of roots) {
+		const to = from + Math.PI * 2 * seat.leaves / total;
+		arcs.push({
+			from,
+			seat,
+			to
+		});
+		from = to;
+	}
+	for (const arc of arcs) {
+		const angle = (arc.from + arc.to) / 2;
+		const radius = (arc.seat.depth + offset) * step;
+		let start = arc.from;
+		starts.set(arc.seat.id, {
+			x: Math.cos(angle) * radius,
+			y: Math.sin(angle) * radius
+		});
+		for (const seat of arc.seat.children) {
+			const end = start + (arc.to - arc.from) * seat.leaves / arc.seat.leaves;
+			arcs.push({
+				from: start,
+				seat,
+				to: end
+			});
+			start = end;
+		}
+	}
+	return starts;
+}
+//#endregion
+//#region src/layout/force.ts
+/**
+* Length of a link of strength 1, in pixels.
+*/
+const DISTANCE = 110;
+/**
+* Push between every two nodes. A negative strength pushes.
+*/
+const CHARGE = -500;
+/**
+* Strength of the pull to the middle across the canvas.
+*/
+const PULL = .05;
+/**
+* How much stronger the pull to the middle is up and down than across.
+*/
+const FLATTEN = 3;
+/**
+* Returns how strongly a link ties its ends, from 1 to 2: its strength, 1 unless stated.
+*/
+function strengthOf(link) {
+	return Math.min(Math.max(link.strength ?? 1, 1), 2);
+}
+/**
+* Returns a number source that yields the same numbers for the same seed.
+*/
+function seeded(seed) {
+	let state = seed;
+	return () => {
+		state = (state * 1664525 + 1013904223) % 4294967296;
+		return state / 4294967296;
+	};
+}
+/**
+* Returns the simulation's nodes at their starts.
+*/
+function bodiesOf(nodes, starts) {
+	return nodes.map((node) => {
+		const size = sizeOf(node);
+		const { x, y } = starts.get(node.id);
+		return {
+			node,
+			radius: Math.hypot(size.width, size.height) / 2,
+			size,
+			x,
+			y
+		};
+	});
+}
+/**
+* Returns the simulation's links: each link between two different nodes of the graph.
+*/
+function tiesOf(links, ids) {
+	return links.filter(({ source, target }) => source !== target && ids.has(source) && ids.has(target)).map((link) => ({
+		source: link.source,
+		strength: strengthOf(link),
+		target: link.target
+	}));
+}
+/**
+* Returns the nodes placed by the force simulation, each with the size it was placed by as its
+* initial size.
+*
+* @typeParam N - One node of the graph.
+* @param nodes - The graph's nodes, in any order.
+* @param links - The links between the nodes, read as undirected.
+* @param options - The number of steps and the seed.
+*/
+function layoutForce(nodes, links, options = {}) {
+	const { iterations = 300, seed = 1 } = options;
+	const random = seeded(seed);
+	const ids = nodes.map((node) => node.id);
+	const bodies = bodiesOf(nodes, startsOf(ids, links, random, DISTANCE));
+	const ties = tiesOf(links, new Set(ids));
+	forceSimulation(bodies).randomSource(random).force("link", forceLink(ties).id((body) => body.node.id).distance((tie) => DISTANCE / tie.strength)).force("charge", forceManyBody().strength(CHARGE)).force("collide", forceCollide((body) => body.radius).iterations(2)).force("x", forceX().strength(PULL)).force("y", forceY().strength(PULL * FLATTEN)).force("center", forceCenter()).stop().tick(iterations);
+	const placed = [];
+	for (const { node, size, x = 0, y = 0 } of bodies) placed.push({
+		...node,
+		initialHeight: size.height,
+		initialWidth: size.width,
+		position: {
+			x: x - size.width / 2,
+			y: y - size.height / 2
+		}
+	});
+	return placed;
+}
+//#endregion
+//#region src/network-graph/disc.tsx
+/**
+* Renders the node's box with the recipe's disc node class.
+*/
+const Box = withContext("div", "discNode");
+/**
+* Renders the disc with the recipe's disc class.
+*/
+const Round = withContext("div", "disc");
+/**
+* Renders the hub the handles are in with the recipe's disc hub class.
+*/
+const Hub = withContext("div", "discHub");
+/**
+* Renders the name with the recipe's disc label class.
+*/
+const Name = withContext("span", "discLabel");
+/**
+* Renders the node's disc, its handles, its icon and its name from its data.
+*
+* @param props - React Flow's node props: the node's data among them.
+*/
+function Disc(t0) {
+	const $ = c(12);
+	const { data } = t0;
+	const t1 = `${String(data.disc)}px`;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = { "--graph-disc": t1 };
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const size = t2;
+	const t3 = data.dimmed ? "" : void 0;
+	let t4;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs(Hub, { children: [/* @__PURE__ */ jsx(Handle, {
+			isConnectable: false,
+			position: Position.Top,
+			type: "target"
+		}), /* @__PURE__ */ jsx(Handle, {
+			isConnectable: false,
+			position: Position.Top,
+			type: "source"
+		})] });
+		$[2] = t4;
+	} else t4 = $[2];
+	let t5;
+	if ($[3] !== data.icon || $[4] !== size) {
+		t5 = /* @__PURE__ */ jsxs(Round, {
+			"aria-hidden": true,
+			style: size,
+			children: [t4, data.icon]
+		});
+		$[3] = data.icon;
+		$[4] = size;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== data.label) {
+		t6 = /* @__PURE__ */ jsx(Name, { children: data.label });
+		$[6] = data.label;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	if ($[8] !== t3 || $[9] !== t5 || $[10] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Box, {
+			"data-dimmed": t3,
+			children: [t5, t6]
+		});
+		$[8] = t3;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	return t7;
+}
+//#endregion
+//#region src/network-graph/network.ts
+/**
+* Reads a network's links: the links the canvas renders with the nodes at their ends, and the
+* nodes one node connects to.
+*
+* @remarks
+*   A link whose end is not a node of the graph is ordinary in a filtered graph, and a link from a
+*   node to itself renders nothing, so neither is rendered, counted or weighed. A network's links
+*   read the same either way round, so the walk from a node follows each link both ways. The walk
+*   never counts the node it starts from, and stops at a node it visited before.
+*/
+/**
+* Returns the links between two different nodes of the graph, each with the nodes at its ends.
+*/
+function drawnOf(nodes, links) {
+	const known = new Map(nodes.map((node) => [node.id, node]));
+	return links.flatMap((link) => {
+		const from = known.get(link.source);
+		const to = known.get(link.target);
+		return from === void 0 || to === void 0 || from === to ? [] : [{
+			from,
+			link,
+			to
+		}];
+	});
+}
+/**
+* Returns the nodes within `depth` hops of a node, following each link either way round.
+*
+* @param links - The graph's links.
+* @param id - The node the walk starts from, which is never among the nodes it returns.
+* @param depth - How many hops count. 1 unless stated.
+*/
+function neighborsOf(links, id, depth = 1) {
+	return walk(links.flatMap(({ source, target }) => [{
+		source,
+		target
+	}, {
+		source: target,
+		target: source
+	}]), id, depth, true);
+}
+//#endregion
+//#region src/network-graph/discs.ts
+/**
+* Smallest and largest diameter of a disc, in pixels.
+*/
+const DIAMETER = {
+	max: 68,
+	min: 36
+};
+/**
+* Returns each node, in order, with the diameter of its disc.
+*
+* @param nodes - The graph's nodes.
+* @param links - The links the canvas renders, which a node without a weight is weighed by.
+*/
+function discsOf(nodes, links) {
+	const degree = /* @__PURE__ */ new Map();
+	for (const { source, target } of links) {
+		degree.set(source, (degree.get(source) ?? 0) + 1);
+		degree.set(target, (degree.get(target) ?? 0) + 1);
+	}
+	const weighed = nodes.map((node) => ({
+		node,
+		weight: Math.max(node.weight ?? degree.get(node.id) ?? 0, 0)
+	}));
+	const heaviest = Math.max(0, ...weighed.map(({ weight }) => weight));
+	const span = DIAMETER.max - DIAMETER.min;
+	return weighed.map(({ node, weight }) => ({
+		disc: DIAMETER.min + span * (heaviest === 0 ? 0 : Math.sqrt(weight / heaviest)),
+		node
+	}));
+}
+//#endregion
+//#region src/network-graph/places.ts
+/**
+* Width a name takes for each of its characters, in pixels.
+*/
+const CHARACTER = 8.5;
+/**
+* Inline padding of a name's pill, both sides together, in pixels.
+*/
+const PILL = 8;
+/**
+* Height of a name's line under the disc and the gap above it, in pixels.
+*/
+const NAME = 26;
+/**
+* Returns the box the layout places a node by: as wide as its disc or its name, whichever is
+* wider, and as tall as the disc and the name's line.
+*/
+function boxOf({ disc, node }) {
+	return {
+		height: disc + NAME,
+		width: Math.max(disc, node.label.length * CHARACTER + PILL)
+	};
+}
+/**
+* Returns each node, in order, with its disc and the middle of its top edge where the layout put
+* it.
+*
+* @param input - The nodes, the links, the seed and the steps.
+*/
+function placesOf(input) {
+	const boxes = discsOf(input.nodes, input.links).map((sized) => ({
+		data: { sized },
+		id: sized.node.id,
+		measured: boxOf(sized),
+		position: {
+			x: 0,
+			y: 0
+		}
+	}));
+	const options = {
+		iterations: input.iterations,
+		seed: input.seed
+	};
+	return layoutForce(boxes, input.links, options).map(({ data, measured, position }) => ({
+		disc: data.sized.disc,
+		node: data.sized.node,
+		position: {
+			x: position.x + measured.width / 2,
+			y: position.y
+		}
+	}));
+}
+//#endregion
+//#region src/network-graph/view.ts
+/**
+* Point of a disc node its position is: the middle of its top edge.
+*/
+const TOP_MIDDLE = [.5, 0];
+/**
+* Returns the word a node's accessible name ends with: the focus's, a lit node's, or none.
+*/
+function tagOf(id, input, lit) {
+	if (id === input.focus) return input.words.focusLabel;
+	return lit?.has(id) === true ? input.words.neighborLabel : void 0;
+}
+/**
+* Returns the disc of one node, where the layout put it.
+*/
+function discOf({ disc, node, position }, input, lit) {
+	const tag = tagOf(node.id, input, lit);
+	const size = input.sizes.get(node.id);
+	return {
+		ariaLabel: tag === void 0 ? node.label : `${node.label}, ${tag}`,
+		data: {
+			dimmed: lit !== void 0 && tag === void 0,
+			disc,
+			icon: node.icon,
+			label: node.label
+		},
+		id: node.id,
+		origin: TOP_MIDDLE,
+		position,
+		selected: node.id === input.focus,
+		type: "disc",
+		...size === void 0 ? {} : { measured: size }
+	};
+}
+/**
+* Returns a link for React Flow: a straight line named by its ends, as wide as its tie, and marked
+* on or off the lit set while a node is focused.
+*/
+function edgeOf({ from, link, to }, input, lit) {
+	const strength = { "--graph-strength": String(strengthOf(link)) };
+	const on = [from.id, to.id].every((id) => id === input.focus || lit?.has(id) === true);
+	return {
+		ariaLabel: input.words.edgeName({
+			source: from.label,
+			target: to.label
+		}),
+		id: link.id ?? `${from.id}-${to.id}`,
+		selectable: false,
+		source: from.id,
+		style: strength,
+		target: to.id,
+		type: "straight",
+		...lit === void 0 ? {} : { domAttributes: traceMarkOf(on) }
+	};
+}
+/**
+* Returns a focus's connections: the focused node's name, else its id, and the number of nodes lit.
+*/
+function connectionsOf(input, lit) {
+	const { focus, placed } = input;
+	if (focus === null || lit === void 0) return void 0;
+	return {
+		count: lit.size,
+		name: placed.find(({ node }) => node.id === focus)?.node.label ?? focus
+	};
+}
+/**
+* Returns the view of a network graph: its discs where the layout put them and its links.
+*
+* @param input - The placed nodes, the links, the focus, the sizes and the words.
+*/
+function viewOf(input) {
+	const links = input.drawn.map(({ link }) => link);
+	const lit = input.focus === null ? void 0 : neighborsOf(links, input.focus, input.depth);
+	return {
+		complete: input.placed.every(({ node }) => input.sizes.has(node.id)),
+		connections: connectionsOf(input, lit),
+		edges: input.drawn.map((drawn) => edgeOf(drawn, input, lit)),
+		nodes: input.placed.map((placed) => discOf(placed, input, lit))
+	};
+}
+//#endregion
+//#region src/network-graph/state.ts
+/**
+* Keeps a network graph's focus, measured sizes and the positions people moved nodes to, and
+* works out its view.
+*
+* @remarks
+*   The focus is controlled where the caller passes it. A focus of `null` is a controlled graph
+*   with no focus, because `undefined` leaves the focus to the graph. The measured sizes go back to
+*   React Flow with each node, which keeps its handles' measurements, and play no part in the
+*   layout. A moved node keeps its position while the layout is the one it was moved on, and goes
+*   back to the layout's position when the layout changes, such as for new data or a new seed. A
+*   change that changes no state renders nothing again, so a report React Flow repeats for nodes
+*   it measures again cannot start a loop of renders.
+*/
+/**
+* No position, for a layout nobody moved a node on.
+*/
+const UNMOVED = /* @__PURE__ */ new Map();
+/**
+* Returns the nodes with each moved node at the position a person moved it to.
+*/
+function movedTo(nodes, positions) {
+	return nodes.map((node) => {
+		const position = positions.get(node.id);
+		return position === void 0 ? node : {
+			...node,
+			position
+		};
+	});
+}
+/**
+* Returns the network's view in its current state and the functions that change the state.
+*
+* @param props - The graph, its focus, its layout and its words.
+*/
+function useLinked(props) {
+	const $ = c(35);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ new Map();
+		$[0] = t0;
+	} else t0 = $[0];
+	const [sizes, setSizes] = useState(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			layout: "",
+			positions: UNMOVED
+		};
+		$[1] = t1;
+	} else t1 = $[1];
+	const [moves, setMoves] = useState(t1);
+	const t2 = props.defaultFocus ?? null;
+	let t3;
+	if ($[2] !== props.focus || $[3] !== props.onFocusChange || $[4] !== t2) {
+		t3 = {
+			defaultValue: t2,
+			onChange: props.onFocusChange,
+			value: props.focus
+		};
+		$[2] = props.focus;
+		$[3] = props.onFocusChange;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	const [focus, setFocus] = useControllableState(t3);
+	let layout;
+	let t4;
+	let t5;
+	let t6;
+	let view;
+	if ($[6] !== focus || $[7] !== moves.layout || $[8] !== moves.positions || $[9] !== props.depth || $[10] !== props.iterations || $[11] !== props.links || $[12] !== props.nodes || $[13] !== props.seed || $[14] !== props.words || $[15] !== setFocus || $[16] !== sizes) {
+		const drawn = drawnOf(props.nodes, props.links);
+		const placed = placesOf({
+			iterations: props.iterations ?? 300,
+			links: drawn.map(_temp),
+			nodes: props.nodes,
+			seed: props.seed ?? 1
+		});
+		view = viewOf({
+			depth: props.depth ?? 1,
+			drawn,
+			focus,
+			placed,
+			sizes,
+			words: props.words
+		});
+		layout = signatureOf(view.nodes);
+		const positions = moves.layout === layout ? moves.positions : UNMOVED;
+		if ($[22] !== setFocus) {
+			t4 = () => {
+				setFocus(null);
+			};
+			$[22] = setFocus;
+			$[23] = t4;
+		} else t4 = $[23];
+		if ($[24] !== positions) {
+			t5 = new Set(positions.keys());
+			$[24] = positions;
+			$[25] = t5;
+		} else t5 = $[25];
+		t6 = movedTo(view.nodes, positions);
+		$[6] = focus;
+		$[7] = moves.layout;
+		$[8] = moves.positions;
+		$[9] = props.depth;
+		$[10] = props.iterations;
+		$[11] = props.links;
+		$[12] = props.nodes;
+		$[13] = props.seed;
+		$[14] = props.words;
+		$[15] = setFocus;
+		$[16] = sizes;
+		$[17] = layout;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = view;
+	} else {
+		layout = $[17];
+		t4 = $[18];
+		t5 = $[19];
+		t6 = $[20];
+		view = $[21];
+	}
+	let t7;
+	if ($[26] !== layout || $[27] !== setFocus) {
+		t7 = (changes) => {
+			const selected = selectedBy(changes);
+			if (selected !== void 0) setFocus(selected);
+			setSizes((known) => measuredBy(known, changes));
+			setMoves((known_0) => {
+				const kept = known_0.layout === layout ? known_0.positions : UNMOVED;
+				const next = movedBy(kept, changes);
+				return next === kept ? known_0 : {
+					layout,
+					positions: next
+				};
+			});
+		};
+		$[26] = layout;
+		$[27] = setFocus;
+		$[28] = t7;
+	} else t7 = $[28];
+	let t8;
+	if ($[29] !== t4 || $[30] !== t5 || $[31] !== t6 || $[32] !== t7 || $[33] !== view) {
+		t8 = {
+			clear: t4,
+			moved: t5,
+			nodes: t6,
+			onNodesChange: t7,
+			view
+		};
+		$[29] = t4;
+		$[30] = t5;
+		$[31] = t6;
+		$[32] = t7;
+		$[33] = view;
+		$[34] = t8;
+	} else t8 = $[34];
+	return t8;
+}
+function _temp(t0) {
+	const { link } = t0;
+	return link;
+}
+//#endregion
+//#region src/network-graph/linked.tsx
+/**
+* Maps the network's node type to its disc.
+*/
+const NODE_TYPES = { disc: Disc };
+/**
+* Renders the canvas over the network's view and the readout below it.
+*
+* @param props - The graph, its focus, its layout and its words.
+*/
+function Linked(props) {
+	const $ = c(21);
+	const { clear, moved, nodes, onNodesChange, view } = useLinked(props);
+	const placing = usePlaced(view.nodes, view.complete, moved);
+	const { connections } = view;
+	const { words } = props;
+	const t0 = placing ? "" : void 0;
+	let t1;
+	if ($[0] !== nodes || $[1] !== onNodesChange || $[2] !== props.draggable || $[3] !== props.label || $[4] !== t0 || $[5] !== view.edges || $[6] !== words.moveAnnouncement || $[7] !== words.nodeDescription) {
+		t1 = /* @__PURE__ */ jsx(Canvas, {
+			"data-placing": t0,
+			edges: view.edges,
+			edgesFocusable: false,
+			label: props.label,
+			moveAnnouncement: words.moveAnnouncement,
+			multiSelectionKeyCode: null,
+			nodeDescription: words.nodeDescription,
+			nodes,
+			nodesConnectable: false,
+			nodesDraggable: props.draggable,
+			nodeTypes: NODE_TYPES,
+			onNodesChange,
+			selectionKeyCode: null
+		});
+		$[0] = nodes;
+		$[1] = onNodesChange;
+		$[2] = props.draggable;
+		$[3] = props.label;
+		$[4] = t0;
+		$[5] = view.edges;
+		$[6] = words.moveAnnouncement;
+		$[7] = words.nodeDescription;
+		$[8] = t1;
+	} else t1 = $[8];
+	const t2 = connections !== void 0;
+	let t3;
+	if ($[9] !== connections || $[10] !== words) {
+		t3 = connections === void 0 ? words.promptLabel : words.summary(connections);
+		$[9] = connections;
+		$[10] = words;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== clear || $[13] !== props.overview || $[14] !== t2 || $[15] !== t3 || $[16] !== words.clearLabel) {
+		t4 = /* @__PURE__ */ jsx(Readout, {
+			clearLabel: words.clearLabel,
+			focused: t2,
+			onClear: clear,
+			text: t3,
+			children: props.overview
+		});
+		$[12] = clear;
+		$[13] = props.overview;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = words.clearLabel;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	if ($[18] !== t1 || $[19] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t4] });
+		$[18] = t1;
+		$[19] = t4;
+		$[20] = t5;
+	} else t5 = $[20];
+	return t5;
+}
+//#endregion
+//#region src/network-graph/words.ts
+/**
+* Writes the words a network graph renders, from the caller's words and the English defaults.
+*
+* @remarks
+*   A caller that states a word replaces the default and keeps every other default. A link names
+*   its ends with "and", because a link reads the same either way round. The description offers
+*   the arrow keys only while nodes can be moved.
+*/
+/**
+* Instruction every node is described by while nodes can be moved, unless stated.
+*/
+const MOVABLE = "Press Enter or Space to focus the node, the arrow keys to move it, and Escape to clear the focus.";
+/**
+* Instruction every node is described by while nodes cannot be moved, unless stated.
+*/
+const FIXED = "Press Enter or Space to focus the node, and Escape to clear the focus.";
+/**
+* Writes the name of a link from the names of its ends, unless stated.
+*/
+function linked({ source, target }) {
+	return `${source} and ${target}`;
+}
+/**
+* Writes the summary of a focus, unless stated.
+*/
+function counted({ count, name }) {
+	return `${name}: ${String(count)} ${count === 1 ? "connection" : "connections"}`;
+}
+/**
+* English words of a network graph whose nodes can be moved.
+*/
+const WORDS = {
+	clearLabel: "Clear focus",
+	edgeName: linked,
+	emptyLabel: "No nodes to show.",
+	focusLabel: "Focus",
+	moveAnnouncement: moveAnnouncementOf,
+	neighborLabel: "Connected",
+	nodeDescription: MOVABLE,
+	promptLabel: "Select a node to show what it connects to.",
+	summary: counted
+};
+/**
+* Returns the caller's words over the English defaults.
+*
+* @param words - The words the caller states.
+* @param draggable - Whether a person can move the nodes, which the default description offers.
+*/
+function wordsOf(words, draggable) {
+	return {
+		...WORDS,
+		nodeDescription: draggable ? MOVABLE : FIXED,
+		...omitUndefined(words)
+	};
+}
+//#endregion
+//#region src/network-graph/network-graph.tsx
+/**
+* Splits a network graph's props into its words, the canvas's props, the dragging and the
+* figure's props.
+*/
+function split(props) {
+	const { clearLabel, defaultFocus, depth, draggable = true, edgeName, emptyLabel, focus, focusLabel, iterations, label, links, moveAnnouncement, neighborLabel, nodeDescription, nodes, onFocusChange, overview, promptLabel, seed, summary, ...rest } = props;
+	const words = {
+		clearLabel,
+		edgeName,
+		emptyLabel,
+		focusLabel,
+		moveAnnouncement
+	};
+	const more = {
+		neighborLabel,
+		nodeDescription,
+		promptLabel,
+		summary
+	};
+	const own = {
+		defaultFocus,
+		depth,
+		focus,
+		iterations,
+		label,
+		links,
+		nodes,
+		onFocusChange
+	};
+	return [
+		{
+			...words,
+			...more
+		},
+		{
+			...own,
+			overview,
+			seed
+		},
+		draggable,
+		rest
+	];
+}
+/**
+* Renders the figure: the controls, the canvas, its readout with the overview, and the caption,
+* or the empty state while the graph has no node.
+*
+* @param props - The graph, its focus, its layout, its parts, its words and the figure's props.
+*/
+function NetworkGraph(props) {
+	const $ = c(18);
+	let caption;
+	let controls;
+	let draggable;
+	let own;
+	let root;
+	let t0;
+	if ($[0] !== props) {
+		const [stated, t1, t2, rest] = split(props);
+		own = t1;
+		draggable = t2;
+		({caption, controls, ...root} = rest);
+		t0 = wordsOf(stated, draggable);
+		$[0] = props;
+		$[1] = caption;
+		$[2] = controls;
+		$[3] = draggable;
+		$[4] = own;
+		$[5] = root;
+		$[6] = t0;
+	} else {
+		caption = $[1];
+		controls = $[2];
+		draggable = $[3];
+		own = $[4];
+		root = $[5];
+		t0 = $[6];
+	}
+	const words = t0;
+	let t1;
+	if ($[7] !== controls || $[8] !== draggable || $[9] !== own || $[10] !== words) {
+		t1 = own.nodes.length === 0 ? /* @__PURE__ */ jsx(Empty, { children: words.emptyLabel }) : /* @__PURE__ */ jsxs(Fragment, { children: [controls, /* @__PURE__ */ jsx(Linked, {
+			draggable,
+			words,
+			...own
+		})] });
+		$[7] = controls;
+		$[8] = draggable;
+		$[9] = own;
+		$[10] = words;
+		$[11] = t1;
+	} else t1 = $[11];
+	let t2;
+	if ($[12] !== caption) {
+		t2 = caption === void 0 ? null : /* @__PURE__ */ jsx(Caption, { children: caption });
+		$[12] = caption;
+		$[13] = t2;
+	} else t2 = $[13];
+	let t3;
+	if ($[14] !== root || $[15] !== t1 || $[16] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Root, {
+			...root,
+			children: [t1, t2]
+		});
+		$[14] = root;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+	} else t3 = $[17];
+	return t3;
+}
+//#endregion
+export { relationOf as _, ZoomLevel as a, hiddenBy as b, Controls as c, DirectedGraph as d, Root as f, layoutGraph as g, Canvas as h, graph_exports as i, Control as l, Summary as m, neighborsOf as n, PaletteItem as o, Caption as p, layoutForce as r, MiniMap$1 as s, NetworkGraph as t, treeEdges as u, traceGraph as v, diffGraphs as x, descendantsOf as y };