@oomol-lab/open-flow 0.1.0-beta.62 → 0.1.0-beta.64

package/dist/browser/{flowWorkspace-BgZaFKZm.js → flowWorkspace-DxLc1Ybv.js}

@@ -1,11 +1,11 @@
 import { i as __require, o as __toESM, r as __exportAll, t as __commonJSMin } from "./rolldown-runtime-CEgmsyvS.js";
-import { $t as DropdownMenuContent, A as datePickerValue, An as zh_TW_default$1, At as followWorkbenchLink, Bn as errorNotice, Bt as VirtualScrollArea, C as valueForEditor, Cn as Badge, D as calendarChange, Dn as createI18n$1, E as typeOfSchema, En as SourceSelect, F as feishuResourceKind, Fn as fr_default$1, Ft as PopoverPanelContent, G as semanticNodeIcon, Gt as Empty, H as resourceData, Ht as InputGroup, I as supportsFeishuChatFilter, In as en_default$1, It as PopoverTitle, J as providerIcon, Jt as EmptyHeader, K as triggerNodeIcon, Kn as resolutionOutputPorts, Kt as EmptyContent, Ln as I18n, Lt as PopoverTrigger, Mn as ru_default$1, Mt as PopoverContent, Nn as ko_default$1, Nt as PopoverDescription, O as calendarDate, On as uiLocales, P as indexAddNodeOptions, Pn as ja_default$1, Pt as PopoverHeader, Q as useIconifyData, Qn as triggerConfigValues, Qt as DropdownMenuCheckboxItem, R as mapSource, Rn as FeishuEventPicker, Rt as NativeScrollArea, S as schemaForEditor, Sn as useMenuRootContext, T as isUnconstrainedSchema, Tn as SourceForm, U as resourceValue, Ut as InputGroupAddon, V as observeResource, Vt as Z$2, W as designerGraph, Wn as decodeResultList, Wt as InputGroupInput, X as IconifyProvider, Xn as isJsonObject, Xt as EmptyTitle, Y as ContentIcon, Yn as triggerOutputDefinitions, Yt as EmptyMedia, Z as useIconifyCollectionLoader, Zn as triggerConfigValue, Zt as DropdownMenu, _n as MenuItem, _r as Checkbox, an as DropdownMenuSeparator, ar as openApiTask, b as editorComponent, bn as useContextMenuRootContext, cn as DropdownMenuSubTrigger, cr as serverAddress, ct as diagnosticNodeId, dn as findRootOwnerId, dt as connectionCatalog, en as DropdownMenuGroup, et as canCancelRun, fn as useCompositeItem, gn as MenuPopup, gr as controlErrorCode, hn as MenuPortal, in as DropdownMenuRadioItem, ir as openApiFieldIssues, j as isDateFormat, jn as zh_CN_default$1, jt as Popover, k as datePickerChange, kn as waitBranchDescription, kt as IdTooltip, ln as DropdownMenuTrigger, lr as servers, lt as schemaMismatchMessage, mn as MenuPositioner, n as agentTool, nn as DropdownMenuLabel, nr as listOperations, nt as revisionView, on as DropdownMenuSub, or as securityOptions, pn as MenuRoot, q as actionSummary, qn as sourceOutputLabel, qt as EmptyDescription, rn as DropdownMenuRadioGroup, rr as object, sn as DropdownMenuSubContent, sr as selectOperation, st as diagnosticMessage, tn as DropdownMenuItem, tt as hasRunFilter, un as isElementDisabled, ur as inputValue, vn as MenuGroup, vr as useAriaLabelledBy, w as getDefaultValue, x as editorGroups, xn as MenuRootContext, y as defaultValueEditorSchema, yn as ContextMenuRootContext, yr as IconThemeContext, zn as EventSourceSetup, zt as ScrollArea } from "./flowChanges-CzYIVevI.js";
+import { $ as useIconifyData, $n as isJsonObject, $t as EmptyTitle, A as datePickerValue, An as createI18n$1, Bn as I18n, Bt as PopoverTrigger, C as valueForEditor, Cn as useContextMenuRootContext, Cr as controlErrorCode, D as calendarChange, E as typeOfSchema, En as Badge, Er as IconThemeContext, F as feishuResourceKind, Fn as ru_default$1, Ft as PopoverContent, G as designerGraph, Gt as InputGroup, H as resourceData, Hn as EventSourceSetup, Ht as ScrollArea, I as supportsFeishuChatFilter, In as ko_default$1, It as PopoverDescription, J as actionSummary, Jt as Empty, K as semanticNodeIcon, Kt as InputGroupAddon, Ln as ja_default$1, Lt as PopoverHeader, Mn as waitBranchDescription, Mt as IdTooltip, Nn as zh_TW_default$1, Nt as followWorkbenchLink, O as calendarDate, On as SourceForm, P as indexAddNodeOptions, Pn as zh_CN_default$1, Pt as Popover, Q as useIconifyCollectionLoader, Qn as triggerOutputDefinitions, Qt as EmptyMedia, R as mapSource, Rn as fr_default$1, Rt as PopoverPanelContent, S as schemaForEditor, Sn as ContextMenuRootContext, T as isUnconstrainedSchema, Tn as useMenuRootContext, Tr as useAriaLabelledBy, U as resourceValue, Un as errorNotice, Ut as VirtualScrollArea, V as observeResource, Vn as FeishuEventPicker, Vt as NativeScrollArea, Wt as Z$2, X as ContentIcon, Xn as sourceOutputLabel, Xt as EmptyDescription, Y as providerIcon, Yn as resolutionOutputPorts, Yt as EmptyContent, Z as IconifyProvider, Zt as EmptyHeader, _n as MenuPositioner, _r as inputValue, an as DropdownMenuLabel, b as editorComponent, bn as MenuItem, cn as DropdownMenuSeparator, dn as DropdownMenuSubTrigger, dr as openApiFieldIssues, dt as schemaMismatchMessage, en as DropdownMenu, et as wrapLayout, fn as DropdownMenuTrigger, fr as openApiTask, gn as MenuRoot, gr as servers, hn as useCompositeItem, hr as serverAddress, in as DropdownMenuItem, it as revisionView, j as isDateFormat, jn as uiLocales, jt as WorkflowExportMenuItem, k as datePickerChange, kn as SourceSelect, ln as DropdownMenuSub, lr as listOperations, lt as diagnosticMessage, mn as findRootOwnerId, mr as selectOperation, n as agentTool, nn as DropdownMenuContent, nt as canCancelRun, on as DropdownMenuRadioGroup, or as triggerConfigValue, pn as isElementDisabled, pr as securityOptions, pt as connectionCatalog, q as triggerNodeIcon, qn as decodeResultList, qt as InputGroupInput, rn as DropdownMenuGroup, rt as hasRunFilter, sn as DropdownMenuRadioItem, sr as triggerConfigValues, tn as DropdownMenuCheckboxItem, un as DropdownMenuSubContent, ur as object, ut as diagnosticNodeId, vn as MenuPortal, w as getDefaultValue, wn as MenuRootContext, wr as Checkbox, x as editorGroups, xn as MenuGroup, y as defaultValueEditorSchema, yn as MenuPopup, zn as en_default$1, zt as PopoverTitle } from "./flowChanges-BAMkSaKF.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, s as useI18n, t as isArray$1, u as useVal } from "./dist-BFmpkX4P.js";
-import { $r as inputPress, Ai as useButton, At as IndexGuessBehavior, Bi as isElement, Br as transitionStatusMapping, Bt as HORIZONTAL_KEYS, C as FieldDescription, Ci as clsx, Cr as stopEvent$1, Ct as SelectContent, Di as NOOP, Dn as useFloatingRootContext, Dr as getTarget, Dt as SelectTrigger, E as FieldLabel, Ei as EMPTY_OBJECT, Er as contains, Et as SelectSeparator, Fi as useIsoLayoutEffect, Fn as useDismiss, Fr as createLucideIcon, Ft as ARROW_LEFT, Gr as cancelOpen, Gt as isNativeInput, Hr as useValueChanged, Ht as MODIFIER_KEYS, I as matchesSchema, In as useClick, Ir as useTransitionStatus, It as ARROW_RIGHT, Jr as escapeKey, Jt as useAnchoredPopupScrollLock, Kn as DROPDOWN_COLLISION_AVOIDANCE, Kr as clearPress, Kt as scrollIntoViewIfNeeded, L as schemaObject, Li as useStableCallback, Ln as FloatingFocusManager, Lr as useOpenChangeComplete, Lt as ARROW_UP, M as decisionTask, Mr as useLabelableId, Mt as ALL_KEYS, N as defaultDecisionQuestion, Ni as formatErrorMessage, Nr as ChevronDown, Nt as ARROW_DOWN, O as decodeRevisionContent, Or as isAndroid, Ot as SelectValue, P as limitDecisionQuestions, Pi as mergeProps, Pt as ARROW_KEYS, Q as operatorsForType, Qn as useStore$1, Qr as inputClear, Qt as useAnchorPositioning, R as variableInputCompatible, Ri as useRefWithInit, S as Field, Si as cva, Sn as useInteractions, Sr as isListIndexDisabled, St as SelectChevron, T as FieldGroup, Ti as EMPTY_ARRAY$1, Tr as activeElement, Tt as SelectItem, U as nodeNameIssue, Ur as createChangeEventDetails, Ut as VERTICAL_KEYS, Vt as HORIZONTAL_KEYS_WITH_EXTRA_KEYS, Wn as FloatingPortal, Wr as createGenericEventDetails, Wt as VERTICAL_KEYS_WITH_EXTRA_KEYS, X as nodeInputMappings, Xt as getDisabledMountTransitionStyles, Yn as addEventListener, Yt as usePositioner, Z as operandHandle, Zn as Store, Zr as inputChange, Zt as InternalBackdrop, _ as TooltipPositioner, _i as visuallyHiddenInput, _n as selectedValueIncludes, _r as getGridCellIndices, a as DialogDescription, an as pressableTriggerOpenStateMapping, ar as useOnFirstRender, at as webhookSupportsBody, b as TooltipRoot, bi as buttonVariants, br as getMinListIndex, c as DialogTitle, ci as useLabelableContext, cn as useOpenInteractionType, d as TooltipContent, di as useFieldRootContext, dn as stringifyAsLabel, ei as itemPress, en as useDirection, et as unaryOperator, f as TooltipProvider, fi as useBaseUiId, fn as stringifyAsValue, g as TooltipPopup, gi as visuallyHidden, gn as removeItem, gr as getGridCellIndexOfCorner, h as TooltipArrow, hi as fieldValidityMapping, hn as findItemIndex, hr as findNonDisabledListIndex, i as DialogContent, in as popupStateMapping, ir as useValueAsRef, it as webhookMethods, j as decisionQuestionIssues, ji as CompositeRootContext, jr as ownerDocument, jt as useCompositeListItem, k as decisionLimits, ki as useMergedRefs, kr as isFirefox, l as DialogTrigger, li as useFormContext, ln as hasNullItemLabel, lr as useTimeout, m as createTooltipHandle, mi as DEFAULT_FIELD_STATE_ATTRIBUTES, mn as defaultItemEquality, mr as createGridCellMap, n as Dialog, ni as none$1, nn as inertValue, nr as require_builtin_esm_external_require_react, on as triggerOpenStateMapping, or as Label, p as TooltipTrigger, pi as useId$1, pn as compareItemEquality, q as comparisonIssue, qr as closePress, rn as getPseudoElementBounds, rr as createSelector, rt as dequal, si as triggerPress, sn as resolveAriaLabelledBy, sr as Input$1, t as Icon, ti as listNavigation, tn as CompositeList, tr as require_with_selector, tt as valueType, u as Tooltip, ui as useRegisterFieldControl, un as isGroupedItems, v as TooltipPortal, vi as useControlled, vr as getGridNavigatedIndex, vt as string, w as FieldError, wi as useRenderElement, wr as isInteractiveElement, wt as SelectGroup, x as Spinner, xi as cn$1, xn as useListNavigation, xr as isIndexOutOfListBounds, xt as Select$1, y as TooltipTrigger$1, yi as Button$1, yn as useTypeahead, yr as getMaxListIndex, zr as TransitionStatusDataAttributes } from "./icons-CajfDpy_.js";
-import { a as renameObjectField, i as objectValue, l as resolveUiLanguage, n as isJsonValue, o as setObjectField, r as jsonDataTypes, s as valueType$1, t as initialValue } from "./value-DL_poNiC.js";
-import { n as compile, r as validate } from "./flowRunInputEditorStore-Dsxyfwae.js";
-import { t as WorkbenchSelect } from "./workbenchSelect-H9wzEFkH.js";
+import { $ as operandHandle, $n as Store, $r as inputChange, $t as InternalBackdrop, A as decisionLimits, Ar as isAndroid, At as SelectValue, Bi as useRefWithInit, C as FieldDescription, Ci as cn$1, Cn as useListNavigation, Cr as isIndexOutOfListBounds, Ct as Select$1, Di as EMPTY_ARRAY$1, Dr as activeElement, Dt as SelectItem, E as FieldLabel, Ei as useRenderElement, Er as isInteractiveElement, Et as SelectGroup, F as limitDecisionQuestions, Fi as formatErrorMessage, Fr as ChevronDown, Ft as ARROW_DOWN, Gr as createChangeEventDetails, Gt as VERTICAL_KEYS, Hi as isElement, Hr as transitionStatusMapping, Ht as HORIZONTAL_KEYS, Ii as mergeProps, It as ARROW_KEYS, Jn as DROPDOWN_COLLISION_AVOIDANCE, Jr as clearPress, Jt as scrollIntoViewIfNeeded, Kn as FloatingPortal, Kr as createGenericEventDetails, Kt as VERTICAL_KEYS_WITH_EXTRA_KEYS, L as matchesSchema, Li as useIsoLayoutEffect, Ln as useDismiss, Lr as createLucideIcon, Lt as ARROW_LEFT, M as decisionQuestionIssues, Mi as useButton, Mt as IndexGuessBehavior, N as decisionTask, Ni as CompositeRootContext, Nr as ownerDocument, Nt as useCompositeListItem, O as decodeRevisionContent, Oi as EMPTY_OBJECT, Or as contains, Ot as SelectSeparator, P as defaultDecisionQuestion, Pr as useLabelableId, Pt as ALL_KEYS, Q as nodeInputMappings, Qt as getDisabledMountTransitionStyles, R as schemaObject, Rn as useClick, Rr as useTransitionStatus, Rt as ARROW_RIGHT, S as Field, Si as buttonVariants, Sr as getMinListIndex, T as FieldGroup, Ti as clsx, Tr as stopEvent$1, Tt as SelectContent, Ut as HORIZONTAL_KEYS_WITH_EXTRA_KEYS, Vr as TransitionStatusDataAttributes, W as nodeNameIssue, Wr as useValueChanged, Wt as MODIFIER_KEYS, Xr as escapeKey, Xt as useAnchoredPopupScrollLock, Y as comparisonIssue, Yr as closePress, Zn as addEventListener, Zt as usePositioner, _ as TooltipPositioner, _i as fieldValidityMapping, _n as findItemIndex, _r as findNonDisabledListIndex, a as DialogDescription, an as getPseudoElementBounds, ar as createSelector, at as dequal, b as TooltipRoot, bi as useControlled, br as getGridNavigatedIndex, bt as string, c as DialogTitle, cn as triggerOpenStateMapping, cr as Label, d as TooltipContent, di as useFormContext, dn as hasNullItemLabel, dr as useTimeout, dt as discriminatedUnion, ei as inputClear, en as useAnchorPositioning, er as useStore$1, et as operatorsForType, f as TooltipProvider, fi as useRegisterFieldControl, fn as isGroupedItems, g as TooltipPopup, gi as DEFAULT_FIELD_STATE_ATTRIBUTES, gn as defaultItemEquality, gr as createGridCellMap, gt as number, h as TooltipArrow, hi as useId$1, hn as compareItemEquality, ht as literal, i as DialogContent, ii as none$1, in as inertValue, ir as require_builtin_esm_external_require_react, ji as useMergedRefs, jr as isFirefox, ki as NOOP, kn as useFloatingRootContext, kr as getTarget, kt as SelectTrigger, l as DialogTrigger, li as triggerPress, ln as resolveAriaLabelledBy, lr as Input$1, m as createTooltipHandle, mi as useBaseUiId, mn as stringifyAsValue, n as Dialog, ni as itemPress, nn as useDirection, nt as unaryOperator, on as popupStateMapping, or as useValueAsRef, ot as webhookMethods, p as TooltipTrigger, pi as useFieldRootContext, pn as stringifyAsLabel, qr as cancelOpen, qt as isNativeInput, ri as listNavigation, rn as CompositeList, rr as require_with_selector, rt as valueType, sn as pressableTriggerOpenStateMapping, sr as useOnFirstRender, st as webhookSupportsBody, t as Icon, ti as inputPress, u as Tooltip, ui as useLabelableContext, un as useOpenInteractionType, v as TooltipPortal, vi as visuallyHidden, vn as removeItem, vr as getGridCellIndexOfCorner, w as FieldError, wi as cva, wn as useInteractions, wr as isListIndexDisabled, wt as SelectChevron, x as Spinner, xi as Button$1, xn as useTypeahead, xr as getMaxListIndex, y as TooltipTrigger$1, yi as visuallyHiddenInput, yn as selectedValueIncludes, yr as getGridCellIndices, yt as strictObject, z as variableInputCompatible, zi as useStableCallback, zn as FloatingFocusManager, zr as useOpenChangeComplete, zt as ARROW_UP } from "./icons-Db2Jb2iX.js";
+import { a as renameObjectField, i as objectValue, n as isJsonValue, o as setObjectField, r as jsonDataTypes, s as valueType$1, t as initialValue, u as resolveUiLanguage } from "./value-BADHeZ9I.js";
+import { n as compile, r as validate } from "./flowRunInputEditorStore-B2Rw4VsT.js";
+import { t as WorkbenchSelect } from "./workbenchSelect-C-jf6NIM.js";
 import * as React from "react";
 import reactExports, { Children, Fragment, Suspense, createContext, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -360,6 +360,16 @@ function useIgnoredNodes(identity) {
 		}, [])
 	};
 }
+//#endregion
+//#region src/workbench/browser/runtime/editor/canvasAnnotations.ts
+function canvasAnnotations(flowId, draft, status, moduleStatus, saveFailed) {
+	if (flowId == null || draft == null || draft.flowId != flowId || status == "loading" || status == "noDraft") return;
+	return {
+		flowId,
+		revisionId: draft.revisionId,
+		syncState: saveFailed || status == "failed" || moduleStatus == "failed" ? "failed" : status == "saving" || moduleStatus == "saving" ? "saving" : moduleStatus == "dirty" ? "dirty" : "saved"
+	};
+}
 Array.isArray;
 var isNumber = (value) => {
 	try {
@@ -1716,7 +1726,7 @@ function NodePickerContent({ options, connections, loadConnections, browseOption
 	const [appId, setAppId] = useState();
 	const [navigation, setNavigation] = useState();
 	const navigateApp = (id) => {
-		if (list.current) scrollPositions.current.set(pickerViewKey(appId, term, page), list.current.scrollTop);
+		if (viewport) scrollPositions.current.set(pickerViewKey(appId, term, page), viewport.scrollTop);
 		setNavigation(id ? "forward" : "back");
 		setAppId(id);
 		setAppQuery("");
@@ -1729,7 +1739,7 @@ function NodePickerContent({ options, connections, loadConnections, browseOption
 	const [failed, setFailed] = useState(false);
 	const [adding, setAdding] = useState(false);
 	const busy = useRef(false);
-	const list = useRef(null);
+	const [viewport, setViewport] = useState(null);
 	const [root, setRoot] = useState(null);
 	const mount = useCallback((element) => {
 		setRoot(element?.closest(".open-flow-workbench") ?? element?.closest(".open-flow-theme") ?? null);
@@ -1823,8 +1833,9 @@ function NodePickerContent({ options, connections, loadConnections, browseOption
 		t
 	]);
 	useLayoutEffect(() => {
-		list.current?.scrollTo(0, scrollPositions.current.get(pickerViewKey(appId, term, page)) ?? 0);
+		viewport?.scrollTo(0, scrollPositions.current.get(pickerViewKey(appId, term, page)) ?? 0);
 	}, [
+		viewport,
 		appId,
 		term,
 		page,
@@ -1857,9 +1868,9 @@ function NodePickerContent({ options, connections, loadConnections, browseOption
 			onClick: () => void add(item),
 			onDragStart: (event) => drag(event, item),
 			onDragEnd,
-			className: `group/app h-auto justify-start whitespace-normal font-normal flex min-w-0 items-start gap-2.5 rounded-lg px-2.5 py-1.5 text-left outline-none hover:bg-accent focus-visible:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 ${compact ? "" : "[&>span:first-child]:translate-y-[2px]"}`,
+			className: `group/app h-auto justify-start whitespace-normal font-normal flex min-w-0 items-start gap-2.5 rounded-[calc(var(--ui-control-radius)+2px)] px-2.5 py-1.5 text-left outline-none hover:bg-accent focus-visible:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 ${compact ? "" : "[&>span:first-child]:translate-y-[2px]"}`,
 			children: [item.kind == "connector" || item.kind == "trigger" && "trigger" in item && (item.trigger.kind == "catalog" || item.trigger.kind == "connect") ? /* @__PURE__ */ jsx(ProviderAppIcon, { src: item.icon }) : /* @__PURE__ */ jsx("span", {
-				className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-muted",
+				className: "flex size-7 shrink-0 items-center justify-center rounded-[var(--ui-control-radius)] bg-muted",
 				children: /* @__PURE__ */ jsx(ContentIcon, {
 					src: item.icon,
 					className: "size-[18px] data-[icon-kind=initials]:text-[20px]"
@@ -1897,7 +1908,6 @@ function NodePickerContent({ options, connections, loadConnections, browseOption
 	};
 	const scrollToGroup = (event) => {
 		const section = event.currentTarget.closest("section");
-		const viewport = list.current;
 		if (section && viewport) viewport.scrollTo({
 			top: viewport.scrollTop + section.getBoundingClientRect().top - viewport.getBoundingClientRect().top,
 			behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
@@ -1933,7 +1943,7 @@ function NodePickerContent({ options, connections, loadConnections, browseOption
 		type: "button",
 		disabled: disabled || adding,
 		onClick: () => navigateApp(item.id),
-		className: "group/app h-auto justify-start whitespace-normal font-normal flex min-w-0 items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-[13px] outline-none hover:bg-accent focus-visible:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50",
+		className: "group/app h-auto justify-start whitespace-normal font-normal flex min-w-0 items-center gap-2.5 rounded-[calc(var(--ui-control-radius)+2px)] px-2.5 py-1.5 text-left text-[13px] outline-none hover:bg-accent focus-visible:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50",
 		children: [
 			/* @__PURE__ */ jsx(ProviderAppIcon, { src: item.icon }),
 			/* @__PURE__ */ jsxs("span", {
@@ -1957,7 +1967,7 @@ function NodePickerContent({ options, connections, loadConnections, browseOption
 	return /* @__PURE__ */ jsxs(Tabs, {
 		value: page,
 		onValueChange: (value) => setPage(value === "triggers" ? "triggers" : "nodes"),
-		className: "h-full min-h-0 gap-0",
+		className: "open-flow-node-picker h-full min-h-0 gap-0",
 		"aria-busy": adding,
 		children: [
 			/* @__PURE__ */ jsx("div", {
@@ -1978,7 +1988,7 @@ function NodePickerContent({ options, connections, loadConnections, browseOption
 						onKeyDown: (event) => {
 							if (event.key == "ArrowDown") {
 								event.preventDefault();
-								list.current?.querySelector("button:not(:disabled)")?.focus();
+								viewport?.querySelector("button:not(:disabled)")?.focus();
 							}
 						}
 					}),
@@ -2002,14 +2012,14 @@ function NodePickerContent({ options, connections, loadConnections, browseOption
 				children: /* @__PURE__ */ jsxs(TabsList, {
 					"aria-label": t("designer.addNode"),
 					variant: "flat",
-					className: "w-full",
+					className: "w-full rounded-[var(--ui-control-radius)]",
 					children: [/* @__PURE__ */ jsx(TabsTrigger, {
 						value: "nodes",
-						className: "px-3",
+						className: "rounded-[calc(var(--ui-control-radius)-3px)] px-3",
 						children: t("addNode.blocks")
 					}), /* @__PURE__ */ jsx(TabsTrigger, {
 						value: "triggers",
-						className: "px-3",
+						className: "rounded-[calc(var(--ui-control-radius)-3px)] px-3",
 						children: t("addNode.triggers")
 					})]
 				})
@@ -2021,79 +2031,88 @@ function NodePickerContent({ options, connections, loadConnections, browseOption
 					className: navigation_page_module_default.page,
 					"data-navigation": navigation,
 					children: [app != null && /* @__PURE__ */ jsxs("div", {
-						className: "mx-3 mb-2 grid h-8 shrink-0 grid-cols-[28px_minmax(0,1fr)_28px] items-center gap-2 rounded-lg bg-[color-mix(in_srgb,var(--ui-foreground)_4%,var(--ui-popover))] px-1.5",
-						children: [/* @__PURE__ */ jsx(Button$1, {
-							size: "icon-sm",
-							variant: "ghost",
-							className: "text-muted-foreground hover:bg-popover hover:text-foreground hover:shadow-sm focus-visible:bg-popover focus-visible:text-foreground dark:hover:bg-[color-mix(in_srgb,var(--ui-foreground)_12%,var(--ui-popover))] dark:focus-visible:bg-[color-mix(in_srgb,var(--ui-foreground)_12%,var(--ui-popover))]",
-							"aria-label": t(query.trim() ? "nodePicker.backToResults" : "nodePicker.back"),
-							onClick: () => navigateApp(),
+						className: "mx-3 mb-2 grid h-8 shrink-0 grid-cols-[28px_minmax(0,1fr)_28px] items-center gap-2 rounded-[var(--ui-control-radius)] bg-[color-mix(in_srgb,var(--ui-foreground)_4%,var(--ui-popover))] px-1.5",
+						children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+							render: /* @__PURE__ */ jsx(Button$1, {
+								size: "icon-sm",
+								variant: "ghost",
+								className: "text-muted-foreground [--ui-control-hover-background:color-mix(in_srgb,var(--ui-foreground)_8%,var(--ui-popover))]",
+								"aria-label": t(query.trim() ? "nodePicker.backToResults" : "nodePicker.back"),
+								onClick: () => navigateApp()
+							}),
 							children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left" })
-						}), /* @__PURE__ */ jsx("span", {
+						}), /* @__PURE__ */ jsx(TooltipContent, {
+							container: root,
+							children: t(query.trim() ? "nodePicker.backToResults" : "nodePicker.back")
+						})] }), /* @__PURE__ */ jsx("span", {
 							className: "min-w-0 truncate text-center text-sm font-semibold",
 							title: app.label,
 							children: app.label
 						})]
-					}), /* @__PURE__ */ jsxs("div", {
-						ref: list,
-						className: "min-h-0 flex-1 overflow-y-scroll overscroll-contain px-2 pb-2",
-						onKeyDown: (event) => {
-							if (event.key != "ArrowDown" && event.key != "ArrowUp") return;
-							const buttons = [...event.currentTarget.querySelectorAll("button:not(:disabled)")];
-							const index = buttons.indexOf(event.target);
-							if (index < 0) return;
-							event.preventDefault();
-							buttons[(index + (event.key == "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length]?.focus();
-						},
-						children: [app != null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-							section(t("addNode.triggers"), visibleTriggers),
-							actionSections(visibleActions),
-							!choicesLoading && !choicesFailed && !catalogFailed && visibleActions.length == 0 && visibleTriggers.length == 0 && /* @__PURE__ */ jsx(PickerStatus, {})
-						] }) : searching ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-							matchedApps.length > 0 && /* @__PURE__ */ jsxs("section", {
-								className: "mb-3",
-								children: [/* @__PURE__ */ jsx("h3", {
-									style: { margin: 0 },
-									className: "sticky top-0 z-10 bg-popover px-2.5 pb-1 pt-2 text-xs font-medium text-muted-foreground",
-									children: /* @__PURE__ */ jsx(PickerGroupButton, {
-										onClick: scrollToGroup,
-										children: t("nodePicker.apps")
-									})
-								}), matchedApps.length == 1 ? /* @__PURE__ */ jsx("div", {
-									className: "grid",
-									children: matchedApps.map((item) => appRow(item, true))
-								}) : /* @__PURE__ */ jsx(AppDirectory, {
-									viewport: list.current,
-									children: matchedApps.map((item) => appRow(item))
-								})]
-							}),
-							section(t("addNode.triggers"), matches.filter((item) => item.kind == "trigger")),
-							section(t("addNode.blocks"), builtInNodeItems(matches)),
-							section(humanInTheLoop, humanInTheLoopItems(matches)),
-							actionSections(matches),
-							!loading && !catalogLoading && !failed && !catalogError && !catalogFailed && matchedApps.length == 0 && matches.length == 0 && /* @__PURE__ */ jsx(PickerStatus, {})
-						] }) : page == "triggers" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [section(t("nodePicker.builtIn"), local.filter((item) => item.kind == "trigger")), apps.filter((item) => item.triggers.length > 0).map((item) => /* @__PURE__ */ jsx("div", { children: section(item.label, item.triggers, false, item.label) }, item.id))] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-							section(t("nodePicker.builtInNodes"), builtInNodeItems(local), true),
-							section(humanInTheLoop, humanInTheLoopItems(local), true),
-							pickerAppGroups.map((group, priority) => {
-								const items = apps.filter((item) => item.directory != null && (item.priority ?? 3) == priority);
-								if (items.length == 0) return null;
-								return /* @__PURE__ */ jsxs("section", {
+					}), /* @__PURE__ */ jsx(ScrollArea, {
+						className: "min-h-0 flex-1 [&_[data-overlayscrollbars-viewport]]:overscroll-contain",
+						defer: false,
+						events: { initialized: (instance) => setViewport(instance.elements().viewport) },
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "px-3 pb-2",
+							onKeyDown: (event) => {
+								if (event.key != "ArrowDown" && event.key != "ArrowUp") return;
+								const buttons = [...event.currentTarget.querySelectorAll("button:not(:disabled)")];
+								const index = buttons.indexOf(event.target);
+								if (index < 0) return;
+								event.preventDefault();
+								buttons[(index + (event.key == "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length]?.focus();
+							},
+							children: [app != null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								section(t("addNode.triggers"), visibleTriggers),
+								actionSections(visibleActions),
+								!choicesLoading && !choicesFailed && !catalogFailed && visibleActions.length == 0 && visibleTriggers.length == 0 && /* @__PURE__ */ jsx(PickerStatus, {})
+							] }) : searching ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								matchedApps.length > 0 && /* @__PURE__ */ jsxs("section", {
 									className: "mb-3",
-									children: [/* @__PURE__ */ jsx(ProviderGroupHeading, {
-										group,
-										container: root,
-										onClick: scrollToGroup
-									}), /* @__PURE__ */ jsx(AppDirectory, {
-										viewport: list.current,
-										children: items.map((item) => appRow(item))
+									children: [/* @__PURE__ */ jsx("h3", {
+										style: { margin: 0 },
+										className: "sticky top-0 z-10 bg-popover px-2.5 pb-1 pt-2 text-xs font-medium text-muted-foreground",
+										children: /* @__PURE__ */ jsx(PickerGroupButton, {
+											onClick: scrollToGroup,
+											children: t("nodePicker.apps")
+										})
+									}), matchedApps.length == 1 ? /* @__PURE__ */ jsx("div", {
+										className: "grid",
+										children: matchedApps.map((item) => appRow(item, true))
+									}) : /* @__PURE__ */ jsx(AppDirectory, {
+										viewport,
+										children: matchedApps.map((item) => appRow(item))
 									})]
-								}, group);
-							})
-						] }), (app != null ? choicesLoading : catalogLoading || loading) && /* @__PURE__ */ jsx(PickerStatus, {
-							loading: true,
-							searching
-						})]
+								}),
+								section(t("addNode.triggers"), matches.filter((item) => item.kind == "trigger")),
+								section(t("addNode.blocks"), builtInNodeItems(matches)),
+								section(humanInTheLoop, humanInTheLoopItems(matches)),
+								actionSections(matches),
+								!loading && !catalogLoading && !failed && !catalogError && !catalogFailed && matchedApps.length == 0 && matches.length == 0 && /* @__PURE__ */ jsx(PickerStatus, {})
+							] }) : page == "triggers" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [section(t("nodePicker.builtIn"), local.filter((item) => item.kind == "trigger")), apps.filter((item) => item.triggers.length > 0).map((item) => /* @__PURE__ */ jsx("div", { children: section(item.label, item.triggers, false, item.label) }, item.id))] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								section(t("nodePicker.builtInNodes"), builtInNodeItems(local), true),
+								section(humanInTheLoop, humanInTheLoopItems(local), true),
+								pickerAppGroups.map((group, priority) => {
+									const items = apps.filter((item) => item.directory != null && (item.priority ?? 3) == priority);
+									if (items.length == 0) return null;
+									return /* @__PURE__ */ jsxs("section", {
+										className: "mb-3",
+										children: [/* @__PURE__ */ jsx(ProviderGroupHeading, {
+											group,
+											container: root,
+											onClick: scrollToGroup
+										}), /* @__PURE__ */ jsx(AppDirectory, {
+											viewport,
+											children: items.map((item) => appRow(item))
+										})]
+									}, group);
+								})
+							] }), (app != null ? choicesLoading : catalogLoading || loading) && /* @__PURE__ */ jsx(PickerStatus, {
+								loading: true,
+								searching
+							})]
+						})
 					})]
 				}, appId ?? "catalog")
 			})
@@ -22060,7 +22079,7 @@ function CodeEditor({ ariaDescribedBy, ariaLabel, diagnostics, disabled, errorLa
 		darkMode.current = darkMode$;
 		setFailed(false);
 		setLoading(true);
-		const extension = import("./typeScriptSession-fXPMFGjW.js").then(({ loadTypeScriptExtension }) => loadTypeScriptExtension(uri, typingRef.current, () => prepareCompletionRef.current?.())).catch(() => void 0);
+		const extension = import("./typeScriptSession-D0bjYDeg.js").then(({ loadTypeScriptExtension }) => loadTypeScriptExtension(uri, typingRef.current, () => prepareCompletionRef.current?.())).catch(() => void 0);
 		claimEditor(uri).then((nextRelease) => {
 			release = nextRelease;
 			if (disposed) {
@@ -22147,7 +22166,7 @@ function CodeEditor({ ariaDescribedBy, ariaLabel, diagnostics, disabled, errorLa
 		editor.current?.updateOptions({ ariaDescribedBy });
 	}, [ariaDescribedBy]);
 	useEffect(() => {
-		import("./typeScriptSession-fXPMFGjW.js").then(({ updateTypeScriptTyping }) => updateTypeScriptTyping(uri, typing)).catch(noop$1);
+		import("./typeScriptSession-D0bjYDeg.js").then(({ updateTypeScriptTyping }) => updateTypeScriptTyping(uri, typing)).catch(noop$1);
 	}, [typing, uri]);
 	useEffect(() => {
 		if (location != null) editor.current?.revealPosition?.(location.line, location.column);
@@ -35094,6 +35113,12 @@ function useInspectorPanel({ identity, preferences, selectedNodeIds, onSelectNod
 	};
 }
 //#endregion
+//#region src/canvas/browser/base/compare.ts
+var isSameXYPosition = (p1, p2) => !p1 || !p2 ? p1 === p2 : p1.x === p2.x && p1.y === p2.y;
+var isSize = (s) => isPlainObject(s) && isNumber(s.width) && isNumber(s.height);
+var isSameSize = (s1, s2) => !s1 || !s2 ? s1 === s2 : s1.width === s2.width && s1.height === s2.height;
+var isSameViewport = (v1, v2) => !v1 || !v2 ? v1 === v2 : v1.x === v2.x && v1.y === v2.y && v1.zoom === v2.zoom;
+//#endregion
 //#region src/canvas/browser/stores/node/constants.ts
 var NODE_TYPE = /* @__PURE__ */ function(NODE_TYPE) {
 	NODE_TYPE["TaskNode"] = "task_node";
@@ -35113,23 +35138,11 @@ var DEFAULT_POSITION = /* @__PURE__ */ Object.freeze({
 	y: 0
 });
 //#endregion
-//#region src/canvas/browser/base/compare.ts
-var isSameXYPosition = (p1, p2) => !p1 || !p2 ? p1 === p2 : p1.x === p2.x && p1.y === p2.y;
-var isSize = (s) => isPlainObject(s) && isNumber(s.width) && isNumber(s.height);
-var isSameSize = (s1, s2) => !s1 || !s2 ? s1 === s2 : s1.width === s2.width && s1.height === s2.height;
-var isSameViewport = (v1, v2) => !v1 || !v2 ? v1 === v2 : v1.x === v2.x && v1.y === v2.y && v1.zoom === v2.zoom;
-//#endregion
 //#region src/canvas/browser/base/rfHelpers.ts
 /** Converts a manifest node identifier to a React Flow identifier. */
 function toRFNodeId(nodeId, nodeType) {
 	return (nodeType === NODE_TYPE.CommentNode ? "c:" : "m:") + nodeId;
 }
-var RF_NODE_TYPE = /* @__PURE__ */ function(RF_NODE_TYPE) {
-	RF_NODE_TYPE["CommentNode"] = "comment_node";
-	/** Node generated from manifest */
-	RF_NODE_TYPE["ManifestNode"] = "manifest_node";
-	return RF_NODE_TYPE;
-}({});
 function getRFNodeType(rfNodeId) {
 	if (rfNodeId[1] === ":") switch (rfNodeId[0]) {
 		case "m": return "manifest_node";
@@ -38051,17 +38064,64 @@ var createRFCommand = (nodes) => new RFCommandImpl(nodes);
 * registered instance.
 */
 var RFCommandImpl = class {
+	get remoteViewportChange() {
+		return this.remoteMoves > 0;
+	}
+	async executeRemote(command) {
+		const executions = [];
+		for (const [rf, registration] of this.rfs) {
+			if (!rf.viewportInitialized) continue;
+			const run = async () => {
+				if (this.rfs.get(rf) !== registration) return;
+				this.remoteMoves++;
+				try {
+					switch (command.type) {
+						case "focus": {
+							const node = this.nodes.get(command.nodeId)?.$.rfNode.value;
+							if (node != null) await focusNodes(this.nodes.size, rf, [node], { duration: 0 });
+							break;
+						}
+						case "zoom":
+							await rf.zoomTo(command.zoom, { duration: 0 });
+							break;
+						case "pan": {
+							const viewport = rf.getViewport();
+							await rf.setViewport({
+								...viewport,
+								x: viewport.x + command.dx,
+								y: viewport.y + command.dy
+							}, { duration: 0 });
+							break;
+						}
+						case "fit": if (rf.getNodes().length > 0) await rf.fitView({
+							padding: .15,
+							maxZoom: 1,
+							duration: 0
+						});
+					}
+				} finally {
+					this.remoteMoves--;
+				}
+			};
+			const next = (registration.pending ?? Promise.resolve()).then(run, run);
+			registration.pending = next;
+			executions.push(next);
+		}
+		await Promise.all(executions);
+	}
 	send(method, ...args) {
-		for (const rf of this.rfs) this[method](rf, ...args);
+		for (const rf of this.rfs.keys()) this[method](rf, ...args);
 	}
 	constructor(nodes) {
 		this.nodes = nodes;
 		this.dispose = disposableStore();
-		this.rfs = /* @__PURE__ */ new Set();
+		this.rfs = /* @__PURE__ */ new Map();
+		this.remoteMoves = 0;
 		this.onRFInstance = (rf) => {
-			this.rfs.add(rf);
+			const registration = {};
+			this.rfs.set(rf, registration);
 			return () => {
-				this.rfs.delete(rf);
+				if (this.rfs.get(rf) === registration) this.rfs.delete(rf);
 			};
 		};
 		this.dispose.add(() => {
@@ -38085,7 +38145,7 @@ function getCenter(rfNode) {
 }
 function focusNodes(nodesCount, rf, rfNodes, options) {
 	if (!rfNodes.length) return;
-	if (rfNodes.length > 1) rf.fitBounds(rf.getNodesBounds(rfNodes), {
+	if (rfNodes.length > 1) return rf.fitBounds(rf.getNodesBounds(rfNodes), {
 		duration: 150,
 		padding: .15,
 		...options
@@ -38094,7 +38154,7 @@ function focusNodes(nodesCount, rf, rfNodes, options) {
 		const rfNode = rfNodes[0];
 		const center = getCenter(rfNode);
 		const zoom = getNodeMinimap(nodesCount, rf.getZoom()) === NodeMiniMapPhase.None ? rf.getZoom() : 1;
-		rf.setCenter(center.x, center.y, {
+		return rf.setCenter(center.x, center.y, {
 			zoom,
 			...options
 		});
@@ -38346,19 +38406,19 @@ var CanvasStore = class {
 		};
 	}
 	doRelayout() {
+		const nodes = this.allLayoutNodes();
 		const g = new ie.Graph().setDefaultEdgeLabel(() => ({}));
 		g.setGraph({
 			rankdir: "LR",
 			ranksep: 80
 		});
 		const singles = /* @__PURE__ */ new Set();
-		for (const rfNode of this.$.rfNodes.value) {
-			if (getRFNodeType(rfNode.id) === RF_NODE_TYPE.CommentNode) continue;
-			singles.add(rfNode.id);
-			g.setNode(rfNode.id, {
-				...rfNode,
-				width: rfNode.measured?.width ?? 0,
-				height: rfNode.measured?.height ?? 0
+		for (const node of nodes) {
+			const { id, measured } = node.$.rfNode.value;
+			singles.add(id);
+			g.setNode(id, {
+				width: measured?.width ?? 0,
+				height: measured?.height ?? 0
 			});
 		}
 		for (const rfEdge of this.$.rfEdges.value) {
@@ -38368,16 +38428,18 @@ var CanvasStore = class {
 		}
 		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 updateNodePosition = (node) => {
-			const { id, measured } = node.$.rfNode.value;
-			const { x, y } = g.node(id);
-			node.$$.position.set({
-				x: x - (measured?.width ?? 0) / 2,
-				y: y - (measured?.height ?? 0) / 2
-			});
-		};
-		this.$.nodes.forEach(updateNodePosition);
-		this.#callbacks.onMoveNodes(Object.fromEntries(this.allLayoutNodes().map((node) => [node.nodeId, node.$.position.value])));
+		const positions = wrapLayout(nodes.map((node) => {
+			const { x, y, width, height, rank } = g.node(node.rfNodeId);
+			return {
+				id: node.nodeId,
+				column: rank,
+				x: x - width / 2,
+				y: y - height / 2,
+				height
+			};
+		}));
+		for (const node of nodes) node.$$.position.set(positions[node.nodeId]);
+		this.#callbacks.onMoveNodes(positions);
 	}
 	doRemoveNodes(nodes) {
 		if (this.disposed || !nodes?.size) return;
@@ -38479,6 +38541,75 @@ function useNodeMiniMapPhase() {
 	return useContext(NodeMiniMapContext);
 }
 //#endregion
+//#region src/canvas/browser/graph/annotations.tsx
+var CanvasAnnotationContext = createContext(void 0);
+var metadataStringLimit = 256;
+var metadataByteLimit = 2048;
+var encoder = new TextEncoder();
+function validIdentity(value) {
+	return value.length > 0 && value.length <= metadataStringLimit;
+}
+function serializeMetadata(metadata) {
+	const text = JSON.stringify(metadata);
+	return encoder.encode(text).length <= metadataByteLimit ? text : void 0;
+}
+function excerpt(value, limit) {
+	if (value.length <= limit) return value;
+	if (limit <= 1) return "";
+	let end = limit - 1;
+	const last = value.charCodeAt(end - 1);
+	if (last >= 55296 && last <= 56319) end--;
+	return `${value.slice(0, end)}…`;
+}
+/** Keep identities intact; shorten display text to the annotation protocol's limits. */
+function nodeAnnotationMetadata(context, node) {
+	if (![
+		context.flowId,
+		context.revisionId,
+		node.id
+	].every(validIdentity)) return;
+	const metadata = {
+		description: node.description?.trim() ? excerpt(node.description, metadataStringLimit) : void 0,
+		flowId: context.flowId,
+		revisionId: context.revisionId,
+		nodeId: node.id,
+		syncState: context.syncState
+	};
+	let text = serializeMetadata(metadata);
+	while (text == null) {
+		if (!metadata.description) return;
+		metadata.description = excerpt(metadata.description, metadata.description.length - 1) || void 0;
+		text = serializeMetadata(metadata);
+	}
+	return text;
+}
+/** Browser annotation fields are scalar values, so the complete ID list is encoded as a JSON string. */
+function selectionAnnotationMetadata(context, nodeIds, tooLarge) {
+	if (nodeIds.length < 2 || ![context.flowId, context.revisionId].every(validIdentity) || nodeIds.some((id) => !id)) return;
+	const identities = {
+		flowId: context.flowId,
+		revisionId: context.revisionId,
+		syncState: context.syncState
+	};
+	const ids = JSON.stringify(nodeIds);
+	return (ids.length <= metadataStringLimit ? serializeMetadata({
+		...identities,
+		nodeIds: ids
+	}) : void 0) ?? serializeMetadata({
+		...identities,
+		nodeCount: nodeIds.length,
+		error: excerpt(tooLarge, metadataStringLimit)
+	});
+}
+function useNodeAnnotation(node) {
+	const context = useContext(CanvasAnnotationContext);
+	if (context == null || node == null || node.kind == "comment") return {};
+	return {
+		"oai-annotatable": node.title,
+		"oai-annotation-metadata": nodeAnnotationMetadata(context, node)
+	};
+}
+//#endregion
 //#region src/canvas/browser/graph/CanvasStoreContext.tsx
 var CanvasDarkContext = createContext(false);
 var CanvasStoreContext = createContext(null);
@@ -49434,7 +49565,7 @@ function connectionPortIndex(node, handleId) {
 	if (!handle) return 0;
 	return handles.filter((item) => item.position === handle.position && item.y < handle.y).length;
 }
-/** A return loop belongs to its output: fixed side offsets and a lane below that card. */
+/** Return connections use fixed side offsets and a lane below the output or above a lower row. */
 function getConnectionPath({ sourceBounds, targetBounds, sourcePortIndex = 0, targetPortIndex = 0, ...params }) {
 	const { sourceX, sourceY, targetX, targetY, sourcePosition = Position.Bottom, targetPosition = Position.Top } = params;
 	const reverse = sourcePosition === Position.Left && targetPosition === Position.Right;
@@ -49452,11 +49583,13 @@ function getConnectionPath({ sourceBounds, targetBounds, sourcePortIndex = 0, ta
 	const clearance = 40 + Math.max(sourcePortIndex, targetPortIndex) * 12;
 	const radius = 16;
 	const outputBounds = reverse ? targetBounds : sourceBounds;
+	const inputBounds = reverse ? sourceBounds : targetBounds;
 	const rightY = reverse ? targetY : sourceY;
 	const leftY = reverse ? sourceY : targetY;
 	const right = rightX + clearance;
 	const left = leftX - clearance;
-	const laneY = Math.max(rightY, outputBounds ? outputBounds.y + outputBounds.height : rightY) + clearance;
+	const outputLane = Math.max(rightY, outputBounds ? outputBounds.y + outputBounds.height : rightY) + clearance;
+	const laneY = Math.max(outputLane, inputBounds ? inputBounds.y - clearance : outputLane);
 	const points = [
 		{
 			x: rightX,
@@ -51459,6 +51592,7 @@ function ConditionRule({ item, t }) {
 var NodeLayout = /* @__PURE__ */ memo(({ canvasStore, nodeStore, visible }) => {
 	const t = useTranslate();
 	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 executionInput = modelNode != null && modelNode.kind != "trigger" && modelNode.kind != "value";
 	const editable = useVal(canvasStore.$.editable);
@@ -51550,6 +51684,7 @@ var NodeLayout = /* @__PURE__ */ memo(({ canvasStore, nodeStore, visible }) => {
 		children: /* @__PURE__ */ jsx(NodeStoreContext.Provider, {
 			value: nodeStore,
 			children: /* @__PURE__ */ jsx("div", {
+				...annotation,
 				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),
@@ -51799,6 +51934,25 @@ var ReactFlowContainer_module_default = {
 	viewSeparator: "ReactFlowContainer_viewSeparator_ebe22"
 };
 //#endregion
+//#region src/canvas/common/commands.ts
+var canvasMinZoom = .1;
+discriminatedUnion("type", [
+	strictObject({
+		type: literal("focus"),
+		nodeId: string().min(1)
+	}),
+	strictObject({
+		type: literal("zoom"),
+		zoom: number().min(canvasMinZoom).max(3)
+	}),
+	strictObject({
+		type: literal("pan"),
+		dx: number(),
+		dy: number()
+	}),
+	strictObject({ type: literal("fit") })
+]);
+//#endregion
 //#region src/canvas/browser/base/dragNDrop.ts
 var TRANSFER_SHARED_BLOCK_KEY = "application/oomol-designer/sharedBlock";
 var TRANSFER_SCRIPTLET_KEY = "application/oomol-designer/scriptlet";
@@ -52397,6 +52551,34 @@ function HelperLines({ horizontal, vertical, strokeStyle = "#b7654d" }) {
 	});
 }
 //#endregion
+//#region src/canvas/browser/graph/ReactFlowContainer/selectionAnnotation.tsx
+/** React Flow owns the selection rectangle and exposes no prop for its custom attributes. */
+function SelectionAnnotation({ nodes }) {
+	const context = useContext(CanvasAnnotationContext);
+	const root = useStore((state) => state.domNode);
+	const active = useStore((state) => state.nodesSelectionActive && !state.userSelectionActive);
+	const t = useTranslate();
+	const label = t("annotation.selectedNodes", { count: nodes.length });
+	const metadata = context != null && nodes.every((node) => NodeStore.is(node.data.store)) ? selectionAnnotationMetadata(context, nodes.map((node) => node.data.store.nodeId), t("annotation.selectionTooLarge")) : void 0;
+	useLayoutEffect(() => {
+		if (!active || metadata == null) return;
+		const target = root?.querySelector(".react-flow__nodesselection-rect");
+		if (target == null) return;
+		target.setAttribute("oai-annotatable", label);
+		target.setAttribute("oai-annotation-metadata", metadata);
+		return () => {
+			target.removeAttribute("oai-annotatable");
+			target.removeAttribute("oai-annotation-metadata");
+		};
+	}, [
+		root,
+		active,
+		label,
+		metadata
+	]);
+	return null;
+}
+//#endregion
 //#region src/canvas/browser/graph/ReactFlowContainer/ReactFlowContainer.tsx
 var PAN_ON_DRAG_MOUSE = [0];
 var PAN_ON_DRAG_TOUCHPAD = [1];
@@ -52509,6 +52691,7 @@ var FlowControls = /*#__PURE__*/ memo((props) => {
 	] });
 });
 var ReactFlowContainerInner = (props) => {
+	const annotationContext = useContext(CanvasAnnotationContext);
 	const flowState = useStoreApi();
 	const selecting = useRef(false);
 	const selectionEnd = useRef(props.onSelectionEnd);
@@ -52794,6 +52977,7 @@ var ReactFlowContainerInner = (props) => {
 		children: /* @__PURE__ */ jsx(PaneRectContext.Provider, {
 			value: paneRect$,
 			children: /* @__PURE__ */ jsxs(index, {
+				"oai-annotation-container": annotationContext == null ? void 0 : "",
 				onKeyDown: (event) => {
 					if ((event.key === "Enter" || event.key === " ") && event.target instanceof Element && event.target.matches(".react-flow__node")) props.onActivateSelection?.();
 					if (!editable || event.defaultPrevented || event.nativeEvent.isComposing) return;
@@ -52837,7 +53021,7 @@ var ReactFlowContainerInner = (props) => {
 				viewport,
 				onViewportChange,
 				maxZoom: 3,
-				minZoom: .1,
+				minZoom: canvasMinZoom,
 				nodesDraggable: props.nodesDraggable ?? props.editable,
 				nodesConnectable: editable && props.onConnect != null,
 				onEdgeContextMenu: (event, edge) => (event.preventDefault(), setEdgeContextMenu({
@@ -52864,6 +53048,7 @@ var ReactFlowContainerInner = (props) => {
 				onConnect: editable ? props.onConnect : void 0,
 				onDragOver: editable && (props.onAddNode != null || props.onDropAddItem != null) ? handleDragOver : void 0,
 				onDrop: editable && (props.onAddNode != null || props.onDropAddItem != null) ? onDrop : void 0,
+				onMove: props.onMove,
 				onMoveEnd: props.onMoveEnd,
 				onNodeDragStop: props.onNodeDragStop,
 				onSelectionChange: props.onSelectionChange,
@@ -52896,6 +53081,7 @@ var ReactFlowContainerInner = (props) => {
 				connectionLineComponent: ConnectionLine,
 				"aria-readonly": !editable,
 				children: [
+					/* @__PURE__ */ jsx(SelectionAnnotation, { nodes: selectedNodes }),
 					(props.canDeleteNodes ?? true) && !selectionInProgress && /* @__PURE__ */ jsx(SelectionFloatBar, {
 						editable: !!editable,
 						nodes: selectedNodes,
@@ -53117,67 +53303,71 @@ function tooShort(from, to) {
 }
 //#endregion
 //#region src/canvas/browser/graph/FlowCanvas/FlowCanvas.tsx
-var FlowCanvas = ({ flowCanvasStore, onActivateSelection, onSelectionStart, onSelectionEnd, onInspectSelection, inspectorOpen = false, onRequestAddNode, cornerTools, cornerLeading, topLeftTools, bottomRightTools, toolbar, dark, dottedBackground, fitView, nodesDraggable, layoutMotion, className, addNodeRequest, addItemRequest, onMoveEnd, onNodeDragStop, onSelectionChange, isValidConnection, onDropAddItem }) => {
+var FlowCanvas = ({ flowCanvasStore, annotationContext, onActivateSelection, onSelectionStart, onSelectionEnd, onInspectSelection, inspectorOpen = false, onRequestAddNode, cornerTools, cornerLeading, topLeftTools, bottomRightTools, toolbar, dark, dottedBackground, fitView, nodesDraggable, layoutMotion, className, addNodeRequest, addItemRequest, onMove, onMoveEnd, onNodeDragStop, onSelectionChange, isValidConnection, onDropAddItem }) => {
 	const editable = useVal(flowCanvasStore.$.editable);
 	const nodeMiniMapPhase = useVal(flowCanvasStore.$.nodeMiniMapPhase);
 	useEffect(flowCanvasStore.setupForceDelete, []);
-	return /* @__PURE__ */ jsx(InspectSelectionContext.Provider, {
-		value: {
-			onInspect: onInspectSelection,
-			expanded: inspectorOpen
-		},
-		children: /* @__PURE__ */ jsx(CanvasStoreProvider, {
-			value: flowCanvasStore,
-			dark,
-			children: /* @__PURE__ */ jsx(NodeMiniMapProvider, {
-				value: nodeMiniMapPhase,
-				children: /* @__PURE__ */ jsx(ReactFlowContainer, {
-					cornerTools,
-					cornerLeading,
-					topLeftTools,
-					bottomRightTools,
-					toolbar,
-					editable,
-					nodesDraggable: nodesDraggable ?? editable,
-					className,
-					i18n: flowCanvasStore.i18n,
-					dark,
-					dottedBackground: dottedBackground ?? editable,
-					fitView: fitView ?? !editable,
-					fitViewOptions,
-					layoutMotion,
-					nodeTypes: NODE_TYPES,
-					edgeTypes: EDGE_TYPES,
-					miniMapExpanded$: flowCanvasStore.$$.miniMapExpanded,
-					interactiveMode$: flowCanvasStore.$$.interactiveMode,
-					nodes$: flowCanvasStore.$.rfNodes,
-					edges$: flowCanvasStore.$.rfEdges,
-					viewport$: flowCanvasStore.$$.viewport,
-					onRequestAddNode,
-					addNodeRequest,
-					addItemRequest,
-					onAddNode: flowCanvasStore.onAddNode,
-					onBeforeDelete: flowCanvasStore.onBeforeDelete,
-					onNodesChange: flowCanvasStore.handleNodesChange,
-					onEdgesChange: flowCanvasStore.handleEdgesChange,
-					onConnect: flowCanvasStore.onRFConnect,
-					onMoveEnd,
-					onNodeDragStop,
-					onSelectionChange,
-					onActivateSelection,
-					onInspectSelection,
-					onSelectionStart,
-					onSelectionEnd,
-					isValidConnection,
-					onDropAddItem,
-					onRelayout: editable ? flowCanvasStore.onRelayout : void 0,
-					onLayoutMeasured: flowCanvasStore.completeLayout,
-					onInstance: flowCanvasStore.rfCommand.onRFInstance,
-					onInit: flowCanvasStore.onInit,
-					onCopy: flowCanvasStore.onCopy,
-					onPaste: flowCanvasStore.onPaste,
-					waitNode: flowCanvasStore.waitNode,
-					duplicateNodes: flowCanvasStore.duplicateNodes
+	return /* @__PURE__ */ jsx(CanvasAnnotationContext.Provider, {
+		value: annotationContext,
+		children: /* @__PURE__ */ jsx(InspectSelectionContext.Provider, {
+			value: {
+				onInspect: onInspectSelection,
+				expanded: inspectorOpen
+			},
+			children: /* @__PURE__ */ jsx(CanvasStoreProvider, {
+				value: flowCanvasStore,
+				dark,
+				children: /* @__PURE__ */ jsx(NodeMiniMapProvider, {
+					value: nodeMiniMapPhase,
+					children: /* @__PURE__ */ jsx(ReactFlowContainer, {
+						cornerTools,
+						cornerLeading,
+						topLeftTools,
+						bottomRightTools,
+						toolbar,
+						editable,
+						nodesDraggable: nodesDraggable ?? editable,
+						className,
+						i18n: flowCanvasStore.i18n,
+						dark,
+						dottedBackground: dottedBackground ?? editable,
+						fitView: fitView ?? !editable,
+						fitViewOptions,
+						layoutMotion,
+						nodeTypes: NODE_TYPES,
+						edgeTypes: EDGE_TYPES,
+						miniMapExpanded$: flowCanvasStore.$$.miniMapExpanded,
+						interactiveMode$: flowCanvasStore.$$.interactiveMode,
+						nodes$: flowCanvasStore.$.rfNodes,
+						edges$: flowCanvasStore.$.rfEdges,
+						viewport$: flowCanvasStore.$$.viewport,
+						onRequestAddNode,
+						addNodeRequest,
+						addItemRequest,
+						onAddNode: flowCanvasStore.onAddNode,
+						onBeforeDelete: flowCanvasStore.onBeforeDelete,
+						onNodesChange: flowCanvasStore.handleNodesChange,
+						onEdgesChange: flowCanvasStore.handleEdgesChange,
+						onConnect: flowCanvasStore.onRFConnect,
+						onMove,
+						onMoveEnd,
+						onNodeDragStop,
+						onSelectionChange,
+						onActivateSelection,
+						onInspectSelection,
+						onSelectionStart,
+						onSelectionEnd,
+						isValidConnection,
+						onDropAddItem,
+						onRelayout: editable ? flowCanvasStore.onRelayout : void 0,
+						onLayoutMeasured: flowCanvasStore.completeLayout,
+						onInstance: flowCanvasStore.rfCommand.onRFInstance,
+						onInit: flowCanvasStore.onInit,
+						onCopy: flowCanvasStore.onCopy,
+						onPaste: flowCanvasStore.onPaste,
+						waitNode: flowCanvasStore.waitNode,
+						duplicateNodes: flowCanvasStore.duplicateNodes
+					})
 				})
 			})
 		})
@@ -53206,7 +53396,21 @@ function FlowCanvasView(props) {
 	const propsRef = useRef(props);
 	const selectedEdge = useRef();
 	propsRef.current = props;
-	const onMoveEnd = useCallback((_, viewport) => propsRef.current.onMoveViewport(viewport), [store]);
+	const lastMove = useRef();
+	const onMove = useCallback((_, viewport) => {
+		lastMove.current = {
+			viewport,
+			remote: store.rfCommand.remoteViewportChange
+		};
+	}, [store]);
+	const onMoveEnd = useCallback((_, viewport) => {
+		const move = lastMove.current;
+		if (move != null && (move.remote || !isSameViewport(move.viewport, viewport))) return;
+		propsRef.current.onMoveViewport(viewport);
+	}, [store]);
+	useEffect(() => props.subscribeCanvasCommands?.((command) => {
+		store.rfCommand.executeRemote(command).catch((error) => console.error("Failed to execute canvas command.", error));
+	}), [store, props.subscribeCanvasCommands]);
 	const onNodeDragStop = useCallback((_, node, nodes) => {
 		const moved = nodes.length > 0 ? nodes : [node];
 		propsRef.current.onMoveNodes(Object.fromEntries(moved.flatMap((item) => {
@@ -53264,6 +53468,7 @@ function FlowCanvasView(props) {
 	}, [store, props.focusNodeRequest]);
 	const selectionIds = () => store.$.rfNodes.value.flatMap((node) => node.selected && node.data?.store ? [node.data.store.nodeId] : []);
 	return /* @__PURE__ */ jsx(FlowCanvas, {
+		annotationContext: props.annotationContext,
 		cornerTools: props.cornerTools,
 		cornerLeading: props.cornerLeading,
 		topLeftTools: props.topLeftTools,
@@ -53280,6 +53485,7 @@ function FlowCanvasView(props) {
 		flowCanvasStore: store,
 		isValidConnection,
 		layoutMotion: props.layoutMotion,
+		onMove,
 		onMoveEnd,
 		onNodeDragStop,
 		onDropAddItem,
@@ -53391,7 +53597,7 @@ function focusPanel(event) {
 	if (element instanceof Element && element.closest("a, button, input, label, select, textarea, [contenteditable=\"true\"]")) return;
 	event.currentTarget.focus({ preventScroll: true });
 }
-var WorkbenchCanvas = forwardRef(function WorkbenchCanvas({ nodePicker, addNodeControl, addNodeOptions, history, disabled, interactiveMode$, focusNodeRequest, inspectorOpen, model, onAddNode, onConnect, onChangeNodeContentHidden, onChangeComment, onCopy, onDeleteEdge, onDeleteNodes, onDuplicate, onMoveNodes, onMoveViewport, onPaste, provideAddNodeOptions, onSelectNodes, onActivateSelection, onSelectionStart, onSelectionEnd, onToggleInspector, ignoredNodeIds, onIgnoreNodes, runControl, cornerLeading, connectionControl, topLeftTools, bottomRightTools, selectedNodeIds, theme }, ref) {
+var WorkbenchCanvas = forwardRef(function WorkbenchCanvas({ nodePicker, annotationContext, addNodeControl, addNodeOptions, history, disabled, interactiveMode$, focusNodeRequest, inspectorOpen, model, onAddNode, onConnect, onChangeNodeContentHidden, onChangeComment, onCopy, onDeleteEdge, onDeleteNodes, onDuplicate, onMoveNodes, onMoveViewport, subscribeCanvasCommands, onPaste, provideAddNodeOptions, onSelectNodes, onActivateSelection, onSelectionStart, onSelectionEnd, onToggleInspector, ignoredNodeIds, onIgnoreNodes, runControl, cornerLeading, connectionControl, topLeftTools, bottomRightTools, selectedNodeIds, theme }, ref) {
 	const [pickerRequest, setPickerRequest] = useState();
 	const [pickerCentered, setPickerCentered] = useState(false);
 	useEffect(() => {
@@ -53532,6 +53738,7 @@ var WorkbenchCanvas = forwardRef(function WorkbenchCanvas({ nodePicker, addNodeC
 		tabIndex: 0,
 		children: [
 			/* @__PURE__ */ jsx(FlowCanvasView, {
+				annotationContext,
 				onRequestAddNode: (request) => {
 					if (addNodeRequest == null) setPickerCentered(false);
 					setPickerRequest(request);
@@ -53599,6 +53806,7 @@ var WorkbenchCanvas = forwardRef(function WorkbenchCanvas({ nodePicker, addNodeC
 				},
 				onMoveNodes,
 				onMoveViewport,
+				subscribeCanvasCommands,
 				onCopy: (nodeIds) => {
 					onSelectNodes(nodeIds);
 					onCopy();
@@ -57397,7 +57605,7 @@ var blockedReasonKey = {
 	busy: "workspace.publishActionInProgress",
 	publishing: "workspace.publishInProgress"
 };
-function WorkspacePublishIsland({ hasPublications, onOpenPublications, onOpenRuns, onPublish, state }) {
+function WorkspacePublishIsland({ hasPublications, onOpenPublications, onExport, onOpenRuns, onPublish, state }) {
 	const t = useTranslate();
 	const [popupContainer, setPopupContainer] = useState(null);
 	const [confirming, setConfirming] = useState(false);
@@ -57497,28 +57705,36 @@ function WorkspacePublishIsland({ hasPublications, onOpenPublications, onOpenRun
 			container: popupContainer,
 			side: "bottom",
 			sideOffset: 8,
-			children: [/* @__PURE__ */ jsxs(DropdownMenuItem, {
-				className: "gap-2 px-2 py-[5px]",
-				disabled: hasPublications !== true,
-				onClick: onOpenPublications,
-				children: [/* @__PURE__ */ jsx("i", {
-					"aria-hidden": "true",
-					className: "i-lucide-light:cloud-upload size-4 shrink-0 text-foreground/70"
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "grid gap-0.5",
-					children: [/* @__PURE__ */ jsx("span", { children: historyLabel }), historyHint != null && /* @__PURE__ */ jsx("span", {
-						className: "text-[11px] text-muted-foreground",
-						children: historyHint
+			children: [
+				onExport != null && /* @__PURE__ */ jsx(WorkflowExportMenuItem, {
+					className: "gap-2 px-2 py-[5px]",
+					disabled: state == "busy" || state == "publishing",
+					onClick: onExport
+				}),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					className: "gap-2 px-2 py-[5px]",
+					disabled: hasPublications !== true,
+					onClick: onOpenPublications,
+					children: [/* @__PURE__ */ jsx("i", {
+						"aria-hidden": "true",
+						className: "i-lucide-light:cloud-upload size-4 shrink-0 text-foreground/70"
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "grid gap-0.5",
+						children: [/* @__PURE__ */ jsx("span", { children: historyLabel }), historyHint != null && /* @__PURE__ */ jsx("span", {
+							className: "text-[11px] text-muted-foreground",
+							children: historyHint
+						})]
 					})]
-				})]
-			}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
-				className: "gap-2 px-2 py-[5px]",
-				onClick: onOpenRuns,
-				children: [/* @__PURE__ */ jsx("i", {
-					"aria-hidden": "true",
-					className: "i-lucide-light:history size-4 shrink-0 text-foreground/70"
-				}), runsLabel]
-			})]
+				}),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					className: "gap-2 px-2 py-[5px]",
+					onClick: onOpenRuns,
+					children: [/* @__PURE__ */ jsx("i", {
+						"aria-hidden": "true",
+						className: "i-lucide-light:history size-4 shrink-0 text-foreground/70"
+					}), runsLabel]
+				})
+			]
 		})] })]
 	});
 }
@@ -57745,6 +57961,8 @@ function FlowEditor({ navigationIsland, onRun, onRunStarted, onCloseRuns, onConf
 	const selectedDesignerNode = useVal(store.$.selectedDesignerNode);
 	const selection = useVal(store.workspace.$.selection);
 	const selectedNodeIds = useVal(store.workspace.$.selectedNodeIds);
+	const workspaceStatus = useVal(store.workspace.$.status);
+	const moduleEditor = useVal(store.workspace.$.moduleEditor);
 	const initialAddNodeTab = triggers.length == 0 ? "triggers" : "nodes";
 	const { ignoredNodeIds, onIgnoreNodes } = useIgnoredNodes(flowId ?? "");
 	const panel = useInspectorPanel({
@@ -57889,6 +58107,10 @@ function FlowEditor({ navigationIsland, onRun, onRunStarted, onCloseRuns, onConf
 						},
 						open: diagnosticsOpen
 					}), /* @__PURE__ */ jsx(WorkspacePublishIsland, {
+						onExport: () => {
+							const id = store.workspace.$.flowId.value;
+							if (id != null) store.workspace.exportFlow(id);
+						},
 						hasPublications: live == null ? void 0 : live.publication != null,
 						onOpenPublications,
 						onOpenRuns,
@@ -57948,9 +58170,11 @@ function FlowEditor({ navigationIsland, onRun, onRunStarted, onCloseRuns, onConf
 				},
 				addNodeOptions,
 				disabled: authoringDisabled,
+				subscribeCanvasCommands: store.workspace.subscribeCanvasCommands,
 				focusNodeRequest: diagnosticFocus ?? nodeFocus,
 				inspectorOpen: contextPanelVisible,
 				model: designer,
+				annotationContext: canvasAnnotations(flowId, draft, workspaceStatus, moduleEditor?.status, history.failed),
 				onAddNode: async (option, position, connection) => {
 					const nodeId = await store.addNode(option, position, connection);
 					if (nodeId != null && panel.open) panel.activate([nodeId]);