@stealthscale/component-graphs 0.1.0 → 0.2.2

package/dist/index.js

@@ -1,3808 +1,2 @@
-import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { t as recipe } from "./recipe-BkmwNoaQ.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
+import { _ as relationOf, b as hiddenBy, d as DirectedGraph, g as layoutGraph, i as graph_exports, n as neighborsOf, r as layoutForce, t as NetworkGraph, u as treeEdges, v as traceGraph, x as diffGraphs, y as descendantsOf } from "./shared-DOF4V8-Q.js";
 export { DirectedGraph, graph_exports as Graph, NetworkGraph, descendantsOf, diffGraphs, hiddenBy, layoutForce, layoutGraph, neighborsOf, relationOf, traceGraph, treeEdges };