@oomol-lab/open-flow 0.1.0-beta.77 → 0.1.0-beta.78

package/dist/browser/{FlowCanvas-BNGDMaWr.js → FlowCanvas-BQGBcfoL.js}

@@ -1,8 +1,8 @@
 import { o as __toESM, t as __commonJSMin } from "./rolldown-runtime-CEgmsyvS.js";
-import { $ as ko_default, B as MenuPopup, C as DropdownMenuContent, D as DropdownMenuRadioGroup, E as DropdownMenuLabel, F as findRootOwnerId, G as MenuRootContext, H as MenuGroup, J as waitBranchDescription, K as useMenuRootContext, L as MenuRoot, N as DropdownMenuTrigger, O as DropdownMenuRadioItem, Q as ru_default, R as MenuPositioner, S as DropdownMenuCheckboxItem, T as DropdownMenuItem, U as ContextMenuRootContext, V as MenuItem, W as useContextMenuRootContext, X as zh_TW_default, Z as zh_CN_default, _ as NativeScrollArea, at as Checkbox, d as PopoverContent, et as ja_default, g as PopoverTrigger, h as PopoverTitle, k as DropdownMenuSeparator, l as wrapLayout, nt as en_default, q as uiLocales, rt as I18n, st as IconThemeContext, t as ContentIcon, tt as fr_default, u as Popover, v as ScrollArea, w as DropdownMenuGroup, x as DropdownMenu, z as MenuPortal } from "./ContentIcon-VZQO8VZU.js";
+import { $ as zh_CN_default, A as DropdownMenuSeparator, B as MenuPositioner, C as DropdownMenuCheckboxItem, D as DropdownMenuLabel, E as DropdownMenuItem, F as isElementDisabled, G as ContextMenuRootContext, H as MenuPopup, I as findRootOwnerId, J as useMenuRootContext, K as useContextMenuRootContext, L as CompositeItem, O as DropdownMenuRadioGroup, P as DropdownMenuTrigger, Q as zh_TW_default, S as DropdownMenu, T as DropdownMenuGroup, U as MenuItem, V as MenuPortal, W as MenuGroup, X as waitBranchDescription, Y as uiLocales, _ as PopoverTrigger, at as I18n, ct as useAriaLabelledBy, d as Popover, et as ru_default, f as PopoverContent, g as PopoverTitle, it as en_default, k as DropdownMenuRadioItem, l as wrapLayout, lt as useFieldItemContext, nt as ja_default, q as MenuRootContext, rt as fr_default, st as Checkbox, t as ContentIcon, tt as ko_default, u as canvasDirection, ut as IconThemeContext, v as NativeScrollArea, w as DropdownMenuContent, y as ScrollArea, z as MenuRoot } from "./ContentIcon-CMn0c-kl.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 strictObject, Cr as clsx, E as number, En as getTarget, Hn as createChangeEventDetails, Jt as addEventListener, Nn as createLucideIcon, Tn as contains, Wn as cancelOpen, b as discriminatedUnion, en as require_with_selector, i as TooltipTrigger, j as string, jn as ownerDocument, n as TooltipContent, on as useTimeout, or as triggerPress, p as timeZoneOffsetMinutes, pr as useId$1, pt as pressableTriggerOpenStateMapping, r as TooltipProvider, t as Tooltip, w as literal, wr as useRenderElement, xn as stopEvent$1, xr as cn$1, yr as Button } from "./tooltip-BAWSUexx.js";
+import { A as string, B as ARROW_LEFT, Bn as transitionStatusMapping, C as literal, Cr as cn$1, Dn as getTarget, Dr as EMPTY_ARRAY$1, En as contains, Er as useRenderElement, Fn as createLucideIcon, Fr as formatErrorMessage, G as HORIZONTAL_KEYS, H as ARROW_UP, J as SHIFT, K as HORIZONTAL_KEYS_WITH_EXTRA_KEYS, Kn as cancelOpen, L as ALL_KEYS, Lr as useIsoLayoutEffect, Mn as ownerDocument, Mr as useButton, Nn as useLabelableId, Nr as CompositeRootContext, Or as EMPTY_OBJECT, Q as scrollIntoViewIfNeeded, R as ARROW_DOWN, Sn as stopEvent$1, T as number, Tr as clsx, Un as useValueChanged, V as ARROW_RIGHT, Wn as createChangeEventDetails, X as VERTICAL_KEYS_WITH_EXTRA_KEYS, Y as VERTICAL_KEYS, Yt as addEventListener, Z as isNativeInput, _n as getMaxListIndex, _r as fieldValidityMapping, bn as isListIndexDisabled, br as useControlled, cr as triggerPress, ct as CompositeList, dr as useFormContext, fn as createGridCellMap, fr as useRegisterFieldControl, gn as getGridNavigatedIndex, gt as serializeValue, hn as getGridCellIndices, hr as useId$1, i as TooltipTrigger, jr as useMergedRefs, k as strictObject, kr as NOOP, mn as getGridCellIndexOfCorner, mr as useBaseUiId, n as TooltipContent, p as timeZoneOffsetMinutes, pn as findNonDisabledListIndex, pr as useFieldRootContext, pt as pressableTriggerOpenStateMapping, q as MODIFIER_KEYS$1, r as TooltipProvider, rr as none$1, sn as useTimeout, st as useDirection, t as Tooltip, tn as require_with_selector, ur as useLabelableContext, vn as getMinListIndex, vr as visuallyHidden, xr as Button, y as discriminatedUnion, yn as isIndexOutOfListBounds, yr as visuallyHiddenInput, z as ARROW_KEYS, zr as useStableCallback } from "./tooltip-BDcVTNpu.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";
@@ -20,6 +20,19 @@ var Zap = createLucideIcon("Zap", [["path", {
 	key: "1xq2db"
 }]]);
 //#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/fieldset/root/FieldsetRootContext.js
+var FieldsetRootContext = /*#__PURE__*/ React.createContext({
+	legendId: void 0,
+	setLegendId: () => {},
+	disabled: void 0
+});
+if (process.env.NODE_ENV !== "production") FieldsetRootContext.displayName = "FieldsetRootContext";
+function useFieldsetRootContext(optional = false) {
+	const context = React.useContext(FieldsetRootContext);
+	if (!context && !optional) throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: FieldsetRootContext is missing. Fieldset parts must be placed within <Fieldset.Root>." : formatErrorMessage(86));
+	return context;
+}
+//#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, {
@@ -2549,6 +2562,13 @@ var NODE_TYPE = /* @__PURE__ */ function(NODE_TYPE) {
 //#endregion
 //#region src/canvas/browser/base/canvas.ts
 var CANVAS_CLASSNAME = "open-flow-canvas";
+function minimumCanvasCardWidth(direction, branchCount) {
+	return direction === "vertical" && branchCount > 0 ? Math.max(320, branchCount * 96 + (branchCount - 1) * 6 + 16 + 2) : 320;
+}
+function canvasCardWidth(direction, branchCount, preferredWidth) {
+	const minimum = minimumCanvasCardWidth(direction, branchCount);
+	return direction === "vertical" && preferredWidth != null && Number.isFinite(preferredWidth) ? Math.max(minimum, preferredWidth) : minimum;
+}
 /** Marks an area that React Flow can drag. */
 var NODE_HANDLE_CLASSNAME = "open-flow-canvas-node-handle";
 var DEFAULT_POSITION = /* @__PURE__ */ Object.freeze({
@@ -2701,7 +2721,7 @@ function createNodeInteraction(initial) {
 }
 //#endregion
 //#region src/canvas/browser/stores/node/commentNode.store.ts
-var minimumSize = {
+var COMMENT_MINIMUM_SIZE = {
 	width: 350,
 	height: 160
 };
@@ -2719,8 +2739,8 @@ var CommentNodeStore = class CommentNodeStore {
 		this.nodeType = NODE_TYPE.CommentNode;
 		this.resize = ({ width, height }) => {
 			this.$$.size.set({
-				width: Math.max(minimumSize.width, width),
-				height: Math.max(minimumSize.height, height)
+				width: Math.max(COMMENT_MINIMUM_SIZE.width, width),
+				height: Math.max(COMMENT_MINIMUM_SIZE.height, height)
 			});
 		};
 		this.togglePreview = () => {
@@ -3142,9 +3162,16 @@ var FLOW_RUN_STATUS = /* @__PURE__ */ function(FLOW_RUN_STATUS) {
 //#endregion
 //#region src/canvas/browser/stores/canvas/canvas.store.ts
 var CanvasStore = class {
+	get canChangeDirection() {
+		return this.#callbacks.onChangeDirection != null;
+	}
 	get canChangeNodeContentHidden() {
 		return this.#callbacks.onChangeNodeContentHidden != null;
 	}
+	get canChangeNodeWidth() {
+		return this.#callbacks.onChangeNodeWidth != null;
+	}
+	#modelDirection;
 	#connections;
 	#callbacks;
 	#entries;
@@ -3160,32 +3187,54 @@ var CanvasStore = class {
 		this.ignoreNodes = (nodeIds, ignored) => {
 			if (this.$.editable.value) this.#callbacks.onIgnoreNodes?.(nodeIds, ignored);
 		};
+		this.changeDirection = (direction) => {
+			if (!this.$.editable.value || !this.canChangeDirection || this.$.changingDirection.value || this.$.direction.value === direction) return;
+			this.layoutComplete = false;
+			this.layoutMeasurementAttempts = 0;
+			this.$$.changingDirection.set(true);
+			this.$$.direction.set(direction);
+		};
+		this.changeNodeWidth = async (nodeId, width, position) => {
+			const node = this.$.nodes.get(nodeId);
+			if (!this.$.editable.value || this.$.changingDirection.value || this.$.direction.value !== "vertical" || node?.content$.value.kind !== "condition") return false;
+			try {
+				return await this.#callbacks.onChangeNodeWidth?.(nodeId, width, position) ?? false;
+			} catch (error) {
+				console.error("Failed to save node width.", error);
+				return false;
+			}
+		};
 		this.changeNodeContentHidden = (nodeId, hidden) => {
 			if (this.$.editable.value) this.#callbacks.onChangeNodeContentHidden?.(nodeId, hidden);
 		};
 		this.disposed = false;
 		this.layoutMeasurementAttempts = 0;
+		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.completeLayout = (availableWidth) => {
-			if (this.layoutComplete) return true;
+			if (this.disposed || this.layoutComplete) return true;
 			const nodes = this.allLayoutNodes();
-			if (nodes.length === 0) return true;
+			if (nodes.length === 0 && !this.$.changingDirection.value) return true;
 			for (const node of nodes) {
 				const measured = node.$.measured.value;
 				if (!measured?.width || !measured.height) {
 					if (this.layoutMeasurementAttempts++ < 5) return false;
 					this.layoutMeasurementAttempts = 0;
 					this.layoutComplete = true;
+					this.#restoreDirection();
 					return true;
 				}
 			}
-			this.doRelayout(availableWidth);
+			const positions = this.layoutPositions(nodes, availableWidth);
+			this.applyPositions(positions);
 			this.layoutMeasurementAttempts = 0;
 			this.layoutComplete = true;
+			if (this.$.changingDirection.value) this.#saveDirection(positions);
+			else this.#callbacks.onMoveNodes(positions);
 			return "relayout";
 		};
 		this.onBeforeDelete = async () => this.$.editable.value;
@@ -3216,6 +3265,7 @@ var CanvasStore = class {
 			});
 		};
 		this.onRelayout = (availableWidth) => {
+			if (this.$.changingDirection.value) return;
 			try {
 				this.doRelayout(availableWidth);
 			} catch (e) {
@@ -3328,6 +3378,8 @@ var CanvasStore = class {
 			miniMapExpanded: this.dispose.add(val()),
 			viewport,
 			interactiveMode: interactiveMode$ ?? this.dispose.add(val("touchpad")),
+			direction: this.dispose.add(val(canvasDirection(model.direction))),
+			changingDirection: this.dispose.add(val(false)),
 			nodes,
 			commentNodes
 		};
@@ -3353,6 +3405,22 @@ var CanvasStore = class {
 		};
 		this.#syncModel(model);
 	}
+	async #saveDirection(positions) {
+		try {
+			if (!await this.#callbacks.onChangeDirection?.(this.$.direction.value, positions) && !this.disposed) this.#restoreDirection();
+		} catch (error) {
+			if (!this.disposed) this.#restoreDirection();
+			console.error("Failed to save canvas direction.", error);
+		} finally {
+			if (!this.disposed) this.$$.changingDirection.set(false);
+		}
+	}
+	#restoreDirection() {
+		if (!this.$.changingDirection.value) return;
+		this.$$.direction.set(this.#modelDirection);
+		this.applyPositions(Object.fromEntries(this.#modelPositions));
+		this.$$.changingDirection.set(false);
+	}
 	allLayoutNodes() {
 		return [...this.$.nodes.values()];
 	}
@@ -3378,10 +3446,31 @@ var CanvasStore = class {
 		};
 	}
 	doRelayout(availableWidth) {
-		const nodes = this.allLayoutNodes();
+		const selected = this.$.selectedNodes.value.length > 1 ? this.$.selectedNodes.value : [];
+		const nodes = selected.length > 0 ? selected.filter(NodeStore.is) : this.allLayoutNodes();
+		if (nodes.length === 0) return;
+		let positions = this.layoutPositions(nodes, availableWidth);
+		if (selected.length > 0) {
+			const offsetX = Math.min(...nodes.map((node) => node.$.position.value.x)) - Math.min(...Object.values(positions).map((position) => position.x));
+			const offsetY = Math.min(...nodes.map((node) => node.$.position.value.y)) - Math.min(...Object.values(positions).map((position) => position.y));
+			positions = Object.fromEntries(Object.entries(positions).map(([id, position]) => [id, {
+				x: position.x + offsetX,
+				y: position.y + offsetY
+			}]));
+		}
+		this.applyPositions(positions);
+		this.#callbacks.onMoveNodes(positions);
+	}
+	applyPositions(positions) {
+		for (const node of this.allLayoutNodes()) {
+			const position = positions[node.nodeId];
+			if (position) node.$$.position.set(position);
+		}
+	}
+	layoutPositions(nodes, availableWidth) {
 		const g = new ie.Graph().setDefaultEdgeLabel(() => ({}));
 		g.setGraph({
-			rankdir: "LR",
+			rankdir: this.$.direction.value === "vertical" ? "TB" : "LR",
 			ranksep: 80
 		});
 		const singles = /* @__PURE__ */ new Set();
@@ -3394,13 +3483,34 @@ var CanvasStore = class {
 			});
 		}
 		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]);
-		Oe(g);
-		const positions = wrapLayout(nodes.map((node) => {
+		const constraints = [];
+		const ordering = new ie.Graph();
+		for (const node of nodes) {
+			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);
 			return {
 				id: node.nodeId,
@@ -3410,9 +3520,11 @@ var CanvasStore = class {
 				width,
 				height
 			};
-		}), availableWidth);
-		for (const node of nodes) node.$$.position.set(positions[node.nodeId]);
-		this.#callbacks.onMoveNodes(positions);
+		});
+		return this.$.direction.value === "horizontal" ? wrapLayout(layoutNodes, availableWidth) : Object.fromEntries(layoutNodes.map(({ id, x, y }) => [id, {
+			x,
+			y
+		}]));
 	}
 	doRemoveNodes(nodes) {
 		if (this.disposed || !nodes?.size) return;
@@ -3459,6 +3571,8 @@ var CanvasStore = class {
 		this.#syncSelection(selectedNodeIds);
 	}
 	#syncModel(model) {
+		this.#modelDirection = canvasDirection(model.direction);
+		if (!this.$.changingDirection.value) this.$$.direction.set(this.#modelDirection);
 		const runStatus = model.runStatus == "running" ? FLOW_RUN_STATUS.Running : FLOW_RUN_STATUS.Idle;
 		if (this.#runStatus.value != runStatus) this.#runStatus.set(runStatus);
 		if (this.#modelViewport == null || this.#modelViewport.x != model.viewport.x || this.#modelViewport.y != model.viewport.y || this.#modelViewport.zoom != model.viewport.zoom) {
@@ -10378,7 +10492,7 @@ function useReactFlow() {
 		};
 	}, [viewportInitialized]);
 }
-var selected$1 = (item) => item.selected;
+var selected$2 = (item) => item.selected;
 var win$1 = typeof window !== "undefined" ? window : void 0;
 /**
 * Hook for handling global key events.
@@ -10394,8 +10508,8 @@ function useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }) {
 		if (deleteKeyPressed) {
 			const { edges, nodes } = store.getState();
 			deleteElements({
-				nodes: nodes.filter(selected$1),
-				edges: edges.filter(selected$1)
+				nodes: nodes.filter(selected$2),
+				edges: edges.filter(selected$2)
 			});
 			store.setState({ nodesSelectionActive: false });
 		}
@@ -14583,14 +14697,21 @@ function connectionNodeBounds(node) {
 		height: node.measured.height
 	};
 }
-/** Return connections offset both side turns and horizontal lanes by their endpoint distance. */
+/** Align arrows with their ports and route returns outside both cards. */
 function getConnectionPath({ sourceBounds, targetBounds, ...params }) {
-	const { sourceX, sourceY, targetX, targetY, sourcePosition = Position.Bottom, targetPosition = Position.Top } = params;
-	const reverse = sourcePosition === Position.Left && targetPosition === Position.Right;
-	const horizontal = sourcePosition === Position.Right && targetPosition === Position.Left || reverse;
+	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;
+	const primary = (x, y) => vertical ? y : x;
+	const cross = (x, y) => vertical ? x : y;
+	const sourceX = primary(params.sourceX, params.sourceY);
+	const sourceY = cross(params.sourceX, params.sourceY);
+	const targetX = primary(params.targetX, params.targetY);
+	const targetY = cross(params.targetX, params.targetY);
 	const outputX = reverse ? targetX : sourceX;
 	const inputX = reverse ? sourceX : targetX;
-	if (!horizontal || outputX < inputX) {
+	if (!horizontal && !vertical) {
 		const [path, x, y] = getBezierPath(params);
 		return [
 			path,
@@ -14598,8 +14719,26 @@ function getConnectionPath({ sourceBounds, targetBounds, ...params }) {
 			y
 		];
 	}
-	const outputBounds = reverse ? targetBounds : sourceBounds;
-	const inputBounds = reverse ? sourceBounds : targetBounds;
+	if (outputX < inputX) {
+		const [path, x, y] = vertical ? getSmoothStepPath({
+			...params,
+			borderRadius: 16,
+			offset: Math.min(16, (inputX - outputX) / 4)
+		}) : getBezierPath(params);
+		return [
+			path,
+			x,
+			y
+		];
+	}
+	const axes = (bounds) => bounds && (vertical ? {
+		x: bounds.y,
+		y: bounds.x,
+		width: bounds.height,
+		height: bounds.width
+	} : bounds);
+	const outputBounds = axes(reverse ? targetBounds : sourceBounds);
+	const inputBounds = axes(reverse ? sourceBounds : targetBounds);
 	const outputY = reverse ? targetY : sourceY;
 	const inputY = reverse ? sourceY : targetY;
 	const minimumOffset = 40;
@@ -14643,7 +14782,10 @@ function getConnectionPath({ sourceBounds, targetBounds, ...params }) {
 			x: inputX,
 			y: inputY
 		}
-	].filter((point, index, all) => index === 0 || point.x !== all[index - 1].x || point.y !== all[index - 1].y);
+	].filter((point, index, all) => index === 0 || point.x !== all[index - 1].x || point.y !== all[index - 1].y).map((point) => vertical ? {
+		x: point.y,
+		y: point.x
+	} : point);
 	if (reverse) points.reverse();
 	const radius = 16;
 	let path = `M ${points[0].x} ${points[0].y}`;
@@ -14658,10 +14800,11 @@ 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}`,
-		(left + right) / 2,
-		laneY
+		vertical ? laneY : middle,
+		vertical ? middle : laneY
 	];
 }
 //#endregion
@@ -14769,43 +14912,51 @@ function BasicEdge(props) {
 	] });
 }
 var NodeLayout_module_default = {
-	outerContainer: "NodeLayout_outerContainer_198c4",
-	enter: "NodeLayout_enter_198c4",
-	"node-enter": "NodeLayout_node-enter_198c4",
-	skipOuter: "NodeLayout_skipOuter_198c4",
-	skip: "NodeLayout_skip_198c4",
-	offsetContainer: "NodeLayout_offsetContainer_198c4",
-	container: "NodeLayout_container_198c4",
-	cardContainer: "NodeLayout_cardContainer_198c4",
-	triggerIcon: "NodeLayout_triggerIcon_198c4",
-	compact: "NodeLayout_compact_198c4",
-	executionHead: "NodeLayout_executionHead_198c4",
-	executionBranch: "NodeLayout_executionBranch_198c4",
-	branchRow: "NodeLayout_branchRow_198c4",
-	branchName: "NodeLayout_branchName_198c4",
-	branchRule: "NodeLayout_branchRule_198c4",
-	branchGroup: "NodeLayout_branchGroup_198c4",
-	branchExpression: "NodeLayout_branchExpression_198c4",
-	branchOperandIcon: "NodeLayout_branchOperandIcon_198c4",
-	branchArrow: "NodeLayout_branchArrow_198c4",
-	executionHandle: "NodeLayout_executionHandle_198c4",
-	connected: "NodeLayout_connected_198c4",
-	connecting: "NodeLayout_connecting_198c4",
-	connectionHint: "NodeLayout_connectionHint_198c4",
-	inputHint: "NodeLayout_inputHint_198c4",
-	hintLeaving: "NodeLayout_hintLeaving_198c4",
-	"connection-hint-nudge": "NodeLayout_connection-hint-nudge_198c4",
-	compactContent: "NodeLayout_compactContent_198c4"
+	outerContainer: "NodeLayout_outerContainer_d0397",
+	enter: "NodeLayout_enter_d0397",
+	"node-enter": "NodeLayout_node-enter_d0397",
+	skipOuter: "NodeLayout_skipOuter_d0397",
+	skip: "NodeLayout_skip_d0397",
+	offsetContainer: "NodeLayout_offsetContainer_d0397",
+	container: "NodeLayout_container_d0397",
+	cardContainer: "NodeLayout_cardContainer_d0397",
+	triggerIcon: "NodeLayout_triggerIcon_d0397",
+	compact: "NodeLayout_compact_d0397",
+	executionHead: "NodeLayout_executionHead_d0397",
+	branchList: "NodeLayout_branchList_d0397",
+	branchRow: "NodeLayout_branchRow_d0397",
+	branchContent: "NodeLayout_branchContent_d0397",
+	vertical: "NodeLayout_vertical_d0397",
+	branchRule: "NodeLayout_branchRule_d0397",
+	branchName: "NodeLayout_branchName_d0397",
+	branchArrow: "NodeLayout_branchArrow_d0397",
+	executionHandle: "NodeLayout_executionHandle_d0397",
+	widthResize: "NodeLayout_widthResize_d0397",
+	widthResizeLeft: "NodeLayout_widthResizeLeft_d0397",
+	widthResizeRight: "NodeLayout_widthResizeRight_d0397",
+	branchGroup: "NodeLayout_branchGroup_d0397",
+	branchExpression: "NodeLayout_branchExpression_d0397",
+	branchOperand: "NodeLayout_branchOperand_d0397",
+	branchOperator: "NodeLayout_branchOperator_d0397",
+	branchOperandIcon: "NodeLayout_branchOperandIcon_d0397",
+	connected: "NodeLayout_connected_d0397",
+	connecting: "NodeLayout_connecting_d0397",
+	connectionHint: "NodeLayout_connectionHint_d0397",
+	leftHint: "NodeLayout_leftHint_d0397",
+	topHint: "NodeLayout_topHint_d0397",
+	bottomHint: "NodeLayout_bottomHint_d0397",
+	hintLeaving: "NodeLayout_hintLeaving_d0397",
+	"connection-hint-nudge": "NodeLayout_connection-hint-nudge_d0397",
+	compactContent: "NodeLayout_compactContent_d0397"
 };
 var handle_module_default = {
-	wrapper: "handle_wrapper_6698c",
-	left: "handle_left_6698c",
-	handle: "handle_handle_6698c",
-	right: "handle_right_6698c",
-	active: "handle_active_6698c",
-	hasData: "handle_hasData_6698c",
-	disabled: "handle_disabled_6698c",
-	pointerDown: "handle_pointerDown_6698c"
+	wrapper: "handle_wrapper_c0108",
+	handle: "handle_handle_c0108",
+	left: "handle_left_c0108",
+	right: "handle_right_c0108",
+	top: "handle_top_c0108",
+	bottom: "handle_bottom_c0108",
+	selected: "handle_selected_c0108"
 };
 //#endregion
 //#region src/canvas/browser/components/handle.tsx
@@ -14815,14 +14966,12 @@ function Handle(props) {
 	const Component = context?.Handle ?? HandleImpl;
 	const position = props.position ?? (props.type === "input" ? "left" : "right");
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx(handle_module_default.wrapper, position === "left" ? handle_module_default.left : handle_module_default.right, props.disabled && handle_module_default.disabled, props.onPointerDown && handle_module_default.pointerDown, props.className),
-		onPointerDown: props.onPointerDown,
-		style: props.kind && { ["--bg"]: `var(--edge-${props.kind})` },
+		className: clsx(handle_module_default.wrapper, handle_module_default[position], props.selected && handle_module_default.selected, props.className),
 		children: [/* @__PURE__ */ jsx(Component, {
 			id: props.id,
 			type: props.type === "input" ? "target" : "source",
-			position: position === "left" ? "left" : "right",
-			className: clsx(handle_module_default.handle, props.active && handle_module_default.active, props.hasData && handle_module_default.hasData),
+			position,
+			className: handle_module_default.handle,
 			isConnectable: props.isConnectable,
 			tabIndex: props.tabIndex,
 			"aria-hidden": props.ariaHidden
@@ -14956,12 +15105,11 @@ var useNodeStore = () => {
 	return context;
 };
 var CanvasNode_module_default = {
-	summary: "CanvasNode_summary_f29c7",
-	footer: "CanvasNode_footer_f29c7",
-	interval: "CanvasNode_interval_f29c7",
-	scheduleText: "CanvasNode_scheduleText_f29c7",
-	timezone: "CanvasNode_timezone_f29c7",
-	valueKey: "CanvasNode_valueKey_f29c7"
+	summary: "CanvasNode_summary_27330",
+	interval: "CanvasNode_interval_27330",
+	scheduleText: "CanvasNode_scheduleText_27330",
+	timezone: "CanvasNode_timezone_27330",
+	valueKey: "CanvasNode_valueKey_27330"
 };
 //#endregion
 //#region ../../node_modules/.bun/cronstrue@3.25.0/node_modules/cronstrue/dist/cronstrue.js
@@ -18636,33 +18784,31 @@ function IconStack({ icons, count, limit = 3, size = "default", countClassName }
 	});
 }
 var CanvasCard_module_default = {
-	card: "CanvasCard_card_77a06",
-	value: "CanvasCard_value_77a06",
-	preview: "CanvasCard_preview_77a06",
-	comment: "CanvasCard_comment_77a06",
-	selected: "CanvasCard_selected_77a06",
-	problem: "CanvasCard_problem_77a06",
-	runningBeam: "CanvasCard_runningBeam_77a06",
-	"running-beam": "CanvasCard_running-beam_77a06",
-	header: "CanvasCard_header_77a06",
-	icon: "CanvasCard_icon_77a06",
-	identity: "CanvasCard_identity_77a06",
-	indicator: "CanvasCard_indicator_77a06",
-	warning: "CanvasCard_warning_77a06",
-	danger: "CanvasCard_danger_77a06",
-	content: "CanvasCard_content_77a06",
-	footer: "CanvasCard_footer_77a06",
-	afterPreview: "CanvasCard_afterPreview_77a06",
-	branches: "CanvasCard_branches_77a06",
-	collapse: "CanvasCard_collapse_77a06",
-	collapseInner: "CanvasCard_collapseInner_77a06",
-	compactIdentity: "CanvasCard_compactIdentity_77a06",
-	compact: "CanvasCard_compact_77a06",
-	withBody: "CanvasCard_withBody_77a06",
-	compactContent: "CanvasCard_compactContent_77a06",
-	singleContent: "CanvasCard_singleContent_77a06",
-	subtitle: "CanvasCard_subtitle_77a06",
-	fill: "CanvasCard_fill_77a06"
+	card: "CanvasCard_card_5d8a7",
+	value: "CanvasCard_value_5d8a7",
+	preview: "CanvasCard_preview_5d8a7",
+	comment: "CanvasCard_comment_5d8a7",
+	selected: "CanvasCard_selected_5d8a7",
+	problem: "CanvasCard_problem_5d8a7",
+	runningBeam: "CanvasCard_runningBeam_5d8a7",
+	"running-beam": "CanvasCard_running-beam_5d8a7",
+	header: "CanvasCard_header_5d8a7",
+	icon: "CanvasCard_icon_5d8a7",
+	identity: "CanvasCard_identity_5d8a7",
+	indicator: "CanvasCard_indicator_5d8a7",
+	warning: "CanvasCard_warning_5d8a7",
+	danger: "CanvasCard_danger_5d8a7",
+	content: "CanvasCard_content_5d8a7",
+	branches: "CanvasCard_branches_5d8a7",
+	collapse: "CanvasCard_collapse_5d8a7",
+	collapseInner: "CanvasCard_collapseInner_5d8a7",
+	compactIdentity: "CanvasCard_compactIdentity_5d8a7",
+	compact: "CanvasCard_compact_5d8a7",
+	withBody: "CanvasCard_withBody_5d8a7",
+	compactContent: "CanvasCard_compactContent_5d8a7",
+	singleContent: "CanvasCard_singleContent_5d8a7",
+	subtitle: "CanvasCard_subtitle_5d8a7",
+	fill: "CanvasCard_fill_5d8a7"
 };
 //#endregion
 //#region src/ui/browser/hooks.ts
@@ -18688,208 +18834,25 @@ function isEmptyReactNode(node) {
 	if (isValidElement(node)) return false;
 	return true;
 }
-//#endregion
-//#region src/canvas/browser/graph/Nodes/components/CanvasCard.tsx
-var runningBeamPathLength = 1e3;
-var runningBeamLength = 160;
-var runningBeamLayerCount = 48;
-var runningBeamPeakOpacity = .9;
-var runningBeamLayers = Array.from({ length: runningBeamLayerCount }, (_, index) => {
-	const length = runningBeamLength * (1 - index / runningBeamLayerCount);
-	const gap = (runningBeamPathLength - length) / 2;
-	const previousOpacity = runningBeamPeakOpacity * Math.sin(index / runningBeamLayerCount * (Math.PI / 2)) ** 2;
-	const opacity = runningBeamPeakOpacity * Math.sin((index + 1) / runningBeamLayerCount * (Math.PI / 2)) ** 2;
-	return {
-		dash: `0 ${gap} ${length} ${gap}`,
-		opacity: (opacity - previousOpacity) / (1 - previousOpacity)
-	};
-});
-function CanvasCard({ title, tone, titleContent, icon, subtitle, subtitleAccessory, children, preview, branches, footer, actions, problem, problemIcon, problemTone = "danger", selected, running = false, fill = false, compact = false, compactContent = false, contentHidden = false, footerHidden = false }) {
-	const hasContent = Children.toArray(children).some((child) => typeof child != "string" || child.trim().length > 0);
-	const hasBranches = !isEmptyReactNode(branches);
-	const hasBody = !contentHidden && (hasContent || !isEmptyReactNode(preview)) || hasBranches || !footerHidden && !isEmptyReactNode(footer);
-	const statusIndicator = problem && /* @__PURE__ */ jsx(CanvasTooltip, {
-		title: problem,
-		placement: "top",
-		children: /* @__PURE__ */ jsx("span", {
-			className: clsx(CanvasCard_module_default.icon, CanvasCard_module_default.indicator, problemTone == "warning" ? CanvasCard_module_default.warning : CanvasCard_module_default.danger),
-			"aria-label": problem,
-			role: "img",
-			tabIndex: 0,
-			children: problemIcon ?? /* @__PURE__ */ jsx("i", {
-				"aria-hidden": "true",
-				className: "i-lucide-light:triangle-alert"
-			})
-		})
-	});
-	return /* @__PURE__ */ jsxs("article", {
-		className: clsx(CanvasCard_module_default.card, fill && CanvasCard_module_default.fill, compact && CanvasCard_module_default.compact, compactContent && CanvasCard_module_default.compactContent, tone && CanvasCard_module_default[tone], selected && CanvasCard_module_default.selected, problem && problemTone == "danger" && CanvasCard_module_default.problem),
-		children: [
-			/* @__PURE__ */ jsxs("header", {
-				className: clsx(CanvasCard_module_default.header, hasBody && CanvasCard_module_default.withBody),
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: CanvasCard_module_default.compactIdentity,
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: CanvasCard_module_default.icon,
-								children: icon
-							}),
-							/* @__PURE__ */ jsx("strong", {
-								title,
-								children: title
-							}),
-							statusIndicator
-						]
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: CanvasCard_module_default.icon,
-						children: icon
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: CanvasCard_module_default.identity,
-						children: [/* @__PURE__ */ jsx("strong", {
-							title,
-							children: titleContent ?? title
-						}), subtitle && /* @__PURE__ */ jsxs("span", {
-							className: CanvasCard_module_default.subtitle,
-							children: [/* @__PURE__ */ jsx("span", { children: subtitle }), subtitleAccessory]
-						})]
-					}),
-					statusIndicator,
-					actions
-				]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: clsx(hasBody && !hasBranches && CanvasCard_module_default.singleContent),
-				children: [
-					(hasContent || !isEmptyReactNode(preview)) && /* @__PURE__ */ jsxs(CardCollapse, {
-						hidden: contentHidden,
-						children: [hasContent && /* @__PURE__ */ jsx("div", {
-							className: CanvasCard_module_default.content,
-							children
-						}), !isEmptyReactNode(preview) && /* @__PURE__ */ jsx("div", {
-							className: CanvasCard_module_default.preview,
-							children: preview
-						})]
-					}),
-					!isEmptyReactNode(branches) && /* @__PURE__ */ jsx("div", {
-						className: CanvasCard_module_default.branches,
-						children: branches
-					}),
-					!isEmptyReactNode(footer) && /* @__PURE__ */ jsx(CardCollapse, {
-						hidden: footerHidden,
-						children: /* @__PURE__ */ jsx("footer", {
-							className: clsx(CanvasCard_module_default.footer, !contentHidden && !isEmptyReactNode(preview) && CanvasCard_module_default.afterPreview),
-							children: footer
-						})
-					})
-				]
-			}),
-			running && /* @__PURE__ */ jsx("svg", {
-				className: CanvasCard_module_default.runningBeam,
-				"aria-hidden": "true",
-				children: runningBeamLayers.map((layer, index) => /* @__PURE__ */ jsx("rect", {
-					x: "0.5",
-					y: "0.5",
-					pathLength: runningBeamPathLength,
-					strokeDasharray: layer.dash,
-					strokeOpacity: layer.opacity
-				}, index))
-			})
-		]
-	});
-}
-/** Retain content only while the closing transition needs it. */
-function CardCollapse({ hidden, children }) {
-	const elementRef = useRef(null);
-	const [present, setPresent] = useState(!hidden);
-	useLayoutEffect(() => {
-		const element = elementRef.current;
-		element.toggleAttribute("inert", hidden);
-		if (!hidden) {
-			setPresent(true);
-			return;
-		}
-		element.getBoundingClientRect();
-		const animations = element.getAnimations();
-		let cancelled = false;
-		Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
-			if (!cancelled) setPresent(false);
-		});
-		return () => {
-			cancelled = true;
-		};
-	}, [hidden]);
-	return /* @__PURE__ */ jsx("div", {
-		className: CanvasCard_module_default.collapse,
-		"data-hidden": hidden,
-		"aria-hidden": hidden || void 0,
-		ref: elementRef,
-		children: /* @__PURE__ */ jsx("div", {
-			className: CanvasCard_module_default.collapseInner,
-			children: (!hidden || present) && children
-		})
-	});
-}
-//#endregion
-//#region src/canvas/browser/graph/Nodes/components/constants.ts
-var defaultNodeIcon = "i-carbon:hexagon-vertical-outline";
-var defaultConditionIcon = "i-carbon:child-node";
-var defaultTriggerIcon = "i-codicon:symbol-event";
-var iconForNodeType = (nodeType) => nodeType === NODE_TYPE.TaskNode ? "i-carbon:code" : nodeType === NODE_TYPE.ConditionNode ? defaultConditionIcon : nodeType === NODE_TYPE.TriggerNode ? defaultTriggerIcon : defaultNodeIcon;
-//#endregion
-//#region src/canvas/browser/graph/Nodes/components/CanvasNodeIcon.tsx
-function nodeTypeForKind(kind) {
-	switch (kind) {
-		case "task": return NODE_TYPE.TaskNode;
-		case "condition": return NODE_TYPE.ConditionNode;
-		case "trigger": return NODE_TYPE.TriggerNode;
-		case "comment": return NODE_TYPE.CommentNode;
-		default: return NODE_TYPE.ValueNode;
-	}
-}
-function CanvasNodeIcon({ kind, icon, fallbackIcon, nodeType, className }) {
-	const defaultIcon = fallbackIcon ?? (kind == "wait" ? ":carbon:hourglass:" : kind == "approval" ? ":carbon:stamp:" : void 0);
-	return /* @__PURE__ */ jsx(ContentIcon, {
-		src: icon ?? defaultIcon,
-		className,
-		fallback: /* @__PURE__ */ jsx(ContentIcon, {
-			src: defaultIcon,
-			className,
-			fallback: /* @__PURE__ */ jsx("i", {
-				"aria-hidden": "true",
-				className: iconForNodeType(nodeType ?? nodeTypeForKind(kind))
-			})
-		})
-	});
-}
-var NodeContentRows_module_default = { rows: "NodeContentRows_rows_01c56" };
-//#endregion
-//#region src/canvas/browser/graph/Nodes/components/NodeContentRows.tsx
-function NodeContentRows({ children }) {
-	return /* @__PURE__ */ jsx("ul", {
-		className: NodeContentRows_module_default.rows,
-		children
-	});
-}
 var RunChips_module_default = {
-	chip: "RunChips_chip_80ab6",
-	popup: "RunChips_popup_80ab6",
-	statusPopup: "RunChips_statusPopup_80ab6",
-	heading: "RunChips_heading_80ab6",
-	metadata: "RunChips_metadata_80ab6",
-	runId: "RunChips_runId_80ab6",
-	separator: "RunChips_separator_80ab6",
-	record: "RunChips_record_80ab6",
-	log: "RunChips_log_80ab6",
-	preview: "RunChips_preview_80ab6",
-	previewAction: "RunChips_previewAction_80ab6",
-	gallery: "RunChips_gallery_80ab6",
-	row: "RunChips_row_80ab6",
-	links: "RunChips_links_80ab6",
-	status: "RunChips_status_80ab6",
-	"run-spin": "RunChips_run-spin_80ab6"
+	chip: "RunChips_chip_c07c0",
+	popup: "RunChips_popup_c07c0",
+	statusPopup: "RunChips_statusPopup_c07c0",
+	heading: "RunChips_heading_c07c0",
+	metadata: "RunChips_metadata_c07c0",
+	runId: "RunChips_runId_c07c0",
+	separator: "RunChips_separator_c07c0",
+	record: "RunChips_record_c07c0",
+	log: "RunChips_log_c07c0",
+	preview: "RunChips_preview_c07c0",
+	previewAction: "RunChips_previewAction_c07c0",
+	gallery: "RunChips_gallery_c07c0",
+	row: "RunChips_row_c07c0",
+	links: "RunChips_links_c07c0",
+	statusIndicator: "RunChips_statusIndicator_c07c0",
+	status: "RunChips_status_c07c0",
+	"run-spin": "RunChips_run-spin_c07c0",
+	compactChip: "RunChips_compactChip_c07c0"
 };
 //#endregion
 //#region ../../node_modules/.bun/sonner@2.0.7+6dbf9a050bc9aadb/node_modules/sonner/dist/index.mjs
@@ -19699,22 +19662,27 @@ var JSONViewer = /* @__PURE__ */ memo(({ className, data, disableTopLevelExpand,
 });
 //#endregion
 //#region src/canvas/browser/graph/Nodes/components/RunChips.tsx
-function RecordChip({ label, run, children, icon, status }) {
+function RecordChip({ label, run, children, icon, status, compact = false }) {
 	const t = useTranslate();
 	const popupContainer = useGetStaticPopupContainer()();
 	const runId = run.runId;
-	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+	const trigger = /* @__PURE__ */ jsxs(PopoverTrigger, {
 		render: /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: `${RunChips_module_default.chip} ${status ? RunChips_module_default.status : ""} nodrag nopan nokey`,
+			"aria-label": compact ? label : void 0,
+			className: `${RunChips_module_default.chip} ${status ? RunChips_module_default.status : ""} ${compact ? RunChips_module_default.compactChip : ""} nodrag nopan nokey`,
 			"data-status": status,
 			onClick: (event) => event.stopPropagation()
 		}),
 		children: [icon && /* @__PURE__ */ jsx("i", {
 			className: icon,
 			"aria-hidden": "true"
-		}), /* @__PURE__ */ jsx("span", { children: label })]
-	}), /* @__PURE__ */ jsxs(PopoverContent, {
+		}), !compact && /* @__PURE__ */ jsx("span", { children: label })]
+	});
+	return /* @__PURE__ */ jsxs(Popover, { children: [compact ? /* @__PURE__ */ jsx(CanvasTooltip, {
+		title: label,
+		children: trigger
+	}) : trigger, /* @__PURE__ */ jsxs(PopoverContent, {
 		container: popupContainer,
 		side: "bottom",
 		align: "start",
@@ -19800,19 +19768,45 @@ function ImagePreview({ images, run, title }) {
 		})]
 	});
 }
+function runStatusLabel(run, t) {
+	const elapsed = run.startedAt != null && run.finishedAt != null ? Date.parse(run.finishedAt) - Date.parse(run.startedAt) : void 0;
+	return `${t(`canvasCard.status.${run.status}`)}${run.status == "running" && run.progress != null && Number.isFinite(run.progress) ? ` · ${Math.round(Math.min(100, Math.max(0, run.progress)))}%` : ""}${elapsed != null && Number.isFinite(elapsed) && elapsed >= 0 ? ` · ${formatDuration(elapsed)}` : ""}`;
+}
+function runStatusIcon(state) {
+	return state == "handled" ? "i-lucide-light:triangle-alert" : state == "running" ? "i-codicon:loading" : state == "success" ? "i-codicon:check" : state == "error" ? "i-codicon:error" : state == "waiting" ? "i-carbon:time" : "i-codicon:circle-outline";
+}
+function RunStatusIndicator({ run }) {
+	const label = runStatusLabel(run, useTranslate());
+	return /* @__PURE__ */ jsx(CanvasTooltip, {
+		title: label,
+		placement: "top",
+		children: /* @__PURE__ */ jsx("span", {
+			className: RunChips_module_default.statusIndicator,
+			"data-status": run.status,
+			role: "img",
+			"aria-label": label,
+			tabIndex: 0,
+			children: /* @__PURE__ */ jsx("i", {
+				className: runStatusIcon(run.status),
+				"aria-hidden": "true"
+			})
+		})
+	});
+}
+function hasRunRecords(run) {
+	return run != null && (run.status !== "idle" || run.outputs !== void 0 || (run.logs?.length ?? 0) > 0 || (run.artifacts?.length ?? 0) > 0);
+}
 function RunChips({ run }) {
 	const t = useTranslate();
-	const elapsed = run.startedAt != null && run.finishedAt != null ? Date.parse(run.finishedAt) - Date.parse(run.startedAt) : void 0;
-	const status = `${t(`canvasCard.status.${run.status}`)}${run.status == "running" && run.progress != null && Number.isFinite(run.progress) ? ` · ${Math.round(Math.min(100, Math.max(0, run.progress)))}%` : ""}${elapsed != null && Number.isFinite(elapsed) && elapsed >= 0 ? ` · ${formatDuration(elapsed)}` : ""}`;
-	const state = run.status;
-	const icon = state == "handled" ? "i-lucide-light:triangle-alert" : state == "running" ? "i-codicon:loading" : state == "success" ? "i-codicon:check" : state == "error" ? "i-codicon:error" : state == "waiting" ? "i-carbon:time" : "i-codicon:circle-outline";
+	if (!hasRunRecords(run)) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: RunChips_module_default.row,
-		children: [/* @__PURE__ */ jsx(RecordChip, {
-			label: status,
+		children: [run.status !== "idle" && /* @__PURE__ */ jsx(RecordChip, {
+			label: runStatusLabel(run, t),
 			run,
-			icon,
-			status: state,
+			icon: runStatusIcon(run.status),
+			status: run.status,
+			compact: true,
 			children: run.error != null && /* @__PURE__ */ jsx(JSONViewer, {
 				data: run.error,
 				shouldExpandNode: collapseAllNested
@@ -19824,6 +19818,7 @@ function RunChips({ run }) {
 					label: t("canvasCard.result"),
 					run,
 					icon: "i-codicon:output",
+					compact: true,
 					children: /* @__PURE__ */ jsx(JSONViewer, {
 						data: run.outputs,
 						shouldExpandNode: collapseAllNested
@@ -19833,6 +19828,7 @@ function RunChips({ run }) {
 					label: t("canvasCard.logs", { count: run.logs?.length ?? 0 }),
 					run,
 					icon: "i-codicon:list-unordered",
+					compact: true,
 					children: run.logs?.map((log, index) => /* @__PURE__ */ jsxs("div", {
 						className: RunChips_module_default.log,
 						children: [/* @__PURE__ */ jsxs("small", { children: [
@@ -19846,6 +19842,7 @@ function RunChips({ run }) {
 					label: t("canvasCard.files", { count: run.artifacts?.length ?? 0 }),
 					run,
 					icon: "i-codicon:files",
+					compact: true,
 					children: [/* @__PURE__ */ jsx("p", { children: t("canvasCard.artifactMetadata") }), /* @__PURE__ */ jsx(JSONViewer, {
 						data: run.artifacts,
 						shouldExpandNode: collapseAllNested
@@ -19855,49 +19852,229 @@ function RunChips({ run }) {
 		})]
 	});
 }
-var ValuePreview_module_default = {
-	trigger: "ValuePreview_trigger_4d5e2",
-	popup: "ValuePreview_popup_4d5e2",
-	content: "ValuePreview_content_4d5e2",
-	json: "ValuePreview_json_4d5e2"
-};
-//#endregion
-//#region src/canvas/browser/graph/Nodes/components/ValuePreview.tsx
-function ValuePreview({ name, value }) {
-	const getContainer = useGetStaticPopupContainer();
-	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-		openOnHover: true,
-		delay: 200,
-		closeDelay: 150,
-		render: /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: `${ValuePreview_module_default.trigger} nodrag nopan nokey`,
-			onClick: (event) => event.stopPropagation()
-		}),
-		children: JSON.stringify(value)
-	}), /* @__PURE__ */ jsx(PopoverContent, {
-		container: getContainer(),
-		side: "top",
-		align: "center",
-		sideOffset: 8,
-		className: `${ValuePreview_module_default.popup} nodrag nopan nowheel nokey`,
-		"aria-label": name,
-		"data-canvas-control-scope": true,
-		onClick: (event) => event.stopPropagation(),
-		children: /* @__PURE__ */ jsx(ScrollArea, {
-			className: ValuePreview_module_default.content,
-			children: /* @__PURE__ */ jsx(JSONViewer, {
-				className: ValuePreview_module_default.json,
-				data: value,
-				shouldExpandNode: collapseAllNested
-			})
-		})
-	})] });
-}
 //#endregion
-//#region src/canvas/browser/graph/Nodes/components/CanvasNode.tsx
-function CanvasNode({ nodeStore, problem, branches, compact = false, compactContent = false }) {
-	const t = useTranslate();
+//#region src/canvas/browser/graph/Nodes/components/CanvasCard.tsx
+var runningBeamPathLength = 1e3;
+var runningBeamLength = 160;
+var runningBeamLayerCount = 48;
+var runningBeamPeakOpacity = .9;
+var runningBeamLayers = Array.from({ length: runningBeamLayerCount }, (_, index) => {
+	const length = runningBeamLength * (1 - index / runningBeamLayerCount);
+	const gap = (runningBeamPathLength - length) / 2;
+	const previousOpacity = runningBeamPeakOpacity * Math.sin(index / runningBeamLayerCount * (Math.PI / 2)) ** 2;
+	const opacity = runningBeamPeakOpacity * Math.sin((index + 1) / runningBeamLayerCount * (Math.PI / 2)) ** 2;
+	return {
+		dash: `0 ${gap} ${length} ${gap}`,
+		opacity: (opacity - previousOpacity) / (1 - previousOpacity)
+	};
+});
+function CanvasCard({ title, tone, titleContent, icon, subtitle, subtitleAccessory, children, preview, branches, actions, diagnostic, run, selected, running = run?.status === "running", fill = false, compact = false, compactContent = false, contentHidden = false }) {
+	const hasContent = Children.toArray(children).some((child) => typeof child != "string" || child.trim().length > 0);
+	const hasBranches = !isEmptyReactNode(branches);
+	const runControls = hasRunRecords(run) ? /* @__PURE__ */ jsx(RunChips, { run }) : void 0;
+	const hasBody = !contentHidden && (hasContent || !isEmptyReactNode(preview)) || hasBranches;
+	const hasError = run?.status === "error" || diagnostic != null && diagnostic.tone !== "warning";
+	const diagnosticIndicator = diagnostic && /* @__PURE__ */ jsx(CanvasTooltip, {
+		title: diagnostic.message,
+		placement: "top",
+		children: /* @__PURE__ */ jsx("span", {
+			className: clsx(CanvasCard_module_default.icon, CanvasCard_module_default.indicator, diagnostic.tone === "warning" ? CanvasCard_module_default.warning : CanvasCard_module_default.danger),
+			"aria-label": diagnostic.message,
+			role: "img",
+			tabIndex: 0,
+			children: diagnostic.icon ?? /* @__PURE__ */ jsx("i", {
+				"aria-hidden": "true",
+				className: "i-lucide-light:triangle-alert"
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs("article", {
+		className: clsx(CanvasCard_module_default.card, fill && CanvasCard_module_default.fill, compact && CanvasCard_module_default.compact, compactContent && CanvasCard_module_default.compactContent, tone && CanvasCard_module_default[tone], selected && CanvasCard_module_default.selected, hasError && CanvasCard_module_default.problem),
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: clsx(CanvasCard_module_default.header, hasBody && CanvasCard_module_default.withBody),
+				children: [
+					compact && /* @__PURE__ */ jsxs("div", {
+						className: CanvasCard_module_default.compactIdentity,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: CanvasCard_module_default.icon,
+								children: icon
+							}),
+							/* @__PURE__ */ jsx("strong", {
+								title,
+								children: title
+							}),
+							diagnosticIndicator || run && run.status !== "idle" && /* @__PURE__ */ jsx("span", {
+								className: clsx(CanvasCard_module_default.icon, CanvasCard_module_default.indicator),
+								children: /* @__PURE__ */ jsx(RunStatusIndicator, { run })
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: CanvasCard_module_default.icon,
+						children: icon
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: CanvasCard_module_default.identity,
+						children: [/* @__PURE__ */ jsx("strong", {
+							title,
+							children: titleContent ?? title
+						}), subtitle && /* @__PURE__ */ jsxs("span", {
+							className: CanvasCard_module_default.subtitle,
+							children: [/* @__PURE__ */ jsx("span", { children: subtitle }), subtitleAccessory]
+						})]
+					}),
+					diagnosticIndicator || runControls,
+					actions
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx(hasBody && !hasBranches && CanvasCard_module_default.singleContent),
+				children: [(hasContent || !isEmptyReactNode(preview)) && /* @__PURE__ */ jsxs(CardCollapse, {
+					hidden: contentHidden,
+					children: [hasContent && /* @__PURE__ */ jsx("div", {
+						className: CanvasCard_module_default.content,
+						children
+					}), !isEmptyReactNode(preview) && /* @__PURE__ */ jsx("div", {
+						className: CanvasCard_module_default.preview,
+						children: preview
+					})]
+				}), !isEmptyReactNode(branches) && /* @__PURE__ */ jsx("div", {
+					className: CanvasCard_module_default.branches,
+					children: branches
+				})]
+			}),
+			running && /* @__PURE__ */ jsx("svg", {
+				className: CanvasCard_module_default.runningBeam,
+				"aria-hidden": "true",
+				children: runningBeamLayers.map((layer, index) => /* @__PURE__ */ jsx("rect", {
+					x: "0.5",
+					y: "0.5",
+					pathLength: runningBeamPathLength,
+					strokeDasharray: layer.dash,
+					strokeOpacity: layer.opacity
+				}, index))
+			})
+		]
+	});
+}
+/** Retain content only while the closing transition needs it. */
+function CardCollapse({ hidden, children }) {
+	const elementRef = useRef(null);
+	const [present, setPresent] = useState(!hidden);
+	useLayoutEffect(() => {
+		const element = elementRef.current;
+		element.toggleAttribute("inert", hidden);
+		if (!hidden) {
+			setPresent(true);
+			return;
+		}
+		element.getBoundingClientRect();
+		const animations = element.getAnimations();
+		let cancelled = false;
+		Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
+			if (!cancelled) setPresent(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [hidden]);
+	return /* @__PURE__ */ jsx("div", {
+		className: CanvasCard_module_default.collapse,
+		"data-hidden": hidden,
+		"aria-hidden": hidden || void 0,
+		ref: elementRef,
+		children: /* @__PURE__ */ jsx("div", {
+			className: CanvasCard_module_default.collapseInner,
+			children: (!hidden || present) && children
+		})
+	});
+}
+//#endregion
+//#region src/canvas/browser/graph/Nodes/components/constants.ts
+var defaultNodeIcon = "i-carbon:hexagon-vertical-outline";
+var defaultConditionIcon = "i-carbon:child-node";
+var defaultTriggerIcon = "i-codicon:symbol-event";
+var iconForNodeType = (nodeType) => nodeType === NODE_TYPE.TaskNode ? "i-carbon:code" : nodeType === NODE_TYPE.ConditionNode ? defaultConditionIcon : nodeType === NODE_TYPE.TriggerNode ? defaultTriggerIcon : defaultNodeIcon;
+//#endregion
+//#region src/canvas/browser/graph/Nodes/components/CanvasNodeIcon.tsx
+function nodeTypeForKind(kind) {
+	switch (kind) {
+		case "task": return NODE_TYPE.TaskNode;
+		case "condition": return NODE_TYPE.ConditionNode;
+		case "trigger": return NODE_TYPE.TriggerNode;
+		case "comment": return NODE_TYPE.CommentNode;
+		default: return NODE_TYPE.ValueNode;
+	}
+}
+function CanvasNodeIcon({ kind, icon, fallbackIcon, nodeType, className }) {
+	const defaultIcon = fallbackIcon ?? (kind == "wait" ? ":carbon:hourglass:" : kind == "approval" ? ":carbon:stamp:" : void 0);
+	return /* @__PURE__ */ jsx(ContentIcon, {
+		src: icon ?? defaultIcon,
+		className,
+		fallback: /* @__PURE__ */ jsx(ContentIcon, {
+			src: defaultIcon,
+			className,
+			fallback: /* @__PURE__ */ jsx("i", {
+				"aria-hidden": "true",
+				className: iconForNodeType(nodeType ?? nodeTypeForKind(kind))
+			})
+		})
+	});
+}
+var NodeContentRows_module_default = { rows: "NodeContentRows_rows_01c56" };
+//#endregion
+//#region src/canvas/browser/graph/Nodes/components/NodeContentRows.tsx
+function NodeContentRows({ children }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: NodeContentRows_module_default.rows,
+		children
+	});
+}
+var ValuePreview_module_default = {
+	trigger: "ValuePreview_trigger_4d5e2",
+	popup: "ValuePreview_popup_4d5e2",
+	content: "ValuePreview_content_4d5e2",
+	json: "ValuePreview_json_4d5e2"
+};
+//#endregion
+//#region src/canvas/browser/graph/Nodes/components/ValuePreview.tsx
+function ValuePreview({ name, value }) {
+	const getContainer = useGetStaticPopupContainer();
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		openOnHover: true,
+		delay: 200,
+		closeDelay: 150,
+		render: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: `${ValuePreview_module_default.trigger} nodrag nopan nokey`,
+			onClick: (event) => event.stopPropagation()
+		}),
+		children: JSON.stringify(value)
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		container: getContainer(),
+		side: "top",
+		align: "center",
+		sideOffset: 8,
+		className: `${ValuePreview_module_default.popup} nodrag nopan nowheel nokey`,
+		"aria-label": name,
+		"data-canvas-control-scope": true,
+		onClick: (event) => event.stopPropagation(),
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			className: ValuePreview_module_default.content,
+			children: /* @__PURE__ */ jsx(JSONViewer, {
+				className: ValuePreview_module_default.json,
+				data: value,
+				shouldExpandNode: collapseAllNested
+			})
+		})
+	})] });
+}
+//#endregion
+//#region src/canvas/browser/graph/Nodes/components/CanvasNode.tsx
+function CanvasNode({ nodeStore, diagnostic, branches, compact = false, compactContent = false }) {
+	const t = useTranslate();
 	const language = useLang();
 	const selected = useVal(nodeStore.$.selected);
 	const node = useVal(nodeStore.content$);
@@ -19911,9 +20088,22 @@ function CanvasNode({ nodeStore, problem, branches, compact = false, compactCont
 	const kind = node?.kind ?? "task";
 	const triggerSource = node.kind == "trigger" ? node.presentation?.kind == "error" || node.presentation?.kind == "manual" || node.presentation?.kind == "start" || node.presentation?.kind == "cron" || node.presentation?.kind == "webhook" ? t(`canvasCard.triggerSource.${node.presentation.kind}`) : node.presentation?.source : void 0;
 	const subtitle = inline ? summary : node.kind == "task" ? node.executorName || t("canvasCard.kind.task") : node.kind == "trigger" && triggerSource ? `${t("canvasCard.kind.trigger")} · ${triggerSource}` : t(`canvasCard.kind.${kind}`);
-	const runContent = node?.run == null || node.run.status == "idle" ? void 0 : /* @__PURE__ */ jsx(RunChips, { run: node.run });
 	const connectionRequired = (node.kind == "task" || node.kind == "trigger") && node.connectionRequired;
-	const connectionDeferred = node.kind == "task" && node.connectionDeferred && !connectionRequired && !problem;
+	const connectionDeferred = node.kind == "task" && node.connectionDeferred && !connectionRequired && !diagnostic && node.run?.status !== "error";
+	const cardDiagnostic = connectionRequired ? {
+		message: t("nodeStatus.connectionRequired"),
+		icon: /* @__PURE__ */ jsx("i", {
+			"aria-hidden": "true",
+			className: "i-lucide-light:unplug"
+		})
+	} : diagnostic ? { message: diagnostic } : connectionDeferred ? {
+		message: t("nodeStatus.connectionDeferred"),
+		tone: "warning",
+		icon: /* @__PURE__ */ jsx("i", {
+			"aria-hidden": "true",
+			className: "i-lucide-light:unplug"
+		})
+	} : void 0;
 	return /* @__PURE__ */ jsx("div", {
 		className: NODE_HANDLE_CLASSNAME,
 		children: /* @__PURE__ */ jsx(CanvasCard, {
@@ -19921,7 +20111,6 @@ function CanvasNode({ nodeStore, problem, branches, compact = false, compactCont
 			compact,
 			compactContent,
 			contentHidden: hidden,
-			footerHidden: hidden && !runContent,
 			title,
 			icon: /* @__PURE__ */ jsx(CanvasNodeIcon, {
 				icon: node.icon,
@@ -19948,18 +20137,9 @@ function CanvasNode({ nodeStore, problem, branches, compact = false, compactCont
 				})
 			}) : void 0,
 			selected,
-			running: node.run?.status === "running",
-			problem: connectionRequired ? t("nodeStatus.connectionRequired") : problem ?? (connectionDeferred ? t("nodeStatus.connectionDeferred") : void 0),
-			problemTone: connectionDeferred ? "warning" : "danger",
-			problemIcon: connectionRequired || connectionDeferred ? /* @__PURE__ */ jsx("i", {
-				"aria-hidden": "true",
-				className: "i-lucide-light:unplug"
-			}) : void 0,
+			diagnostic: cardDiagnostic,
+			run: node.run,
 			branches,
-			footer: runContent ? /* @__PURE__ */ jsx("div", {
-				className: CanvasNode_module_default.footer,
-				children: runContent
-			}) : void 0,
 			preview: (values.length > 0 || Boolean(schedules?.length) || node?.run != null && images.length > 0) && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				schedules != null && schedules.length > 0 && /* @__PURE__ */ jsx(NodeContentRows, { children: schedules.map((schedule, index) => {
 					const description = schedule.type === "cron" ? cronDescription(schedule.expression, language) : void 0;
@@ -20101,6 +20281,107 @@ var MarkdownPreview = /* @__PURE__ */ memo(({ dark, unstyled, components, conten
 	});
 });
 //#endregion
+//#region src/canvas/browser/graph/Nodes/components/NodeResizeHandle.tsx
+/** Shared canvas-space dragging and keyboard resizing for node controls. */
+function NodeResizeHandle({ children, className, disabled, label, minimum, position, showTooltip = true, size, onStart, onResize, onCommit, onCancel, onReset }) {
+	const reactFlow = useStoreApi();
+	const drag = useRef();
+	const cancel = useRef(onCancel);
+	cancel.current = onCancel;
+	useEffect(() => () => {
+		if (drag.current) {
+			drag.current = void 0;
+			cancel.current?.();
+		}
+	}, []);
+	const resized = (initial, dx, dy) => {
+		const width = Math.max(minimum.width, initial.width + (position === "left" ? -dx : dx));
+		return {
+			width,
+			height: position === "bottom-right" ? Math.max(minimum.height, initial.height + dy) : initial.height,
+			offsetX: position === "left" ? initial.width - width : 0
+		};
+	};
+	const finish = () => {
+		const start = drag.current;
+		drag.current = void 0;
+		if (!start) return;
+		if (start.last.width === start.size.width && start.last.height === start.size.height) onCancel?.();
+		else onCommit?.(start.last);
+	};
+	const handle = /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: `${className} nodrag nopan`,
+		"aria-label": label,
+		disabled,
+		onDoubleClick: (event) => {
+			event.stopPropagation();
+			onReset?.();
+		},
+		onPointerDown: (event) => {
+			if (!event.isPrimary || event.button !== 0) return;
+			event.stopPropagation();
+			event.currentTarget.setPointerCapture(event.pointerId);
+			onStart?.();
+			drag.current = {
+				x: event.clientX,
+				y: event.clientY,
+				size,
+				zoom: reactFlow.getState().transform[2],
+				last: {
+					...size,
+					offsetX: 0
+				}
+			};
+		},
+		onPointerMove: (event) => {
+			const start = drag.current;
+			if (!start || !event.currentTarget.hasPointerCapture(event.pointerId)) return;
+			start.last = resized(start.size, (event.clientX - start.x) / start.zoom, (event.clientY - start.y) / start.zoom);
+			onResize(start.last);
+		},
+		onPointerUp: (event) => {
+			finish();
+			if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		},
+		onLostPointerCapture: () => {
+			if (!drag.current) return;
+			drag.current = void 0;
+			onCancel?.();
+		},
+		onKeyDown: (event) => {
+			if (event.key === "Escape" && drag.current) {
+				event.preventDefault();
+				event.stopPropagation();
+				drag.current = void 0;
+				onCancel?.();
+				return;
+			}
+			const step = event.shiftKey ? 40 : 10;
+			const delta = {
+				ArrowLeft: [-step, 0],
+				ArrowRight: [step, 0],
+				ArrowUp: [0, -step],
+				ArrowDown: [0, step]
+			}[event.key];
+			if (!delta || position !== "bottom-right" && delta[1] !== 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const change = resized(size, delta[0], delta[1]);
+			if (change.width === size.width && change.height === size.height) return;
+			onStart?.();
+			onResize(change);
+			onCommit?.(change);
+		},
+		children
+	});
+	return showTooltip ? /* @__PURE__ */ jsx(CanvasTooltip, {
+		title: label,
+		placement: "bottom",
+		children: handle
+	}) : handle;
+}
+//#endregion
 //#region src/canvas/browser/graph/Nodes/components/CommentNodeContent.tsx
 var markdownComponents = { input: ({ type, checked }) => type === "checkbox" ? /* @__PURE__ */ jsx(Checkbox, {
 	className: CommentNodeContent_module_default.taskCheckbox,
@@ -20176,53 +20457,14 @@ function CommentNodeContent({ store }) {
 }
 function CommentResizeButton({ store }) {
 	const t = useTranslate();
-	const reactFlow = useStoreApi();
-	const drag = useRef(null);
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		className: `${CommentNodeContent_module_default.resizeButton} nodrag nopan`,
-		"aria-label": t("comment.resize"),
-		title: t("comment.resize"),
-		onDoubleClick: (event) => event.stopPropagation(),
-		onPointerDown: (event) => {
-			if (!event.isPrimary || event.button !== 0) return;
-			event.stopPropagation();
-			event.currentTarget.setPointerCapture(event.pointerId);
-			drag.current = {
-				x: event.clientX,
-				y: event.clientY,
-				...store.$.size.value,
-				zoom: reactFlow.getState().transform[2]
-			};
-		},
-		onPointerMove: (event) => {
-			const start = drag.current;
-			if (!start || !event.currentTarget.hasPointerCapture(event.pointerId)) return;
-			store.resize({
-				width: start.width + (event.clientX - start.x) / start.zoom,
-				height: start.height + (event.clientY - start.y) / start.zoom
-			});
-		},
-		onLostPointerCapture: () => {
-			drag.current = null;
-		},
-		onKeyDown: (event) => {
-			const step = event.shiftKey ? 40 : 10;
-			const delta = {
-				ArrowLeft: [-step, 0],
-				ArrowRight: [step, 0],
-				ArrowUp: [0, -step],
-				ArrowDown: [0, step]
-			}[event.key];
-			if (!delta) return;
-			event.preventDefault();
-			event.stopPropagation();
-			const size = store.$.size.value;
-			store.resize({
-				width: size.width + delta[0],
-				height: size.height + delta[1]
-			});
-		},
+	const size = useVal(store.$.size);
+	return /* @__PURE__ */ jsx(NodeResizeHandle, {
+		className: CommentNodeContent_module_default.resizeButton,
+		label: t("comment.resize"),
+		position: "bottom-right",
+		minimum: COMMENT_MINIMUM_SIZE,
+		size,
+		onResize: store.resize,
 		children: /* @__PURE__ */ jsx("i", {
 			"aria-hidden": "true",
 			className: "i-mdi:resize-bottom-right"
@@ -20692,11 +20934,15 @@ function NodeHeadContextMenu({ canvasStore, children }) {
 	const getPopupContainer = useGetStaticPopupContainer();
 	const nodeStore = useNodeStore();
 	const editable = useVal(canvasStore.$.editable);
+	const onDelete = toTrue(editable && canvasStore.canDeleteNodes) && (() => canvasStore.deleteNodes([nodeStore]));
+	const content = useVal(NodeStore.to(nodeStore)?.content$);
+	const direction = useVal(canvasStore.$.direction);
+	const resetWidth = editable && direction === "vertical" && canvasStore.canChangeNodeWidth && content?.kind === "condition" && content.verticalWidth != null;
 	const items = useNodeMenuItems({
 		t,
 		nodeStore,
 		editable,
-		onDelete: toTrue(editable && canvasStore.canDeleteNodes) && (() => canvasStore.deleteNodes([nodeStore]))
+		onDelete
 	});
 	return /* @__PURE__ */ jsxs(ContextMenu$1, { children: [/* @__PURE__ */ jsx(ContextMenuTrigger, {
 		className: "flex-1",
@@ -20705,12 +20951,15 @@ function NodeHeadContextMenu({ canvasStore, children }) {
 		align: "start",
 		className: NodeHead_module_default.menu,
 		container: getPopupContainer(),
-		children: /* @__PURE__ */ jsx(ContextMenuGroup, { children: items.map((item) => item && /* @__PURE__ */ jsxs(ContextMenuItem, {
+		children: /* @__PURE__ */ jsxs(ContextMenuGroup, { children: [items.map((item) => item && /* @__PURE__ */ jsxs(ContextMenuItem, {
 			disabled: item.disabled,
 			onClick: item.onClick,
 			variant: item.danger ? "destructive" : "default",
 			children: [item.icon, item.label]
-		}, item.key)) })
+		}, item.key)), resetWidth && /* @__PURE__ */ jsx(ContextMenuItem, {
+			onClick: () => void canvasStore.changeNodeWidth(nodeStore.nodeId, void 0),
+			children: t("nodeWidth.reset")
+		})] })
 	})] });
 }
 function useNodeMenuItems({ t, nodeStore, onDelete, editable }) {
@@ -20856,6 +21105,61 @@ function CommentCard({ store }) {
 		})
 	});
 }
+//#endregion
+//#region src/canvas/browser/graph/Nodes/components/ConditionWidthControls.tsx
+function ConditionWidthControls({ canvasStore, nodeStore, minimum, width, onPreview }) {
+	const t = useTranslate();
+	const origin = useRef();
+	const [saving, setSaving] = useState(false);
+	const start = () => {
+		origin.current = nodeStore.$.position.value;
+	};
+	const cancel = () => {
+		if (origin.current) nodeStore.$$.position.set(origin.current);
+		origin.current = void 0;
+		onPreview(void 0);
+	};
+	const preview = (change) => {
+		if (!origin.current) return;
+		onPreview(change.width);
+		nodeStore.$$.position.set({
+			x: origin.current.x + change.offsetX,
+			y: origin.current.y
+		});
+	};
+	const commit = async (change) => {
+		const previousPosition = origin.current;
+		origin.current = void 0;
+		setSaving(true);
+		const position = change.offsetX === 0 ? void 0 : nodeStore.$.position.value;
+		try {
+			if (!await canvasStore.changeNodeWidth(nodeStore.nodeId, change.width, position) && previousPosition) nodeStore.$$.position.set(previousPosition);
+		} finally {
+			onPreview(void 0);
+			setSaving(false);
+		}
+	};
+	return ["left", "right"].map((side) => /* @__PURE__ */ jsx(NodeResizeHandle, {
+		className: `${NodeLayout_module_default.widthResize} ${side === "left" ? NodeLayout_module_default.widthResizeLeft : NodeLayout_module_default.widthResizeRight}`,
+		label: t(side === "left" ? "nodeWidth.resizeLeft" : "nodeWidth.resizeRight"),
+		position: side,
+		showTooltip: false,
+		size: {
+			width,
+			height: 0
+		},
+		minimum: {
+			width: minimum,
+			height: 0
+		},
+		disabled: saving,
+		onStart: start,
+		onResize: preview,
+		onCommit: (change) => void commit(change),
+		onCancel: cancel,
+		onReset: () => void canvasStore.changeNodeWidth(nodeStore.nodeId, void 0)
+	}, side));
+}
 var NodeMinimap_module_default = { wrapper: "NodeMinimap_wrapper_e79d7" };
 //#endregion
 //#region src/canvas/browser/graph/Nodes/components/NodeMinimap.tsx
@@ -20873,9 +21177,11 @@ function NodeMimimapContent() {
 }
 //#endregion
 //#region src/canvas/browser/graph/Nodes/components/NodeLayout.tsx
-var CARD_WIDTH = 320;
 function ConditionOperand({ operand }) {
-	if (typeof operand == "string") return operand;
+	if (typeof operand == "string") return /* @__PURE__ */ jsx("span", {
+		className: NodeLayout_module_default.branchOperand,
+		children: operand
+	});
 	if (operand.kind == "environment") return /* @__PURE__ */ jsx("i", {
 		"aria-label": operand.label,
 		className: "i-lucide-light:sliders-horizontal",
@@ -20901,7 +21207,10 @@ function ConditionRule({ item, t }) {
 			className: NodeLayout_module_default.branchExpression,
 			children: [
 				/* @__PURE__ */ jsx(ConditionOperand, { operand: expression.left }),
-				/* @__PURE__ */ jsx("span", { children: conditionOperatorSummary(expression.operator, t) }),
+				/* @__PURE__ */ jsx("span", {
+					className: NodeLayout_module_default.branchOperator,
+					children: conditionOperatorSummary(expression.operator, t)
+				}),
 				expression.right !== void 0 && /* @__PURE__ */ jsx(ConditionOperand, { operand: expression.right }),
 				expressionIndex < group.expressions.length - 1 && /* @__PURE__ */ jsx("span", { children: "∧" })
 			]
@@ -20919,14 +21228,35 @@ function ConditionRule({ item, t }) {
 }
 var NodeLayout = /* @__PURE__ */ memo(({ canvasStore, nodeStore, visible }) => {
 	const t = useTranslate();
+	const direction = useVal(canvasStore.$.direction);
+	const vertical = direction === "vertical";
+	const updateNodeInternals = useUpdateNodeInternals();
 	const modelNode = useVal(NodeStore.to(nodeStore)?.content$);
 	const annotation = useNodeAnnotation(modelNode);
 	const branches = modelNode?.kind == "condition" || modelNode?.kind == "approval" || modelNode?.kind == "wait" ? modelNode.outputs.flatMap((port) => "handle" in port ? [port.handle] : []) : void 0;
+	const branchHandles = branches?.join("\0");
+	const [previewWidth, setPreviewWidth] = useState();
+	const minimumWidth = minimumCanvasCardWidth(direction, branches?.length ?? 0);
+	const savedWidth = modelNode?.kind === "condition" ? modelNode.verticalWidth : void 0;
+	const width = canvasCardWidth(direction, branches?.length ?? 0, previewWidth ?? savedWidth);
+	useLayoutEffect(() => {
+		const frame = requestAnimationFrame(() => updateNodeInternals(nodeStore.rfNodeId));
+		return () => cancelAnimationFrame(frame);
+	}, [
+		direction,
+		branchHandles,
+		width,
+		nodeStore.rfNodeId,
+		updateNodeInternals
+	]);
+	useEffect(() => {
+		setPreviewWidth(void 0);
+	}, [direction]);
 	const executionInput = modelNode != null && modelNode.kind != "trigger" && modelNode.kind != "value";
 	const editable = useVal(canvasStore.$.editable);
 	const selected = useVal(nodeStore.$.selected);
 	const showError = useShowNodeError(nodeStore);
-	const problem = showError ? t("nodeStatus.hasError") : modelNode?.run?.status == "error" ? t("canvasCard.status.error") : void 0;
+	const diagnostic = showError ? t("nodeStatus.hasError") : void 0;
 	const [hovered, setHovered] = useState(false);
 	const [hintTriggered, setHintTriggered] = useState(false);
 	const hintRequested = !showError && hintTriggered && (hovered || selected === true) && visible;
@@ -20950,61 +21280,72 @@ var NodeLayout = /* @__PURE__ */ memo(({ canvasStore, nodeStore, visible }) => {
 	const initialized = useVal(canvasStore.$.initialized);
 	const animateEntry = useRef(initialized).current;
 	const executionPortColor = useVal(cardStore?.$.executionPortColor);
-	const problemColor = problem ? "var(--accent-red-1)" : void 0;
+	const hasError = showError || modelNode?.run?.status === "error";
+	const errorColor = hasError ? "var(--accent-red-1)" : void 0;
 	const conditionNode = modelNode?.kind == "condition" ? modelNode : void 0;
 	const containerStyle = {
-		width: cardStore ? CARD_WIDTH : void 0,
-		["--node-selected-border-color"]: problemColor,
+		width: cardStore ? width : void 0,
+		["--branch-count"]: branches?.length ?? 0,
+		["--branch-gap"]: `6px`,
+		["--branch-inline-padding"]: `8px`,
+		["--node-selected-border-color"]: errorColor,
+		["--header-handle-y"]: `38px`,
 		["--execution-port-color"]: executionPortColor,
-		["--execution-port-active-color"]: problemColor,
-		["--execution-port-overlap"]: problem ? "1px" : void 0,
+		["--execution-port-active-color"]: errorColor,
+		["--execution-port-overlap"]: hasError ? "1px" : void 0,
 		["--node-selected-shadow"]: showError ? "var(--node-error-selected-shadow)" : void 0
 	};
 	const card = cardStore ? /* @__PURE__ */ jsx(CanvasNode, {
 		nodeStore: cardStore,
 		compact: canvasMiniMapPhase !== NodeMiniMapPhase.None,
 		compactContent,
-		problem,
-		branches: branches?.map((branch) => {
-			const conditionCase = conditionNode?.cases.find((item) => item.output == branch);
-			const caseDescription = conditionCase?.description?.trim() || void 0;
-			const summary = conditionNode != null ? conditionBranchSummary(conditionNode, branch, t) : modelNode?.kind == "approval" || modelNode?.kind == "wait" ? t(`canvasCard.waitBranch.${branch}`) : "";
-			const tooltip = modelNode?.kind == "approval" || modelNode?.kind == "wait" ? waitBranchDescription(t, modelNode.kind, branch) : conditionNode?.defaultOutput === branch ? t("condition.defaultHelp") : void 0;
-			return /* @__PURE__ */ jsx(CanvasTooltip, {
-				placement: "top",
-				sideOffset: 12,
-				title: tooltip,
-				children: /* @__PURE__ */ jsxs("div", {
-					className: clsx(NodeLayout_module_default.executionBranch, NodeLayout_module_default.branchRow),
-					tabIndex: tooltip ? 0 : void 0,
-					children: [
-						summary && /* @__PURE__ */ jsx("span", {
-							className: NodeLayout_module_default.branchRule,
-							style: conditionNode && branch !== conditionNode.defaultOutput ? { color: problemColor } : void 0,
-							title: conditionNode && !tooltip ? summary : void 0,
-							children: conditionCase != null && caseDescription == null && conditionCaseHasExpressions(conditionCase) && (conditionNode?.diagnostics ?? 0) === 0 && conditionNode?.run?.status !== "error" ? /* @__PURE__ */ jsx(ConditionRule, {
-								item: conditionCase,
-								t
-							}) : summary
-						}),
-						summary && /* @__PURE__ */ jsx("span", {
-							"aria-hidden": "true",
-							className: NodeLayout_module_default.branchArrow,
-							children: "→"
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: NodeLayout_module_default.branchName,
-							children: conditionNode?.defaultOutput === branch ? "default" : branch
-						}),
-						/* @__PURE__ */ jsx(ExecutionHandle, {
+		diagnostic,
+		branches: branches && /* @__PURE__ */ jsx("div", {
+			className: NodeLayout_module_default.branchList,
+			children: branches.map((branch) => {
+				const conditionCase = conditionNode?.cases.find((item) => item.output == branch);
+				const caseDescription = conditionCase?.description?.trim() || void 0;
+				const summary = conditionNode != null ? conditionBranchSummary(conditionNode, branch, t) : modelNode?.kind == "approval" || modelNode?.kind == "wait" ? t(`canvasCard.waitBranch.${branch}`) : "";
+				const tooltip = modelNode?.kind == "approval" || modelNode?.kind == "wait" ? waitBranchDescription(t, modelNode.kind, branch) : conditionNode?.defaultOutput === branch ? t("condition.defaultHelp") : void 0;
+				return /* @__PURE__ */ jsx(CanvasTooltip, {
+					placement: "top",
+					sideOffset: 12,
+					title: tooltip,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: NodeLayout_module_default.branchRow,
+						tabIndex: tooltip ? 0 : void 0,
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: NodeLayout_module_default.branchContent,
+							children: [
+								summary && /* @__PURE__ */ jsx("span", {
+									className: NodeLayout_module_default.branchRule,
+									style: conditionNode && branch !== conditionNode.defaultOutput ? { color: errorColor } : void 0,
+									title: conditionNode && !tooltip ? summary : void 0,
+									children: conditionCase != null && caseDescription == null && conditionCaseHasExpressions(conditionCase) && (conditionNode?.diagnostics ?? 0) === 0 && conditionNode?.run?.status !== "error" ? /* @__PURE__ */ jsx(ConditionRule, {
+										item: conditionCase,
+										t
+									}) : summary
+								}),
+								summary && /* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: NodeLayout_module_default.branchArrow,
+									children: "→"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: NodeLayout_module_default.branchName,
+									children: conditionNode?.defaultOutput === branch ? "default" : branch
+								})
+							]
+						}), /* @__PURE__ */ jsx(ExecutionHandle, {
 							id: toRFHandleName(`$branch:${branch}`),
 							type: "output",
+							position: vertical ? "bottom" : "right",
 							isConnectable: editable,
 							hintRequested
-						})
-					]
-				})
-			}, branch);
+						})]
+					})
+				}, branch);
+			})
 		})
 	}) : void 0;
 	return /* @__PURE__ */ jsx(NodeMiniMapProvider, {
@@ -21013,6 +21354,7 @@ var NodeLayout = /* @__PURE__ */ memo(({ canvasStore, nodeStore, visible }) => {
 			value: nodeStore,
 			children: /* @__PURE__ */ jsx("div", {
 				...annotation,
+				style: { padding: 8 },
 				className: clsx(NodeLayout_module_default.outerContainer, animateEntry && NodeLayout_module_default.enter, !initialized && "open-flow-canvas-fitting-view", nodeMiniMapPhase >= NodeMiniMapPhase.Phase1 && "open-flow-canvas-node-minimap1", nodeMiniMapPhase >= NodeMiniMapPhase.Phase2 && "open-flow-canvas-node-minimap2"),
 				children: /* @__PURE__ */ jsxs("div", {
 					className: clsx(NodeLayout_module_default.offsetContainer, skip && NodeLayout_module_default.skipOuter),
@@ -21027,33 +21369,45 @@ var NodeLayout = /* @__PURE__ */ memo(({ canvasStore, nodeStore, visible }) => {
 								if (event.pointerType !== "touch") setHovered(true);
 							},
 							onPointerLeave: () => setHovered(false),
-							className: clsx(NodeLayout_module_default.container, NodeLayout_module_default.cardContainer, canvasMiniMapPhase !== NodeMiniMapPhase.None && NodeLayout_module_default.compact, compactContent && NodeLayout_module_default.compactContent, skip && NodeLayout_module_default.skip),
+							className: clsx(NodeLayout_module_default.container, NodeLayout_module_default.cardContainer, vertical && NodeLayout_module_default.vertical, canvasMiniMapPhase !== NodeMiniMapPhase.None && NodeLayout_module_default.compact, compactContent && NodeLayout_module_default.compactContent, skip && NodeLayout_module_default.skip),
 							style: containerStyle,
-							children: [modelNode?.kind === "trigger" && /* @__PURE__ */ jsx(Zap, {
-								"aria-hidden": "true",
-								className: NodeLayout_module_default.triggerIcon,
-								strokeWidth: 1.5
-							}), /* @__PURE__ */ jsxs("div", {
-								className: NodeLayout_module_default.executionHead,
-								children: [
-									card ? /* @__PURE__ */ jsx(NodeHeadContextMenu, {
-										canvasStore,
-										children: card
-									}) : CommentNodeStore.is(nodeStore) ? /* @__PURE__ */ jsx(CommentCard, { store: nodeStore }) : null,
-									executionInput && /* @__PURE__ */ jsx(ExecutionHandle, {
-										id: toRFHandleName("$in"),
-										type: "input",
-										isConnectable: editable,
-										hintRequested
-									}),
-									nodeStore.nodeType != NODE_TYPE.CommentNode && modelNode?.kind != "outputs" && branches == null && /* @__PURE__ */ jsx(ExecutionHandle, {
-										id: toRFHandleName("$out"),
-										type: "output",
-										isConnectable: editable,
-										hintRequested
-									})
-								]
-							})]
+							children: [
+								modelNode?.kind === "trigger" && /* @__PURE__ */ jsx(Zap, {
+									"aria-hidden": "true",
+									className: NodeLayout_module_default.triggerIcon,
+									strokeWidth: 1.5
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: NodeLayout_module_default.executionHead,
+									children: [
+										card ? /* @__PURE__ */ jsx(NodeHeadContextMenu, {
+											canvasStore,
+											children: card
+										}) : CommentNodeStore.is(nodeStore) ? /* @__PURE__ */ jsx(CommentCard, { store: nodeStore }) : null,
+										executionInput && /* @__PURE__ */ jsx(ExecutionHandle, {
+											id: toRFHandleName("$in"),
+											type: "input",
+											position: vertical ? "top" : "left",
+											isConnectable: editable,
+											hintRequested
+										}),
+										nodeStore.nodeType != NODE_TYPE.CommentNode && modelNode?.kind != "outputs" && branches == null && /* @__PURE__ */ jsx(ExecutionHandle, {
+											id: toRFHandleName("$out"),
+											type: "output",
+											position: vertical ? "bottom" : "right",
+											isConnectable: editable,
+											hintRequested
+										})
+									]
+								}),
+								cardStore && vertical && conditionNode && editable && canvasStore.canChangeNodeWidth && /* @__PURE__ */ jsx(ConditionWidthControls, {
+									canvasStore,
+									nodeStore: cardStore,
+									minimum: minimumWidth,
+									width,
+									onPreview: setPreviewWidth
+								})
+							]
 						})
 					]
 				})
@@ -21061,7 +21415,7 @@ var NodeLayout = /* @__PURE__ */ memo(({ canvasStore, nodeStore, visible }) => {
 		})
 	});
 });
-function ExecutionHandle({ id, type, isConnectable, hintRequested }) {
+function ExecutionHandle({ id, type, position, isConnectable, hintRequested }) {
 	const handleType = type == "input" ? "target" : "source";
 	const sideConnections = useNodeConnections({ handleType });
 	const connecting = useConnection((connection) => connection.inProgress && connection.fromHandle.type != handleType);
@@ -21087,12 +21441,13 @@ function ExecutionHandle({ id, type, isConnectable, hintRequested }) {
 	return /* @__PURE__ */ jsx(Handle, {
 		id,
 		type,
+		position,
 		isConnectable,
 		className: clsx(NodeLayout_module_default.executionHandle, sideConnections.length > 0 && NodeLayout_module_default.connected, isConnectable && connecting && NodeLayout_module_default.connecting),
 		children: canHint && hintMounted && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
-			className: clsx(NodeLayout_module_default.connectionHint, type === "input" && NodeLayout_module_default.inputHint, (!showHint || hintFinished) && NodeLayout_module_default.hintLeaving),
-			children: /* @__PURE__ */ jsx("i", { className: type === "input" ? "i-lucide:chevron-left" : "i-lucide:chevron-right" })
+			className: clsx(NodeLayout_module_default.connectionHint, position && NodeLayout_module_default[`${position}Hint`], (!showHint || hintFinished) && NodeLayout_module_default.hintLeaving),
+			children: /* @__PURE__ */ jsx("i", { className: position === "top" ? "i-lucide-light:chevron-up" : position === "bottom" ? "i-lucide-light:chevron-down" : position === "left" ? "i-lucide-light:chevron-left" : "i-lucide-light:chevron-right" })
 		})
 	});
 }
@@ -21239,27 +21594,27 @@ var fitViewOptions = {
 	maxZoom: 1
 };
 var ReactFlowContainer_module_default = {
-	container: "ReactFlowContainer_container_b3d0e",
-	flow: "ReactFlowContainer_flow_b3d0e",
-	contextMenu: "ReactFlowContainer_contextMenu_b3d0e",
-	movingLayout: "ReactFlowContainer_movingLayout_b3d0e",
-	layoutPending: "ReactFlowContainer_layoutPending_b3d0e",
-	dock: "ReactFlowContainer_dock_b3d0e",
-	viewDock: "ReactFlowContainer_viewDock_b3d0e",
-	expandedViewControls: "ReactFlowContainer_expandedViewControls_b3d0e",
-	viewOptionButtons: "ReactFlowContainer_viewOptionButtons_b3d0e",
-	compactViewControls: "ReactFlowContainer_compactViewControls_b3d0e",
-	createDock: "ReactFlowContainer_createDock_b3d0e",
-	zoomValue: "ReactFlowContainer_zoomValue_b3d0e",
-	interactiveModeTrigger: "ReactFlowContainer_interactiveModeTrigger_b3d0e",
-	interactiveModePanel: "ReactFlowContainer_interactiveModePanel_b3d0e",
-	interactiveModeChoices: "ReactFlowContainer_interactiveModeChoices_b3d0e",
-	interactiveModeChoice: "ReactFlowContainer_interactiveModeChoice_b3d0e",
-	dockActions: "ReactFlowContainer_dockActions_b3d0e",
-	miniMap: "ReactFlowContainer_miniMap_b3d0e",
-	viewOptions: "ReactFlowContainer_viewOptions_b3d0e",
-	viewOptionsClip: "ReactFlowContainer_viewOptionsClip_b3d0e",
-	viewSeparator: "ReactFlowContainer_viewSeparator_b3d0e"
+	container: "ReactFlowContainer_container_40f4d",
+	flow: "ReactFlowContainer_flow_40f4d",
+	contextMenu: "ReactFlowContainer_contextMenu_40f4d",
+	movingLayout: "ReactFlowContainer_movingLayout_40f4d",
+	layoutPending: "ReactFlowContainer_layoutPending_40f4d",
+	dock: "ReactFlowContainer_dock_40f4d",
+	viewDock: "ReactFlowContainer_viewDock_40f4d",
+	expandedViewControls: "ReactFlowContainer_expandedViewControls_40f4d",
+	viewOptionButtons: "ReactFlowContainer_viewOptionButtons_40f4d",
+	compactViewControls: "ReactFlowContainer_compactViewControls_40f4d",
+	createDock: "ReactFlowContainer_createDock_40f4d",
+	zoomValue: "ReactFlowContainer_zoomValue_40f4d",
+	viewChoiceTrigger: "ReactFlowContainer_viewChoiceTrigger_40f4d",
+	viewChoicePanel: "ReactFlowContainer_viewChoicePanel_40f4d",
+	viewChoices: "ReactFlowContainer_viewChoices_40f4d",
+	viewChoice: "ReactFlowContainer_viewChoice_40f4d",
+	dockActions: "ReactFlowContainer_dockActions_40f4d",
+	miniMap: "ReactFlowContainer_miniMap_40f4d",
+	viewOptions: "ReactFlowContainer_viewOptions_40f4d",
+	viewOptionsClip: "ReactFlowContainer_viewOptionsClip_40f4d",
+	viewSeparator: "ReactFlowContainer_viewSeparator_40f4d"
 };
 //#endregion
 //#region src/canvas/browser/addItemDrag.ts
@@ -21305,6 +21660,636 @@ var isWithConditionType = (dataTransfer) => dataTransfer.types.includes(TRANSFER
 var isWithCommentType = (dataTransfer) => dataTransfer.types.includes(TRANSFER_COMMENT_KEY);
 var getTriggerType = (dataTransfer) => dataTransfer.getData(TRANSFER_TRIGGER_KEY);
 //#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/radio/root/RadioRootDataAttributes.js
+var RadioRootDataAttributes = /*#__PURE__*/ function(RadioRootDataAttributes) {
+	/**
+	* Present when the radio is checked.
+	*/
+	RadioRootDataAttributes["checked"] = "data-checked";
+	/**
+	* Present when the radio is not checked.
+	*/
+	RadioRootDataAttributes["unchecked"] = "data-unchecked";
+	/**
+	* Present when the radio is disabled.
+	*/
+	RadioRootDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the radio is readonly.
+	*/
+	RadioRootDataAttributes["readonly"] = "data-readonly";
+	/**
+	* Present when the radio is required.
+	*/
+	RadioRootDataAttributes["required"] = "data-required";
+	/**
+	* Present when the radio is in a valid state (when wrapped in Field.Root).
+	*/
+	RadioRootDataAttributes["valid"] = "data-valid";
+	/**
+	* Present when the radio is in an invalid state (when wrapped in Field.Root).
+	*/
+	RadioRootDataAttributes["invalid"] = "data-invalid";
+	/**
+	* Present when the radio has been touched (when wrapped in Field.Root).
+	*/
+	RadioRootDataAttributes["touched"] = "data-touched";
+	/**
+	* Present when the radio's value has changed (when wrapped in Field.Root).
+	*/
+	RadioRootDataAttributes["dirty"] = "data-dirty";
+	/**
+	* Present when the radio is checked (when wrapped in Field.Root).
+	*/
+	RadioRootDataAttributes["filled"] = "data-filled";
+	/**
+	* Present when the radio is focused (when wrapped in Field.Root).
+	*/
+	RadioRootDataAttributes["focused"] = "data-focused";
+	return RadioRootDataAttributes;
+}({});
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/radio/utils/stateAttributesMapping.js
+var stateAttributesMapping = {
+	checked(value) {
+		if (value) return { [RadioRootDataAttributes.checked]: "" };
+		return { [RadioRootDataAttributes.unchecked]: "" };
+	},
+	...transitionStatusMapping,
+	...fieldValidityMapping
+};
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/internals/composite/constants.js
+var ACTIVE_COMPOSITE_ITEM = "data-composite-item-active";
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/radio-group/RadioGroupContext.js
+var RadioGroupContext = /*#__PURE__*/ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") RadioGroupContext.displayName = "RadioGroupContext";
+function useRadioGroupContext() {
+	return React.useContext(RadioGroupContext);
+}
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/radio/root/RadioRootContext.js
+var RadioRootContext = /*#__PURE__*/ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") RadioRootContext.displayName = "RadioRootContext";
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/radio/root/RadioRoot.js
+/**
+* Represents the radio button itself.
+* Renders a `<span>` element and a hidden `<input>` beside.
+*
+* Documentation: [Base UI Radio](https://base-ui.com/react/components/radio)
+*/
+var RadioRoot = /*#__PURE__*/ React.forwardRef(function RadioRoot(componentProps, forwardedRef) {
+	const { render, className, disabled: disabledProp = false, readOnly: readOnlyProp = false, required: requiredProp = false, "aria-labelledby": ariaLabelledByProp, value, inputRef: inputRefProp, nativeButton = false, id: idProp, style, ...elementProps } = componentProps;
+	const groupContext = useRadioGroupContext();
+	const { disabled: disabledGroup, readOnly: readOnlyGroup, required: requiredGroup, form: formGroup, checkedValue, touched = false, validation, name } = groupContext ?? {};
+	const setCheckedValue = groupContext?.setCheckedValue ?? NOOP;
+	const setTouched = groupContext?.setTouched ?? NOOP;
+	const registerControlRef = groupContext?.registerControlRef ?? NOOP;
+	const registerInputRef = groupContext?.registerInputRef ?? NOOP;
+	const { setDirty, validityData, setTouched: setFieldTouched, setFilled, state: fieldState, disabled: fieldDisabled } = useFieldRootContext();
+	const fieldItemContext = useFieldItemContext();
+	const { labelId, getDescriptionProps } = useLabelableContext();
+	const disabled = fieldDisabled || fieldItemContext.disabled || disabledGroup || disabledProp;
+	const readOnly = readOnlyGroup || readOnlyProp;
+	const required = requiredGroup || requiredProp;
+	const form = formGroup;
+	const checked = groupContext ? checkedValue === value : value === "";
+	const serializedValue = React.useMemo(() => serializeValue(value), [value]);
+	const radioRef = React.useRef(null);
+	const inputRef = React.useRef(null);
+	const handleControlRef = useStableCallback((element) => {
+		if (!element) return;
+		registerControlRef(element, disabled);
+	});
+	const mergedInputRef = useMergedRefs(inputRefProp, inputRef, registerInputRef);
+	useIsoLayoutEffect(() => {
+		if (inputRef.current?.checked) setFilled(true);
+	}, [setFilled]);
+	useIsoLayoutEffect(() => {
+		if (!inputRef.current) return;
+		if (disabled && checked) {
+			registerInputRef(null);
+			return;
+		}
+		if (radioRef.current) registerControlRef(radioRef.current, disabled);
+		registerInputRef(inputRef.current);
+	}, [
+		checked,
+		disabled,
+		registerControlRef,
+		registerInputRef
+	]);
+	const id = useBaseUiId();
+	const inputId = useLabelableId({
+		id: idProp,
+		implicit: false,
+		controlRef: radioRef
+	});
+	const hiddenInputId = nativeButton ? void 0 : inputId;
+	const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, hiddenInputId);
+	const rootProps = {
+		role: "radio",
+		"aria-checked": checked,
+		"aria-required": required || void 0,
+		"aria-readonly": readOnly || void 0,
+		"aria-labelledby": ariaLabelledBy,
+		[ACTIVE_COMPOSITE_ITEM]: checked ? "" : void 0,
+		id: nativeButton ? inputId : id,
+		onKeyDown(event) {
+			if (event.key === "Enter") event.preventDefault();
+		},
+		onClick(event) {
+			if (event.defaultPrevented || disabled || readOnly) return;
+			event.preventDefault();
+			inputRef.current?.dispatchEvent(new PointerEvent("click", {
+				bubbles: true,
+				shiftKey: event.shiftKey,
+				ctrlKey: event.ctrlKey,
+				altKey: event.altKey,
+				metaKey: event.metaKey
+			}));
+		},
+		onFocus(event) {
+			if (event.defaultPrevented || disabled || readOnly || !touched) return;
+			inputRef.current?.click();
+			setTouched(false);
+		}
+	};
+	const { getButtonProps, buttonRef } = useButton({
+		disabled,
+		native: nativeButton
+	});
+	const inputProps = {
+		type: "radio",
+		ref: mergedInputRef,
+		form,
+		id: hiddenInputId,
+		name,
+		tabIndex: -1,
+		style: name ? visuallyHiddenInput : visuallyHidden,
+		"aria-hidden": true,
+		...value !== void 0 ? { value: serializedValue } : EMPTY_OBJECT,
+		disabled,
+		checked,
+		required,
+		readOnly,
+		onChange(event) {
+			if (event.nativeEvent.defaultPrevented) return;
+			if (disabled || readOnly || value === void 0) return;
+			const details = createChangeEventDetails(none$1, event.nativeEvent);
+			if (details.isCanceled) return;
+			setFieldTouched(true);
+			setDirty(value !== validityData.initialValue);
+			setFilled(true);
+			setCheckedValue(value, details);
+		},
+		onFocus() {
+			radioRef.current?.focus();
+		}
+	};
+	const state = React.useMemo(() => ({
+		...fieldState,
+		required,
+		disabled,
+		readOnly,
+		checked
+	}), [
+		fieldState,
+		disabled,
+		readOnly,
+		checked,
+		required
+	]);
+	const contextValue = state;
+	const isRadioGroup = groupContext !== void 0;
+	const refs = [
+		forwardedRef,
+		radioRef,
+		buttonRef,
+		handleControlRef
+	];
+	const props = [
+		rootProps,
+		getDescriptionProps,
+		validation?.getValidationProps ?? EMPTY_OBJECT,
+		elementProps,
+		getButtonProps
+	];
+	const element = useRenderElement("span", componentProps, {
+		enabled: !isRadioGroup,
+		state,
+		ref: refs,
+		props,
+		stateAttributesMapping
+	});
+	return /*#__PURE__*/ jsxs(RadioRootContext.Provider, {
+		value: contextValue,
+		children: [isRadioGroup ? /*#__PURE__*/ jsx(CompositeItem, {
+			tag: "span",
+			render,
+			className,
+			style,
+			state,
+			refs,
+			props,
+			stateAttributesMapping
+		}) : element, /*#__PURE__*/ jsx("input", {
+			...inputProps,
+			suppressHydrationWarning: true
+		})]
+	});
+});
+if (process.env.NODE_ENV !== "production") RadioRoot.displayName = "RadioRoot";
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/internals/composite/root/useCompositeRoot.js
+var EMPTY_ARRAY = [];
+function useCompositeRoot(params) {
+	const { itemSizes, cols = 1, loopFocus = true, onLoop, dense = false, orientation = "both", direction, highlightedIndex: externalHighlightedIndex, onHighlightedIndexChange: externalSetHighlightedIndex, rootRef: externalRef, enableHomeAndEndKeys = false, stopEventPropagation = false, disabledIndices, modifierKeys = EMPTY_ARRAY } = params;
+	const [internalHighlightedIndex, internalSetHighlightedIndex] = React.useState(0);
+	const isGrid = cols > 1;
+	const rootRef = React.useRef(null);
+	const mergedRef = useMergedRefs(rootRef, externalRef);
+	const elementsRef = React.useRef([]);
+	const hasSetDefaultIndexRef = React.useRef(false);
+	const highlightedIndex = externalHighlightedIndex ?? internalHighlightedIndex;
+	const onHighlightedIndexChange = useStableCallback((index, shouldScrollIntoView = false) => {
+		(externalSetHighlightedIndex ?? internalSetHighlightedIndex)(index);
+		if (shouldScrollIntoView) {
+			const newActiveItem = elementsRef.current[index];
+			scrollIntoViewIfNeeded(rootRef.current, newActiveItem, direction, orientation);
+		}
+	});
+	const onMapChange = useStableCallback((map) => {
+		if (map.size === 0 || hasSetDefaultIndexRef.current) return;
+		hasSetDefaultIndexRef.current = true;
+		const sortedElements = Array.from(map.keys());
+		const activeItem = sortedElements.find((compositeElement) => compositeElement?.hasAttribute("data-composite-item-active")) ?? null;
+		const activeIndex = activeItem ? sortedElements.indexOf(activeItem) : -1;
+		if (activeIndex !== -1) onHighlightedIndexChange(activeIndex);
+		scrollIntoViewIfNeeded(rootRef.current, activeItem, direction, orientation);
+	});
+	const wrappedOnLoop = useStableCallback((event, prevIndex, nextIndex) => {
+		if (!onLoop) return nextIndex;
+		return onLoop?.(event, prevIndex, nextIndex, elementsRef);
+	});
+	const props = React.useMemo(() => ({
+		"aria-orientation": orientation === "both" ? void 0 : orientation,
+		ref: mergedRef,
+		onFocus(event) {
+			const element = rootRef.current;
+			const target = getTarget(event.nativeEvent);
+			if (!element || target == null || !isNativeInput(target)) return;
+			target.setSelectionRange(0, target.value.length ?? 0);
+		},
+		onKeyDown(event) {
+			const RELEVANT_KEYS = enableHomeAndEndKeys ? ALL_KEYS : ARROW_KEYS;
+			if (!RELEVANT_KEYS.has(event.key)) return;
+			if (isModifierKeySet(event, modifierKeys)) return;
+			if (!rootRef.current) return;
+			const isRtl = direction === "rtl";
+			const horizontalForwardKey = isRtl ? ARROW_LEFT : ARROW_RIGHT;
+			const forwardKey = {
+				horizontal: horizontalForwardKey,
+				vertical: ARROW_DOWN,
+				both: horizontalForwardKey
+			}[orientation];
+			const horizontalBackwardKey = isRtl ? ARROW_RIGHT : ARROW_LEFT;
+			const backwardKey = {
+				horizontal: horizontalBackwardKey,
+				vertical: ARROW_UP,
+				both: horizontalBackwardKey
+			}[orientation];
+			const target = getTarget(event.nativeEvent);
+			if (target != null && isNativeInput(target) && !isElementDisabled(target)) {
+				const selectionStart = target.selectionStart;
+				const selectionEnd = target.selectionEnd;
+				const textContent = target.value ?? "";
+				if (selectionStart == null || event.shiftKey || selectionStart !== selectionEnd) return;
+				if (event.key !== backwardKey && selectionStart < textContent.length) return;
+				if (event.key !== forwardKey && selectionStart > 0) return;
+			}
+			let nextIndex = highlightedIndex;
+			const minIndex = getMinListIndex(elementsRef, disabledIndices);
+			const maxIndex = getMaxListIndex(elementsRef, disabledIndices);
+			if (isGrid) {
+				const sizes = itemSizes || Array.from({ length: elementsRef.current.length }, () => ({
+					width: 1,
+					height: 1
+				}));
+				const cellMap = createGridCellMap(sizes, cols, dense);
+				const minGridIndex = cellMap.findIndex((index) => index != null && !isListIndexDisabled(elementsRef.current, index, disabledIndices));
+				const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isListIndexDisabled(elementsRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
+				nextIndex = cellMap[getGridNavigatedIndex(cellMap.map((itemIndex) => itemIndex != null ? elementsRef.current[itemIndex] : null), {
+					event,
+					orientation,
+					loopFocus,
+					onLoop: wrappedOnLoop,
+					cols,
+					disabledIndices: getGridCellIndices([...disabledIndices || elementsRef.current.map((_, index) => isListIndexDisabled(elementsRef.current, index) ? index : void 0), void 0], cellMap),
+					minIndex: minGridIndex,
+					maxIndex: maxGridIndex,
+					prevIndex: getGridCellIndexOfCorner(highlightedIndex > maxIndex ? minIndex : highlightedIndex, sizes, cellMap, cols, event.key === "ArrowDown" ? "bl" : event.key === "ArrowRight" ? "tr" : "tl"),
+					rtl: isRtl
+				})];
+			}
+			const forwardKeys = {
+				horizontal: [horizontalForwardKey],
+				vertical: [ARROW_DOWN],
+				both: [horizontalForwardKey, ARROW_DOWN]
+			}[orientation];
+			const backwardKeys = {
+				horizontal: [horizontalBackwardKey],
+				vertical: [ARROW_UP],
+				both: [horizontalBackwardKey, ARROW_UP]
+			}[orientation];
+			const preventedKeys = isGrid ? RELEVANT_KEYS : {
+				horizontal: enableHomeAndEndKeys ? HORIZONTAL_KEYS_WITH_EXTRA_KEYS : HORIZONTAL_KEYS,
+				vertical: enableHomeAndEndKeys ? VERTICAL_KEYS_WITH_EXTRA_KEYS : VERTICAL_KEYS,
+				both: RELEVANT_KEYS
+			}[orientation];
+			if (enableHomeAndEndKeys) {
+				if (event.key === "Home") nextIndex = minIndex;
+				else if (event.key === "End") nextIndex = maxIndex;
+			}
+			if (nextIndex === highlightedIndex && (forwardKeys.includes(event.key) || backwardKeys.includes(event.key))) {
+				if (loopFocus && nextIndex === maxIndex && forwardKeys.includes(event.key)) {
+					nextIndex = minIndex;
+					if (onLoop) nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
+				} else if (loopFocus && nextIndex === minIndex && backwardKeys.includes(event.key)) {
+					nextIndex = maxIndex;
+					if (onLoop) nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
+				} else nextIndex = findNonDisabledListIndex(elementsRef.current, {
+					startingIndex: nextIndex,
+					decrement: backwardKeys.includes(event.key),
+					disabledIndices
+				});
+			}
+			if (nextIndex !== highlightedIndex && !isIndexOutOfListBounds(elementsRef.current, nextIndex)) {
+				if (stopEventPropagation) event.stopPropagation();
+				if (preventedKeys.has(event.key)) event.preventDefault();
+				onHighlightedIndexChange(nextIndex, true);
+				queueMicrotask(() => {
+					elementsRef.current[nextIndex]?.focus();
+				});
+			}
+		}
+	}), [
+		cols,
+		dense,
+		direction,
+		disabledIndices,
+		elementsRef,
+		enableHomeAndEndKeys,
+		highlightedIndex,
+		isGrid,
+		itemSizes,
+		loopFocus,
+		onLoop,
+		wrappedOnLoop,
+		mergedRef,
+		modifierKeys,
+		onHighlightedIndexChange,
+		orientation,
+		stopEventPropagation
+	]);
+	return React.useMemo(() => ({
+		props,
+		highlightedIndex,
+		onHighlightedIndexChange,
+		elementsRef,
+		disabledIndices,
+		onMapChange,
+		relayKeyboardEvent: props.onKeyDown
+	}), [
+		props,
+		highlightedIndex,
+		onHighlightedIndexChange,
+		elementsRef,
+		disabledIndices,
+		onMapChange
+	]);
+}
+function isModifierKeySet(event, ignoredModifierKeys) {
+	for (const key of MODIFIER_KEYS$1.values()) {
+		if (ignoredModifierKeys.includes(key)) continue;
+		if (event.getModifierState(key)) return true;
+	}
+	return false;
+}
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/internals/composite/root/CompositeRoot.js
+/**
+* @internal
+*/
+function CompositeRoot(componentProps) {
+	const { render, className, style, refs = EMPTY_ARRAY$1, props = EMPTY_ARRAY$1, state = EMPTY_OBJECT, stateAttributesMapping, highlightedIndex: highlightedIndexProp, onHighlightedIndexChange: onHighlightedIndexChangeProp, orientation, dense, itemSizes, loopFocus, onLoop, cols, enableHomeAndEndKeys, onMapChange: onMapChangeProp, stopEventPropagation = true, rootRef, disabledIndices, modifierKeys, highlightItemOnHover = false, tag = "div", ...elementProps } = componentProps;
+	const { props: defaultProps, highlightedIndex, onHighlightedIndexChange, elementsRef, onMapChange: onMapChangeUnwrapped, relayKeyboardEvent } = useCompositeRoot({
+		itemSizes,
+		cols,
+		loopFocus,
+		onLoop,
+		dense,
+		orientation,
+		highlightedIndex: highlightedIndexProp,
+		onHighlightedIndexChange: onHighlightedIndexChangeProp,
+		rootRef,
+		stopEventPropagation,
+		enableHomeAndEndKeys,
+		direction: useDirection(),
+		disabledIndices,
+		modifierKeys
+	});
+	const element = useRenderElement(tag, componentProps, {
+		state,
+		ref: refs,
+		props: [
+			defaultProps,
+			...props,
+			elementProps
+		],
+		stateAttributesMapping
+	});
+	const contextValue = React.useMemo(() => ({
+		highlightedIndex,
+		onHighlightedIndexChange,
+		highlightItemOnHover,
+		relayKeyboardEvent
+	}), [
+		highlightedIndex,
+		onHighlightedIndexChange,
+		highlightItemOnHover,
+		relayKeyboardEvent
+	]);
+	return /*#__PURE__*/ jsx(CompositeRootContext.Provider, {
+		value: contextValue,
+		children: /*#__PURE__*/ jsx(CompositeList, {
+			elementsRef,
+			onMapChange: (newMap) => {
+				onMapChangeProp?.(newMap);
+				onMapChangeUnwrapped(newMap);
+			},
+			children: element
+		})
+	});
+}
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/radio-group/RadioGroup.js
+var MODIFIER_KEYS = [SHIFT];
+/**
+* Provides a shared state to a series of radio buttons.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Radio Group](https://base-ui.com/react/components/radio)
+*/
+var RadioGroup = /*#__PURE__*/ React.forwardRef(function RadioGroup(componentProps, forwardedRef) {
+	const { render, className, disabled: disabledProp, readOnly, required, onValueChange: onValueChangeProp, value: externalValue, defaultValue, form, name: nameProp, inputRef: inputRefProp, id: idProp, style, ...elementProps } = componentProps;
+	const { setTouched: setFieldTouched, setFocused, shouldValidateOnChange, validationMode, name: fieldName, disabled: fieldDisabled, state: fieldState, validation, setDirty, setFilled, validityData } = useFieldRootContext();
+	const { labelId } = useLabelableContext();
+	const { clearErrors } = useFormContext();
+	const fieldsetContext = useFieldsetRootContext(true);
+	const disabled = fieldDisabled || disabledProp;
+	const name = fieldName ?? nameProp;
+	const id = useBaseUiId(idProp);
+	const [checkedValue, setCheckedValueUnwrapped] = useControlled({
+		controlled: externalValue,
+		default: defaultValue,
+		name: "RadioGroup",
+		state: "value"
+	});
+	const onValueChange = useStableCallback(onValueChangeProp);
+	const setCheckedValue = useStableCallback((value, eventDetails) => {
+		onValueChange(value, eventDetails);
+		if (eventDetails.isCanceled) return;
+		setCheckedValueUnwrapped(value);
+	});
+	const controlRef = React.useRef(null);
+	const groupInputRef = React.useRef(null);
+	const firstEnabledInputRef = React.useRef(null);
+	function setInputRef(hiddenInput) {
+		let cleanup = void 0;
+		if (inputRefProp) {
+			if (typeof inputRefProp === "function") cleanup = inputRefProp(hiddenInput);
+			else inputRefProp.current = hiddenInput;
+		}
+		groupInputRef.current = hiddenInput;
+		validation.inputRef.current = hiddenInput;
+		return cleanup;
+	}
+	const registerControlRef = useStableCallback((element, isDisabled = false) => {
+		if (!element) return;
+		if (isDisabled) {
+			if (controlRef.current === element) controlRef.current = null;
+			return;
+		}
+		if (controlRef.current == null) controlRef.current = element;
+	});
+	const registerInputRef = useStableCallback((input) => {
+		if (!input || input.disabled) return;
+		if (!firstEnabledInputRef.current) firstEnabledInputRef.current = input;
+		const currentInput = groupInputRef.current;
+		if (input.checked || currentInput == null || currentInput.disabled) return setInputRef(input);
+	});
+	const getFieldValue = useStableCallback(() => checkedValue ?? null);
+	useRegisterFieldControl(controlRef, {
+		id,
+		value: checkedValue,
+		getValue: getFieldValue
+	});
+	useValueChanged(checkedValue, () => {
+		clearErrors(name);
+		setDirty(checkedValue !== validityData.initialValue);
+		setFilled(checkedValue != null);
+		if (shouldValidateOnChange()) validation.commit(checkedValue);
+		else validation.commit(checkedValue, true);
+		const fallbackInput = firstEnabledInputRef.current;
+		if (checkedValue == null && fallbackInput && !fallbackInput.disabled) setInputRef(fallbackInput);
+	});
+	const [touched, setTouched] = React.useState(false);
+	const ariaLabelledby = elementProps["aria-labelledby"] ?? labelId ?? fieldsetContext?.legendId;
+	const state = {
+		...fieldState,
+		disabled: disabled ?? false,
+		required: required ?? false,
+		readOnly: readOnly ?? false
+	};
+	const contextValue = React.useMemo(() => ({
+		...fieldState,
+		checkedValue,
+		disabled,
+		form,
+		validation,
+		name,
+		onValueChange,
+		readOnly,
+		registerControlRef,
+		registerInputRef,
+		required,
+		setCheckedValue,
+		setTouched,
+		touched
+	}), [
+		checkedValue,
+		disabled,
+		form,
+		validation,
+		fieldState,
+		name,
+		onValueChange,
+		readOnly,
+		registerControlRef,
+		registerInputRef,
+		required,
+		setCheckedValue,
+		setTouched,
+		touched
+	]);
+	const defaultProps = {
+		role: "radiogroup",
+		"aria-required": required || void 0,
+		"aria-disabled": disabled || void 0,
+		"aria-readonly": readOnly || void 0,
+		"aria-labelledby": ariaLabelledby,
+		onFocus() {
+			setFocused(true);
+		},
+		onBlur(event) {
+			if (!contains(event.currentTarget, event.relatedTarget)) {
+				setFieldTouched(true);
+				setFocused(false);
+				if (validationMode === "onBlur") validation.commit(checkedValue);
+			}
+		},
+		onKeyDownCapture(event) {
+			if (event.key.startsWith("Arrow")) {
+				setFieldTouched(true);
+				setTouched(true);
+				setFocused(true);
+			}
+		}
+	};
+	return /*#__PURE__*/ jsx(RadioGroupContext.Provider, {
+		value: contextValue,
+		children: /*#__PURE__*/ jsx(CompositeRoot, {
+			render,
+			className,
+			style,
+			state,
+			props: [
+				defaultProps,
+				validation.getValidationProps,
+				elementProps
+			],
+			refs: [forwardedRef],
+			stateAttributesMapping: fieldValidityMapping,
+			enableHomeAndEndKeys: false,
+			modifierKeys: MODIFIER_KEYS
+		})
+	});
+});
+if (process.env.NODE_ENV !== "production") RadioGroup.displayName = "RadioGroup";
+//#endregion
 //#region src/canvas/browser/graph/ReactFlowContainer/CanvasMiniMap.tsx
 function CanvasMiniMapMenuItem({ miniMapExpanded$ }) {
 	const t = useTranslate();
@@ -21350,9 +22335,7 @@ function CanvasMiniMapButton({ miniMapExpanded$ }) {
 }
 //#endregion
 //#region src/canvas/browser/graph/ReactFlowContainer/CanvasControls.tsx
-function CanvasInteractiveMode({ interactiveMode$, defaultOpen = false }) {
-	const t = useTranslate();
-	const mode = useVal(interactiveMode$);
+function CanvasOptionPicker({ label, value, options, onValueChange, disabled = false, defaultOpen = false }) {
 	const [open, setOpen] = useState(defaultOpen);
 	const getPopupContainer = useGetStaticPopupContainer();
 	return /* @__PURE__ */ jsxs(Popover, {
@@ -21360,70 +22343,79 @@ function CanvasInteractiveMode({ interactiveMode$, defaultOpen = false }) {
 		onOpenChange: setOpen,
 		children: [/* @__PURE__ */ jsx(CanvasTooltip, {
 			placement: "top",
-			title: t("interactiveMode.title"),
+			title: label,
 			children: /* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(Button, {
-				"aria-label": t("interactiveMode.title"),
-				className: ReactFlowContainer_module_default.interactiveModeTrigger,
+				"aria-label": label,
+				className: ReactFlowContainer_module_default.viewChoiceTrigger,
+				disabled,
 				size: "icon",
 				type: "button",
 				variant: "ghost",
-				children: /* @__PURE__ */ jsx("i", {
-					className: mode == "mouse" ? "i-lucide-light:mouse" : "i-lucide-light:touchpad",
-					"data-mode-icon": true
-				})
+				children: options.find((option) => option.value === value)?.icon
 			}) })
 		}), /* @__PURE__ */ jsx(PopoverContent, {
 			align: "start",
-			className: ReactFlowContainer_module_default.interactiveModePanel,
+			"aria-label": label,
+			className: ReactFlowContainer_module_default.viewChoicePanel,
 			"data-canvas-control-scope": true,
 			container: typeof document == "undefined" ? void 0 : getPopupContainer(),
 			side: "top",
 			sideOffset: 14,
-			children: /* @__PURE__ */ jsxs("div", {
-				"aria-label": t("interactiveMode.title"),
-				className: ReactFlowContainer_module_default.interactiveModeChoices,
-				role: "radiogroup",
-				children: [/* @__PURE__ */ jsxs(Button, {
-					"aria-checked": mode == "mouse",
-					className: ReactFlowContainer_module_default.interactiveModeChoice,
-					onClick: () => {
-						interactiveMode$.set("mouse");
-						setOpen(false);
-					},
-					role: "radio",
-					type: "button",
-					variant: "outline",
-					children: [
-						/* @__PURE__ */ jsx("i", {
-							"aria-hidden": "true",
-							className: "i-lucide-light:mouse"
-						}),
-						/* @__PURE__ */ jsx("strong", { children: t("interactiveMode.mouse") }),
-						/* @__PURE__ */ jsx("span", { children: t("interactiveMode.mouseDescription") })
-					]
-				}), /* @__PURE__ */ jsxs(Button, {
-					"aria-checked": mode == "touchpad",
-					className: ReactFlowContainer_module_default.interactiveModeChoice,
-					onClick: () => {
-						interactiveMode$.set("touchpad");
-						setOpen(false);
-					},
-					role: "radio",
-					type: "button",
-					variant: "outline",
+			children: /* @__PURE__ */ jsx(RadioGroup, {
+				"aria-label": label,
+				className: ReactFlowContainer_module_default.viewChoices,
+				disabled,
+				onValueChange: (next) => {
+					onValueChange(next);
+					setOpen(false);
+				},
+				value,
+				children: options.map((option) => /* @__PURE__ */ jsxs(RadioRoot, {
+					nativeButton: true,
+					value: option.value,
+					render: /* @__PURE__ */ jsx(Button, {
+						className: ReactFlowContainer_module_default.viewChoice,
+						onClick: () => setOpen(false),
+						type: "button",
+						variant: "outline"
+					}),
 					children: [
-						/* @__PURE__ */ jsx("i", {
-							"aria-hidden": "true",
-							className: "i-lucide-light:touchpad"
-						}),
-						/* @__PURE__ */ jsx("strong", { children: t("interactiveMode.touchpad") }),
-						/* @__PURE__ */ jsx("span", { children: t("interactiveMode.touchpadDescription") })
+						option.icon,
+						/* @__PURE__ */ jsx("strong", { children: option.label }),
+						/* @__PURE__ */ jsx("span", { children: option.description })
 					]
-				})]
+				}, option.value))
 			})
 		})]
 	});
 }
+function CanvasInteractiveMode({ interactiveMode$, defaultOpen = false }) {
+	const t = useTranslate();
+	const mode = useVal(interactiveMode$);
+	return /* @__PURE__ */ jsx(CanvasOptionPicker, {
+		defaultOpen,
+		label: t("interactiveMode.title"),
+		onValueChange: (next) => interactiveMode$.set(next),
+		options: [{
+			value: "mouse",
+			icon: /* @__PURE__ */ jsx("i", {
+				"aria-hidden": "true",
+				className: "i-lucide-light:mouse"
+			}),
+			label: t("interactiveMode.mouse"),
+			description: t("interactiveMode.mouseDescription")
+		}, {
+			value: "touchpad",
+			icon: /* @__PURE__ */ jsx("i", {
+				"aria-hidden": "true",
+				className: "i-lucide-light:touchpad"
+			}),
+			label: t("interactiveMode.touchpad"),
+			description: t("interactiveMode.touchpadDescription")
+		}],
+		value: mode
+	});
+}
 function CanvasInteractiveModeMenu({ interactiveMode$ }) {
 	const t = useTranslate();
 	const mode = useVal(interactiveMode$);
@@ -21445,21 +22437,61 @@ function CanvasInteractiveModeMenu({ interactiveMode$ }) {
 		})]
 	})] })] });
 }
-function CanvasOptionsMenu({ onRelayout, miniMapExpanded$, interactiveMode$ }) {
+function CanvasDirectionIcon({ direction }) {
+	return /* @__PURE__ */ jsx("i", {
+		"aria-hidden": "true",
+		className: direction === "vertical" ? "i-tabler-light:arrow-autofit-down" : "i-tabler-light:arrow-autofit-right"
+	});
+}
+function CanvasDirectionButton({ direction = "horizontal", changingDirection, onChangeDirection }) {
+	const t = useTranslate();
+	return /* @__PURE__ */ jsx(CanvasOptionPicker, {
+		disabled: changingDirection,
+		label: t("layoutDirection.title"),
+		onValueChange: (next) => onChangeDirection?.(next),
+		options: [{
+			value: "vertical",
+			icon: /* @__PURE__ */ jsx(CanvasDirectionIcon, { direction: "vertical" }),
+			label: t("layoutDirection.vertical"),
+			description: t("layoutDirection.verticalDescription")
+		}, {
+			value: "horizontal",
+			icon: /* @__PURE__ */ jsx(CanvasDirectionIcon, { direction: "horizontal" }),
+			label: t("layoutDirection.horizontal"),
+			description: t("layoutDirection.horizontalDescription")
+		}],
+		value: direction
+	});
+}
+function CanvasOptionsMenu({ onRelayout, miniMapExpanded$, interactiveMode$, direction = "horizontal", changingDirection, onChangeDirection }) {
 	const t = useTranslate();
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		onRelayout != null && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled: changingDirection,
 			onClick: onRelayout,
 			children: [/* @__PURE__ */ jsx("i", {
 				"aria-hidden": "true",
-				className: "i-carbon:template"
+				className: "i-lucide-light:layout-template"
 			}), t("optimize")]
 		}),
+		onChangeDirection && /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("layoutDirection.title") }), /* @__PURE__ */ jsxs(DropdownMenuRadioGroup, {
+			value: direction,
+			onValueChange: (value) => onChangeDirection(value),
+			children: [/* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+				disabled: changingDirection,
+				value: "vertical",
+				children: [/* @__PURE__ */ jsx(CanvasDirectionIcon, { direction: "vertical" }), t("layoutDirection.vertical")]
+			}), /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+				disabled: changingDirection,
+				value: "horizontal",
+				children: [/* @__PURE__ */ jsx(CanvasDirectionIcon, { direction: "horizontal" }), t("layoutDirection.horizontal")]
+			})]
+		})] }),
 		miniMapExpanded$ != null && /* @__PURE__ */ jsx(CanvasMiniMapMenuItem, { miniMapExpanded$ }),
 		interactiveMode$ != null && /* @__PURE__ */ jsx(CanvasInteractiveModeMenu, { interactiveMode$ })
 	] });
 }
-function CanvasViewControls({ readOnly = false, interactiveMode$, miniMapExpanded$, maxZoomReached, minZoomReached, onFitView, onRelayout, onZoomIn, onZoomOut, onZoomReset, zoom }) {
+function CanvasViewControls({ readOnly = false, direction, changingDirection, onChangeDirection, interactiveMode$, miniMapExpanded$, maxZoomReached, minZoomReached, onFitView, onRelayout, onZoomIn, onZoomOut, onZoomReset, zoom }) {
 	const t = useTranslate();
 	const [optionsExpanded, setOptionsExpanded] = useState(false);
 	const [popupContainer, setPopupContainer] = useState(null);
@@ -21529,6 +22561,9 @@ function CanvasViewControls({ readOnly = false, interactiveMode$, miniMapExpande
 						}),
 						/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
 						/* @__PURE__ */ jsx(CanvasOptionsMenu, {
+							direction,
+							changingDirection,
+							onChangeDirection,
 							onRelayout,
 							miniMapExpanded$,
 							interactiveMode$
@@ -21590,7 +22625,7 @@ function CanvasViewControls({ readOnly = false, interactiveMode$, miniMapExpande
 							children: /* @__PURE__ */ jsx("i", { className: "i-lucide-light:scan" })
 						})
 					}),
-					(onRelayout != null || miniMapExpanded$ != null || interactiveMode$ != null) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+					(onChangeDirection != null || onRelayout != null || miniMapExpanded$ != null || interactiveMode$ != null) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 						className: ReactFlowContainer_module_default.viewOptions,
 						"data-expanded": optionsExpanded,
 						"aria-hidden": !optionsExpanded,
@@ -21608,16 +22643,22 @@ function CanvasViewControls({ readOnly = false, interactiveMode$, miniMapExpande
 										title: t("optimize"),
 										children: /* @__PURE__ */ jsx(Button, {
 											"aria-label": t("optimize"),
+											disabled: changingDirection,
 											onClick: onRelayout,
 											size: "icon",
 											type: "button",
 											variant: "ghost",
 											children: /* @__PURE__ */ jsx("i", {
 												"aria-hidden": "true",
-												className: "i-carbon:template"
+												className: "i-lucide-light:layout-template"
 											})
 										})
 									}),
+									onChangeDirection != null && /* @__PURE__ */ jsx(CanvasDirectionButton, {
+										direction,
+										changingDirection,
+										onChangeDirection
+									}),
 									miniMapExpanded$ != null && /* @__PURE__ */ jsx(CanvasMiniMapButton, { miniMapExpanded$ }),
 									interactiveMode$ != null && /* @__PURE__ */ jsx(CanvasInteractiveMode, { interactiveMode$ })
 								]
@@ -21975,7 +23016,6 @@ var selector = (s) => ({
 });
 var FlowControls = /*#__PURE__*/ memo((props) => {
 	const rf = useReactFlow();
-	const flowState = useStoreApi();
 	const { minZoomReached, maxZoomReached, zoom } = useStore(selector, shallowPlainObjectEqual);
 	const nodes = useNodes();
 	const bgId = useId().replaceAll(":", "");
@@ -21985,11 +23025,6 @@ var FlowControls = /*#__PURE__*/ memo((props) => {
 		duration: props.layoutMotion === false ? 0 : 150,
 		maxZoom: 1
 	};
-	const relayout = props.onRelayout == null ? void 0 : () => {
-		props.onRelayout?.(getLayoutWidth(flowState.getState()));
-		props.onBeforeFitView?.();
-		setTimeout(() => rf.fitView(fitViewOptions), 100);
-	};
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		props.dottedBackground && /* @__PURE__ */ jsx(Background, {
 			id: bgId,
@@ -22001,6 +23036,9 @@ var FlowControls = /*#__PURE__*/ memo((props) => {
 		/* @__PURE__ */ jsx(CanvasViewControls, {
 			readOnly: !props.editable,
 			interactiveMode$: props.interactiveMode$,
+			direction: props.direction,
+			changingDirection: props.changingDirection,
+			onChangeDirection: props.onChangeDirection,
 			miniMapExpanded$: props.miniMapExpanded$,
 			maxZoomReached,
 			minZoomReached,
@@ -22015,7 +23053,7 @@ var FlowControls = /*#__PURE__*/ memo((props) => {
 					props.onFitView?.();
 				}, 100);
 			},
-			onRelayout: relayout,
+			onRelayout: props.onRelayout,
 			onZoomIn: () => rf.zoomIn({ duration: getViewportTransitionDuration() }),
 			onZoomOut: () => rf.zoomOut({ duration: getViewportTransitionDuration() }),
 			onZoomReset: () => rf.zoomTo(1, { duration: getViewportTransitionDuration() }),
@@ -22136,16 +23174,21 @@ var ReactFlowContainerInner = (props) => {
 		if (tooShort(state.from, position)) return;
 		const nodeId = toManifestNodeId(state.fromNode.id);
 		const handle = toManifestHandleName(state.fromHandle.id);
-		const connectionSide = state.fromHandle.type == "target" ? "left" : "right";
+		const upstream = state.fromHandle.type === "target";
+		const connectionDirection = upstream ? "upstream" : "downstream";
+		const nodePosition = props.direction === "vertical" ? {
+			x: position.x - 160 - 8,
+			y: position.y - (upstream ? 84 : 8)
+		} : {
+			x: position.x - (upstream ? 328 : 8),
+			y: position.y - 38 - 8
+		};
 		cancelAnimationFrame(pickerFrame.current);
 		pickerFrame.current = requestAnimationFrame(() => props.onRequestAddNode?.({
-			position: connectionSide == "left" ? {
-				x: position.x - 250,
-				y: position.y
-			} : position,
+			position: nodePosition,
 			screenPosition,
-			connectionSide,
-			connection: connectionSide == "left" ? (source) => ({
+			connectionDirection,
+			connection: upstream ? (source) => ({
 				source,
 				sourceHandle: "$out",
 				target: nodeId,
@@ -22160,7 +23203,8 @@ var ReactFlowContainerInner = (props) => {
 	}, [
 		rf,
 		props.editable,
-		props.onRequestAddNode
+		props.onRequestAddNode,
+		props.direction
 	]);
 	const editable = toTrue(props.editable);
 	const interactiveMode = useVal(props.interactiveMode$);
@@ -22189,6 +23233,25 @@ var ReactFlowContainerInner = (props) => {
 	const [fittingView, setFittingView] = useState(false);
 	const [layoutReady, setLayoutReady] = useState(props.layoutMotion !== false || props.onLayoutMeasured == null);
 	const onBeforeFitView = useCallback(() => setFittingView(true), []);
+	const relayout = useCallback(() => {
+		props.onRelayout?.(getLayoutWidth(flowState.getState()));
+	}, [flowState, props.onRelayout]);
+	const relayoutAndFitView = useCallback(() => {
+		relayout();
+		onBeforeFitView();
+		setTimeout(() => rf.fitView({
+			padding: .15,
+			duration: props.layoutMotion === false ? 0 : 150,
+			maxZoom: 1,
+			nodes: selectedNodes.length > 1 ? selectedNodes : void 0
+		}), 100);
+	}, [
+		relayout,
+		onBeforeFitView,
+		props.layoutMotion,
+		rf,
+		selectedNodes
+	]);
 	useLayoutEffect(() => {
 		setLayoutReady(props.layoutMotion !== false || props.onLayoutMeasured == null);
 	}, [props.layoutMotion, props.onLayoutMeasured]);
@@ -22238,6 +23301,7 @@ var ReactFlowContainerInner = (props) => {
 		onBeforeFitView,
 		props.layoutMotion,
 		props.onLayoutMeasured,
+		props.direction,
 		rf,
 		updateNodeInternals
 	]);
@@ -22363,7 +23427,7 @@ var ReactFlowContainerInner = (props) => {
 				onViewportChange,
 				maxZoom: 3,
 				minZoom: canvasMinZoom,
-				nodesDraggable: props.nodesDraggable ?? props.editable,
+				nodesDraggable: !props.changingDirection && (props.nodesDraggable ?? props.editable),
 				nodesConnectable: editable && props.onConnect != null,
 				onEdgeContextMenu: (event, edge) => (event.preventDefault(), setEdgeContextMenu({
 					edge,
@@ -22427,7 +23491,9 @@ var ReactFlowContainerInner = (props) => {
 						editable: !!editable,
 						nodes: selectedNodes,
 						onDelete: deleteSelectedNodes,
-						duplicateNodes: props.duplicateNodes
+						duplicateNodes: props.duplicateNodes,
+						onRelayout: props.onRelayout ? relayout : void 0,
+						changingDirection: props.changingDirection
 					}),
 					/* @__PURE__ */ jsx(FlowControls, {
 						editable: props.editable,
@@ -22438,9 +23504,12 @@ var ReactFlowContainerInner = (props) => {
 						toolbar: props.toolbar,
 						miniMapExpanded$: props.miniMapExpanded$,
 						interactiveMode$: props.interactiveMode$,
+						direction: props.direction,
+						changingDirection: props.changingDirection,
+						onChangeDirection: props.onChangeDirection,
 						layoutMotion: props.layoutMotion,
 						onBeforeFitView,
-						onRelayout: props.onRelayout,
+						onRelayout: props.onRelayout ? relayoutAndFitView : void 0,
 						onFitView: props.onFitView,
 						dottedBackground: props.dottedBackground
 					}),
@@ -22622,6 +23691,16 @@ function useSelectionItems(props) {
 			icon: /* @__PURE__ */ jsx("i", { className: "i-codicon:copy" }),
 			onClick: duplicateNodes
 		},
+		props.onRelayout && {
+			label: t("optimize"),
+			key: "$relayout",
+			icon: /* @__PURE__ */ jsx("i", {
+				"aria-hidden": "true",
+				className: "i-lucide-light:layout-template"
+			}),
+			onClick: props.onRelayout,
+			disabled: props.changingDirection
+		},
 		toTrue(hasSkip) && {
 			label: skip ? t("nodeActions.skipDisableAll") : t("nodeActions.skipEnableAll"),
 			key: "$skip",
@@ -22646,6 +23725,8 @@ function tooShort(from, to) {
 //#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 }) => {
 	const editable = useVal(flowCanvasStore.$.editable);
+	const direction = useVal(flowCanvasStore.$.direction);
+	const changingDirection = useVal(flowCanvasStore.$.changingDirection);
 	const nodeMiniMapPhase = useVal(flowCanvasStore.$.nodeMiniMapPhase);
 	useEffect(flowCanvasStore.setupForceDelete, []);
 	return /* @__PURE__ */ jsx(CanvasAnnotationContext.Provider, {
@@ -22667,6 +23748,9 @@ var FlowCanvas = ({ flowCanvasStore, annotationContext, onActivateSelection, onS
 						bottomRightTools,
 						toolbar,
 						editable,
+						direction,
+						changingDirection,
+						onChangeDirection: editable && flowCanvasStore.canChangeDirection ? flowCanvasStore.changeDirection : void 0,
 						nodesDraggable: nodesDraggable ?? editable,
 						className,
 						i18n: flowCanvasStore.i18n,
@@ -22715,4 +23799,4 @@ var FlowCanvas = ({ flowCanvasStore, annotationContext, onActivateSelection, onS
 	});
 };
 //#endregion
-export { isMac as C, toManifestNodeId as S, E as _, JSONViewer as a, toViewEdge as b, CanvasNodeIcon as c, IconStack as d, selectableTimeZones as f, cronDescription as g, timeZoneOffset as h, Textarea as i, defaultTriggerIcon as l, timeZoneLongLabel as m, setAddItemId as n, collapseAllNested as o, timeZoneLabel as p, NodeHistoryContext as r, formatDuration as s, FlowCanvas as t, useDebouncedValue as u, CanvasTooltip as v, isSameViewport as w, toManifestHandleName as x, CanvasStore as y };
+export { toManifestHandleName as C, isSameViewport as E, toViewEdge as S, isMac as T, timeZoneOffset as _, NodeHistoryContext as a, CanvasTooltip as b, defaultTriggerIcon as c, formatDuration as d, useDebouncedValue as f, timeZoneLongLabel as g, timeZoneLabel as h, setAddItemId as i, JSONViewer as l, selectableTimeZones as m, CompositeRoot as n, Textarea as o, IconStack as p, ACTIVE_COMPOSITE_ITEM as r, CanvasNodeIcon as s, FlowCanvas as t, collapseAllNested as u, cronDescription as v, toManifestNodeId as w, CanvasStore as x, E as y };