@oomol-lab/open-flow 0.1.0-beta.82 → 0.1.0-beta.83

package/dist/browser/{FlowCanvas-Dew2fmoT.js → FlowCanvas-ChbukrDh.js}

@@ -1,8 +1,8 @@
 import { o as __toESM, t as __commonJSMin } from "./rolldown-runtime-CEgmsyvS.js";
-import { A as DropdownMenuLabel, D as DropdownMenuContent, E as DropdownMenuCheckboxItem, G as MenuItem, H as MenuPositioner, J as useContextMenuRootContext, K as MenuGroup, L as DropdownMenuTrigger, M as DropdownMenuRadioItem, N as DropdownMenuSeparator, O as DropdownMenuGroup, Q as waitBranchDescription, R as findRootOwnerId, T as DropdownMenu, U as MenuPortal, V as MenuRoot, W as MenuPopup, X as useMenuRootContext, Y as MenuRootContext, Z as uiLocales, _ as ContentIcon, a as ACTIVE_COMPOSITE_ITEM, at as fr_default, d as PopoverTitle, dt as useFieldItemContext, et as zh_TW_default, f as PopoverTrigger, ft as IconThemeContext, i as CompositeRoot, it as ja_default, j as DropdownMenuRadioGroup, k as DropdownMenuItem, lt as Checkbox, m as ScrollArea, n as canvasDirection, nt as ru_default, o as Popover, ot as en_default, p as NativeScrollArea, q as ContextMenuRootContext, r as Textarea, rt as ko_default, s as PopoverContent, st as I18n, t as wrapLayout, tt as zh_CN_default, ut as useAriaLabelledBy, z as CompositeItem } from "./wrapLayout-DZvW9dBs.js";
+import { $ as waitBranchDescription, A as DropdownMenuItem, B as CompositeItem, D as DropdownMenuCheckboxItem, E as DropdownMenu, G as MenuPopup, H as MenuRoot, J as ContextMenuRootContext, K as MenuItem, M as DropdownMenuRadioGroup, N as DropdownMenuRadioItem, O as DropdownMenuContent, P as DropdownMenuSeparator, Q as uiLocales, R as DropdownMenuTrigger, U as MenuPositioner, W as MenuPortal, X as MenuRootContext, Y as useContextMenuRootContext, Z as useMenuRootContext, a as CompositeRoot, at as ja_default, c as PopoverContent, ct as I18n, dt as useAriaLabelledBy, f as PopoverTitle, ft as useFieldItemContext, h as ScrollArea, i as Textarea, it as ko_default, j as DropdownMenuLabel, k as DropdownMenuGroup, m as NativeScrollArea, n as wrapLayout, nt as zh_CN_default, o as ACTIVE_COMPOSITE_ITEM, ot as fr_default, p as PopoverTrigger, pt as IconThemeContext, q as MenuGroup, r as canvasDirection, rt as ru_default, s as Popover, st as en_default, t as layoutAxes, tt as zh_TW_default, ut as Checkbox, v as ContentIcon, z as findRootOwnerId } from "./wrapLayout-C4moMKgb.js";
 import { a as derive, c as strictEqual, i as compute, l as val, n as attachSetter, r as combine, s as readonlyVal } from "./dist-bO8nvHFH.js";
 import { c as useLang, i as isString, l as useTranslate, n as isBoolean, o as I18nProvider, r as isPlainObject, t as isArray$1, u as useVal } from "./dist-BFmpkX4P.js";
-import { A as string, Bn as transitionStatusMapping, C as literal, Cr as cn$1, Dn as getTarget, En as contains, Er as useRenderElement, Fn as createLucideIcon, Fr as formatErrorMessage, J as SHIFT, Kn as cancelOpen, Lr as useIsoLayoutEffect, Mn as ownerDocument, Mr as useButton, Nn as useLabelableId, Or as EMPTY_OBJECT, Sn as stopEvent$1, T as number, Tr as clsx, Un as useValueChanged, Wn as createChangeEventDetails, Yt as addEventListener, _r as fieldValidityMapping, br as useControlled, cr as triggerPress, dr as useFormContext, fr as useRegisterFieldControl, gt as serializeValue, hr as useId$1, i as TooltipTrigger, jr as useMergedRefs, k as strictObject, kr as NOOP, mr as useBaseUiId, n as TooltipContent, p as timeZoneOffsetMinutes, pr as useFieldRootContext, pt as pressableTriggerOpenStateMapping, r as TooltipProvider, rr as none$1, sn as useTimeout, t as Tooltip, tn as require_with_selector, ur as useLabelableContext, vr as visuallyHidden, xr as Button, y as discriminatedUnion, yr as visuallyHiddenInput, zr as useStableCallback } from "./tooltip-BDcVTNpu.js";
+import { A as string, Bn as transitionStatusMapping, Br as useStableCallback, C as literal, Cr as cn$1, Dn as getTarget, En as contains, Er as useRenderElement, Fn as createLucideIcon, Fr as formatErrorMessage, J as SHIFT, Kn as cancelOpen, Lr as useIsoLayoutEffect, Mn as ownerDocument, Mr as useButton, Nn as useLabelableId, Or as EMPTY_OBJECT, Sn as stopEvent$1, T as number, Tr as clsx, Un as useValueChanged, Wn as createChangeEventDetails, Yt as addEventListener, _r as fieldValidityMapping, br as useControlled, cr as triggerPress, dr as useFormContext, fr as useRegisterFieldControl, gt as serializeValue, hr as useId$1, i as TooltipTrigger, jr as useMergedRefs, k as strictObject, kr as NOOP, mr as useBaseUiId, n as TooltipContent, p as timeZoneOffsetMinutes, pr as useFieldRootContext, pt as pressableTriggerOpenStateMapping, r as TooltipProvider, rr as none$1, sn as useTimeout, t as Tooltip, tn as require_with_selector, ur as useLabelableContext, vr as visuallyHidden, xr as Button, y as discriminatedUnion, yr as visuallyHiddenInput } from "./tooltip-DGj5pudg.js";
 import { r as resolveUiLanguage } from "./languages-gYzoQqCi.js";
 import * as React from "react";
 import reactExports, { Children, Suspense, createContext, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -33,6 +33,234 @@ function useFieldsetRootContext(optional = false) {
 	return context;
 }
 //#endregion
+//#region src/render/common/png.ts
+var flowPngAspectRatios = [
+	"auto",
+	"1:1",
+	"4:3",
+	"3:4",
+	"16:9",
+	"9:16"
+];
+function getFlowPngAspectRatio(value) {
+	if (value == null || value === "auto") return void 0;
+	if (!flowPngAspectRatios.includes(value)) throw new TypeError("Unsupported PNG canvas aspect ratio.");
+	const [width, height] = value.split(":").map(Number);
+	return [width, height];
+}
+//#endregion
+//#region ../../node_modules/.bun/@wopjs+disposable@0.1.24/node_modules/@wopjs/disposable/dist/index.mjs
+var isFn = (value) => !!(value && value.constructor && value.call && value.apply);
+/**
+* Check if a value is a {@link DisposableType}.
+* @param value The value to check.
+* @returns True if the value is a {@link DisposableType}, false otherwise.
+*/
+var isDisposable = (value) => isFn(value) || isFn(value?.dispose);
+/**
+* Dispose a disposable object or a disposer function. Log the error if any.
+* @param disposable A disposable object or a disposer function. Do nothing otherwise.
+*/
+function dispose(disposable) {
+	try {
+		if (disposable) {
+			if (isFn(disposable.dispose)) disposable.dispose();
+			else if (isFn(disposable)) disposable();
+		}
+	} catch (e) {
+		console.error(e);
+	}
+}
+var isAbortable = (disposable) => isDisposable(disposable) && isFn(disposable.abortable);
+/**
+* Create a {@link DisposableStore} that manages {@link Disposer}s and {@link IDisposable}s.
+*
+* A {@link DisposableStore} is also a {@link Disposer}, which means it can be the `dispose` method of an {@link IDisposable}.
+*
+* A {@link DisposableStore} is also an {@link IDisposable}, which means it can be managed by another {@link DisposableStore}.
+*
+* @example
+* ```ts
+* import { type IDisposable, disposableStore } from "@wopjs/disposable";
+*
+* class A implements IDisposable {
+*   dispose = disposableStore()
+*   constructor() {
+*     this.dispose.add(...);
+*   }
+* }
+*
+* class B implements IDisposable {
+*   dispose = disposableStore()
+*   a = this.dispose.add(new A())
+*   constructor() {
+*     this.dispose.add(...);
+*  }
+* }
+*
+* const b = new B();
+* b.dispose(); // dispose both `b` and `b.a`.
+* ```
+*
+* @param disposables Optional array of {@link DisposableType}s added to the store.
+* @returns A disposable store.
+*/
+function disposableStore(disposables) {
+	let isDisposing;
+	function disposableStore() {
+		if (!isDisposing) {
+			isDisposing = 1;
+			isDisposing = disposableStore._disposables_ = disposableStore._disposables_?.forEach(dispose);
+		}
+	}
+	disposableStore.dispose = disposableStore;
+	disposableStore.size = size;
+	disposableStore.has = has;
+	disposableStore.add = add;
+	disposableStore.make = make;
+	disposableStore.remove = remove$1;
+	disposableStore.flush = flush;
+	if (disposables) disposableStore.add(disposables);
+	return disposableStore;
+}
+function _addOne(disposable) {
+	if (!this._disposables_?.has(disposable)) {
+		(this._disposables_ ??= /* @__PURE__ */ new Set()).add(disposable);
+		if (isAbortable(disposable)) disposable.abortable(remove$1.bind(this, disposable));
+	}
+}
+function add(disposables) {
+	Array.isArray(disposables) ? disposables.forEach(_addOne, this) : _addOne.call(this, disposables);
+	return disposables;
+}
+function flush(disposable) {
+	dispose(disposable ? this.remove(disposable) && disposable : this);
+}
+function has(disposable) {
+	return !!this._disposables_?.has(disposable);
+}
+function make(executor) {
+	const disposable = executor();
+	return disposable && this.add(disposable);
+}
+function remove$1(disposable) {
+	return !!this._disposables_?.delete(disposable);
+}
+function size() {
+	return this._disposables_?.size || 0;
+}
+//#endregion
+//#region ../../node_modules/.bun/value-enhancer@5.7.2/node_modules/value-enhancer/dist/collections.mjs
+var ReactiveMapImpl = class extends Map {
+	constructor(entries, config) {
+		super();
+		if (config) this.#onDeleted = config.onDeleted;
+		const [$, set$] = readonlyVal(this, { equal: false });
+		this.$ = $;
+		this.#notify = () => set$(this);
+		if (entries) for (const [key, value] of entries) this.set(key, value);
+	}
+	$;
+	#notify;
+	#onDeleted;
+	#delete(key) {
+		if (this.#onDeleted) {
+			if (super.has(key)) {
+				const value = super.get(key);
+				super.delete(key);
+				this.#onDeleted(value);
+				return true;
+			}
+			return false;
+		}
+		return super.delete(key);
+	}
+	#clear() {
+		if (this.#onDeleted) {
+			const deleted = new Set(this.values());
+			super.clear();
+			for (const value of deleted) this.#onDeleted(value);
+		} else super.clear();
+	}
+	delete(key) {
+		const deleted = this.#delete(key);
+		if (deleted) this.#notify();
+		return deleted;
+	}
+	batchDelete(keys) {
+		let deleted = false;
+		for (const key of keys) deleted = this.#delete(key) || deleted;
+		if (deleted) this.#notify();
+		return deleted;
+	}
+	clear() {
+		if (this.size > 0) {
+			this.#clear();
+			this.#notify();
+		}
+	}
+	#set(key, value) {
+		if (this.has(key)) {
+			const oldValue = this.get(key);
+			if (strictEqual(oldValue, value)) return false;
+			super.set(key, value);
+			if (this.#onDeleted) this.#onDeleted(oldValue);
+		} else super.set(key, value);
+		return true;
+	}
+	set(key, value) {
+		if (this.#set(key, value)) this.#notify();
+		return this;
+	}
+	batchSet(entries) {
+		let isDirty = false;
+		for (const [key, value] of entries) isDirty = this.#set(key, value) || isDirty;
+		if (isDirty) this.#notify();
+		return this;
+	}
+	rename(oldKey, newKey) {
+		if (!strictEqual(oldKey, newKey)) {
+			const value = this.get(oldKey);
+			if (super.delete(oldKey)) {
+				this.set(newKey, value);
+				return true;
+			}
+		}
+		return false;
+	}
+	replace(entries) {
+		const oldMap = new Map(this);
+		const deletedValues = new Set(this.values());
+		let hasNewValue = false;
+		super.clear();
+		for (const [key, value] of entries) {
+			super.set(key, value);
+			deletedValues.delete(value);
+			hasNewValue = hasNewValue || !oldMap.has(key) || !Object.is(oldMap.get(key), value);
+			oldMap.delete(key);
+		}
+		if (hasNewValue || oldMap.size > 0 || deletedValues.size > 0) {
+			if (this.#onDeleted) for (const value of deletedValues) this.#onDeleted(value);
+			this.#notify();
+		}
+		return deletedValues.values();
+	}
+	toJSON() {
+		const result = {};
+		for (const [key, value] of this) if (key != null) {
+			const k = String(key);
+			const v = value;
+			result[k] = v && v.toJSON ? v.toJSON(k) : v;
+		}
+		return result;
+	}
+	dispose() {
+		this.$.dispose();
+		if (this.size > 0) this.#clear();
+	}
+};
+var reactiveMap = (entries, config) => new ReactiveMapImpl(entries, config);
+//#endregion
 //#region ../../node_modules/.bun/@dagrejs+dagre@3.1.1/node_modules/@dagrejs/dagre/dist/dagre.esm.js
 var Te = Object.defineProperty;
 var In = (e, n, t) => n in e ? Te(e, n, {
@@ -2269,105 +2497,463 @@ function _e(e) {
 }
 /*! For license information please see dagre.esm.js.LEGAL.txt */
 //#endregion
-//#region ../../node_modules/.bun/@wopjs+disposable@0.1.24/node_modules/@wopjs/disposable/dist/index.mjs
-var isFn = (value) => !!(value && value.constructor && value.call && value.apply);
-/**
-* Check if a value is a {@link DisposableType}.
-* @param value The value to check.
-* @returns True if the value is a {@link DisposableType}, false otherwise.
-*/
-var isDisposable = (value) => isFn(value) || isFn(value?.dispose);
-/**
-* Dispose a disposable object or a disposer function. Log the error if any.
-* @param disposable A disposable object or a disposer function. Do nothing otherwise.
-*/
-function dispose(disposable) {
-	try {
-		if (disposable) {
-			if (isFn(disposable.dispose)) disposable.dispose();
-			else if (isFn(disposable)) disposable();
+//#region src/canvas/browser/base/routeLayout.ts
+var clearance = 16;
+var portOffset = 24;
+/** Orthogonal channels around the measured cards, in primary/cross coordinates. */
+function routeLayout(nodes, edges) {
+	const byId = new Map(nodes.map((node) => [node.id, node]));
+	const connections = edges.map((edge) => {
+		const source = byId.get(edge.source);
+		const target = byId.get(edge.target);
+		const output = {
+			x: source.x + (edge.sourceOffset?.x ?? source.width),
+			y: source.y + (edge.sourceOffset?.y ?? source.height / 2)
+		};
+		const input = {
+			x: target.x + (edge.targetOffset?.x ?? 0),
+			y: target.y + (edge.targetOffset?.y ?? target.height / 2)
+		};
+		const offset = output.x < input.x ? Math.min(portOffset, (input.x - output.x) / 2) : portOffset;
+		return {
+			id: edge.id,
+			source: output,
+			target: input,
+			returnSide: input.x <= output.x ? Math.sign(input.y - output.y) : 0,
+			start: {
+				x: output.x + offset,
+				y: output.y
+			},
+			end: {
+				x: input.x - offset,
+				y: input.y
+			}
+		};
+	});
+	const obstacles = nodes.map((node) => ({
+		left: node.x - clearance,
+		right: node.x + node.width + clearance,
+		top: node.y - clearance,
+		bottom: node.y + node.height + clearance
+	}));
+	const routes = /* @__PURE__ */ new Map();
+	const pending = connections.filter((edge) => {
+		if (edge.start.x > edge.end.x) return true;
+		const middle = (edge.start.x + edge.end.x) / 2;
+		const points = [
+			edge.start,
+			{
+				x: middle,
+				y: edge.start.y
+			},
+			{
+				x: middle,
+				y: edge.end.y
+			},
+			edge.end
+		];
+		for (let index = 1; index < points.length; index++) {
+			const a = points[index - 1];
+			const b = points[index];
+			if (obstacles.some((rect) => a.x === b.x ? a.x > rect.left && a.x < rect.right && Math.max(a.y, b.y) > rect.top && Math.min(a.y, b.y) < rect.bottom : a.y > rect.top && a.y < rect.bottom && Math.max(a.x, b.x) > rect.left && Math.min(a.x, b.x) < rect.right)) return true;
 		}
-	} catch (e) {
-		console.error(e);
-	}
-}
-var isAbortable = (disposable) => isDisposable(disposable) && isFn(disposable.abortable);
-/**
-* Create a {@link DisposableStore} that manages {@link Disposer}s and {@link IDisposable}s.
-*
-* A {@link DisposableStore} is also a {@link Disposer}, which means it can be the `dispose` method of an {@link IDisposable}.
-*
-* A {@link DisposableStore} is also an {@link IDisposable}, which means it can be managed by another {@link DisposableStore}.
-*
-* @example
-* ```ts
-* import { type IDisposable, disposableStore } from "@wopjs/disposable";
-*
-* class A implements IDisposable {
-*   dispose = disposableStore()
-*   constructor() {
-*     this.dispose.add(...);
-*   }
-* }
-*
-* class B implements IDisposable {
-*   dispose = disposableStore()
-*   a = this.dispose.add(new A())
-*   constructor() {
-*     this.dispose.add(...);
-*  }
-* }
-*
-* const b = new B();
-* b.dispose(); // dispose both `b` and `b.a`.
-* ```
-*
-* @param disposables Optional array of {@link DisposableType}s added to the store.
-* @returns A disposable store.
-*/
-function disposableStore(disposables) {
-	let isDisposing;
-	function disposableStore() {
-		if (!isDisposing) {
-			isDisposing = 1;
-			isDisposing = disposableStore._disposables_ = disposableStore._disposables_?.forEach(dispose);
+		routes.set(edge.id, [
+			edge.source,
+			points[1],
+			points[2],
+			edge.target
+		]);
+		return false;
+	});
+	if (!pending.length) return routes;
+	const xs = [.../* @__PURE__ */ new Set([...obstacles.flatMap((rect) => [rect.left, rect.right]), ...pending.flatMap((edge) => [edge.start.x, edge.end.x])])].toSorted((a, b) => a - b);
+	const ys = [.../* @__PURE__ */ new Set([...obstacles.flatMap((rect) => [rect.top, rect.bottom]), ...pending.flatMap((edge) => [edge.start.y, edge.end.y])])].toSorted((a, b) => a - b);
+	const xIndex = new Map(xs.map((value, index) => [value, index]));
+	const yIndex = new Map(ys.map((value, index) => [value, index]));
+	const columns = xs.length;
+	const size = columns * ys.length;
+	const horizontal = new Uint8Array(size);
+	const vertical = new Uint8Array(size);
+	for (const rect of obstacles) {
+		const left = xIndex.get(rect.left);
+		const right = xIndex.get(rect.right);
+		const top = yIndex.get(rect.top);
+		const bottom = yIndex.get(rect.bottom);
+		for (let y = top + 1; y < bottom; y++) for (let x = left; x < right; x++) horizontal[y * columns + x] = 1;
+		for (let x = left + 1; x < right; x++) for (let y = top; y < bottom; y++) vertical[y * columns + x] = 1;
+	}
+	const distances = new Float64Array(size * 2);
+	const previous = new Int32Array(size * 2);
+	const visited = new Uint32Array(size * 2);
+	for (const [routeIndex, edge] of pending.entries()) {
+		const generation = routeIndex + 1;
+		const start = yIndex.get(edge.start.y) * columns + xIndex.get(edge.start.x);
+		const end = yIndex.get(edge.end.y) * columns + xIndex.get(edge.end.x);
+		const queue = [];
+		const heuristic = (vertex) => Math.abs(xs[vertex % columns] - edge.end.x) + Math.abs(ys[Math.floor(vertex / columns)] - edge.end.y);
+		distances[start * 2] = 0;
+		previous[start * 2] = -1;
+		visited[start * 2] = generation;
+		enqueue(queue, {
+			state: start * 2,
+			score: heuristic(start)
+		});
+		let finish = -1;
+		while (queue.length) {
+			const entry = dequeue(queue);
+			const vertex = Math.floor(entry.state / 2);
+			if (entry.score > distances[entry.state] + heuristic(vertex) + 1e-6) continue;
+			if (vertex === end) {
+				finish = entry.state;
+				break;
+			}
+			const x = vertex % columns;
+			const y = Math.floor(vertex / columns);
+			const moves = [
+				x > 0 && !horizontal[vertex - 1] ? vertex - 1 : -1,
+				x + 1 < columns && !horizontal[vertex] ? vertex + 1 : -1,
+				y > 0 && !vertical[vertex - columns] ? vertex - columns : -1,
+				y + 1 < ys.length && !vertical[vertex] ? vertex + columns : -1
+			];
+			for (const [index, next] of moves.entries()) {
+				if (next < 0 || vertex === start && index === 0 || next === end && index === 0) continue;
+				if (edge.returnSide * (ys[Math.floor(next / columns)] - edge.start.y) < -1e-6) continue;
+				const axis = index < 2 ? 0 : 1;
+				const state = next * 2 + axis;
+				const length = Math.abs(xs[next % columns] - xs[x]) + Math.abs(ys[Math.floor(next / columns)] - ys[y]);
+				const distance = distances[entry.state] + length + (entry.state % 2 === axis ? 0 : 8);
+				if (visited[state] === generation && distance >= distances[state]) continue;
+				visited[state] = generation;
+				distances[state] = distance;
+				previous[state] = entry.state;
+				enqueue(queue, {
+					state,
+					score: distance + heuristic(next)
+				});
+			}
+		}
+		if (finish < 0) throw new Error("Could not route the compact workflow connection.");
+		const points = [];
+		for (let state = finish; state >= 0; state = previous[state]) {
+			const vertex = Math.floor(state / 2);
+			points.push({
+				x: xs[vertex % columns],
+				y: ys[Math.floor(vertex / columns)]
+			});
 		}
+		points.reverse();
+		const turns = points.filter((point, index) => {
+			const before = points[index - 1];
+			const after = points[index + 1];
+			return !before || !after || !(before.x === point.x && point.x === after.x || before.y === point.y && point.y === after.y);
+		});
+		routes.set(edge.id, [
+			edge.source,
+			...turns,
+			edge.target
+		]);
 	}
-	disposableStore.dispose = disposableStore;
-	disposableStore.size = size;
-	disposableStore.has = has;
-	disposableStore.add = add;
-	disposableStore.make = make;
-	disposableStore.remove = remove$1;
-	disposableStore.flush = flush;
-	if (disposables) disposableStore.add(disposables);
-	return disposableStore;
+	return routes;
+}
+function enqueue(queue, entry) {
+	let index = queue.length;
+	queue.push(entry);
+	while (index > 0) {
+		const parent = Math.floor((index - 1) / 2);
+		if (queue[parent].score <= entry.score) break;
+		queue[index] = queue[parent];
+		index = parent;
+	}
+	queue[index] = entry;
+}
+function dequeue(queue) {
+	const first = queue[0];
+	const last = queue.pop();
+	if (!queue.length) return first;
+	let index = 0;
+	while (index * 2 + 1 < queue.length) {
+		let child = index * 2 + 1;
+		if (child + 1 < queue.length && queue[child + 1].score < queue[child].score) child++;
+		if (last.score <= queue[child].score) break;
+		queue[index] = queue[child];
+		index = child;
+	}
+	queue[index] = last;
+	return first;
 }
-function _addOne(disposable) {
-	if (!this._disposables_?.has(disposable)) {
-		(this._disposables_ ??= /* @__PURE__ */ new Set()).add(disposable);
-		if (isAbortable(disposable)) disposable.abortable(remove$1.bind(this, disposable));
+//#endregion
+//#region src/canvas/browser/base/compactLayout.ts
+function bounds(nodes, routes = /* @__PURE__ */ new Map()) {
+	const points = [...routes.values()].flat();
+	for (const node of nodes) points.push(node, {
+		x: node.x + node.width,
+		y: node.y + node.height
+	});
+	const x = Math.min(...points.map((point) => point.x));
+	const y = Math.min(...points.map((point) => point.y));
+	return {
+		x,
+		y,
+		width: Math.max(...points.map((point) => point.x)) - x,
+		height: Math.max(...points.map((point) => point.y)) - y
+	};
+}
+/** Place branches at their earliest dependency level, rather than delaying short
+* branches until the longest sibling reaches a shared join. Cycles remain one
+* component whose internal order follows the measured base layout. */
+function dependencyLevels(nodes, edges, gap) {
+	const graph = new ie.Graph();
+	for (const node of nodes) graph.setNode(node.id);
+	for (const edge of edges) graph.setEdge(edge.source, edge.target);
+	const components = ie.alg.tarjan(graph);
+	const componentOf = new Map(components.flatMap((members, index) => members.map((id) => [id, String(index)])));
+	const dependencies = new ie.Graph();
+	for (let index = 0; index < components.length; index++) dependencies.setNode(String(index));
+	for (const edge of edges) {
+		const source = componentOf.get(edge.source);
+		const target = componentOf.get(edge.target);
+		if (source !== target) dependencies.setEdge(source, target);
+	}
+	const byId = new Map(nodes.map((node) => [node.id, node]));
+	const levels = /* @__PURE__ */ new Map();
+	const ends = /* @__PURE__ */ new Map();
+	for (const id of ie.alg.topsort(dependencies)) {
+		const start = Math.max(0, ...(dependencies.predecessors(id) ?? []).map((parent) => ends.get(parent) + 1));
+		const members = components[Number(id)].map((member) => byId.get(member)).toSorted((a, b) => a.column - b.column || a.y - b.y);
+		for (const [index, member] of members.entries()) levels.set(member.id, start + index);
+		ends.set(id, start + members.length - 1);
+	}
+	const isolated = nodes.filter((node) => graph.nodeEdges(node.id)?.length === 0);
+	const isolatedColumns = [...new Set(isolated.map((node) => node.column))].toSorted((a, b) => a - b);
+	for (const node of isolated) levels.set(node.id, isolatedColumns.indexOf(node.column));
+	let primary = 0;
+	const groups = [...Map.groupBy(nodes, (node) => levels.get(node.id)).entries()].toSorted(([a], [b]) => a - b);
+	for (const [level, members] of groups) {
+		const size = Math.max(...members.map((node) => node.width));
+		for (const node of members) Object.assign(node, {
+			column: level,
+			x: primary + (size - node.width) / 2
+		});
+		primary += size + gap;
 	}
 }
-function add(disposables) {
-	Array.isArray(disposables) ? disposables.forEach(_addOne, this) : _addOne.call(this, disposables);
-	return disposables;
-}
-function flush(disposable) {
-	dispose(disposable ? this.remove(disposable) && disposable : this);
-}
-function has(disposable) {
-	return !!this._disposables_?.has(disposable);
-}
-function make(executor) {
-	const disposable = executor();
-	return disposable && this.add(disposable);
-}
-function remove$1(disposable) {
-	return !!this._disposables_?.delete(disposable);
+/** Compact each connected subgraph, then wrap the forest to the requested ratio. */
+function compactLayout(graph, insets = {
+	width: 0,
+	height: 0
+}, aspectRatio = 1) {
+	if (!graph.nodes.length) return {
+		positions: {},
+		routes: /* @__PURE__ */ new Map(),
+		bounds: {
+			x: 0,
+			y: 0,
+			width: 320,
+			height: 120
+		}
+	};
+	const connected = new ie.Graph();
+	for (const node of graph.nodes) connected.setNode(node.id);
+	for (const edge of graph.edges) connected.setEdge(edge.source, edge.target);
+	const members = ie.alg.components(connected);
+	if (members.length === 1) return compactComponent(graph, insets, aspectRatio);
+	const componentOf = new Map(members.flatMap((ids, index) => ids.map((id) => [id, index])));
+	const edges = Map.groupBy(graph.edges, (edge) => componentOf.get(edge.source));
+	return packComponents([...Map.groupBy(graph.nodes, (node) => componentOf.get(node.id))].map(([id, nodes]) => ({
+		nodes,
+		edges: edges.get(id) ?? [],
+		bounds: bounds(nodes)
+	})).toSorted((a, b) => a.bounds.x - b.bounds.x || a.bounds.y - b.bounds.y).map((component) => component.nodes.length === 1 && !component.edges.length ? {
+		positions: { [component.nodes[0].id]: component.nodes[0] },
+		routes: /* @__PURE__ */ new Map(),
+		bounds: component.bounds
+	} : compactComponent(component, {
+		width: 0,
+		height: 0
+	}, aspectRatio)), insets, aspectRatio);
+}
+/** Keep reading order, with a larger gap between independent trees than within one. */
+function packComponents(layouts, insets, aspectRatio) {
+	const gap = 96;
+	const largestWidth = Math.max(...layouts.map((layout) => layout.bounds.width));
+	const contentArea = layouts.reduce((sum, layout) => sum + layout.bounds.width * layout.bounds.height, 0);
+	const limits = /* @__PURE__ */ new Set([largestWidth, Math.max(largestWidth, Math.sqrt(contentArea * aspectRatio))]);
+	let prefixWidth = -96;
+	for (const layout of layouts) {
+		prefixWidth += layout.bounds.width + gap;
+		limits.add(Math.max(largestWidth, prefixWidth));
+	}
+	let best;
+	for (const limit of limits) {
+		let x = 0;
+		let y = 0;
+		let width = 0;
+		let rowHeight = 0;
+		let rows = 1;
+		const positions = layouts.map((layout) => {
+			if (x > 0 && x + layout.bounds.width > limit + 1e-6) {
+				y += rowHeight + gap;
+				x = rowHeight = 0;
+				rows++;
+			}
+			const position = {
+				x: x - layout.bounds.x,
+				y: y - layout.bounds.y
+			};
+			width = Math.max(width, x + layout.bounds.width);
+			rowHeight = Math.max(rowHeight, layout.bounds.height);
+			x += layout.bounds.width + gap;
+			return position;
+		});
+		const height = y + rowHeight;
+		const score = Math.max((width + insets.width) / aspectRatio, height + insets.height);
+		const area = (width + insets.width) * (height + insets.height);
+		if (!best || score < best.score - 1e-9 || Math.abs(score - best.score) < 1e-9 && (area < best.area || area === best.area && rows < best.rows)) best = {
+			positions,
+			width,
+			height,
+			score,
+			area,
+			rows
+		};
+	}
+	const translate = (point, index) => ({
+		x: point.x + best.positions[index].x,
+		y: point.y + best.positions[index].y
+	});
+	return {
+		positions: Object.fromEntries(layouts.flatMap((layout, index) => Object.entries(layout.positions).map(([id, point]) => [id, translate(point, index)]))),
+		routes: new Map(layouts.flatMap((layout, index) => [...layout.routes].map(([id, points]) => [id, points.map((point) => translate(point, index))]))),
+		bounds: {
+			x: 0,
+			y: 0,
+			width: best.width,
+			height: best.height
+		}
+	};
 }
-function size() {
-	return this._disposables_?.size || 0;
+/** Bend dependency paths continuously; the ports retain their original orientation. */
+function compactComponent(graph, insets, aspectRatio) {
+	const normalized = graph.nodes.map((node) => ({
+		...node,
+		...layoutAxes(node, "vertical"),
+		width: node.height,
+		height: node.width
+	}));
+	dependencyLevels(normalized, graph.edges, 48);
+	const incoming = new Set(graph.edges.map((edge) => edge.target));
+	const outgoing = new Set(graph.edges.map((edge) => edge.source));
+	const roots = normalized.filter((node) => !incoming.has(node.id) && outgoing.has(node.id));
+	const centers = (roots.length ? roots : normalized).map((node) => node.y + node.height / 2);
+	const center = centers.reduce((sum, value) => sum + value, 0) / centers.length;
+	const gap = 48;
+	const pathNodes = normalized.filter((node) => incoming.has(node.id) || outgoing.has(node.id));
+	const crossSize = Math.max(...(pathNodes.length ? pathNodes : normalized).map((node) => node.height));
+	const bow = crossSize * .75;
+	const separation = crossSize + 48;
+	const bucketSize = Math.max(...normalized.map((node) => node.width)) + gap;
+	const byId = new Map(normalized.map((node) => [node.id, node]));
+	const forwardEdges = graph.edges.filter((edge) => byId.get(edge.source).column < byId.get(edge.target).column);
+	const parents = Map.groupBy(forwardEdges, (edge) => edge.target);
+	const children = Map.groupBy(forwardEdges, (edge) => edge.source);
+	const ordered = normalized.toSorted((a, b) => a.column - b.column || a.y - b.y);
+	const remaining = /* @__PURE__ */ new Map();
+	for (const node of ordered.toReversed()) remaining.set(node.id, 1 + Math.max(0, ...(children.get(node.id) ?? []).filter((edge) => parents.get(edge.target)?.length === 1).map((edge) => remaining.get(edge.target))));
+	const rankEnds = new Map([...Map.groupBy(normalized, (node) => node.column)].map(([rank, nodes]) => [rank, Math.max(...nodes.map((node) => node.x + node.width))]));
+	const spans = /* @__PURE__ */ new Set([Infinity, ...rankEnds.values()]);
+	let best;
+	for (const span of spans) {
+		const placed = /* @__PURE__ */ new Map();
+		const buckets = /* @__PURE__ */ new Map();
+		let turns = 0;
+		for (const original of ordered) {
+			const upstream = parents.get(original.id)?.map((edge) => placed.get(edge.source)) ?? [];
+			const parent = upstream[0];
+			const side = original.y + original.height / 2 < center - 1e-6 ? -1 : 1;
+			let primary = upstream.length ? Math.max(...upstream.map(({ node }) => {
+				const source = byId.get(node.id);
+				return node.x + rankEnds.get(source.column) - source.x;
+			})) + gap : original.x;
+			let shift = 0;
+			let start = 0;
+			if (upstream.length > 1) {
+				primary = Math.max(...upstream.map((entry) => entry.extent)) + gap;
+				shift = upstream.reduce((sum, { node }) => sum + node.y + node.height / 2, 0) / upstream.length - original.y - original.height / 2;
+				start = primary;
+			} else if (parent) {
+				shift = parent.shift;
+				start = parent.start;
+				if ((children.get(parent.node.id)?.length ?? 0) > 1) {
+					shift = parent.node.y - byId.get(parent.node.id).y;
+					start = primary;
+				} else if (primary + original.width > span && remaining.get(original.id) > 2) {
+					primary = Math.max(0, start - span / 3);
+					shift = parent.shift + side * separation;
+					start = primary;
+					turns++;
+				}
+			}
+			const progress = Number.isFinite(span) && span > start ? Math.min(1, Math.max(0, (primary - start) / (span - start))) : 0;
+			const drift = side * bow * Math.sin(progress * Math.PI);
+			const node = {
+				...original,
+				x: primary,
+				y: original.y + shift + drift
+			};
+			const firstBucket = Math.floor(node.x / bucketSize);
+			const lastBucket = Math.floor((node.x + node.width + gap) / bucketSize);
+			const nearby = /* @__PURE__ */ new Set();
+			for (let bucket = firstBucket; bucket <= lastBucket; bucket++) for (const entry of buckets.get(bucket) ?? []) nearby.add(entry);
+			const candidates = [...nearby].toSorted((a, b) => a.order - b.order);
+			while (true) {
+				const collision = candidates.find(({ node: other }) => node.x < other.x + other.width + 48 - 1e-6 && other.x < node.x + node.width + 48 - 1e-6 && node.y < other.y + other.height + 48 - 1e-6 && other.y < node.y + node.height + 48 - 1e-6);
+				if (!collision) break;
+				node.y = side < 0 ? collision.node.y - node.height - 48 : collision.node.y + collision.node.height + 48;
+			}
+			const placement = {
+				node,
+				order: placed.size,
+				shift: node.y - original.y - drift,
+				start,
+				extent: Math.max(node.x + node.width, ...upstream.map((entry) => entry.extent))
+			};
+			placed.set(node.id, placement);
+			for (let bucket = firstBucket; bucket <= lastBucket; bucket++) {
+				const entries = buckets.get(bucket);
+				if (entries) entries.push(placement);
+				else buckets.set(bucket, [placement]);
+			}
+		}
+		const nodes = [...placed.values()].map((entry) => entry.node);
+		const extent = bounds(nodes);
+		const width = extent.height + insets.width + 48;
+		const height = extent.width + insets.height + 48;
+		const area = width * height;
+		const score = Math.max(width / aspectRatio, height);
+		if (!best || score < best.score - 1e-9 || Math.abs(score - best.score) < 1e-9 && (area < best.area || area === best.area && turns < best.turns)) best = {
+			nodes,
+			score,
+			area,
+			turns
+		};
+	}
+	const routes = routeLayout(best.nodes, graph.edges.map((edge) => Object.assign({}, edge, {
+		sourceOffset: edge.sourceOffset && layoutAxes(edge.sourceOffset, "vertical"),
+		targetOffset: edge.targetOffset && layoutAxes(edge.targetOffset, "vertical")
+	})));
+	const physicalNodes = best.nodes.map((node) => Object.assign({}, node, layoutAxes(node, "vertical"), {
+		width: node.height,
+		height: node.width
+	}));
+	const physicalRoutes = new Map([...routes].map(([id, points]) => [id, points.map((point) => layoutAxes(point, "vertical"))]));
+	return {
+		positions: Object.fromEntries(physicalNodes.map(({ id, x, y }) => [id, {
+			x,
+			y
+		}])),
+		routes: physicalRoutes,
+		bounds: bounds(physicalNodes, physicalRoutes)
+	};
 }
 Array.isArray;
 var isNumber = (value) => {
@@ -2389,117 +2975,6 @@ var cluster = (list2, size = 2) => {
 	});
 };
 //#endregion
-//#region ../../node_modules/.bun/value-enhancer@5.7.2/node_modules/value-enhancer/dist/collections.mjs
-var ReactiveMapImpl = class extends Map {
-	constructor(entries, config) {
-		super();
-		if (config) this.#onDeleted = config.onDeleted;
-		const [$, set$] = readonlyVal(this, { equal: false });
-		this.$ = $;
-		this.#notify = () => set$(this);
-		if (entries) for (const [key, value] of entries) this.set(key, value);
-	}
-	$;
-	#notify;
-	#onDeleted;
-	#delete(key) {
-		if (this.#onDeleted) {
-			if (super.has(key)) {
-				const value = super.get(key);
-				super.delete(key);
-				this.#onDeleted(value);
-				return true;
-			}
-			return false;
-		}
-		return super.delete(key);
-	}
-	#clear() {
-		if (this.#onDeleted) {
-			const deleted = new Set(this.values());
-			super.clear();
-			for (const value of deleted) this.#onDeleted(value);
-		} else super.clear();
-	}
-	delete(key) {
-		const deleted = this.#delete(key);
-		if (deleted) this.#notify();
-		return deleted;
-	}
-	batchDelete(keys) {
-		let deleted = false;
-		for (const key of keys) deleted = this.#delete(key) || deleted;
-		if (deleted) this.#notify();
-		return deleted;
-	}
-	clear() {
-		if (this.size > 0) {
-			this.#clear();
-			this.#notify();
-		}
-	}
-	#set(key, value) {
-		if (this.has(key)) {
-			const oldValue = this.get(key);
-			if (strictEqual(oldValue, value)) return false;
-			super.set(key, value);
-			if (this.#onDeleted) this.#onDeleted(oldValue);
-		} else super.set(key, value);
-		return true;
-	}
-	set(key, value) {
-		if (this.#set(key, value)) this.#notify();
-		return this;
-	}
-	batchSet(entries) {
-		let isDirty = false;
-		for (const [key, value] of entries) isDirty = this.#set(key, value) || isDirty;
-		if (isDirty) this.#notify();
-		return this;
-	}
-	rename(oldKey, newKey) {
-		if (!strictEqual(oldKey, newKey)) {
-			const value = this.get(oldKey);
-			if (super.delete(oldKey)) {
-				this.set(newKey, value);
-				return true;
-			}
-		}
-		return false;
-	}
-	replace(entries) {
-		const oldMap = new Map(this);
-		const deletedValues = new Set(this.values());
-		let hasNewValue = false;
-		super.clear();
-		for (const [key, value] of entries) {
-			super.set(key, value);
-			deletedValues.delete(value);
-			hasNewValue = hasNewValue || !oldMap.has(key) || !Object.is(oldMap.get(key), value);
-			oldMap.delete(key);
-		}
-		if (hasNewValue || oldMap.size > 0 || deletedValues.size > 0) {
-			if (this.#onDeleted) for (const value of deletedValues) this.#onDeleted(value);
-			this.#notify();
-		}
-		return deletedValues.values();
-	}
-	toJSON() {
-		const result = {};
-		for (const [key, value] of this) if (key != null) {
-			const k = String(key);
-			const v = value;
-			result[k] = v && v.toJSON ? v.toJSON(k) : v;
-		}
-		return result;
-	}
-	dispose() {
-		this.$.dispose();
-		if (this.size > 0) this.#clear();
-	}
-};
-var reactiveMap = (entries, config) => new ReactiveMapImpl(entries, config);
-//#endregion
 //#region src/canvas/browser/base/compare.ts
 var isSameXYPosition = (p1, p2) => !p1 || !p2 ? p1 === p2 : p1.x === p2.x && p1.y === p2.y;
 var isSize = (s) => isPlainObject(s) && isNumber(s.width) && isNumber(s.height);
@@ -2550,6 +3025,63 @@ function isInside(target, selector) {
 	return target?.closest?.(selector) != null;
 }
 //#endregion
+//#region src/canvas/browser/base/graphLayout.ts
+/** The measured dependency layout shared by canvas arrangement and image export. */
+function graphLayout(nodes, edges, direction) {
+	if (!nodes.length) return {
+		nodes: [],
+		edges: []
+	};
+	const graph = new ie.Graph().setDefaultEdgeLabel(() => ({}));
+	graph.setGraph({
+		rankdir: direction === "vertical" ? "TB" : "LR",
+		ranksep: direction === "vertical" ? 48 : 80
+	});
+	const singles = new Set(nodes.map((node) => node.id));
+	for (const node of nodes) graph.setNode(node.id, {
+		width: node.width,
+		height: node.height
+	});
+	const connections = edges.filter((edge) => graph.hasNode(edge.source) && graph.hasNode(edge.target));
+	for (const edge of connections) {
+		singles.delete(edge.source);
+		singles.delete(edge.target);
+		graph.setEdge(edge.source, edge.target);
+	}
+	const isolated = [...singles];
+	for (let start = 0; start < isolated.length; start += 10) for (let index = start; index < Math.min(start + 9, isolated.length - 1); index++) graph.setEdge(isolated[index], isolated[index + 1]);
+	const constraints = [];
+	const ordering = new ie.Graph();
+	for (const node of nodes) {
+		const targets = [...new Set(node.branchHandles?.flatMap((handle) => connections.filter((edge) => edge.source === node.id && edge.sourceHandle === handle).map((edge) => edge.target)))];
+		for (let index = 1; index < targets.length; index++) {
+			const left = targets[index - 1];
+			const right = targets[index];
+			ordering.setEdge(left, right);
+			if (ie.alg.isAcyclic(ordering)) constraints.push({
+				left,
+				right
+			});
+			else ordering.removeEdge(left, right);
+		}
+	}
+	Oe(graph, { constraints });
+	return {
+		nodes: nodes.map((node) => {
+			const { x, y, width, height, rank } = graph.node(node.id);
+			return {
+				id: node.id,
+				column: rank,
+				x: x - width / 2,
+				y: y - height / 2,
+				width,
+				height
+			};
+		}),
+		edges: connections.map((edge) => Object.assign({}, edge, { points: graph.edge(edge.source, edge.target).points }))
+	};
+}
+//#endregion
 //#region src/canvas/browser/stores/node/constants.ts
 var NODE_TYPE = /* @__PURE__ */ function(NODE_TYPE) {
 	NODE_TYPE["TaskNode"] = "task_node";
@@ -3183,6 +3715,7 @@ var CanvasStore = class {
 	constructor(model, editable, language, callbacks, autoLayout = false, interactiveMode$) {
 		this.canDeleteNodes = true;
 		this.dispose = disposableStore();
+		this.connectionRoutes = this.dispose.add(val(/* @__PURE__ */ new Map()));
 		this.ignoredNodeIds = this.dispose.add(val([]));
 		this.ignoreNodes = (nodeIds, ignored) => {
 			if (this.$.editable.value) this.#callbacks.onIgnoreNodes?.(nodeIds, ignored);
@@ -3467,67 +4000,52 @@ var CanvasStore = class {
 			if (position) node.$$.position.set(position);
 		}
 	}
-	layoutPositions(nodes, availableWidth) {
-		const g = new ie.Graph().setDefaultEdgeLabel(() => ({}));
-		const vertical = this.$.direction.value === "vertical";
-		g.setGraph({
-			rankdir: vertical ? "TB" : "LR",
-			ranksep: vertical ? 48 : 80
-		});
-		const singles = /* @__PURE__ */ new Set();
-		for (const node of nodes) {
-			const { id, measured } = node.$.rfNode.value;
-			singles.add(id);
-			g.setNode(id, {
-				width: measured?.width ?? 0,
-				height: measured?.height ?? 0
-			});
-		}
-		for (const rfEdge of this.$.rfEdges.value) {
-			if (!g.hasNode(rfEdge.source) || !g.hasNode(rfEdge.target)) continue;
-			singles.delete(rfEdge.source);
-			singles.delete(rfEdge.target);
-			g.setEdge(rfEdge.source, rfEdge.target);
-		}
-		if (singles.size > 0) for (const list of cluster([...singles], 10)) for (let i = 0; i < list.length - 1; i++) g.setEdge(list[i], list[i + 1]);
-		const constraints = [];
-		const ordering = new ie.Graph();
-		for (const node of nodes) {
-			if (!NodeStore.is(node)) continue;
-			const content = node.content$.value;
-			if (content.kind !== "condition" && content.kind !== "approval" && content.kind !== "wait") continue;
-			const targets = [...new Set(content.outputs.flatMap((port) => "handle" in port ? this.#connections.value.filter((edge) => edge.source === node.nodeId && edge.sourceHandle === `$branch:${port.handle}`).flatMap((edge) => {
-				const target = this.$.nodes.get(edge.target);
-				return target && g.hasNode(target.rfNodeId) ? [target.rfNodeId] : [];
-			}) : []))];
-			for (let index = 1; index < targets.length; index++) {
-				const left = targets[index - 1];
-				const right = targets[index];
-				ordering.setEdge(left, right);
-				if (ie.alg.isAcyclic(ordering)) constraints.push({
-					left,
-					right
-				});
-				else ordering.removeEdge(left, right);
-			}
-		}
-		Oe(g, { constraints });
-		const layoutNodes = nodes.map((node) => {
-			const { x, y, width, height, rank } = g.node(node.rfNodeId);
+	measuredLayout(nodes) {
+		return graphLayout(nodes.map((node) => {
+			const measured = node.$.measured.value;
+			const content = NodeStore.is(node) ? node.content$.value : void 0;
 			return {
 				id: node.nodeId,
-				column: rank,
-				x: x - width / 2,
-				y: y - height / 2,
-				width,
-				height
+				width: measured?.width ?? 0,
+				height: measured?.height ?? 0,
+				branchHandles: content?.kind === "condition" || content?.kind === "approval" || content?.kind === "wait" ? content.outputs.flatMap((port) => "handle" in port ? ["$branch:" + port.handle] : []) : void 0
 			};
-		});
+		}), this.#connections.value.map((edge) => ({
+			...edge,
+			id: getRFEdgeId(edge)
+		})), this.$.direction.value);
+	}
+	layoutPositions(nodes, availableWidth) {
+		const { nodes: layoutNodes } = this.measuredLayout(nodes);
 		return this.$.direction.value === "horizontal" ? wrapLayout(layoutNodes, availableWidth) : Object.fromEntries(layoutNodes.map(({ id, x, y }) => [id, {
 			x,
 			y
 		}]));
 	}
+	/** Arrange the isolated export store without saving presentation or history. */
+	compactForExport(insets, instance, aspectRatio = 1) {
+		const graph = this.measuredLayout(this.allLayoutNodes());
+		const port = (id, handle, type) => {
+			const node = this.$.nodes.get(id);
+			const measured = (node && instance?.getInternalNode(node.rfNodeId)?.internals.handleBounds?.[type])?.find((entry) => entry.id === `h:${handle}`);
+			return measured && {
+				x: measured.x + measured.width / 2,
+				y: measured.y + (type === "source" ? measured.height : 0)
+			};
+		};
+		const connections = new Map(this.#connections.value.map((edge) => [getRFEdgeId(edge), edge]));
+		const edges = graph.edges.map((edge) => Object.assign({}, edge, {
+			sourceOffset: port(edge.source, connections.get(edge.id)?.sourceHandle, "source"),
+			targetOffset: port(edge.target, connections.get(edge.id)?.targetHandle, "target")
+		}));
+		const result = compactLayout({
+			nodes: graph.nodes,
+			edges
+		}, insets, aspectRatio);
+		this.applyPositions(result.positions);
+		this.connectionRoutes.set(result.routes);
+		return result.bounds;
+	}
 	doRemoveNodes(nodes) {
 		if (this.disposed || !nodes?.size) return;
 		for (const node of nodes) this.pendingNodeDeletes.add(node);
@@ -14700,11 +15218,47 @@ function connectionNodeBounds(node) {
 	};
 }
 /** Align arrows with their ports and route returns outside both cards. */
-function getConnectionPath({ sourceBounds, targetBounds, ...params }) {
+function getConnectionPath({ sourceBounds, targetBounds, waypoints, ...params }) {
 	const { sourcePosition = Position.Bottom, targetPosition = Position.Top } = params;
 	const vertical = sourcePosition === Position.Bottom && targetPosition === Position.Top || sourcePosition === Position.Top && targetPosition === Position.Bottom;
 	const reverse = sourcePosition === Position.Left && targetPosition === Position.Right || sourcePosition === Position.Top && targetPosition === Position.Bottom;
 	const horizontal = sourcePosition === Position.Right && targetPosition === Position.Left || sourcePosition === Position.Left && targetPosition === Position.Right;
+	if (waypoints && waypoints.length > 2) {
+		const interior = waypoints.slice(1, -1);
+		const first = interior[0];
+		const last = interior.at(-1);
+		const points = [
+			{
+				x: params.sourceX,
+				y: params.sourceY
+			},
+			vertical ? {
+				x: params.sourceX,
+				y: first.y
+			} : {
+				x: first.x,
+				y: params.sourceY
+			},
+			...interior,
+			vertical ? {
+				x: params.targetX,
+				y: last.y
+			} : {
+				x: last.x,
+				y: params.targetY
+			},
+			{
+				x: params.targetX,
+				y: params.targetY
+			}
+		];
+		const label = interior[Math.floor(interior.length / 2)];
+		return [
+			roundedConnectionPath(points),
+			label.x,
+			label.y
+		];
+	}
 	const primary = (x, y) => vertical ? y : x;
 	const cross = (x, y) => vertical ? x : y;
 	const sourceX = primary(params.sourceX, params.sourceY);
@@ -14789,6 +15343,15 @@ function getConnectionPath({ sourceBounds, targetBounds, ...params }) {
 		y: point.x
 	} : point);
 	if (reverse) points.reverse();
+	const middle = (left + right) / 2;
+	return [
+		roundedConnectionPath(points),
+		vertical ? laneY : middle,
+		vertical ? middle : laneY
+	];
+}
+function roundedConnectionPath(input) {
+	const points = input.filter((point, index) => index === 0 || point.x !== input[index - 1].x || point.y !== input[index - 1].y);
 	const radius = 16;
 	let path = `M ${points[0].x} ${points[0].y}`;
 	for (let i = 1; i < points.length - 1; i++) {
@@ -14802,12 +15365,7 @@ function getConnectionPath({ sourceBounds, targetBounds, ...params }) {
 		path += ` Q ${corner.x} ${corner.y} ${corner.x + (next.x - corner.x) * r / after} ${corner.y + (next.y - corner.y) * r / after}`;
 	}
 	const end = points.at(-1);
-	const middle = (left + right) / 2;
-	return [
-		`${path} L ${end.x} ${end.y}`,
-		vertical ? laneY : middle,
-		vertical ? middle : laneY
-	];
+	return `${path} L ${end.x} ${end.y}`;
 }
 //#endregion
 //#region src/canvas/browser/graph/Edges/EdgeGradient.tsx
@@ -14836,12 +15394,14 @@ function BasicEdge(props) {
 	const error = useVal(edgeStore?.$.error);
 	const canvasStore = useCanvasStore();
 	const scale = useVal(canvasStore.$.scale);
+	const routes = useVal(canvasStore.connectionRoutes);
 	const gap = 3;
 	const targetX = props.targetX + (props.targetPosition == Position.Left ? -3 : props.targetPosition == Position.Right ? gap : 0);
 	const targetY = props.targetY + (props.targetPosition == Position.Top ? -3 : props.targetPosition == Position.Bottom ? gap : 0);
 	const sourceNode = useInternalNode(props.source);
 	const targetNode = useInternalNode(props.target);
 	const [path, labelX, labelY] = getConnectionPath({
+		waypoints: routes.get(props.id),
 		sourceBounds: connectionNodeBounds(sourceNode),
 		targetBounds: connectionNodeBounds(targetNode),
 		sourceX: props.sourceX,
@@ -20278,7 +20838,7 @@ var markdownPreview_module_default = {
 };
 //#endregion
 //#region src/canvas/browser/preview/markdownPreview.tsx
-var MarkdownContent = lazy(() => import("./markdownContent-IS8xXDoc.js"));
+var MarkdownContent = lazy(() => import("./markdownContent-B-GLj5DU.js"));
 var MarkdownPreview = /* @__PURE__ */ memo(({ dark, unstyled, components, contentClassName, content, draggable, onDoubleClick }) => {
 	const [focus, setFocus] = useState(false);
 	return /* @__PURE__ */ jsx("div", {
@@ -23503,7 +24063,7 @@ function tooShort(from, to) {
 }
 //#endregion
 //#region src/canvas/browser/graph/FlowCanvas/FlowCanvas.tsx
-var FlowCanvas = ({ flowCanvasStore, annotationContext, onActivateSelection, onSelectionStart, onSelectionEnd, onInspectSelection, inspectorOpen = false, onRequestAddNode, cornerTools, cornerLeading, topLeftTools, bottomRightTools, toolbar, dark, dottedBackground, fitView, nodesDraggable, layoutMotion, className, addNodeRequest, addItemRequest, onMove, onMoveEnd, onNodeDragStop, onSelectionChange, isValidConnection, onDropAddItem }) => {
+var FlowCanvas = ({ flowCanvasStore, annotationContext, onActivateSelection, onSelectionStart, onSelectionEnd, onInspectSelection, inspectorOpen = false, onRequestAddNode, cornerTools, cornerLeading, topLeftTools, bottomRightTools, toolbar, dark, dottedBackground, fitView, nodesDraggable, layoutMotion, className, addNodeRequest, addItemRequest, onInit, onMove, onMoveEnd, onNodeDragStop, onSelectionChange, isValidConnection, onDropAddItem }) => {
 	const editable = useVal(flowCanvasStore.$.editable);
 	const direction = useVal(flowCanvasStore.$.direction);
 	const changingDirection = useVal(flowCanvasStore.$.changingDirection);
@@ -23567,7 +24127,10 @@ var FlowCanvas = ({ flowCanvasStore, annotationContext, onActivateSelection, onS
 						onRelayout: editable ? flowCanvasStore.onRelayout : void 0,
 						onLayoutMeasured: flowCanvasStore.completeLayout,
 						onInstance: flowCanvasStore.rfCommand.onRFInstance,
-						onInit: flowCanvasStore.onInit,
+						onInit: (instance) => {
+							flowCanvasStore.onInit();
+							onInit?.(instance);
+						},
 						onCopy: flowCanvasStore.onCopy,
 						onPaste: flowCanvasStore.onPaste,
 						waitNode: flowCanvasStore.waitNode,
@@ -23579,4 +24142,4 @@ var FlowCanvas = ({ flowCanvasStore, annotationContext, onActivateSelection, onS
 	});
 };
 //#endregion
-export { isMac as C, toManifestNodeId as S, E as _, CanvasNodeIcon as a, toViewEdge as b, collapseAllNested as c, IconStack as d, selectableTimeZones as f, cronDescription as g, timeZoneOffset as h, pasteVideoLink as i, formatDuration as l, timeZoneLongLabel as m, setAddItemId as n, defaultTriggerIcon as o, timeZoneLabel as p, getVideoLink as r, JSONViewer as s, FlowCanvas as t, useDebouncedValue as u, CanvasTooltip as v, isSameViewport as w, toManifestHandleName as x, CanvasStore as y };
+export { isMac as C, getFlowPngAspectRatio as E, toManifestNodeId as S, flowPngAspectRatios as T, E as _, CanvasNodeIcon as a, toViewEdge as b, collapseAllNested as c, IconStack as d, selectableTimeZones as f, cronDescription as g, timeZoneOffset as h, pasteVideoLink as i, formatDuration as l, timeZoneLongLabel as m, setAddItemId as n, defaultTriggerIcon as o, timeZoneLabel as p, getVideoLink as r, JSONViewer as s, FlowCanvas as t, useDebouncedValue as u, CanvasTooltip as v, isSameViewport as w, toManifestHandleName as x, CanvasStore as y };