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

package/dist/browser/{flowWorkspace-BlXx-yAn.js → flowWorkspace-rvcneG4q.js}

@@ -1,14 +1,14 @@
 import { o as __toESM, r as __exportAll, t as __commonJSMin } from "./rolldown-runtime-CEgmsyvS.js";
-import { A as DropdownMenuLabel, D as DropdownMenuContent, E as DropdownMenuCheckboxItem, F as DropdownMenuSubContent, I as DropdownMenuSubTrigger, L as DropdownMenuTrigger, M as DropdownMenuRadioItem, N as DropdownMenuSeparator, O as DropdownMenuGroup, P as DropdownMenuSub, Q as waitBranchDescription, S as IconifyProvider, T as DropdownMenu, _ as ContentIcon, c as PopoverDescription, d as PopoverTitle, f as PopoverTrigger, g as Z$1, h as VirtualScrollArea, j as DropdownMenuRadioGroup, k as DropdownMenuItem, l as PopoverHeader, lt as Checkbox, m as ScrollArea, o as Popover, p as NativeScrollArea, r as Textarea, s as PopoverContent, u as PopoverPanelContent, ut as useAriaLabelledBy } from "./wrapLayout-DZvW9dBs.js";
+import { $ as waitBranchDescription, A as DropdownMenuItem, B as CompositeItem, C as IconifyProvider, D as DropdownMenuCheckboxItem, E as DropdownMenu, F as DropdownMenuSub, I as DropdownMenuSubContent, L as DropdownMenuSubTrigger, M as DropdownMenuRadioGroup, N as DropdownMenuRadioItem, O as DropdownMenuContent, P as DropdownMenuSeparator, R as DropdownMenuTrigger, _ as Z$1, a as CompositeRoot, c as PopoverContent, d as PopoverPanelContent, dt as useAriaLabelledBy, f as PopoverTitle, g as VirtualScrollArea, h as ScrollArea, i as Textarea, j as DropdownMenuLabel, k as DropdownMenuGroup, l as PopoverDescription, m as NativeScrollArea, p as PopoverTrigger, s as Popover, u as PopoverHeader, ut as Checkbox, v as ContentIcon } from "./wrapLayout-C4moMKgb.js";
 import { i as compute, l as val } from "./dist-bO8nvHFH.js";
 import { c as useLang, l as useTranslate, o as I18nProvider, r as isPlainObject, s as useI18n, u as useVal } from "./dist-BFmpkX4P.js";
-import { A as string, Bn as transitionStatusMapping, Cr as cn, Er as useRenderElement, Fr as formatErrorMessage, In as useTransitionStatus, Ir as mergeProps, Ln as useOpenChangeComplete, Lr as useIsoLayoutEffect, Mr as useButton, Nn as useLabelableId, Or as EMPTY_OBJECT, Qt as useStore, Sr as buttonVariants, Un as useValueChanged, Wn as createChangeEventDetails, _r as fieldValidityMapping, a as createTooltipHandle, br as useControlled, c as TooltipPositioner, d as TooltipRoot, dr as useFormContext, fr as useRegisterFieldControl, i as TooltipTrigger, jr as useMergedRefs, l as TooltipPortal, mr as useBaseUiId, mt as triggerOpenStateMapping, n as TooltipContent, nn as require_builtin_esm_external_require_react, o as TooltipArrow, p as timeZoneOffsetMinutes, pr as useFieldRootContext, qn as clearPress, r as TooltipProvider, rr as none, s as TooltipPopup, t as Tooltip, u as TooltipTrigger$1, ur as useLabelableContext, vr as visuallyHidden, wr as cva, xr as Button$1, yr as visuallyHiddenInput, zr as useStableCallback } from "./tooltip-BDcVTNpu.js";
-import { $ as waitAutoContinueSchema, A as comparisonIssue, At as variableInputCompatible, Bt as SelectChevron, Ct as limitDecisionQuestions, D as nodeSystemOutputPorts, Dt as matchesSchema, E as nodeErrorSchema, F as operatorsForType, Gt as SelectTrigger, Ht as SelectGroup, It as skipDuplicatesConfigSchema, J as webhookResponseAllowsBody, K as webhookHeaderValuePort, Kt as SelectValue, L as unaryOperator, O as supportsNodeErrorHandling, Ot as portsAssignable, P as operandHandle, Q as workflowOutputsPort, R as valueType, Rt as dequal, St as defaultDecisionQuestion, T as workflowToolNameIssue, Tt as webhookSupportsBody, U as decodeRevisionContent, Ut as SelectItem, Vt as SelectContent, Wt as SelectSeparator, X as webhookResponseTimeout, Y as webhookResponseInputs, Z as webhookStatusCodePort, _t as isHttpHost, a as DialogFooter, an as ChevronDown, at as httpHeaderSchema, b as nodeNameIssue, bt as decisionQuestionIssues, c as DialogTrigger, d as Field, et as defaultNodeRetry, f as FieldDescription, h as FieldLabel, i as DialogDescription, in as Input, kt as schemaObject, l as Icon, lt as httpRequestIssues, m as FieldGroup, nt as retryConfigurationSchema, o as DialogHeader, ot as httpQuerySchema, p as FieldError, pt as httpHeaderNameIssue, q as webhookHeadersPort, r as DialogContent, rn as Label, rt as supportsNodeRetry, s as DialogTitle, t as Dialog, tt as nodeRetryLimits, u as Spinner, ut as httpRequestTask, vt as decisionLimits, wt as webhookMethods, xt as decisionTask, zt as Select$1 } from "./dialog-CFlvkliO.js";
-import { C as isMac, S as toManifestNodeId, _ as E$1, a as CanvasNodeIcon, b as toViewEdge, c as collapseAllNested, d as IconStack, f as selectableTimeZones, g as cronDescription, h as timeZoneOffset, i as pasteVideoLink, l as formatDuration, m as timeZoneLongLabel, n as setAddItemId, o as defaultTriggerIcon, p as timeZoneLabel, s as JSONViewer, t as FlowCanvas, u as useDebouncedValue, v as CanvasTooltip, w as isSameViewport, x as toManifestHandleName, y as CanvasStore } from "./FlowCanvas-Dew2fmoT.js";
-import { $ as resourceValue, $t as WorkflowExportDialog, A as schemaForEditor, An as TabsTrigger, Ar as serverAddress, B as datePickerValue, Bn as EmptyMedia, Br as ApiError, Cn as selectors, Cr as inputValue, D as defaultValueEditorSchema, Dn as Tabs, Dr as openApiTask, Dt as diagnosticMessage, E as supportsFeishuChatFilter, En as IconPickerButton, Er as openApiFieldIssues, F as calendarChange, Fn as InputGroupInput, Fr as workflowCandidateGroup, G as indexAddNodeOptions, Gn as SourceSelect, H as isDateFormat, Hn as Badge, Hr as eventSourceKind, I as calendarDate, In as Empty, Ir as workflowCapability, Jn as EventSourceSetup, Kn as createI18n, L as dateFromTimeZone, Ln as EmptyContent, Lr as workflowSelectionTask, M as getDefaultValue, Mn as followWorkbenchLink, Mr as sameWorkflowInterface, N as isUnconstrainedSchema, Nn as InputGroup, Nr as workflowAgentTool, O as editorComponent, On as TabsContent, Or as securityOptions, Ot as diagnosticNodeId, P as typeOfSchema, Pn as InputGroupAddon, Q as resourceData, R as dateInTimeZone, Rn as EmptyDescription, Sn as ComboboxRoot, Sr as triggerConfigValues, St as revisionView, T as feishuResourceKind, Tn as useComboboxRootContext, Tr as object$1, V as dateTimeWall, Vn as EmptyTitle, Vr as controlErrorCode, Wn as SourceForm, Y as connectorActionPresentation, Yn as errorNotice, Z as observeResource, Zt as dequal$1, _n as ComboboxList, _t as actionSummary, ar as webhookResponseDiagnostics, bn as ComboboxInputGroup, bt as canCancelRun, cn as selectionMenuItemClass, dn as valueEditor_module_default, dr as isJsonObject, dt as loadJson, en as WorkflowExportMenuItem, er as decodeResultList, fn as ComboboxItemIndicator, ft as designerGraph, gn as ComboboxPortal, gt as triggerNodeIcon, hn as ComboboxPositioner, ht as semanticNodeIcon, ir as resolutionOutputPorts, it as decodeAppCatalogResponse, j as valueForEditor, jr as servers, jt as connectionCatalog, k as editorGroups, kn as TabsList, kr as selectOperation, kt as schemaMismatchMessage, ln as ValueControl, mn as ComboboxPopup, mt as nodeTitle, n as agentTool, nn as IdTooltip, nr as executionReachableNodes, or as sourceOutputLabel, ot as getAppCatalogCache, pn as ComboboxItem, pt as nodeIcon, q as mapSource, qn as FeishuEventPicker, rn as FlowSettingsButton, rr as inputSourceCandidates, sn as selectionMenuContentClass, sr as sourcePort, tn as useWorkflowExportAction, tt as provider, un as ValueEditorFeedback, ur as triggerOutputDefinitions, vn as GroupCollectionProvider, vt as providerIcon, wn as useComboboxInputValueContext, wr as listOperations, xn as ComboboxInput, xr as triggerConfigValue, xt as hasRunFilter, yn as ComboboxTrigger, z as datePickerChange, zn as EmptyHeader } from "./flowChanges-URBEd4DI.js";
+import { $ as useToolbarRootContext, A as string, Bn as transitionStatusMapping, Br as useStableCallback, Cr as cn, Er as useRenderElement, Fr as formatErrorMessage, In as useTransitionStatus, Ir as mergeProps, Ln as useOpenChangeComplete, Lr as useIsoLayoutEffect, Mr as useButton, Nn as useLabelableId, Or as EMPTY_OBJECT, Qt as useStore, Sr as buttonVariants, Un as useValueChanged, Wn as createChangeEventDetails, _r as fieldValidityMapping, a as createTooltipHandle, br as useControlled, c as TooltipPositioner, d as TooltipRoot, dr as useFormContext, fr as useRegisterFieldControl, i as TooltipTrigger, jr as useMergedRefs, l as TooltipPortal, mr as useBaseUiId, mt as triggerOpenStateMapping, n as TooltipContent, nn as require_builtin_esm_external_require_react, o as TooltipArrow, p as timeZoneOffsetMinutes, pr as useFieldRootContext, qn as clearPress, r as TooltipProvider, rr as none, s as TooltipPopup, t as Tooltip, u as TooltipTrigger$1, ur as useLabelableContext, vr as visuallyHidden, wr as cva, xr as Button$1, yr as visuallyHiddenInput, zr as error$1 } from "./tooltip-DGj5pudg.js";
+import { $ as waitAutoContinueSchema, A as comparisonIssue, At as variableInputCompatible, Bt as SelectChevron, Ct as limitDecisionQuestions, D as nodeSystemOutputPorts, Dt as matchesSchema, E as nodeErrorSchema, F as operatorsForType, Gt as SelectTrigger, Ht as SelectGroup, It as skipDuplicatesConfigSchema, J as webhookResponseAllowsBody, K as webhookHeaderValuePort, Kt as SelectValue, L as unaryOperator, O as supportsNodeErrorHandling, Ot as portsAssignable, P as operandHandle, Q as workflowOutputsPort, R as valueType, Rt as dequal, St as defaultDecisionQuestion, T as workflowToolNameIssue, Tt as webhookSupportsBody, U as decodeRevisionContent, Ut as SelectItem, Vt as SelectContent, Wt as SelectSeparator, X as webhookResponseTimeout, Y as webhookResponseInputs, Z as webhookStatusCodePort, _t as isHttpHost, a as DialogFooter, an as ChevronDown, at as httpHeaderSchema, b as nodeNameIssue, bt as decisionQuestionIssues, c as DialogTrigger, d as Field, et as defaultNodeRetry, f as FieldDescription, h as FieldLabel, i as DialogDescription, in as Input, kt as schemaObject, l as Icon, lt as httpRequestIssues, m as FieldGroup, n as DialogClose, nt as retryConfigurationSchema, o as DialogHeader, ot as httpQuerySchema, p as FieldError, pt as httpHeaderNameIssue, q as webhookHeadersPort, r as DialogContent, rn as Label, rt as supportsNodeRetry, s as DialogTitle, t as Dialog, tt as nodeRetryLimits, u as Spinner, ut as httpRequestTask, vt as decisionLimits, wt as webhookMethods, xt as decisionTask, zt as Select$1 } from "./dialog-BzoSxhXQ.js";
+import { C as isMac, S as toManifestNodeId, T as flowPngAspectRatios, _ as E$1, a as CanvasNodeIcon, b as toViewEdge, c as collapseAllNested, d as IconStack, f as selectableTimeZones, g as cronDescription, h as timeZoneOffset, i as pasteVideoLink, l as formatDuration, m as timeZoneLongLabel, n as setAddItemId, o as defaultTriggerIcon, p as timeZoneLabel, s as JSONViewer, t as FlowCanvas, u as useDebouncedValue, v as CanvasTooltip, w as isSameViewport, x as toManifestHandleName, y as CanvasStore } from "./FlowCanvas-ChbukrDh.js";
+import { $ as resourceValue, $t as WorkflowExportDialog, A as schemaForEditor, An as TabsTrigger, Ar as serverAddress, B as datePickerValue, Bn as EmptyMedia, Br as ApiError, Cn as selectors, Cr as inputValue, D as defaultValueEditorSchema, Dn as Tabs, Dr as openApiTask, Dt as diagnosticMessage, E as supportsFeishuChatFilter, En as IconPickerButton, Er as openApiFieldIssues, F as calendarChange, Fn as InputGroupInput, Fr as workflowCandidateGroup, G as indexAddNodeOptions, Gn as SourceSelect, H as isDateFormat, Hn as Badge, Hr as eventSourceKind, I as calendarDate, In as Empty, Ir as workflowCapability, Jn as EventSourceSetup, Kn as createI18n, L as dateFromTimeZone, Ln as EmptyContent, Lr as workflowSelectionTask, M as getDefaultValue, Mn as followWorkbenchLink, Mr as sameWorkflowInterface, N as isUnconstrainedSchema, Nn as InputGroup, Nr as workflowAgentTool, O as editorComponent, On as TabsContent, Or as securityOptions, Ot as diagnosticNodeId, P as typeOfSchema, Pn as InputGroupAddon, Q as resourceData, R as dateInTimeZone, Rn as EmptyDescription, Sn as ComboboxRoot, Sr as triggerConfigValues, St as revisionView, T as feishuResourceKind, Tn as useComboboxRootContext, Tr as object$1, V as dateTimeWall, Vn as EmptyTitle, Vr as controlErrorCode, Wn as SourceForm, Y as connectorActionPresentation, Yn as errorNotice, Z as observeResource, Zt as dequal$1, _n as ComboboxList, _t as actionSummary, ar as webhookResponseDiagnostics, bn as ComboboxInputGroup, bt as canCancelRun, cn as selectionMenuItemClass, dn as valueEditor_module_default, dr as isJsonObject, dt as loadJson, en as WorkflowExportMenuItem, er as decodeResultList, fn as ComboboxItemIndicator, ft as designerGraph, gn as ComboboxPortal, gt as triggerNodeIcon, hn as ComboboxPositioner, ht as semanticNodeIcon, ir as resolutionOutputPorts, it as decodeAppCatalogResponse, j as valueForEditor, jr as servers, jt as connectionCatalog, k as editorGroups, kn as TabsList, kr as selectOperation, kt as schemaMismatchMessage, ln as ValueControl, mn as ComboboxPopup, mt as nodeTitle, n as agentTool, nn as IdTooltip, nr as executionReachableNodes, or as sourceOutputLabel, ot as getAppCatalogCache, pn as ComboboxItem, pt as nodeIcon, q as mapSource, qn as FeishuEventPicker, rn as FlowSettingsButton, rr as inputSourceCandidates, sn as selectionMenuContentClass, sr as sourcePort, tn as useWorkflowExportAction, tt as provider, un as ValueEditorFeedback, ur as triggerOutputDefinitions, vn as GroupCollectionProvider, vt as providerIcon, wn as useComboboxInputValueContext, wr as listOperations, xn as ComboboxInput, xr as triggerConfigValue, xt as hasRunFilter, yn as ComboboxTrigger, z as datePickerChange, zn as EmptyHeader } from "./flowChanges-C567g-Pc.js";
 import { a as renameObjectField, i as objectValue, n as isJsonValue, o as setObjectField, r as jsonDataTypes, s as valueType$1, t as initialValue } from "./value-BbFQZZ_V.js";
 import { n as compile, r as validate } from "./flowRunInputEditorStore-ys1-w9GW.js";
-import { t as WorkbenchSelect } from "./workbenchSelect-Ci0KCYv9.js";
+import { t as WorkbenchSelect } from "./workbenchSelect-BIaEVTx6.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";
@@ -56,7 +56,7 @@ var ComboboxGroup = /*#__PURE__*/ React.forwardRef(function ComboboxGroup(compon
 if (process.env.NODE_ENV !== "production") ComboboxGroup.displayName = "ComboboxGroup";
 //#endregion
 //#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/combobox/clear/ComboboxClear.js
-var stateAttributesMapping$1 = {
+var stateAttributesMapping$2 = {
 	...transitionStatusMapping,
 	...triggerOpenStateMapping
 };
@@ -134,7 +134,7 @@ var ComboboxClear = /*#__PURE__*/ React.forwardRef(function ComboboxClear(compon
 			elementProps,
 			getButtonProps
 		],
-		stateAttributesMapping: stateAttributesMapping$1
+		stateAttributesMapping: stateAttributesMapping$2
 	});
 	if (!(keepMounted || mounted)) return null;
 	return element;
@@ -231,7 +231,7 @@ function CanvasHistoryScope({ history, disabled, ...props }) {
 }
 //#endregion
 //#region src/workbench/browser/runtime/editor/commentInspector.tsx
-var MarkdownContent = lazy(() => import("./markdownContent-IS8xXDoc.js"));
+var MarkdownContent = lazy(() => import("./markdownContent-B-GLj5DU.js"));
 /** A comment is presentation data; editing it does not require the canvas store. */
 function CommentInspector({ title, content, disabled = false, readOnly, dark, onSave }) {
 	const t = useTranslate();
@@ -3973,7 +3973,7 @@ var SwitchRootDataAttributes = /*#__PURE__*/ function(SwitchRootDataAttributes)
 }({});
 //#endregion
 //#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/switch/stateAttributesMapping.js
-var stateAttributesMapping = {
+var stateAttributesMapping$1 = {
 	...fieldValidityMapping,
 	checked(value) {
 		if (value) return { [SwitchRootDataAttributes.checked]: "" };
@@ -4127,7 +4127,7 @@ var SwitchRoot = /*#__PURE__*/ React.forwardRef(function SwitchRoot(componentPro
 			elementProps,
 			getButtonProps
 		],
-		stateAttributesMapping
+		stateAttributesMapping: stateAttributesMapping$1
 	});
 	return /*#__PURE__*/ jsxs(SwitchRootContext.Provider, {
 		value: state,
@@ -4166,7 +4166,7 @@ var SwitchThumb = /*#__PURE__*/ React.forwardRef(function SwitchThumb(componentP
 	return useRenderElement("span", componentProps, {
 		state: extendedState,
 		ref: forwardedRef,
-		stateAttributesMapping,
+		stateAttributesMapping: stateAttributesMapping$1,
 		props: elementProps
 	});
 });
@@ -33795,6 +33795,543 @@ function RunsView({ flowName, onClose, onConfigureConnector, onLocateEvent, onLo
 	});
 }
 //#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/toggle-group/ToggleGroupContext.js
+var ToggleGroupContext$1 = /*#__PURE__*/ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") ToggleGroupContext$1.displayName = "ToggleGroupContext";
+function useToggleGroupContext(optional = true) {
+	const context = React.useContext(ToggleGroupContext$1);
+	if (context === void 0 && !optional) throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: ToggleGroupContext is missing. ToggleGroup parts must be placed within <ToggleGroup>." : formatErrorMessage(7));
+	return context;
+}
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/toggle/Toggle.js
+/**
+* A two-state button that can be on or off.
+* Renders a `<button>` element.
+*
+* Documentation: [Base UI Toggle](https://base-ui.com/react/components/toggle)
+*/
+var Toggle = /*#__PURE__*/ React.forwardRef(function Toggle(componentProps, forwardedRef) {
+	const { className, defaultPressed: defaultPressedProp = false, disabled: disabledProp = false, form, onPressedChange: onPressedChangeProp, pressed: pressedProp, render, type, value: valueProp, nativeButton = true, style, ...elementProps } = componentProps;
+	const value = useBaseUiId(valueProp || void 0);
+	const groupContext = useToggleGroupContext();
+	const groupValue = groupContext?.value ?? [];
+	const defaultPressed = groupContext ? void 0 : defaultPressedProp;
+	const disabled = (disabledProp || groupContext?.disabled) ?? false;
+	if (process.env.NODE_ENV !== "production") useIsoLayoutEffect(() => {
+		if (groupContext && valueProp === void 0 && groupContext.isValueInitialized) error$1("A `<Toggle>` component rendered in a `<ToggleGroup>` has no explicit `value` prop.", "This will cause issues between the Toggle Group and Toggle values.", "Provide the `<Toggle>` with a `value` prop matching the `<ToggleGroup>` values prop type.");
+	}, [
+		groupContext,
+		valueProp,
+		groupContext?.isValueInitialized
+	]);
+	const [pressed, setPressedState] = useControlled({
+		controlled: groupContext ? value !== void 0 && groupValue.indexOf(value) > -1 : pressedProp,
+		default: defaultPressed,
+		name: "Toggle",
+		state: "pressed"
+	});
+	const onPressedChange = useStableCallback((nextPressed, eventDetails) => {
+		if (value) groupContext?.setGroupValue?.(value, nextPressed, eventDetails);
+		onPressedChangeProp?.(nextPressed, eventDetails);
+	});
+	const { getButtonProps, buttonRef } = useButton({
+		disabled,
+		native: nativeButton
+	});
+	const state = {
+		disabled,
+		pressed
+	};
+	const refs = [buttonRef, forwardedRef];
+	const props = [
+		{
+			"aria-pressed": pressed,
+			onClick(event) {
+				const nextPressed = !pressed;
+				const details = createChangeEventDetails(none, event.nativeEvent);
+				onPressedChange(nextPressed, details);
+				if (details.isCanceled) return;
+				setPressedState(nextPressed);
+			}
+		},
+		elementProps,
+		getButtonProps
+	];
+	const element = useRenderElement("button", componentProps, {
+		enabled: !groupContext,
+		state,
+		ref: refs,
+		props
+	});
+	if (groupContext) return /*#__PURE__*/ jsx(CompositeItem, {
+		tag: "button",
+		render,
+		className,
+		style,
+		state,
+		refs,
+		props
+	});
+	return element;
+});
+if (process.env.NODE_ENV !== "production") Toggle.displayName = "Toggle";
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/toggle-group/ToggleGroupDataAttributes.js
+var ToggleGroupDataAttributes = /*#__PURE__*/ function(ToggleGroupDataAttributes) {
+	/**
+	* Present when the toggle group is disabled.
+	*/
+	ToggleGroupDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Indicates the orientation of the toggle group.
+	* @type {'horizontal' | 'vertical'}
+	*/
+	ToggleGroupDataAttributes["orientation"] = "data-orientation";
+	/**
+	* Present when the toggle group allows multiple buttons to be in the pressed state at the same time.
+	*/
+	ToggleGroupDataAttributes["multiple"] = "data-multiple";
+	return ToggleGroupDataAttributes;
+}({});
+//#endregion
+//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/toggle-group/ToggleGroup.js
+var stateAttributesMapping = { multiple(value) {
+	if (value) return { [ToggleGroupDataAttributes.multiple]: "" };
+	return null;
+} };
+/**
+* Provides a shared state to a series of toggle buttons.
+*
+* Documentation: [Base UI Toggle Group](https://base-ui.com/react/components/toggle-group)
+*/
+var ToggleGroup$1 = /*#__PURE__*/ React.forwardRef(function ToggleGroup(componentProps, forwardedRef) {
+	const { defaultValue: defaultValueProp, disabled: disabledProp = false, loopFocus = true, onValueChange, orientation = "horizontal", multiple = false, value: valueProp, className, render, style, ...elementProps } = componentProps;
+	const toolbarContext = useToolbarRootContext(true);
+	const defaultValue = React.useMemo(() => {
+		if (valueProp === void 0) return defaultValueProp ?? [];
+	}, [valueProp, defaultValueProp]);
+	const isValueInitialized = React.useMemo(() => valueProp !== void 0 || defaultValueProp !== void 0, [valueProp, defaultValueProp]);
+	const disabled = (toolbarContext?.disabled ?? false) || disabledProp;
+	const [groupValue, setValueState] = useControlled({
+		controlled: valueProp,
+		default: defaultValue,
+		name: "ToggleGroup",
+		state: "value"
+	});
+	const setGroupValue = useStableCallback((newValue, nextPressed, eventDetails) => {
+		let newGroupValue;
+		if (multiple) {
+			newGroupValue = groupValue.slice();
+			if (nextPressed) newGroupValue.push(newValue);
+			else newGroupValue.splice(groupValue.indexOf(newValue), 1);
+		} else newGroupValue = nextPressed ? [newValue] : [];
+		if (Array.isArray(newGroupValue)) {
+			onValueChange?.(newGroupValue, eventDetails);
+			if (eventDetails.isCanceled) return;
+			setValueState(newGroupValue);
+		}
+	});
+	const state = {
+		disabled,
+		multiple,
+		orientation
+	};
+	const contextValue = React.useMemo(() => ({
+		disabled,
+		orientation,
+		setGroupValue,
+		value: groupValue,
+		isValueInitialized
+	}), [
+		disabled,
+		orientation,
+		setGroupValue,
+		groupValue,
+		isValueInitialized
+	]);
+	const defaultProps = { role: "group" };
+	const element = useRenderElement("div", componentProps, {
+		enabled: Boolean(toolbarContext),
+		state,
+		ref: forwardedRef,
+		props: [defaultProps, elementProps],
+		stateAttributesMapping
+	});
+	return /*#__PURE__*/ jsx(ToggleGroupContext$1.Provider, {
+		value: contextValue,
+		children: toolbarContext ? element : /*#__PURE__*/ jsx(CompositeRoot, {
+			render,
+			className,
+			style,
+			state,
+			refs: [forwardedRef],
+			props: [defaultProps, elementProps],
+			stateAttributesMapping,
+			loopFocus,
+			enableHomeAndEndKeys: true,
+			orientation
+		})
+	});
+});
+if (process.env.NODE_ENV !== "production") ToggleGroup$1.displayName = "ToggleGroup";
+//#endregion
+//#region src/ui/browser/toggle.tsx
+var toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,opacity,transform] outline-none hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-solid focus-visible:ring-0 focus-visible:aria-invalid:ring-0 focus-visible:outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-pressed:bg-accent aria-pressed:text-accent-foreground aria-pressed:hover:bg-accent aria-pressed:hover:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: "border border-input bg-transparent hover:bg-muted"
+		},
+		size: {
+			default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			sm: "h-7 min-w-7 rounded-md px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+//#endregion
+//#region src/ui/browser/toggle-group.tsx
+var ToggleGroupContext = React.createContext({
+	size: "default",
+	variant: "default",
+	spacing: 2,
+	orientation: "horizontal"
+});
+function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", children, ...props }) {
+	return /* @__PURE__ */ jsx(ToggleGroup$1, {
+		"data-slot": "toggle-group",
+		"data-variant": variant,
+		"data-size": size,
+		"data-spacing": spacing,
+		"data-orientation": orientation,
+		style: { "--gap": `${spacing}px` },
+		orientation,
+		className: cn("group/toggle-group flex w-fit flex-row items-center gap-[var(--gap)] rounded-lg data-[size=sm]:rounded-md data-[variant=outline]:bg-background data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+			value: {
+				variant,
+				size,
+				spacing,
+				orientation
+			},
+			children
+		})
+	});
+}
+function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
+	const context = React.useContext(ToggleGroupContext);
+	return /* @__PURE__ */ jsx(Toggle, {
+		"data-slot": "toggle-group-item",
+		"data-variant": context.variant || variant,
+		"data-size": context.size || size,
+		"data-spacing": context.spacing,
+		className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
+			variant: context.variant || variant,
+			size: context.size || size
+		}), className),
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/workbench/browser/runtime/shell/pngExportPreference.ts
+var pngExportFramePreferenceKey = "open-flow:png-export-frame";
+function readPngExportFrame(preferences) {
+	try {
+		return preferences?.getItem(pngExportFramePreferenceKey) !== "false";
+	} catch {
+		return true;
+	}
+}
+function writePngExportFrame(preferences, enabled) {
+	try {
+		preferences?.setItem(pngExportFramePreferenceKey, String(enabled));
+	} catch {}
+}
+var pngExportLayoutPreferenceKey = "open-flow:png-export-layout";
+function readPngExportLayout(preferences) {
+	try {
+		return preferences?.getItem("open-flow:png-export-layout") === "compact" ? "compact" : "original";
+	} catch {
+		return "original";
+	}
+}
+function writePngExportLayout(preferences, layout) {
+	try {
+		preferences?.setItem(pngExportLayoutPreferenceKey, layout);
+	} catch {}
+}
+var pngExportAspectRatioPreferenceKey = "open-flow:png-export-aspect-ratio";
+var pngExportThemePreferenceKey = "open-flow:png-export-theme";
+function readPngExportAspectRatio(preferences) {
+	try {
+		const value = preferences?.getItem(pngExportAspectRatioPreferenceKey);
+		return flowPngAspectRatios.find((ratio) => ratio === value) ?? "auto";
+	} catch {
+		return "auto";
+	}
+}
+function writePngExportAspectRatio(preferences, value) {
+	try {
+		preferences?.setItem(pngExportAspectRatioPreferenceKey, value);
+	} catch {}
+}
+function readPngExportDark(preferences, defaultDark) {
+	try {
+		const value = preferences?.getItem(pngExportThemePreferenceKey);
+		return value === "dark" ? true : value === "light" ? false : defaultDark;
+	} catch {
+		return defaultDark;
+	}
+}
+function writePngExportDark(preferences, dark) {
+	try {
+		preferences?.setItem(pngExportThemePreferenceKey, dark ? "dark" : "light");
+	} catch {}
+}
+//#endregion
+//#region src/workbench/browser/runtime/shell/pngExportDialog.tsx
+function PngExportDialog({ container, defaultDark = false, direction, onDownload, onOpenChange, open, preferences, render, title }) {
+	const t = useTranslate();
+	const id = useId();
+	const [aspectRatio, setAspectRatio] = useState(() => readPngExportAspectRatio(preferences));
+	const [dark, setDark] = useState(() => readPngExportDark(preferences, defaultDark));
+	const [frame, setFrame] = useState(() => readPngExportFrame(preferences));
+	const [layout, setLayout] = useState(() => readPngExportLayout(preferences));
+	const [attempt, setAttempt] = useState(0);
+	const [preview, setPreview] = useState();
+	const [failed, setFailed] = useState();
+	const [downloading, setDownloading] = useState(false);
+	const queue = useRef(Promise.resolve());
+	const options = useMemo(() => ({
+		aspectRatio,
+		dark,
+		frame,
+		layout: direction === "vertical" ? layout : "original",
+		title
+	}), [
+		aspectRatio,
+		dark,
+		frame,
+		direction,
+		layout,
+		title
+	]);
+	const request = useMemo(() => ({
+		render,
+		options,
+		attempt,
+		open
+	}), [
+		render,
+		options,
+		attempt,
+		open
+	]);
+	const ready = preview?.request === request;
+	const error = failed === request;
+	useEffect(() => {
+		if (!open || ready) return;
+		let active = true;
+		setFailed(void 0);
+		const timer = setTimeout(() => {
+			queue.current = queue.current.then(async () => {
+				if (!active) return;
+				try {
+					const result = await request.render(request.options);
+					if (active) setPreview({
+						request,
+						result,
+						url: URL.createObjectURL(result.blob)
+					});
+				} catch {
+					if (active) setFailed(request);
+				}
+			});
+		}, 200);
+		return () => {
+			active = false;
+			clearTimeout(timer);
+		};
+	}, [
+		open,
+		request,
+		ready
+	]);
+	useEffect(() => () => {
+		if (preview) URL.revokeObjectURL(preview.url);
+	}, [preview]);
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			container,
+			closeLabel: t("common.close"),
+			className: "max-h-[calc(100dvh-2rem)] grid-rows-[auto_minmax(0,1fr)_auto] sm:max-w-4xl",
+			children: [
+				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("resource.exportPng") }) }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid min-h-0 gap-5 overflow-y-auto md:grid-cols-[minmax(0,1fr)_16rem]",
+					children: [/* @__PURE__ */ jsxs("div", {
+						"aria-label": t("resource.exportPngPreview"),
+						"aria-busy": !ready && !error,
+						className: "grid h-[min(56dvh,32rem)] min-h-52 min-w-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] place-items-center overflow-hidden rounded-lg border border-border p-2",
+						style: {
+							backgroundColor: "var(--ui-background)",
+							backgroundImage: "conic-gradient(var(--ui-muted) 25%, transparent 0 50%, var(--ui-muted) 0 75%, transparent 0)",
+							backgroundSize: "20px 20px"
+						},
+						role: "region",
+						children: [
+							preview && /* @__PURE__ */ jsx("img", {
+								alt: title,
+								className: `col-start-1 row-start-1 h-full max-h-full w-full min-h-0 min-w-0 object-contain ${ready ? "" : "opacity-30"}`,
+								src: preview.url
+							}),
+							!ready && !error && /* @__PURE__ */ jsxs("div", {
+								className: "col-start-1 row-start-1 flex items-center gap-2 text-sm text-muted-foreground",
+								role: "status",
+								children: [/* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true" }), t("resource.exportPngPreviewPending")]
+							}),
+							error && /* @__PURE__ */ jsxs("div", {
+								className: "col-start-1 row-start-1 flex flex-col items-center gap-3 text-center",
+								children: [/* @__PURE__ */ jsx("p", {
+									className: "m-0 text-sm text-muted-foreground",
+									role: "alert",
+									children: t("resource.exportPngPreviewFailed")
+								}), /* @__PURE__ */ jsx(Button$1, {
+									variant: "outline",
+									onClick: () => setAttempt((value) => value + 1),
+									children: t("resource.exportPngPreviewRetry")
+								})]
+							})
+						]
+					}), /* @__PURE__ */ jsxs(FieldGroup, {
+						className: "self-start",
+						children: [
+							/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+								id: `${id}-ratio`,
+								children: t("resource.exportPngAspectRatio")
+							}), /* @__PURE__ */ jsx(ToggleGroup, {
+								"aria-labelledby": `${id}-ratio`,
+								className: "grid w-full grid-cols-3",
+								value: [aspectRatio],
+								variant: "outline",
+								onValueChange: (values) => {
+									const value = values[0];
+									if (!value) return;
+									setAspectRatio(value);
+									writePngExportAspectRatio(preferences, value);
+								},
+								children: flowPngAspectRatios.map((value) => /* @__PURE__ */ jsx(ToggleGroupItem, {
+									value,
+									children: value === "auto" ? t("resource.exportPngAuto") : value
+								}, value))
+							})] }),
+							direction === "vertical" && /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+								id: `${id}-layout`,
+								children: t("resource.exportPngLayout")
+							}), /* @__PURE__ */ jsxs(ToggleGroup, {
+								"aria-labelledby": `${id}-layout`,
+								className: "grid w-full grid-cols-2",
+								value: [layout],
+								variant: "outline",
+								onValueChange: (values) => {
+									const value = values[0];
+									if (!value) return;
+									setLayout(value);
+									writePngExportLayout(preferences, value);
+								},
+								children: [/* @__PURE__ */ jsx(ToggleGroupItem, {
+									value: "original",
+									children: t("resource.exportPngOriginal")
+								}), /* @__PURE__ */ jsx(ToggleGroupItem, {
+									value: "compact",
+									children: t("resource.exportPngCompact")
+								})]
+							})] }),
+							/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+								id: `${id}-theme`,
+								children: t("resource.exportPngTheme")
+							}), /* @__PURE__ */ jsxs(ToggleGroup, {
+								"aria-labelledby": `${id}-theme`,
+								className: "grid w-full grid-cols-2",
+								value: [dark ? "dark" : "light"],
+								variant: "outline",
+								onValueChange: (values) => {
+									if (!values[0]) return;
+									const value = values[0] === "dark";
+									setDark(value);
+									writePngExportDark(preferences, value);
+								},
+								children: [/* @__PURE__ */ jsx(ToggleGroupItem, {
+									value: "light",
+									children: t("resource.exportPngLight")
+								}), /* @__PURE__ */ jsx(ToggleGroupItem, {
+									value: "dark",
+									children: t("resource.exportPngDark")
+								})]
+							})] }),
+							/* @__PURE__ */ jsxs(Field, {
+								orientation: "horizontal",
+								children: [/* @__PURE__ */ jsx(Checkbox, {
+									id: `${id}-frame`,
+									checked: frame,
+									onCheckedChange: (value) => {
+										setFrame(value);
+										writePngExportFrame(preferences, value);
+									}
+								}), /* @__PURE__ */ jsx(FieldLabel, {
+									htmlFor: `${id}-frame`,
+									children: t("resource.exportPngFrame")
+								})]
+							}),
+							ready && preview.result.hasImagePlaceholders && /* @__PURE__ */ jsx("p", {
+								className: "m-0 text-xs text-muted-foreground",
+								children: t("resource.exportPngPreviewPartial")
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, {
+					className: "items-center",
+					children: [
+						/* @__PURE__ */ jsx("output", {
+							"aria-live": "polite",
+							className: "mr-auto text-xs tabular-nums text-muted-foreground",
+							children: ready && `${preview.result.width} × ${preview.result.height} px`
+						}),
+						/* @__PURE__ */ jsx(DialogClose, {
+							render: /* @__PURE__ */ jsx(Button$1, { variant: "outline" }),
+							children: t("common.close")
+						}),
+						/* @__PURE__ */ jsx(Button$1, {
+							disabled: !ready || downloading,
+							"aria-busy": downloading,
+							onClick: async () => {
+								if (!ready) return;
+								setDownloading(true);
+								try {
+									if (await onDownload(preview.result)) onOpenChange(false);
+								} finally {
+									setDownloading(false);
+								}
+							},
+							children: t("resource.exportPngDownload")
+						})
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
 //#region src/workbench/browser/runtime/shell/diagnosticsPanel.tsx
 function DiagnosticsPanel({ checking, items, nodes, onClose, onRefresh, onSelect, onSelectNode }) {
 	const t = useTranslate();
@@ -34044,34 +34581,18 @@ function WorkspaceNavigationIsland({ flowName, flowIcon, flowDescription, settin
 	});
 }
 //#endregion
-//#region src/workbench/browser/runtime/shell/pngExportPreference.ts
-var pngExportFramePreferenceKey = "open-flow:png-export-frame";
-function readPngExportFrame(preferences) {
-	try {
-		return preferences?.getItem(pngExportFramePreferenceKey) !== "false";
-	} catch {
-		return true;
-	}
-}
-function writePngExportFrame(preferences, enabled) {
-	try {
-		preferences?.setItem(pngExportFramePreferenceKey, String(enabled));
-	} catch {}
-}
-//#endregion
 //#region src/workbench/browser/runtime/shell/workspacePublishIsland.tsx
 var blockedReasonKey = {
 	issues: "workspace.publishIssuesReason",
 	busy: "workspace.publishActionInProgress",
 	publishing: "workspace.publishInProgress"
 };
-function WorkspacePublishIsland({ hasPublications, onOpenPublications, onExport, onExportPng, onOpenRuns, onOpenState, onPublish, preferences, state }) {
+function WorkspacePublishIsland({ hasPublications, onOpenPublications, onExport, onOpenPngExport, onOpenRuns, onOpenState, onPublish, state }) {
 	const t = useTranslate();
 	const exportAction = useWorkflowExportAction(onExport);
+	const pngAction = useWorkflowExportAction(onOpenPngExport);
 	const [popupContainer, setPopupContainer] = useState(null);
 	const [confirming, setConfirming] = useState(false);
-	const [exporting, setExporting] = useState(false);
-	const [showFrame, setShowFrame] = useState(() => readPngExportFrame(preferences));
 	const cancelButton = useRef(null);
 	const publishLabel = t(state == "publishing" ? "workspace.publishing" : "publication.publishDraft");
 	const historyLabel = t(hasPublications === true ? "workspace.publications" : hasPublications === false ? "publication.historyEmpty" : "publication.loading");
@@ -34087,183 +34608,136 @@ function WorkspacePublishIsland({ hasPublications, onOpenPublications, onExport,
 		onPointerDown: (event) => event.stopPropagation(),
 		ref: setPopupContainer,
 		role: "group",
-		children: [
-			/* @__PURE__ */ jsxs(Popover, {
-				open: confirming,
-				onOpenChange: (open) => setConfirming(open && state == "ready"),
-				children: [/* @__PURE__ */ jsx(CanvasTooltip, {
-					getPopupContainer: () => popupContainer ?? document.body,
-					placement: "bottom",
-					title: statusTooltip,
-					children: /* @__PURE__ */ jsxs(PopoverTrigger, {
-						render: /* @__PURE__ */ jsx(Button$1, {
-							"aria-description": statusTooltip,
-							"aria-disabled": status != "ready" || void 0,
-							className: "workspace-publish-button",
-							"data-publish-status": status,
-							size: "default",
-							type: "button",
-							variant: "ghost"
-						}),
-						children: [/* @__PURE__ */ jsx("span", {
-							"aria-hidden": "true",
-							className: `status-dot ${status == "current" ? "success" : status == "ready" ? "warning" : "neutral"}`
-						}), /* @__PURE__ */ jsx("span", { children: publishLabel })]
-					})
-				}), /* @__PURE__ */ jsxs(PopoverContent, {
-					align: "end",
-					className: "gap-4 p-0",
-					container: popupContainer,
-					initialFocus: cancelButton,
-					side: "bottom",
-					sideOffset: 8,
-					children: [/* @__PURE__ */ jsxs(PopoverHeader, {
-						className: "gap-2 px-4 pt-4",
-						children: [/* @__PURE__ */ jsx(PopoverTitle, {
-							className: "m-0 text-sm",
-							children: t("publication.publishConfirm")
-						}), /* @__PURE__ */ jsx(PopoverDescription, {
-							className: "m-0",
-							children: t("publication.publishConfirmDescription")
-						})]
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "flex justify-end gap-2 px-3 pb-3",
-						children: [/* @__PURE__ */ jsx(Button$1, {
-							ref: cancelButton,
-							onClick: () => setConfirming(false),
-							size: "sm",
-							type: "button",
-							variant: "outline",
-							children: t("common.cancel")
-						}), /* @__PURE__ */ jsx(Button$1, {
-							disabled: state != "ready",
-							onClick: () => {
-								if (state != "ready") return;
-								setConfirming(false);
-								onPublish();
-							},
-							size: "sm",
-							type: "button",
-							children: t("publication.confirmPublish")
-						})]
+		children: [/* @__PURE__ */ jsxs(Popover, {
+			open: confirming,
+			onOpenChange: (open) => setConfirming(open && state == "ready"),
+			children: [/* @__PURE__ */ jsx(CanvasTooltip, {
+				getPopupContainer: () => popupContainer ?? document.body,
+				placement: "bottom",
+				title: statusTooltip,
+				children: /* @__PURE__ */ jsxs(PopoverTrigger, {
+					render: /* @__PURE__ */ jsx(Button$1, {
+						"aria-description": statusTooltip,
+						"aria-disabled": status != "ready" || void 0,
+						className: "workspace-publish-button",
+						"data-publish-status": status,
+						size: "default",
+						type: "button",
+						variant: "ghost"
+					}),
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: `status-dot ${status == "current" ? "success" : status == "ready" ? "warning" : "neutral"}`
+					}), /* @__PURE__ */ jsx("span", { children: publishLabel })]
+				})
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				align: "end",
+				className: "gap-4 p-0",
+				container: popupContainer,
+				initialFocus: cancelButton,
+				side: "bottom",
+				sideOffset: 8,
+				children: [/* @__PURE__ */ jsxs(PopoverHeader, {
+					className: "gap-2 px-4 pt-4",
+					children: [/* @__PURE__ */ jsx(PopoverTitle, {
+						className: "m-0 text-sm",
+						children: t("publication.publishConfirm")
+					}), /* @__PURE__ */ jsx(PopoverDescription, {
+						className: "m-0",
+						children: t("publication.publishConfirmDescription")
 					})]
-				})]
-			}),
-			/* @__PURE__ */ jsxs(DropdownMenu, {
-				onOpenChangeComplete: exportAction.onOpenChangeComplete,
-				children: [/* @__PURE__ */ jsx(CanvasTooltip, {
-					getPopupContainer: () => popupContainer ?? document.body,
-					placement: "bottom",
-					title: menuLabel,
-					children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
-						"aria-label": menuLabel,
-						size: "icon",
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-2 px-3 pb-3",
+					children: [/* @__PURE__ */ jsx(Button$1, {
+						ref: cancelButton,
+						onClick: () => setConfirming(false),
+						size: "sm",
 						type: "button",
-						variant: "ghost",
-						children: /* @__PURE__ */ jsx("i", {
-							"aria-hidden": "true",
-							className: "i-lucide-light:chevron-down"
-						})
-					}) })
-				}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
-					align: "end",
-					className: "w-max min-w-44 max-w-(--available-width)",
-					container: popupContainer,
-					side: "bottom",
-					sideOffset: 8,
-					children: [
-						onExport != null && /* @__PURE__ */ jsx(WorkflowExportMenuItem, {
-							className: "gap-2 px-2 py-[5px]",
-							disabled: state == "busy" || state == "publishing",
-							onClick: exportAction.onClick
-						}),
-						onExportPng != null && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, {
-							className: "gap-2 px-2 py-[5px]",
-							disabled: exporting,
-							children: [/* @__PURE__ */ jsx("i", {
-								"aria-hidden": "true",
-								className: "i-lucide-light:download size-4 shrink-0"
-							}), t("resource.exportPng")]
-						}), /* @__PURE__ */ jsxs(DropdownMenuSubContent, {
-							className: "min-w-32",
-							container: popupContainer,
-							children: [
-								/* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
-									checked: showFrame,
-									className: "py-[5px] pl-2",
-									closeOnClick: false,
-									onCheckedChange: (checked) => {
-										setShowFrame(checked);
-										writePngExportFrame(preferences, checked);
-									},
-									children: t("resource.exportPngFrame")
-								}),
-								/* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "mx-2 bg-border/50" }),
-								[false, true].map((dark) => /* @__PURE__ */ jsx(DropdownMenuItem, {
-									className: "px-2 py-[5px]",
-									onClick: async () => {
-										setExporting(true);
-										try {
-											await onExportPng({
-												dark,
-												frame: showFrame
-											});
-										} finally {
-											setExporting(false);
-										}
-									},
-									children: t(dark ? "resource.exportPngDark" : "resource.exportPngLight")
-								}, String(dark)))
-							]
-						})] }),
-						/* @__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__ */ jsx("span", {
-								className: "whitespace-nowrap",
-								children: historyLabel
-							})]
-						}),
-						onOpenState != null && /* @__PURE__ */ jsxs(DropdownMenuItem, {
-							className: "gap-2 px-2 py-[5px]",
-							onClick: onOpenState,
-							children: [/* @__PURE__ */ jsx("i", {
-								"aria-hidden": "true",
-								className: "i-lucide-light:database size-4 shrink-0 text-foreground/70"
-							}), t("flowState.title")]
-						}),
-						/* @__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]
-						})
-					]
+						variant: "outline",
+						children: t("common.cancel")
+					}), /* @__PURE__ */ jsx(Button$1, {
+						disabled: state != "ready",
+						onClick: () => {
+							if (state != "ready") return;
+							setConfirming(false);
+							onPublish();
+						},
+						size: "sm",
+						type: "button",
+						children: t("publication.confirmPublish")
+					})]
 				})]
-			}),
-			/* @__PURE__ */ jsx(Dialog, {
-				open: exporting,
-				onOpenChange: (_open, details) => details.cancel(),
-				children: /* @__PURE__ */ jsxs(DialogContent, {
-					container: popupContainer?.closest(".open-flow-workbench") ?? popupContainer,
-					showCloseButton: false,
-					"aria-busy": "true",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ jsx(Spinner, {
+			})]
+		}), /* @__PURE__ */ jsxs(DropdownMenu, {
+			onOpenChangeComplete: (open) => {
+				exportAction.onOpenChangeComplete(open);
+				pngAction.onOpenChangeComplete(open);
+			},
+			children: [/* @__PURE__ */ jsx(CanvasTooltip, {
+				getPopupContainer: () => popupContainer ?? document.body,
+				placement: "bottom",
+				title: menuLabel,
+				children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
+					"aria-label": menuLabel,
+					size: "icon",
+					type: "button",
+					variant: "ghost",
+					children: /* @__PURE__ */ jsx("i", {
+						"aria-hidden": "true",
+						className: "i-lucide-light:chevron-down"
+					})
+				}) })
+			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+				align: "end",
+				className: "w-max min-w-44 max-w-(--available-width)",
+				container: popupContainer,
+				side: "bottom",
+				sideOffset: 8,
+				children: [
+					onExport != null && /* @__PURE__ */ jsx(WorkflowExportMenuItem, {
+						className: "gap-2 px-2 py-[5px]",
+						disabled: state == "busy" || state == "publishing",
+						onClick: exportAction.onClick
+					}),
+					onOpenPngExport != null && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						className: "gap-2 px-2 py-[5px]",
+						onClick: pngAction.onClick,
+						children: [/* @__PURE__ */ jsx("i", {
 							"aria-hidden": "true",
-							className: "shrink-0"
-						}), /* @__PURE__ */ jsx(DialogTitle, { children: t("resource.exportPngPending") })]
-					}), /* @__PURE__ */ jsx(DialogDescription, { children: t("resource.exportPngPendingDescription") })]
-				})
-			})
-		]
+							className: "i-lucide-light:download size-4 shrink-0"
+						}), t("resource.exportPng")]
+					}),
+					/* @__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__ */ jsx("span", {
+							className: "whitespace-nowrap",
+							children: historyLabel
+						})]
+					}),
+					onOpenState != null && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						className: "gap-2 px-2 py-[5px]",
+						onClick: onOpenState,
+						children: [/* @__PURE__ */ jsx("i", {
+							"aria-hidden": "true",
+							className: "i-lucide-light:database size-4 shrink-0 text-foreground/70"
+						}), t("flowState.title")]
+					}),
+					/* @__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]
+					})
+				]
+			})]
+		})]
 	});
 }
 //#endregion
@@ -34469,7 +34943,7 @@ var NodeInspectorContainer = memo(function NodeInspectorContainer({ onAddWorkflo
 		triggers: store.triggers
 	});
 });
-function FlowEditor({ navigationIsland, onRun, onRunStarted, onCloseRuns, onConfigureConnector, onOpenPublications, onOpenRuns, onManageConnectorAccess, connectionHref, onToggleRuns, runDrawerOpen, store, theme }) {
+function FlowEditor({ portalRoot, navigationIsland, onRun, onRunStarted, onCloseRuns, onConfigureConnector, onOpenPublications, onOpenRuns, onManageConnectorAccess, connectionHref, onToggleRuns, runDrawerOpen, store, theme }) {
 	const t = useTranslate();
 	const addNodeOptions = useVal(store.workspace.$.addNodeOptions);
 	const language = useLang();
@@ -34477,6 +34951,8 @@ function FlowEditor({ navigationIsland, onRun, onRunStarted, onCloseRuns, onConf
 	const triggerCatalogState = useVal(store.triggers.catalog.state);
 	const [startId, setStartId] = useState();
 	const [stateOpen, setStateOpen] = useState(false);
+	const [pngExportOpen, setPngExportOpen] = useState(false);
+	const currentFlow = useVal(store.workspace.$.flow);
 	const runInputRequest = useVal(store.runRequests.$.inputRequest);
 	useVal(store.runRequests.$.inputsLoaded);
 	const busy = useVal(store.$.busy);
@@ -34501,6 +34977,18 @@ function FlowEditor({ navigationIsland, onRun, onRunStarted, onCloseRuns, onConf
 	const moduleEditor = useVal(store.workspace.$.moduleEditor);
 	const initialAddNodeTab = triggers.length == 0 ? "triggers" : "nodes";
 	const { ignoredNodeIds, onIgnoreNodes } = useIgnoredNodes(flowId ?? "");
+	const renderPng = useCallback(async (options) => {
+		const model = store.$.designer.value;
+		const { flowToPng } = await import("./exportPng-CrAFfOaD.js");
+		return flowToPng(model, language, {
+			...options,
+			ignoredNodeIds
+		});
+	}, [
+		store,
+		language,
+		ignoredNodeIds
+	]);
 	const panel = useInspectorPanel({
 		identity: flowId ?? "",
 		preferences: store.preferences,
@@ -34559,6 +35047,7 @@ function FlowEditor({ navigationIsland, onRun, onRunStarted, onCloseRuns, onConf
 	const opener = useRef();
 	useEffect(() => {
 		setStartId(void 0);
+		setPngExportOpen(false);
 		focusInspectorOnOpen.current = false;
 		opener.current = void 0;
 	}, [flowId]);
@@ -34628,6 +35117,17 @@ function FlowEditor({ navigationIsland, onRun, onRunStarted, onCloseRuns, onConf
 		role: "region",
 		tabIndex: 0,
 		children: [
+			/* @__PURE__ */ jsx(PngExportDialog, {
+				container: portalRoot,
+				defaultDark: theme === "dark",
+				direction: designer.direction,
+				onDownload: (result) => store.downloadPng(result),
+				onOpenChange: setPngExportOpen,
+				open: pngExportOpen,
+				preferences: store.preferences,
+				render: renderPng,
+				title: currentFlow?.name ?? flowId ?? "Workflow"
+			}),
 			flowId != null && stateOpen && /* @__PURE__ */ jsx(FlowStateButton, {
 				client: store.state,
 				flowId,
@@ -34672,11 +35172,7 @@ function FlowEditor({ navigationIsland, onRun, onRunStarted, onCloseRuns, onConf
 						},
 						open: diagnosticsOpen
 					}), /* @__PURE__ */ jsx(WorkspacePublishIsland, {
-						onExportPng: connectorAccess.access?.mode != "selectable" || designer.nodes.length == 0 ? void 0 : (options) => store.exportPng(language, {
-							...options,
-							ignoredNodeIds
-						}),
-						preferences: store.preferences,
+						onOpenPngExport: connectorAccess.access?.mode != "selectable" || designer.nodes.length == 0 ? void 0 : () => setPngExportOpen(true),
 						onExport: () => {
 							const id = store.workspace.$.flowId.value;
 							if (id != null) store.workspace.exportFlow(id);
@@ -34994,6 +35490,7 @@ function FlowWorkspace({ hrefFor, navigation, onConfigureConnector, onManageConn
 						})
 					})
 				}) : view == "design" ? /* @__PURE__ */ jsx(FlowEditor, {
+					portalRoot: transferContainer,
 					navigationIsland,
 					onRun: (triggerId) => void run(triggerId),
 					onRunStarted: revealRun,