@oomol-lab/open-flow 0.1.0-beta.90 → 0.1.0-beta.91

package/dist/browser/preview.js

@@ -7002,9 +7002,24 @@ function hasRouteCrossings(routes) {
 //#region src/canvas/browser/base/routeLayout.ts
 var clearance = 16;
 var portOffset = 24;
+function componentIndex(sets) {
+	return new Map(sets.flatMap((ids, index) => ids.map((id) => [id, index])));
+}
 /** Orthogonal channels around the measured cards, in primary/cross coordinates. */
-function routeLayout(nodes, edges) {
+function routeLayout(nodes, edges, options = {}) {
 	const byId = new Map(nodes.map((node) => [node.id, node]));
+	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 = componentIndex(ie.alg.components(graph));
+	const cycles = componentIndex(ie.alg.tarjan(graph));
+	const obstacles = nodes.map((node) => ({
+		component: components.get(node.id),
+		left: node.x - clearance,
+		right: node.x + node.width + clearance,
+		top: node.y - clearance,
+		bottom: node.y + node.height + clearance
+	}));
 	const connections = edges.map((edge) => {
 		const source = byId.get(edge.source);
 		const target = byId.get(edge.target);
@@ -7017,11 +7032,15 @@ function routeLayout(nodes, edges) {
 			y: target.y + (edge.targetOffset?.y ?? target.height / 2)
 		};
 		const offset = output.x < input.x ? Math.min(portOffset, (input.x - output.x) / 2) : portOffset;
+		const feedback = input.x <= output.x && cycles.get(edge.source) === cycles.get(edge.target);
 		return {
 			id: edge.id,
+			component: components.get(edge.source),
 			source: output,
 			target: input,
 			returnSide: input.x <= output.x ? Math.sign(input.y - output.y) : 0,
+			feedback,
+			returnLane: void 0,
 			start: {
 				x: output.x + offset,
 				y: output.y
@@ -7032,12 +7051,23 @@ function routeLayout(nodes, edges) {
 			}
 		};
 	});
-	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 feedback = connections.filter((edge) => edge.feedback).toSorted((a, b) => a.source.x - a.target.x - (b.source.x - b.target.x));
+	for (const [index, edge] of feedback.entries()) {
+		const side = edge.source.y <= edge.target.y ? -1 : 1;
+		const span = obstacles.filter((rect) => rect.component === edge.component && rect.right >= edge.end.x && rect.left <= edge.start.x);
+		let lane = side < 0 ? Math.min(...span.map((rect) => rect.top)) : Math.max(...span.map((rect) => rect.bottom));
+		let previousLane;
+		do {
+			previousLane = lane;
+			for (const rect of obstacles) if (rect.right >= edge.end.x && rect.left <= edge.start.x && lane > rect.top && lane < rect.bottom) lane = side < 0 ? rect.top : rect.bottom;
+			for (const other of feedback.slice(0, index)) {
+				if (other.component !== edge.component || other.start.x < edge.end.x || other.end.x > edge.start.x) continue;
+				if (side < 0 && other.returnLane <= lane) lane = other.returnLane - clearance;
+				if (side > 0 && other.returnLane >= lane) lane = other.returnLane + clearance;
+			}
+		} while (lane !== previousLane);
+		edge.returnLane = lane;
+	}
 	const routes = /* @__PURE__ */ new Map();
 	const pending = connections.filter((edge) => {
 		if (edge.start.x > edge.end.x) return true;
@@ -7069,7 +7099,11 @@ function routeLayout(nodes, edges) {
 	});
 	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 ys = [.../* @__PURE__ */ new Set([...obstacles.flatMap((rect) => [rect.top, rect.bottom]), ...pending.flatMap((edge) => edge.returnLane == null ? [edge.start.y, edge.end.y] : [
+		edge.start.y,
+		edge.end.y,
+		edge.returnLane
+	])])].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;
@@ -7119,7 +7153,9 @@ function routeLayout(nodes, edges) {
 			];
 			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;
+				if (edge.returnLane != null) {
+					if (index === 0 && ys[y] !== edge.returnLane) continue;
+				} else 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]);
@@ -7134,7 +7170,10 @@ function routeLayout(nodes, edges) {
 				});
 			}
 		}
-		if (finish < 0) throw new Error("Could not route the compact workflow connection.");
+		if (finish < 0) {
+			if (options.allowBlockedPorts) continue;
+			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);
@@ -13317,7 +13356,8 @@ var CanvasStore = class {
 	constructor(model, editable, language, callbacks, options = {}) {
 		this.canDeleteNodes = true;
 		this.dispose = disposableStore();
-		this.connectionRoutes = this.dispose.add(val(/* @__PURE__ */ new Map()));
+		this.exportRoutes = this.dispose.add(val(/* @__PURE__ */ new Map()));
+		this.layoutRequest = this.dispose.add(val(0));
 		this.ignoredNodeIds = this.dispose.add(val([]));
 		this.ignoreNodes = (nodeIds, ignored) => {
 			if (this.$.editable.value) this.#callbacks.onIgnoreNodes?.(nodeIds, ignored);
@@ -13344,16 +13384,27 @@ var CanvasStore = class {
 		};
 		this.disposed = false;
 		this.layoutMeasurementAttempts = 0;
+		this.initialLayoutPending = false;
 		this.#modelDirection = "horizontal";
 		this.pendingNodeDeletes = /* @__PURE__ */ new Set();
 		this.pendingDisconnects = /* @__PURE__ */ new Map();
 		this.#entries = /* @__PURE__ */ new Map();
 		this.#modelPositions = /* @__PURE__ */ new Map();
 		this.#selectedNodeIds = /* @__PURE__ */ new Set();
+		this.requestLayout = () => {
+			if (this.disposed) return;
+			this.layoutComplete = false;
+			this.layoutMeasurementAttempts = 0;
+			this.initialLayoutPending = true;
+			this.layoutRequest.set(this.layoutRequest.value + 1);
+		};
 		this.completeLayout = (availableWidth) => {
 			if (this.disposed || this.layoutComplete) return true;
 			const nodes = this.allLayoutNodes();
-			if (nodes.length === 0 && !this.$.changingDirection.value) return true;
+			if (nodes.length === 0 && !this.$.changingDirection.value) {
+				this.resolveInitialLayout(void 0);
+				return true;
+			}
 			for (const node of nodes) {
 				const measured = node.$.measured.value;
 				if (!measured?.width || !measured.height) {
@@ -13361,6 +13412,7 @@ var CanvasStore = class {
 					this.layoutMeasurementAttempts = 0;
 					this.layoutComplete = true;
 					this.#restoreDirection();
+					this.resolveInitialLayout(void 0);
 					return true;
 				}
 			}
@@ -13368,6 +13420,10 @@ var CanvasStore = class {
 			this.applyPositions(positions);
 			this.layoutMeasurementAttempts = 0;
 			this.layoutComplete = true;
+			this.resolveInitialLayout({
+				direction: this.$.direction.value,
+				positions
+			});
 			if (this.$.changingDirection.value) this.#saveDirection(positions);
 			else this.#callbacks.onMoveNodes(positions);
 			return "relayout";
@@ -13502,7 +13558,7 @@ var CanvasStore = class {
 		const commentNodes = this.dispose.add(reactiveMap(null, { onDeleted: dispose }));
 		const viewport = this.dispose.add(val(model.viewport, { equal: isSameViewport }));
 		this.rfCommand = this.dispose.add(createRFCommand(nodes));
-		this.layoutComplete = !options.autoLayout;
+		this.layoutComplete = true;
 		this.#runStatus = this.dispose.add(val(model.runStatus == "running" ? FLOW_RUN_STATUS.Running : FLOW_RUN_STATUS.Idle));
 		this.#connections = this.dispose.add(val([]));
 		const edges = this.dispose.add(deriveEdges(this.#connections, nodes));
@@ -13539,8 +13595,14 @@ var CanvasStore = class {
 			nodeMiniMapPhase: this.dispose.add(compute((get) => getNodeMinimap(get(nodes.$).size + get(commentNodes.$).size, get(viewport)?.zoom ?? 1)))
 		};
 		this.#syncModel(model);
+		if (options.autoLayout) this.requestLayout();
 		if (options.defaultDirection != null) this.changeDirection(options.defaultDirection);
 	}
+	resolveInitialLayout(layout) {
+		if (!this.initialLayoutPending) return;
+		this.initialLayoutPending = false;
+		this.#callbacks.onInitialLayout?.(layout);
+	}
 	async #saveDirection(positions) {
 		try {
 			if (!await this.#callbacks.onChangeDirection?.(this.$.direction.value, positions) && !this.disposed) this.#restoreDirection();
@@ -13646,7 +13708,7 @@ var CanvasStore = class {
 			edges
 		}, insets, aspectRatio);
 		this.applyPositions(result.positions);
-		this.connectionRoutes.set(result.routes);
+		this.exportRoutes.set(result.routes);
 		return result.bounds;
 	}
 	doRemoveNodes(nodes) {
@@ -33556,6 +33618,70 @@ function roundedConnectionPath(input) {
 	return `${path} L ${end.x} ${end.y}`;
 }
 //#endregion
+//#region src/canvas/browser/graph/Edges/ConnectionRoutes.tsx
+var emptyRoutes = /* @__PURE__ */ new Map();
+var emptyNodes = [];
+var emptyEdges = [];
+var ConnectionRoutesContext = createContext(emptyRoutes);
+function inactiveNodes() {
+	return emptyNodes;
+}
+function measuredNodes(state) {
+	return [...state.nodeLookup.values()].flatMap((node) => node.hidden || !node.measured.width || !node.measured.height ? [] : [{
+		id: node.id,
+		...layoutAxes(node.internals.positionAbsolute, "vertical"),
+		width: node.measured.height,
+		height: node.measured.width,
+		column: 0,
+		handles: node.internals.handleBounds
+	}]);
+}
+function sameNodes(a, b) {
+	return a.length === b.length && a.every((node, index) => shallowPlainObjectEqual(node, b[index]));
+}
+/** Share obstacle-aware routes using React Flow's measured cards and actual ports. */
+function ConnectionRoutesProvider({ direction, routes$, children }) {
+	const planned = useVal(routes$);
+	const active = direction === "vertical" && !planned?.size;
+	const nodes = useStore$1(active ? measuredNodes : inactiveNodes, sameNodes);
+	const edges = useStore$1((state) => active ? state.edges : emptyEdges);
+	const routes = useMemo(() => {
+		if (planned?.size) return planned;
+		if (direction !== "vertical") return emptyRoutes;
+		const byId = new Map(nodes.map((node) => [node.id, node]));
+		const connections = edges.flatMap((edge) => {
+			const source = byId.get(edge.source);
+			const target = byId.get(edge.target);
+			const output = source?.handles?.source?.find((handle) => edge.sourceHandle == null || handle.id === edge.sourceHandle);
+			const input = target?.handles?.target?.find((handle) => edge.targetHandle == null || handle.id === edge.targetHandle);
+			if (edge.hidden || !source || !target || output?.position !== Position$1.Bottom || input?.position !== Position$1.Top) return [];
+			return [{
+				id: edge.id,
+				source: edge.source,
+				target: edge.target,
+				sourceOffset: {
+					x: output.y + output.height,
+					y: output.x + output.width / 2
+				},
+				targetOffset: {
+					x: input.y,
+					y: input.x + input.width / 2
+				}
+			}];
+		});
+		return new Map([...routeLayout(nodes, connections, { allowBlockedPorts: true })].map(([id, points]) => [id, points.map((point) => layoutAxes(point, "vertical"))]));
+	}, [
+		direction,
+		nodes,
+		edges,
+		planned
+	]);
+	return /* @__PURE__ */ jsx(ConnectionRoutesContext.Provider, {
+		value: routes,
+		children
+	});
+}
+//#endregion
 //#region src/canvas/browser/graph/Edges/EdgeGradient.tsx
 function EdgeGradient({ id, sourceX, sourceY, targetX, targetY, sourceColor, targetColor }) {
 	return /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
@@ -33582,7 +33708,7 @@ function BasicEdge(props) {
 	const error = useVal(edgeStore?.$.error);
 	const canvasStore = useCanvasStore();
 	const scale = useVal(canvasStore.$.scale);
-	const routes = useVal(canvasStore.connectionRoutes);
+	const routes = useContext(ConnectionRoutesContext);
 	const gap = 3;
 	const targetX = props.targetX + (props.targetPosition == Position$1.Left ? -3 : props.targetPosition == Position$1.Right ? gap : 0);
 	const targetY = props.targetY + (props.targetPosition == Position$1.Top ? -3 : props.targetPosition == Position$1.Bottom ? gap : 0);
@@ -55640,9 +55766,13 @@ var ReactFlowContainer = (props) => {
 					i18n: props.i18n,
 					children: /* @__PURE__ */ jsx(TooltipProvider, {
 						delay: 300,
-						children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(HandleContextProvider, {
-							Handle: Handle$1,
-							children: /* @__PURE__ */ jsx(ReactFlowContainerInner, { ...props })
+						children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(ConnectionRoutesProvider, {
+							direction: props.direction,
+							routes$: props.connectionRoutes$,
+							children: /* @__PURE__ */ jsx(HandleContextProvider, {
+								Handle: Handle$1,
+								children: /* @__PURE__ */ jsx(ReactFlowContainerInner, { ...props })
+							})
 						}) })
 					})
 				})
@@ -55894,7 +56024,11 @@ var ReactFlowContainerInner = (props) => {
 	]);
 	useLayoutEffect(() => {
 		setLayoutReady(props.layoutMotion !== false || props.onLayoutMeasured == null);
-	}, [props.layoutMotion, props.onLayoutMeasured]);
+	}, [
+		props.layoutMotion,
+		props.onLayoutMeasured,
+		props.layoutRequest
+	]);
 	useEffect(() => {
 		let active = true;
 		let measurementFrame = 0;
@@ -55941,6 +56075,7 @@ var ReactFlowContainerInner = (props) => {
 		onBeforeFitView,
 		props.layoutMotion,
 		props.onLayoutMeasured,
+		props.layoutRequest,
 		props.direction,
 		rf,
 		updateNodeInternals
@@ -56366,6 +56501,7 @@ function tooShort(from, to) {
 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 layoutRequest = useVal(flowCanvasStore.layoutRequest);
 	const changingDirection = useVal(flowCanvasStore.$.changingDirection);
 	const nodeMiniMapPhase = useVal(flowCanvasStore.$.nodeMiniMapPhase);
 	useEffect(flowCanvasStore.setupForceDelete, []);
@@ -56399,12 +56535,14 @@ var FlowCanvas = ({ flowCanvasStore, annotationContext, onActivateSelection, onS
 						fitView: fitView ?? !editable,
 						fitViewOptions,
 						layoutMotion,
+						layoutRequest,
 						nodeTypes: NODE_TYPES,
 						edgeTypes: EDGE_TYPES,
 						miniMapExpanded$: flowCanvasStore.$$.miniMapExpanded,
 						interactiveMode$: flowCanvasStore.$$.interactiveMode,
 						nodes$: flowCanvasStore.$.rfNodes,
 						edges$: flowCanvasStore.$.rfEdges,
+						connectionRoutes$: flowCanvasStore.exportRoutes,
 						viewport$: flowCanvasStore.$$.viewport,
 						onRequestAddNode,
 						addNodeRequest,
@@ -56449,6 +56587,7 @@ function callbacksFromProps(props) {
 		onChangeDirection: props.onChangeDirection,
 		onAddNode: props.onAddNode,
 		onMoveNodes: props.onMoveNodes,
+		onInitialLayout: props.onInitialLayout,
 		onChangeNodeContentHidden: props.onChangeNodeContentHidden,
 		onChangeNodeWidth: props.onChangeNodeWidth,
 		onChangeComment: props.onChangeComment,
@@ -56469,6 +56608,10 @@ function FlowCanvasView(props) {
 		defaultMiniMapExpanded: props.defaultMiniMapExpanded
 	}), [props.identity]);
 	const previousStore = useRef(store);
+	const previousLayoutRequest = useRef({
+		store,
+		requested: props.autoLayout
+	});
 	const propsRef = useRef(props);
 	const selectedEdge = useRef();
 	propsRef.current = props;
@@ -56536,6 +56679,14 @@ function FlowCanvasView(props) {
 		props.selectedNodeIds,
 		props.ignoredNodeIds
 	]);
+	useLayoutEffect(() => {
+		const previous = previousLayoutRequest.current;
+		previousLayoutRequest.current = {
+			store,
+			requested: props.autoLayout
+		};
+		if (previous.store === store && !previous.requested && props.autoLayout) store.requestLayout();
+	}, [store, props.autoLayout]);
 	useEffect(() => {
 		if (props.focusNodeRequest != null) {
 			const reducedMotion = typeof window != "undefined" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -60475,6 +60626,7 @@ function schemaEqualsChecker(extendsContext) {
 		if (value1 === null || value2 === null) return false;
 		if (typeof value1 !== "object") return false;
 		if (typeof value1 !== typeof value2) return false;
+		if (extendsContext.isExtendsSchema(value1) || extendsContext.isExtendsSchema(value2)) return extendsContext.equals(value1, value2);
 		if (isCompiledSchema(value1) && isCompiledSchema(value2)) return isCompiledSchemaEquals(value1, value2);
 		return isObjectLikeEquals(value1, value2);
 	}
@@ -61197,10 +61349,17 @@ var SingleSelectSchema = class SingleSelectSchema extends SpecialSchema {
 	}
 	constructor(id, value, context) {
 		if (!SingleSelectSchema.isMatch(value)) throw new TypeError("Invalid single-select schema.");
-		super(id, value, context);
+		const validator = new Validator(structuredClone(value), "7");
+		super(id, { enum: value.enum.filter((item) => validator.validate(item).valid) }, context);
 	}
 	compareImpl(other) {
-		if (isStringLikeSchema(other)) return [ExpressionSingleResult.ContainedBy];
+		if (this.value.enum.length == 0) return [(other instanceof SingleSelectSchema ? other.value.enum.length == 0 : isCompiledSchema(other) && getKind(other) === CompiledKind.Never) ? ExpressionSingleResult.Equals : ExpressionSingleResult.ContainedBy];
+		if (isStringLikeSchema(other)) {
+			const validator = new Validator(structuredClone(other), "7");
+			const accepted = this.value.enum.filter((item) => validator.validate(item).valid).length;
+			if (accepted == this.value.enum.length) return [ExpressionSingleResult.ContainedBy];
+			return [accepted == 0 ? ExpressionSingleResult.Rejection : ExpressionSingleResult.Intersection];
+		}
 		if (other instanceof SingleSelectSchema) {
 			const f = new Set(this.value.enum);
 			let result = ExpressionSingleResult.Equals;
@@ -65461,7 +65620,10 @@ function workflowAgentTool(id, name, target, previous) {
 		id,
 		description: previous?.description ?? target.name,
 		approval: previous?.approval ?? false,
-		inputs: capability.inputs.map((port) => Object.assign({}, port, { source: previous?.inputs.find((old) => old.handle == port.handle)?.source ?? { kind: "model" } }))
+		inputs: capability.inputs.map((input) => {
+			const { value: _value, ...port } = input;
+			return Object.assign({}, port, { source: previous?.inputs.find((old) => old.handle == port.handle)?.source ?? { kind: "model" } });
+		})
 	};
 }
 //#endregion
@@ -66576,9 +66738,8 @@ function projectEdges(graph, nodeIds) {
 		edges
 	};
 }
-function layoutNodes(nodeIds, dependencies, dependents) {
+function orderNodes(nodeIds, dependencies, dependents) {
 	const indegree = new Map([...dependencies].map(([nodeId, sources]) => [nodeId, sources.size]));
-	const depth = /* @__PURE__ */ new Map();
 	const ordered = [];
 	const orderedIds = /* @__PURE__ */ new Set();
 	const ready = [...indegree].filter(([, count]) => count == 0).map(([nodeId]) => nodeId).toSorted();
@@ -66586,23 +66747,14 @@ function layoutNodes(nodeIds, dependencies, dependents) {
 		const nodeId = ready[cursor];
 		ordered.push(nodeId);
 		orderedIds.add(nodeId);
-		const nextDepth = (depth.get(nodeId) ?? 0) + 1;
 		for (const targetId of [...dependents.get(nodeId)].toSorted()) {
-			depth.set(targetId, Math.max(depth.get(targetId) ?? 0, nextDepth));
 			const count = indegree.get(targetId) - 1;
 			indegree.set(targetId, count);
 			if (count == 0) ready.push(targetId);
 		}
 	}
-	const cycleDepth = Math.max(0, ...depth.values()) + 1;
-	for (const nodeId of [...nodeIds].filter((candidate) => !orderedIds.has(candidate)).toSorted()) {
-		depth.set(nodeId, cycleDepth);
-		ordered.push(nodeId);
-	}
-	return {
-		depth,
-		ordered
-	};
+	for (const nodeId of [...nodeIds].filter((candidate) => !orderedIds.has(candidate)).toSorted()) ordered.push(nodeId);
+	return ordered;
 }
 function designerInputs(nodeId, node, ports, revision) {
 	if (isTriggerNode(node)) return [];
@@ -66799,6 +66951,7 @@ function designerGraph(draft, presentation = {}, diagnostics = [], connectorActi
 	const graph = revision == null ? void 0 : revision.graph();
 	if (revision == null || graph == null) return {
 		edges: [],
+		needsLayout: false,
 		nodes: [],
 		viewport: {
 			x: 0,
@@ -66812,7 +66965,7 @@ function designerGraph(draft, presentation = {}, diagnostics = [], connectorActi
 	const nodeIds = new Set(entries.map(([nodeId]) => nodeId));
 	const ports = new Map([...definitions].map(([nodeId, node]) => [nodeId, nodePorts(node, revision)]));
 	const edgeProjection = projectEdges(graph, nodeIds);
-	const layout = layoutNodes(nodeIds, edgeProjection.dependencies, edgeProjection.dependents);
+	const ordered = orderNodes(nodeIds, edgeProjection.dependencies, edgeProjection.dependents);
 	const direction = savedDirection(presentation);
 	const positions = savedPositions(presentation);
 	const hiddenNodeContent = savedHiddenNodeContent(presentation);
@@ -66827,33 +66980,21 @@ function designerGraph(draft, presentation = {}, diagnostics = [], connectorActi
 		runNodes: projectedRun.nodes,
 		t
 	};
-	const rows = /* @__PURE__ */ new Map();
-	const defaultNodes = layout.ordered.map((nodeId) => {
-		const column = layout.depth.get(nodeId) ?? 0;
-		const row = rows.get(column) ?? 0;
-		rows.set(column, row + 1);
-		return direction === "vertical" ? {
-			id: nodeId,
-			column,
-			x: 80 + row * 400,
-			y: 80 + column * 240,
-			width: 320,
-			height: 160
-		} : {
+	const defaultNodes = ordered.every((nodeId) => positions[nodeId] != null) ? [] : graphLayout(ordered.map((nodeId) => {
+		const { kind } = definitions.get(nodeId);
+		return {
 			id: nodeId,
-			column,
-			x: 80 + column * 500,
-			y: 80 + row * 240,
-			width: 420,
-			height: 240
+			width: direction === "vertical" ? 320 : 420,
+			height: direction === "vertical" ? 160 : 240,
+			branchHandles: kind === "condition" || kind === "approval" || kind === "wait" ? [...ports.get(nodeId).outputs.keys()].map((handle) => "$branch:" + handle) : void 0
 		};
-	});
+	}), edgeProjection.edges, direction).nodes;
 	const automaticPositions = direction === "horizontal" ? wrapLayout(defaultNodes) : Object.fromEntries(defaultNodes.map(({ id, x, y }) => [id, {
 		x,
 		y
 	}]));
 	const nodes = [];
-	for (const nodeId of layout.ordered) {
+	for (const nodeId of ordered) {
 		const position = positions[nodeId] ?? automaticPositions[nodeId];
 		const resolved = definitions.get(nodeId);
 		if (resolved.kind == "trigger") {
@@ -66881,6 +67022,7 @@ function designerGraph(draft, presentation = {}, diagnostics = [], connectorActi
 	return {
 		direction,
 		edges: edgeProjection.edges,
+		needsLayout: nodes.length > 0 && nodes.every((node) => positions[node.id] == null),
 		nodes,
 		...projectedRun.status == null ? {} : { runStatus: projectedRun.status },
 		viewport: savedViewport(presentation)
@@ -120445,6 +120587,15 @@ function changeRevisionCanvasSession(session, graphId, change) {
 	const previous = session[graphId];
 	let next;
 	switch (change.kind) {
+		case "initialize":
+			next = {
+				...previous,
+				initialLayout: previous?.initialLayout ?? {
+					direction: change.direction,
+					positions: change.positions
+				}
+			};
+			break;
 		case "move":
 			next = {
 				...previous,
@@ -120579,19 +120730,32 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, defaultI
 		return baseline.nodes.filter((node) => ids.has(node.id)).map((node) => node.id);
 	});
 	const session = sessions[graphId];
+	const needsInitialLayout = baseline.needsLayout && session?.initialLayout == null;
 	const model = useMemo(() => ({
 		...baseline,
-		direction: session?.direction ?? baseline.direction,
+		direction: session?.direction ?? session?.initialLayout?.direction ?? baseline.direction,
 		viewport: session?.viewport ?? baseline.viewport,
 		nodes: baseline.nodes.map((node) => ({
 			...node,
-			position: session?.positions?.[node.id] ?? node.position
+			position: session?.positions?.[node.id] ?? session?.initialLayout?.positions[node.id] ?? node.position
 		}))
 	}), [baseline, session]);
-	const layoutChanged = model.direction !== baseline.direction || baseline.nodes.some((node) => {
+	const layoutChanged = model.direction !== (session?.initialLayout?.direction ?? baseline.direction) || baseline.nodes.some((node) => {
 		const position = session?.positions?.[node.id];
-		return position != null && (position.x !== node.position.x || position.y !== node.position.y);
+		const original = session?.initialLayout?.positions[node.id] ?? node.position;
+		return position != null && (position.x !== original.x || position.y !== original.y);
 	});
+	const changeLayout = (positions, direction) => {
+		const change = direction == null ? {
+			kind: "move",
+			positions
+		} : {
+			kind: "direction",
+			positions,
+			direction
+		};
+		setSessions((current) => changeRevisionCanvasSession(current, graphId, change));
+	};
 	const selection = selected.length === 1 ? revision.node(selected[0]) : void 0;
 	const selectedNode = selected.length === 1 ? model.nodes.find((node) => node.id === selected[0]) : void 0;
 	const panelTitle = selectedNode?.title ?? (selected.length > 1 ? t("inspector.multipleSelected", { count: selected.length }) : t("inspector.outline"));
@@ -120623,6 +120787,7 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, defaultI
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "revision-viewer-canvas",
 				children: [/* @__PURE__ */ jsx(FlowCanvasView, {
+					autoLayout: needsInitialLayout,
 					identity: graphId,
 					model,
 					editable: false,
@@ -120640,16 +120805,14 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, defaultI
 					selectedNodeIds: selected,
 					ignoredNodeIds: [],
 					focusNodeRequest: focus,
-					onMoveNodes: (positions) => setSessions((current) => changeRevisionCanvasSession(current, graphId, {
-						kind: "move",
-						positions
+					onMoveNodes: changeLayout,
+					onInitialLayout: (layout) => setSessions((current) => changeRevisionCanvasSession(current, graphId, {
+						kind: "initialize",
+						direction: layout?.direction ?? canvasDirection(baseline.direction),
+						positions: layout?.positions ?? Object.fromEntries(baseline.nodes.map((node) => [node.id, node.position]))
 					})),
 					onChangeDirection: (direction, positions) => {
-						setSessions((current) => changeRevisionCanvasSession(current, graphId, {
-							kind: "direction",
-							direction,
-							positions
-						}));
+						changeLayout(positions, direction);
 						return true;
 					},
 					onMoveViewport: (viewport) => setSessions((current) => changeRevisionCanvasSession(current, graphId, {

package/dist/browser/workbench.js

@@ -1,9 +1,9 @@
-import { A as DropdownMenuItem, C as IconifyProvider, E as DropdownMenu, O as DropdownMenuContent, P as DropdownMenuSeparator, R as DropdownMenuTrigger, c as PopoverContent, f as PopoverTitle, ht as IconThemeContext, p as PopoverTrigger, pt as ProviderIconCacheContext, s as Popover, v as ContentIcon } from "./wrapLayout-DU5HG1qH.js";
+import { A as DropdownMenuContent, B as DropdownMenuTrigger, I as DropdownMenuSeparator, M as DropdownMenuItem, O as DropdownMenu, T as IconifyProvider, _t as IconThemeContext, b as ContentIcon, h as PopoverTrigger, ht as ProviderIconCacheContext, l as Popover, m as PopoverTitle, u as PopoverContent } from "./wrapLayout-ZOG4AikN.js";
 import { a as derive, i as compute, l as val } from "./dist-bO8nvHFH.js";
 import { c as useLang, l as useTranslate, o as I18nProvider, u as useVal } from "./dist-BFmpkX4P.js";
 import { Cr as cn, i as TooltipTrigger, n as TooltipContent, t as Tooltip, xr as Button } from "./tooltip-BZ6tpqnr.js";
-import { Bt as schemaObject, C as upgradeManualTrigger, Dt as connectorProxyTask, M as mapConditionSources, N as nodeInputMappings, Rt as matchesSchema, S as resourceNameIssue, Yt as dequal, _ as applyFlowChanges, a as DialogFooter, bt as connectorProxyConfigSchema, d as Field, g as FlowChangeError, h as FieldLabel, hn as Input, i as DialogDescription, l as Icon, m as FieldGroup, o as DialogHeader, p as FieldError, r as DialogContent, s as DialogTitle, t as Dialog, u as Spinner, v as isTriggerNode, w as upgradeRevisionContent } from "./dialog-Bi-MVTGj.js";
-import { $ as resourceValue, $n as allConnectorConnectionsQuery, $t as WorkflowExportDialog, At as actionWithConnections, Bn as EmptyMedia, Br as ApiError, Bt as setNodeContentHidden, C as updateValue, Ct as flowResourceReferences, Et as diagnosticItems, Fn as InputGroupInput, Ft as removeComments, Gt as setCodeActions, Hn as Badge, Ht as setVerticalNodeWidth, In as Empty, It as restoreCanvasPresentation, J as scopedValue, Jt as setServiceConnections, K as combineSources, Kn as createI18n, Kt as setConnectorConnection, Ln as EmptyContent, Lt as setCanvasLayout, Mn as followWorkbenchLink, Mt as canvasPresentationChange, Nn as InputGroup, Nt as commentIds, Pn as InputGroupAddon, Pr as workflowCandidate, Pt as flowPresentation, Q as resourceData, Qn as randomId, Qt as WorkflowBundleSummary, Rn as EmptyDescription, Rr as invalidResponse, Rt as setComment, S as updateTriggerConfig, St as revisionView, Tt as deriveInspectorDiagnostics, U as addNodeIntent, Un as EventSourcesPage, Ut as repairNodeNames, Vn as EmptyTitle, Vr as controlErrorCode, Vt as setNodePositions, W as deriveAddNodeOptions, Wt as resetInputValues, X as CacheResource, Xn as WorkbenchClient, Xt as updateTriggerSchedule, Y as connectorActionPresentation, Yn as errorNotice, Yt as updateStartInputDefs, Zn as normalizeFlowQuery, Zt as dequal$1, _ as updateRequestParameters, _r as workflowBundleFromPreview, a as nameCreatedNodes, an as FlowTagChips, at as getActionsCache, b as updateTaskAdditionalInputs, br as workflowNameFromFile, c as setInputVariable, cr as normalizeTriggerOutputs, ct as getProvidersCache, d as updateCondition, en as WorkflowExportMenuItem, et as action, f as updateNodeDescription, fr as isJsonValue, ft as designerGraph, g as updateOutputPorts, gr as parseWorkflowImportFile, h as updateNodeSettings, hr as encodeWorkflowBundle, i as deleteSelection, in as FlowSettingsDialog, jn as useFlowQuery, jt as connectionCatalog, l as setTriggerConnection, lr as sampleErrorOutputs, lt as createPersistentCache, m as updateNodeName, mr as connectorActionMetadata, nn as IdTooltip, nt as proxyResponse, o as selectWebhookResponse, on as TagPicker, p as updateNodeIcon, pr as connection, qt as setInputSources, r as applyFlowChanges$1, rt as validateAction, s as setInputValue, st as getConnectionsCache, t as addNode, tn as useWorkflowExportAction, tr as decodeTriggerCatalog, tt as provider, u as setTriggerEventSource, ur as triggerOutputDefinitions, ut as createSessionCache, v as updateResolution, vr as encodeWorkflowFile, vt as providerIcon, w as updateWebhook, wt as Latest, x as updateTaskPorts, y as updateTask, yr as workflowFileName, yt as RunStore, zn as EmptyHeader, zr as record, zt as setFlowViewport } from "./flowChanges-SKYJBr6X.js";
+import { Bt as schemaObject, C as upgradeManualTrigger, Dt as connectorProxyTask, M as mapConditionSources, N as nodeInputMappings, Rt as matchesSchema, S as resourceNameIssue, Yt as dequal, _ as applyFlowChanges, a as DialogFooter, bt as connectorProxyConfigSchema, d as Field, g as FlowChangeError, h as FieldLabel, hn as Input, i as DialogDescription, l as Icon, m as FieldGroup, o as DialogHeader, p as FieldError, r as DialogContent, s as DialogTitle, t as Dialog, u as Spinner, v as isTriggerNode, w as upgradeRevisionContent } from "./dialog-E1WkapJU.js";
+import { $ as resourceValue, $n as allConnectorConnectionsQuery, $t as WorkflowExportDialog, At as actionWithConnections, Bn as EmptyMedia, Br as ApiError, Bt as setNodeContentHidden, C as updateValue, Ct as flowResourceReferences, Et as diagnosticItems, Fn as InputGroupInput, Ft as removeComments, Gt as setCodeActions, Hn as Badge, Ht as setVerticalNodeWidth, In as Empty, It as restoreCanvasPresentation, J as scopedValue, Jt as setServiceConnections, K as combineSources, Kn as createI18n, Kt as setConnectorConnection, Ln as EmptyContent, Lt as setCanvasLayout, Mn as followWorkbenchLink, Mt as canvasPresentationChange, Nn as InputGroup, Nt as commentIds, Pn as InputGroupAddon, Pr as workflowCandidate, Pt as flowPresentation, Q as resourceData, Qn as randomId, Qt as WorkflowBundleSummary, Rn as EmptyDescription, Rr as invalidResponse, Rt as setComment, S as updateTriggerConfig, St as revisionView, Tt as deriveInspectorDiagnostics, U as addNodeIntent, Un as EventSourcesPage, Ut as repairNodeNames, Vn as EmptyTitle, Vr as controlErrorCode, Vt as setNodePositions, W as deriveAddNodeOptions, Wt as resetInputValues, X as CacheResource, Xn as WorkbenchClient, Xt as updateTriggerSchedule, Y as connectorActionPresentation, Yn as errorNotice, Yt as updateStartInputDefs, Zn as normalizeFlowQuery, Zt as dequal$1, _ as updateRequestParameters, _r as workflowBundleFromPreview, a as nameCreatedNodes, an as FlowTagChips, at as getActionsCache, b as updateTaskAdditionalInputs, br as workflowNameFromFile, c as setInputVariable, cr as normalizeTriggerOutputs, ct as getProvidersCache, d as updateCondition, en as WorkflowExportMenuItem, et as action, f as updateNodeDescription, fr as isJsonValue, ft as designerGraph, g as updateOutputPorts, gr as parseWorkflowImportFile, h as updateNodeSettings, hr as encodeWorkflowBundle, i as deleteSelection, in as FlowSettingsDialog, jn as useFlowQuery, jt as connectionCatalog, l as setTriggerConnection, lr as sampleErrorOutputs, lt as createPersistentCache, m as updateNodeName, mr as connectorActionMetadata, nn as IdTooltip, nt as proxyResponse, o as selectWebhookResponse, on as TagPicker, p as updateNodeIcon, pr as connection, qt as setInputSources, r as applyFlowChanges$1, rt as validateAction, s as setInputValue, st as getConnectionsCache, t as addNode, tn as useWorkflowExportAction, tr as decodeTriggerCatalog, tt as provider, u as setTriggerEventSource, ur as triggerOutputDefinitions, ut as createSessionCache, v as updateResolution, vr as encodeWorkflowFile, vt as providerIcon, w as updateWebhook, wt as Latest, x as updateTaskPorts, y as updateTask, yr as workflowFileName, yt as RunStore, zn as EmptyHeader, zr as record, zt as setFlowViewport } from "./flowChanges-DsLZdENA.js";
 import { a as uiLanguages, i as uiLanguageNames, n as isUiLanguage, r as resolveUiLanguage, t as importedWorkflowName } from "./languages-gYzoQqCi.js";
 import { i as objectValue, n as isJsonValue$1, s as valueType, t as initialValue } from "./value-BbFQZZ_V.js";
 import { Suspense, forwardRef, lazy, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
@@ -520,7 +520,7 @@ function FlowDeletionDialog({ flow, workspace, container, busy, finalFocus, onCl
 }
 //#endregion
 //#region src/workbench/browser/runtime/shell/resourceBrowser.tsx
-var CreateResourceDialog = lazy(() => import("./createResourceDialog-BstGO0m4.js"));
+var CreateResourceDialog = lazy(() => import("./createResourceDialog-CJbZa2gA.js"));
 var flowIdTooltipAlignOffset = 44;
 var renamePopoverAlignOffset = -12;
 function compactFlowId(flowId) {
@@ -7047,7 +7047,7 @@ var WorkbenchStore = class {
 	async downloadPng(result) {
 		const title = this.workspace.$.flow.value?.name ?? this.workspace.$.flowId.value ?? "Workflow";
 		try {
-			const { downloadPng } = await import("./exportPng-DMsB9ku_.js");
+			const { downloadPng } = await import("./exportPng-c4or5th8.js");
 			downloadPng(result, title);
 			if (!this.#disposed) this.#notice.set({
 				kind: "success",
@@ -7314,7 +7314,7 @@ var WorkbenchStore = class {
 };
 //#endregion
 //#region src/workbench/browser/runtime/openFlowWorkbench.tsx
-var FlowWorkspace = lazy(() => import("./flowWorkspace-4UHRaHcz.js"));
+var FlowWorkspace = lazy(() => import("./flowWorkspace-CxLQWUdj.js"));
 function OpenFlowSessionGate({ action, description, error, onSubmit, onTokenChange, pending = false, title, token, tokenLabel }) {
 	const hasToken = token != null && tokenLabel != null && onTokenChange != null;
 	const tokenValue = token ?? "";

package/dist/browser/{workbenchSelect-CHOeceKA.js → workbenchSelect-BfQfMWuY.js}

@@ -1,5 +1,5 @@
 import { Cr as cn } from "./tooltip-BZ6tpqnr.js";
-import { $t as SelectGroup, Qt as SelectContent, Xt as Select, en as SelectItem, nn as SelectTrigger, rn as SelectValue } from "./dialog-Bi-MVTGj.js";
+import { $t as SelectGroup, Qt as SelectContent, Xt as Select, en as SelectItem, nn as SelectTrigger, rn as SelectValue } from "./dialog-E1WkapJU.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/workbench/browser/runtime/shell/workbenchSelect.tsx
 function WorkbenchSelect({ ariaLabel, className, disabled = false, id, onValueChange, options, portalRoot, size, value, variant }) {