@dou-ui/flow 0.0.0-stage → 0.1.0-alpha.0

package/dist/flow-editor.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,3721 @@
+import { flowEditorKey } from "./context.js";
+import { boundsOf, clampPan, intersects, intersectsTurned, rectFrom, snapBox } from "./core/geometry.js";
+import { labelOf, nodeBounds, portsOf, resizeOf } from "./core/node-types.js";
+import node_view_default from "./components/node-view.js";
+import flow_menu_default from "./components/flow-menu.js";
+import flow_quick_add_default from "./components/flow-quick-add.js";
+import flow_toolbar_default from "./components/flow-toolbar.js";
+import { drawTools } from "./export/context.js";
+import { drawFlow, pathPoints, readImage } from "./export/draw.js";
+import { defaultNode } from "./components/default-node2.js";
+import { bezierEdge } from "./core/edge-types.js";
+import { canJoin, displacedEdges, joinRefusal, primaryType, typesMatch } from "./core/connect.js";
+import { FlowTransaction } from "./core/transaction.js";
+import { FlowHistory } from "./core/history.js";
+import { flowOrder } from "./core/order.js";
+import { resolveFlowExtensions } from "./core/extension.js";
+import { format, useFlowMessages } from "./locale.js";
+import { flowKit } from "./kit.js";
+import { readClipboard, writeClipboard } from "./core/clipboard.js";
+import { createId, emptyDocument, emptySelection } from "./core/model.js";
+import { readDocument } from "./document.js";
+import { FlowTree, containerAt } from "./core/groups.js";
+import { DouFindReplace, DouToggle, DouTooltip, fitPixelRatio, holdPointer, layoutGraph, matchesHotkey, svgToPNG, useLocale, useReducedMotion } from "dou-ui";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, customRef, defineComponent, guardReactiveProps, isRef, mergeModels, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowReactive, shallowRef, toDisplayString, toRaw, unref, useModel, useTemplateRef, vModelText, watch, withCtx, withDirectives } from "vue";
+import { LetterCaseIcon } from "@dou-ui/icons";
+// src/flow-editor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "aria-description"];
+var _hoisted_2 = [
+	"data-node-id",
+	"aria-roledescription",
+	"aria-label"
+];
+var _hoisted_3 = {
+	key: 0,
+	class: "dou-flow-editor__simple-label"
+};
+var _hoisted_4 = {
+	class: "dou-flow-editor__edges",
+	"aria-hidden": "true"
+};
+var _hoisted_5 = ["data-edge-id", "data-edge-type"];
+var _hoisted_6 = ["d"];
+var _hoisted_7 = ["d"];
+var _hoisted_8 = ["d"];
+var _hoisted_9 = ["d"];
+var _hoisted_10 = ["data-edge-id", "data-value"];
+var _hoisted_11 = ["aria-label"];
+var _hoisted_12 = [
+	"data-node-id",
+	"aria-roledescription",
+	"aria-label"
+];
+var _hoisted_13 = {
+	key: 0,
+	class: "dou-flow-editor__simple-label"
+};
+var _hoisted_14 = {
+	key: 1,
+	class: "dou-flow-editor__guides",
+	"aria-hidden": "true"
+};
+var _hoisted_15 = [
+	"x1",
+	"y1",
+	"x2",
+	"y2"
+];
+var _hoisted_16 = { class: "dou-flow-editor__ghost-card" };
+var _hoisted_17 = {
+	key: 0,
+	class: "dou-flow-editor__ghost-icon"
+};
+var _hoisted_18 = {
+	class: "dou-flow-editor__live",
+	"aria-live": "polite"
+};
+var _hoisted_19 = {
+	key: 1,
+	class: "dou-flow-editor__notice",
+	"aria-hidden": "true"
+};
+var LONG_PRESS = 500;
+/** How long a finger rests on a palette item before it picks the node up, in ms. */
+var PICK_UP = 300;
+/** How close to the edge a drag starts scrolling the canvas, in px. */
+var EDGE = 24;
+/** Auto-scroll speed in px per frame, at `d` px from the edge. */
+var EDGE_REACH = 80;
+/** Every edge's route and the box around it; independent of the view, so panning skips it. */
+var FIT_PADDING = 40;
+/**
+* Shows the given nodes, or all. With `floor`, zooms out no further than
+* that; what still doesn't fit starts at the top left, to be panned to.
+*/
+var PANEL_GAP = 16;
+var FIELDS = "input, textarea, [contenteditable]:not([contenteditable=\"false\"]), [data-dou-nodrag]";
+var MAGNET = 24;
+var FIND_INSET = 12;
+var DRAW_MARGIN = 200;
+/** The part of the canvas that is drawn: the view and a margin around it. */
+var TINY = .2;
+var flow_editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouFlowEditor",
+	__name: "flow-editor",
+	props: /*@__PURE__*/ mergeModels({
+		extensions: {},
+		nodeTypes: {},
+		edgeTypes: {},
+		edgeType: { default: void 0 },
+		simpleZoom: { default: .4 },
+		grid: { default: 8 },
+		guides: {
+			type: Boolean,
+			default: true
+		},
+		minZoom: { default: .1 },
+		maxZoom: { default: 4 },
+		direction: { default: "horizontal" },
+		fitView: {
+			type: Boolean,
+			default: false
+		},
+		fitMinZoom: { default: .5 },
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		searchable: {
+			type: Boolean,
+			default: true
+		},
+		panOnScroll: {
+			type: Boolean,
+			default: true
+		},
+		portTypes: {},
+		acyclic: { type: Boolean },
+		canConnect: {},
+		ariaLabel: {},
+		messages: {}
+	}, {
+		"modelValue": { default: emptyDocument },
+		"modelModifiers": {},
+		"selection": { default: emptySelection },
+		"selectionModifiers": {},
+		"viewport": { default: () => ({
+			x: 0,
+			y: 0,
+			zoom: 1
+		}) },
+		"viewportModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"transaction",
+		"transactionCancel",
+		"nodeClick",
+		"nodeDblclick",
+		"nodeContextmenu",
+		"edgeClick",
+		"edgeContextmenu",
+		"canvasClick",
+		"canvasContextmenu",
+		"connect",
+		"connectToCanvas"
+	], [
+		"update:modelValue",
+		"update:selection",
+		"update:viewport"
+	]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		/** The `v-model`, with a wrongly shaped one read as well as it can be. */
+		const doc = computed({
+			get: () => readDocument(model.value),
+			set: (value) => model.value = value
+		});
+		const selection = useModel(__props, "selection");
+		const viewport = useModel(__props, "viewport");
+		const emit = __emit;
+		const messages = useFlowMessages(() => props.messages);
+		const { t: common } = useLocale();
+		const reducedMotion = useReducedMotion();
+		const root = useTemplateRef("root");
+		/** Movement in screen px before a press becomes a drag. */
+		const THRESHOLD = {
+			mouse: 3,
+			touch: 6
+		};
+		const edgeSpeed = (d) => d < EDGE ? Math.min(1, (EDGE - d) / EDGE) * 12 : 0;
+		/** The axis that levels two ports on this side. */
+		const level = (side) => side === "left" || side === "right" ? "y" : "x";
+		const same = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+		const resolved = computed(() => resolveFlowExtensions(props.extensions ?? flowKit()));
+		const types = computed(() => {
+			const map = new Map(resolved.value.nodeTypes);
+			for (const spec of props.nodeTypes ?? []) map.set(spec.type, spec);
+			return map;
+		});
+		const portTypes = computed(() => ({
+			...resolved.value.portTypes,
+			...props.portTypes
+		}));
+		const edgeTypes = computed(() => {
+			const map = new Map(resolved.value.edgeTypes);
+			for (const spec of props.edgeTypes ?? []) map.set(spec.type, spec);
+			return map;
+		});
+		/** The type of edges without one: the prop, else the extensions', else bezier. */
+		const defaultEdgeType = computed(() => props.edgeType ?? resolved.value.edgeType ?? "bezier");
+		const edgeTypeOf = (type) => edgeTypes.value.get(type ?? defaultEdgeType.value) ?? edgeTypes.value.get(defaultEdgeType.value) ?? bezierEdge;
+		const specOf = (node) => types.value.get(node.type ?? "default") ?? types.value.get("default") ?? defaultNode;
+		/** Each node's ports by id, worked out once per change rather than per edge. */
+		const portsByNode = computed(() => {
+			const map = /* @__PURE__ */ new Map();
+			for (const node of nodeById.value.values()) map.set(node.id, new Map(portsOf(specOf(node), node).map((port) => [port.id, port])));
+			return map;
+		});
+		function portSpec(end) {
+			if (end.port == null) return void 0;
+			return portsByNode.value.get(end.node)?.get(end.port);
+		}
+		const portTypeOf = (port) => {
+			const type = primaryType(port);
+			return type ? portTypes.value[type] : void 0;
+		};
+		const tones = /* @__PURE__ */ new Set([
+			"neutral",
+			"primary",
+			"success",
+			"warning",
+			"danger"
+		]);
+		/** A port type's color as CSS: theme tones by name, anything else as is. */
+		const colorOf = (spec) => spec?.color ? tones.has(spec.color) ? `var(--dou-color-${spec.color})` : spec.color : void 0;
+		const history = new FlowHistory();
+		/** An extension's history, used instead of the editor's own. */
+		let customHistory = null;
+		const canUndo = ref(false);
+		const canRedo = ref(false);
+		const syncHistory = () => {
+			canUndo.value = customHistory ? customHistory.canUndo() : history.canUndo;
+			canRedo.value = customHistory ? customHistory.canRedo() : history.canRedo;
+		};
+		function setSelection(next) {
+			const current = selection.value;
+			if (same(current.nodes, next.nodes) && same(current.edges, next.edges)) return;
+			selection.value = next;
+		}
+		/** Drops selected ids that are no longer in the document. */
+		function pruneSelection(next, sel = selection.value) {
+			const nodes = new Set(next.nodes.map((n) => n.id));
+			const edges = new Set(next.edges.map((e) => e.id));
+			return {
+				nodes: sel.nodes.filter((id) => nodes.has(id)),
+				edges: sel.edges.filter((id) => edges.has(id))
+			};
+		}
+		let latest = null;
+		const docOf = () => latest ?? toRaw(doc.value);
+		/** The document as extensions see it: the latest commit, even before `v-model` catches up. */
+		const currentDoc = customRef(() => ({
+			get: () => {
+				const value = doc.value;
+				return latest ?? value;
+			},
+			set: (value) => doc.value = value
+		}));
+		/** Runs the extensions' `transaction` hooks; `false` when one cancelled the change. */
+		function check(tr) {
+			for (const hook of resolved.value.transactions) {
+				hook(tr, context);
+				if (tr.cancelled) {
+					emit("transactionCancel", tr);
+					refuse(tr.cancelReason ?? messages.value.changeCancelled);
+					return false;
+				}
+			}
+			return true;
+		}
+		function commit(tr) {
+			if (!check(tr)) return false;
+			if (!latest) nextTick(() => latest = null);
+			latest = tr.doc;
+			doc.value = tr.doc;
+			if (tr.steps.some((s) => s.type === "removeNode" || s.type === "removeEdge")) setSelection(pruneSelection(tr.doc));
+			emit("transaction", tr);
+			return true;
+		}
+		function transact(fn, meta) {
+			const tr = new FlowTransaction(docOf());
+			if (meta) tr.setMeta(meta);
+			fn(tr);
+			if (!tr.changed) return tr;
+			const before = selection.value;
+			if (!commit(tr)) return tr;
+			if (!customHistory) history.record(tr, before, selection.value);
+			syncHistory();
+			return tr;
+		}
+		function undo() {
+			if (customHistory) return travel(customHistory.undo, messages.value.undone);
+			const result = history.undo(docOf());
+			if (!result) return false;
+			result.tr.setMeta({
+				origin: "undo",
+				history: false
+			});
+			commit(result.tr);
+			setSelection(pruneSelection(result.tr.doc, result.selection));
+			syncHistory();
+			announce(messages.value.undone);
+			return true;
+		}
+		/** Undo or redo through an extension's history. */
+		function travel(fn, done) {
+			if (!fn()) return false;
+			syncHistory();
+			announce(done);
+			return true;
+		}
+		function redo() {
+			if (customHistory) return travel(customHistory.redo, messages.value.redone);
+			const result = history.redo(docOf());
+			if (!result) return false;
+			result.tr.setMeta({
+				origin: "redo",
+				history: false
+			});
+			commit(result.tr);
+			setSelection(pruneSelection(result.tr.doc, result.selection));
+			syncHistory();
+			announce(messages.value.redone);
+			return true;
+		}
+		const metrics = shallowReactive(/* @__PURE__ */ new Map());
+		/** Where nodes are drawn while tidying animates them; their real place is already in `doc`. */
+		const tween = shallowRef(null);
+		/** Nodes shown changed while a handle is dragged, see `previewNode`; the document changes when it is let go. */
+		const previews = shallowRef(/* @__PURE__ */ new Map());
+		const shownNodes = computed(() => {
+			const moving = tween.value;
+			const changed = previews.value;
+			if (!moving && !changed.size) return doc.value.nodes;
+			return doc.value.nodes.map((node) => {
+				const at = moving?.get(node.id);
+				const patch = changed.get(node.id);
+				if (!at && !patch) return node;
+				return {
+					...node,
+					...at && {
+						x: at.x,
+						y: at.y
+					},
+					...patch
+				};
+			});
+		});
+		function previewNode(id, patch) {
+			const next = new Map(previews.value);
+			if (patch) next.set(id, patch);
+			else if (!next.delete(id)) return;
+			previews.value = next;
+		}
+		const nodeById = computed(() => new Map(shownNodes.value.map((node) => [node.id, node])));
+		const tree = computed(() => new FlowTree(doc.value.nodes));
+		const isContainer = (node) => !!specOf(node).container;
+		/** How far a node is drawn turned, as its type says, in degrees. */
+		function nodeRotation(id) {
+			const node = nodeById.value.get(id);
+			return node && specOf(node).rotation?.(node) || 0;
+		}
+		/** For each node inside a collapsed container: the outermost collapsed one, where its edges end. */
+		const hiddenIn = computed(() => {
+			const map = /* @__PURE__ */ new Map();
+			for (const node of doc.value.nodes) {
+				if (!node.data?.collapsed || !isContainer(node)) continue;
+				for (const id of tree.value.descendants(node.id)) {
+					let outer;
+					for (const a of tree.value.ancestors(id)) if (nodeById.value.get(a)?.data?.collapsed) outer = a;
+					if (outer) map.set(id, outer);
+				}
+			}
+			return map;
+		});
+		watch(hiddenIn, (hidden) => {
+			const { nodes, edges } = selection.value;
+			if (nodes.some((id) => hidden.has(id))) setSelection({
+				nodes: nodes.filter((id) => !hidden.has(id)),
+				edges
+			});
+		});
+		/** Containers with a size, innermost last; `skip` leaves some out, e.g. those being dragged. */
+		function containerRects(skip) {
+			return doc.value.nodes.flatMap((node) => isContainer(node) && !hiddenIn.value.has(node.id) && !skip?.has(node.id) && metrics.has(node.id) ? [{
+				id: node.id,
+				rect: rectOf(node)
+			}] : []);
+		}
+		/** Two measurements of a node that place it and its ports the same. */
+		function sameMetrics(a, b) {
+			if (!a || a.width !== b.width || a.height !== b.height || a.ports.size !== b.ports.size) return false;
+			for (const [id, p] of b.ports) {
+				const q = a.ports.get(id);
+				if (!q || q.x !== p.x || q.y !== p.y || q.side !== p.side) return false;
+			}
+			return true;
+		}
+		function onMeasure(id, value) {
+			if (!sameMetrics(metrics.get(id), value)) metrics.set(id, value);
+			const wait = pending.get(id);
+			if (!wait) return;
+			pending.delete(id);
+			const port = wait.port ? value.ports.get(wait.port) : void 0;
+			const vertical = props.direction === "vertical";
+			const along = (v, size, flow) => wait.start && flow ? v : v - size / 2;
+			let x = snapTo(port ? wait.at.x - port.x : along(wait.at.x, value.width, !vertical));
+			let y = snapTo(port ? wait.at.y - port.y : along(wait.at.y, value.height, vertical));
+			if (wait.avoid) {
+				const others = doc.value.nodes.flatMap((n) => n.id === id ? [] : getNodeRect(n.id) ?? []);
+				const step = snapTo((vertical ? value.width : value.height) + 16);
+				const free = (px, py) => !others.some((r) => intersects({
+					x: px - 8,
+					y: py - 8,
+					width: value.width + 16,
+					height: value.height + 16
+				}, r));
+				for (let i = 0; i < 40 && !free(x, y); i++) if (vertical) x += step;
+				else y += step;
+			}
+			const node = doc.value.nodes.find((n) => n.id === id);
+			if (node && (node.x !== x || node.y !== y)) transact((tr) => tr.moveNode(id, x, y), { group: wait.group });
+			nextTick(() => {
+				reveal(id);
+				if (wait.focus) root.value?.querySelector(`[data-node-id="${CSS.escape(id)}"]`)?.focus({ preventScroll: true });
+			});
+		}
+		/** Nodes just added, waiting for their size to be placed: the point and the port to put on it. */
+		const pending = /* @__PURE__ */ new Map();
+		const snapTo = (v) => props.grid ? Math.round(v / props.grid) * props.grid : Math.round(v);
+		watch(nodeById, (nodes) => {
+			for (const id of metrics.keys()) if (!nodes.has(id)) metrics.delete(id);
+			const kept = [...previews.value].filter(([id]) => nodes.has(id));
+			if (kept.length < previews.value.size) previews.value = new Map(kept);
+		});
+		function rectOf(node) {
+			const m = metrics.get(node.id);
+			return {
+				x: node.x,
+				y: node.y,
+				width: m?.width ?? node.width ?? 0,
+				height: m?.height ?? node.height ?? 0
+			};
+		}
+		function getNodeRect(id) {
+			const node = nodeById.value.get(id);
+			return node ? rectOf(node) : null;
+		}
+		function anchor(node, port, role) {
+			const m = metrics.get(node.id);
+			if (!m) return null;
+			const at = port ? m.ports.get(port) : void 0;
+			if (at) return {
+				x: node.x + at.x,
+				y: node.y + at.y,
+				side: at.side
+			};
+			return role === "source" ? {
+				x: node.x + m.width,
+				y: node.y + m.height / 2,
+				side: "right"
+			} : {
+				x: node.x,
+				y: node.y + m.height / 2,
+				side: "left"
+			};
+		}
+		function anchorOf(end, role) {
+			const node = nodeById.value.get(end.node);
+			return node ? anchor(node, end.port, role) : null;
+		}
+		/** Where an edge ends: on the collapsed container hiding its node, if any. */
+		function edgeEnd(end) {
+			const outer = hiddenIn.value.get(end.node);
+			return outer ? { node: outer } : end;
+		}
+		/**
+		* Edges whose ports no longer fit: a port is gone, or its type changed so
+		* the two ends don't match any more, e.g. after a form in a node changed it.
+		*/
+		const staleEdges = computed(() => {
+			const out = /* @__PURE__ */ new Set();
+			for (const edge of doc.value.edges) {
+				const { source, target } = edge;
+				if (source.port == null && target.port == null) continue;
+				const a = source.port == null ? void 0 : portSpec(source);
+				const b = target.port == null ? void 0 : portSpec(target);
+				if (source.port != null && !a || target.port != null && !b) out.add(edge.id);
+				else if (a && b && (a.kind !== "output" || b.kind !== "input" || !typesMatch(a, b, portTypes.value))) out.add(edge.id);
+			}
+			return out;
+		});
+		watch(staleEdges, (now, before) => {
+			let added = 0;
+			for (const id of now) if (!before.has(id)) added++;
+			if (added) announce(format(messages.value.stale, { count: added }));
+		});
+		function removeStaleEdges() {
+			const ids = [...staleEdges.value];
+			if (ids.length) transact((tr) => ids.forEach((id) => tr.removeEdge(id)));
+			return ids.length;
+		}
+		/** How far an edge may bulge past its ends, in canvas px. */
+		const edgeRoutes = computed(() => {
+			const out = [];
+			const edges = doc.value.edges;
+			edges.length;
+			for (const edge of toRaw(edges)) {
+				const from = edgeEnd(edge.source);
+				const to = edgeEnd(edge.target);
+				if (from.node === to.node && (from !== edge.source || to !== edge.target)) continue;
+				const source = nodeById.value.get(from.node);
+				const target = nodeById.value.get(to.node);
+				if (!source || !target) continue;
+				const a = anchor(source, from.port, "source");
+				const b = anchor(target, to.port, "target");
+				if (!a || !b) continue;
+				out.push({
+					edge,
+					route: edgeTypeOf(edge.type).route(a, b, edge),
+					box: {
+						x: Math.min(a.x, b.x) - EDGE_REACH,
+						y: Math.min(a.y, b.y) - EDGE_REACH,
+						width: Math.abs(a.x - b.x) + 160,
+						height: Math.abs(a.y - b.y) + 160
+					},
+					style: edgeStyle(edge)
+				});
+			}
+			return out;
+		});
+		/** The edges in view. */
+		const edgePaths = computed(() => {
+			const selected = new Set(selection.value.edges);
+			const moving = connecting.value?.edge;
+			const area = drawnArea.value;
+			const stale = staleEdges.value;
+			const out = [];
+			for (const item of edgeRoutes.value) {
+				const { edge } = item;
+				if (edge.id === moving || area && !intersects(item.box, area)) continue;
+				out.push({
+					edge,
+					route: item.route,
+					selected: selected.has(edge.id),
+					stale: stale.has(edge.id),
+					style: item.style
+				});
+			}
+			return out;
+		});
+		function edgeStyle(edge) {
+			const port = portSpec(edge.source);
+			const type = port && portTypeOf(port);
+			const own = edgeTypeOf(edge.type).style?.(edge);
+			if (!type) return own;
+			return {
+				"--dou-flow-editor-edge": colorOf(type),
+				"--dou-flow-editor-edge-width": type.edgeWidth ? `${type.edgeWidth}px` : void 0,
+				strokeDasharray: type.dashed ? "4 4" : void 0,
+				...own
+			};
+		}
+		/** The handle that reshapes the one selected edge, e.g. a step edge's middle. */
+		const bend = computed(() => {
+			const { nodes, edges } = selection.value;
+			if (props.readonly || nodes.length || edges.length !== 1) return null;
+			const item = edgeRoutes.value.find((e) => e.edge.id === edges[0]);
+			const handle = item?.route.handle;
+			return handle && item ? {
+				edge: item.edge,
+				handle
+			} : null;
+		});
+		/** The node whose edges `E` goes through, and the one last selected. */
+		let edgeCycle = null;
+		/**
+		* Selects the next edge of the selected node, or of the node whose edges
+		* are being gone through, and says which nodes it joins.
+		*/
+		function cycleEdges(step) {
+			const { nodes, edges } = selection.value;
+			let node;
+			let current;
+			if (nodes.length === 1 && !edges.length) node = nodes[0];
+			else {
+				const last = edgeCycle;
+				if (last && !nodes.length && edges.length === 1 && last.edge === edges[0]) {
+					node = last.node;
+					current = last.edge;
+				}
+			}
+			if (!node) return false;
+			const all = doc.value.edges;
+			const list = [...all.filter((e) => e.source.node === node), ...all.filter((e) => e.target.node === node && e.source.node !== node)];
+			if (!list.length) {
+				announce(messages.value.noEdges);
+				return true;
+			}
+			const edge = list[((current ? list.findIndex((e) => e.id === current) : -1) + step + list.length) % list.length];
+			edgeCycle = {
+				node,
+				edge: edge.id
+			};
+			setSelection({
+				nodes: [],
+				edges: [edge.id]
+			});
+			announce(describeEdge(edge));
+			return true;
+		}
+		function nodeName(id) {
+			const node = nodeById.value.get(id);
+			return node ? nameOf(node) : id;
+		}
+		function describeEdge(edge) {
+			const t = messages.value;
+			const text = format(t.edge, {
+				from: nodeName(edge.source.node),
+				to: nodeName(edge.target.node)
+			});
+			return edge.label ? text + format(t.edgeLabel, { label: edge.label }) : text;
+		}
+		const editingLabel = ref(null);
+		const labelDraft = ref("");
+		const edgeLabels = computed(() => edgePaths.value.filter((item) => item.edge.id === editingLabel.value || item.edge.label && !simple.value));
+		/** Opens the text field on an edge's label. */
+		function editLabel(id) {
+			if (props.readonly || !doc.value.edges.some((e) => e.id === id)) return;
+			setSelection({
+				nodes: [],
+				edges: [id]
+			});
+			labelDraft.value = doc.value.edges.find((e) => e.id === id).label ?? "";
+			editingLabel.value = id;
+			nextTick(() => {
+				const input = root.value?.querySelector(".dou-flow-editor__label-input");
+				input?.focus({ preventScroll: true });
+				input?.select();
+			});
+		}
+		function finishLabel(save) {
+			const id = editingLabel.value;
+			if (!id) return;
+			editingLabel.value = null;
+			const text = labelDraft.value.trim();
+			if (save && transact((tr) => tr.updateEdge(id, { label: text || void 0 })).changed) announce(messages.value.labelSaved);
+			root.value?.focus({ preventScroll: true });
+		}
+		function onLabelKeydown(event) {
+			if (event.isComposing) return;
+			if (event.key === "Enter") finishLabel(true);
+			else if (event.key === "Escape") finishLabel(false);
+			else return;
+			event.preventDefault();
+			event.stopPropagation();
+		}
+		/** Connected port ids, by node. */
+		const connected = computed(() => {
+			const map = /* @__PURE__ */ new Map();
+			const add = (node, port) => {
+				if (!port) return;
+				let set = map.get(node);
+				if (!set) map.set(node, set = /* @__PURE__ */ new Set());
+				set.add(port);
+			};
+			for (const edge of doc.value.edges) {
+				add(edge.source.node, edge.source.port);
+				add(edge.target.node, edge.target.port);
+			}
+			return map;
+		});
+		const none = /* @__PURE__ */ new Set();
+		const noStates = /* @__PURE__ */ new Map();
+		/** How many edges touch each node. */
+		const degree = computed(() => {
+			const map = /* @__PURE__ */ new Map();
+			const add = (id) => map.set(id, (map.get(id) ?? 0) + 1);
+			for (const edge of toRaw(doc.value).edges) {
+				add(edge.source.node);
+				if (edge.target.node !== edge.source.node) add(edge.target.node);
+			}
+			return map;
+		});
+		/** A node's name; a container without one goes by the word for a group. */
+		function nameOf(node) {
+			return labelOf(specOf(node), node, messages.value) || (isContainer(node) ? messages.value.group : "");
+		}
+		const roleOf = (node) => isContainer(node) ? messages.value.group : messages.value.node;
+		/** Read out after a node's name: the group it is in, what it holds, its ports. */
+		function describe(node) {
+			const t = messages.value;
+			const parts = [];
+			const parent = tree.value.parentOf(node.id);
+			const group = parent && nodeById.value.get(parent);
+			if (group) parts.push(format(t.inGroup, { group: nameOf(group) }));
+			if (isContainer(node)) parts.push(format(t.groupSize, { count: tree.value.children.get(node.id)?.length ?? 0 }));
+			const ports = portsOf(specOf(node), node);
+			if (ports.length) parts.push(format(t.ports, {
+				inputs: ports.filter((p) => p.kind === "input").length,
+				outputs: ports.filter((p) => p.kind === "output").length,
+				connected: degree.value.get(node.id) ?? 0
+			}));
+			return parts.join(t.separator);
+		}
+		const clampZoom = (zoom) => Math.min(props.maxZoom, Math.max(props.minZoom, zoom));
+		let animation = 0;
+		function stopAnimation() {
+			cancelAnimationFrame(animation);
+			animation = 0;
+		}
+		/** `next`, kept within reach of the nodes; see `clampPan`. */
+		function reachable(next) {
+			return clampPan(next, viewport.value, boundsOf(shownNodes.value.map(rectOf)), size.value);
+		}
+		/** Moves the view, as far as the nodes allow; `v-model:viewport` alone can go further. */
+		function setViewport(target, animate = false) {
+			stopAnimation();
+			const next = reachable(target);
+			if (!animate || reducedMotion.value || typeof requestAnimationFrame === "undefined") {
+				viewport.value = next;
+				return;
+			}
+			const from = { ...viewport.value };
+			const start = performance.now();
+			const duration = 240;
+			const frame = (now) => {
+				const t = Math.min(1, (now - start) / duration);
+				const e = 1 - (1 - t) ** 3;
+				viewport.value = {
+					x: from.x + (next.x - from.x) * e,
+					y: from.y + (next.y - from.y) * e,
+					zoom: from.zoom + (next.zoom - from.zoom) * e
+				};
+				animation = t < 1 ? requestAnimationFrame(frame) : 0;
+			};
+			animation = requestAnimationFrame(frame);
+		}
+		/** Point on the screen relative to the editor's top left corner. */
+		function local(clientX, clientY) {
+			const rect = root.value.getBoundingClientRect();
+			return {
+				x: clientX - rect.left,
+				y: clientY - rect.top
+			};
+		}
+		function toCanvas(point) {
+			const p = local(point.x, point.y);
+			const { x, y, zoom } = viewport.value;
+			return {
+				x: (p.x - x) / zoom,
+				y: (p.y - y) / zoom
+			};
+		}
+		/** Zooms keeping the canvas point under `at` (local px) in place. */
+		function zoomAround(zoom, at, animate = false) {
+			const { x, y, zoom: k } = viewport.value;
+			const next = clampZoom(zoom);
+			const cx = (at.x - x) / k;
+			const cy = (at.y - y) / k;
+			setViewport({
+				x: at.x - cx * next,
+				y: at.y - cy * next,
+				zoom: next
+			}, animate);
+		}
+		const center = () => ({
+			x: root.value.clientWidth / 2,
+			y: root.value.clientHeight / 2
+		});
+		const zoomTo = (zoom) => zoomAround(zoom, center(), true);
+		const zoomIn = () => zoomTo(viewport.value.zoom * 1.25);
+		const zoomOut = () => zoomTo(viewport.value.zoom / 1.25);
+		/** Room left around the nodes when fitting them into view. */
+		function fit(ids, animate = true, floor = 0) {
+			const nodes = ids ? ids.map((id) => nodeById.value.get(id)).filter(Boolean) : doc.value.nodes;
+			const bounds = boundsOf(nodes.map(rectOf));
+			if (bounds) fitRect(bounds, animate, floor);
+		}
+		/**
+		* Room to leave around the nodes: the padding, or more where a panel
+		* (controls, minimap…) sits in a corner, so fitted nodes don't end
+		* up under it. Each panel takes room on the side where it costs less: a
+		* wide one above or below, a tall one on the left or right.
+		*/
+		function fitInsets() {
+			const box = root.value.getBoundingClientRect();
+			const insets = {
+				top: FIT_PADDING,
+				bottom: FIT_PADDING,
+				left: FIT_PADDING,
+				right: FIT_PADDING
+			};
+			for (const panel of root.value.querySelectorAll(".dou-flow-editor__panels > :not(.dou-flow-toolbar)")) {
+				const rect = panel.getBoundingClientRect();
+				if (!rect.height) continue;
+				const upper = rect.top + rect.height / 2 < box.top + box.height / 2;
+				const leftward = rect.left + rect.width / 2 < box.left + box.width / 2;
+				const vertical = upper ? rect.bottom - box.top : box.bottom - rect.top;
+				const horizontal = leftward ? rect.right - box.left : box.right - rect.left;
+				if (vertical / box.height <= horizontal / box.width) {
+					const side = upper ? "top" : "bottom";
+					insets[side] = Math.max(insets[side], vertical + PANEL_GAP);
+				} else {
+					const side = leftward ? "left" : "right";
+					insets[side] = Math.max(insets[side], horizontal + PANEL_GAP);
+				}
+			}
+			return insets;
+		}
+		/** Room between a panel and the nodes fitted next to it. */
+		function fitRect(bounds, animate, floor) {
+			if (!root.value) return;
+			const width = root.value.clientWidth;
+			const height = root.value.clientHeight;
+			const insets = fitInsets();
+			const zoom = clampZoom(Math.max(Math.min((width - insets.left - insets.right) / Math.max(1, bounds.width), (height - insets.top - insets.bottom) / Math.max(1, bounds.height), 1), Math.min(floor, 1)));
+			const offset = (room, size, start, before, after) => Math.round(size * zoom > room - before - after ? before - start * zoom : before + (room - before - after - size * zoom) / 2 - start * zoom);
+			setViewport({
+				x: offset(width, bounds.width, bounds.x, insets.left, insets.right),
+				y: offset(height, bounds.height, bounds.y, insets.top, insets.bottom),
+				zoom
+			}, animate);
+		}
+		/** Room between ranks (along the flow) and between nodes in a rank when tidying. */
+		const TIDY_GAP = {
+			horizontal: {
+				rank: 80,
+				row: 40
+			},
+			vertical: {
+				rank: 56,
+				row: 40
+			}
+		};
+		/**
+		* Lays the given nodes, or the selected ones when two or more are selected,
+		* or all, out in ranks along their edges in the flow's `direction`, as one
+		* undo step. The group keeps its top left corner; locked nodes stay put.
+		*/
+		function tidy(ids) {
+			const chosen = new Set(ids ?? (selection.value.nodes.length > 1 ? selection.value.nodes : doc.value.nodes.map((n) => n.id)));
+			const parents = new Set(tree.value.topmost(chosen).map((id) => tree.value.parentOf(id)));
+			const scope = parents.size === 1 ? [...parents][0] : void 0;
+			const blockOf = (id) => {
+				let at = id;
+				while (at && tree.value.parentOf(at) !== scope) at = tree.value.parentOf(at);
+				return at;
+			};
+			const blocks = new Set([...chosen].flatMap((id) => blockOf(id) ?? []));
+			const nodes = doc.value.nodes.filter((node) => blocks.has(node.id));
+			const bounds = boundsOf(nodes.map(rectOf));
+			if (!bounds || nodes.length < 2) return;
+			const vertical = props.direction === "vertical";
+			const gap = TIDY_GAP[vertical ? "vertical" : "horizontal"];
+			const across = vertical ? ["top", "bottom"] : ["left", "right"];
+			const layout = layoutGraph(nodes.map((node) => {
+				const m = metrics.get(node.id);
+				const { width, height } = rectOf(node);
+				let offset = (vertical ? width : height) / 2;
+				for (const port of m?.ports.values() ?? []) if (across.includes(port.side)) {
+					offset = vertical ? port.x : port.y;
+					break;
+				}
+				return {
+					id: node.id,
+					width,
+					height,
+					anchor: offset
+				};
+			}), doc.value.edges.flatMap((e) => {
+				const from = blockOf(e.source.node);
+				const to = blockOf(e.target.node);
+				return from && to && from !== to && blocks.has(from) && blocks.has(to) ? [{
+					from,
+					to
+				}] : [];
+			}), {
+				direction: props.direction,
+				rankGap: gap.rank,
+				laneGap: gap.row,
+				equalWidth: false,
+				grid: props.grid || 8
+			});
+			const snap = (v) => props.grid ? Math.round(v / props.grid) * props.grid : Math.round(v);
+			const origin = {
+				x: snap(bounds.x),
+				y: snap(bounds.y)
+			};
+			const from = new Map(nodes.map((node) => [node.id, {
+				x: node.x,
+				y: node.y
+			}]));
+			const moved = /* @__PURE__ */ new Map();
+			for (const node of nodes) {
+				const placed = layout.nodes.get(node.id);
+				if (!placed || node.locked) continue;
+				const to = {
+					x: origin.x + snap(placed.x),
+					y: origin.y + snap(placed.y)
+				};
+				if (to.x !== node.x || to.y !== node.y) moved.set(node.id, to);
+			}
+			if (!moved.size) return;
+			const count = moved.size;
+			for (const { id } of nodes) {
+				const to = moved.get(id);
+				if (!to) continue;
+				const block = from.get(id);
+				for (const inner of tree.value.descendants(id)) {
+					const node = nodeById.value.get(inner);
+					if (!node) continue;
+					from.set(inner, {
+						x: node.x,
+						y: node.y
+					});
+					moved.set(inner, {
+						x: node.x + to.x - block.x,
+						y: node.y + to.y - block.y
+					});
+				}
+			}
+			transact((tr) => {
+				for (const [id, to] of moved) tr.moveNode(id, to.x, to.y);
+			});
+			announce(format(messages.value.tidied, { count }));
+			animateTidy(from, moved);
+			const after = boundsOf(nodes.map((node) => ({
+				...rectOf(node),
+				...moved.get(node.id) ?? from.get(node.id)
+			})));
+			const { x, y, zoom } = viewport.value;
+			const { width, height } = size.value;
+			if (!(after.x * zoom + x >= 0 && after.y * zoom + y >= 0 && (after.x + after.width) * zoom + x <= width && (after.y + after.height) * zoom + y <= height)) fitRect(after, true, props.fitMinZoom);
+		}
+		let tweenFrame = 0;
+		const easeOut = (t) => 1 - (1 - t) ** 3;
+		/** Glides moved nodes from where they were to where tidying put them. */
+		function animateTidy(from, to) {
+			cancelAnimationFrame(tweenFrame);
+			if (reducedMotion.value || typeof requestAnimationFrame === "undefined") return;
+			const start = performance.now();
+			const duration = 220;
+			const step = (now) => {
+				const t = Math.min(1, (now - start) / duration);
+				const k = easeOut(t);
+				const frame = /* @__PURE__ */ new Map();
+				for (const [id, end] of to) {
+					const a = from.get(id);
+					frame.set(id, {
+						x: a.x + (end.x - a.x) * k,
+						y: a.y + (end.y - a.y) * k
+					});
+				}
+				tween.value = t < 1 ? frame : null;
+				if (t < 1) tweenFrame = requestAnimationFrame(step);
+			};
+			tween.value = new Map(from);
+			tweenFrame = requestAnimationFrame(step);
+		}
+		function centerNode(id) {
+			const rect = getNodeRect(id);
+			if (!rect || !root.value) return;
+			const { zoom } = viewport.value;
+			const c = center();
+			setViewport({
+				x: c.x - (rect.x + rect.width / 2) * zoom,
+				y: c.y - (rect.y + rect.height / 2) * zoom,
+				zoom
+			}, true);
+		}
+		/** Keeps a node in view, e.g. when it gets keyboard focus. */
+		function reveal(id) {
+			const rect = getNodeRect(id);
+			if (!rect || !root.value) return;
+			const { x, y, zoom } = viewport.value;
+			const pad = 16;
+			const left = rect.x * zoom + x;
+			const top = rect.y * zoom + y;
+			const right = left + rect.width * zoom;
+			const bottom = top + rect.height * zoom;
+			const w = root.value.clientWidth;
+			const h = root.value.clientHeight;
+			let dx = 0;
+			let dy = 0;
+			if (left < pad) dx = pad - left;
+			else if (right > w - pad) dx = Math.max(pad - left, w - pad - right);
+			if (top < pad) dy = pad - top;
+			else if (bottom > h - pad) dy = Math.max(pad - top, h - pad - bottom);
+			if (dx || dy) setViewport({
+				x: x + dx,
+				y: y + dy,
+				zoom
+			}, true);
+		}
+		let fitted = !props.fitView;
+		watch(() => metrics.size, (size) => {
+			if (fitted || !size || size < doc.value.nodes.length) return;
+			fitted = true;
+			fit(void 0, false, props.fitMinZoom);
+		});
+		/** Dots every 16 canvas px, spread out further when zoomed out. */
+		const background = computed(() => {
+			const { x, y, zoom } = viewport.value;
+			let gap = 16;
+			while (gap * zoom < 12) gap *= 2;
+			const size = gap * zoom;
+			return {
+				backgroundSize: `${size}px ${size}px`,
+				backgroundPosition: `${x - size / 2}px ${y - size / 2}px`
+			};
+		});
+		const layerStyle = computed(() => {
+			const { x, y, zoom } = viewport.value;
+			return {
+				transform: `translate(${x}px, ${y}px) scale(${zoom})`,
+				"--dou-flow-editor-zoom": zoom
+			};
+		});
+		const gesture = shallowRef(null);
+		const guides = shallowRef([]);
+		const panning = ref(false);
+		const spaceHeld = ref(false);
+		let pressTimer = 0;
+		let dragCount = 0;
+		/** When a finger last went down, to tell a long press's own context menu event. */
+		let lastTouch = 0;
+		/** Active touch points, for pinching. */
+		const touches = /* @__PURE__ */ new Map();
+		let pinch = null;
+		/** Where people type or read: presses there don't drag, and text can be selected. */
+		const isInteractive = (el) => !!el.closest(`${FIELDS}, select, button, a[href]`);
+		const inPanels = (el) => !!el.closest(".dou-flow-editor__panels > *");
+		/**
+		* No text selection starts on the canvas, only in fields and in parts of
+		* nodes marked `data-dou-nodrag`.
+		* `user-select: none` says the same, but a user style or a browser
+		* extension can turn selecting back on, and then every drag paints its way
+		* across the nodes and panels.
+		*/
+		function onSelectstart(event) {
+			const node = event.target;
+			if (!(node instanceof Element ? node : node.parentElement)?.closest(FIELDS)) event.preventDefault();
+		}
+		/** Keeps receiving a pointer's events once it leaves the editor. */
+		function capture(id) {
+			try {
+				root.value.setPointerCapture(id);
+			} catch {}
+		}
+		function clearPress() {
+			clearTimeout(pressTimer);
+			pressTimer = 0;
+		}
+		function onPointerDown(event) {
+			const target = event.target;
+			if (inPanels(target)) return;
+			stopAnimation();
+			const touch = event.pointerType === "touch";
+			if (touch) {
+				lastTouch = Date.now();
+				if (event.isPrimary) {
+					touches.clear();
+					pinch = null;
+				}
+				touches.set(event.pointerId, {
+					x: event.clientX,
+					y: event.clientY
+				});
+				if (touches.size === 2) {
+					startPinch();
+					return;
+				}
+				if (touches.size > 2) return;
+			}
+			if (gesture.value) return;
+			const nodeEl = target.closest("[data-node-id]");
+			const edgeEl = target.closest("[data-edge-id]");
+			const additive = event.shiftKey || event.metaKey || event.ctrlKey;
+			const client = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (event.button === 1 || event.button === 0 && spaceHeld.value) {
+				event.preventDefault();
+				startPan(event, false);
+				return;
+			}
+			if (event.button !== 0) return;
+			if (target.closest(".dou-flow-editor__label-input")) return;
+			if (resolved.value.presses.length && !props.readonly && !isInteractive(target)) {
+				const pressedId = target.closest("[data-node-id]")?.dataset.nodeId;
+				const press = {
+					point: toCanvas(client),
+					node: pressedId && nodeById.value.get(pressedId) || null,
+					event
+				};
+				for (const hook of resolved.value.presses) {
+					const handler = hook(context, press);
+					if (!handler) continue;
+					gesture.value = {
+						kind: "press",
+						id: event.pointerId,
+						touch,
+						handler,
+						done: false
+					};
+					capture(event.pointerId);
+					return;
+				}
+			}
+			if (target.closest(".dou-flow-editor__resize") && nodeEl && !props.readonly) {
+				const node = nodeById.value.get(nodeEl.dataset.nodeId);
+				const min = node && resizeOf(specOf(node), node);
+				if (node && min) {
+					const rect = rectOf(node);
+					gesture.value = {
+						kind: "resize",
+						id: event.pointerId,
+						touch,
+						node: node.id,
+						start: toCanvas(client),
+						origin: {
+							width: rect.width,
+							height: rect.height
+						},
+						min: {
+							width: min.minWidth ?? 40,
+							height: min.minHeight ?? 40
+						},
+						group: `resize:${++dragCount}`
+					};
+					capture(event.pointerId);
+					return;
+				}
+			}
+			if (target.closest(".dou-flow-editor__bend, .dou-flow-editor__label.is-bend") && bend.value) {
+				const { edge, handle } = bend.value;
+				const at = toCanvas(client);
+				gesture.value = {
+					kind: "bend",
+					id: event.pointerId,
+					touch,
+					edge: edge.id,
+					origin: edge.data,
+					move: handle.move,
+					group: `bend:${++dragCount}`,
+					start: client,
+					offset: {
+						x: handle.at.x - at.x,
+						y: handle.at.y - at.y
+					},
+					started: false
+				};
+				return;
+			}
+			const portEl = target.closest(".dou-flow-port");
+			if (nodeEl && portEl && !props.readonly) {
+				const link = linkFrom({
+					node: nodeEl.dataset.nodeId,
+					port: portEl.dataset.port
+				});
+				if (link) {
+					gesture.value = {
+						kind: "connect",
+						id: event.pointerId,
+						touch,
+						node: nodeEl.dataset.nodeId,
+						start: client,
+						client,
+						started: false,
+						link
+					};
+					capture(event.pointerId);
+					return;
+				}
+			}
+			const pressed = nodeEl && nodeById.value.get(nodeEl.dataset.nodeId);
+			if (pressed && isContainer(pressed) && event.shiftKey && !touch && !isInteractive(target)) {
+				startBox(event, client);
+				return;
+			}
+			if (nodeEl) {
+				if (isInteractive(target)) return;
+				const id = nodeEl.dataset.nodeId;
+				const wasSelected = selection.value.nodes.includes(id);
+				if (!wasSelected) setSelection(additive ? {
+					nodes: [...selection.value.nodes, id],
+					edges: selection.value.edges
+				} : {
+					nodes: [id],
+					edges: []
+				});
+				gesture.value = {
+					kind: "drag",
+					id: event.pointerId,
+					touch,
+					node: id,
+					start: toCanvas(client),
+					client,
+					origins: /* @__PURE__ */ new Map(),
+					others: [],
+					links: [],
+					started: false,
+					additive,
+					wasSelected,
+					held: false,
+					group: "",
+					snap: !event.altKey
+				};
+				if (touch) pressTimer = window.setTimeout(() => {
+					const g = gesture.value;
+					if (g?.kind !== "drag" || g.started) return;
+					g.held = true;
+					if (!selection.value.nodes.includes(id)) setSelection({
+						nodes: [...selection.value.nodes, id],
+						edges: selection.value.edges
+					});
+				}, LONG_PRESS);
+				return;
+			}
+			if (edgeEl) {
+				const id = edgeEl.getAttribute("data-edge-id");
+				const has = selection.value.edges.includes(id);
+				if (additive) setSelection({
+					nodes: selection.value.nodes,
+					edges: has ? selection.value.edges.filter((e) => e !== id) : [...selection.value.edges, id]
+				});
+				else setSelection({
+					nodes: [],
+					edges: [id]
+				});
+				const edge = doc.value.edges.find((e) => e.id === id);
+				if (edge) emit("edgeClick", edge, event);
+				root.value.focus({ preventScroll: true });
+				return;
+			}
+			if (event.shiftKey && !touch) startBox(event, client);
+			else startPan(event, touch, additive);
+		}
+		function startPan(event, touch, additive = false) {
+			gesture.value = {
+				kind: "pan",
+				id: event.pointerId,
+				touch,
+				start: {
+					x: event.clientX,
+					y: event.clientY
+				},
+				origin: { ...viewport.value },
+				moved: false,
+				additive
+			};
+			if (touch) pressTimer = window.setTimeout(() => {
+				const g = gesture.value;
+				if (g?.kind !== "pan" || g.moved) return;
+				startBox(event, g.start);
+			}, LONG_PRESS);
+			capture(event.pointerId);
+		}
+		function startBox(event, client) {
+			const start = toCanvas(client);
+			gesture.value = {
+				kind: "box",
+				id: event.pointerId,
+				touch: event.pointerType === "touch",
+				start,
+				current: start,
+				client,
+				base: event.shiftKey ? selection.value : emptySelection()
+			};
+			capture(event.pointerId);
+		}
+		function startPinch() {
+			const [a, b] = [...touches.values()];
+			clearPress();
+			endGesture();
+			for (const id of touches.keys()) capture(id);
+			pinch = {
+				distance: Math.hypot(a.x - b.x, a.y - b.y) || 1,
+				mid: local((a.x + b.x) / 2, (a.y + b.y) / 2),
+				origin: { ...viewport.value }
+			};
+		}
+		function movePinch() {
+			if (!pinch) return;
+			const [a, b] = [...touches.values()];
+			const { origin } = pinch;
+			const zoom = clampZoom(origin.zoom * Math.hypot(a.x - b.x, a.y - b.y) / pinch.distance);
+			const mid = local((a.x + b.x) / 2, (a.y + b.y) / 2);
+			const cx = (pinch.mid.x - origin.x) / origin.zoom;
+			const cy = (pinch.mid.y - origin.y) / origin.zoom;
+			setViewport({
+				x: mid.x - cx * zoom,
+				y: mid.y - cy * zoom,
+				zoom
+			});
+		}
+		/** Where the pointer is over the editor, for pasting under it. */
+		let hover = null;
+		function onPointerMove(event) {
+			if (event.pointerType === "mouse" && root.value?.contains(event.target)) hover = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (event.pointerType === "touch" && touches.has(event.pointerId)) {
+				touches.set(event.pointerId, {
+					x: event.clientX,
+					y: event.clientY
+				});
+				if (pinch) {
+					movePinch();
+					return;
+				}
+			}
+			const g = gesture.value;
+			if (!g || g.id !== event.pointerId) return;
+			const client = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (g.kind === "pan") {
+				const dx = client.x - g.start.x;
+				const dy = client.y - g.start.y;
+				if (!g.moved) {
+					if (Math.hypot(dx, dy) < THRESHOLD[g.touch ? "touch" : "mouse"]) return;
+					g.moved = true;
+					clearPress();
+					panning.value = true;
+				}
+				setViewport({
+					x: g.origin.x + dx,
+					y: g.origin.y + dy,
+					zoom: g.origin.zoom
+				});
+			} else if (g.kind === "press") g.handler.move?.(toCanvas(client), event);
+			else if (g.kind === "box") {
+				g.client = client;
+				updateBox(g);
+				autoPan(client);
+			} else if (g.kind === "resize") {
+				const p = toCanvas(client);
+				const width = snapTo(Math.max(g.min.width, g.origin.width + p.x - g.start.x));
+				const height = snapTo(Math.max(g.min.height, g.origin.height + p.y - g.start.y));
+				transact((tr) => tr.updateNode(g.node, {
+					width,
+					height
+				}), { group: g.group });
+			} else if (g.kind === "bend") {
+				if (!g.started) {
+					if (Math.hypot(client.x - g.start.x, client.y - g.start.y) < THRESHOLD[g.touch ? "touch" : "mouse"]) return;
+					g.started = true;
+					capture(g.id);
+				}
+				const p = toCanvas(client);
+				const patch = g.move({
+					x: p.x + g.offset.x,
+					y: p.y + g.offset.y
+				});
+				transact((tr) => tr.updateEdge(g.edge, { data: {
+					...g.origin,
+					...patch
+				} }), { group: g.group });
+			} else if (g.kind === "connect") {
+				g.client = client;
+				if (!g.started) {
+					if (Math.hypot(client.x - g.start.x, client.y - g.start.y) < THRESHOLD[g.touch ? "touch" : "mouse"]) return;
+					g.started = true;
+				}
+				updateLink(g);
+				autoPan(client);
+			} else {
+				g.client = client;
+				if (!g.started) {
+					const { zoom } = viewport.value;
+					const p = toCanvas(client);
+					if (Math.hypot(p.x - g.start.x, p.y - g.start.y) * zoom < THRESHOLD[g.touch ? "touch" : "mouse"] || g.held) return;
+					clearPress();
+					if (props.readonly) return;
+					startDrag(g);
+				}
+				g.snap = !event.altKey;
+				moveDrag(g);
+				autoPan(client);
+			}
+		}
+		function updateBox(g) {
+			g.current = toCanvas(g.client);
+			const box = rectFrom(g.start, g.current);
+			const inside = (r) => r.x >= box.x && r.y >= box.y && r.x + r.width <= box.x + box.width && r.y + r.height <= box.y + box.height;
+			const hit = doc.value.nodes.filter((node) => {
+				if (hiddenIn.value.has(node.id)) return false;
+				const rect = rectOf(node);
+				if (isContainer(node)) return inside(rect);
+				return intersectsTurned(box, rect, specOf(node).rotation?.(node) ?? 0);
+			}).map((n) => n.id);
+			setSelection({
+				nodes: [.../* @__PURE__ */ new Set([...g.base.nodes, ...hit])],
+				edges: g.base.edges
+			});
+			gesture.value = { ...g };
+		}
+		/**
+		* What moving `ids` moves: the unlocked ones and everything inside them,
+		* locked or not, since a container carries its contents.
+		*/
+		function carried(ids) {
+			const out = /* @__PURE__ */ new Set();
+			for (const id of ids) {
+				if (out.has(id) || nodeById.value.get(id)?.locked) continue;
+				out.add(id);
+				for (const inner of tree.value.descendants(id)) out.add(inner);
+			}
+			return out;
+		}
+		function startDrag(g) {
+			g.started = true;
+			capture(g.id);
+			g.group = `drag:${++dragCount}`;
+			const moving = carried(selection.value.nodes);
+			for (const node of doc.value.nodes) if (moving.has(node.id)) g.origins.set(node.id, {
+				x: node.x,
+				y: node.y
+			});
+			g.others = doc.value.nodes.filter((node) => !moving.has(node.id)).map(rectOf);
+			for (const edge of doc.value.edges) {
+				const fromSource = g.origins.has(edge.source.node);
+				if (fromSource === g.origins.has(edge.target.node)) continue;
+				const [mine, theirs] = fromSource ? [edge.source, edge.target] : [edge.target, edge.source];
+				const a = anchorOf(mine, fromSource ? "source" : "target");
+				const b = anchorOf(theirs, fromSource ? "target" : "source");
+				if (a && b && level(a.side) === level(b.side)) g.links.push({
+					from: a,
+					to: b,
+					axis: level(a.side)
+				});
+			}
+			gesture.value = { ...g };
+		}
+		function moveDrag(g) {
+			if (!g.origins.size) return;
+			const p = toCanvas(g.client);
+			const dx = p.x - g.start.x;
+			const dy = p.y - g.start.y;
+			const moved = boundsOf([...g.origins].map(([id, o]) => {
+				return {
+					...getNodeRect(id),
+					x: o.x + dx,
+					y: o.y + dy
+				};
+			}));
+			const snap = g.snap ? snapBox(moved, props.guides ? g.others : [], {
+				threshold: 6 / viewport.value.zoom,
+				grid: props.grid,
+				links: props.guides ? g.links.map((link) => ({
+					...link,
+					from: {
+						x: link.from.x + dx,
+						y: link.from.y + dy
+					}
+				})) : []
+			}) : {
+				dx: 0,
+				dy: 0,
+				guides: []
+			};
+			const sx = dx + snap.dx;
+			const sy = dy + snap.dy;
+			transact((tr) => {
+				for (const [id, o] of g.origins) tr.moveNode(id, Math.round(o.x + sx), Math.round(o.y + sy));
+			}, { group: g.group });
+			guides.value = snap.guides;
+			dropTarget.value = containerAt(p, containerRects(new Set(g.origins.keys()))) ?? null;
+		}
+		/** The container the dragged nodes will go into, or `null` for the canvas. */
+		const dropTarget = ref(null);
+		/** After a drag: the moved nodes go into the container under the pointer, or out of theirs. */
+		function settleDrop(g) {
+			const target = dropTarget.value ?? void 0;
+			dropTarget.value = null;
+			const moved = tree.value.topmost(g.origins.keys());
+			if (!moved.some((id) => tree.value.parentOf(id) !== target)) return;
+			reparent(moved, target, g.group);
+		}
+		/** Puts nodes into a container, or out on the canvas, and says so. */
+		function reparent(ids, target, group) {
+			const changing = ids.filter((id) => tree.value.parentOf(id) !== target);
+			if (!changing.length) return;
+			const left = target ? void 0 : tree.value.parentOf(changing[0]);
+			transact((tr) => {
+				for (const id of changing) tr.updateNode(id, { parent: target });
+			}, { group });
+			const t = messages.value;
+			if (target) announce(format(t.joinedGroup, { group: nodeName(target) }));
+			else if (left) announce(format(t.leftGroup, { group: nodeName(left) }));
+		}
+		let autoPanFrame = 0;
+		/** Scrolls the canvas while a drag or a selection box nears its edge. */
+		function autoPan(client) {
+			cancelAnimationFrame(autoPanFrame);
+			const el = root.value;
+			if (!el) return;
+			const p = local(client.x, client.y);
+			const vx = edgeSpeed(p.x) - edgeSpeed(el.clientWidth - p.x);
+			const vy = edgeSpeed(p.y) - edgeSpeed(el.clientHeight - p.y);
+			if (!vx && !vy) return;
+			const step = () => {
+				const g = gesture.value;
+				if (!g || g.kind === "pan" || g.kind === "bend" || g.kind === "press" || g.kind === "resize" || (g.kind === "drag" || g.kind === "connect") && !g.started) return;
+				const { x, y, zoom } = viewport.value;
+				viewport.value = reachable({
+					x: x + vx,
+					y: y + vy,
+					zoom
+				});
+				if (g.kind === "box") updateBox(g);
+				else if (g.kind === "connect") updateLink(g);
+				else moveDrag(g);
+				autoPanFrame = requestAnimationFrame(step);
+			};
+			autoPanFrame = requestAnimationFrame(step);
+		}
+		/** The prop's rule, then each extension's, in priority order; the first refusal wins. */
+		const canConnect = computed(() => {
+			const rules = [...props.canConnect ? [props.canConnect] : [], ...resolved.value.rules];
+			if (!rules.length) return void 0;
+			return (connection, current) => {
+				for (const rule of rules) {
+					const verdict = rule(connection, current);
+					if (verdict !== true) return verdict;
+				}
+				return true;
+			};
+		});
+		const connectOptions = () => ({
+			portTypes: portTypes.value,
+			acyclic: props.acyclic,
+			canConnect: canConnect.value
+		});
+		/**
+		* Starts an edge at a port. From an output, or an empty input, it draws a
+		* new edge; from an input that has an edge, it picks that edge up.
+		*/
+		function linkFrom(at) {
+			const port = portSpec(at);
+			if (!port) return null;
+			let link;
+			let taken;
+			if (port.kind === "input") {
+				for (const e of doc.value.edges) if (e.target.node === at.node && e.target.port === at.port) taken = e;
+			}
+			if (taken && taken.source.port != null) link = {
+				fixed: taken.source,
+				moving: "target",
+				edge: taken.id,
+				point: anchorOf(at, "target") ?? {
+					x: 0,
+					y: 0
+				},
+				candidate: at
+			};
+			else link = {
+				fixed: at,
+				moving: port.kind === "output" ? "target" : "source",
+				point: anchorOf(at, port.kind === "output" ? "source" : "target") ?? {
+					x: 0,
+					y: 0
+				},
+				candidate: null
+			};
+			return {
+				...link,
+				valid: validEnds(link)
+			};
+		}
+		const connectionOf = (link, end) => link.moving === "target" ? {
+			source: link.fixed,
+			target: end
+		} : {
+			source: end,
+			target: link.fixed
+		};
+		function validEnds(link) {
+			const valid = /* @__PURE__ */ new Map();
+			const fixedPort = portSpec(link.fixed);
+			if (!fixedPort) return valid;
+			const options = connectOptions();
+			for (const node of doc.value.nodes) {
+				const ids = /* @__PURE__ */ new Set();
+				for (const port of portsOf(specOf(node), node)) {
+					const connection = connectionOf(link, {
+						node: node.id,
+						port: port.id
+					});
+					const ports = link.moving === "target" ? {
+						source: fixedPort,
+						target: port
+					} : {
+						source: port,
+						target: fixedPort
+					};
+					if (canJoin(toRaw(doc.value), connection, ports, options, link.edge)) ids.add(port.id);
+				}
+				if (ids.size) valid.set(node.id, ids);
+			}
+			return valid;
+		}
+		/** How close, in screen px, the pointer must come to a port to snap to it. */
+		function updateLink(g) {
+			const link = g.link;
+			const point = toCanvas(g.client);
+			const radius = (g.touch ? MAGNET * 1.5 : MAGNET) / viewport.value.zoom;
+			let best = null;
+			const consider = (node, port, limit) => {
+				const at = anchorOf({
+					node,
+					port
+				}, link.moving);
+				if (!at) return;
+				const d = Math.hypot(at.x - point.x, at.y - point.y);
+				if (d <= limit && (!best || d < best.d)) best = {
+					end: {
+						node,
+						port
+					},
+					d
+				};
+			};
+			for (const [node, ports] of link.valid) for (const port of ports) consider(node, port, radius);
+			if (!best) {
+				const over = document.elementFromPoint(g.client.x, g.client.y)?.closest("[data-node-id]")?.dataset.nodeId;
+				for (const port of over && link.valid.get(over) || []) consider(over, port, Infinity);
+			}
+			const candidate = best?.end ?? null;
+			g.link = {
+				...link,
+				point,
+				candidate,
+				refused: candidate ? null : refusedAt(link, point, radius)
+			};
+			gesture.value = { ...g };
+		}
+		/** The nearest port within `radius` of `point` that the link can't land on, and why. */
+		function refusedAt(link, point, radius) {
+			const fixedPort = portSpec(link.fixed);
+			if (!fixedPort) return null;
+			let best = null;
+			for (const node of doc.value.nodes) for (const port of portsOf(specOf(node), node)) {
+				if (link.valid.get(node.id)?.has(port.id)) continue;
+				const end = {
+					node: node.id,
+					port: port.id
+				};
+				if (end.node === link.fixed.node && end.port === link.fixed.port) continue;
+				const at = anchorOf(end, link.moving);
+				const d = at ? Math.hypot(at.x - point.x, at.y - point.y) : Infinity;
+				if (d <= radius && (!best || d < best.d)) best = {
+					end,
+					d
+				};
+			}
+			if (!best) return null;
+			const { end } = best;
+			const port = portSpec(end);
+			const ports = link.moving === "target" ? {
+				source: fixedPort,
+				target: port
+			} : {
+				source: port,
+				target: fixedPort
+			};
+			const refusal = joinRefusal(toRaw(doc.value), connectionOf(link, end), ports, connectOptions(), link.edge);
+			return refusal && {
+				end,
+				refusal
+			};
+		}
+		/** What screen readers hear when a link is refused. */
+		function refusalText(refusal) {
+			if (refusal.reason === "custom") return refusal.message ?? messages.value.refused.custom;
+			return messages.value.refused[refusal.reason];
+		}
+		/** Whether a link was let go over a node other than its own. */
+		function overNode(link) {
+			const { x, y } = link.point;
+			return doc.value.nodes.some((node) => {
+				if (node.id === link.fixed.node || isContainer(node)) return false;
+				const r = rectOf(node);
+				return x >= r.x && x <= r.x + r.width && y >= r.y && y <= r.y + r.height;
+			});
+		}
+		/** Adds the edge a link describes, replacing what it must. */
+		function finishLink(link, event) {
+			const { candidate } = link;
+			if (!candidate) {
+				if (link.refused) announce(refusalText(link.refused.refusal));
+				else if (!link.edge && overNode(link)) announce(messages.value.noTarget);
+				else if (link.edge) {
+					const id = link.edge;
+					transact((tr) => tr.removeEdge(id));
+				} else if (event) {
+					emit("connectToCanvas", link.fixed, link.point, event);
+					if (!event.defaultPrevented && paletteTypes.value.length) quickAdd.value = {
+						link,
+						at: link.point,
+						client: {
+							x: event.clientX,
+							y: event.clientY
+						},
+						types: typesTaking(link.fixed),
+						touch: event.pointerType === "touch"
+					};
+				}
+				return;
+			}
+			const connection = connectionOf(link, candidate);
+			const source = portSpec(connection.source);
+			const target = portSpec(connection.target);
+			const edge = {
+				id: createId("e"),
+				source: connection.source,
+				target: connection.target
+			};
+			const displaced = source && target ? displacedEdges(toRaw(doc.value), connection, {
+				source,
+				target
+			}, link.edge) : [];
+			transact((tr) => {
+				if (link.edge) tr.removeEdge(link.edge);
+				for (const id of displaced) tr.removeEdge(id);
+				tr.addEdge(edge);
+			});
+			emit("connect", edge);
+			announce(messages.value.connected);
+		}
+		/** What the canvas shows while an edge is being drawn, by mouse, touch or keyboard. */
+		const connecting = computed(() => {
+			const g = gesture.value;
+			if (g?.kind === "connect" && g.started) return g.link;
+			return keyLink.value;
+		});
+		const previewPath = computed(() => {
+			const link = connecting.value ?? quickAdd.value?.link;
+			if (!link) return null;
+			const fixedRole = link.moving === "target" ? "source" : "target";
+			const a = anchorOf(link.fixed, fixedRole);
+			if (!a) return null;
+			const c = link.candidate && anchorOf(link.candidate, link.moving);
+			const opposite = {
+				left: "right",
+				right: "left",
+				top: "bottom",
+				bottom: "top"
+			};
+			const b = c ?? {
+				...link.point,
+				side: opposite[a.side]
+			};
+			const moved = link.edge ? doc.value.edges.find((e) => e.id === link.edge) : void 0;
+			const route = edgeTypeOf(moved?.type).route;
+			return (link.moving === "target" ? route(a, b, moved) : route(b, a, moved)).path;
+		});
+		/** How each port looks while connecting: by node, then port. */
+		const portStates = computed(() => {
+			const link = connecting.value;
+			if (!link) return null;
+			const states = /* @__PURE__ */ new Map();
+			const set = (end, state) => {
+				let ports = states.get(end.node);
+				if (!ports) states.set(end.node, ports = /* @__PURE__ */ new Map());
+				ports.set(end.port, state);
+			};
+			for (const [node, ports] of link.valid) for (const port of ports) set({
+				node,
+				port
+			}, "valid");
+			set(link.fixed, "active");
+			if (link.candidate) set(link.candidate, "candidate");
+			if (link.refused) set(link.refused.end, "refused");
+			return states;
+		});
+		const keyLink = shallowRef(null);
+		/** Valid ends of a link, nearest first. */
+		/** A port's anchor; nodes not measured yet fall back to their corner. */
+		function place(end, role) {
+			return anchorOf(end, role) ?? nodeById.value.get(end.node) ?? {
+				x: 0,
+				y: 0
+			};
+		}
+		function rankEnds(link) {
+			const at = place(link.fixed, link.moving === "target" ? "source" : "target");
+			const ends = [];
+			for (const [node, ports] of link.valid) for (const port of ports) {
+				const p = place({
+					node,
+					port
+				}, link.moving);
+				ends.push({
+					end: {
+						node,
+						port
+					},
+					d: Math.hypot(p.x - at.x, p.y - at.y)
+				});
+			}
+			return ends.sort((a, b) => a.d - b.d).map((e) => e.end);
+		}
+		function describeEnd(end) {
+			const node = nodeById.value.get(end.node);
+			const port = portSpec(end);
+			const name = node ? labelOf(specOf(node), node, messages.value) : end.node;
+			return format(messages.value.connectTo, {
+				node: name,
+				port: port?.label ?? port?.id ?? ""
+			});
+		}
+		/** Starts keyboard connecting from the next port of a node that has somewhere to go. */
+		function startKeyLink(nodeId, after) {
+			const node = nodeById.value.get(nodeId);
+			if (!node) return false;
+			const all = portsOf(specOf(node), node);
+			const ports = [...all.filter((p) => p.kind === "output"), ...all.filter((p) => p.kind !== "output")];
+			const start = after ? ports.findIndex((p) => p.id === after.port) + 1 : 0;
+			for (let i = 0; i < ports.length; i++) {
+				const port = ports[(start + i) % ports.length];
+				const link = linkFrom({
+					node: nodeId,
+					port: port.id
+				});
+				if (!link) continue;
+				const options = rankEnds(link);
+				if (!options.length) continue;
+				const candidate = link.edge ? link.candidate : options[0];
+				keyLink.value = {
+					...link,
+					candidate,
+					from: {
+						node: nodeId,
+						port: port.id
+					},
+					options
+				};
+				if (candidate) {
+					reveal(candidate.node);
+					announce(describeEnd(candidate));
+				}
+				return true;
+			}
+			announce(messages.value.noTarget);
+			return false;
+		}
+		function onKeyLink(event) {
+			const link = keyLink.value;
+			const { options } = link;
+			const index = link.candidate ? options.findIndex((o) => o.node === link.candidate.node && o.port === link.candidate.port) : -1;
+			switch (event.key) {
+				case "ArrowRight":
+				case "ArrowDown":
+				case "ArrowLeft":
+				case "ArrowUp": {
+					const candidate = options[(index + (event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1) + options.length) % options.length];
+					keyLink.value = {
+						...link,
+						candidate
+					};
+					reveal(candidate.node);
+					announce(describeEnd(candidate));
+					break;
+				}
+				case "Tab":
+					startKeyLink(link.from.node, link.from);
+					break;
+				case "Enter":
+					keyLink.value = null;
+					finishLink(link);
+					break;
+				case "Escape":
+					keyLink.value = null;
+					break;
+				default: return;
+			}
+			event.preventDefault();
+		}
+		/** The selected nodes and the edges between them. */
+		/** `ids` and every node inside the containers among them. */
+		function withInside(ids) {
+			const out = new Set(ids);
+			for (const id of ids) for (const inner of tree.value.descendants(id)) out.add(inner);
+			return [...out];
+		}
+		function copySelection() {
+			const ids = new Set(withInside(selection.value.nodes));
+			if (!ids.size) return null;
+			const raw = toRaw(doc.value);
+			return {
+				version: 1,
+				nodes: raw.nodes.filter((node) => ids.has(node.id)),
+				edges: raw.edges.filter((edge) => ids.has(edge.source.node) && ids.has(edge.target.node))
+			};
+		}
+		let pastes = 0;
+		/** Adds a copy of `data` with new ids, at the pointer or next to the original. */
+		function paste(data, at) {
+			for (const transform of resolved.value.pasteTransforms) data = transform(data, context);
+			const bounds = boundsOf(data.nodes.map((n) => ({
+				x: n.x,
+				y: n.y,
+				width: n.width ?? 0,
+				height: n.height ?? 0
+			})));
+			if (!bounds) return;
+			const step = (props.grid || 8) * 3;
+			const shift = at ? {
+				x: Math.round(at.x - bounds.x),
+				y: Math.round(at.y - bounds.y)
+			} : {
+				x: step * ++pastes,
+				y: step * pastes
+			};
+			const ids = new Map(data.nodes.map((n) => [n.id, createId()]));
+			const containers = containerRects();
+			const nodes = data.nodes.map((n) => {
+				const x = n.x + shift.x;
+				const y = n.y + shift.y;
+				const copied = n.parent ? ids.get(n.parent) : void 0;
+				const m = metrics.get(n.id);
+				const centre = {
+					x: x + (m?.width ?? n.width ?? 0) / 2,
+					y: y + (m?.height ?? n.height ?? 0) / 2
+				};
+				return {
+					...n,
+					data: n.data && { ...n.data },
+					id: ids.get(n.id),
+					x,
+					y,
+					locked: void 0,
+					parent: copied ?? containerAt(centre, containers)
+				};
+			});
+			transact((tr) => {
+				for (const node of nodes) tr.addNode(node);
+				for (const edge of data.edges) {
+					const source = ids.get(edge.source.node);
+					const target = ids.get(edge.target.node);
+					if (!source || !target) continue;
+					tr.addEdge({
+						...edge,
+						id: createId("e"),
+						source: {
+							...edge.source,
+							node: source
+						},
+						target: {
+							...edge.target,
+							node: target
+						}
+					});
+				}
+			});
+			const copies = new Set(ids.values());
+			setSelection({
+				nodes: nodes.filter((n) => !n.parent || !copies.has(n.parent)).map((n) => n.id),
+				edges: []
+			});
+		}
+		function duplicate() {
+			const data = copySelection();
+			if (!data || props.readonly) return;
+			pastes = 0;
+			paste(data);
+		}
+		function selectAll() {
+			setSelection({
+				nodes: doc.value.nodes.flatMap((n) => hiddenIn.value.has(n.id) ? [] : [n.id]),
+				edges: []
+			});
+		}
+		/** Copies the selection to the system clipboard, and keeps it for pasting from the menu. */
+		function copy() {
+			const data = copySelection();
+			if (!data) return false;
+			const text = writeClipboard(data);
+			pastes = 0;
+			navigator.clipboard?.writeText(text).catch(() => {});
+			return true;
+		}
+		function cut() {
+			if (props.readonly || !copy()) return false;
+			deleteSelection();
+			return true;
+		}
+		/** Pastes from the system clipboard when the page may read it, or what was copied here. */
+		async function pasteFromClipboard(at) {
+			if (props.readonly) return false;
+			let text = null;
+			try {
+				text = await navigator.clipboard?.readText() ?? null;
+			} catch {}
+			const data = readClipboard(text) ?? readClipboard();
+			if (!data) return false;
+			paste(data, at ?? null);
+			return true;
+		}
+		const paletteTypes = computed(() => [...types.value.values()].filter((spec) => spec.palette));
+		/** A node of a type, not yet in the document. */
+		function draft(spec) {
+			return {
+				id: createId(),
+				type: spec.type,
+				x: 0,
+				y: 0,
+				...spec.size,
+				data: spec.defaults?.() ?? {}
+			};
+		}
+		/** The first port of a new node that can take an edge from `from`, if any. */
+		function takingPort(node, from) {
+			const fromPort = portSpec(from);
+			if (!fromPort) return void 0;
+			const spec = specOf(node);
+			const next = {
+				...doc.value,
+				nodes: [...doc.value.nodes, node]
+			};
+			for (const port of portsOf(spec, node)) {
+				if (port.kind === fromPort.kind) continue;
+				const end = {
+					node: node.id,
+					port: port.id
+				};
+				const connection = fromPort.kind === "output" ? {
+					source: from,
+					target: end
+				} : {
+					source: end,
+					target: from
+				};
+				const ports = fromPort.kind === "output" ? {
+					source: fromPort,
+					target: port
+				} : {
+					source: port,
+					target: fromPort
+				};
+				if (!joinRefusal(next, connection, ports, connectOptions())) return port;
+			}
+		}
+		/** Palette types a new node of which could take an edge from `from`. */
+		function typesTaking(from) {
+			return paletteTypes.value.filter((spec) => takingPort(draft(spec), from));
+		}
+		function insertNode(type, options = {}) {
+			const spec = types.value.get(type);
+			if (!spec || props.readonly) return null;
+			const node = draft(spec);
+			if (options.data) node.data = {
+				...node.data,
+				...options.data
+			};
+			if (options.size) Object.assign(node, options.size);
+			let at = options.at;
+			let from = options.from;
+			let start = false;
+			const after = !at && !from ? soleSelected() : void 0;
+			if (after) {
+				const rect = getNodeRect(after.id);
+				const vertical = props.direction === "vertical";
+				const gap = TIDY_GAP[props.direction].rank;
+				for (const out of portsOf(specOf(after), after)) {
+					const end = {
+						node: after.id,
+						port: out.id
+					};
+					if (out.kind === "output" && takingPort(node, end)) {
+						from = end;
+						break;
+					}
+				}
+				const fromAt = from && anchorOf(from, "source");
+				at = vertical ? {
+					x: fromAt?.x ?? rect.x + rect.width / 2,
+					y: rect.y + rect.height + gap
+				} : {
+					x: rect.x + rect.width + gap,
+					y: fromAt?.y ?? rect.y + rect.height / 2
+				};
+				start = true;
+			}
+			at ??= toCanvas(clientCenter());
+			node.x = snapTo(at.x);
+			node.y = snapTo(at.y);
+			const inside = containerAt(at, containerRects());
+			if (inside) node.parent = inside;
+			const port = from ? takingPort(node, from) : void 0;
+			const group = `insert:${node.id}`;
+			transact((tr) => {
+				tr.addNode(node);
+				if (from && port) {
+					const end = {
+						node: node.id,
+						port: port.id
+					};
+					const fromPort = portSpec(from);
+					tr.addEdge({
+						id: createId("e"),
+						source: fromPort.kind === "output" ? from : end,
+						target: fromPort.kind === "output" ? end : from
+					});
+				}
+			}, { group });
+			pending.set(node.id, {
+				at,
+				port: port?.id,
+				group,
+				start,
+				avoid: !options.at,
+				focus: options.focus ?? true
+			});
+			setSelection({
+				nodes: [node.id],
+				edges: []
+			});
+			announce(format(messages.value.added, { node: labelOf(spec, node, messages.value) }));
+			return node.id;
+		}
+		/** The node selected on its own, if any. */
+		function soleSelected() {
+			const { nodes, edges } = selection.value;
+			return nodes.length === 1 && !edges.length ? nodeById.value.get(nodes[0]) : void 0;
+		}
+		/** The middle of the editor on screen. */
+		function clientCenter() {
+			const box = root.value.getBoundingClientRect();
+			return {
+				x: box.left + box.width / 2,
+				y: box.top + box.height / 2
+			};
+		}
+		const menu = useTemplateRef("menu");
+		const menuItems = shallowRef([]);
+		/** The extensions' items for a target, a separator between each extension's. */
+		function itemsFor(target) {
+			const items = [];
+			for (const fn of resolved.value.menus) fn(context, target).forEach((item, i) => items.push({
+				...item,
+				divided: !!items.length && (i === 0 || !!item.divided)
+			}));
+			return items;
+		}
+		const menuOpen = ref(false);
+		/** The last press while the menu was open, which closed it. */
+		let menuPress = null;
+		const onMenuPress = (event) => {
+			menuPress = menuOpen.value ? {
+				target: event.target,
+				at: Date.now()
+			} : null;
+		};
+		const onMenuClick = () => menuPress = null;
+		/** The button that opened the menu, while it is open. */
+		const menuFrom = shallowRef(null);
+		/** The button that opened the menu last, open or not. */
+		let lastMenuFrom = null;
+		watch(menuOpen, (open) => {
+			if (!open) menuFrom.value = null;
+		});
+		function openMenu(target, client, from) {
+			return showMenu(itemsFor(target), client, from);
+		}
+		function showMenu(items, client, from, options = {}) {
+			const press = menuPress;
+			menuPress = null;
+			if (from && from === lastMenuFrom && press && Date.now() - press.at < 500 && press.target instanceof Node && from.contains(press.target)) {
+				lastMenuFrom = null;
+				return false;
+			}
+			if (!items.length) return false;
+			menuItems.value = items;
+			lastMenuFrom = from ?? null;
+			const rect = from?.getBoundingClientRect();
+			if (rect) menu.value?.open(rect.left, rect.top - 2, {
+				box: {
+					width: rect.width,
+					height: rect.height + 4
+				},
+				focusChecked: options.focusChecked
+			});
+			else menu.value?.open(client.x, client.y, { focusChecked: options.focusChecked });
+			menuFrom.value = from ?? null;
+			return true;
+		}
+		onMounted(() => {
+			window.addEventListener("pointerdown", onMenuPress, true);
+			window.addEventListener("click", onMenuClick);
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("pointerdown", onMenuPress, true);
+			window.removeEventListener("click", onMenuClick);
+		});
+		const toolbarItems = computed(() => {
+			if (props.readonly || gesture.value || keyLink.value || quickAdd.value) return [];
+			const nodes = selection.value.nodes.flatMap((id) => nodeById.value.get(id) ?? []);
+			if (nodes.length) return resolved.value.toolbars.map((fn) => fn(context, nodes)).filter((list) => list.length);
+			const ids = new Set(selection.value.edges);
+			const edges = doc.value.edges.filter((edge) => ids.has(edge.id));
+			if (!edges.length) return [];
+			return resolved.value.edgeToolbars.map((fn) => fn(context, edges)).filter((list) => list.length);
+		});
+		/** Where the toolbar floats: above the selected nodes, in screen px within the editor. */
+		const toolbarAnchor = computed(() => {
+			const { nodes, edges } = selection.value;
+			const bounds = boundsOf(nodes.length ? nodes.flatMap((id) => {
+				const node = nodeById.value.get(id);
+				if (!node) return [];
+				return nodeBounds(specOf(node), node, rectOf(node));
+			}) : edgeRoutes.value.filter((item) => edges.includes(item.edge.id)).flatMap((item) => pathPoints(item.route.path)).map((p) => ({
+				x: p.x,
+				y: p.y,
+				width: 0,
+				height: 0
+			})));
+			if (!bounds) return null;
+			const { x, y, zoom } = viewport.value;
+			const screen = (rect) => ({
+				left: rect.x * zoom + x,
+				top: rect.y * zoom + y,
+				right: (rect.x + rect.width) * zoom + x,
+				bottom: (rect.y + rect.height) * zoom + y
+			});
+			const reach = 64 / zoom;
+			const band = {
+				x: bounds.x - reach * 4,
+				y: bounds.y - reach,
+				width: bounds.width + reach * 8,
+				height: bounds.height + reach * 2
+			};
+			const avoid = nodes.length ? void 0 : shownNodes.value.filter((node) => !hiddenIn.value.has(node.id) && !isContainer(node)).map((node) => rectOf(node)).filter((rect) => intersects(rect, band)).map(screen);
+			return {
+				x: (bounds.x + bounds.width / 2) * zoom + x,
+				top: bounds.y * zoom + y,
+				bottom: (bounds.y + bounds.height) * zoom + y,
+				avoid
+			};
+		});
+		const quickAdd = shallowRef(null);
+		function chooseQuickAdd(type) {
+			const pendingAdd = quickAdd.value;
+			quickAdd.value = null;
+			if (!pendingAdd) return;
+			if (type) insertNode(type, {
+				at: pendingAdd.at,
+				from: pendingAdd.link.fixed
+			});
+			else root.value?.focus({ preventScroll: true });
+		}
+		const insertDrag = shallowRef(null);
+		let pickUpTimer;
+		/** Keeps a finger that picked a node up from scrolling the page. */
+		let insertHold;
+		/** Whether a point on screen is on the canvas itself, not on a panel over it. */
+		function onCanvasAt(client) {
+			const el = document.elementFromPoint(client.x, client.y);
+			return !!root.value && !!el && root.value.contains(el) && !inPanels(el);
+		}
+		function startInsertDrag(type, event) {
+			const spec = types.value.get(type);
+			if (!spec || props.readonly || event.button !== 0 || insertDrag.value) return false;
+			const client = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			insertDrag.value = {
+				spec,
+				id: event.pointerId,
+				touch: event.pointerType === "touch",
+				start: client,
+				client,
+				started: false,
+				over: false
+			};
+			window.addEventListener("pointermove", onInsertMove, true);
+			window.addEventListener("pointerup", onInsertUp, true);
+			window.addEventListener("pointercancel", onInsertUp, true);
+			window.addEventListener("keydown", onInsertKey, true);
+			window.addEventListener("contextmenu", onInsertMenu, true);
+			insertHold = holdPointer(event);
+			if (event.pointerType === "touch") pickUpTimer = setTimeout(() => {
+				const d = insertDrag.value;
+				if (!d || d.started) return;
+				insertHold?.grab();
+				insertDrag.value = {
+					...d,
+					started: true,
+					over: onCanvasAt(d.client)
+				};
+			}, PICK_UP);
+			return true;
+		}
+		function onInsertMenu(event) {
+			event.preventDefault();
+		}
+		function onInsertMove(event) {
+			const d = insertDrag.value;
+			if (!d || d.id !== event.pointerId) return;
+			const client = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (!d.started) {
+				if (Math.hypot(client.x - d.start.x, client.y - d.start.y) < THRESHOLD[d.touch ? "touch" : "mouse"]) return;
+				if (d.touch) return stopInsertDrag();
+			}
+			insertDrag.value = {
+				...d,
+				client,
+				started: true,
+				over: onCanvasAt(client)
+			};
+		}
+		function onInsertUp(event) {
+			const d = insertDrag.value;
+			if (!d || d.id !== event.pointerId) return;
+			stopInsertDrag();
+			if (!d.started) return;
+			swallowClick();
+			const client = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (event.type === "pointerup" && onCanvasAt(client)) insertNode(d.spec.type, { at: toCanvas(client) });
+		}
+		function onInsertKey(event) {
+			if (event.key !== "Escape" || !insertDrag.value) return;
+			event.preventDefault();
+			event.stopPropagation();
+			if (insertDrag.value.started) swallowClick();
+			stopInsertDrag();
+		}
+		function stopInsertDrag() {
+			insertDrag.value = null;
+			clearTimeout(pickUpTimer);
+			insertHold?.release();
+			insertHold = void 0;
+			window.removeEventListener("contextmenu", onInsertMenu, true);
+			window.removeEventListener("pointermove", onInsertMove, true);
+			window.removeEventListener("pointerup", onInsertUp, true);
+			window.removeEventListener("pointercancel", onInsertUp, true);
+			window.removeEventListener("keydown", onInsertKey, true);
+		}
+		const stopEvent = (event) => {
+			event.stopPropagation();
+			event.preventDefault();
+		};
+		/** The click that ends a drag isn't a click on the source: it doesn't add another node. */
+		function swallowClick() {
+			window.addEventListener("click", stopEvent, {
+				capture: true,
+				once: true
+			});
+			setTimeout(() => window.removeEventListener("click", stopEvent, true));
+		}
+		onBeforeUnmount(stopInsertDrag);
+		const ghostStyle = computed(() => {
+			const d = insertDrag.value;
+			return d ? { transform: `translate(${d.client.x}px, ${d.client.y}px)` } : void 0;
+		});
+		function onPointerUp(event) {
+			if (event.pointerType === "touch") {
+				touches.delete(event.pointerId);
+				if (pinch) {
+					if (touches.size < 2) pinch = null;
+					return;
+				}
+			}
+			const g = gesture.value;
+			if (!g || g.id !== event.pointerId) return;
+			const cancelled = event.type === "pointercancel";
+			if (g.kind === "press" && !cancelled) {
+				g.done = true;
+				g.handler.end?.(toCanvas({
+					x: event.clientX,
+					y: event.clientY
+				}), event);
+			}
+			if (!cancelled) {
+				if (g.kind === "pan" && !g.moved) {
+					if (!g.additive) setSelection(emptySelection());
+					emit("canvasClick", toCanvas({
+						x: event.clientX,
+						y: event.clientY
+					}), event);
+				} else if (g.kind === "box" && g.touch && g.current === g.start) {
+					endGesture();
+					menuFromPointer({
+						kind: "canvas",
+						point: g.start
+					}, {
+						x: event.clientX,
+						y: event.clientY
+					}, event);
+					return;
+				} else if (g.kind === "connect") {
+					if (g.started) finishLink(g.link, event);
+					else setSelection({
+						nodes: [g.node],
+						edges: []
+					});
+				} else if (g.kind === "drag" && g.started) settleDrop(g);
+				else if (g.kind === "drag" && !g.started && !g.held) {
+					const node = nodeById.value.get(g.node);
+					if (g.additive && g.wasSelected) setSelection({
+						nodes: selection.value.nodes.filter((id) => id !== g.node),
+						edges: selection.value.edges
+					});
+					else if (!g.additive && g.wasSelected) setSelection({
+						nodes: [g.node],
+						edges: []
+					});
+					if (node) emit("nodeClick", node, event);
+				}
+			}
+			endGesture();
+		}
+		function endGesture() {
+			const g = gesture.value;
+			if (g?.kind === "press" && !g.done) {
+				g.done = true;
+				g.handler.cancel?.();
+			}
+			clearPress();
+			cancelAnimationFrame(autoPanFrame);
+			if (g && root.value?.hasPointerCapture(g.id)) root.value.releasePointerCapture(g.id);
+			if ((g?.kind === "drag" || g?.kind === "bend") && g.started) history.close();
+			if (g?.kind === "resize") history.close();
+			gesture.value = null;
+			guides.value = [];
+			dropTarget.value = null;
+			panning.value = false;
+		}
+		/** Puts dragged nodes back where they started. */
+		function cancelDrag() {
+			const g = gesture.value;
+			if (g?.kind !== "drag" && g?.kind !== "bend" || !g.started) return false;
+			const tr = new FlowTransaction(docOf()).setMeta({ history: false });
+			if (g.kind === "bend") tr.updateEdge(g.edge, { data: g.origin });
+			else for (const [id, o] of g.origins) tr.moveNode(id, o.x, o.y);
+			if (tr.changed) commit(tr);
+			history.drop(g.group);
+			syncHistory();
+			endGesture();
+			return true;
+		}
+		function onWheel(event) {
+			const target = event.target;
+			if (inPanels(target)) return;
+			if (quickAdd.value) chooseQuickAdd(null);
+			const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? root.value.clientHeight : 1;
+			let dx = event.deltaX * unit;
+			let dy = event.deltaY * unit;
+			if (event.ctrlKey || event.metaKey) {
+				event.preventDefault();
+				stopAnimation();
+				const factor = 2 ** (-Math.max(-100, Math.min(100, dy)) / 240);
+				zoomAround(viewport.value.zoom * factor, local(event.clientX, event.clientY));
+				return;
+			}
+			if (!props.panOnScroll || scrollsInside(target, dx, dy)) return;
+			event.preventDefault();
+			stopAnimation();
+			if (event.shiftKey && !dx) {
+				dx = dy;
+				dy = 0;
+			}
+			const { x, y, zoom } = viewport.value;
+			setViewport({
+				x: x - dx,
+				y: y - dy,
+				zoom
+			});
+		}
+		/** Whether something scrollable inside a node can take the scroll itself. */
+		function scrollsInside(target, dx, dy) {
+			let el = target;
+			while (el && el !== root.value && !el.dataset?.nodeId) {
+				const style = getComputedStyle(el);
+				if (dy && /auto|scroll/.test(style.overflowY) && el.scrollHeight > el.clientHeight) {
+					if (dy < 0 ? el.scrollTop > 0 : el.scrollTop + el.clientHeight < el.scrollHeight) return true;
+				}
+				if (dx && /auto|scroll/.test(style.overflowX) && el.scrollWidth > el.clientWidth) {
+					if (dx < 0 ? el.scrollLeft > 0 : el.scrollLeft + el.clientWidth < el.scrollWidth) return true;
+				}
+				el = el.parentElement;
+			}
+			return false;
+		}
+		function onDblclick(event) {
+			const nodeEl = event.target.closest("[data-node-id]");
+			const node = nodeEl && nodeById.value.get(nodeEl.dataset.nodeId);
+			if (node) emit("nodeDblclick", node, event);
+			else {
+				const edgeEl = event.target.closest("[data-edge-id]");
+				if (edgeEl) editLabel(edgeEl.getAttribute("data-edge-id"));
+			}
+		}
+		function onContextmenu(event) {
+			const target = event.target;
+			if (inPanels(target)) return;
+			if (event.pointerType === "touch" || Date.now() - lastTouch < 1e3) {
+				event.preventDefault();
+				return;
+			}
+			if (isEditable(target)) return;
+			const nodeEl = target.closest("[data-node-id]");
+			const edgeEl = target.closest("[data-edge-id]");
+			const keyboard = event.button === -1 || event.clientX === 0 && event.clientY === 0;
+			let client = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (keyboard) {
+				const box = (nodeEl ?? root.value).getBoundingClientRect();
+				client = nodeEl ? {
+					x: box.left,
+					y: box.bottom
+				} : clientCenter();
+			}
+			const point = toCanvas(client);
+			if (nodeEl) {
+				const node = nodeById.value.get(nodeEl.dataset.nodeId);
+				if (!node) return;
+				emit("nodeContextmenu", node, event);
+				if (event.defaultPrevented) return;
+				if (!selection.value.nodes.includes(node.id)) setSelection({
+					nodes: [node.id],
+					edges: []
+				});
+				menuFromPointer({
+					kind: "node",
+					node,
+					point
+				}, client, event);
+			} else if (edgeEl) {
+				const edge = doc.value.edges.find((e) => e.id === edgeEl.getAttribute("data-edge-id"));
+				if (!edge) return;
+				emit("edgeContextmenu", edge, event);
+				if (event.defaultPrevented) return;
+				if (!selection.value.edges.includes(edge.id)) setSelection({
+					nodes: [],
+					edges: [edge.id]
+				});
+				menuFromPointer({
+					kind: "edge",
+					edge,
+					point
+				}, client, event);
+			} else {
+				emit("canvasContextmenu", point, event);
+				if (event.defaultPrevented) return;
+				menuFromPointer({
+					kind: "canvas",
+					point
+				}, client, event);
+			}
+		}
+		/** Opens the menu for a pointer event, keeping the browser's own when there's nothing to show. */
+		function menuFromPointer(target, client, event) {
+			if (target.kind === "canvas" && event.type !== "contextmenu") {
+				const menuEvent = new MouseEvent("contextmenu", {
+					cancelable: true,
+					clientX: client.x,
+					clientY: client.y
+				});
+				emit("canvasContextmenu", target.point, menuEvent);
+				if (menuEvent.defaultPrevented) return;
+			}
+			if (openMenu(target, client)) event.preventDefault();
+		}
+		const isEditable = (el) => !!el.closest("input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"]");
+		/** Nodes in the order Tab visits them: along the edges, left to right. */
+		const readingOrder = () => flowOrder(doc.value);
+		function focusNode(id) {
+			focusedNode.value = id;
+			setSelection({
+				nodes: [id],
+				edges: []
+			});
+			reveal(id);
+			nextTick(() => root.value?.querySelector(`[data-node-id="${CSS.escape(id)}"]`)?.focus({ preventScroll: true }));
+		}
+		/** Room around grouped nodes; more on top for the title. */
+		const GROUP_PAD = {
+			side: 24,
+			top: 56
+		};
+		/**
+		* Puts nodes, the selected ones by default, into a new container of `type`
+		* drawn around them, as one undo step; returns its id.
+		*/
+		function groupNodes(ids = selection.value.nodes, type = "group") {
+			const spec = types.value.get(type);
+			if (props.readonly || !spec?.container) return null;
+			const top = tree.value.topmost(ids.filter((id) => !hiddenIn.value.has(id)));
+			const bounds = boundsOf(top.flatMap((id) => getNodeRect(id) ?? []));
+			if (!bounds) return null;
+			const parents = new Set(top.map((id) => tree.value.parentOf(id)));
+			if (parents.size > 1) {
+				announce(messages.value.groupMixed);
+				return null;
+			}
+			const group = {
+				...draft(spec),
+				x: snapTo(bounds.x - GROUP_PAD.side),
+				y: snapTo(bounds.y - GROUP_PAD.top),
+				width: snapTo(bounds.width + GROUP_PAD.side * 2),
+				height: snapTo(bounds.height + GROUP_PAD.top + GROUP_PAD.side),
+				parent: [...parents][0]
+			};
+			transact((tr) => {
+				const order = tr.doc.nodes.map((n) => n.id);
+				const index = Math.min(...top.map((id) => order.indexOf(id)));
+				tr.addNode(group, index);
+				for (const id of top) tr.updateNode(id, { parent: group.id });
+			});
+			setSelection({
+				nodes: [group.id],
+				edges: []
+			});
+			announce(format(messages.value.added, { node: nameOf(group) }));
+			return group.id;
+		}
+		/** Removes a container and keeps what was inside it, as one undo step. */
+		function ungroupNode(id) {
+			const node = nodeById.value.get(id);
+			if (props.readonly || !node || !isContainer(node)) return false;
+			const children = tree.value.children.get(id) ?? [];
+			const name = nameOf(node);
+			transact((tr) => {
+				for (const child of children) tr.updateNode(child, { parent: node.parent });
+				tr.removeNode(id);
+			});
+			setSelection({
+				nodes: [...children],
+				edges: []
+			});
+			announce(format(messages.value.ungrouped, { group: name }));
+			return true;
+		}
+		/**
+		* Takes nodes, the selected ones by default, out of the containers they
+		* are in and puts them just below, as one undo step; returns how many moved.
+		*/
+		function leaveGroup(ids = selection.value.nodes) {
+			if (props.readonly) return 0;
+			const byParent = /* @__PURE__ */ new Map();
+			for (const id of tree.value.topmost(ids)) {
+				const parent = tree.value.parentOf(id);
+				if (parent && !nodeById.value.get(id)?.locked) byParent.set(parent, [...byParent.get(parent) ?? [], id]);
+			}
+			if (!byParent.size) return 0;
+			let count = 0;
+			transact((tr) => {
+				for (const [parent, list] of byParent) {
+					const frame = getNodeRect(parent);
+					const top = Math.min(...list.map((id) => nodeById.value.get(id).y));
+					const dy = snapTo(frame.y + frame.height + GROUP_PAD.side - top);
+					for (const id of list) {
+						tr.updateNode(id, { parent: nodeById.value.get(parent).parent });
+						for (const inner of [id, ...tree.value.descendants(id)]) {
+							const node = tr.getNode(inner);
+							tr.moveNode(inner, node.x, node.y + dy);
+						}
+						count++;
+					}
+				}
+			});
+			if (byParent.size === 1) announce(format(messages.value.leftGroup, { group: nodeName([...byParent.keys()][0]) }));
+			return count;
+		}
+		function deleteSelection() {
+			const { edges } = selection.value;
+			const nodes = withInside(selection.value.nodes);
+			let count = 0;
+			transact((tr) => {
+				for (const id of edges) if (tr.getEdge(id)) {
+					tr.removeEdge(id);
+					count++;
+				}
+				for (const id of nodes) {
+					const node = tr.getNode(id);
+					if (node && !node.locked) {
+						tr.removeNode(id);
+						count++;
+					}
+				}
+			});
+			if (count) {
+				root.value?.focus({ preventScroll: true });
+				announce(format(messages.value.deleted, { count }));
+			}
+		}
+		function nudge(dx, dy) {
+			const ids = selection.value.nodes;
+			const moving = carried(ids);
+			transact((tr) => {
+				for (const id of moving) {
+					const node = tr.getNode(id);
+					if (node) tr.moveNode(id, node.x + dx, node.y + dy);
+				}
+			}, { group: "nudge" });
+			const others = containerRects(moving);
+			const settle = /* @__PURE__ */ new Map();
+			for (const id of tree.value.topmost(moving)) {
+				const rect = getNodeRect(id);
+				if (!rect) continue;
+				const target = containerAt({
+					x: rect.x + rect.width / 2,
+					y: rect.y + rect.height / 2
+				}, others);
+				settle.set(target, [...settle.get(target) ?? [], id]);
+			}
+			for (const [target, list] of settle) reparent(list, target, "nudge");
+			if (ids.length === 1) reveal(ids[0]);
+		}
+		/** Resizes the selected resizable nodes from the keyboard. */
+		function resizeBy(dw, dh) {
+			const nodes = selection.value.nodes.flatMap((id) => {
+				const node = nodeById.value.get(id);
+				return node && resizeOf(specOf(node), node) && !node.locked ? [node] : [];
+			});
+			if (!nodes.length) return false;
+			const sizes = nodes.map((node) => {
+				const min = resizeOf(specOf(node), node);
+				const rect = rectOf(node);
+				return {
+					node,
+					width: Math.max(min.minWidth ?? 40, rect.width + dw),
+					height: Math.max(min.minHeight ?? 40, rect.height + dh)
+				};
+			});
+			transact((tr) => {
+				for (const { node, width, height } of sizes) tr.updateNode(node.id, {
+					width,
+					height
+				});
+			}, { group: "resize-keys" });
+			if (sizes.length === 1) {
+				const { node, width, height } = sizes[0];
+				announce(format(messages.value.resized, {
+					node: nameOf(node),
+					width,
+					height
+				}));
+			}
+			return true;
+		}
+		function onKeydown(event) {
+			const target = event.target;
+			if (isEditable(target) || inPanels(target)) return;
+			const nodeEl = target.closest("[data-node-id]");
+			if (nodeEl && nodeEl !== target) return;
+			if (keyLink.value) return onKeyLink(event);
+			if (event.key === "Escape" && gesture.value?.kind === "press") {
+				event.preventDefault();
+				endGesture();
+				return;
+			}
+			for (const keymap of keymaps.value) for (const [hotkey, handler] of Object.entries(keymap)) if (matchesHotkey(event, hotkey) && handler(event) !== false) {
+				event.preventDefault();
+				return;
+			}
+			const mod = event.metaKey || event.ctrlKey;
+			const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+			const onCanvas = target === root.value || !!target.dataset?.nodeId;
+			if (mod) {
+				let handled = true;
+				if (key === "z" && !props.readonly) {
+					if (event.shiftKey) redo();
+					else undo();
+				} else if (key === "y" && !props.readonly) redo();
+				else if (key === "a") selectAll();
+				else if (key === "f" && !event.altKey && props.searchable) openSearch();
+				else if (key === "c" || key === "x" || key === "v") return;
+				else if (key === "d" && !props.readonly) {
+					if (!selection.value.nodes.length) return;
+					duplicate();
+				} else if (key === "=" || key === "+") zoomIn();
+				else if (key === "-") zoomOut();
+				else if (key === "0") zoomTo(1);
+				else handled = false;
+				if (handled) event.preventDefault();
+				return;
+			}
+			if (event.altKey && !key.startsWith("Arrow")) return;
+			switch (key) {
+				case "F3":
+					if (!stepFound(event.shiftKey ? -1 : 1)) return;
+					break;
+				case "Tab": {
+					if (!onCanvas) return;
+					const order = readingOrder();
+					if (!order.length) return;
+					const current = target.dataset?.nodeId;
+					const index = current ? order.findIndex((n) => n.id === current) : -1;
+					if (event.shiftKey) {
+						if (index > 0) focusNode(order[index - 1].id);
+						else if (index === 0) root.value.focus({ preventScroll: true });
+						else return;
+					} else if (index < order.length - 1) focusNode(order[index + 1].id);
+					else {
+						end.value?.focus({ preventScroll: true });
+						return;
+					}
+					event.preventDefault();
+					return;
+				}
+				case "Escape":
+					if (cancelDrag() || closeSearch()) break;
+					if (!selection.value.nodes.length && !selection.value.edges.length) return;
+					setSelection(emptySelection());
+					break;
+				case "Enter":
+				case "F2": {
+					const { nodes, edges } = selection.value;
+					if (props.readonly || nodes.length || edges.length !== 1) return;
+					editLabel(edges[0]);
+					break;
+				}
+				case "Delete":
+				case "Backspace":
+					if (props.readonly) return;
+					deleteSelection();
+					break;
+				case "ArrowLeft":
+				case "ArrowRight":
+				case "ArrowUp":
+				case "ArrowDown": {
+					const sign = key === "ArrowLeft" || key === "ArrowUp" ? -1 : 1;
+					const horizontal = key === "ArrowLeft" || key === "ArrowRight";
+					if (selection.value.nodes.length && !props.readonly) {
+						const step = (props.grid || 1) * (event.shiftKey ? 4 : 1);
+						if (event.altKey) {
+							if (!resizeBy(horizontal ? sign * step : 0, horizontal ? 0 : sign * step)) return;
+						} else nudge(horizontal ? sign * step : 0, horizontal ? 0 : sign * step);
+					} else {
+						const step = event.shiftKey ? 160 : 40;
+						const { x, y, zoom } = viewport.value;
+						setViewport({
+							x: horizontal ? x - sign * step : x,
+							y: horizontal ? y : y - sign * step,
+							zoom
+						}, true);
+					}
+					break;
+				}
+				case " ":
+					if (!onCanvas) return;
+					spaceHeld.value = true;
+					break;
+				case "c":
+					if (props.readonly || selection.value.nodes.length !== 1) return;
+					startKeyLink(selection.value.nodes[0]);
+					break;
+				case "e":
+					if (!cycleEdges(event.shiftKey ? -1 : 1)) return;
+					break;
+				default: return;
+			}
+			event.preventDefault();
+		}
+		function onKeyup(event) {
+			if (event.key === " ") spaceHeld.value = false;
+		}
+		const end = useTemplateRef("end");
+		const live = ref("");
+		/** Set while a cancelled change is being told of, so what follows doesn't say it was made. */
+		let refusing = false;
+		function announce(text) {
+			if (refusing) return;
+			live.value = "";
+			nextTick(() => live.value = text);
+		}
+		/** Why the last change didn't go ahead, shown for a moment over the editor. */
+		const notice = ref("");
+		let noticeTimer;
+		onBeforeUnmount(() => clearTimeout(noticeTimer));
+		/** Says why a change didn't go ahead, once while the same one repeats, as in a drag. */
+		let lastRefusal = {
+			text: "",
+			at: 0
+		};
+		function refuse(text) {
+			const at = Date.now();
+			if (refusing || text === lastRefusal.text && at - lastRefusal.at < 1e3) return;
+			lastRefusal = {
+				text,
+				at
+			};
+			announce(text);
+			notice.value = text;
+			clearTimeout(noticeTimer);
+			noticeTimer = setTimeout(() => notice.value = "", 3200);
+			refusing = true;
+			nextTick(() => refusing = false);
+		}
+		const findOpen = ref(false);
+		const findQuery = ref({
+			search: "",
+			caseSensitive: false
+		});
+		const findPanel = ref();
+		/** The nodes whose names contain the text, in reading order. */
+		function findNodes({ search, caseSensitive }) {
+			if (!search) return [];
+			const fold = (text) => caseSensitive ? text : text.toLowerCase();
+			const wanted = fold(search);
+			return readingOrder().filter((node) => fold(nameOf(node)).includes(wanted)).map((node) => node.id);
+		}
+		const found = computed(() => findOpen.value ? findNodes(findQuery.value) : []);
+		/** The match that is the one node selected; `-1` when none is. */
+		const currentFound = computed(() => {
+			const { nodes } = selection.value;
+			return nodes.length === 1 ? found.value.indexOf(nodes[0]) : -1;
+		});
+		/** The matches' boxes, in canvas coordinates, to mark them. */
+		const foundRects = computed(() => found.value.flatMap((id) => {
+			const rect = getNodeRect(id);
+			return rect ? [{
+				id,
+				rect,
+				rotation: nodeRotation(id)
+			}] : [];
+		}));
+		/** Selects a match and brings it to the middle of the view. */
+		function goToFound(index) {
+			const id = found.value[index];
+			if (!id) return;
+			setSelection({
+				nodes: [id],
+				edges: []
+			});
+			centerNode(id);
+			const node = nodeById.value.get(id);
+			if (node) announce(nameOf(node));
+		}
+		function stepFound(step) {
+			const list = found.value;
+			if (!list.length) return false;
+			const i = currentFound.value;
+			goToFound(i >= 0 ? (i + step + list.length) % list.length : step > 0 ? 0 : list.length - 1);
+			return true;
+		}
+		/** Opens the panel, with a query put in. */
+		function openSearch(query) {
+			if (!props.searchable) return false;
+			if (query) findQuery.value = {
+				...findQuery.value,
+				...query
+			};
+			findOpen.value = true;
+			nextTick(() => findPanel.value?.focus());
+			return true;
+		}
+		function closeSearch() {
+			if (!findOpen.value) return false;
+			findOpen.value = false;
+			root.value?.focus({ preventScroll: true });
+			return true;
+		}
+		const panelsLayer = useTemplateRef("panelsLayer");
+		const findBox = useTemplateRef("findBox");
+		const findTop = ref(FIND_INSET);
+		function placeFind() {
+			const layer = panelsLayer.value;
+			const box = findBox.value;
+			const panel = box?.firstElementChild;
+			if (!layer || !box || !panel) return;
+			const area = layer.getBoundingClientRect();
+			const width = panel.offsetWidth;
+			const height = panel.offsetHeight;
+			const right = area.right - FIND_INSET;
+			const left = right - width;
+			const others = [...layer.children].filter((el) => el !== box && !el.classList.contains("dou-flow-toolbar")).map((el) => el.getBoundingClientRect()).filter((r) => r.width && r.height).sort((a, b) => a.top - b.top);
+			let top = area.top + FIND_INSET;
+			for (const r of others) if (r.left < right && r.right > left && r.top < top + height && r.bottom > top) top = r.bottom + 8;
+			findTop.value = Math.round(top - area.top);
+		}
+		watch(() => [findQuery.value.search, findQuery.value.caseSensitive], () => {
+			if (findOpen.value && found.value.length && currentFound.value < 0) goToFound(0);
+		});
+		watch(viewport, () => root.value?.dispatchEvent(new Event("scroll")));
+		/**
+		* Copy, cut and paste while the canvas or a node has focus. Going through the
+		* clipboard events puts the nodes on the system clipboard without asking for
+		* permission.
+		*/
+		function onClipboard(event) {
+			const active = document.activeElement;
+			if (!active || !root.value?.contains(active)) return;
+			if (active !== root.value && !active.dataset?.nodeId) return;
+			if (event.type === "paste") {
+				if (props.readonly) return;
+				const data = readClipboard(event.clipboardData?.getData("text/plain"));
+				if (!data) return;
+				event.preventDefault();
+				paste(data, hover ? toCanvas(hover) : null);
+				return;
+			}
+			const data = copySelection();
+			if (!data) return;
+			event.preventDefault();
+			event.clipboardData?.setData("text/plain", writeClipboard(data));
+			pastes = 0;
+			if (event.type === "cut" && !props.readonly) deleteSelection();
+		}
+		const clipboardEvents = [
+			"copy",
+			"cut",
+			"paste"
+		];
+		const pointerListeners = [
+			["pointermove", onPointerMove],
+			["pointerup", onPointerUp],
+			["pointercancel", onPointerUp]
+		];
+		/** Keeps the page from scrolling while a finger drags or pinches in the editor. */
+		function holdTouch(event) {
+			if ((gesture.value?.touch || pinch) && event.cancelable) event.preventDefault();
+		}
+		/** The editor's size on screen, for the minimap. */
+		const size = ref({
+			width: 0,
+			height: 0
+		});
+		watch([findOpen, size], () => findOpen.value && void nextTick(placeFind), { flush: "post" });
+		let sizeObserver;
+		onMounted(() => {
+			const el = root.value;
+			size.value = {
+				width: el.clientWidth,
+				height: el.clientHeight
+			};
+			if (typeof ResizeObserver !== "undefined") {
+				sizeObserver = new ResizeObserver(() => {
+					size.value = {
+						width: el.clientWidth,
+						height: el.clientHeight
+					};
+				});
+				sizeObserver.observe(el);
+			}
+			root.value.addEventListener("wheel", onWheel, { passive: false });
+			for (const type of clipboardEvents) document.addEventListener(type, onClipboard);
+			for (const [type, fn] of pointerListeners) window.addEventListener(type, fn, true);
+			window.addEventListener("touchmove", holdTouch, { passive: false });
+		});
+		onBeforeUnmount(() => {
+			sizeObserver?.disconnect();
+			cancelAnimationFrame(tweenFrame);
+			for (const type of clipboardEvents) document.removeEventListener(type, onClipboard);
+			root.value?.removeEventListener("wheel", onWheel);
+			for (const [type, fn] of pointerListeners) window.removeEventListener(type, fn, true);
+			window.removeEventListener("touchmove", holdTouch);
+			stopInsertDrag();
+			stopAnimation();
+			endGesture();
+		});
+		const marquee = computed(() => {
+			const g = gesture.value;
+			if (g?.kind !== "box") return null;
+			const { x, y, zoom } = viewport.value;
+			const box = rectFrom(g.start, g.current);
+			return {
+				transform: `translate(${box.x * zoom + x}px, ${box.y * zoom + y}px)`,
+				width: `${box.width * zoom}px`,
+				height: `${box.height * zoom}px`
+			};
+		});
+		/** A gesture that changes the document as it goes: moving nodes, resizing, bending an edge. */
+		const gesturing = computed(() => {
+			const g = gesture.value;
+			if (g?.kind === "resize") return true;
+			return (g?.kind === "drag" || g?.kind === "bend") && g.started;
+		});
+		const dragging = computed(() => {
+			const g = gesture.value;
+			return g?.kind === "drag" && g.started ? new Set(g.origins.keys()) : null;
+		});
+		/** How far past the editor's edges nodes and edges are still drawn, in screen px. */
+		const drawnArea = computed(() => {
+			const { width, height } = size.value;
+			if (!width || !height) return null;
+			const { x, y, zoom } = viewport.value;
+			return {
+				x: (-x - DRAW_MARGIN) / zoom,
+				y: (-y - DRAW_MARGIN) / zoom,
+				width: (width + 400) / zoom,
+				height: (height + 400) / zoom
+			};
+		});
+		/** The node holding focus, kept drawn when it scrolls away. */
+		const focusedNode = ref(null);
+		function onFocusin(event) {
+			const nodeEl = event.target.closest("[data-node-id]");
+			focusedNode.value = nodeEl?.dataset.nodeId ?? null;
+		}
+		/**
+		* Nodes in view. A node not measured yet is drawn wherever it is, so it gets
+		* a size; selected and focused ones too, so dragging and keys keep working.
+		*/
+		const drawnNodes = computed(() => {
+			const area = drawnArea.value;
+			if (!area) return shownNodes.value.filter((node) => !hiddenIn.value.has(node.id));
+			const keep = selectedNodes.value;
+			const hidden = hiddenIn.value;
+			return shownNodes.value.filter((node) => {
+				if (hidden.has(node.id)) return false;
+				const m = metrics.get(node.id);
+				if (!m || keep.has(node.id) || node.id === focusedNode.value) return true;
+				const rect = {
+					x: node.x,
+					y: node.y,
+					width: m.width,
+					height: m.height
+				};
+				return intersects(nodeBounds(specOf(node), node, rect), area);
+			});
+		});
+		/** Containers, drawn under the edges: outer ones first. */
+		const drawnContainers = computed(() => drawnNodes.value.filter(isContainer).sort((a, b) => tree.value.depth(a.id) - tree.value.depth(b.id)));
+		/** The other nodes, lowest `z` first; equal ones in document order. */
+		const drawnOthers = computed(() => {
+			const others = drawnNodes.value.filter((node) => !isContainer(node));
+			if (!others.some((node) => node.z)) return others;
+			const index = new Map(others.map((node, i) => [node.id, i]));
+			return others.sort((a, b) => (a.z ?? 0) - (b.z ?? 0) || index.get(a.id) - index.get(b.id));
+		});
+		/** Zoomed out this far, measured nodes are drawn as plain boxes. */
+		const simple = computed(() => viewport.value.zoom < props.simpleZoom);
+		/** Names below this zoom would be a few px tall: only the boxes are drawn. */
+		const classes = computed(() => ({
+			"is-simple": simple.value,
+			"is-tiny": simple.value && viewport.value.zoom < TINY,
+			"is-readonly": props.readonly,
+			"is-panning": panning.value,
+			"is-space": spaceHeld.value,
+			"is-dragging": !!dragging.value,
+			"is-connecting": !!connecting.value,
+			"is-refused": !!connecting.value?.refused
+		}));
+		const context = {
+			exportSVG,
+			exportPNG,
+			doc: currentDoc,
+			selection,
+			viewport,
+			setViewport,
+			readonly: computed(() => props.readonly),
+			messages,
+			minZoom: computed(() => props.minZoom),
+			maxZoom: computed(() => props.maxZoom),
+			transact,
+			undo,
+			redo,
+			canUndo,
+			canRedo,
+			fit,
+			zoomTo,
+			zoomIn,
+			zoomOut,
+			portTypeOf,
+			colorOf,
+			getNodeRect,
+			tidy,
+			centerNode,
+			announce,
+			size,
+			selectedNodes: computed(() => new Set(selection.value.nodes)),
+			root,
+			insertNode,
+			paletteTypes,
+			startInsertDrag,
+			editLabel,
+			groupNodes,
+			ungroupNode,
+			leaveGroup,
+			tree,
+			isContainer,
+			nodeRotation,
+			gesturing,
+			previewNode,
+			connectingPath: previewPath,
+			openMenu,
+			menuItems: itemsFor,
+			showMenu,
+			menuFrom,
+			toCanvas,
+			copy,
+			cut,
+			paste: pasteFromClipboard,
+			duplicate,
+			deleteSelection,
+			selectAll
+		};
+		provide(flowEditorKey, context);
+		let cleanups = [];
+		let mounted = false;
+		function teardownExtensions() {
+			for (const cleanup of cleanups.splice(0)) cleanup();
+			customHistory = null;
+		}
+		let setUp = false;
+		let setupTimes = [];
+		let setupWarned = false;
+		/** An extension made in the template is new on every render, and set up again each time. */
+		function warnRepeatedSetup() {
+			if (process.env.NODE_ENV === "production" || setupWarned) return;
+			const now = Date.now();
+			setupTimes = [...setupTimes.filter((time) => now - time < 1e3), now];
+			if (setupTimes.length < 4) return;
+			setupWarned = true;
+			console.warn("[@dou-ui/flow] the extensions keep being set up again, which also clears undo each time. Create them once in <script setup> instead of in the template.");
+		}
+		function setupExtensions() {
+			if (setUp) warnRepeatedSetup();
+			setUp = true;
+			teardownExtensions();
+			customHistory = resolved.value.history?.(context) ?? null;
+			for (const setup of resolved.value.setups) {
+				const cleanup = setup(context);
+				if (typeof cleanup === "function") cleanups.push(cleanup);
+			}
+			syncHistory();
+		}
+		onMounted(() => {
+			mounted = true;
+			setupExtensions();
+		});
+		watch(() => [resolved.value.history, ...resolved.value.setups], (hooks, before) => {
+			if (mounted && (hooks.length !== before.length || hooks.some((hook, i) => hook !== before[i]))) setupExtensions();
+		});
+		onBeforeUnmount(teardownExtensions);
+		const keymaps = computed(() => resolved.value.keymaps.map((keymap) => keymap(context)));
+		const selectedNodes = computed(() => new Set(selection.value.nodes));
+		function updateData(id, patch) {
+			transact((tr) => tr.updateData(id, patch), { group: `data:${id}` });
+		}
+		/** The flow drawn as SVG, with image addresses turned by `imageHref`. */
+		function drawing(options, imageHref) {
+			const el = root.value;
+			if (!el) throw new Error("[@dou-ui/flow] the editor is not mounted");
+			let keep = null;
+			let frame;
+			if (options.range === "selection") {
+				if (!selection.value.nodes.length) throw new Error("[@dou-ui/flow] nothing is selected to export");
+				keep = /* @__PURE__ */ new Set();
+				for (const id of selection.value.nodes) {
+					keep.add(id);
+					for (const inner of tree.value.descendants(id)) keep.add(inner);
+				}
+			} else if (options.range === "view") {
+				const { x, y, zoom } = viewport.value;
+				frame = {
+					x: -x / zoom,
+					y: -y / zoom,
+					width: size.value.width / zoom,
+					height: size.value.height / zoom
+				};
+			}
+			const hidden = hiddenIn.value;
+			const nodes = shownNodes.value.filter((node) => {
+				if (hidden.has(node.id) || keep && !keep.has(node.id)) return false;
+				if (!frame) return true;
+				return intersects(nodeBounds(specOf(node), node, rectOf(node)), frame);
+			});
+			const index = new Map(nodes.map((node, i) => [node.id, i]));
+			const ordered = nodes.sort((a, b) => {
+				const ca = isContainer(a);
+				if (ca !== isContainer(b)) return ca ? -1 : 1;
+				if (ca) return tree.value.depth(a.id) - tree.value.depth(b.id) || index.get(a.id) - index.get(b.id);
+				return (a.z ?? 0) - (b.z ?? 0) || index.get(a.id) - index.get(b.id);
+			});
+			const tools = drawTools(el, messages.value, imageHref);
+			const empty = /* @__PURE__ */ new Map();
+			try {
+				const drawNodes = ordered.map((node) => ({
+					node,
+					spec: specOf(node),
+					rect: rectOf(node),
+					ports: metrics.get(node.id)?.ports ?? empty,
+					container: isContainer(node),
+					label: nameOf(node),
+					port: (id) => drawPort(node, id, tools)
+				}));
+				const stale = staleEdges.value;
+				const edges = [];
+				for (const item of edgeRoutes.value) {
+					if (keep && !(keep.has(edgeEnd(item.edge.source).node) && keep.has(edgeEnd(item.edge.target).node))) continue;
+					edges.push({
+						edge: item.edge,
+						type: edgeTypeOf(item.edge.type).type,
+						route: item.route,
+						style: item.style,
+						stale: stale.has(item.edge.id)
+					});
+				}
+				return {
+					...drawFlow({
+						nodes: drawNodes,
+						edges,
+						padding: options.padding ?? 24,
+						background: options.background ?? true,
+						frame,
+						layers: resolved.value.drawLayers.map((fn) => (draw) => fn(context, draw, ordered))
+					}, tools, el),
+					images: tools.images
+				};
+			} finally {
+				tools.dispose();
+			}
+		}
+		/** A port as `flow-port` shows it, at rest. */
+		function drawPort(node, id, tools) {
+			const at = metrics.get(node.id)?.ports.get(id);
+			const spec = portsOf(specOf(node), node).find((port) => port.id === id);
+			if (!at || !spec) return "";
+			const type = portTypeOf(spec);
+			const ring = tools.color(colorOf(type) ?? "var(--dou-flow-editor-port)");
+			const paint = `fill="${connected.value.get(node.id)?.has(id) ? ring : tools.color("var(--dou-flow-editor-node-bg)")}" stroke="${ring}" stroke-width="1"`;
+			const x = Math.round(at.x * 100) / 100;
+			const y = Math.round(at.y * 100) / 100;
+			const shape = type?.shape ?? "circle";
+			if (shape === "square") return `<rect x="${x - 3.5}" y="${y - 3.5}" width="7" height="7" rx="1.5" ${paint}/>`;
+			if (shape === "triangle") return `<path d="M${x - 2.4} ${y - 2.8}L${x + 2.4} ${y}L${x - 2.4} ${y + 2.8}Z" ${paint} stroke-linejoin="round"/>`;
+			return `<circle cx="${x}" cy="${y}" r="3.5" ${paint}/>`;
+		}
+		function exportSVG(options = {}) {
+			return drawing(options).svg;
+		}
+		/** Image addresses this page couldn't read, not asked for again. */
+		const unreadable = /* @__PURE__ */ new Set();
+		const PNG_SOURCE = {
+			scope: "@dou-ui/flow",
+			hint: "export range 'view' or 'selection' a part at a time, or use exportSVG()"
+		};
+		async function exportPNG(options = {}) {
+			const { images, width: w, height: h } = drawing(options);
+			fitPixelRatio(w, h, options.pixelRatio, PNG_SOURCE);
+			const read = /* @__PURE__ */ new Map();
+			await Promise.all([...images].map(async (src) => {
+				const data = unreadable.has(src) ? null : await readImage(src);
+				if (data === null) unreadable.add(src);
+				read.set(src, data);
+			}));
+			const { svg, width, height } = drawing(options, (src) => read.get(src) ?? null);
+			return svgToPNG(svg, {
+				width,
+				height,
+				pixelRatio: options.pixelRatio,
+				...PNG_SOURCE
+			});
+		}
+		__expose({
+			setViewport,
+			openSearch,
+			closeSearch,
+			findNodes,
+			exportSVG,
+			exportPNG,
+			transact,
+			undo,
+			redo,
+			get canUndo() {
+				return canUndo.value;
+			},
+			get canRedo() {
+				return canRedo.value;
+			},
+			fit,
+			zoomTo,
+			zoomIn,
+			zoomOut,
+			centerNode,
+			toCanvas,
+			getNodeRect,
+			tidy,
+			get staleEdges() {
+				return [...staleEdges.value];
+			},
+			removeStaleEdges,
+			insertNode,
+			startInsertDrag,
+			editLabel,
+			groupNodes,
+			ungroupNode,
+			leaveGroup,
+			get paletteTypes() {
+				return paletteTypes.value;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass(["dou-flow-editor", classes.value]),
+				style: normalizeStyle(background.value),
+				role: "application",
+				"aria-label": __props.ariaLabel,
+				"aria-description": unref(messages).canvas,
+				tabindex: "0",
+				onPointerdown: onPointerDown,
+				onPointerleave: _cache[7] || (_cache[7] = ($event) => isRef(hover) ? hover.value = null : hover = null),
+				onDblclick,
+				onSelectstart,
+				onContextmenu,
+				onKeydown,
+				onKeyup,
+				onBlurCapture: _cache[8] || (_cache[8] = ($event) => spaceHeld.value = false),
+				onFocusin
+			}, [
+				createElementVNode("div", {
+					class: "dou-flow-editor__layer",
+					style: normalizeStyle(layerStyle.value)
+				}, [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(resolved.value.below, (layer, i) => {
+						return openBlock(), createBlock(resolveDynamicComponent(layer), { key: `below-${i}` });
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(foundRects.value, (mark) => {
+						return openBlock(), createElementBlock("div", {
+							key: `found-${mark.id}`,
+							class: normalizeClass(["dou-flow-editor__found", { "is-current": found.value[currentFound.value] === mark.id }]),
+							style: normalizeStyle({
+								translate: `${mark.rect.x}px ${mark.rect.y}px`,
+								rotate: mark.rotation ? `${mark.rotation}deg` : void 0,
+								width: `${mark.rect.width}px`,
+								height: `${mark.rect.height}px`
+							}),
+							"aria-hidden": "true"
+						}, null, 6);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(drawnContainers.value, (node) => {
+						return openBlock(), createElementBlock(Fragment, { key: node.id }, [simple.value && unref(metrics).has(node.id) ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(["dou-flow-editor__simple", {
+								"is-selected": selectedNodes.value.has(node.id),
+								"is-drop-target": dropTarget.value === node.id
+							}]),
+							style: normalizeStyle({
+								transform: `translate(${node.x}px, ${node.y}px)`,
+								width: `${unref(metrics).get(node.id).width}px`,
+								height: `${unref(metrics).get(node.id).height}px`
+							}),
+							"data-node-id": node.id,
+							role: "group",
+							"aria-roledescription": roleOf(node),
+							"aria-label": nameOf(node),
+							tabindex: "-1"
+						}, [renderSlot(_ctx.$slots, "simple", { node }, () => [viewport.value.zoom >= TINY ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(unref(labelOf)(specOf(node), node, unref(messages))), 1)) : createCommentVNode("", true)])], 14, _hoisted_2)) : (openBlock(), createBlock(node_view_default, {
+							key: 1,
+							node,
+							spec: specOf(node),
+							selected: selectedNodes.value.has(node.id),
+							readonly: __props.readonly,
+							dragging: !!dragging.value?.has(node.id),
+							connected: connected.value.get(node.id) ?? unref(none),
+							"port-states": portStates.value ? portStates.value.get(node.id) ?? unref(noStates) : null,
+							"role-description": roleOf(node),
+							label: nameOf(node),
+							description: describe(node),
+							"drop-target": dropTarget.value === node.id,
+							onMeasure,
+							onUpdate: updateData
+						}, null, 8, [
+							"node",
+							"spec",
+							"selected",
+							"readonly",
+							"dragging",
+							"connected",
+							"port-states",
+							"role-description",
+							"label",
+							"description",
+							"drop-target"
+						]))], 64);
+					}), 128)),
+					(openBlock(), createElementBlock("svg", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(edgePaths.value, (item) => {
+						return openBlock(), createElementBlock("g", {
+							key: item.edge.id,
+							"data-edge-id": item.edge.id,
+							"data-edge-type": edgeTypeOf(item.edge.type).type
+						}, [
+							createElementVNode("path", {
+								class: "dou-flow-editor__edge-hit",
+								d: item.route.path
+							}, null, 8, _hoisted_6),
+							createElementVNode("path", {
+								class: normalizeClass(["dou-flow-editor__edge", {
+									"is-selected": item.selected,
+									"is-stale": item.stale,
+									"is-animated": item.edge.animated
+								}]),
+								style: normalizeStyle(item.style),
+								d: item.route.path
+							}, null, 14, _hoisted_7),
+							item.route.marks ? (openBlock(), createElementBlock("path", {
+								key: 0,
+								class: normalizeClass(["dou-flow-editor__edge is-mark", {
+									"is-selected": item.selected,
+									"is-stale": item.stale
+								}]),
+								style: normalizeStyle(item.style),
+								d: item.route.marks
+							}, null, 14, _hoisted_8)) : createCommentVNode("", true)
+						], 8, _hoisted_5);
+					}), 128)), previewPath.value ? (openBlock(), createElementBlock("path", {
+						key: 0,
+						class: "dou-flow-editor__edge is-preview",
+						d: previewPath.value
+					}, null, 8, _hoisted_9)) : createCommentVNode("", true)])),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(edgeLabels.value, (item) => {
+						return openBlock(), createElementBlock("div", {
+							key: item.edge.id,
+							class: normalizeClass(["dou-flow-editor__label", [bend.value?.edge.id === item.edge.id && `is-bend is-${bend.value.handle.axis}`, {
+								"is-selected": item.selected,
+								"is-editing": item.edge.id === editingLabel.value
+							}]]),
+							style: normalizeStyle({ transform: `translate(${item.route.label.x}px, ${item.route.label.y}px)` }),
+							"data-edge-id": item.edge.id,
+							"data-value": item.edge.id === editingLabel.value ? labelDraft.value || " " : void 0
+						}, [item.edge.id === editingLabel.value ? withDirectives((openBlock(), createElementBlock("input", {
+							key: 0,
+							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => labelDraft.value = $event),
+							class: "dou-flow-editor__label-input",
+							"aria-label": unref(messages).label,
+							onKeydown: onLabelKeydown,
+							onBlur: _cache[1] || (_cache[1] = ($event) => finishLabel(true))
+						}, null, 40, _hoisted_11)), [[vModelText, labelDraft.value]]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(item.edge.label), 1)], 64))], 14, _hoisted_10);
+					}), 128)),
+					bend.value && !bend.value.edge.label && editingLabel.value !== bend.value.edge.id ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(["dou-flow-editor__bend", `is-${bend.value.handle.axis}`]),
+						style: normalizeStyle({ translate: `calc(${bend.value.handle.at.x}px - 50%) calc(${bend.value.handle.at.y}px - 50%)` }),
+						"aria-hidden": "true"
+					}, null, 6)) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(drawnOthers.value, (node) => {
+						return openBlock(), createElementBlock(Fragment, { key: node.id }, [simple.value && unref(metrics).has(node.id) ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(["dou-flow-editor__simple", {
+								"is-selected": selectedNodes.value.has(node.id),
+								"is-drop-target": dropTarget.value === node.id
+							}]),
+							style: normalizeStyle({
+								transform: `translate(${node.x}px, ${node.y}px)`,
+								width: `${unref(metrics).get(node.id).width}px`,
+								height: `${unref(metrics).get(node.id).height}px`
+							}),
+							"data-node-id": node.id,
+							role: "group",
+							"aria-roledescription": roleOf(node),
+							"aria-label": nameOf(node),
+							tabindex: "-1"
+						}, [renderSlot(_ctx.$slots, "simple", { node }, () => [viewport.value.zoom >= TINY ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(unref(labelOf)(specOf(node), node, unref(messages))), 1)) : createCommentVNode("", true)])], 14, _hoisted_12)) : (openBlock(), createBlock(node_view_default, {
+							key: 1,
+							node,
+							spec: specOf(node),
+							selected: selectedNodes.value.has(node.id),
+							readonly: __props.readonly,
+							dragging: !!dragging.value?.has(node.id),
+							connected: connected.value.get(node.id) ?? unref(none),
+							"port-states": portStates.value ? portStates.value.get(node.id) ?? unref(noStates) : null,
+							"role-description": roleOf(node),
+							label: nameOf(node),
+							description: describe(node),
+							"drop-target": dropTarget.value === node.id,
+							onMeasure,
+							onUpdate: updateData
+						}, null, 8, [
+							"node",
+							"spec",
+							"selected",
+							"readonly",
+							"dragging",
+							"connected",
+							"port-states",
+							"role-description",
+							"label",
+							"description",
+							"drop-target"
+						]))], 64);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(resolved.value.above, (layer, i) => {
+						return openBlock(), createBlock(resolveDynamicComponent(layer), { key: `above-${i}` });
+					}), 128)),
+					guides.value.length ? (openBlock(), createElementBlock("svg", _hoisted_14, [(openBlock(true), createElementBlock(Fragment, null, renderList(guides.value, (guide, i) => {
+						return openBlock(), createElementBlock("line", {
+							key: i,
+							x1: guide.axis === "x" ? guide.at : guide.from,
+							y1: guide.axis === "x" ? guide.from : guide.at,
+							x2: guide.axis === "x" ? guide.at : guide.to,
+							y2: guide.axis === "x" ? guide.to : guide.at
+						}, null, 8, _hoisted_15);
+					}), 128))])) : createCommentVNode("", true)
+				], 4),
+				marquee.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "dou-flow-editor__marquee",
+					style: normalizeStyle(marquee.value)
+				}, null, 4)) : createCommentVNode("", true),
+				createElementVNode("div", {
+					ref_key: "panelsLayer",
+					ref: panelsLayer,
+					class: "dou-flow-editor__panels"
+				}, [
+					renderSlot(_ctx.$slots, "default"),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(resolved.value.overlays, (overlay, i) => {
+						return openBlock(), createBlock(resolveDynamicComponent(overlay), { key: i });
+					}), 128)),
+					toolbarItems.value.length && toolbarAnchor.value ? (openBlock(), createBlock(flow_toolbar_default, {
+						key: 0,
+						groups: toolbarItems.value,
+						anchor: toolbarAnchor.value,
+						size: size.value
+					}, null, 8, [
+						"groups",
+						"anchor",
+						"size"
+					])) : createCommentVNode("", true),
+					findOpen.value ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						ref_key: "findBox",
+						ref: findBox,
+						class: "dou-flow-editor__find",
+						style: normalizeStyle({ top: `${findTop.value}px` })
+					}, [createVNode(unref(DouFindReplace), {
+						ref_key: "findPanel",
+						ref: findPanel,
+						search: findQuery.value.search,
+						count: found.value.length,
+						current: currentFound.value,
+						readonly: "",
+						"onUpdate:search": _cache[3] || (_cache[3] = ($event) => findQuery.value = {
+							...findQuery.value,
+							search: $event
+						}),
+						onNext: _cache[4] || (_cache[4] = ($event) => stepFound(1)),
+						onPrevious: _cache[5] || (_cache[5] = ($event) => stepFound(-1)),
+						onClose: closeSearch
+					}, {
+						options: withCtx(() => [createVNode(unref(DouTooltip), { content: unref(common)("findReplace.caseSensitive") }, {
+							default: withCtx(() => [createVNode(unref(DouToggle), {
+								pressed: findQuery.value.caseSensitive,
+								size: "sm",
+								"aria-label": unref(common)("findReplace.caseSensitive"),
+								"onUpdate:pressed": _cache[2] || (_cache[2] = ($event) => findQuery.value = {
+									...findQuery.value,
+									caseSensitive: $event
+								})
+							}, {
+								default: withCtx(() => [createVNode(unref(LetterCaseIcon))]),
+								_: 1
+							}, 8, ["pressed", "aria-label"])]),
+							_: 1
+						}, 8, ["content"])]),
+						_: 1
+					}, 8, [
+						"search",
+						"count",
+						"current"
+					])], 4)) : createCommentVNode("", true)
+				], 512),
+				createVNode(flow_menu_default, {
+					ref_key: "menu",
+					ref: menu,
+					open: menuOpen.value,
+					"onUpdate:open": _cache[6] || (_cache[6] = ($event) => menuOpen.value = $event),
+					items: menuItems.value
+				}, null, 8, ["open", "items"]),
+				createVNode(flow_quick_add_default, {
+					state: quickAdd.value,
+					onChoose: chooseQuickAdd
+				}, createSlots({ _: 2 }, [_ctx.$slots.quickAdd ? {
+					name: "default",
+					fn: withCtx((scope) => [renderSlot(_ctx.$slots, "quickAdd", normalizeProps(guardReactiveProps(scope)))]),
+					key: "0"
+				} : void 0]), 1032, ["state"]),
+				(openBlock(), createBlock(Teleport, { to: "body" }, [insertDrag.value?.started ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["dou-flow-editor__ghost", { "is-outside": !insertDrag.value.over }]),
+					style: normalizeStyle(ghostStyle.value),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "ghost", {
+					spec: insertDrag.value.spec,
+					over: insertDrag.value.over
+				}, () => [createElementVNode("span", _hoisted_16, [insertDrag.value.spec.palette?.icon ? (openBlock(), createElementBlock("span", _hoisted_17, [(openBlock(), createBlock(resolveDynamicComponent(insertDrag.value.spec.palette.icon)))])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(insertDrag.value.spec.palette?.label ?? insertDrag.value.spec.type), 1)])])], 6)) : createCommentVNode("", true)])),
+				createElementVNode("span", {
+					ref_key: "end",
+					ref: end,
+					class: "dou-flow-editor__end",
+					tabindex: "-1"
+				}, null, 512),
+				createElementVNode("div", _hoisted_18, toDisplayString(live.value), 1),
+				notice.value ? (openBlock(), createElementBlock("div", _hoisted_19, toDisplayString(notice.value), 1)) : createCommentVNode("", true)
+			], 46, _hoisted_1);
+		};
+	}
+});
+export { flow_editor_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=flow-editor.vue_vue_type_script_setup_true_lang.js.map