@oomol-lab/open-flow 0.1.0-beta.79 → 0.1.0-beta.80

package/dist/browser/{flowWorkspace-CXVL1FNv.js → flowWorkspace-CRlqc403.js}

@@ -3,13 +3,13 @@ import { A as DropdownMenuSeparator, C as DropdownMenuCheckboxItem, D as Dropdow
 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, Dr as EMPTY_ARRAY, En as contains, Er as useRenderElement, Fr as formatErrorMessage, I as useCompositeListItem, In as useTransitionStatus, Ir as mergeProps, Ln as useOpenChangeComplete, Lr as useIsoLayoutEffect, Mn as ownerDocument, Mr as useButton, Nn as useLabelableId, Or as EMPTY_OBJECT, Qt as useStore, Sr as buttonVariants, Tn as activeElement, Tr as clsx, Un as useValueChanged, Wn as createChangeEventDetails, _r as fieldValidityMapping, a as createTooltipHandle, br as useControlled, c as TooltipPositioner, ct as CompositeList, d as TooltipRoot, dr as useFormContext, fr as useRegisterFieldControl, i as TooltipTrigger, jr as useMergedRefs, l as TooltipPortal, lt as inertValue, 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, zn as TransitionStatusDataAttributes, zr as useStableCallback } from "./tooltip-BDcVTNpu.js";
-import { $ as waitAutoContinueSchema, A as comparisonIssue, At as variableInputCompatible, Bt as SelectContent, Ct as limitDecisionQuestions, D as nodeSystemOutputPorts, Dt as matchesSchema, E as nodeErrorSchema, F as operatorsForType, Ft as skipDuplicatesConfigSchema, Gt as SelectValue, Ht as SelectItem, J as webhookResponseAllowsBody, K as webhookHeaderValuePort, L as unaryOperator, Lt as dequal, O as supportsNodeErrorHandling, Ot as portsAssignable, P as operandHandle, Q as workflowOutputsPort, R as valueType, Rt as Select$1, St as defaultDecisionQuestion, T as workflowToolNameIssue, Tt as webhookSupportsBody, U as decodeRevisionContent, Ut as SelectSeparator, Vt as SelectGroup, Wt as SelectTrigger, X as webhookResponseTimeout, Y as webhookResponseInputs, Z as webhookStatusCodePort, _t as isHttpHost, a as DialogFooter, 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 ChevronDown, kt as schemaObject, l as Icon, lt as httpRequestIssues, m as FieldGroup, nn as Label, nt as retryConfigurationSchema, o as DialogHeader, ot as httpQuerySchema, p as FieldError, pt as httpHeaderNameIssue, q as webhookHeadersPort, r as DialogContent, rn as Input, 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 SelectChevron } from "./dialog-CFFuRM8s.js";
-import { C as toManifestHandleName, E as isSameViewport, S as toViewEdge, T as isMac, _ as timeZoneOffset, a as NodeHistoryContext, b as CanvasTooltip, c as defaultTriggerIcon, d as formatDuration, f as useDebouncedValue, g as timeZoneLongLabel, h as timeZoneLabel, i as setAddItemId, l as JSONViewer, m as selectableTimeZones, n as CompositeRoot, o as Textarea, p as IconStack, r as ACTIVE_COMPOSITE_ITEM, s as CanvasNodeIcon, t as FlowCanvas, u as collapseAllNested, v as cronDescription, w as toManifestNodeId, x as CanvasStore, y as E$1 } from "./FlowCanvas-BQGBcfoL.js";
-import { $n as triggerOutputDefinitions, A as schemaForEditor, An as EmptyTitle, B as datePickerValue, Cn as InputGroupAddon, Cr as workflowSelectionTask, D as defaultValueEditorSchema, Dn as EmptyDescription, Dr as controlErrorCode, E as supportsFeishuChatFilter, En as EmptyContent, Et as schemaMismatchMessage, F as calendarChange, Fn as createI18n, G as indexAddNodeOptions, Gn as executionReachableNodes, H as isDateFormat, I as calendarDate, In as FeishuEventPicker, Jn as webhookResponseDiagnostics, Jt as dequal$1, Kn as inputSourceCandidates, L as dateFromTimeZone, Ln as EventSourceSetup, M as getDefaultValue, N as isUnconstrainedSchema, Nn as SourceForm, O as editorComponent, On as EmptyHeader, Or as eventSourceKind, Ot as connectionCatalog, P as typeOfSchema, Pn as SourceSelect, Q as resourceValue, R as dateInTimeZone, Rn as errorNotice, Sn as InputGroup, Sr as workflowCapability, T as feishuResourceKind, Tn as Empty, Tt as diagnosticNodeId, Un as decodeResultList, V as dateTimeWall, X as observeResource, Xn as sourcePort, Xt as IdTooltip, Yn as sourceOutputLabel, Yt as WorkflowExportMenuItem, Z as resourceData, Zt as FlowSettingsButton, _n as selectors, _r as servers, _t as canCancelRun, an as valueEditor_module_default, at as getAppCatalogCache, cn as ComboboxPopup, cr as triggerConfigValues, dn as ComboboxList, dr as object$1, dt as designerGraph, er as isJsonObject, et as provider, fn as GroupCollectionProvider, fr as openApiFieldIssues, ft as semanticNodeIcon, gn as ComboboxRoot, gr as serverAddress, hn as ComboboxInput, hr as selectOperation, ht as providerIcon, in as ValueEditorFeedback, j as valueForEditor, jn as Badge, k as editorGroups, kn as EmptyMedia, ln as ComboboxPositioner, lr as inputValue, mn as ComboboxInputGroup, mr as securityOptions, mt as actionSummary, n as agentTool, nn as selectionMenuItemClass, on as ComboboxItemIndicator, pn as ComboboxTrigger, pr as openApiTask, pt as triggerNodeIcon, q as mapSource, qn as resolutionOutputPorts, rn as ValueControl, rt as decodeAppCatalogResponse, sn as ComboboxItem, sr as triggerConfigValue, tn as selectionMenuContentClass, un as ComboboxPortal, ur as listOperations, ut as loadJson, vn as useComboboxInputValueContext, vr as sameWorkflowInterface, vt as hasRunFilter, wn as InputGroupInput, wt as diagnosticMessage, xn as followWorkbenchLink, xr as workflowCandidateGroup, yn as useComboboxRootContext, yr as workflowAgentTool, yt as revisionView, z as datePickerChange } from "./flowChanges-CN2R-m1M.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 toManifestHandleName, E as isSameViewport, S as toViewEdge, T as isMac, _ as timeZoneOffset, a as NodeHistoryContext, b as CanvasTooltip, c as defaultTriggerIcon, d as formatDuration, f as useDebouncedValue, g as timeZoneLongLabel, h as timeZoneLabel, i as setAddItemId, l as JSONViewer, m as selectableTimeZones, n as CompositeRoot, o as Textarea, p as IconStack, r as ACTIVE_COMPOSITE_ITEM, s as CanvasNodeIcon, t as FlowCanvas, u as collapseAllNested, v as cronDescription, w as toManifestNodeId, x as CanvasStore, y as E$1 } from "./FlowCanvas-CrsiDHK8.js";
+import { $t as FlowSettingsButton, A as schemaForEditor, An as EmptyHeader, Ar as eventSourceKind, At as connectionCatalog, B as datePickerValue, Bn as errorNotice, Cn as followWorkbenchLink, Cr as workflowCandidateGroup, D as defaultValueEditorSchema, Dn as Empty, Dt as diagnosticNodeId, E as supportsFeishuChatFilter, En as InputGroupInput, Et as diagnosticMessage, F as calendarChange, Fn as SourceForm, G as indexAddNodeOptions, Gn as decodeResultList, H as isDateFormat, I as calendarDate, In as SourceSelect, Jn as inputSourceCandidates, L as dateFromTimeZone, Ln as createI18n, M as getDefaultValue, Mn as EmptyTitle, N as isUnconstrainedSchema, Nn as Badge, O as editorComponent, On as EmptyContent, Or as ApiError, Ot as schemaMismatchMessage, P as typeOfSchema, Q as resourceValue, Qn as sourcePort, Qt as IdTooltip, R as dateInTimeZone, Rn as FeishuEventPicker, T as feishuResourceKind, Tn as InputGroupAddon, Tr as workflowSelectionTask, V as dateTimeWall, X as observeResource, Xn as webhookResponseDiagnostics, Xt as dequal$1, Yn as resolutionOutputPorts, Z as resourceData, Zn as sourceOutputLabel, Zt as WorkflowExportMenuItem, _n as ComboboxInput, _r as selectOperation, _t as providerIcon, an as ValueControl, at as getAppCatalogCache, bn as useComboboxInputValueContext, br as sameWorkflowInterface, bt as hasRunFilter, cn as ComboboxItemIndicator, dn as ComboboxPositioner, dr as inputValue, dt as designerGraph, et as provider, fn as ComboboxPortal, fr as listOperations, ft as nodeIcon, gn as ComboboxInputGroup, gr as securityOptions, gt as actionSummary, hn as ComboboxTrigger, hr as openApiTask, ht as triggerNodeIcon, in as selectionMenuItemClass, j as valueForEditor, jn as EmptyMedia, k as editorGroups, kn as EmptyDescription, kr as controlErrorCode, ln as ComboboxItem, lr as triggerConfigValue, mn as GroupCollectionProvider, mr as openApiFieldIssues, mt as semanticNodeIcon, n as agentTool, nr as isJsonObject, on as ValueEditorFeedback, pn as ComboboxList, pr as object$1, pt as nodeTitle, q as mapSource, qn as executionReachableNodes, rn as selectionMenuContentClass, rt as decodeAppCatalogResponse, sn as valueEditor_module_default, tr as triggerOutputDefinitions, un as ComboboxPopup, ur as triggerConfigValues, ut as loadJson, vn as ComboboxRoot, vr as serverAddress, wn as InputGroup, wr as workflowCapability, xn as useComboboxRootContext, xr as workflowAgentTool, xt as revisionView, yn as selectors, yr as servers, yt as canCancelRun, z as datePickerChange, zn as EventSourceSetup } from "./flowChanges-pFjPHU5k.js";
 import { r as resolveUiLanguage } from "./languages-gYzoQqCi.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-CkOS95gX.js";
+import { t as WorkbenchSelect } from "./workbenchSelect-Ci0KCYv9.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";
@@ -5497,259 +5497,396 @@ function FlowNodeList({ nodes, onFocusNode, onSelect, groupTriggers = false }) {
 	});
 }
 //#endregion
-//#region src/ui/browser/native-select.tsx
-function NativeSelect({ className, size = "default", ...props }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className),
-		"data-slot": "native-select-wrapper",
-		"data-size": size,
-		children: [/* @__PURE__ */ jsx("select", {
-			"data-slot": "native-select",
-			"data-size": size,
-			className: "h-8 w-full min-w-0 appearance-none rounded-[var(--ui-control-radius,calc(var(--ui-radius)_+_2px))] border border-input bg-[var(--ui-control-background,var(--ui-muted))] py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground data-[slot=native-select]:focus-visible:text-field-focus data-[slot=native-select]:focus-visible:aria-invalid:invalid-text-field-focus disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive data-[size=sm]:h-7 data-[size=sm]:rounded-[var(--ui-control-radius,var(--ui-radius))] data-[size=sm]:py-0.5 dark:bg-[var(--ui-control-background,var(--ui-muted))] dark:hover:bg-input/50",
-			...props
-		}), /* @__PURE__ */ jsx(ChevronDown, {
-			className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none",
-			"aria-hidden": "true",
-			"data-slot": "native-select-icon"
+//#region src/ui/browser/helpButton.tsx
+/** Supplementary, non-interactive help that can also be opened by click. */
+function HelpButton({ label, children, container, size = 24 }) {
+	const id = useId();
+	const [tooltip] = useState(() => createTooltipHandle());
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		handle: tooltip,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			id,
+			handle: tooltip,
+			closeOnClick: false,
+			onClick: () => tooltip.open(id),
+			render: /* @__PURE__ */ jsx(Button$1, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-xs",
+				style: {
+					width: size,
+					height: size
+				},
+				"aria-label": label
+			}),
+			children: /* @__PURE__ */ jsx("i", {
+				"aria-hidden": "true",
+				className: "i-lucide-light:info text-muted-foreground",
+				style: { fontSize: size * 5 / 8 }
+			})
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			container,
+			children
 		})]
 	});
 }
-function NativeSelectOption({ className, ...props }) {
-	return /* @__PURE__ */ jsx("option", {
-		"data-slot": "native-select-option",
-		className: cn("bg-[Canvas] text-[CanvasText]", className),
-		...props
-	});
-}
 //#endregion
 //#region src/workbench/browser/runtime/editor/flowStatePanel.tsx
-function StateValueRow({ item, client, flowId, scope, busy, onClear }) {
+function sourceName(space, nodes, t) {
+	return space === "flow" ? t("flowState.shared") : nodes.find((node) => `node:${node.id}` === space)?.title ?? space;
+}
+function UpdatedTime({ value, container }) {
+	const language = useLang();
+	const delta = value - Date.now();
+	const units = [
+		["year", 31536e6],
+		["month", 2592e6],
+		["day", 864e5],
+		["hour", 36e5],
+		["minute", 6e4],
+		["second", 1e3]
+	];
+	const [unit, duration] = units.find(([, size]) => Math.abs(delta) >= size) ?? units[units.length - 1];
+	const date = new Date(value);
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx("time", { dateTime: date.toISOString() }),
+		children: new Intl.RelativeTimeFormat(language, { numeric: "auto" }).format(Math.round(delta / duration), unit)
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		container,
+		children: date.toLocaleString(language)
+	})] });
+}
+function Usage({ count, limit }) {
+	const language = useLang();
 	const t = useTranslate();
-	const [open, setOpen] = useState(false);
-	const [result, setResult] = useState();
-	const [error, setError] = useState();
-	useEffect(() => {
-		if (!open) return;
-		const controller = new AbortController();
-		setResult(void 0);
-		setError(void 0);
-		client.getFlowStateValues(flowId, scope, [item.key], controller.signal).then((response) => {
-			if (!controller.signal.aborted) setResult(response.values[0]);
-		}, (reason) => {
-			if (!controller.signal.aborted) setError(String(reason));
-		});
-		return () => controller.abort();
-	}, [
-		client,
-		flowId,
-		scope,
-		item.key,
-		item.updatedAt,
-		open
-	]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-start justify-between gap-3 border-b border-border/60 py-2",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ jsx("p", {
-				className: "m-0 break-all font-medium",
-				children: item.key
-			}), open && (result != null ? /* @__PURE__ */ jsx("pre", {
-				className: "max-h-40 overflow-auto whitespace-pre-wrap break-all text-xs",
-				children: JSON.stringify(result.value, null, 2)
-			}) : error != null ? /* @__PURE__ */ jsx("p", {
-				role: "alert",
-				className: "text-destructive text-sm",
-				children: error
-			}) : /* @__PURE__ */ jsx("p", {
-				role: "status",
-				className: "text-muted-foreground text-sm",
-				children: t("flowState.loading")
-			}))]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex shrink-0 gap-2",
-			children: [/* @__PURE__ */ jsx(Button$1, {
-				variant: "outline",
-				size: "sm",
-				disabled: busy,
-				"aria-expanded": open,
-				"aria-label": `${t(open ? "flowState.hideValue" : "flowState.showValue")}: ${item.key}`,
-				onClick: () => setOpen((value) => !value),
-				children: t(open ? "flowState.hideValue" : "flowState.showValue")
-			}), /* @__PURE__ */ jsx(Button$1, {
-				variant: "outline",
-				size: "sm",
-				disabled: busy,
-				onClick: (event) => onClear(item.key, event.currentTarget),
-				children: t("flowState.delete")
-			})]
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex flex-col items-end whitespace-nowrap tabular-nums sm:inline",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "font-medium text-foreground",
+			children: count?.toLocaleString(language) ?? "—"
+		}), limit != null && /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-muted-foreground",
+			children: t("flowState.limit", { limit: limit.toLocaleString(language) })
 		})]
 	});
 }
-function FlowStatePanel({ value, client, flowId, nodeIds, busy, onClearValues, onClearSpace, space }) {
+function StateClearButton({ name, disabled, reason, onClear, container }) {
+	const t = useTranslate();
+	const label = t("flowState.clearSource", { name });
+	const button = /* @__PURE__ */ jsx(Button$1, {
+		variant: "ghost",
+		size: "sm",
+		"aria-label": label,
+		disabled: disabled || reason != null,
+		onClick: (event) => onClear(event.currentTarget),
+		children: t("flowState.clear")
+	});
+	return reason == null ? button : /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx("span", {
+			role: "group",
+			"aria-label": label,
+			tabIndex: 0,
+			className: "inline-flex"
+		}),
+		children: button
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		container,
+		children: reason
+	})] });
+}
+function StateDataRow({ name, quantity, updatedAt, status, source, icon, disabled, clearReason, onClear, container }) {
+	return /* @__PURE__ */ jsxs("tr", {
+		className: "border-b border-border/60 last:border-b-0",
+		children: [
+			/* @__PURE__ */ jsx("th", {
+				scope: "row",
+				className: "py-3 text-left align-middle font-normal [overflow-wrap:anywhere]",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [icon != null && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "flex h-5 w-4 shrink-0 items-center justify-center text-base text-muted-foreground",
+						children: icon
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [source == null ? name : /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+							render: /* @__PURE__ */ jsx("span", {}),
+							children: name
+						}), /* @__PURE__ */ jsx(TooltipContent, {
+							container,
+							children: source
+						})] }), (status != null || updatedAt != null) && /* @__PURE__ */ jsx("div", {
+							className: "mt-1 text-xs font-normal text-muted-foreground",
+							children: status ?? (updatedAt != null && /* @__PURE__ */ jsx(UpdatedTime, {
+								value: updatedAt,
+								container
+							}))
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("td", {
+				className: "w-px py-3 pl-3 text-right align-middle whitespace-nowrap tabular-nums",
+				children: quantity
+			}),
+			/* @__PURE__ */ jsx("td", {
+				className: "w-px py-3 pl-3 text-right align-middle whitespace-nowrap",
+				children: onClear != null && /* @__PURE__ */ jsx(StateClearButton, {
+					name,
+					disabled,
+					reason: clearReason,
+					onClear,
+					container
+				})
+			})
+		]
+	});
+}
+function FlowStatePanel({ value, nodes, busy, loading = false, onClearValues, onClearHistory, onClearSpace, space, container }) {
 	const t = useTranslate();
-	const count = value.spaces.reduce((total, item) => total + item.reservedCount, 0);
-	const spaces = space == null ? value.spaces : value.spaces.filter((item) => item.space === space);
+	const language = useLang();
+	const allSpaces = value?.spaces ?? [];
+	const count = value == null ? void 0 : allSpaces.reduce((total, item) => total + item.reservedCount, 0);
+	const spaces = allSpaces.filter((item) => space == null || item.space === space).toSorted((a, b) => b.reservedCount - a.reservedCount || (a.space < b.space ? -1 : a.space > b.space ? 1 : 0));
+	const readStatus = loading ? t("flowState.loading") : value == null ? t("flowState.loadFailed") : void 0;
+	const valuesDetail = readStatus ?? (value?.values.count === 0 ? t("flowState.emptyValues") : value?.values.updatedAt != null ? /* @__PURE__ */ jsx(UpdatedTime, {
+		value: value.values.updatedAt,
+		container
+	}) : void 0);
+	const historyDetail = readStatus ?? (spaces.length === 0 ? t("flowState.emptySpaces") : void 0);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-4",
 		children: [space == null && /* @__PURE__ */ jsxs("section", {
-			className: "flex flex-col gap-2",
+			"aria-label": t("flowState.values"),
+			className: "flex flex-col gap-3 rounded-lg bg-muted/50 p-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: "m-0 text-sm font-medium",
+							children: t("flowState.values")
+						}), valuesDetail != null && /* @__PURE__ */ jsx("p", {
+							className: "mt-1 mb-0 text-xs text-muted-foreground",
+							children: valuesDetail
+						})]
+					}),
+					/* @__PURE__ */ jsx(Usage, {
+						count: value?.values.count,
+						limit: value?.limits.maxValues
+					}),
+					value != null && value.values.count > 0 && /* @__PURE__ */ jsx(StateClearButton, {
+						name: t("flowState.values"),
+						disabled: busy,
+						onClear: onClearValues,
+						container
+					})
+				]
+			}), value != null && value.values.count >= value.limits.maxValues * .8 && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "m-0 text-xs text-destructive",
+				children: t("flowState.valuesNearLimit")
+			})]
+		}), /* @__PURE__ */ jsxs("section", {
+			"aria-label": t("flowState.spaces"),
+			className: "flex flex-col gap-3 rounded-lg bg-muted/50 p-3",
 			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-between gap-3",
+				(space == null || spaces.length === 0) && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
 					children: [
-						/* @__PURE__ */ jsx("h3", {
-							className: "m-0 min-w-0 flex-1 text-sm font-medium",
-							children: t("flowState.values")
+						/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsx("h3", {
+								className: "m-0 text-sm font-medium",
+								children: space == null ? t("flowState.spaces") : sourceName(space, nodes, t)
+							}), historyDetail != null && /* @__PURE__ */ jsx("p", {
+								className: "mt-1 mb-0 text-xs text-muted-foreground",
+								children: historyDetail
+							})]
 						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "text-xs text-muted-foreground",
-							children: t("flowState.entries", {
-								count: value.values.length.toLocaleString(),
-								limit: value.limits.maxValues.toLocaleString()
-							})
+						space == null ? /* @__PURE__ */ jsx(Usage, {
+							count,
+							limit: value?.limits.maxIdentities
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "text-sm tabular-nums",
+							children: value == null ? "—" : t("flowState.records", { count: "0" })
 						}),
-						value.values.length > 0 && /* @__PURE__ */ jsx(Button$1, {
-							variant: "outline",
-							size: "sm",
+						space == null && allSpaces.length > 0 && /* @__PURE__ */ jsx(StateClearButton, {
+							name: t("flowState.spaces"),
 							disabled: busy,
-							onClick: (event) => onClearValues(void 0, event.currentTarget),
-							children: t("flowState.clearAll")
+							reason: allSpaces.some((item) => item.pendingCount === 0) ? void 0 : t("flowState.clearBlocked"),
+							onClear: onClearHistory,
+							container
 						})
 					]
 				}),
-				!value.values.length && /* @__PURE__ */ jsx("p", {
-					className: "m-0 text-sm text-muted-foreground",
-					children: t("flowState.emptyValues")
-				}),
-				value.values.map((item) => /* @__PURE__ */ jsx(StateValueRow, {
-					item,
-					client,
-					flowId,
-					scope: value.scope,
-					busy,
-					onClear: onClearValues
-				}, item.key))
-			]
-		}), /* @__PURE__ */ jsxs("section", {
-			className: "flex flex-col gap-2",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-between gap-3",
-					children: [/* @__PURE__ */ jsx("h3", {
-						className: "m-0 text-sm font-medium",
-						children: t("flowState.spaces")
-					}), /* @__PURE__ */ jsx("span", {
-						className: "text-xs text-muted-foreground",
-						children: t("flowState.entries", {
-							count: count.toLocaleString(),
-							limit: value.limits.maxIdentities.toLocaleString()
-						})
-					})]
-				}),
-				count >= value.limits.maxIdentities * .8 && /* @__PURE__ */ jsx("p", {
+				value != null && count != null && count >= value.limits.maxIdentities * .8 && /* @__PURE__ */ jsx("p", {
 					role: "status",
-					className: "m-0 text-destructive text-xs",
+					className: "m-0 text-xs text-destructive",
 					children: t("flowState.nearLimit")
 				}),
-				!spaces.length && /* @__PURE__ */ jsx("p", {
-					className: "m-0 text-sm text-muted-foreground",
-					children: t("flowState.emptySpaces")
-				}),
-				spaces.map((item) => /* @__PURE__ */ jsxs("div", {
-					className: "flex items-start justify-between gap-3 border-b border-border/60 py-2",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "min-w-0",
-						children: [/* @__PURE__ */ jsxs("p", {
-							className: "m-0 break-all font-medium",
+				spaces.length > 0 && /* @__PURE__ */ jsxs("table", {
+					"aria-label": t("flowState.source"),
+					className: "w-full border-collapse text-sm",
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: "sr-only",
+						children: /* @__PURE__ */ jsxs("tr", {
+							className: "text-xs text-muted-foreground",
 							children: [
-								item.space,
-								" ",
-								item.space.startsWith("node:") && !nodeIds.includes(item.space.slice(5)) && /* @__PURE__ */ jsxs("span", {
-									className: "text-muted-foreground",
-									children: [
-										"(",
-										t("flowState.orphaned"),
-										")"
-									]
+								/* @__PURE__ */ jsx("th", {
+									scope: "col",
+									className: "pb-2 text-left font-normal",
+									children: t("flowState.source")
+								}),
+								/* @__PURE__ */ jsx("th", {
+									scope: "col",
+									className: "pb-2 pl-4 text-right font-normal",
+									children: t("flowState.count")
+								}),
+								/* @__PURE__ */ jsx("th", {
+									scope: "col",
+									className: "pl-4",
+									children: /* @__PURE__ */ jsx("span", {
+										className: "sr-only",
+										children: t("flowState.clear")
+									})
 								})
 							]
-						}), /* @__PURE__ */ jsxs("p", {
-							className: "m-0 text-xs",
-							children: [t("flowState.records", { count: item.count.toLocaleString() }), item.pendingCount > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [" · ", t("flowState.pendingRecords", { count: item.pendingCount.toLocaleString() })] })]
-						})]
-					}), /* @__PURE__ */ jsx(Button$1, {
-						variant: "outline",
-						size: "sm",
-						disabled: busy || item.pendingCount > 0,
-						onClick: (event) => onClearSpace(item.space, event.currentTarget),
-						children: t("flowState.clear")
+						})
+					}), /* @__PURE__ */ jsx("tbody", { children: spaces.map((item) => {
+						const node = nodes.find((entry) => `node:${entry.id}` === item.space);
+						const fallback = /* @__PURE__ */ jsx("i", {
+							"aria-hidden": "true",
+							className: "i-lucide-light:workflow"
+						});
+						return /* @__PURE__ */ jsx(StateDataRow, {
+							name: sourceName(item.space, nodes, t),
+							source: item.space.startsWith("node:") && node == null ? `${item.space} · ${t("flowState.orphaned")}` : item.space,
+							icon: item.space === "flow" ? /* @__PURE__ */ jsx("i", {
+								"aria-hidden": "true",
+								className: "i-lucide-light:database"
+							}) : /* @__PURE__ */ jsx(ContentIcon, {
+								src: node?.icon,
+								className: "size-4",
+								fallback: /* @__PURE__ */ jsx(ContentIcon, {
+									src: node?.fallbackIcon,
+									className: "size-4",
+									fallback
+								})
+							}),
+							quantity: item.reservedCount.toLocaleString(language),
+							updatedAt: item.updatedAt,
+							status: space != null ? readStatus : void 0,
+							disabled: busy,
+							clearReason: item.pendingCount > 0 ? t("flowState.pendingClear", { count: item.pendingCount.toLocaleString(language) }) : void 0,
+							onClear: (trigger) => onClearSpace(item.space, trigger),
+							container
+						}, item.space);
+					}) })]
+				}),
+				space != null && /* @__PURE__ */ jsxs("p", {
+					className: "m-0 flex flex-wrap items-baseline justify-between gap-2 border-t border-border/60 pt-3 text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ jsx("span", { children: t("flowState.globalUsage") }), /* @__PURE__ */ jsx(Usage, {
+						count,
+						limit: value?.limits.maxIdentities
 					})]
-				}, item.space))
+				})
 			]
 		})]
 	});
 }
-function FlowStateButton({ client, flowId, nodeIds, history, onClose }) {
+function FlowStateButton({ client, flowId, nodes, history, notify, onClose }) {
 	const t = useTranslate();
+	const language = useLang();
 	const [container, setContainer] = useState(null);
-	const portal = useCallback((element) => {
-		setContainer(element?.closest(".open-flow-workbench") ?? element?.closest(".open-flow-theme") ?? null);
-	}, []);
+	const portal = useCallback((element) => setContainer(element?.closest(".open-flow-workbench, .open-flow-theme") ?? null), []);
 	const [open, setOpen] = useState(onClose != null);
 	const [scope, setScope] = useState("draft");
 	const space = history == null ? void 0 : `node:${history.nodeId}`;
-	const [data, setData] = useState();
-	const [error, setError] = useState();
+	const [read, setRead] = useState({
+		scope: "draft",
+		loading: true
+	});
+	const data = read.scope === scope ? read.data : void 0;
+	const loading = read.scope !== scope || read.loading;
 	const [busy, setBusy] = useState(false);
+	const pending = useRef(false);
 	const [refresh, setRefresh] = useState(0);
 	const [confirm, setConfirm] = useState();
 	const cancelButton = useRef(null);
+	const dialogRoot = useRef(null);
 	const confirmTrigger = useRef();
-	useEffect(() => {
-		if (confirm != null) cancelButton.current?.focus();
-	}, [confirm]);
-	const cancelConfirm = () => {
-		setConfirm(void 0);
-		confirmTrigger.current?.focus();
-	};
 	useEffect(() => {
 		if (!open) return;
-		let active = true;
-		setData(void 0);
-		setError(void 0);
-		client.getFlowState(flowId, scope).then((result) => {
-			if (active) setData(result);
+		const controller = new AbortController();
+		setRead((previous) => ({
+			scope,
+			data: previous.scope === scope ? previous.data : void 0,
+			loading: true
+		}));
+		client.getFlowStateSummary(flowId, scope, controller.signal).then((result) => {
+			if (!controller.signal.aborted) setRead({
+				scope,
+				data: result,
+				loading: false
+			});
 		}, (reason) => {
-			if (active) setError(String(reason));
+			if (!controller.signal.aborted) setRead((previous) => ({
+				...previous,
+				loading: false,
+				error: errorNotice(reason, t).message
+			}));
 		});
-		return () => {
-			active = false;
-		};
+		return () => controller.abort();
 	}, [
 		client,
 		flowId,
 		scope,
 		refresh,
 		open,
-		space
+		t
 	]);
 	const clear = async (target) => {
+		if (pending.current) return;
+		pending.current = true;
 		setBusy(true);
-		setError(void 0);
 		try {
-			if (target.space != null) await client.clearFlowDedupe(flowId, scope, target.space);
-			else await client.clearFlowState(flowId, scope, target.key);
+			if (target.kind === "values") await client.clearFlowState(flowId, target.scope);
+			else if (target.space != null) await client.clearFlowDedupe(flowId, target.scope, target.space);
+			else await client.clearAllFlowDedupe(flowId, target.scope);
+			confirmTrigger.current = dialogRoot.current ?? void 0;
 			setConfirm(void 0);
 			setRefresh((value) => value + 1);
+			dialogRoot.current?.focus();
 		} catch (reason) {
-			setError(String(reason));
+			const conflict = target.kind === "dedupe" && reason instanceof ApiError && reason.code === controlErrorCode.flowConflict;
+			notify(conflict ? {
+				kind: "error",
+				message: t("flowState.clearBlocked")
+			} : errorNotice(reason, t));
+			if (conflict) {
+				confirmTrigger.current = dialogRoot.current ?? void 0;
+				setConfirm(void 0);
+				setRefresh((value) => value + 1);
+			}
 		} finally {
+			pending.current = false;
 			setBusy(false);
 		}
 	};
-	const request = (target, trigger) => {
+	const request = (kind, targetSpace, trigger) => {
+		if (pending.current || data == null) return;
+		const targets = data.spaces.filter((item) => targetSpace == null || item.space === targetSpace);
+		if (kind === "dedupe" && !targets.some((item) => item.pendingCount === 0)) return;
+		const target = {
+			kind,
+			scope,
+			space: targetSpace,
+			name: kind === "values" ? t("flowState.values") : targetSpace == null ? t("flowState.spaces") : sourceName(targetSpace, nodes, t),
+			count: kind === "values" ? data.values.count : targets.filter((item) => item.pendingCount === 0).reduce((total, item) => total + item.count, 0),
+			pendingCount: kind === "values" ? 0 : targets.reduce((total, item) => total + item.pendingCount, 0)
+		};
 		confirmTrigger.current = trigger;
 		if (scope === "live") setConfirm(target);
 		else clear(target);
@@ -5759,13 +5896,20 @@ function FlowStateButton({ client, flowId, nodeIds, history, onClose }) {
 		ref: portal,
 		children: /* @__PURE__ */ jsxs(Dialog, {
 			open,
-			onOpenChange: (next) => {
-				if (!busy) {
-					setOpen(next);
-					if (next) setScope("draft");
-					if (!next) onClose?.();
-					setConfirm(void 0);
+			onOpenChange: (next, details) => {
+				if (pending.current) {
+					details.cancel();
+					return;
 				}
+				setOpen(next);
+				setConfirm(void 0);
+				if (next) {
+					setScope("draft");
+					setRead({
+						scope: "draft",
+						loading: true
+					});
+				} else onClose?.();
 			},
 			children: [onClose == null && /* @__PURE__ */ jsxs(DialogTrigger, {
 				render: /* @__PURE__ */ jsx(Button$1, {
@@ -5777,121 +5921,150 @@ function FlowStateButton({ client, flowId, nodeIds, history, onClose }) {
 					className: "i-lucide-light:database"
 				}), t(space == null ? "flowState.title" : "flowState.history")]
 			}), /* @__PURE__ */ jsxs(DialogContent, {
+				ref: dialogRoot,
 				container,
-				className: "max-h-[80vh] overflow-auto",
+				className: "flex h-[min(32rem,80dvh)] flex-col overflow-hidden sm:max-w-2xl",
 				closeLabel: t("common.close"),
 				children: [
-					/* @__PURE__ */ jsx(DialogTitle, { children: t(space == null ? "flowState.title" : "flowState.history") }),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-wrap items-center gap-3",
-						children: [
-							/* @__PURE__ */ jsxs(NativeSelect, {
+					/* @__PURE__ */ jsx(DialogTitle, {
+						className: "break-words pr-8",
+						children: space == null ? t("flowState.title") : t("flowState.sourceHistory", { name: sourceName(space, nodes, t) })
+					}),
+					/* @__PURE__ */ jsxs(Tabs, {
+						value: scope,
+						onValueChange: (value) => {
+							if (!pending.current) {
+								setScope(value);
+								setConfirm(void 0);
+							}
+						},
+						className: "min-h-0 flex-1 gap-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex shrink-0 items-center justify-between gap-2",
+							children: [/* @__PURE__ */ jsxs(TabsList, {
 								"aria-label": t("flowState.scope"),
-								value: scope,
-								disabled: busy,
-								onChange: (event) => {
-									setScope(event.target.value);
-									setConfirm(void 0);
-								},
-								children: [/* @__PURE__ */ jsx(NativeSelectOption, {
+								children: [/* @__PURE__ */ jsx(TabsTrigger, {
 									value: "draft",
+									disabled: busy,
 									children: t("flowState.draft")
-								}), /* @__PURE__ */ jsx(NativeSelectOption, {
+								}), /* @__PURE__ */ jsx(TabsTrigger, {
 									value: "live",
+									disabled: busy,
 									children: t("flowState.live")
 								})]
-							}),
-							/* @__PURE__ */ jsx(Button$1, {
-								variant: "outline",
-								size: "sm",
-								disabled: busy,
-								onClick: () => setRefresh((value) => value + 1),
-								children: t("flowState.refresh")
-							}),
-							/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-								render: /* @__PURE__ */ jsx(Button$1, {
-									variant: "ghost",
-									size: "xs",
-									className: "ml-auto text-muted-foreground"
-								}),
-								children: t("flowState.rules")
-							}), /* @__PURE__ */ jsx(TooltipContent, {
-								container,
-								className: "max-w-xs",
-								children: /* @__PURE__ */ jsxs("div", {
-									className: "flex flex-col gap-2",
-									children: [
-										/* @__PURE__ */ jsx("p", {
-											className: "m-0",
-											children: t("flowState.isolation")
-										}),
-										/* @__PURE__ */ jsx("p", {
-											className: "m-0",
-											children: t("flowState.retention")
-										}),
-										data != null && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
-											className: "m-0",
-											children: t("flowState.valueLimit", { size: data.limits.maxValueBytes.toLocaleString() })
-										}), /* @__PURE__ */ jsx("p", {
-											className: "m-0",
-											children: t("flowState.sharedLimit", {
-												count: data.spaces.length,
-												limit: data.limits.maxSpaces
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex shrink-0 items-center gap-2",
+								children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+									render: /* @__PURE__ */ jsx(Button$1, {
+										"aria-label": t("flowState.refresh"),
+										variant: "ghost",
+										size: "icon-sm",
+										disabled: busy || loading,
+										onClick: () => setRefresh((value) => value + 1)
+									}),
+									children: /* @__PURE__ */ jsx("i", {
+										"aria-hidden": "true",
+										className: "i-lucide-light:refresh-cw"
+									})
+								}), /* @__PURE__ */ jsx(TooltipContent, {
+									container,
+									children: t("flowState.refresh")
+								})] }), /* @__PURE__ */ jsx(HelpButton, {
+									label: t("flowState.rules"),
+									container,
+									size: 28,
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "flex flex-col gap-2",
+										children: [
+											/* @__PURE__ */ jsx("p", {
+												className: "m-0",
+												children: t("flowState.valuesHelp", { name: t("flowState.values") })
+											}),
+											/* @__PURE__ */ jsx("p", {
+												className: "m-0",
+												children: t("flowState.historyHelp", { name: t("flowState.spaces") })
+											}),
+											/* @__PURE__ */ jsx("p", {
+												className: "m-0",
+												children: t("flowState.isolation")
 											})
-										})] })
-									]
-								})
-							})] })
-						]
-					}),
-					error && /* @__PURE__ */ jsx("p", {
-						role: "alert",
-						className: "text-destructive",
-						children: error
-					}),
-					confirm && /* @__PURE__ */ jsxs("div", {
-						role: "alert",
-						className: "flex flex-col gap-2 rounded border border-border p-3",
-						children: [
-							/* @__PURE__ */ jsx("p", { children: t("flowState.confirmLive") }),
-							/* @__PURE__ */ jsx("p", {
-								className: "break-all",
-								children: confirm.space ?? confirm.key ?? t("flowState.values")
-							}),
-							/* @__PURE__ */ jsxs("div", {
-								className: "flex gap-2",
-								children: [/* @__PURE__ */ jsx(Button$1, {
-									disabled: busy,
-									variant: "destructive",
-									onClick: () => void clear(confirm),
-									children: t("flowState.clear")
-								}), /* @__PURE__ */ jsx(Button$1, {
-									ref: cancelButton,
-									disabled: busy,
-									variant: "outline",
-									onClick: cancelConfirm,
-									children: t("flowState.cancel")
+										]
+									})
+								})]
+							})]
+						}), /* @__PURE__ */ jsx(NativeScrollArea, {
+							className: "min-h-0 flex-1 overflow-y-auto",
+							children: /* @__PURE__ */ jsxs(TabsContent, {
+								value: scope,
+								"aria-busy": busy || loading,
+								children: [read.scope === scope && read.error != null && /* @__PURE__ */ jsxs("div", {
+									className: "mb-3 flex flex-wrap items-center gap-2",
+									children: [/* @__PURE__ */ jsx("p", {
+										role: "alert",
+										className: "m-0 min-w-0 flex-1 text-sm text-destructive",
+										children: read.error
+									}), /* @__PURE__ */ jsx(Button$1, {
+										variant: "outline",
+										size: "sm",
+										disabled: loading || busy,
+										onClick: () => setRefresh((value) => value + 1),
+										children: t("flowState.retry")
+									})]
+								}), /* @__PURE__ */ jsx(FlowStatePanel, {
+									value: data,
+									loading,
+									space,
+									nodes,
+									container,
+									busy: busy || loading,
+									onClearValues: (trigger) => request("values", void 0, trigger),
+									onClearHistory: (trigger) => request("dedupe", void 0, trigger),
+									onClearSpace: (sourceSpace, trigger) => request("dedupe", sourceSpace, trigger)
 								})]
 							})
-						]
+						})]
 					}),
-					data == null ? /* @__PURE__ */ jsx("p", {
-						role: "status",
-						children: error == null ? t("flowState.loading") : ""
-					}) : /* @__PURE__ */ jsx(FlowStatePanel, {
-						value: data,
-						client,
-						flowId,
-						space,
-						nodeIds,
-						busy,
-						onClearValues: (key, trigger) => request({ key }, trigger),
-						onClearSpace: (targetSpace, trigger) => request({ space: targetSpace }, trigger)
-					}, JSON.stringify([
-						flowId,
-						scope,
-						refresh
-					]))
+					/* @__PURE__ */ jsx(Dialog, {
+						open: confirm != null,
+						onOpenChange: (next, details) => {
+							if (pending.current) details.cancel();
+							else if (!next) setConfirm(void 0);
+						},
+						children: /* @__PURE__ */ jsxs(DialogContent, {
+							container,
+							initialFocus: cancelButton,
+							finalFocus: () => confirmTrigger.current?.isConnected ? confirmTrigger.current : dialogRoot.current,
+							showCloseButton: false,
+							children: [
+								/* @__PURE__ */ jsx(DialogTitle, { children: t("flowState.confirmTitle", { name: confirm?.name ?? "" }) }),
+								/* @__PURE__ */ jsx(DialogDescription, { children: confirm && t(confirm.kind === "values" ? "flowState.confirmValues" : "flowState.confirmHistory", {
+									count: confirm.count.toLocaleString(language),
+									scope: t(confirm.scope === "draft" ? "flowState.draft" : "flowState.live")
+								}) }),
+								confirm != null && confirm.pendingCount > 0 && /* @__PURE__ */ jsx("p", {
+									className: "m-0 text-sm text-muted-foreground",
+									children: t("flowState.retainedHistory", { count: confirm.pendingCount.toLocaleString(language) })
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex justify-end gap-2",
+									children: [/* @__PURE__ */ jsx(Button$1, {
+										ref: cancelButton,
+										disabled: busy,
+										variant: "outline",
+										onClick: () => setConfirm(void 0),
+										children: t("flowState.cancel")
+									}), /* @__PURE__ */ jsx(Button$1, {
+										disabled: busy,
+										variant: "destructive",
+										onClick: () => {
+											if (confirm != null) clear(confirm);
+										},
+										children: t("flowState.confirmClear")
+									})]
+								})
+							]
+						})
+					})
 				]
 			})]
 		})
@@ -8527,47 +8700,54 @@ function ArrayValueFields(props) {
 			label,
 			children: (item, index, handle) => {
 				const itemSchema = Array.isArray(source.items) ? source.items[index] ?? source.additionalItems ?? {} : source.items ?? {};
+				const addLabel = `${t("valueEditor.addItem")} ${label}.${index}`;
+				const removeLabel = `${t("valueEditor.remove")} ${label}.${index}`;
 				return /* @__PURE__ */ jsx("div", {
 					"data-array-field-content": true,
 					children: child(index, itemSchema, item, (next, deletion) => onChange(setArrayItem(array, index, next), deletion), {
 						arrayChild: true,
 						header: /* @__PURE__ */ jsx(Fragment$1, {}),
-						disclosureContent: /* @__PURE__ */ jsxs("span", {
+						disclosureContent: props.showIndices !== false ? /* @__PURE__ */ jsxs("span", {
 							className: valueEditor_module_default.arrayIndex,
 							children: [index, "."]
-						}),
+						}) : void 0,
+						...props.showIndices === false ? { depth: props.depth ?? 0 } : {},
 						leadingControl: handle || void 0,
 						onDefinitionChange: props.onDefinitionChange && !Array.isArray(source.items) ? (items, nextValue, deletion) => props.onDefinitionChange({
 							...source,
 							items
 						}, array.map((entry, at) => at === index ? nextValue : entry), deletion) : void 0,
 						hideOptions: true,
-						actions: !props.readOnly && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button$1, {
-							type: "button",
-							variant: "ghost",
-							size: "icon-xs",
-							"aria-label": `${t("valueEditor.addItem")} ${label}.${index}`,
-							disabled: disabled || typeof source.maxItems === "number" && array.length >= source.maxItems,
-							onClick: () => onChange(array.toSpliced(index + 1, 0, initialValue(Array.isArray(source.items) ? source.items[index + 1] ?? source.additionalItems ?? {} : source.items ?? {}))),
+						actions: !props.readOnly && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+							render: /* @__PURE__ */ jsx(Button$1, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-xs",
+								"aria-label": addLabel,
+								disabled: disabled || typeof source.maxItems === "number" && array.length >= source.maxItems,
+								onClick: () => onChange(array.toSpliced(index + 1, 0, initialValue(Array.isArray(source.items) ? source.items[index + 1] ?? source.additionalItems ?? {} : source.items ?? {})))
+							}),
 							children: /* @__PURE__ */ jsx("i", {
 								"aria-hidden": "true",
 								className: "i-tabler-light:square-rounded-plus text-lg"
 							})
-						}), /* @__PURE__ */ jsx(Button$1, {
-							type: "button",
-							variant: "ghost",
-							size: "icon-xs",
-							"aria-label": `${t("valueEditor.remove")} ${label}.${index}`,
-							disabled: disabled || typeof source.minItems === "number" && array.length <= source.minItems,
-							onClick: () => onChange(array.toSpliced(index, 1), {
-								target: "arrayItem",
-								name: `${label}.${index}`
+						}), /* @__PURE__ */ jsx(TooltipContent, { children: addLabel })] }), /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+							render: /* @__PURE__ */ jsx(Button$1, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-xs",
+								"aria-label": removeLabel,
+								disabled: disabled || typeof source.minItems === "number" && array.length <= source.minItems,
+								onClick: () => onChange(array.toSpliced(index, 1), {
+									target: "arrayItem",
+									name: `${label}.${index}`
+								})
 							}),
 							children: /* @__PURE__ */ jsx("i", {
 								"aria-hidden": "true",
 								className: "i-tabler-light:square-rounded-minus text-lg"
 							})
-						})] })
+						}), /* @__PURE__ */ jsx(TooltipContent, { children: removeLabel })] })] })
 					})
 				});
 			}
@@ -23441,6 +23621,32 @@ function isUnknownRecord(value) {
 	return isPlainObject(value);
 }
 //#endregion
+//#region src/ui/browser/native-select.tsx
+function NativeSelect({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className),
+		"data-slot": "native-select-wrapper",
+		"data-size": size,
+		children: [/* @__PURE__ */ jsx("select", {
+			"data-slot": "native-select",
+			"data-size": size,
+			className: "h-8 w-full min-w-0 appearance-none rounded-[var(--ui-control-radius,calc(var(--ui-radius)_+_2px))] border border-input bg-[var(--ui-control-background,var(--ui-muted))] py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground data-[slot=native-select]:focus-visible:text-field-focus data-[slot=native-select]:focus-visible:aria-invalid:invalid-text-field-focus disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive data-[size=sm]:h-7 data-[size=sm]:rounded-[var(--ui-control-radius,var(--ui-radius))] data-[size=sm]:py-0.5 dark:bg-[var(--ui-control-background,var(--ui-muted))] dark:hover:bg-input/50",
+			...props
+		}), /* @__PURE__ */ jsx(ChevronDown, {
+			className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none",
+			"aria-hidden": "true",
+			"data-slot": "native-select-icon"
+		})]
+	});
+}
+function NativeSelectOption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("option", {
+		"data-slot": "native-select-option",
+		className: cn("bg-[Canvas] text-[CanvasText]", className),
+		...props
+	});
+}
+//#endregion
 //#region src/ui/browser/simple-code-editor.ts
 var import_lib = /* @__PURE__ */ __toESM((/* @__PURE__ */ __commonJSMin(((exports) => {
 	var __assign = exports && exports.__assign || function() {
@@ -25208,37 +25414,6 @@ function FieldNullable({ name, checked, onChange }) {
 	}), /* @__PURE__ */ jsx(TooltipContent, { children: t(checked ? "valueEditor.nullableDescription" : "valueEditor.notNullableDescription") })] });
 }
 //#endregion
-//#region src/ui/browser/helpButton.tsx
-/** Supplementary, non-interactive help that can also be opened by click. */
-function HelpButton({ label, children, size = 24 }) {
-	const id = useId();
-	const [tooltip] = useState(() => createTooltipHandle());
-	return /* @__PURE__ */ jsxs(Tooltip, {
-		handle: tooltip,
-		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-			id,
-			handle: tooltip,
-			closeOnClick: false,
-			onClick: () => tooltip.open(id),
-			render: /* @__PURE__ */ jsx(Button$1, {
-				type: "button",
-				variant: "ghost",
-				size: "icon-xs",
-				style: {
-					width: size,
-					height: size
-				},
-				"aria-label": label
-			}),
-			children: /* @__PURE__ */ jsx("i", {
-				"aria-hidden": "true",
-				className: "i-lucide-light:info text-muted-foreground",
-				style: { fontSize: size * 5 / 8 }
-			})
-		}), /* @__PURE__ */ jsx(TooltipContent, { children })]
-	});
-}
-//#endregion
 //#region src/workbench/browser/runtime/editor/inspectorSection.tsx
 function InspectorSection({ title, children, className, contentInset = true, ...props }) {
 	return /* @__PURE__ */ jsxs("section", {
@@ -29370,6 +29545,11 @@ function ResolutionDefinition({ disabled, selection, store }) {
 }
 //#endregion
 //#region src/workbench/browser/runtime/editor/skipDuplicatesSection.tsx
+var fieldsSchema = {
+	type: "array",
+	items: { type: "string" }
+};
+var ignoreDraft$1 = () => {};
 function SkipDuplicatesSection({ task, disabled, onSave, history }) {
 	const t = useTranslate();
 	const id = useId();
@@ -29392,21 +29572,14 @@ function SkipDuplicatesSection({ task, disabled, onSave, history }) {
 		});
 	}));
 	const initial = task.executor.kind === "skip-duplicates" ? task.executor.fields : [];
-	const [fields, setFields] = useState(initial.length ? initial : [""]);
-	const inputs = useRef([]);
-	const focusField = useRef();
-	useEffect(() => {
-		if (focusField.current == null) return;
-		inputs.current[focusField.current]?.focus();
-		focusField.current = void 0;
-	}, [fields]);
+	const [fields, setFields] = useState(initial);
 	const [error, setError] = useState();
 	useEffect(() => {
 		const previous = changes.value;
 		changes.sync(task.executor);
 		if (previous.kind === "skip-duplicates" && changes.value.kind === "skip-duplicates" && !dequal(previous.fields, changes.value.fields)) {
 			request.current?.abort();
-			setFields(changes.value.fields.length ? changes.value.fields : [""]);
+			setFields(changes.value.fields);
 			setError(void 0);
 		}
 	}, [changes, task.executor]);
@@ -29421,11 +29594,10 @@ function SkipDuplicatesSection({ task, disabled, onSave, history }) {
 		request.current?.abort();
 		const controller = new AbortController();
 		request.current = controller;
-		const rows = next.length ? next : [""];
-		setFields(rows);
+		setFields(next);
 		await Promise.resolve();
 		if (controller.signal.aborted || request.current !== controller) return;
-		const normalized = rows.map((field) => field.trim());
+		const normalized = next.map((field) => field.trim());
 		const parsed = skipDuplicatesConfigSchema.safeParse({ fields: normalized.filter(Boolean) });
 		if (!parsed.success) {
 			setError("invalid");
@@ -29447,87 +29619,60 @@ function SkipDuplicatesSection({ task, disabled, onSave, history }) {
 	if (task.executor.kind !== "skip-duplicates") return null;
 	return /* @__PURE__ */ jsx(InspectorSection, {
 		title: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			id: `${id}-label`,
 			className: "min-w-0 flex-1",
-			children: t("flowState.nodeTitle")
+			children: t("flowState.field")
 		}), history] }),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "node-settings flex flex-col gap-3",
-			children: [
-				/* @__PURE__ */ jsxs(Field, { children: [
-					/* @__PURE__ */ jsx(FieldLabel, {
-						htmlFor: `${id}-field-0`,
-						children: t("flowState.field")
-					}),
-					fields.map((field, index) => /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ jsx(Input, {
-							ref: (element) => {
-								inputs.current[index] = element;
-							},
-							id: `${id}-field-${index}`,
-							"aria-label": t("flowState.fieldIndex", { index: index + 1 }),
-							"aria-invalid": error === "invalid" || void 0,
-							"aria-describedby": error === "invalid" ? `${id}-error` : void 0,
-							disabled,
-							value: field,
-							placeholder: t(fields.length === 1 ? "flowState.fieldPlaceholder" : "flowState.pathPlaceholder"),
-							onChange: (event) => change(fields.map((value, at) => at === index ? event.target.value : value)),
-							onBlur: () => {
-								commit();
-							},
-							onKeyDown: (event) => {
-								if (event.key === "Enter") {
-									event.preventDefault();
-									event.currentTarget.blur();
-								}
-							}
-						}), !disabled && (fields.length > 1 || field !== "") && /* @__PURE__ */ jsx(Button$1, {
-							variant: "ghost",
-							size: "xs",
-							"aria-label": t("flowState.removeField", { index: index + 1 }),
-							onMouseDown: (event) => event.preventDefault(),
-							onClick: () => {
-								focusField.current = Math.max(0, index - 1);
-								commit(fields.filter((_, at) => at !== index));
-							},
-							children: t("flowState.delete")
-						})]
-					}, index)),
-					!disabled && /* @__PURE__ */ jsx("div", {
-						className: "flex",
-						children: /* @__PURE__ */ jsx(Button$1, {
-							variant: "ghost",
-							size: "sm",
-							onMouseDown: (event) => event.preventDefault(),
-							onClick: () => {
-								const empty = fields.findIndex((field) => field.trim() === "");
-								if (empty >= 0) {
-									inputs.current[empty]?.focus();
-									return;
-								}
-								focusField.current = fields.length;
-								change([...fields, ""]);
-							},
-							children: t("flowState.addField")
-						})
-					})
-				] }),
-				error != null && /* @__PURE__ */ jsxs("div", {
-					role: "alert",
-					id: `${id}-error`,
-					children: [/* @__PURE__ */ jsx("p", { children: t(error === "invalid" ? "flowState.invalidFields" : "flowState.saveFailed") }), error === "save" && /* @__PURE__ */ jsx(Button$1, {
+			children: [/* @__PURE__ */ jsxs(Field, {
+				"aria-labelledby": `${id}-label`,
+				"aria-invalid": error === "invalid" || void 0,
+				"aria-describedby": `${id}-description${error === "invalid" ? ` ${id}-error` : ""}`,
+				onBlur: (event) => {
+					if (event.target instanceof HTMLInputElement) commit();
+				},
+				onKeyDown: (event) => {
+					if (event.key === "Enter" && event.target instanceof HTMLInputElement) commit();
+				},
+				children: [/* @__PURE__ */ jsx(FieldDescription, {
+					id: `${id}-description`,
+					className: "text-xs",
+					children: t("flowState.fieldDescription")
+				}), /* @__PURE__ */ jsx(FieldTable, {
+					layout: "values",
+					typeColumn: false,
+					columnHeadings: false,
+					actionSlots: 2,
+					standalone: true,
+					children: /* @__PURE__ */ jsx(ArrayValueFields, {
+						label: t("flowState.field"),
+						showIndices: false,
+						schema: fieldsSchema,
+						value: fields,
+						path: "/fields",
 						disabled,
-						onClick: () => void commit(),
-						variant: "outline",
-						size: "sm",
-						children: t("flowState.retry")
-					})]
-				}),
-				/* @__PURE__ */ jsx("p", {
-					className: "m-0 text-muted-foreground text-xs",
-					children: t("flowState.warning")
-				})
-			]
+						readOnly: disabled,
+						hideValueTools: true,
+						onDraftIssue: ignoreDraft$1,
+						onChange: (value) => {
+							const next = value;
+							change(next);
+							if (next.length !== fields.length) commit(next);
+						}
+					})
+				})]
+			}), error != null && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				id: `${id}-error`,
+				children: [/* @__PURE__ */ jsx("p", { children: t(error === "invalid" ? "flowState.invalidFields" : "flowState.saveFailed") }), error === "save" && /* @__PURE__ */ jsx(Button$1, {
+					disabled,
+					onClick: () => void commit(),
+					variant: "outline",
+					size: "sm",
+					children: t("flowState.retry")
+				})]
+			})]
 		})
 	});
 }
@@ -31515,7 +31660,13 @@ function NodeInspector({ onAddWorkflowOutputs, onAddResponseNode, webhookDeploym
 					history: store != null && store.$.flowId.value != null ? /* @__PURE__ */ jsx(FlowStateButton, {
 						client: store.state,
 						flowId: store.$.flowId.value,
-						nodeIds: Object.keys(revision.graph()?.nodes ?? {}),
+						nodes: selection?.kind === "task" ? [{
+							id: selection.id,
+							title: nodeTitle(selection, t),
+							icon: sourceNodeIcons?.[selection.id] ?? semanticNodeIcon(selection, {}),
+							fallbackIcon: nodeIcon(selection)
+						}] : [],
+						notify: store.notify,
 						history: { nodeId: selection.id }
 					}, selection.id) : void 0,
 					onSave: (before, value) => store?.nodes.saveTaskSettings(selection.id, {
@@ -32204,7 +32355,7 @@ var WorkbenchCanvas = forwardRef(function WorkbenchCanvas({ nodePicker, annotati
 					onDuplicate(positions, offset);
 				},
 				onMoveNodes,
-				onChangeDirection,
+				onChangeDirection: disabled ? void 0 : onChangeDirection,
 				onMoveViewport,
 				subscribeCanvasCommands,
 				onCopy: (nodeIds) => {
@@ -32573,19 +32724,39 @@ function PublicationActor({ actorId, store }) {
 /** Layout restoration deliberately preserves the current viewport and other graphs. */
 function changeRevisionCanvasSession(session, graphId, change) {
 	const previous = session[graphId];
-	const next = change.kind === "move" ? {
-		...previous,
-		positions: {
-			...previous?.positions,
-			...change.positions
-		}
-	} : change.kind === "viewport" ? {
-		...previous,
-		viewport: change.viewport
-	} : {
-		...previous,
-		positions: void 0
-	};
+	let next;
+	switch (change.kind) {
+		case "move":
+			next = {
+				...previous,
+				positions: {
+					...previous?.positions,
+					...change.positions
+				}
+			};
+			break;
+		case "direction":
+			next = {
+				...previous,
+				direction: change.direction,
+				positions: {
+					...previous?.positions,
+					...change.positions
+				}
+			};
+			break;
+		case "viewport":
+			next = {
+				...previous,
+				viewport: change.viewport
+			};
+			break;
+		case "restore": next = {
+			...previous,
+			direction: void 0,
+			positions: void 0
+		};
+	}
 	return {
 		...session,
 		[graphId]: next
@@ -32647,22 +32818,20 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, b
 	const session = sessions[graphId];
 	const model = useMemo(() => ({
 		...baseline,
+		direction: session?.direction ?? baseline.direction,
 		viewport: session?.viewport ?? baseline.viewport,
 		nodes: baseline.nodes.map((node) => ({
 			...node,
 			position: session?.positions?.[node.id] ?? node.position
 		}))
 	}), [baseline, session]);
-	const moved = baseline.nodes.some((node) => {
+	const layoutChanged = model.direction !== baseline.direction || baseline.nodes.some((node) => {
 		const position = session?.positions?.[node.id];
 		return position != null && (position.x !== node.position.x || position.y !== node.position.y);
 	});
 	const selection = selected.length === 1 ? revision.node(selected[0]) : void 0;
 	const comment = selected.length === 1 ? model.nodes.find((node) => node.id === selected[0] && node.kind === "comment") : void 0;
-	const navigation = presentation == null || moved ? /* @__PURE__ */ jsxs(Fragment$1, { children: [presentation == null && /* @__PURE__ */ jsx("span", {
-		className: "revision-viewer-hint",
-		children: t("snapshot.missingLayout")
-	}), moved && /* @__PURE__ */ jsxs(Button$1, {
+	const restoreLayout = layoutChanged ? /* @__PURE__ */ jsxs(Button$1, {
 		className: "ml-auto",
 		size: "xs",
 		variant: "ghost",
@@ -32671,7 +32840,7 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, b
 			"aria-hidden": "true",
 			className: "i-lucide-light:rotate-ccw"
 		}), t("snapshot.restore")]
-	})] }) : void 0;
+	}) : void 0;
 	return /* @__PURE__ */ jsxs("section", {
 		ref: root,
 		className: `revision-viewer${inspectorOpen ? " inspector-open" : ""}`,
@@ -32684,7 +32853,7 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, b
 					"aria-hidden": "true",
 					className: "i-lucide-light:lock-keyhole"
 				}), label ?? t("snapshot.title")]
-			}), navigation]
+			}), restoreLayout]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "revision-viewer-body",
 			children: [/* @__PURE__ */ jsxs("div", {
@@ -32707,6 +32876,14 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, b
 						kind: "move",
 						positions
 					})),
+					onChangeDirection: (direction, positions) => {
+						setSessions((current) => changeRevisionCanvasSession(current, graphId, {
+							kind: "direction",
+							direction,
+							positions
+						}));
+						return true;
+					},
 					onMoveViewport: (viewport) => setSessions((current) => changeRevisionCanvasSession(current, graphId, {
 						kind: "viewport",
 						viewport
@@ -32714,7 +32891,7 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, label, b
 					onSelectionChange: setSelected,
 					onInspectSelection: () => setInspectorOpen((open) => !open),
 					inspectorOpen,
-					toolbar: showHeader ? void 0 : navigation,
+					toolbar: showHeader ? void 0 : restoreLayout,
 					cornerTools: /* @__PURE__ */ jsx(WorkbenchInspectorToggle, {
 						label: t("designer.toggleInspector"),
 						open: inspectorOpen,
@@ -36125,17 +36302,33 @@ function WorkspaceNavigationIsland({ flowName, settings, flowsHref, ghost = fals
 	});
 }
 //#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, onExportSvg, onOpenRuns, onOpenState, onPublish, state }) {
+function WorkspacePublishIsland({ hasPublications, onOpenPublications, onExport, onExportPng, onOpenRuns, onOpenState, onPublish, preferences, state }) {
 	const t = useTranslate();
 	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");
@@ -36239,22 +36432,45 @@ function WorkspacePublishIsland({ hasPublications, onOpenPublications, onExport,
 						disabled: state == "busy" || state == "publishing",
 						onClick: onExport
 					}),
-					onExportSvg != null && /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onExportPng != null && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, {
 						className: "gap-2 px-2 py-[5px]",
 						disabled: exporting,
-						onClick: async () => {
-							setExporting(true);
-							try {
-								await onExportSvg();
-							} finally {
-								setExporting(false);
-							}
-						},
 						children: [/* @__PURE__ */ jsx("i", {
 							"aria-hidden": "true",
 							className: "i-lucide-light:download size-4 shrink-0"
-						}), t("resource.exportSvg")]
-					}),
+						}), 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,
@@ -36297,8 +36513,8 @@ function WorkspacePublishIsland({ hasPublications, onOpenPublications, onExport,
 						children: [/* @__PURE__ */ jsx(Spinner, {
 							"aria-hidden": "true",
 							className: "shrink-0"
-						}), /* @__PURE__ */ jsx(DialogTitle, { children: t("resource.exportSvgPending") })]
-					}), /* @__PURE__ */ jsx(DialogDescription, { children: t("resource.exportSvgPendingDescription") })]
+						}), /* @__PURE__ */ jsx(DialogTitle, { children: t("resource.exportPngPending") })]
+					}), /* @__PURE__ */ jsx(DialogDescription, { children: t("resource.exportPngPendingDescription") })]
 				})
 			})
 		]
@@ -36678,7 +36894,8 @@ function FlowEditor({ navigationIsland, onRun, onRunStarted, onCloseRuns, onConf
 				flowId != null && stateTarget != null && /* @__PURE__ */ jsx(FlowStateButton, {
 					client: store.state,
 					flowId,
-					nodeIds: designer.nodes.map((node) => node.id),
+					nodes: designer.nodes,
+					notify: store.workspace.notify,
 					history: stateTarget.history,
 					onClose: () => setStateTarget(void 0)
 				}, `${flowId}:${stateTarget.history?.nodeId ?? "all"}`),
@@ -36719,10 +36936,11 @@ function FlowEditor({ navigationIsland, onRun, onRunStarted, onCloseRuns, onConf
 							},
 							open: diagnosticsOpen
 						}), /* @__PURE__ */ jsx(WorkspacePublishIsland, {
-							onExportSvg: connectorAccess.access?.mode != "selectable" || designer.nodes.length == 0 ? void 0 : () => store.exportSvg(language, {
-								dark: theme == "dark",
+							onExportPng: connectorAccess.access?.mode != "selectable" || designer.nodes.length == 0 ? void 0 : (options) => store.exportPng(language, {
+								...options,
 								ignoredNodeIds
 							}),
+							preferences: store.preferences,
 							onExport: () => {
 								const id = store.workspace.$.flowId.value;
 								if (id != null) store.workspace.exportFlow(id);