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

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

@@ -1,15 +1,14 @@
-import { i as __require, o as __toESM, r as __exportAll, t as __commonJSMin } from "./rolldown-runtime-CEgmsyvS.js";
-import { A as DropdownMenuSeparator, C as DropdownMenuCheckboxItem, D as DropdownMenuLabel, E as DropdownMenuItem, M as DropdownMenuSubContent, N as DropdownMenuSubTrigger, O as DropdownMenuRadioGroup, P as DropdownMenuTrigger, R as useCompositeItem, S as DropdownMenu, T as DropdownMenuGroup, X as waitBranchDescription, _ as PopoverTrigger, b as VirtualScrollArea, c as useIconifyData, ct as useAriaLabelledBy, d as Popover, f as PopoverContent, g as PopoverTitle, h as PopoverPanelContent, j as DropdownMenuSub, k as DropdownMenuRadioItem, m as PopoverHeader, o as IconifyProvider, p as PopoverDescription, s as useIconifyCollectionLoader, st as Checkbox, t as ContentIcon, v as NativeScrollArea, w as DropdownMenuContent, x as Z$1, y as ScrollArea } from "./ContentIcon-CMn0c-kl.js";
+import { o as __toESM, r as __exportAll, t as __commonJSMin } from "./rolldown-runtime-CEgmsyvS.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, 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 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 { $ as resourceValue, $n as sourcePort, $t as IdTooltip, A as schemaForEditor, An as EmptyDescription, Ar as controlErrorCode, B as datePickerValue, Bn as EventSourceSetup, D as defaultValueEditorSchema, Dn as InputGroupInput, Dt as diagnosticMessage, E as supportsFeishuChatFilter, En as InputGroupAddon, Er as workflowSelectionTask, F as calendarChange, G as indexAddNodeOptions, H as isDateFormat, I as calendarDate, In as SourceForm, Jn as executionReachableNodes, Kn as decodeResultList, L as dateFromTimeZone, Ln as SourceSelect, M as getDefaultValue, Mn as EmptyMedia, N as isUnconstrainedSchema, Nn as EmptyTitle, O as editorComponent, On as Empty, Ot as diagnosticNodeId, P as typeOfSchema, Pn as Badge, Q as resourceData, Qn as sourceOutputLabel, Qt as WorkflowExportMenuItem, R as dateInTimeZone, Rn as createI18n, Sn as useComboboxRootContext, Sr as workflowAgentTool, St as revisionView, T as feishuResourceKind, Tn as InputGroup, Tr as workflowCapability, V as dateTimeWall, Vn as errorNotice, Xn as resolutionOutputPorts, Y as connectorActionPresentation, Yn as inputSourceCandidates, Z as observeResource, Zn as webhookResponseDiagnostics, Zt as dequal$1, _n as ComboboxInputGroup, _r as securityOptions, _t as actionSummary, an as selectionMenuItemClass, bn as selectors, br as servers, bt as canCancelRun, cn as valueEditor_module_default, dn as ComboboxPopup, dr as triggerConfigValues, dt as loadJson, en as FlowSettingsButton, fn as ComboboxPositioner, fr as inputValue, ft as designerGraph, gn as ComboboxTrigger, gr as openApiTask, gt as triggerNodeIcon, hn as GroupCollectionProvider, hr as openApiFieldIssues, ht as semanticNodeIcon, in as selectionMenuContentClass, it as decodeAppCatalogResponse, j as valueForEditor, jn as EmptyHeader, jr as eventSourceKind, jt as connectionCatalog, k as editorGroups, kn as EmptyContent, kr as ApiError, kt as schemaMismatchMessage, ln as ComboboxItemIndicator, mn as ComboboxList, mr as object$1, mt as nodeTitle, n as agentTool, nr as triggerOutputDefinitions, on as ValueControl, ot as getAppCatalogCache, pn as ComboboxPortal, pr as listOperations, pt as nodeIcon, q as mapSource, rr as isJsonObject, sn as ValueEditorFeedback, tt as provider, un as ComboboxItem, ur as triggerConfigValue, vn as ComboboxInput, vr as selectOperation, vt as providerIcon, wn as followWorkbenchLink, wr as workflowCandidateGroup, xn as useComboboxInputValueContext, xr as sameWorkflowInterface, xt as hasRunFilter, yn as ComboboxRoot, yr as serverAddress, z as datePickerChange, zn as FeishuEventPicker } from "./flowChanges-CFj5pL4Y.js";
-import { r as resolveUiLanguage } from "./languages-gYzoQqCi.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";
@@ -142,326 +141,6 @@ var ComboboxClear = /*#__PURE__*/ React.forwardRef(function ComboboxClear(compon
 });
 if (process.env.NODE_ENV !== "production") ComboboxClear.displayName = "ComboboxClear";
 //#endregion
-//#region ../../node_modules/.bun/@iconify+utils@3.1.4/node_modules/@iconify/utils/lib/icon/defaults.js
-/** Default values for dimensions */
-var defaultIconDimensions = Object.freeze({
-	left: 0,
-	top: 0,
-	width: 16,
-	height: 16
-});
-/** Default values for transformations */
-var defaultIconTransformations = Object.freeze({
-	rotate: 0,
-	vFlip: false,
-	hFlip: false
-});
-/** Default values for all optional IconifyIcon properties */
-var defaultIconProps = Object.freeze({
-	...defaultIconDimensions,
-	...defaultIconTransformations
-});
-/** Default values for all properties used in ExtendedIconifyIcon */
-var defaultExtendedIconProps = Object.freeze({
-	...defaultIconProps,
-	body: "",
-	hidden: false
-});
-//#endregion
-//#region ../../node_modules/.bun/@iconify+utils@3.1.4/node_modules/@iconify/utils/lib/customisations/defaults.js
-/**
-* Default icon customisations values
-*/
-var defaultIconSizeCustomisations = Object.freeze({
-	width: null,
-	height: null
-});
-var defaultIconCustomisations = Object.freeze({
-	...defaultIconSizeCustomisations,
-	...defaultIconTransformations
-});
-//#endregion
-//#region ../../node_modules/.bun/@iconify+utils@3.1.4/node_modules/@iconify/utils/lib/icon/transformations.js
-/**
-* Merge transformations
-*/
-function mergeIconTransformations(obj1, obj2) {
-	const result = {};
-	if (!obj1.hFlip !== !obj2.hFlip) result.hFlip = true;
-	if (!obj1.vFlip !== !obj2.vFlip) result.vFlip = true;
-	const rotate = ((obj1.rotate || 0) + (obj2.rotate || 0)) % 4;
-	if (rotate) result.rotate = rotate;
-	return result;
-}
-//#endregion
-//#region ../../node_modules/.bun/@iconify+utils@3.1.4/node_modules/@iconify/utils/lib/icon/merge.js
-/**
-* Merge icon and alias
-*
-* Can also be used to merge default values and icon
-*/
-function mergeIconData(parent, child) {
-	const result = mergeIconTransformations(parent, child);
-	for (const key in defaultExtendedIconProps) if (key in defaultIconTransformations) {
-		if (key in parent && !(key in result)) result[key] = defaultIconTransformations[key];
-	} else if (key in child) result[key] = child[key];
-	else if (key in parent) result[key] = parent[key];
-	return result;
-}
-//#endregion
-//#region ../../node_modules/.bun/@iconify+utils@3.1.4/node_modules/@iconify/utils/lib/icon-set/tree.js
-/**
-* Resolve icon set icons
-*
-* Returns parent icon for each icon
-*/
-function getIconsTree(data, names) {
-	const icons = data.icons;
-	const aliases = data.aliases || Object.create(null);
-	const resolved = Object.create(null);
-	function resolve(name) {
-		if (icons[name]) return resolved[name] = [];
-		if (!(name in resolved)) {
-			resolved[name] = null;
-			const parent = aliases[name] && aliases[name].parent;
-			const value = parent && resolve(parent);
-			if (value) resolved[name] = [parent].concat(value);
-		}
-		return resolved[name];
-	}
-	(names || Object.keys(icons).concat(Object.keys(aliases))).forEach(resolve);
-	return resolved;
-}
-//#endregion
-//#region ../../node_modules/.bun/@iconify+utils@3.1.4/node_modules/@iconify/utils/lib/icon-set/get-icon.js
-/**
-* Get icon data, using prepared aliases tree
-*/
-function internalGetIconData(data, name, tree) {
-	const icons = data.icons;
-	const aliases = data.aliases || Object.create(null);
-	let currentProps = {};
-	function parse(name) {
-		currentProps = mergeIconData(icons[name] || aliases[name], currentProps);
-	}
-	parse(name);
-	tree.forEach(parse);
-	return mergeIconData(data, currentProps);
-}
-/**
-* Get data for icon
-*/
-function getIconData(data, name) {
-	if (data.icons[name]) return internalGetIconData(data, name, []);
-	const tree = getIconsTree(data, [name])[name];
-	return tree ? internalGetIconData(data, name, tree) : null;
-}
-//#endregion
-//#region ../../node_modules/.bun/@iconify+utils@3.1.4/node_modules/@iconify/utils/lib/svg/size.js
-/**
-* Regular expressions for calculating dimensions
-*/
-var unitsSplit = /(-?[0-9.]*[0-9]+[0-9.]*)/g;
-var unitsTest = /^-?[0-9.]*[0-9]+[0-9.]*$/g;
-function calculateSize(size, ratio, precision) {
-	if (ratio === 1) return size;
-	precision = precision || 100;
-	if (typeof size === "number") return Math.ceil(size * ratio * precision) / precision;
-	if (typeof size !== "string") return size;
-	const oldParts = size.split(unitsSplit);
-	if (oldParts === null || !oldParts.length) return size;
-	const newParts = [];
-	let code = oldParts.shift();
-	let isNumber = unitsTest.test(code);
-	while (true) {
-		if (isNumber) {
-			const num = parseFloat(code);
-			if (isNaN(num)) newParts.push(code);
-			else newParts.push(Math.ceil(num * ratio * precision) / precision);
-		} else newParts.push(code);
-		code = oldParts.shift();
-		if (code === void 0) return newParts.join("");
-		isNumber = !isNumber;
-	}
-}
-//#endregion
-//#region ../../node_modules/.bun/@iconify+utils@3.1.4/node_modules/@iconify/utils/lib/svg/defs.js
-function splitSVGDefs(content, tag = "defs") {
-	let defs = "";
-	const index = content.indexOf("<" + tag);
-	while (index >= 0) {
-		const start = content.indexOf(">", index);
-		const end = content.indexOf("</" + tag);
-		if (start === -1 || end === -1) break;
-		const endEnd = content.indexOf(">", end);
-		if (endEnd === -1) break;
-		defs += content.slice(start + 1, end).trim();
-		content = content.slice(0, index).trim() + content.slice(endEnd + 1);
-	}
-	return {
-		defs,
-		content
-	};
-}
-/**
-* Merge defs and content
-*/
-function mergeDefsAndContent(defs, content) {
-	return defs ? "<defs>" + defs + "</defs>" + content : content;
-}
-/**
-* Wrap SVG content, without wrapping definitions
-*/
-function wrapSVGContent(body, start, end) {
-	const split = splitSVGDefs(body);
-	return mergeDefsAndContent(split.defs, start + split.content + end);
-}
-//#endregion
-//#region ../../node_modules/.bun/@iconify+utils@3.1.4/node_modules/@iconify/utils/lib/svg/build.js
-/**
-* Check if value should be unset. Allows multiple keywords
-*/
-var isUnsetKeyword = (value) => value === "unset" || value === "undefined" || value === "none";
-/**
-* Get SVG attributes and content from icon + customisations
-*
-* Does not generate style to make it compatible with frameworks that use objects for style, such as React.
-* Instead, it generates 'inline' value. If true, rendering engine should add verticalAlign: -0.125em to icon.
-*
-* Customisations should be normalised by platform specific parser.
-* Result should be converted to <svg> by platform specific parser.
-* Use replaceIDs to generate unique IDs for body.
-*/
-function iconToSVG(icon, customisations) {
-	const fullIcon = {
-		...defaultIconProps,
-		...icon
-	};
-	const fullCustomisations = {
-		...defaultIconCustomisations,
-		...customisations
-	};
-	const box = {
-		left: fullIcon.left,
-		top: fullIcon.top,
-		width: fullIcon.width,
-		height: fullIcon.height
-	};
-	let body = fullIcon.body;
-	[fullIcon, fullCustomisations].forEach((props) => {
-		const transformations = [];
-		const hFlip = props.hFlip;
-		const vFlip = props.vFlip;
-		let rotation = props.rotate;
-		if (hFlip) if (vFlip) rotation += 2;
-		else {
-			transformations.push("translate(" + (box.width + box.left).toString() + " " + (0 - box.top).toString() + ")");
-			transformations.push("scale(-1 1)");
-			box.top = box.left = 0;
-		}
-		else if (vFlip) {
-			transformations.push("translate(" + (0 - box.left).toString() + " " + (box.height + box.top).toString() + ")");
-			transformations.push("scale(1 -1)");
-			box.top = box.left = 0;
-		}
-		let tempValue;
-		if (rotation < 0) rotation -= Math.floor(rotation / 4) * 4;
-		rotation = rotation % 4;
-		switch (rotation) {
-			case 1:
-				tempValue = box.height / 2 + box.top;
-				transformations.unshift("rotate(90 " + tempValue.toString() + " " + tempValue.toString() + ")");
-				break;
-			case 2:
-				transformations.unshift("rotate(180 " + (box.width / 2 + box.left).toString() + " " + (box.height / 2 + box.top).toString() + ")");
-				break;
-			case 3:
-				tempValue = box.width / 2 + box.left;
-				transformations.unshift("rotate(-90 " + tempValue.toString() + " " + tempValue.toString() + ")");
-		}
-		if (rotation % 2 === 1) {
-			if (box.left !== box.top) {
-				tempValue = box.left;
-				box.left = box.top;
-				box.top = tempValue;
-			}
-			if (box.width !== box.height) {
-				tempValue = box.width;
-				box.width = box.height;
-				box.height = tempValue;
-			}
-		}
-		if (transformations.length) body = wrapSVGContent(body, "<g transform=\"" + transformations.join(" ") + "\">", "</g>");
-	});
-	const customisationsWidth = fullCustomisations.width;
-	const customisationsHeight = fullCustomisations.height;
-	const boxWidth = box.width;
-	const boxHeight = box.height;
-	let width;
-	let height;
-	if (customisationsWidth === null) {
-		height = customisationsHeight === null ? "1em" : customisationsHeight === "auto" ? boxHeight : customisationsHeight;
-		width = calculateSize(height, boxWidth / boxHeight);
-	} else {
-		width = customisationsWidth === "auto" ? boxWidth : customisationsWidth;
-		height = customisationsHeight === null ? calculateSize(width, boxHeight / boxWidth) : customisationsHeight === "auto" ? boxHeight : customisationsHeight;
-	}
-	const attributes = {};
-	const setAttr = (prop, value) => {
-		if (!isUnsetKeyword(value)) attributes[prop] = value.toString();
-	};
-	setAttr("width", width);
-	setAttr("height", height);
-	const viewBox = [
-		box.left,
-		box.top,
-		boxWidth,
-		boxHeight
-	];
-	attributes.viewBox = viewBox.join(" ");
-	return {
-		attributes,
-		viewBox,
-		body
-	};
-}
-//#endregion
-//#region ../../node_modules/.bun/@iconify+utils@3.1.4/node_modules/@iconify/utils/lib/svg/id.js
-/**
-* Regular expression for finding ids
-*/
-var regex = /\sid="(\S+)"/g;
-/**
-* Counters
-*/
-var counters = /* @__PURE__ */ new Map();
-/**
-* Get unique new ID
-*/
-function nextID(id) {
-	id = id.replace(/[0-9]+$/, "") || "a";
-	const count = counters.get(id) || 0;
-	counters.set(id, count + 1);
-	return count ? `${id}${count}` : id;
-}
-/**
-* Replace IDs in SVG output with unique IDs
-*/
-function replaceIDs(body) {
-	const ids = [];
-	let match;
-	while (match = regex.exec(body)) ids.push(match[1]);
-	if (!ids.length) return body;
-	const suffix = "suffix" + (Math.random() * 16777216 | Date.now()).toString(16);
-	ids.forEach((id) => {
-		const newID = nextID(id);
-		const escapedID = id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-		body = body.replace(new RegExp("([#;\"])(" + escapedID + ")([\")]|\\.[a-z])", "g"), "$1" + newID + suffix + "$3");
-	});
-	body = body.replace(new RegExp(suffix, "g"), "");
-	return body;
-}
-//#endregion
 //#region src/canvas/browser/useIgnoredNodes.ts
 /** Temporary display state. It does not change the saved graph or execution. */
 function useIgnoredNodes(identity) {
@@ -551,603 +230,8 @@ function CanvasHistoryScope({ history, disabled, ...props }) {
 	});
 }
 //#endregion
-//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/tabs/root/TabsRootContext.js
-/**
-* @internal
-*/
-var TabsRootContext = /*#__PURE__*/ React.createContext(void 0);
-if (process.env.NODE_ENV !== "production") TabsRootContext.displayName = "TabsRootContext";
-function useTabsRootContext() {
-	const context = React.useContext(TabsRootContext);
-	if (context === void 0) throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>." : formatErrorMessage(64));
-	return context;
-}
-//#endregion
-//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/tabs/root/TabsRootDataAttributes.js
-var TabsRootDataAttributes = /*#__PURE__*/ function(TabsRootDataAttributes) {
-	/**
-	* Indicates the direction of the activation (based on the previous active tab).
-	* @type {'left' | 'right' | 'up' | 'down' | 'none'}
-	*/
-	TabsRootDataAttributes["activationDirection"] = "data-activation-direction";
-	/**
-	* Indicates the orientation of the tabs.
-	* @type {'horizontal' | 'vertical'}
-	*/
-	TabsRootDataAttributes["orientation"] = "data-orientation";
-	return TabsRootDataAttributes;
-}({});
-//#endregion
-//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/tabs/root/stateAttributesMapping.js
-var tabsStateAttributesMapping = { tabActivationDirection: (dir) => ({ [TabsRootDataAttributes.activationDirection]: dir }) };
-//#endregion
-//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/tabs/root/TabsRoot.js
-/**
-* Groups the tabs and the corresponding panels.
-* Renders a `<div>` element.
-*
-* Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
-*/
-var TabsRoot = /*#__PURE__*/ React.forwardRef(function TabsRoot(componentProps, forwardedRef) {
-	const { className, defaultValue: defaultValueProp = 0, onValueChange: onValueChangeProp, orientation = "horizontal", render, value: valueProp, style, ...elementProps } = componentProps;
-	const hasExplicitDefaultValueProp = Object.hasOwn(componentProps, "defaultValue");
-	const tabPanelRefs = React.useRef([]);
-	const [mountedTabPanels, setMountedTabPanels] = React.useState(() => /* @__PURE__ */ new Map());
-	const [value, setValue] = useControlled({
-		controlled: valueProp,
-		default: defaultValueProp,
-		name: "Tabs",
-		state: "value"
-	});
-	const isControlled = valueProp !== void 0;
-	const [tabMap, setTabMap] = React.useState(() => /* @__PURE__ */ new Map());
-	const getTabElementBySelectedValue = React.useCallback((selectedValue) => {
-		if (selectedValue === void 0) return null;
-		for (const [tabElement, tabMetadata] of tabMap.entries()) if (tabMetadata != null && selectedValue === (tabMetadata.value ?? tabMetadata.index)) return tabElement;
-		return null;
-	}, [tabMap]);
-	const [activationDirectionState, setActivationDirectionState] = React.useState(() => ({
-		previousValue: value,
-		tabActivationDirection: "none"
-	}));
-	const { previousValue, tabActivationDirection: committedTabActivationDirection } = activationDirectionState;
-	let tabActivationDirection = committedTabActivationDirection;
-	let directionComputationIncomplete = false;
-	if (previousValue !== value) {
-		tabActivationDirection = computeActivationDirection(previousValue, value, orientation, tabMap);
-		directionComputationIncomplete = previousValue != null && value != null && getTabElementBySelectedValue(value) == null;
-	}
-	const nextPreviousValue = directionComputationIncomplete ? previousValue : value;
-	const shouldSyncActivationDirectionState = previousValue !== nextPreviousValue || committedTabActivationDirection !== tabActivationDirection;
-	useIsoLayoutEffect(() => {
-		if (!shouldSyncActivationDirectionState) return;
-		setActivationDirectionState({
-			previousValue: nextPreviousValue,
-			tabActivationDirection
-		});
-	}, [
-		nextPreviousValue,
-		shouldSyncActivationDirectionState,
-		tabActivationDirection
-	]);
-	const onValueChange = useStableCallback((newValue, eventDetails) => {
-		eventDetails.activationDirection = computeActivationDirection(value, newValue, orientation, tabMap);
-		onValueChangeProp?.(newValue, eventDetails);
-		if (eventDetails.isCanceled) return;
-		setValue(newValue);
-	});
-	const registerMountedTabPanel = useStableCallback((panelValue, panelId) => {
-		setMountedTabPanels((prev) => {
-			if (prev.get(panelValue) === panelId) return prev;
-			const next = new Map(prev);
-			next.set(panelValue, panelId);
-			return next;
-		});
-	});
-	const unregisterMountedTabPanel = useStableCallback((panelValue, panelId) => {
-		setMountedTabPanels((prev) => {
-			if (!prev.has(panelValue) || prev.get(panelValue) !== panelId) return prev;
-			const next = new Map(prev);
-			next.delete(panelValue);
-			return next;
-		});
-	});
-	const getTabPanelIdByValue = React.useCallback((tabValue) => {
-		return mountedTabPanels.get(tabValue);
-	}, [mountedTabPanels]);
-	const getTabIdByPanelValue = React.useCallback((tabPanelValue) => {
-		for (const tabMetadata of tabMap.values()) if (tabPanelValue === tabMetadata?.value) return tabMetadata?.id;
-	}, [tabMap]);
-	const tabsContextValue = React.useMemo(() => ({
-		getTabElementBySelectedValue,
-		getTabIdByPanelValue,
-		getTabPanelIdByValue,
-		onValueChange,
-		orientation,
-		registerMountedTabPanel,
-		setTabMap,
-		unregisterMountedTabPanel,
-		tabActivationDirection,
-		value
-	}), [
-		getTabElementBySelectedValue,
-		getTabIdByPanelValue,
-		getTabPanelIdByValue,
-		onValueChange,
-		orientation,
-		registerMountedTabPanel,
-		setTabMap,
-		unregisterMountedTabPanel,
-		tabActivationDirection,
-		value
-	]);
-	const selectedTabMetadata = React.useMemo(() => {
-		for (const tabMetadata of tabMap.values()) if (tabMetadata != null && tabMetadata.value === value) return tabMetadata;
-	}, [tabMap, value]);
-	const firstEnabledTabValue = React.useMemo(() => {
-		for (const tabMetadata of tabMap.values()) if (tabMetadata != null && !tabMetadata.disabled) return tabMetadata.value;
-	}, [tabMap]);
-	useIsoLayoutEffect(() => {
-		if (isControlled || tabMap.size === 0) return;
-		const selectionIsDisabled = selectedTabMetadata?.disabled;
-		const selectionIsMissing = selectedTabMetadata == null && value !== null;
-		if (hasExplicitDefaultValueProp && selectionIsDisabled && value === defaultValueProp) return;
-		if (!selectionIsDisabled && !selectionIsMissing) return;
-		const fallbackValue = firstEnabledTabValue ?? null;
-		if (value === fallbackValue) return;
-		setValue(fallbackValue);
-		setActivationDirectionState((prev) => {
-			if (prev.tabActivationDirection === "none") return prev;
-			return {
-				...prev,
-				tabActivationDirection: "none"
-			};
-		});
-	}, [
-		defaultValueProp,
-		firstEnabledTabValue,
-		hasExplicitDefaultValueProp,
-		isControlled,
-		selectedTabMetadata,
-		setValue,
-		tabMap,
-		value
-	]);
-	const element = useRenderElement("div", componentProps, {
-		state: {
-			orientation,
-			tabActivationDirection
-		},
-		ref: forwardedRef,
-		props: elementProps,
-		stateAttributesMapping: tabsStateAttributesMapping
-	});
-	return /*#__PURE__*/ jsx(TabsRootContext.Provider, {
-		value: tabsContextValue,
-		children: /*#__PURE__*/ jsx(CompositeList, {
-			elementsRef: tabPanelRefs,
-			children: element
-		})
-	});
-});
-if (process.env.NODE_ENV !== "production") TabsRoot.displayName = "TabsRoot";
-function computeActivationDirection(oldValue, newValue, orientation, tabMap) {
-	if (oldValue == null || newValue == null) return "none";
-	let oldTab = null;
-	let newTab = null;
-	for (const [tabElement, tabMetadata] of tabMap.entries()) {
-		if (tabMetadata == null) continue;
-		const tabValue = tabMetadata.value ?? tabMetadata.index;
-		if (oldValue === tabValue) oldTab = tabElement;
-		if (newValue === tabValue) newTab = tabElement;
-		if (oldTab != null && newTab != null) break;
-	}
-	if (oldTab == null || newTab == null) {
-		if (oldTab !== newTab && (typeof oldValue === "number" || typeof oldValue === "string") && typeof oldValue === typeof newValue) {
-			if (orientation === "horizontal") return newValue > oldValue ? "right" : "left";
-			return newValue > oldValue ? "down" : "up";
-		}
-		return "none";
-	}
-	const oldRect = oldTab.getBoundingClientRect();
-	const newRect = newTab.getBoundingClientRect();
-	if (orientation === "horizontal") {
-		if (newRect.left < oldRect.left) return "left";
-		if (newRect.left > oldRect.left) return "right";
-	} else {
-		if (newRect.top < oldRect.top) return "up";
-		if (newRect.top > oldRect.top) return "down";
-	}
-	return "none";
-}
-//#endregion
-//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/tabs/list/TabsListContext.js
-var TabsListContext = /*#__PURE__*/ React.createContext(void 0);
-if (process.env.NODE_ENV !== "production") TabsListContext.displayName = "TabsListContext";
-function useTabsListContext() {
-	const context = React.useContext(TabsListContext);
-	if (context === void 0) throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>." : formatErrorMessage(65));
-	return context;
-}
-//#endregion
-//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/tabs/tab/TabsTab.js
-/**
-* An individual interactive tab button that toggles the corresponding panel.
-* Renders a `<button>` element.
-*
-* Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
-*/
-var TabsTab = /*#__PURE__*/ React.forwardRef(function TabsTab(componentProps, forwardedRef) {
-	const { className, disabled = false, render, value, id: idProp, nativeButton = true, style, ...elementProps } = componentProps;
-	const { value: activeTabValue, getTabPanelIdByValue, orientation } = useTabsRootContext();
-	const { activateOnFocus, highlightedTabIndex, onTabActivation, registerTabResizeObserverElement, setHighlightedTabIndex, tabsListElement } = useTabsListContext();
-	const id = useBaseUiId(idProp);
-	const tabMetadata = React.useMemo(() => ({
-		disabled,
-		id,
-		value
-	}), [
-		disabled,
-		id,
-		value
-	]);
-	const { compositeProps, compositeRef, index } = useCompositeItem({ metadata: tabMetadata });
-	const active = value === activeTabValue;
-	const isNavigatingRef = React.useRef(false);
-	const tabElementRef = React.useRef(null);
-	React.useEffect(() => {
-		const tabElement = tabElementRef.current;
-		if (!tabElement) return;
-		return registerTabResizeObserverElement(tabElement);
-	}, [registerTabResizeObserverElement]);
-	useIsoLayoutEffect(() => {
-		if (isNavigatingRef.current) {
-			isNavigatingRef.current = false;
-			return;
-		}
-		if (!(active && index > -1 && highlightedTabIndex !== index)) return;
-		const listElement = tabsListElement;
-		if (listElement != null) {
-			const activeEl = activeElement(ownerDocument(listElement));
-			if (activeEl && contains(listElement, activeEl)) return;
-		}
-		if (!disabled) setHighlightedTabIndex(index);
-	}, [
-		active,
-		index,
-		highlightedTabIndex,
-		setHighlightedTabIndex,
-		disabled,
-		tabsListElement
-	]);
-	const { getButtonProps, buttonRef } = useButton({
-		disabled,
-		native: nativeButton,
-		focusableWhenDisabled: true
-	});
-	const tabPanelId = getTabPanelIdByValue(value);
-	const isPressingRef = React.useRef(false);
-	const isMainButtonRef = React.useRef(false);
-	function onClick(event) {
-		if (active || disabled) return;
-		onTabActivation(value, createChangeEventDetails(none, event.nativeEvent, void 0, { activationDirection: "none" }));
-	}
-	function onFocus(event) {
-		if (active) return;
-		if (index > -1 && !disabled) setHighlightedTabIndex(index);
-		if (disabled) return;
-		if (activateOnFocus && (!isPressingRef.current || isPressingRef.current && isMainButtonRef.current)) onTabActivation(value, createChangeEventDetails(none, event.nativeEvent, void 0, { activationDirection: "none" }));
-	}
-	function onPointerDown(event) {
-		if (active || disabled) return;
-		isPressingRef.current = true;
-		function handlePointerUp() {
-			isPressingRef.current = false;
-			isMainButtonRef.current = false;
-		}
-		if (!event.button || event.button === 0) {
-			isMainButtonRef.current = true;
-			ownerDocument(event.currentTarget).addEventListener("pointerup", handlePointerUp, { once: true });
-		}
-	}
-	return useRenderElement("button", componentProps, {
-		state: {
-			disabled,
-			active,
-			orientation
-		},
-		ref: [
-			forwardedRef,
-			buttonRef,
-			compositeRef,
-			tabElementRef
-		],
-		props: [
-			compositeProps,
-			{
-				role: "tab",
-				"aria-controls": tabPanelId,
-				"aria-selected": active,
-				id,
-				onClick,
-				onFocus,
-				onPointerDown,
-				[ACTIVE_COMPOSITE_ITEM]: active ? "" : void 0,
-				onKeyDownCapture() {
-					isNavigatingRef.current = true;
-				}
-			},
-			elementProps,
-			getButtonProps
-		]
-	});
-});
-if (process.env.NODE_ENV !== "production") TabsTab.displayName = "TabsTab";
-//#endregion
-//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/tabs/panel/TabsPanelDataAttributes.js
-var TabsPanelDataAttributes = function(TabsPanelDataAttributes) {
-	/**
-	* Indicates the index of the tab panel.
-	*/
-	TabsPanelDataAttributes["index"] = "data-index";
-	/**
-	* Indicates the direction of the activation (based on the previous active tab).
-	* @type {'left' | 'right' | 'up' | 'down' | 'none'}
-	*/
-	TabsPanelDataAttributes["activationDirection"] = "data-activation-direction";
-	/**
-	* Indicates the orientation of the tabs.
-	* @type {'horizontal' | 'vertical'}
-	*/
-	TabsPanelDataAttributes["orientation"] = "data-orientation";
-	/**
-	* Present when the panel is hidden.
-	*/
-	TabsPanelDataAttributes["hidden"] = "data-hidden";
-	/**
-	* Present when the panel is animating in.
-	*/
-	TabsPanelDataAttributes[TabsPanelDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
-	/**
-	* Present when the panel is animating out.
-	*/
-	TabsPanelDataAttributes[TabsPanelDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
-	return TabsPanelDataAttributes;
-}({});
-//#endregion
-//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/tabs/panel/TabsPanel.js
-var stateAttributesMapping$1 = {
-	...tabsStateAttributesMapping,
-	...transitionStatusMapping
-};
-/**
-* A panel displayed when the corresponding tab is active.
-* Renders a `<div>` element.
-*
-* Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
-*/
-var TabsPanel = /*#__PURE__*/ React.forwardRef(function TabPanel(componentProps, forwardedRef) {
-	const { className, value, render, keepMounted = false, style, ...elementProps } = componentProps;
-	const { value: selectedValue, getTabIdByPanelValue, orientation, tabActivationDirection, registerMountedTabPanel, unregisterMountedTabPanel } = useTabsRootContext();
-	const id = useBaseUiId();
-	const metadata = React.useMemo(() => ({
-		id,
-		value
-	}), [id, value]);
-	const { ref: listItemRef, index } = useCompositeListItem({ metadata });
-	const open = value === selectedValue;
-	const { mounted, transitionStatus, setMounted } = useTransitionStatus(open);
-	const hidden = !mounted;
-	const correspondingTabId = getTabIdByPanelValue(value);
-	const state = {
-		hidden,
-		orientation,
-		tabActivationDirection,
-		transitionStatus
-	};
-	const panelRef = React.useRef(null);
-	const element = useRenderElement("div", componentProps, {
-		state,
-		ref: [
-			forwardedRef,
-			listItemRef,
-			panelRef
-		],
-		props: [{
-			"aria-labelledby": correspondingTabId,
-			hidden,
-			id,
-			role: "tabpanel",
-			tabIndex: open ? 0 : -1,
-			inert: inertValue(!open),
-			[TabsPanelDataAttributes.index]: index
-		}, elementProps],
-		stateAttributesMapping: stateAttributesMapping$1
-	});
-	useOpenChangeComplete({
-		open,
-		ref: panelRef,
-		onComplete() {
-			if (!open) setMounted(false);
-		}
-	});
-	useIsoLayoutEffect(() => {
-		if (hidden && !keepMounted) return;
-		if (id == null) return;
-		registerMountedTabPanel(value, id);
-		return () => {
-			unregisterMountedTabPanel(value, id);
-		};
-	}, [
-		hidden,
-		keepMounted,
-		value,
-		id,
-		registerMountedTabPanel,
-		unregisterMountedTabPanel
-	]);
-	if (!(keepMounted || mounted)) return null;
-	return element;
-});
-if (process.env.NODE_ENV !== "production") TabsPanel.displayName = "TabsPanel";
-//#endregion
-//#region ../../node_modules/.bun/@base-ui+react@1.4.1+fa6c2f29eeb10566/node_modules/@base-ui/react/esm/tabs/list/TabsList.js
-/**
-* Groups the individual tab buttons.
-* Renders a `<div>` element.
-*
-* Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
-*/
-var TabsList$1 = /*#__PURE__*/ React.forwardRef(function TabsList(componentProps, forwardedRef) {
-	const { activateOnFocus = false, className, loopFocus = true, render, style, ...elementProps } = componentProps;
-	const { onValueChange, orientation, value, setTabMap, tabActivationDirection } = useTabsRootContext();
-	const [highlightedTabIndex, setHighlightedTabIndex] = React.useState(0);
-	const [tabsListElement, setTabsListElement] = React.useState(null);
-	const indicatorUpdateListenersRef = React.useRef(/* @__PURE__ */ new Set());
-	const tabResizeObserverElementsRef = React.useRef(/* @__PURE__ */ new Set());
-	const resizeObserverRef = React.useRef(null);
-	const notifyIndicatorUpdateListeners = useStableCallback(() => {
-		indicatorUpdateListenersRef.current.forEach((listener) => {
-			listener();
-		});
-	});
-	React.useEffect(() => {
-		if (typeof ResizeObserver === "undefined") return;
-		const resizeObserver = new ResizeObserver(() => {
-			if (!indicatorUpdateListenersRef.current.size) return;
-			notifyIndicatorUpdateListeners();
-		});
-		resizeObserverRef.current = resizeObserver;
-		if (tabsListElement) resizeObserver.observe(tabsListElement);
-		tabResizeObserverElementsRef.current.forEach((element) => {
-			resizeObserver.observe(element);
-		});
-		return () => {
-			resizeObserver.disconnect();
-			resizeObserverRef.current = null;
-		};
-	}, [tabsListElement, notifyIndicatorUpdateListeners]);
-	const registerIndicatorUpdateListener = useStableCallback((listener) => {
-		indicatorUpdateListenersRef.current.add(listener);
-		return () => {
-			indicatorUpdateListenersRef.current.delete(listener);
-		};
-	});
-	const registerTabResizeObserverElement = useStableCallback((element) => {
-		tabResizeObserverElementsRef.current.add(element);
-		resizeObserverRef.current?.observe(element);
-		return () => {
-			tabResizeObserverElementsRef.current.delete(element);
-			resizeObserverRef.current?.unobserve(element);
-		};
-	});
-	const onTabActivation = useStableCallback((newValue, eventDetails) => {
-		if (newValue !== value) onValueChange(newValue, eventDetails);
-	});
-	const state = {
-		orientation,
-		tabActivationDirection
-	};
-	const defaultProps = {
-		"aria-orientation": orientation === "vertical" ? "vertical" : void 0,
-		role: "tablist"
-	};
-	const tabsListContextValue = React.useMemo(() => ({
-		activateOnFocus,
-		highlightedTabIndex,
-		registerIndicatorUpdateListener,
-		registerTabResizeObserverElement,
-		onTabActivation,
-		setHighlightedTabIndex,
-		tabsListElement
-	}), [
-		activateOnFocus,
-		highlightedTabIndex,
-		registerIndicatorUpdateListener,
-		registerTabResizeObserverElement,
-		onTabActivation,
-		setHighlightedTabIndex,
-		tabsListElement
-	]);
-	return /*#__PURE__*/ jsx(TabsListContext.Provider, {
-		value: tabsListContextValue,
-		children: /*#__PURE__*/ jsx(CompositeRoot, {
-			render,
-			className,
-			style,
-			state,
-			refs: [forwardedRef, setTabsListElement],
-			props: [defaultProps, elementProps],
-			stateAttributesMapping: tabsStateAttributesMapping,
-			highlightedIndex: highlightedTabIndex,
-			enableHomeAndEndKeys: true,
-			loopFocus,
-			orientation,
-			onHighlightedIndexChange: setHighlightedTabIndex,
-			onMapChange: setTabMap,
-			disabledIndices: EMPTY_ARRAY
-		})
-	});
-});
-if (process.env.NODE_ENV !== "production") TabsList$1.displayName = "TabsList";
-//#endregion
-//#region src/ui/browser/tabs.tsx
-function Tabs({ className, orientation = "horizontal", ...props }) {
-	return /* @__PURE__ */ jsx(TabsRoot, {
-		"data-slot": "tabs",
-		"data-orientation": orientation,
-		className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className),
-		orientation,
-		...props
-	});
-}
-var tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", {
-	variants: {
-		size: {
-			default: "p-[3px] group-data-[orientation=horizontal]/tabs:h-8",
-			sm: "rounded-[6px] p-0.5 group-data-[orientation=horizontal]/tabs:h-6"
-		},
-		variant: {
-			default: "bg-muted",
-			line: "gap-1 bg-transparent",
-			navigation: "gap-1 bg-transparent data-[variant=navigation]:p-0 group-data-[orientation=horizontal]/tabs:data-[variant=navigation]:h-auto",
-			flat: "gap-1 bg-[color-mix(in_srgb,var(--ui-foreground)_8%,var(--ui-popover))] dark:bg-[color-mix(in_srgb,black_16%,var(--ui-popover))]"
-		}
-	},
-	defaultVariants: {
-		size: "default",
-		variant: "default"
-	}
-});
-function TabsList({ className, variant = "default", size = "default", ...props }) {
-	return /* @__PURE__ */ jsx(TabsList$1, {
-		"data-slot": "tabs-list",
-		"data-variant": variant,
-		"data-size": size,
-		className: cn(tabsListVariants({
-			variant,
-			size
-		}), className),
-		...props
-	});
-}
-function TabsTrigger({ className, ...props }) {
-	return /* @__PURE__ */ jsx(TabsTab, {
-		"data-slot": "tabs-trigger",
-		className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-[color,background-color,border-color,box-shadow,opacity] group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-border 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 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "group-data-[variant=navigation]/tabs-list:h-auto group-data-[variant=navigation]/tabs-list:flex-none group-data-[variant=navigation]/tabs-list:rounded-[6px] group-data-[variant=navigation]/tabs-list:border-0 group-data-[variant=navigation]/tabs-list:px-3 group-data-[variant=navigation]/tabs-list:py-2 group-data-[variant=navigation]/tabs-list:text-[13px] group-data-[variant=navigation]/tabs-list:font-normal group-data-[variant=navigation]/tabs-list:text-muted-foreground group-data-[variant=navigation]/tabs-list:hover:bg-muted group-data-[variant=navigation]/tabs-list:hover:text-foreground group-data-[variant=navigation]/tabs-list:data-active:bg-muted group-data-[variant=navigation]/tabs-list:data-active:font-semibold group-data-[variant=navigation]/tabs-list:data-active:text-foreground dark:group-data-[variant=navigation]/tabs-list:data-active:bg-muted dark:group-data-[variant=navigation]/tabs-list:data-active:text-foreground", "group-data-[variant=flat]/tabs-list:h-full group-data-[variant=flat]/tabs-list:border-0 group-data-[variant=flat]/tabs-list:data-active:bg-popover group-data-[variant=flat]/tabs-list:data-active:shadow-[0_1px_2px_rgb(0_0_0/0.08)] dark:group-data-[variant=flat]/tabs-list:data-active:bg-[color-mix(in_srgb,var(--ui-foreground)_8%,var(--ui-popover))]", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100 motion-reduce:after:transition-none", "group-data-[size=sm]/tabs-list:rounded-[4px] group-data-[size=sm]/tabs-list:gap-1 group-data-[size=sm]/tabs-list:py-0 group-data-[size=sm]/tabs-list:text-[11px] group-data-[size=sm]/tabs-list:leading-4 group-data-[orientation=horizontal]/tabs:group-data-[size=sm]/tabs-list:after:bottom-[-4px]", "group-data-[variant=navigation]/tabs-list:group-data-[size=sm]/tabs-list:rounded-[4px] group-data-[variant=navigation]/tabs-list:group-data-[size=sm]/tabs-list:px-2 group-data-[variant=navigation]/tabs-list:group-data-[size=sm]/tabs-list:py-1 group-data-[variant=navigation]/tabs-list:group-data-[size=sm]/tabs-list:text-[12px]", className),
-		...props
-	});
-}
-function TabsContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx(TabsPanel, {
-		"data-slot": "tabs-content",
-		className: cn("flex-1 text-sm outline-none", className),
-		...props
-	});
-}
-//#endregion
 //#region src/workbench/browser/runtime/editor/commentInspector.tsx
-var MarkdownContent = lazy(() => import("./markdownContent-frwDfQQU.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();
@@ -1189,14 +273,16 @@ function CommentInspector({ title, content, disabled = false, readOnly, dark, on
 						readOnly,
 						value: draftContent,
 						onChange: (event) => setDraftContent(event.target.value),
+						onPaste: (event) => pasteVideoLink(event, t),
 						onBlur: save
 					})
 				}),
 				/* @__PURE__ */ jsx(TabsContent, {
 					value: "preview",
 					className: "flex min-h-0 flex-1 flex-col rounded-[var(--ui-control-radius,calc(var(--ui-radius)_+_2px))] border border-[var(--_open-flow-comment-border)] bg-[var(--_open-flow-comment-surface)] p-2",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "min-h-0 flex-1 overflow-auto rounded-[var(--ui-control-radius,calc(var(--ui-radius)_+_2px))] border border-[color-mix(in_srgb,var(--_open-flow-comment-border)_45%,transparent)] bg-[var(--_open-flow-comment-content)] p-3",
+					children: /* @__PURE__ */ jsx(ScrollArea, {
+						autoHide: "leave",
+						className: "min-h-0 flex-1 rounded-[var(--ui-control-radius,calc(var(--ui-radius)_+_2px))] border border-[color-mix(in_srgb,var(--_open-flow-comment-border)_45%,transparent)] bg-[var(--_open-flow-comment-content)] p-3",
 						children: /* @__PURE__ */ jsx("div", {
 							className: "markdown-body min-w-0",
 							onDoubleClick: () => setSource(true),
@@ -4041,1249 +3127,6 @@ function ContextPanel({ className, layoutRoot, children, focusOnOpen, actions, h
 		]
 	})] });
 }
-var IconPicker_module_default = {
-	container: "IconPicker_container_1b462",
-	filter: "IconPicker_filter_1b462",
-	tabs: "IconPicker_tabs_1b462",
-	colors: "IconPicker_colors_1b462",
-	color: "IconPicker_color_1b462",
-	panel: "IconPicker_panel_1b462",
-	row: "IconPicker_row_1b462",
-	icon: "IconPicker_icon_1b462",
-	subtitle: "IconPicker_subtitle_1b462",
-	loading: "IconPicker_loading_1b462",
-	spin: "IconPicker_spin_1b462"
-};
-//#endregion
-//#region ../../node_modules/.bun/fzf@0.5.2/node_modules/fzf/dist/fzf.es.js
-/** @license
-* fzf v0.5.2
-* Copyright (c) 2021 Ajit
-* Licensed under BSD 3-Clause
-*/
-var normalized = {
-	216: "O",
-	223: "s",
-	248: "o",
-	273: "d",
-	295: "h",
-	305: "i",
-	320: "l",
-	322: "l",
-	359: "t",
-	383: "s",
-	384: "b",
-	385: "B",
-	387: "b",
-	390: "O",
-	392: "c",
-	393: "D",
-	394: "D",
-	396: "d",
-	398: "E",
-	400: "E",
-	402: "f",
-	403: "G",
-	407: "I",
-	409: "k",
-	410: "l",
-	412: "M",
-	413: "N",
-	414: "n",
-	415: "O",
-	421: "p",
-	427: "t",
-	429: "t",
-	430: "T",
-	434: "V",
-	436: "y",
-	438: "z",
-	477: "e",
-	485: "g",
-	544: "N",
-	545: "d",
-	549: "z",
-	564: "l",
-	565: "n",
-	566: "t",
-	567: "j",
-	570: "A",
-	571: "C",
-	572: "c",
-	573: "L",
-	574: "T",
-	575: "s",
-	576: "z",
-	579: "B",
-	580: "U",
-	581: "V",
-	582: "E",
-	583: "e",
-	584: "J",
-	585: "j",
-	586: "Q",
-	587: "q",
-	588: "R",
-	589: "r",
-	590: "Y",
-	591: "y",
-	592: "a",
-	593: "a",
-	595: "b",
-	596: "o",
-	597: "c",
-	598: "d",
-	599: "d",
-	600: "e",
-	603: "e",
-	604: "e",
-	605: "e",
-	606: "e",
-	607: "j",
-	608: "g",
-	609: "g",
-	610: "G",
-	613: "h",
-	614: "h",
-	616: "i",
-	618: "I",
-	619: "l",
-	620: "l",
-	621: "l",
-	623: "m",
-	624: "m",
-	625: "m",
-	626: "n",
-	627: "n",
-	628: "N",
-	629: "o",
-	633: "r",
-	634: "r",
-	635: "r",
-	636: "r",
-	637: "r",
-	638: "r",
-	639: "r",
-	640: "R",
-	641: "R",
-	642: "s",
-	647: "t",
-	648: "t",
-	649: "u",
-	651: "v",
-	652: "v",
-	653: "w",
-	654: "y",
-	655: "Y",
-	656: "z",
-	657: "z",
-	663: "c",
-	665: "B",
-	666: "e",
-	667: "G",
-	668: "H",
-	669: "j",
-	670: "k",
-	671: "L",
-	672: "q",
-	686: "h",
-	867: "a",
-	868: "e",
-	869: "i",
-	870: "o",
-	871: "u",
-	872: "c",
-	873: "d",
-	874: "h",
-	875: "m",
-	876: "r",
-	877: "t",
-	878: "v",
-	879: "x",
-	7424: "A",
-	7427: "B",
-	7428: "C",
-	7429: "D",
-	7431: "E",
-	7432: "e",
-	7433: "i",
-	7434: "J",
-	7435: "K",
-	7436: "L",
-	7437: "M",
-	7438: "N",
-	7439: "O",
-	7440: "O",
-	7441: "o",
-	7442: "o",
-	7443: "o",
-	7446: "o",
-	7447: "o",
-	7448: "P",
-	7449: "R",
-	7450: "R",
-	7451: "T",
-	7452: "U",
-	7453: "u",
-	7454: "u",
-	7455: "m",
-	7456: "V",
-	7457: "W",
-	7458: "Z",
-	7522: "i",
-	7523: "r",
-	7524: "u",
-	7525: "v",
-	7834: "a",
-	7835: "s",
-	8305: "i",
-	8341: "h",
-	8342: "k",
-	8343: "l",
-	8344: "m",
-	8345: "n",
-	8346: "p",
-	8347: "s",
-	8348: "t",
-	8580: "c"
-};
-for (let i = "̀".codePointAt(0); i <= "ͯ".codePointAt(0); ++i) {
-	const diacritic = String.fromCodePoint(i);
-	for (const asciiChar of "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz") {
-		const withDiacriticCodePoint = (asciiChar + diacritic).normalize().codePointAt(0);
-		if (withDiacriticCodePoint > 126) normalized[withDiacriticCodePoint] = asciiChar;
-	}
-}
-var ranges = {
-	a: [7844, 7863],
-	e: [7870, 7879],
-	o: [7888, 7907],
-	u: [7912, 7921]
-};
-for (const lowerChar of Object.keys(ranges)) {
-	const upperChar = lowerChar.toUpperCase();
-	for (let i = ranges[lowerChar][0]; i <= ranges[lowerChar][1]; ++i) normalized[i] = i % 2 === 0 ? upperChar : lowerChar;
-}
-function normalizeRune(rune) {
-	if (rune < 192 || rune > 8580) return rune;
-	const normalizedChar = normalized[rune];
-	if (normalizedChar !== void 0) return normalizedChar.codePointAt(0);
-	return rune;
-}
-function toShort(number) {
-	return number;
-}
-function toInt(number) {
-	return number;
-}
-function maxInt16(num1, num2) {
-	return num1 > num2 ? num1 : num2;
-}
-var strToRunes = (str) => str.split("").map((s) => s.codePointAt(0));
-var whitespaceRunes = new Set(" \f\n\r	\v\xA0 \u2028\u2029  　".split("").map((v) => v.codePointAt(0)));
-for (let codePoint = " ".codePointAt(0); codePoint <= " ".codePointAt(0); codePoint++) whitespaceRunes.add(codePoint);
-var MAX_ASCII = "".codePointAt(0);
-var CAPITAL_A_RUNE = "A".codePointAt(0);
-var CAPITAL_Z_RUNE = "Z".codePointAt(0);
-var SMALL_A_RUNE = "a".codePointAt(0);
-var SMALL_Z_RUNE = "z".codePointAt(0);
-var NUMERAL_ZERO_RUNE = "0".codePointAt(0);
-var NUMERAL_NINE_RUNE = "9".codePointAt(0);
-function indexAt(index, max, forward) {
-	if (forward) return index;
-	return max - index - 1;
-}
-var SCORE_MATCH = 16;
-var SCORE_GAP_START = -3;
-var SCORE_GAP_EXTENTION = -1;
-var BONUS_BOUNDARY = SCORE_MATCH / 2;
-var BONUS_NON_WORD = SCORE_MATCH / 2;
-var BONUS_CAMEL_123 = 7;
-var BONUS_CONSECUTIVE = 4;
-var BONUS_FIRST_CHAR_MULTIPLIER = 2;
-function createPosSet(withPos) {
-	if (withPos) return /* @__PURE__ */ new Set();
-	return null;
-}
-function alloc16(offset, slab2, size) {
-	if (slab2 !== null && slab2.i16.length > offset + size) {
-		const subarray = slab2.i16.subarray(offset, offset + size);
-		return [offset + size, subarray];
-	}
-	return [offset, new Int16Array(size)];
-}
-function alloc32(offset, slab2, size) {
-	if (slab2 !== null && slab2.i32.length > offset + size) {
-		const subarray = slab2.i32.subarray(offset, offset + size);
-		return [offset + size, subarray];
-	}
-	return [offset, new Int32Array(size)];
-}
-function charClassOfAscii(rune) {
-	if (rune >= SMALL_A_RUNE && rune <= SMALL_Z_RUNE) return 1;
-	else if (rune >= CAPITAL_A_RUNE && rune <= CAPITAL_Z_RUNE) return 2;
-	else if (rune >= NUMERAL_ZERO_RUNE && rune <= NUMERAL_NINE_RUNE) return 4;
-	else return 0;
-}
-function charClassOfNonAscii(rune) {
-	const char = String.fromCodePoint(rune);
-	if (char !== char.toUpperCase()) return 1;
-	else if (char !== char.toLowerCase()) return 2;
-	else if (char.match(/\p{Number}/gu) !== null) return 4;
-	else if (char.match(/\p{Letter}/gu) !== null) return 3;
-	return 0;
-}
-function charClassOf(rune) {
-	if (rune <= MAX_ASCII) return charClassOfAscii(rune);
-	return charClassOfNonAscii(rune);
-}
-function bonusFor(prevClass, currClass) {
-	if (prevClass === 0 && currClass !== 0) return BONUS_BOUNDARY;
-	else if (prevClass === 1 && currClass === 2 || prevClass !== 4 && currClass === 4) return BONUS_CAMEL_123;
-	else if (currClass === 0) return BONUS_NON_WORD;
-	return 0;
-}
-function bonusAt(input, idx) {
-	if (idx === 0) return BONUS_BOUNDARY;
-	return bonusFor(charClassOf(input[idx - 1]), charClassOf(input[idx]));
-}
-function trySkip(input, caseSensitive, char, from) {
-	let rest = input.slice(from);
-	let idx = rest.indexOf(char);
-	if (idx === 0) return from;
-	if (!caseSensitive && char >= SMALL_A_RUNE && char <= SMALL_Z_RUNE) {
-		if (idx > 0) rest = rest.slice(0, idx);
-		const uidx = rest.indexOf(char - 32);
-		if (uidx >= 0) idx = uidx;
-	}
-	if (idx < 0) return -1;
-	return from + idx;
-}
-function isAscii(runes) {
-	for (const rune of runes) if (rune >= 128) return false;
-	return true;
-}
-function asciiFuzzyIndex(input, pattern, caseSensitive) {
-	if (!isAscii(input)) return 0;
-	if (!isAscii(pattern)) return -1;
-	let firstIdx = 0, idx = 0;
-	for (let pidx = 0; pidx < pattern.length; pidx++) {
-		idx = trySkip(input, caseSensitive, pattern[pidx], idx);
-		if (idx < 0) return -1;
-		if (pidx === 0 && idx > 0) firstIdx = idx - 1;
-		idx++;
-	}
-	return firstIdx;
-}
-var fuzzyMatchV2 = (caseSensitive, normalize, forward, input, pattern, withPos, slab2) => {
-	const M = pattern.length;
-	if (M === 0) return [{
-		start: 0,
-		end: 0,
-		score: 0
-	}, createPosSet(withPos)];
-	const N = input.length;
-	if (slab2 !== null && N * M > slab2.i16.length) return fuzzyMatchV1(caseSensitive, normalize, forward, input, pattern, withPos);
-	const idx = asciiFuzzyIndex(input, pattern, caseSensitive);
-	if (idx < 0) return [{
-		start: -1,
-		end: -1,
-		score: 0
-	}, null];
-	let offset16 = 0, offset32 = 0, H0 = null, C0 = null, B = null, F = null;
-	[offset16, H0] = alloc16(offset16, slab2, N);
-	[offset16, C0] = alloc16(offset16, slab2, N);
-	[offset16, B] = alloc16(offset16, slab2, N);
-	[offset32, F] = alloc32(offset32, slab2, M);
-	const [, T] = alloc32(offset32, slab2, N);
-	for (let i = 0; i < T.length; i++) T[i] = input[i];
-	let maxScore = toShort(0), maxScorePos = 0;
-	let pidx = 0, lastIdx = 0;
-	const pchar0 = pattern[0];
-	let pchar = pattern[0], prevH0 = toShort(0), prevCharClass = 0, inGap = false;
-	let Tsub = T.subarray(idx);
-	let H0sub = H0.subarray(idx).subarray(0, Tsub.length), C0sub = C0.subarray(idx).subarray(0, Tsub.length), Bsub = B.subarray(idx).subarray(0, Tsub.length);
-	for (let [off, char] of Tsub.entries()) {
-		let charClass = null;
-		if (char <= MAX_ASCII) {
-			charClass = charClassOfAscii(char);
-			if (!caseSensitive && charClass === 2) char += 32;
-		} else {
-			charClass = charClassOfNonAscii(char);
-			if (!caseSensitive && charClass === 2) char = String.fromCodePoint(char).toLowerCase().codePointAt(0);
-			if (normalize) char = normalizeRune(char);
-		}
-		Tsub[off] = char;
-		const bonus = bonusFor(prevCharClass, charClass);
-		Bsub[off] = bonus;
-		prevCharClass = charClass;
-		if (char === pchar) {
-			if (pidx < M) {
-				F[pidx] = toInt(idx + off);
-				pidx++;
-				pchar = pattern[Math.min(pidx, M - 1)];
-			}
-			lastIdx = idx + off;
-		}
-		if (char === pchar0) {
-			const score = SCORE_MATCH + bonus * BONUS_FIRST_CHAR_MULTIPLIER;
-			H0sub[off] = score;
-			C0sub[off] = 1;
-			if (M === 1 && (forward && score > maxScore || !forward && score >= maxScore)) {
-				maxScore = score;
-				maxScorePos = idx + off;
-				if (forward && bonus === BONUS_BOUNDARY) break;
-			}
-			inGap = false;
-		} else {
-			if (inGap) H0sub[off] = maxInt16(prevH0 + SCORE_GAP_EXTENTION, 0);
-			else H0sub[off] = maxInt16(prevH0 + SCORE_GAP_START, 0);
-			C0sub[off] = 0;
-			inGap = true;
-		}
-		prevH0 = H0sub[off];
-	}
-	if (pidx !== M) return [{
-		start: -1,
-		end: -1,
-		score: 0
-	}, null];
-	if (M === 1) {
-		const result = {
-			start: maxScorePos,
-			end: maxScorePos + 1,
-			score: maxScore
-		};
-		if (!withPos) return [result, null];
-		const pos2 = /* @__PURE__ */ new Set();
-		pos2.add(maxScorePos);
-		return [result, pos2];
-	}
-	const f0 = F[0];
-	const width = lastIdx - f0 + 1;
-	let H = null;
-	[offset16, H] = alloc16(offset16, slab2, width * M);
-	{
-		const toCopy = H0.subarray(f0, lastIdx + 1);
-		for (const [i, v] of toCopy.entries()) H[i] = v;
-	}
-	let [, C] = alloc16(offset16, slab2, width * M);
-	{
-		const toCopy = C0.subarray(f0, lastIdx + 1);
-		for (const [i, v] of toCopy.entries()) C[i] = v;
-	}
-	const Fsub = F.subarray(1);
-	const Psub = pattern.slice(1).slice(0, Fsub.length);
-	for (const [off, f] of Fsub.entries()) {
-		let inGap2 = false;
-		const pchar2 = Psub[off], pidx2 = off + 1, row = pidx2 * width, Tsub2 = T.subarray(f, lastIdx + 1), Bsub2 = B.subarray(f).subarray(0, Tsub2.length), Csub = C.subarray(row + f - f0).subarray(0, Tsub2.length), Cdiag = C.subarray(row + f - f0 - 1 - width).subarray(0, Tsub2.length), Hsub = H.subarray(row + f - f0).subarray(0, Tsub2.length), Hdiag = H.subarray(row + f - f0 - 1 - width).subarray(0, Tsub2.length), Hleft = H.subarray(row + f - f0 - 1).subarray(0, Tsub2.length);
-		Hleft[0] = 0;
-		for (const [off2, char] of Tsub2.entries()) {
-			const col = off2 + f;
-			let s1 = 0, s2 = 0, consecutive = 0;
-			if (inGap2) s2 = Hleft[off2] + SCORE_GAP_EXTENTION;
-			else s2 = Hleft[off2] + SCORE_GAP_START;
-			if (pchar2 === char) {
-				s1 = Hdiag[off2] + SCORE_MATCH;
-				let b = Bsub2[off2];
-				consecutive = Cdiag[off2] + 1;
-				if (b === BONUS_BOUNDARY) consecutive = 1;
-				else if (consecutive > 1) b = maxInt16(b, maxInt16(BONUS_CONSECUTIVE, B[col - consecutive + 1]));
-				if (s1 + b < s2) {
-					s1 += Bsub2[off2];
-					consecutive = 0;
-				} else s1 += b;
-			}
-			Csub[off2] = consecutive;
-			inGap2 = s1 < s2;
-			const score = maxInt16(maxInt16(s1, s2), 0);
-			if (pidx2 === M - 1 && (forward && score > maxScore || !forward && score >= maxScore)) {
-				maxScore = score;
-				maxScorePos = col;
-			}
-			Hsub[off2] = score;
-		}
-	}
-	const pos = createPosSet(withPos);
-	let j = f0;
-	if (withPos && pos !== null) {
-		let i = M - 1;
-		j = maxScorePos;
-		let preferMatch = true;
-		while (true) {
-			const I = i * width, j0 = j - f0, s = H[I + j0];
-			let s1 = 0, s2 = 0;
-			if (i > 0 && j >= F[i]) s1 = H[I - width + j0 - 1];
-			if (j > F[i]) s2 = H[I + j0 - 1];
-			if (s > s1 && (s > s2 || s === s2 && preferMatch)) {
-				pos.add(j);
-				if (i === 0) break;
-				i--;
-			}
-			preferMatch = C[I + j0] > 1 || I + width + j0 + 1 < C.length && C[I + width + j0 + 1] > 0;
-			j--;
-		}
-	}
-	return [{
-		start: j,
-		end: maxScorePos + 1,
-		score: maxScore
-	}, pos];
-};
-function calculateScore(caseSensitive, normalize, text, pattern, sidx, eidx, withPos) {
-	let pidx = 0, score = 0, inGap = false, consecutive = 0, firstBonus = toShort(0);
-	const pos = createPosSet(withPos);
-	let prevCharClass = 0;
-	if (sidx > 0) prevCharClass = charClassOf(text[sidx - 1]);
-	for (let idx = sidx; idx < eidx; idx++) {
-		let rune = text[idx];
-		const charClass = charClassOf(rune);
-		if (!caseSensitive) {
-			if (rune >= CAPITAL_A_RUNE && rune <= CAPITAL_Z_RUNE) rune += 32;
-			else if (rune > MAX_ASCII) rune = String.fromCodePoint(rune).toLowerCase().codePointAt(0);
-		}
-		if (normalize) rune = normalizeRune(rune);
-		if (rune === pattern[pidx]) {
-			if (withPos && pos !== null) pos.add(idx);
-			score += SCORE_MATCH;
-			let bonus = bonusFor(prevCharClass, charClass);
-			if (consecutive === 0) firstBonus = bonus;
-			else {
-				if (bonus === BONUS_BOUNDARY) firstBonus = bonus;
-				bonus = maxInt16(maxInt16(bonus, firstBonus), BONUS_CONSECUTIVE);
-			}
-			if (pidx === 0) score += bonus * BONUS_FIRST_CHAR_MULTIPLIER;
-			else score += bonus;
-			inGap = false;
-			consecutive++;
-			pidx++;
-		} else {
-			if (inGap) score += SCORE_GAP_EXTENTION;
-			else score += SCORE_GAP_START;
-			inGap = true;
-			consecutive = 0;
-			firstBonus = 0;
-		}
-		prevCharClass = charClass;
-	}
-	return [score, pos];
-}
-var fuzzyMatchV1 = (caseSensitive, normalize, forward, text, pattern, withPos, slab2) => {
-	if (pattern.length === 0) return [{
-		start: 0,
-		end: 0,
-		score: 0
-	}, null];
-	if (asciiFuzzyIndex(text, pattern, caseSensitive) < 0) return [{
-		start: -1,
-		end: -1,
-		score: 0
-	}, null];
-	let pidx = 0, sidx = -1, eidx = -1;
-	const lenRunes = text.length;
-	const lenPattern = pattern.length;
-	for (let index = 0; index < lenRunes; index++) {
-		let rune = text[indexAt(index, lenRunes, forward)];
-		if (!caseSensitive) {
-			if (rune >= CAPITAL_A_RUNE && rune <= CAPITAL_Z_RUNE) rune += 32;
-			else if (rune > MAX_ASCII) rune = String.fromCodePoint(rune).toLowerCase().codePointAt(0);
-		}
-		if (normalize) rune = normalizeRune(rune);
-		const pchar = pattern[indexAt(pidx, lenPattern, forward)];
-		if (rune === pchar) {
-			if (sidx < 0) sidx = index;
-			pidx++;
-			if (pidx === lenPattern) {
-				eidx = index + 1;
-				break;
-			}
-		}
-	}
-	if (sidx >= 0 && eidx >= 0) {
-		pidx--;
-		for (let index = eidx - 1; index >= sidx; index--) {
-			let rune = text[indexAt(index, lenRunes, forward)];
-			if (!caseSensitive) {
-				if (rune >= CAPITAL_A_RUNE && rune <= CAPITAL_Z_RUNE) rune += 32;
-				else if (rune > MAX_ASCII) rune = String.fromCodePoint(rune).toLowerCase().codePointAt(0);
-			}
-			const pchar = pattern[indexAt(pidx, lenPattern, forward)];
-			if (rune === pchar) {
-				pidx--;
-				if (pidx < 0) {
-					sidx = index;
-					break;
-				}
-			}
-		}
-		if (!forward) {
-			const sidxTemp = sidx;
-			sidx = lenRunes - eidx;
-			eidx = lenRunes - sidxTemp;
-		}
-		const [score, pos] = calculateScore(caseSensitive, normalize, text, pattern, sidx, eidx, withPos);
-		return [{
-			start: sidx,
-			end: eidx,
-			score
-		}, pos];
-	}
-	return [{
-		start: -1,
-		end: -1,
-		score: 0
-	}, null];
-};
-var exactMatchNaive = (caseSensitive, normalize, forward, text, pattern, withPos, slab2) => {
-	if (pattern.length === 0) return [{
-		start: 0,
-		end: 0,
-		score: 0
-	}, null];
-	const lenRunes = text.length;
-	const lenPattern = pattern.length;
-	if (lenRunes < lenPattern) return [{
-		start: -1,
-		end: -1,
-		score: 0
-	}, null];
-	if (asciiFuzzyIndex(text, pattern, caseSensitive) < 0) return [{
-		start: -1,
-		end: -1,
-		score: 0
-	}, null];
-	let pidx = 0;
-	let bestPos = -1, bonus = toShort(0), bestBonus = toShort(-1);
-	for (let index = 0; index < lenRunes; index++) {
-		const index_ = indexAt(index, lenRunes, forward);
-		let rune = text[index_];
-		if (!caseSensitive) {
-			if (rune >= CAPITAL_A_RUNE && rune <= CAPITAL_Z_RUNE) rune += 32;
-			else if (rune > MAX_ASCII) rune = String.fromCodePoint(rune).toLowerCase().codePointAt(0);
-		}
-		if (normalize) rune = normalizeRune(rune);
-		const pidx_ = indexAt(pidx, lenPattern, forward);
-		if (pattern[pidx_] === rune) {
-			if (pidx_ === 0) bonus = bonusAt(text, index_);
-			pidx++;
-			if (pidx === lenPattern) {
-				if (bonus > bestBonus) {
-					bestPos = index;
-					bestBonus = bonus;
-				}
-				if (bonus === BONUS_BOUNDARY) break;
-				index -= pidx - 1;
-				pidx = 0;
-				bonus = 0;
-			}
-		} else {
-			index -= pidx;
-			pidx = 0;
-			bonus = 0;
-		}
-	}
-	if (bestPos >= 0) {
-		let sidx = 0, eidx = 0;
-		if (forward) {
-			sidx = bestPos - lenPattern + 1;
-			eidx = bestPos + 1;
-		} else {
-			sidx = lenRunes - (bestPos + 1);
-			eidx = lenRunes - (bestPos - lenPattern + 1);
-		}
-		const [score] = calculateScore(caseSensitive, normalize, text, pattern, sidx, eidx, false);
-		return [{
-			start: sidx,
-			end: eidx,
-			score
-		}, null];
-	}
-	return [{
-		start: -1,
-		end: -1,
-		score: 0
-	}, null];
-};
-var SLAB_16_SIZE = 102400;
-var SLAB_32_SIZE = 2048;
-function makeSlab(size16, size32) {
-	return {
-		i16: new Int16Array(size16),
-		i32: new Int32Array(size32)
-	};
-}
-var slab = makeSlab(SLAB_16_SIZE, SLAB_32_SIZE);
-var buildPatternForBasicMatch = (query, casing, normalize) => {
-	let caseSensitive = false;
-	switch (casing) {
-		case "smart-case":
-			if (query.toLowerCase() !== query) caseSensitive = true;
-			break;
-		case "case-sensitive":
-			caseSensitive = true;
-			break;
-		case "case-insensitive":
-			query = query.toLowerCase();
-			caseSensitive = false;
-	}
-	let queryRunes = strToRunes(query);
-	if (normalize) queryRunes = queryRunes.map(normalizeRune);
-	return {
-		queryRunes,
-		caseSensitive
-	};
-};
-function getResultFromScoreMap(scoreMap, limit) {
-	const scoresInDesc = Object.keys(scoreMap).map((v) => parseInt(v, 10)).sort((a, b) => b - a);
-	let result = [];
-	for (const score of scoresInDesc) {
-		result = result.concat(scoreMap[score]);
-		if (result.length >= limit) break;
-	}
-	return result;
-}
-function getBasicMatchIter(scoreMap, queryRunes, caseSensitive) {
-	return (idx) => {
-		const itemRunes = this.runesList[idx];
-		if (queryRunes.length > itemRunes.length) return;
-		let [match, positions] = this.algoFn(caseSensitive, this.opts.normalize, this.opts.forward, itemRunes, queryRunes, true, slab);
-		if (match.start === -1) return;
-		if (this.opts.fuzzy === false) {
-			positions = /* @__PURE__ */ new Set();
-			for (let position = match.start; position < match.end; ++position) positions.add(position);
-		}
-		const scoreKey = this.opts.sort ? match.score : 0;
-		if (scoreMap[scoreKey] === void 0) scoreMap[scoreKey] = [];
-		scoreMap[scoreKey].push({
-			item: this.items[idx],
-			...match,
-			positions: positions != null ? positions : /* @__PURE__ */ new Set()
-		});
-	};
-}
-var isNode = typeof __require !== "undefined" && typeof window === "undefined";
-function asyncMatcher(token, len, iter2, onFinish) {
-	return new Promise((resolve, reject) => {
-		const INCREMENT = 1e3;
-		let i = 0, end = Math.min(INCREMENT, len);
-		const step = () => {
-			if (token.cancelled) return reject("search cancelled");
-			for (; i < end; ++i) iter2(i);
-			if (end < len) {
-				end = Math.min(end + INCREMENT, len);
-				isNode ? setImmediate(step) : setTimeout(step);
-			} else resolve(onFinish());
-		};
-		step();
-	});
-}
-function asyncBasicMatch(query, token) {
-	const { queryRunes, caseSensitive } = buildPatternForBasicMatch(query, this.opts.casing, this.opts.normalize);
-	const scoreMap = {};
-	return asyncMatcher(token, this.runesList.length, getBasicMatchIter.bind(this)(scoreMap, queryRunes, caseSensitive), () => getResultFromScoreMap(scoreMap, this.opts.limit));
-}
-var defaultOpts = {
-	limit: Infinity,
-	selector: (v) => v,
-	casing: "smart-case",
-	normalize: true,
-	fuzzy: "v2",
-	tiebreakers: [],
-	sort: true,
-	forward: true
-};
-var BaseFinder = class {
-	constructor(list, ...optionsTuple) {
-		this.opts = {
-			...defaultOpts,
-			...optionsTuple[0]
-		};
-		this.items = list;
-		this.runesList = list.map((item) => strToRunes(this.opts.selector(item).normalize()));
-		this.algoFn = exactMatchNaive;
-		switch (this.opts.fuzzy) {
-			case "v2":
-				this.algoFn = fuzzyMatchV2;
-				break;
-			case "v1": this.algoFn = fuzzyMatchV1;
-		}
-	}
-};
-({ ...defaultOpts });
-var asyncDefaultOpts = {
-	...defaultOpts,
-	match: asyncBasicMatch
-};
-var AsyncFinder = class extends BaseFinder {
-	constructor(list, ...optionsTuple) {
-		super(list, ...optionsTuple);
-		this.opts = {
-			...asyncDefaultOpts,
-			...optionsTuple[0]
-		};
-		this.token = { cancelled: false };
-	}
-	async find(query) {
-		this.token.cancelled = true;
-		this.token = { cancelled: false };
-		if (query.length === 0 || this.items.length === 0) return this.items.slice(0, this.opts.limit).map(createResultItemWithEmptyPos);
-		query = query.normalize();
-		return postProcessResultItems(await this.opts.match.bind(this)(query, this.token), this.opts);
-	}
-};
-var createResultItemWithEmptyPos = (item) => ({
-	item,
-	start: -1,
-	end: -1,
-	score: 0,
-	positions: /* @__PURE__ */ new Set()
-});
-function postProcessResultItems(result, opts) {
-	if (opts.sort) {
-		const { selector } = opts;
-		result.sort((a, b) => {
-			if (a.score === b.score) for (const tiebreaker of opts.tiebreakers) {
-				const diff = tiebreaker(a, b, selector);
-				if (diff !== 0) return diff;
-			}
-			return 0;
-		});
-	}
-	if (Number.isFinite(opts.limit)) result.splice(opts.limit);
-	return result;
-}
-var AsyncFzf = class {
-	constructor(list, ...optionsTuple) {
-		this.finder = new AsyncFinder(list, ...optionsTuple);
-		this.find = this.finder.find.bind(this.finder);
-	}
-};
-//#endregion
-//#region src/ui/browser/icons/picker/IconPicker.tsx
-var translations = {
-	"en": {
-		emoji: "Emoji",
-		icon: "Icon",
-		random: "Random",
-		filter: "Filter...",
-		more: "More...",
-		loading: "Loading...",
-		carbon: "Carbon",
-		close: "Close",
-		color: "Color"
-	},
-	"zh-CN": {
-		emoji: "Emoji",
-		icon: "图标",
-		random: "随机",
-		filter: "搜索...",
-		more: "更多...",
-		loading: "加载中...",
-		carbon: "Carbon",
-		close: "关闭",
-		color: "颜色"
-	},
-	"zh-TW": {
-		emoji: "Emoji",
-		icon: "圖示",
-		random: "隨機",
-		filter: "搜尋...",
-		more: "更多...",
-		loading: "載入中...",
-		carbon: "Carbon",
-		close: "關閉",
-		color: "顏色"
-	},
-	"ja": {
-		emoji: "絵文字",
-		icon: "アイコン",
-		random: "ランダム",
-		filter: "検索…",
-		more: "もっと見る…",
-		loading: "読み込み中…",
-		carbon: "Carbon",
-		close: "閉じる",
-		color: "色"
-	},
-	"ko": {
-		emoji: "이모지",
-		icon: "아이콘",
-		random: "무작위",
-		filter: "필터...",
-		more: "더 보기...",
-		loading: "불러오는 중...",
-		carbon: "Carbon",
-		close: "닫기",
-		color: "색상"
-	},
-	"ru": {
-		emoji: "Эмодзи",
-		icon: "Значок",
-		random: "Случайно",
-		filter: "Фильтр…",
-		more: "Ещё…",
-		loading: "Загрузка…",
-		carbon: "Carbon",
-		close: "Закрыть",
-		color: "Цвет"
-	},
-	"fr": {
-		emoji: "Emoji",
-		icon: "Icône",
-		random: "Aléatoire",
-		filter: "Filtrer...",
-		more: "Plus...",
-		loading: "Chargement...",
-		carbon: "Carbon",
-		close: "Fermer",
-		color: "Couleur"
-	}
-};
-var rememberLastTab;
-var rememberLastColor;
-function getTranslate(lang) {
-	const data = translations[resolveUiLanguage([lang])];
-	return (key) => data[key] || translations.en[key] || key;
-}
-var COLUMNS = 9;
-var CONTAINER_STYLE = {
-	width: 308,
-	height: 360
-};
-var MAX_ITEMS_INIT = 180;
-var MAX_ITEMS_STEP = 90;
-var COLORS = [
-	"currentColor",
-	"#CC3E44",
-	"#E37933",
-	"#CBCB41",
-	"#8DC149",
-	"#7494A3",
-	"#519ABA",
-	"#A074C4",
-	"#F55385",
-	"#6D8086"
-];
-function computeRows(iconifyData, filteredIcons, categories, collection) {
-	const rows = [];
-	if (!iconifyData) return rows;
-	if (filteredIcons) for (let i = 0; i < filteredIcons.length; i += COLUMNS) rows.push(filteredIcons.slice(i, i + COLUMNS));
-	else if (categories) for (const category in categories) {
-		rows.push(category);
-		const icons = categories[category];
-		for (let i = 0; i < icons.length; i += COLUMNS) rows.push(icons.slice(i, i + COLUMNS));
-	}
-	else if (collection) {
-		const icons = iconifyData[collection]?.icons.icons;
-		if (icons) {
-			filteredIcons = Object.keys(icons);
-			for (let i = 0; i < filteredIcons.length; i += COLUMNS) rows.push(filteredIcons.slice(i, i + COLUMNS));
-		}
-	}
-	return rows;
-}
-var ICON_SIZE = 32;
-var BUFFER_SIZE = 320;
-var ROW_STYLE = { height: ICON_SIZE };
-var PickerIcon = ({ iconSet, name, color }) => {
-	const svg = useMemo(() => {
-		const icon = getIconData(iconSet, name);
-		if (!icon) return null;
-		const result = iconToSVG(icon, {
-			width: "1em",
-			height: "1em"
-		});
-		return {
-			body: replaceIDs(result.body),
-			viewBox: result.attributes.viewBox
-		};
-	}, [iconSet, name]);
-	if (!svg) return null;
-	return /* @__PURE__ */ jsx("svg", {
-		"aria-hidden": "true",
-		className: clsx(IconPicker_module_default.icon, "text-lg"),
-		focusable: "false",
-		style: { color },
-		viewBox: svg.viewBox,
-		dangerouslySetInnerHTML: { __html: svg.body }
-	});
-};
-function renderRow(index, row, iconSet, color) {
-	return /* @__PURE__ */ jsx("div", {
-		className: IconPicker_module_default.row,
-		style: ROW_STYLE,
-		children: Array.isArray(row) ? row.map((icon) => /* @__PURE__ */ jsx(Button$1, {
-			variant: "ghost",
-			size: "icon-sm",
-			"aria-label": icon,
-			"data-icon": icon,
-			title: icon,
-			type: "button",
-			children: /* @__PURE__ */ jsx(PickerIcon, {
-				iconSet,
-				name: icon,
-				color
-			})
-		}, icon)) : /* @__PURE__ */ jsx("div", {
-			className: IconPicker_module_default.subtitle,
-			children: row
-		})
-	}, index);
-}
-var IconPickerIconsPanel = ({ filteredIcons, collection, color, categories, onClick }) => {
-	const iconifyData = useIconifyData(true);
-	const iconSet = iconifyData?.[collection]?.icons;
-	const [viewport, setViewport] = useState(null);
-	const rows = useMemo(() => computeRows(iconifyData, filteredIcons, categories, collection), [
-		iconifyData,
-		filteredIcons,
-		categories,
-		collection
-	]);
-	return /* @__PURE__ */ jsx(ScrollArea, {
-		className: IconPicker_module_default.panel,
-		defer: false,
-		events: { initialized: (instance) => setViewport(instance.elements().viewport) },
-		onClick,
-		children: viewport && iconSet && /* @__PURE__ */ jsx(Z$1, {
-			data: rows,
-			itemSize: ICON_SIZE,
-			bufferSize: BUFFER_SIZE,
-			scrollRef: { current: viewport },
-			children: (row, index) => renderRow(index, row, iconSet, color)
-		})
-	});
-};
-var IconPicker = ({ className, emoji, carbon = true, defaultTab = rememberLastTab || (emoji ? "twemoji" : "carbon"), defaultColor = rememberLastColor || COLORS[0], locale, onChange, onCancel }) => {
-	if (!emoji && !carbon) carbon = true;
-	const i18n = useI18n(true);
-	const language$ = locale || i18n?.lang$ || "en";
-	const t = getTranslate(useVal(language$));
-	const root = useRef(null);
-	const [tab, setTab] = useState(defaultTab);
-	const [searchText, setSearchText] = useState("");
-	const [maxItems, setMaxItems] = useState(MAX_ITEMS_INIT);
-	const [filteredIcons, setIcons] = useState(null);
-	const [selectedColor, setColor] = useState(defaultColor);
-	const [colorsPanel, setColorsPanel] = useState(false);
-	const hasColors = tab === "carbon";
-	const iconifyData = useIconifyData(true);
-	const loadCollection = useIconifyCollectionLoader();
-	useEffect(() => {
-		loadCollection?.(tab).catch((error) => console.error(`Failed to load the ${tab} icon collection.`, error));
-	}, [loadCollection, tab]);
-	const fzf = useMemo(() => {
-		const collection = iconifyData?.[tab];
-		if (collection) return new AsyncFzf(Object.keys(collection.icons.icons), {
-			casing: "case-insensitive",
-			fuzzy: "v1"
-		});
-		return null;
-	}, [iconifyData, tab]);
-	const loadMore = useCallback(() => {
-		setMaxItems((currentMaxItems) => currentMaxItems + MAX_ITEMS_STEP);
-	}, []);
-	const searchTimeout = useRef(0);
-	useEffect(() => {
-		clearTimeout(searchTimeout.current);
-		if (searchText) {
-			setIcons([]);
-			if (!fzf || !searchText) return;
-			let isMounted = true;
-			searchTimeout.current = window.setTimeout(async () => {
-				const result = await fzf.find(searchText);
-				if (isMounted) {
-					setMaxItems(MAX_ITEMS_INIT);
-					setIcons(result.map((i) => i.item));
-				}
-			}, 200);
-			return () => {
-				isMounted = false;
-			};
-		} else setIcons(null);
-	}, [fzf, searchText]);
-	const onClickShuffle = useCallback(() => {
-		const collection = iconifyData?.[tab];
-		if (onChange && collection) {
-			const keys = Object.keys(collection.icons.icons);
-			const icon = keys[Math.floor(Math.random() * keys.length)];
-			const color = COLORS[Math.floor(Math.random() * COLORS.length)];
-			onChange(tab, icon, color, true);
-		}
-	}, [tab, onChange]);
-	const toggleColorsPanel = useCallback(() => {
-		setColorsPanel((e) => !e);
-	}, []);
-	const onClickColors = useCallback((event) => {
-		const color = event.target.dataset.color;
-		if (color) setColor(rememberLastColor = color);
-	}, []);
-	const onClickIcon = useCallback((event) => {
-		const icon = event.target.dataset.icon;
-		if (icon && onChange) onChange(tab, icon, selectedColor, false);
-	}, [
-		tab,
-		selectedColor,
-		onChange
-	]);
-	const onKeyDown = useCallback((event) => {
-		if (event.key === "Escape" && onCancel) {
-			event.stopPropagation();
-			onCancel();
-		}
-	}, [onCancel]);
-	useEffect(() => {
-		root.current?.focus();
-	}, []);
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx(IconPicker_module_default.container, className),
-		style: CONTAINER_STYLE,
-		tabIndex: -1,
-		onKeyDown,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: IconPicker_module_default.filter,
-				children: [/* @__PURE__ */ jsxs(InputGroup, {
-					className: "h-6",
-					children: [/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx("i", {
-						"aria-hidden": "true",
-						className: "i-lucide-light:search text-sm"
-					}) }), /* @__PURE__ */ jsx(InputGroupInput, {
-						className: "h-full py-0 text-[11px] md:text-[11px]",
-						"aria-label": t("filter"),
-						autoComplete: "off",
-						type: "search",
-						placeholder: t("filter"),
-						value: searchText,
-						onChange: (e) => setSearchText(e.target.value),
-						autoFocus: true
-					})]
-				}), /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-					render: /* @__PURE__ */ jsx(Button$1, {
-						variant: "ghost",
-						size: "icon-xs",
-						"aria-label": t("random"),
-						onClick: onClickShuffle,
-						type: "button"
-					}),
-					children: /* @__PURE__ */ jsx("i", {
-						"aria-hidden": "true",
-						className: "i-lucide-light:shuffle text-sm"
-					})
-				}), /* @__PURE__ */ jsx(TooltipContent, { children: t("random") })] })]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: IconPicker_module_default.tabs,
-				children: [
-					/* @__PURE__ */ jsx(Tabs, {
-						value: tab,
-						onValueChange: (value) => {
-							setTab(rememberLastTab = value);
-							setColorsPanel(false);
-						},
-						className: "min-w-0 flex-1",
-						children: /* @__PURE__ */ jsxs(TabsList, {
-							variant: "flat",
-							className: "w-full rounded-[6px] p-0.5 group-data-[orientation=horizontal]/tabs:h-6",
-							children: [emoji && /* @__PURE__ */ jsx(TabsTrigger, {
-								className: "text-[11px] group-data-[variant=flat]/tabs-list:rounded-[4px]",
-								value: "twemoji",
-								children: t("emoji")
-							}), carbon && /* @__PURE__ */ jsx(TabsTrigger, {
-								className: "text-[11px] group-data-[variant=flat]/tabs-list:rounded-[4px]",
-								value: "carbon",
-								children: t("carbon")
-							})]
-						})
-					}),
-					hasColors && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-						render: /* @__PURE__ */ jsx(Button$1, {
-							variant: "ghost",
-							size: "icon-xs",
-							"aria-expanded": colorsPanel,
-							"aria-label": t("color"),
-							onClick: toggleColorsPanel,
-							type: "button"
-						}),
-						children: /* @__PURE__ */ jsx("i", {
-							"aria-hidden": "true",
-							className: "i-lucide-light:palette text-sm",
-							style: { color: selectedColor }
-						})
-					}), /* @__PURE__ */ jsx(TooltipContent, { children: t("color") })] }),
-					/* @__PURE__ */ jsx("div", {
-						onClick: onClickColors,
-						className: IconPicker_module_default.colors,
-						style: hasColors && colorsPanel ? {} : { display: "none" },
-						children: COLORS.map((color) => /* @__PURE__ */ jsx("button", {
-							"aria-label": `${t("color")}: ${color}`,
-							"aria-pressed": selectedColor === color,
-							className: IconPicker_module_default.color,
-							"data-color": color,
-							style: { backgroundColor: color },
-							type: "button"
-						}, color))
-					})
-				]
-			}),
-			iconifyData?.[tab] ? /* @__PURE__ */ jsx(IconPickerIconsPanel, {
-				filteredIcons: filteredIcons?.slice(0, maxItems),
-				collection: tab,
-				categories: iconifyData?.[tab]?.metadata?.categories,
-				color: selectedColor,
-				onClick: onClickIcon
-			}, tab) : /* @__PURE__ */ jsxs("div", {
-				className: IconPicker_module_default.loading,
-				children: [/* @__PURE__ */ jsx("i", { className: "i-codicon:loading" }), /* @__PURE__ */ jsx("span", { children: t("loading") })]
-			}),
-			filteredIcons && filteredIcons.length > maxItems && /* @__PURE__ */ jsx(Button$1, {
-				variant: "ghost",
-				size: "xs",
-				className: "mx-3 mb-2 shrink-0 text-[11px]",
-				onClick: loadMore,
-				type: "button",
-				children: t("more")
-			})
-		]
-	});
-};
-//#endregion
-//#region src/ui/browser/icons/icon-picker-button.tsx
-function IconPickerButton({ children, className, disabled, label, onChange, side = "bottom", size = "icon-xs", variant = "ghost" }) {
-	const [open, setOpen] = useState(false);
-	const [container, setContainer] = useState(null);
-	return /* @__PURE__ */ jsx("div", {
-		className: "inline-flex",
-		ref: setContainer,
-		children: /* @__PURE__ */ jsxs(Popover, {
-			open: open && !disabled,
-			onOpenChange: setOpen,
-			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-				render: /* @__PURE__ */ jsx(Button$1, {
-					"aria-label": label,
-					className,
-					disabled,
-					size,
-					variant
-				}),
-				children
-			}), /* @__PURE__ */ jsx(PopoverContent, {
-				"aria-label": label,
-				container,
-				side,
-				className: "w-auto overflow-hidden border border-foreground/10 p-0 ring-0",
-				children: /* @__PURE__ */ jsx(IconPicker, {
-					emoji: true,
-					onCancel: () => setOpen(false),
-					onChange: (collection, icon, color) => {
-						onChange(color.toLowerCase() === "currentcolor" ? `:${collection}:${icon}:` : `:${collection}:${icon}:${color}:`);
-						setOpen(false);
-					}
-				})
-			})]
-		})
-	});
-}
 //#endregion
 //#region src/workbench/browser/runtime/editor/nodeHeading.tsx
 function NodeHeading({ title, icon, fallback, disabled, titleReadOnly = false, validate, onRename, onIconChange }) {
@@ -5919,7 +3762,7 @@ function FlowStateButton({ client, flowId, nodes, history, notify, onClose }) {
 				children: [/* @__PURE__ */ jsx("i", {
 					"aria-hidden": "true",
 					className: "i-lucide-light:database"
-				}), t(space == null ? "flowState.title" : "flowState.history")]
+				}), t(space == null ? "flowState.title" : "flowState.usage")]
 			}), /* @__PURE__ */ jsxs(DialogContent, {
 				ref: dialogRoot,
 				container,
@@ -5928,7 +3771,7 @@ function FlowStateButton({ client, flowId, nodes, history, notify, onClose }) {
 				children: [
 					/* @__PURE__ */ jsx(DialogTitle, {
 						className: "break-words pr-8",
-						children: space == null ? t("flowState.title") : t("flowState.sourceHistory", { name: sourceName(space, nodes, t) })
+						children: space == null ? t("flowState.title") : t("flowState.sourceUsage", { name: sourceName(space, nodes, t) })
 					}),
 					/* @__PURE__ */ jsxs(Tabs, {
 						value: scope,
@@ -6130,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]: "" };
@@ -6284,7 +4127,7 @@ var SwitchRoot = /*#__PURE__*/ React.forwardRef(function SwitchRoot(componentPro
 			elementProps,
 			getButtonProps
 		],
-		stateAttributesMapping
+		stateAttributesMapping: stateAttributesMapping$1
 	});
 	return /*#__PURE__*/ jsxs(SwitchRootContext.Provider, {
 		value: state,
@@ -6323,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
 	});
 });
@@ -35952,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();
@@ -36127,7 +34507,7 @@ function WorkspaceDiagnosticsIsland({ checking, items, nodes, onOpenChange, onRe
 }
 //#endregion
 //#region src/workbench/browser/runtime/shell/workspaceNavigationIsland.tsx
-function WorkspaceNavigationIsland({ flowName, settings, flowsHref, ghost = false, onOpenFlows, saveStatus }) {
+function WorkspaceNavigationIsland({ flowName, flowIcon, flowDescription, settings, flowsHref, ghost = false, onOpenFlows, saveStatus }) {
 	const t = useTranslate();
 	const [tooltipContainer, setTooltipContainer] = useState(null);
 	const draftStatus = saveStatus == "saved" || saveStatus == "saving" || saveStatus == "failed" ? saveStatus : void 0;
@@ -36156,10 +34536,25 @@ function WorkspaceNavigationIsland({ flowName, settings, flowsHref, ghost = fals
 							children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left" })
 						})
 					}),
+					flowIcon && /* @__PURE__ */ jsx(ContentIcon, {
+						src: flowIcon,
+						className: "size-4 shrink-0",
+						fallback: /* @__PURE__ */ jsx("i", {
+							"aria-hidden": "true",
+							className: "i-lucide-light:workflow size-4 shrink-0"
+						})
+					}),
 					/* @__PURE__ */ jsx(CanvasTooltip, {
 						getPopupContainer: () => tooltipContainer ?? document.body,
 						placement: "bottom",
-						title: flowName,
+						title: flowDescription ? /* @__PURE__ */ jsxs("span", {
+							className: "whitespace-pre-wrap",
+							children: [
+								flowName,
+								"\n",
+								flowDescription
+							]
+						}) : flowName,
 						children: /* @__PURE__ */ jsx("span", {
 							className: "workspace-flow-name",
 							tabIndex: 0,
@@ -36186,33 +34581,18 @@ 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, 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");
@@ -36228,69 +34608,72 @@ 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("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")
 					})]
 				})]
-			}),
-			/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(CanvasTooltip, {
+			})]
+		}), /* @__PURE__ */ jsxs(DropdownMenu, {
+			onOpenChangeComplete: (open) => {
+				exportAction.onOpenChangeComplete(open);
+				pngAction.onOpenChangeComplete(open);
+			},
+			children: [/* @__PURE__ */ jsx(CanvasTooltip, {
 				getPopupContainer: () => popupContainer ?? document.body,
 				placement: "bottom",
 				title: menuLabel,
@@ -36314,47 +34697,16 @@ function WorkspacePublishIsland({ hasPublications, onOpenPublications, onExport,
 					onExport != null && /* @__PURE__ */ jsx(WorkflowExportMenuItem, {
 						className: "gap-2 px-2 py-[5px]",
 						disabled: state == "busy" || state == "publishing",
-						onClick: onExport
+						onClick: exportAction.onClick
 					}),
-					onExportPng != null && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, {
+					onOpenPngExport != null && /* @__PURE__ */ jsxs(DropdownMenuItem, {
 						className: "gap-2 px-2 py-[5px]",
-						disabled: exporting,
+						onClick: pngAction.onClick,
 						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,
@@ -36384,24 +34736,8 @@ function WorkspacePublishIsland({ hasPublications, onOpenPublications, onExport,
 						}), runsLabel]
 					})
 				]
-			})] }),
-			/* @__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, {
-							"aria-hidden": "true",
-							className: "shrink-0"
-						}), /* @__PURE__ */ jsx(DialogTitle, { children: t("resource.exportPngPending") })]
-					}), /* @__PURE__ */ jsx(DialogDescription, { children: t("resource.exportPngPendingDescription") })]
-				})
-			})
-		]
+			})]
+		})]
 	});
 }
 //#endregion
@@ -36607,14 +34943,16 @@ 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();
 	const connections = useVal(store.connectors.$.pickerConnections);
 	const triggerCatalogState = useVal(store.triggers.catalog.state);
 	const [startId, setStartId] = useState();
-	const [stateTarget, setStateTarget] = 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);
@@ -36639,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,
@@ -36697,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]);
@@ -36757,269 +35108,266 @@ function FlowEditor({ navigationIsland, onRun, onRunStarted, onCloseRuns, onConf
 		onRedo: () => void store.workspace.redo(),
 		onRetry: () => void store.workspace.retryHistorySync()
 	};
-	return /* @__PURE__ */ jsx(NodeHistoryContext.Provider, {
-		value: (nodeId) => {
-			const node = revision?.graph().nodes[nodeId];
-			if (flowId == null || node?.kind !== "task" || !("executor" in node.task) || node.task.executor.kind !== "skip-duplicates") return void 0;
-			return {
-				label: t("flowState.history"),
-				onClick: () => setStateTarget({ history: { nodeId } })
-			};
-		},
-		children: /* @__PURE__ */ jsxs(CanvasHistoryScope, {
-			history: historyControls,
-			disabled: authoringDisabled,
-			"aria-label": t("workspace.design"),
-			className: `editor-grid ${contextPanelVisible ? "" : "context-panel-closed"}`,
-			id: "workspace-panel-design",
-			role: "region",
-			tabIndex: 0,
-			children: [
-				flowId != null && stateTarget != null && /* @__PURE__ */ jsx(FlowStateButton, {
-					client: store.state,
-					flowId,
-					nodes: designer.nodes,
-					notify: store.workspace.notify,
-					history: stateTarget.history,
-					onClose: () => setStateTarget(void 0)
-				}, `${flowId}:${stateTarget.history?.nodeId ?? "all"}`),
-				/* @__PURE__ */ jsx(WorkbenchCanvas, {
-					interactiveMode$: store.interactiveMode$,
-					connectionControl: /* @__PURE__ */ jsx(ConnectionUsageButton, {
-						connectionHref,
-						onManage: onManageConnectorAccess,
-						onSelectReference: setAccountReference,
-						store
-					}, flowId),
-					topLeftTools: navigationIsland,
-					bottomRightTools: /* @__PURE__ */ jsx(RunStatusIslandContainer, {
-						onToggle: onToggleRuns,
-						open: runDrawerOpen,
-						panelId: RUN_LOG_PANEL_ID,
-						store
-					}),
-					cornerLeading: /* @__PURE__ */ jsxs("div", {
-						className: "workspace-corner-leading",
-						children: [diagnostics?.valid == false && diagnosticItems.length > 0 && /* @__PURE__ */ jsx(WorkspaceDiagnosticsIsland, {
-							checking: checkLoading,
-							items: diagnosticItems,
-							nodes: designerNodes,
-							onOpenChange: (open) => {
-								if (open) store.runRequests.dismissInputs();
-								setDiagnosticsOpen(open);
-							},
-							onRefresh: () => void store.workspace.check(),
-							onSelect: (item) => {
-								if (store.workspace.locateDiagnostic(item)) setDiagnosticsOpen(false);
-							},
-							onSelectNode: (nodeId) => {
-								if (store.workspace.locateNode(nodeId)) {
-									openInspector();
-									setDiagnosticsOpen(false);
-								}
-							},
-							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,
-							onExport: () => {
-								const id = store.workspace.$.flowId.value;
-								if (id != null) store.workspace.exportFlow(id);
-							},
-							hasPublications: live == null ? void 0 : live.publication != null,
-							onOpenPublications,
-							onOpenRuns,
-							onOpenState: flowId == null ? void 0 : () => setStateTarget({}),
-							onPublish: () => void store.publications.publish(),
-							state: publishState
-						})]
-					}),
-					history: historyControls,
-					ignoredNodeIds,
-					onIgnoreNodes,
-					runControl: draft != null && selectedTrigger != null ? /* @__PURE__ */ jsx(RunControl, {
-						disabled: busy != null && busy != "run" && busy != "designer",
-						inputContent: /* @__PURE__ */ jsx(RunInputPanel, {
-							onStarted: onRunStarted,
-							store: store.runRequests,
-							theme
-						}),
-						inputOpen: runInputRequest?.triggerId == selectedTrigger.id,
-						inputStatus: store.runRequests.inputStatus(draft.flowId, draft, selectedTrigger.id),
-						onInputOpenChange: (open) => {
-							if (open) store.editDraftRunInputs(selectedTrigger.id);
-							else store.runRequests.dismissInputs();
-						},
-						onRun: () => onRun(selectedTrigger.id),
-						onSelectTrigger: (triggerId) => {
-							store.runRequests.dismissInputs();
-							setStartId(triggerId);
-						},
-						selectedTriggerId: selectedTrigger.id,
-						starting: busy == "run",
-						triggers
-					}) : void 0,
-					addNodeControl: /* @__PURE__ */ jsx(NodePickerPopover, {
-						options: addNodeOptions,
-						connections,
-						loadConnections: store.connectors.loadConnections,
-						browseOptions: store.browseAddNodeOptions,
-						searchOptions: store.provideAddNodeOptions,
-						provideChoices: store.provideAddNodeOptionChoices,
-						catalogFailed: triggerCatalogState.error != null,
-						refreshCatalog: store.retryCatalog,
-						initialTab: initialAddNodeTab,
-						disabled: authoringDisabled,
-						focusRequest: 0,
-						onAdd: addFromPicker,
-						onRegisterDragOption: (option) => designerRef.current?.registerDraggedNode(option),
-						onDragEnd: () => designerRef.current?.clearDraggedNode()
-					}, flowId ?? ""),
-					nodePicker: {
-						connections,
-						loadConnections: store.connectors.loadConnections,
-						browseOptions: store.browseAddNodeOptions,
-						provideChoices: store.provideAddNodeOptionChoices,
-						catalogFailed: triggerCatalogState.error != null,
-						refreshCatalog: store.retryCatalog,
-						initialTab: initialAddNodeTab
-					},
-					addNodeOptions,
-					disabled: authoringDisabled,
-					subscribeCanvasCommands: store.workspace.subscribeCanvasCommands,
-					focusNodeRequest: diagnosticFocus ?? nodeFocus,
-					inspectorOpen: contextPanelVisible,
-					model: designer,
-					annotationContext: canvasAnnotations(flowId, draft, workspaceStatus, moduleEditor?.status, history.failed),
-					onAddNode: async (option, position, connection) => {
-						const nodeId = await store.addNode(option, position, connection);
-						if (nodeId != null && flowId != null && store.workspace.$.flowId.value == flowId) {
-							setAddedNode({
-								flowId,
-								nodeId
-							});
-							if (panel.open) panel.activate([nodeId]);
-						}
-						return nodeId;
-					},
-					onConnect: (edge) => void store.workspace.connect(edge),
-					onChangeNodeContentHidden: (nodeId, hidden) => void store.workspace.saveNodeContentHidden(nodeId, hidden),
-					onChangeNodeWidth: (nodeId, width, position) => store.workspace.saveNodeWidth(nodeId, width, position),
-					onChangeComment: (nodeId, value) => void store.workspace.saveComment(nodeId, value),
-					onCopy: () => store.workspace.copySelectedNodes(),
-					onDeleteEdge: (edge) => void store.workspace.disconnect(edge),
-					onDeleteNodes: () => void store.workspace.deleteSelectedNodes(),
-					onDuplicate: (positions, offset) => void store.workspace.duplicateSelectedNodes(positions, offset),
-					onMoveNodes: (positions) => void store.workspace.moveNodes(positions),
-					onChangeDirection: (direction, positions) => store.changeDirection(direction, positions),
-					onMoveViewport: (viewport) => void store.workspace.moveViewport(viewport),
-					onPaste: () => void store.workspace.pasteNodes(),
-					provideAddNodeOptions: store.provideAddNodeOptions,
-					onSelectNodes: panel.select,
-					onActivateSelection: panel.activate,
-					onSelectionStart: panel.startSelection,
-					onSelectionEnd: panel.endSelection,
-					onToggleInspector: toggleInspector,
-					ref: designerRef,
-					selectedNodeIds: panel.canvasSelection,
-					theme
+	return /* @__PURE__ */ jsxs(CanvasHistoryScope, {
+		history: historyControls,
+		disabled: authoringDisabled,
+		"aria-label": t("workspace.design"),
+		className: `editor-grid ${contextPanelVisible ? "" : "context-panel-closed"}`,
+		id: "workspace-panel-design",
+		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,
+				nodes: designer.nodes,
+				notify: store.workspace.notify,
+				onClose: () => setStateOpen(false)
+			}, flowId),
+			/* @__PURE__ */ jsx(WorkbenchCanvas, {
+				interactiveMode$: store.interactiveMode$,
+				connectionControl: /* @__PURE__ */ jsx(ConnectionUsageButton, {
+					connectionHref,
+					onManage: onManageConnectorAccess,
+					onSelectReference: setAccountReference,
+					store
+				}, flowId),
+				topLeftTools: navigationIsland,
+				bottomRightTools: /* @__PURE__ */ jsx(RunStatusIslandContainer, {
+					onToggle: onToggleRuns,
+					open: runDrawerOpen,
+					panelId: RUN_LOG_PANEL_ID,
+					store
 				}),
-				contextPanelVisible && /* @__PURE__ */ jsxs(EditorContextPanel, {
-					resizable: true,
-					onBack: !flowSelected ? () => {
-						panel.back();
-						designerRef.current?.focusCanvas();
-					} : void 0,
-					nodeId: singleSelected ? selectedDesignerNode?.id : void 0,
-					nodeHeading: singleSelected && selection != null ? {
-						titleReadOnly: selection.kind === "trigger" && (selection.trigger.kind === "manual" || selection.trigger.kind === "start"),
-						title: selection.node.name ?? selectedDesignerNode?.title ?? "",
-						icon: selectedDesignerNode != null && "icon" in selectedDesignerNode ? selectedDesignerNode.icon : void 0,
-						disabled: authoringDisabled,
-						fallback: /* @__PURE__ */ jsx(Icon, { name: inspectorIcon(selection) }),
-						onRename: (name) => {
-							store.workspace.nodes.saveNodeTitle(selection.id, name);
+				cornerLeading: /* @__PURE__ */ jsxs("div", {
+					className: "workspace-corner-leading",
+					children: [diagnostics?.valid == false && diagnosticItems.length > 0 && /* @__PURE__ */ jsx(WorkspaceDiagnosticsIsland, {
+						checking: checkLoading,
+						items: diagnosticItems,
+						nodes: designerNodes,
+						onOpenChange: (open) => {
+							if (open) store.runRequests.dismissInputs();
+							setDiagnosticsOpen(open);
 						},
-						onIconChange: (icon) => {
-							store.workspace.nodes.saveNodeIcon(selection.id, icon);
+						onRefresh: () => void store.workspace.check(),
+						onSelect: (item) => {
+							if (store.workspace.locateDiagnostic(item)) setDiagnosticsOpen(false);
 						},
-						validate: (name) => {
-							if (revision == null) return;
-							const graph = revision.graph();
-							if (graph == null) return;
-							const issue = nodeNameIssue(graph, selection.id, name);
-							return issue == null ? void 0 : t(`inspector.node.${issue === "empty" ? "nameEmpty" : "nameDuplicate"}`);
-						}
-					} : singleSelected && selectedDesignerNode?.kind === "comment" ? {
-						title: selectedDesignerNode.title,
-						disabled: authoringDisabled,
-						fallback: /* @__PURE__ */ jsx("i", {
-							"aria-hidden": "true",
-							className: "i-codicon:note"
-						}),
-						validate: () => void 0,
-						onRename: (title) => {
-							store.workspace.saveComment(selectedDesignerNode.id, {
-								title,
-								content: selectedDesignerNode.content ?? ""
-							});
-						}
-					} : void 0,
-					focusOnOpen: focusInspectorOnOpen.current,
-					icon: contextPanelIcon,
-					onClose: () => closeContextPanel(opener.current),
-					theme,
-					title: contextPanelTitle,
-					children: [/* @__PURE__ */ jsx("div", {
-						hidden: !flowSelected,
-						className: flowSelected ? "flex h-full min-h-0 flex-col" : "hidden",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "min-h-0 flex-1",
-							children: /* @__PURE__ */ jsx(FlowNodeList, {
-								groupTriggers: true,
-								nodes: designer.nodes,
-								onFocusNode: focusNode,
-								onSelect: selectOutlineNode
-							}, flowId ?? "")
-						})
-					}), multipleSelected ? /* @__PURE__ */ jsx(FlowNodeList, {
-						nodes: designer.nodes.filter((node) => selectedNodeIds.includes(node.id)),
-						onSelect: selectOutlineNode,
-						onFocusNode: focusNode
-					}) : flowSelected ? null : selectedDesignerNode?.kind == "comment" ? /* @__PURE__ */ jsx(CommentInspector, {
-						title: selectedDesignerNode.title,
-						content: selectedDesignerNode.content ?? "",
-						disabled: authoringDisabled,
-						dark: theme == "dark",
-						onSave: (comment) => void store.workspace.saveComment(selectedDesignerNode.id, comment)
-					}, selectedDesignerNode.id) : revision != null && /* @__PURE__ */ jsx(NodeInspectorContainer, {
-						onAddWorkflowOutputs: () => {
-							const option = store.workspace.$.addNodeOptions.value.find((item) => item.kind === "outputs");
-							if (option != null) addFromPicker(option);
+						onSelectNode: (nodeId) => {
+							if (store.workspace.locateNode(nodeId)) {
+								openInspector();
+								setDiagnosticsOpen(false);
+							}
 						},
-						store,
-						focus: diagnosticFocus,
-						disabled: authoringDisabled,
-						revision,
-						selection,
-						theme
+						open: diagnosticsOpen
+					}), /* @__PURE__ */ jsx(WorkspacePublishIsland, {
+						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);
+						},
+						hasPublications: live == null ? void 0 : live.publication != null,
+						onOpenPublications,
+						onOpenRuns,
+						onOpenState: flowId == null ? void 0 : () => setStateOpen(true),
+						onPublish: () => void store.publications.publish(),
+						state: publishState
 					})]
 				}),
-				/* @__PURE__ */ jsx(RunDrawerContainer, {
-					onOpenRuns,
-					onClose: onCloseRuns,
-					onConfigureConnector,
-					open: runDrawerOpen,
-					store
-				})
-			]
-		})
+				history: historyControls,
+				ignoredNodeIds,
+				onIgnoreNodes,
+				runControl: draft != null && selectedTrigger != null ? /* @__PURE__ */ jsx(RunControl, {
+					disabled: busy != null && busy != "run" && busy != "designer",
+					inputContent: /* @__PURE__ */ jsx(RunInputPanel, {
+						onStarted: onRunStarted,
+						store: store.runRequests,
+						theme
+					}),
+					inputOpen: runInputRequest?.triggerId == selectedTrigger.id,
+					inputStatus: store.runRequests.inputStatus(draft.flowId, draft, selectedTrigger.id),
+					onInputOpenChange: (open) => {
+						if (open) store.editDraftRunInputs(selectedTrigger.id);
+						else store.runRequests.dismissInputs();
+					},
+					onRun: () => onRun(selectedTrigger.id),
+					onSelectTrigger: (triggerId) => {
+						store.runRequests.dismissInputs();
+						setStartId(triggerId);
+					},
+					selectedTriggerId: selectedTrigger.id,
+					starting: busy == "run",
+					triggers
+				}) : void 0,
+				addNodeControl: /* @__PURE__ */ jsx(NodePickerPopover, {
+					options: addNodeOptions,
+					connections,
+					loadConnections: store.connectors.loadConnections,
+					browseOptions: store.browseAddNodeOptions,
+					searchOptions: store.provideAddNodeOptions,
+					provideChoices: store.provideAddNodeOptionChoices,
+					catalogFailed: triggerCatalogState.error != null,
+					refreshCatalog: store.retryCatalog,
+					initialTab: initialAddNodeTab,
+					disabled: authoringDisabled,
+					focusRequest: 0,
+					onAdd: addFromPicker,
+					onRegisterDragOption: (option) => designerRef.current?.registerDraggedNode(option),
+					onDragEnd: () => designerRef.current?.clearDraggedNode()
+				}, flowId ?? ""),
+				nodePicker: {
+					connections,
+					loadConnections: store.connectors.loadConnections,
+					browseOptions: store.browseAddNodeOptions,
+					provideChoices: store.provideAddNodeOptionChoices,
+					catalogFailed: triggerCatalogState.error != null,
+					refreshCatalog: store.retryCatalog,
+					initialTab: initialAddNodeTab
+				},
+				addNodeOptions,
+				disabled: authoringDisabled,
+				subscribeCanvasCommands: store.workspace.subscribeCanvasCommands,
+				focusNodeRequest: diagnosticFocus ?? nodeFocus,
+				inspectorOpen: contextPanelVisible,
+				model: designer,
+				annotationContext: canvasAnnotations(flowId, draft, workspaceStatus, moduleEditor?.status, history.failed),
+				onAddNode: async (option, position, connection) => {
+					const nodeId = await store.addNode(option, position, connection);
+					if (nodeId != null && flowId != null && store.workspace.$.flowId.value == flowId) {
+						setAddedNode({
+							flowId,
+							nodeId
+						});
+						if (panel.open) panel.activate([nodeId]);
+					}
+					return nodeId;
+				},
+				onConnect: (edge) => void store.workspace.connect(edge),
+				onChangeNodeContentHidden: (nodeId, hidden) => void store.workspace.saveNodeContentHidden(nodeId, hidden),
+				onChangeNodeWidth: (nodeId, width, position) => store.workspace.saveNodeWidth(nodeId, width, position),
+				onChangeComment: (nodeId, value) => void store.workspace.saveComment(nodeId, value),
+				onCopy: () => store.workspace.copySelectedNodes(),
+				onDeleteEdge: (edge) => void store.workspace.disconnect(edge),
+				onDeleteNodes: () => void store.workspace.deleteSelectedNodes(),
+				onDuplicate: (positions, offset) => void store.workspace.duplicateSelectedNodes(positions, offset),
+				onMoveNodes: (positions) => void store.workspace.moveNodes(positions),
+				onChangeDirection: (direction, positions) => store.changeDirection(direction, positions),
+				onMoveViewport: (viewport) => void store.workspace.moveViewport(viewport),
+				onPaste: () => void store.workspace.pasteNodes(),
+				provideAddNodeOptions: store.provideAddNodeOptions,
+				onSelectNodes: panel.select,
+				onActivateSelection: panel.activate,
+				onSelectionStart: panel.startSelection,
+				onSelectionEnd: panel.endSelection,
+				onToggleInspector: toggleInspector,
+				ref: designerRef,
+				selectedNodeIds: panel.canvasSelection,
+				theme
+			}),
+			contextPanelVisible && /* @__PURE__ */ jsxs(EditorContextPanel, {
+				resizable: true,
+				onBack: !flowSelected ? () => {
+					panel.back();
+					designerRef.current?.focusCanvas();
+				} : void 0,
+				nodeId: singleSelected ? selectedDesignerNode?.id : void 0,
+				nodeHeading: singleSelected && selection != null ? {
+					titleReadOnly: selection.kind === "trigger" && (selection.trigger.kind === "manual" || selection.trigger.kind === "start"),
+					title: selection.node.name ?? selectedDesignerNode?.title ?? "",
+					icon: selectedDesignerNode != null && "icon" in selectedDesignerNode ? selectedDesignerNode.icon : void 0,
+					disabled: authoringDisabled,
+					fallback: /* @__PURE__ */ jsx(Icon, { name: inspectorIcon(selection) }),
+					onRename: (name) => {
+						store.workspace.nodes.saveNodeTitle(selection.id, name);
+					},
+					onIconChange: (icon) => {
+						store.workspace.nodes.saveNodeIcon(selection.id, icon);
+					},
+					validate: (name) => {
+						if (revision == null) return;
+						const graph = revision.graph();
+						if (graph == null) return;
+						const issue = nodeNameIssue(graph, selection.id, name);
+						return issue == null ? void 0 : t(`inspector.node.${issue === "empty" ? "nameEmpty" : "nameDuplicate"}`);
+					}
+				} : singleSelected && selectedDesignerNode?.kind === "comment" ? {
+					title: selectedDesignerNode.title,
+					disabled: authoringDisabled,
+					fallback: /* @__PURE__ */ jsx("i", {
+						"aria-hidden": "true",
+						className: "i-codicon:note"
+					}),
+					validate: () => void 0,
+					onRename: (title) => {
+						store.workspace.saveComment(selectedDesignerNode.id, {
+							title,
+							content: selectedDesignerNode.content ?? ""
+						});
+					}
+				} : void 0,
+				focusOnOpen: focusInspectorOnOpen.current,
+				icon: contextPanelIcon,
+				onClose: () => closeContextPanel(opener.current),
+				theme,
+				title: contextPanelTitle,
+				children: [/* @__PURE__ */ jsx("div", {
+					hidden: !flowSelected,
+					className: flowSelected ? "flex h-full min-h-0 flex-col" : "hidden",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "min-h-0 flex-1",
+						children: /* @__PURE__ */ jsx(FlowNodeList, {
+							groupTriggers: true,
+							nodes: designer.nodes,
+							onFocusNode: focusNode,
+							onSelect: selectOutlineNode
+						}, flowId ?? "")
+					})
+				}), multipleSelected ? /* @__PURE__ */ jsx(FlowNodeList, {
+					nodes: designer.nodes.filter((node) => selectedNodeIds.includes(node.id)),
+					onSelect: selectOutlineNode,
+					onFocusNode: focusNode
+				}) : flowSelected ? null : selectedDesignerNode?.kind == "comment" ? /* @__PURE__ */ jsx(CommentInspector, {
+					title: selectedDesignerNode.title,
+					content: selectedDesignerNode.content ?? "",
+					disabled: authoringDisabled,
+					dark: theme == "dark",
+					onSave: (comment) => void store.workspace.saveComment(selectedDesignerNode.id, comment)
+				}, selectedDesignerNode.id) : revision != null && /* @__PURE__ */ jsx(NodeInspectorContainer, {
+					onAddWorkflowOutputs: () => {
+						const option = store.workspace.$.addNodeOptions.value.find((item) => item.kind === "outputs");
+						if (option != null) addFromPicker(option);
+					},
+					store,
+					focus: diagnosticFocus,
+					disabled: authoringDisabled,
+					revision,
+					selection,
+					theme
+				})]
+			}),
+			/* @__PURE__ */ jsx(RunDrawerContainer, {
+				onOpenRuns,
+				onClose: onCloseRuns,
+				onConfigureConnector,
+				open: runDrawerOpen,
+				store
+			})
+		]
 	});
 }
 function FlowWorkspace({ hrefFor, navigation, onConfigureConnector, onManageConnectorAccess, connectionHref, store, theme }) {
+	const [transferContainer, setTransferContainer] = useState(null);
 	const t = useTranslate();
 	const [runDrawerOpen, setRunDrawerOpen] = useState(() => readRunDrawerOpen(store.preferences) ?? false);
 	const runDrawerPreference = useRef(readRunDrawerOpen(store.preferences));
@@ -37102,6 +35450,8 @@ function FlowWorkspace({ hrefFor, navigation, onConfigureConnector, onManageConn
 			onSelectFlow: (target) => void navigation.selectFlow(target)
 		}, flow.flowId),
 		flowName: flow?.name ?? flow?.flowId ?? "",
+		flowIcon: flow?.icon,
+		flowDescription: flow?.description,
 		flowsHref: hrefFor({ view: "design" }),
 		onOpenFlows: () => void navigation.openFlows()
 	});
@@ -37109,64 +35459,73 @@ function FlowWorkspace({ hrefFor, navigation, onConfigureConnector, onManageConn
 		value: hrefFor,
 		children: /* @__PURE__ */ jsxs("main", {
 			className: "workspace",
-			children: [view == "design" && !canvasReady && /* @__PURE__ */ jsx("div", {
-				className: "workspace-navigation-placement",
-				children: navigationIsland
-			}), view == "design" && !canvasReady ? /* @__PURE__ */ jsx("div", {
-				"aria-label": t("workspace.design"),
-				className: "editor-grid context-panel-closed",
-				id: "workspace-panel-design",
-				role: "region",
-				tabIndex: 0,
-				children: /* @__PURE__ */ jsx("section", {
-					"aria-busy": !workspaceLoadFailed,
-					className: "canvas-panel workbench-canvas",
-					children: workspaceLoadFailed ? /* @__PURE__ */ jsx(WorkspaceRecovery, {
-						kind: workspaceLoadProblem?.kind ?? "failed",
-						message: workspaceLoadProblem?.message,
-						repairing: workspaceRepairing,
-						onRepair: () => void store.workspace.repairWorkspace(),
-						onRetry: () => flowId != null && void store.selectFlow(flowId)
-					}) : /* @__PURE__ */ jsx(Empty, {
-						className: "h-full",
-						children: /* @__PURE__ */ jsx(EmptyHeader, { children: /* @__PURE__ */ jsx(EmptyTitle, { children: t("workspace.status.loading") }) })
+			ref: setTransferContainer,
+			children: [
+				/* @__PURE__ */ jsx(WorkflowExportDialog, {
+					workspace: store.workspace,
+					container: transferContainer
+				}),
+				view == "design" && !canvasReady && /* @__PURE__ */ jsx("div", {
+					className: "workspace-navigation-placement",
+					children: navigationIsland
+				}),
+				view == "design" && !canvasReady ? /* @__PURE__ */ jsx("div", {
+					"aria-label": t("workspace.design"),
+					className: "editor-grid context-panel-closed",
+					id: "workspace-panel-design",
+					role: "region",
+					tabIndex: 0,
+					children: /* @__PURE__ */ jsx("section", {
+						"aria-busy": !workspaceLoadFailed,
+						className: "canvas-panel workbench-canvas",
+						children: workspaceLoadFailed ? /* @__PURE__ */ jsx(WorkspaceRecovery, {
+							kind: workspaceLoadProblem?.kind ?? "failed",
+							message: workspaceLoadProblem?.message,
+							repairing: workspaceRepairing,
+							onRepair: () => void store.workspace.repairWorkspace(),
+							onRetry: () => flowId != null && void store.selectFlow(flowId)
+						}) : /* @__PURE__ */ jsx(Empty, {
+							className: "h-full",
+							children: /* @__PURE__ */ jsx(EmptyHeader, { children: /* @__PURE__ */ jsx(EmptyTitle, { children: t("workspace.status.loading") }) })
+						})
 					})
-				})
-			}) : view == "design" ? /* @__PURE__ */ jsx(FlowEditor, {
-				navigationIsland,
-				onRun: (triggerId) => void run(triggerId),
-				onRunStarted: revealRun,
-				onCloseRuns: () => changeRunDrawerOpen(false),
-				onConfigureConnector,
-				onOpenPublications: () => {
-					store.runRequests.dismissInputs();
-					navigation.open("publications");
-				},
-				onOpenRuns: () => {
-					store.runRequests.dismissInputs();
-					navigation.open("runs");
-				},
-				onManageConnectorAccess,
-				connectionHref,
-				onToggleRuns: () => changeRunDrawerOpen(!runDrawerOpen),
-				runDrawerOpen,
-				store,
-				theme
-			}) : view == "runs" ? /* @__PURE__ */ jsx(RunsView, {
-				onSourceChange: (source) => navigation.open("runs", source),
-				flowName: flow?.name ?? flow?.flowId ?? "",
-				onClose: () => navigation.open("design"),
-				onConfigureConnector,
-				onLocateEvent: locateRunEvent,
-				onLocateWait: (nodeId) => {
-					if (store.locateRunWait(nodeId)) navigation.open("design");
-				},
-				store
-			}) : /* @__PURE__ */ jsx(PublicationsView, {
-				theme,
-				onClose: () => navigation.open("design"),
-				store
-			}, flowId)]
+				}) : view == "design" ? /* @__PURE__ */ jsx(FlowEditor, {
+					portalRoot: transferContainer,
+					navigationIsland,
+					onRun: (triggerId) => void run(triggerId),
+					onRunStarted: revealRun,
+					onCloseRuns: () => changeRunDrawerOpen(false),
+					onConfigureConnector,
+					onOpenPublications: () => {
+						store.runRequests.dismissInputs();
+						navigation.open("publications");
+					},
+					onOpenRuns: () => {
+						store.runRequests.dismissInputs();
+						navigation.open("runs");
+					},
+					onManageConnectorAccess,
+					connectionHref,
+					onToggleRuns: () => changeRunDrawerOpen(!runDrawerOpen),
+					runDrawerOpen,
+					store,
+					theme
+				}) : view == "runs" ? /* @__PURE__ */ jsx(RunsView, {
+					onSourceChange: (source) => navigation.open("runs", source),
+					flowName: flow?.name ?? flow?.flowId ?? "",
+					onClose: () => navigation.open("design"),
+					onConfigureConnector,
+					onLocateEvent: locateRunEvent,
+					onLocateWait: (nodeId) => {
+						if (store.locateRunWait(nodeId)) navigation.open("design");
+					},
+					store
+				}) : /* @__PURE__ */ jsx(PublicationsView, {
+					theme,
+					onClose: () => navigation.open("design"),
+					store
+				}, flowId)
+			]
 		})
 	}) });
 }