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

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

@@ -3188,7 +3188,7 @@ var CanvasStore = class {
 			if (this.$.editable.value) this.#callbacks.onIgnoreNodes?.(nodeIds, ignored);
 		};
 		this.changeDirection = (direction) => {
-			if (!this.$.editable.value || !this.canChangeDirection || this.$.changingDirection.value || this.$.direction.value === direction) return;
+			if (!this.canChangeDirection || this.$.changingDirection.value || this.$.direction.value === direction) return;
 			this.layoutComplete = false;
 			this.layoutMeasurementAttempts = 0;
 			this.$$.changingDirection.set(true);
@@ -18784,31 +18784,31 @@ function IconStack({ icons, count, limit = 3, size = "default", countClassName }
 	});
 }
 var CanvasCard_module_default = {
-	card: "CanvasCard_card_5d8a7",
-	value: "CanvasCard_value_5d8a7",
-	preview: "CanvasCard_preview_5d8a7",
-	comment: "CanvasCard_comment_5d8a7",
-	selected: "CanvasCard_selected_5d8a7",
-	problem: "CanvasCard_problem_5d8a7",
-	runningBeam: "CanvasCard_runningBeam_5d8a7",
-	"running-beam": "CanvasCard_running-beam_5d8a7",
-	header: "CanvasCard_header_5d8a7",
-	icon: "CanvasCard_icon_5d8a7",
-	identity: "CanvasCard_identity_5d8a7",
-	indicator: "CanvasCard_indicator_5d8a7",
-	warning: "CanvasCard_warning_5d8a7",
-	danger: "CanvasCard_danger_5d8a7",
-	content: "CanvasCard_content_5d8a7",
-	branches: "CanvasCard_branches_5d8a7",
-	collapse: "CanvasCard_collapse_5d8a7",
-	collapseInner: "CanvasCard_collapseInner_5d8a7",
-	compactIdentity: "CanvasCard_compactIdentity_5d8a7",
-	compact: "CanvasCard_compact_5d8a7",
-	withBody: "CanvasCard_withBody_5d8a7",
-	compactContent: "CanvasCard_compactContent_5d8a7",
-	singleContent: "CanvasCard_singleContent_5d8a7",
-	subtitle: "CanvasCard_subtitle_5d8a7",
-	fill: "CanvasCard_fill_5d8a7"
+	card: "CanvasCard_card_e92f9",
+	value: "CanvasCard_value_e92f9",
+	preview: "CanvasCard_preview_e92f9",
+	comment: "CanvasCard_comment_e92f9",
+	selected: "CanvasCard_selected_e92f9",
+	problem: "CanvasCard_problem_e92f9",
+	runningBeam: "CanvasCard_runningBeam_e92f9",
+	"running-beam": "CanvasCard_running-beam_e92f9",
+	header: "CanvasCard_header_e92f9",
+	icon: "CanvasCard_icon_e92f9",
+	identity: "CanvasCard_identity_e92f9",
+	indicator: "CanvasCard_indicator_e92f9",
+	warning: "CanvasCard_warning_e92f9",
+	danger: "CanvasCard_danger_e92f9",
+	content: "CanvasCard_content_e92f9",
+	branches: "CanvasCard_branches_e92f9",
+	collapse: "CanvasCard_collapse_e92f9",
+	collapseInner: "CanvasCard_collapseInner_e92f9",
+	compactIdentity: "CanvasCard_compactIdentity_e92f9",
+	compact: "CanvasCard_compact_e92f9",
+	withBody: "CanvasCard_withBody_e92f9",
+	compactContent: "CanvasCard_compactContent_e92f9",
+	singleContent: "CanvasCard_singleContent_e92f9",
+	subtitle: "CanvasCard_subtitle_e92f9",
+	fill: "CanvasCard_fill_e92f9"
 };
 //#endregion
 //#region src/ui/browser/hooks.ts
@@ -21375,6 +21375,7 @@ var NodeLayout = /* @__PURE__ */ memo(({ canvasStore, nodeStore, visible }) => {
 								modelNode?.kind === "trigger" && /* @__PURE__ */ jsx(Zap, {
 									"aria-hidden": "true",
 									className: NodeLayout_module_default.triggerIcon,
+									"data-canvas-bounds": true,
 									strokeWidth: 1.5
 								}),
 								/* @__PURE__ */ jsxs("div", {
@@ -21594,27 +21595,27 @@ var fitViewOptions = {
 	maxZoom: 1
 };
 var ReactFlowContainer_module_default = {
-	container: "ReactFlowContainer_container_40f4d",
-	flow: "ReactFlowContainer_flow_40f4d",
-	contextMenu: "ReactFlowContainer_contextMenu_40f4d",
-	movingLayout: "ReactFlowContainer_movingLayout_40f4d",
-	layoutPending: "ReactFlowContainer_layoutPending_40f4d",
-	dock: "ReactFlowContainer_dock_40f4d",
-	viewDock: "ReactFlowContainer_viewDock_40f4d",
-	expandedViewControls: "ReactFlowContainer_expandedViewControls_40f4d",
-	viewOptionButtons: "ReactFlowContainer_viewOptionButtons_40f4d",
-	compactViewControls: "ReactFlowContainer_compactViewControls_40f4d",
-	createDock: "ReactFlowContainer_createDock_40f4d",
-	zoomValue: "ReactFlowContainer_zoomValue_40f4d",
-	viewChoiceTrigger: "ReactFlowContainer_viewChoiceTrigger_40f4d",
-	viewChoicePanel: "ReactFlowContainer_viewChoicePanel_40f4d",
-	viewChoices: "ReactFlowContainer_viewChoices_40f4d",
-	viewChoice: "ReactFlowContainer_viewChoice_40f4d",
-	dockActions: "ReactFlowContainer_dockActions_40f4d",
-	miniMap: "ReactFlowContainer_miniMap_40f4d",
-	viewOptions: "ReactFlowContainer_viewOptions_40f4d",
-	viewOptionsClip: "ReactFlowContainer_viewOptionsClip_40f4d",
-	viewSeparator: "ReactFlowContainer_viewSeparator_40f4d"
+	container: "ReactFlowContainer_container_18f86",
+	flow: "ReactFlowContainer_flow_18f86",
+	contextMenu: "ReactFlowContainer_contextMenu_18f86",
+	movingLayout: "ReactFlowContainer_movingLayout_18f86",
+	layoutPending: "ReactFlowContainer_layoutPending_18f86",
+	dock: "ReactFlowContainer_dock_18f86",
+	viewDock: "ReactFlowContainer_viewDock_18f86",
+	expandedViewControls: "ReactFlowContainer_expandedViewControls_18f86",
+	viewOptionButtons: "ReactFlowContainer_viewOptionButtons_18f86",
+	compactViewControls: "ReactFlowContainer_compactViewControls_18f86",
+	createDock: "ReactFlowContainer_createDock_18f86",
+	zoomValue: "ReactFlowContainer_zoomValue_18f86",
+	viewChoiceTrigger: "ReactFlowContainer_viewChoiceTrigger_18f86",
+	viewChoicePanel: "ReactFlowContainer_viewChoicePanel_18f86",
+	viewChoices: "ReactFlowContainer_viewChoices_18f86",
+	viewChoice: "ReactFlowContainer_viewChoice_18f86",
+	dockActions: "ReactFlowContainer_dockActions_18f86",
+	miniMap: "ReactFlowContainer_miniMap_18f86",
+	viewOptions: "ReactFlowContainer_viewOptions_18f86",
+	viewOptionsClip: "ReactFlowContainer_viewOptionsClip_18f86",
+	viewSeparator: "ReactFlowContainer_viewSeparator_18f86"
 };
 //#endregion
 //#region src/canvas/browser/addItemDrag.ts
@@ -22491,14 +22492,13 @@ function CanvasOptionsMenu({ onRelayout, miniMapExpanded$, interactiveMode$, dir
 		interactiveMode$ != null && /* @__PURE__ */ jsx(CanvasInteractiveModeMenu, { interactiveMode$ })
 	] });
 }
-function CanvasViewControls({ readOnly = false, direction, changingDirection, onChangeDirection, interactiveMode$, miniMapExpanded$, maxZoomReached, minZoomReached, onFitView, onRelayout, onZoomIn, onZoomOut, onZoomReset, zoom }) {
+function CanvasViewControls({ direction, changingDirection, onChangeDirection, interactiveMode$, miniMapExpanded$, maxZoomReached, minZoomReached, onFitView, onRelayout, onZoomIn, onZoomOut, onZoomReset, zoom }) {
 	const t = useTranslate();
 	const [optionsExpanded, setOptionsExpanded] = useState(false);
 	const [popupContainer, setPopupContainer] = useState(null);
 	return /* @__PURE__ */ jsxs(Panel, {
 		position: "bottom-left",
 		className: cn$1("open-flow-control-island open-flow-control-island-compact", ReactFlowContainer_module_default.dock, ReactFlowContainer_module_default.viewDock),
-		"data-readonly": readOnly,
 		"data-canvas-control-scope": true,
 		"data-tooltip-toolbar": true,
 		ref: setPopupContainer,
@@ -23034,7 +23034,6 @@ var FlowControls = /*#__PURE__*/ memo((props) => {
 			variant: BackgroundVariant.Dots
 		}),
 		/* @__PURE__ */ jsx(CanvasViewControls, {
-			readOnly: !props.editable,
 			interactiveMode$: props.interactiveMode$,
 			direction: props.direction,
 			changingDirection: props.changingDirection,
@@ -23750,7 +23749,7 @@ var FlowCanvas = ({ flowCanvasStore, annotationContext, onActivateSelection, onS
 						editable,
 						direction,
 						changingDirection,
-						onChangeDirection: editable && flowCanvasStore.canChangeDirection ? flowCanvasStore.changeDirection : void 0,
+						onChangeDirection: flowCanvasStore.canChangeDirection ? flowCanvasStore.changeDirection : void 0,
 						nodesDraggable: nodesDraggable ?? editable,
 						className,
 						i18n: flowCanvasStore.i18n,

package/dist/browser/{createResourceDialog-DkovGogv.js → createResourceDialog-CS3u9ga9.js}

@@ -1,7 +1,7 @@
 import { l as useTranslate } from "./dist-BFmpkX4P.js";
 import { xr as Button } from "./tooltip-BDcVTNpu.js";
-import { a as DialogFooter, d as Field, f as FieldDescription, h as FieldLabel, i as DialogDescription, l as Icon, m as FieldGroup, n as DialogClose, o as DialogHeader, p as FieldError, r as DialogContent, rn as Input, s as DialogTitle, t as Dialog, u as Spinner } from "./dialog-CFFuRM8s.js";
-import { t as WorkbenchSelect } from "./workbenchSelect-CkOS95gX.js";
+import { a as DialogFooter, d as Field, f as FieldDescription, h as FieldLabel, i as DialogDescription, in as Input, l as Icon, m as FieldGroup, n as DialogClose, o as DialogHeader, p as FieldError, r as DialogContent, s as DialogTitle, t as Dialog, u as Spinner } from "./dialog-CFlvkliO.js";
+import { t as WorkbenchSelect } from "./workbenchSelect-Ci0KCYv9.js";
 import { useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/workbench/browser/runtime/shell/createResourceDialog.tsx

package/dist/browser/{dialog-CFFuRM8s.js → dialog-CFlvkliO.js}

@@ -2286,7 +2286,7 @@ var keySchema = string().min(1).refine((value) => new TextEncoder().encode(value
 strictObject({
 	scope: _enum(["draft", "live"]),
 	values: literal(false).optional()
-});
+}).omit({ values: true });
 strictObject({
 	scope: _enum(["draft", "live"]),
 	keys: array(keySchema).min(1).max(stateReadLimits.maxKeys).refine((keys) => new Set(keys).size === keys.length, "State keys must be distinct.")
@@ -2299,6 +2299,7 @@ strictObject({
 	scope: _enum(["draft", "live"]),
 	space: string().regex(/^(flow|node:.+)$/)
 });
+strictObject({ scope: _enum(["draft", "live"]) });
 var skipDuplicatesConfigSchema = strictObject({ fields: array(string().refine((field) => field.length > 0 && field.split(".").every((part) => part.length > 0), "Use a nonempty dot-separated field path.")).refine((fields) => new Set(fields).size === fields.length, "Identity fields must be distinct.").default([]) });
 var skipDuplicatesExecutorSchema = skipDuplicatesConfigSchema.extend({ kind: literal("skip-duplicates") });
 function skipDuplicatesTask(config = skipDuplicatesConfigSchema.parse({}), name = "Skip Duplicates") {
@@ -2343,6 +2344,10 @@ var flowStateViewSchema = object({
 		updatedAt: number()
 	}))
 });
+var flowStateSummarySchema = flowStateViewSchema.extend({ values: strictObject({
+	count: number().int().nonnegative(),
+	updatedAt: number().nullable()
+}) });
 var flowStateValuesSchema = object({
 	version: literal(1),
 	scope: _enum(["draft", "live"]),
@@ -9360,4 +9365,4 @@ function DialogDescription({ className, ...props }) {
 	});
 }
 //#endregion
-export { waitAutoContinueSchema as $, findItemIndex as $t, comparisonIssue as A, variableInputCompatible as At, authoringDefinitionSchemas as B, SelectContent as Bt, upgradeManualTrigger as C, limitDecisionQuestions as Ct, nodeSystemOutputPorts as D, matchesSchema as Dt, nodeErrorSchema as E, comparePorts as Et, operatorsForType as F, skipDuplicatesConfigSchema as Ft, workflowAgentToolSchema as G, SelectValue as Gt, connectorCapabilitySchema as H, SelectItem as Ht, otherwiseOutput as I, skipDuplicatesTask as It, webhookResponseAllowsBody as J, isGroupedItems as Jt, webhookHeaderValuePort as K, resolveAriaLabelledBy as Kt, unaryOperator as L, dequal as Lt, mapConditionSources as M, format as Mt, nodeInputMappings as N, flowStateValuesSchema as Nt, supportsNodeErrorHandling as O, portsAssignable as Ot, operandHandle as P, flowStateViewSchema as Pt, workflowOutputsPort as Q, defaultItemEquality as Qt, valueType as R, Select as Rt, resourceNameIssue as S, defaultDecisionQuestion as St, workflowToolNameIssue as T, webhookSupportsBody as Tt, decodeRevisionContent as U, SelectSeparator as Ut, connectorAgentToolSchema as V, SelectGroup as Vt, httpCapabilitySchema as W, SelectTrigger as Wt, webhookResponseTimeout as X, stringifyAsValue as Xt, webhookResponseInputs as Y, stringifyAsLabel as Yt, webhookStatusCodePort as Z, compareItemEquality as Zt, applyFlowChanges as _, isHttpHost as _t, DialogFooter as a, httpHeaderSchema as at, nodeNameIssue as b, decisionQuestionIssues as bt, DialogTrigger as c, httpRequestInputs as ct, Field as d, withHttpParameterFields as dt, removeItem as en, defaultNodeRetry as et, FieldDescription as f, withHttpParameterSource as ft, FlowChangeError as g, renamedPort as gt, FieldLabel as h, renameOutputMapping as ht, DialogDescription as i, ChevronDown as in, checkJsonDepth as it, conditionInputPorts as j, isSchemaKeyword as jt, clearConditionBindings as k, schemaObject as kt, Icon as l, httpRequestIssues as lt, FieldGroup as m, remapInputMappings as mt, DialogClose as n, Label as nn, retryConfigurationSchema as nt, DialogHeader as o, httpQuerySchema as ot, FieldError as p, httpHeaderNameIssue as pt, webhookHeadersPort as q, hasNullItemLabel as qt, DialogContent as r, Input as rn, supportsNodeRetry as rt, DialogTitle as s, httpRequestConfigSchema as st, Dialog as t, selectedValueIncludes as tn, nodeRetryLimits as tt, Spinner as u, httpRequestTask as ut, isTriggerNode as v, decisionLimits as vt, upgradeRevisionContent as w, webhookMethods as wt, normalizeNodeName as x, decisionTask as xt, nextNodeName as y, decisionModel as yt, agentToolFields as z, SelectChevron as zt };
+export { waitAutoContinueSchema as $, defaultItemEquality as $t, comparisonIssue as A, variableInputCompatible as At, authoringDefinitionSchemas as B, SelectChevron as Bt, upgradeManualTrigger as C, limitDecisionQuestions as Ct, nodeSystemOutputPorts as D, matchesSchema as Dt, nodeErrorSchema as E, comparePorts as Et, operatorsForType as F, flowStateViewSchema as Ft, workflowAgentToolSchema as G, SelectTrigger as Gt, connectorCapabilitySchema as H, SelectGroup as Ht, otherwiseOutput as I, skipDuplicatesConfigSchema as It, webhookResponseAllowsBody as J, hasNullItemLabel as Jt, webhookHeaderValuePort as K, SelectValue as Kt, unaryOperator as L, skipDuplicatesTask as Lt, mapConditionSources as M, format as Mt, nodeInputMappings as N, flowStateSummarySchema as Nt, supportsNodeErrorHandling as O, portsAssignable as Ot, operandHandle as P, flowStateValuesSchema as Pt, workflowOutputsPort as Q, compareItemEquality as Qt, valueType as R, dequal as Rt, resourceNameIssue as S, defaultDecisionQuestion as St, workflowToolNameIssue as T, webhookSupportsBody as Tt, decodeRevisionContent as U, SelectItem as Ut, connectorAgentToolSchema as V, SelectContent as Vt, httpCapabilitySchema as W, SelectSeparator as Wt, webhookResponseTimeout as X, stringifyAsLabel as Xt, webhookResponseInputs as Y, isGroupedItems as Yt, webhookStatusCodePort as Z, stringifyAsValue as Zt, applyFlowChanges as _, isHttpHost as _t, DialogFooter as a, ChevronDown as an, httpHeaderSchema as at, nodeNameIssue as b, decisionQuestionIssues as bt, DialogTrigger as c, httpRequestInputs as ct, Field as d, withHttpParameterFields as dt, findItemIndex as en, defaultNodeRetry as et, FieldDescription as f, withHttpParameterSource as ft, FlowChangeError as g, renamedPort as gt, FieldLabel as h, renameOutputMapping as ht, DialogDescription as i, Input as in, checkJsonDepth as it, conditionInputPorts as j, isSchemaKeyword as jt, clearConditionBindings as k, schemaObject as kt, Icon as l, httpRequestIssues as lt, FieldGroup as m, remapInputMappings as mt, DialogClose as n, selectedValueIncludes as nn, retryConfigurationSchema as nt, DialogHeader as o, httpQuerySchema as ot, FieldError as p, httpHeaderNameIssue as pt, webhookHeadersPort as q, resolveAriaLabelledBy as qt, DialogContent as r, Label as rn, supportsNodeRetry as rt, DialogTitle as s, httpRequestConfigSchema as st, Dialog as t, removeItem as tn, nodeRetryLimits as tt, Spinner as u, httpRequestTask as ut, isTriggerNode as v, decisionLimits as vt, upgradeRevisionContent as w, webhookMethods as wt, normalizeNodeName as x, decisionTask as xt, nextNodeName as y, decisionModel as yt, agentToolFields as z, Select as zt };

package/dist/browser/{exportSvg-CYwyYiuH.js → exportPng-BOPfjeEi.js}

@@ -1,6 +1,7 @@
 import { n as IconImageCrossOriginContext, o as IconifyProvider } from "./ContentIcon-CMn0c-kl.js";
-import { t as FlowCanvas, x as CanvasStore } from "./FlowCanvas-BQGBcfoL.js";
+import { t as FlowCanvas, x as CanvasStore } from "./FlowCanvas-CrsiDHK8.js";
 import { createElement } from "react";
+import "react/jsx-runtime";
 import { createRoot } from "react-dom/client";
 //#region ../../node_modules/.bun/html-to-image@1.11.11/node_modules/html-to-image/es/util.js
 function resolveUrl(url, baseUrl) {
@@ -547,30 +548,188 @@ async function toSvg(node, options = {}) {
 	return await nodeToDataURL(clonedNode, width, height);
 }
 //#endregion
-//#region src/canvas/browser/graph/FlowCanvas/exportSvg.ts
+//#region ../../assets/logo/open-flow-dark.svg
+var open_flow_dark_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20role='img'%20aria-label='Open%20Flow'%3e%3cpath%20fill='%23e0e2e6'%20d='M32%2016H68Q84%2016%2084%2032V36H68C46%2036%2054%2056%2032%2056H16V32Q16%2016%2032%2016Z'/%3e%3cpath%20fill='%238c919a'%20d='M16%2068H32C54%2068%2046%2048%2068%2048H84V68Q84%2084%2068%2084H32Q16%2084%2016%2068Z'/%3e%3c/svg%3e";
+//#endregion
+//#region ../../assets/logo/open-flow-light.svg
+var open_flow_light_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%20role='img'%20aria-label='Open%20Flow'%3e%3cpath%20fill='%2344474c'%20d='M32%2016H68Q84%2016%2084%2032V36H68C46%2036%2054%2056%2032%2056H16V32Q16%2016%2032%2016Z'/%3e%3cpath%20fill='%2393979f'%20d='M16%2068H32C54%2068%2046%2048%2068%2048H84V68Q84%2084%2068%2084H32Q16%2084%2016%2068Z'/%3e%3c/svg%3e";
+//#endregion
+//#region src/ui/browser/logo.tsx
+function openFlowLogoSource(theme) {
+	return theme === "dark" ? open_flow_dark_default : open_flow_light_default;
+}
+//#endregion
+//#region src/canvas/browser/graph/FlowCanvas/exportPng.ts
 var padding = 64;
+var maximumDimension = 16384;
+var maximumPixels = 32e6;
+var framePadding = 12;
+var frameHeaderHeight = 40;
+var frameTitleInset = 20;
+var frameInset = 8;
+var frameRadius = 16;
+function drawFrame(context, image, logo, width, height, background, frame) {
+	const x = framePadding;
+	const y = framePadding;
+	const frameWidth = width - 24;
+	const frameHeight = height - 24;
+	const contentX = 20;
+	const contentY = 52;
+	const contentWidth = frameWidth - 16;
+	const contentHeight = frameHeight - frameHeaderHeight - frameInset;
+	context.save();
+	context.fillStyle = frame.background;
+	context.beginPath();
+	context.roundRect(x, y, frameWidth, frameHeight, frameRadius);
+	context.fill();
+	context.save();
+	context.beginPath();
+	context.roundRect(contentX, contentY, contentWidth, contentHeight, 8);
+	context.clip();
+	context.fillStyle = background;
+	context.fillRect(contentX, contentY, contentWidth, contentHeight);
+	context.drawImage(image, contentX, contentY, contentWidth, contentHeight);
+	context.restore();
+	context.strokeStyle = frame.border;
+	context.beginPath();
+	context.roundRect(20.5, 52.5, contentWidth - 1, contentHeight - 1, 7.5);
+	context.stroke();
+	context.drawImage(logo, 24, 22, 20, 20);
+	context.fillStyle = frame.foreground;
+	context.textBaseline = "middle";
+	context.font = `600 14px ${frame.fontFamily}`;
+	const wordmarkX = 52;
+	context.fillText("Open Flow", wordmarkX, 32);
+	const availableWidth = x + frameWidth - frameTitleInset - (wordmarkX + context.measureText("Open Flow").width + 24);
+	context.font = `400 12px ${frame.fontFamily}`;
+	if (availableWidth > 0) {
+		let title = frame.title.replace(/\s+/g, " ");
+		if (context.measureText(title).width > availableWidth) {
+			const characters = Array.from(title);
+			while (characters.length && context.measureText(characters.join("") + "…").width > availableWidth) characters.pop();
+			title = characters.join("") + "…";
+		}
+		context.textAlign = "right";
+		context.fillText(title, x + frameWidth - frameTitleInset, 32);
+	}
+	context.strokeStyle = frame.border;
+	context.beginPath();
+	context.roundRect(12.5, 12.5, frameWidth - 1, frameHeight - 1, 15.5);
+	context.stroke();
+	context.restore();
+}
+var imagePlaceholder = "data:image/svg+xml;charset=utf-8," + encodeURIComponent("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"160\" height=\"100\" viewBox=\"0 0 160 100\"><rect width=\"160\" height=\"100\" rx=\"6\" fill=\"#eeeeee\"/><text x=\"80\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\" font-family=\"sans-serif\" font-size=\"24\" fill=\"#777777\">?</text></svg>");
 var nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
-async function waitFor(ready) {
-	const started = performance.now();
+async function waitFor(ready, deadline) {
 	while (!ready()) {
-		if (performance.now() - started > 15e3) throw new Error("Timed out rendering the workflow image.");
+		if (performance.now() > deadline) throw new Error("Timed out rendering the workflow image.");
 		await nextFrame();
 	}
 }
+async function decodeImage(image, timeout) {
+	let timer;
+	try {
+		return await Promise.race([image.decode().then(() => true, () => false), new Promise((resolve) => {
+			timer = setTimeout(() => resolve(false), Math.max(0, timeout));
+		})]);
+	} finally {
+		clearTimeout(timer);
+	}
+}
+/** Image failures can mount another image or start loading a bundled fallback icon. */
+async function prepareImages(host, deadline) {
+	let hasImagePlaceholders = false;
+	while (true) {
+		for (const image of host.querySelectorAll("img")) image.loading = "eager";
+		await waitFor(() => host.querySelector("[data-render-pending]") == null, deadline);
+		const images = [...host.querySelectorAll("img")].map((image) => ({
+			image,
+			source: image.src
+		}));
+		const decoded = await Promise.all(images.map(({ image }) => {
+			image.loading = "eager";
+			return decodeImage(image, Math.min(5e3, deadline - performance.now()));
+		}));
+		await nextFrame();
+		await nextFrame();
+		let replaced = false;
+		images.forEach(({ image, source }, index) => {
+			if (decoded[index] || !host.contains(image) || image.src !== source) return;
+			if (source === imagePlaceholder) throw new Error("Unable to load the image placeholder.");
+			image.removeAttribute("srcset");
+			image.src = imagePlaceholder;
+			hasImagePlaceholders = replaced = true;
+		});
+		const current = [...host.querySelectorAll("img")];
+		if (!replaced && host.querySelector("[data-render-pending]") == null && current.length === images.length && current.every((image, index) => image === images[index].image && image.src === images[index].source)) return hasImagePlaceholders;
+		if (performance.now() > deadline) throw new Error("Timed out preparing workflow images.");
+	}
+}
+async function renderPng(dataUrl, width, height, background, frame) {
+	const ratio = Math.min(2, maximumDimension / width, maximumDimension / height, Math.sqrt(maximumPixels / (width * height)));
+	let outputWidth = Math.max(1, Math.floor(width * ratio));
+	let outputHeight = Math.max(1, Math.floor(height * ratio));
+	const image = new Image();
+	const logo = frame ? new Image() : void 0;
+	image.decoding = "async";
+	image.src = dataUrl;
+	try {
+		await image.decode();
+		if (logo && frame) {
+			logo.src = frame.logo;
+			await logo.decode();
+		}
+		for (let attempt = 0; attempt < 3; attempt++) {
+			const canvas = document.createElement("canvas");
+			try {
+				canvas.width = outputWidth;
+				canvas.height = outputHeight;
+				const context = canvas.getContext("2d", { alpha: false });
+				if (!context) throw new Error("Unable to allocate the workflow image.");
+				context.fillStyle = frame?.outerBackground ?? background;
+				context.fillRect(0, 0, outputWidth, outputHeight);
+				if (frame && logo) {
+					context.scale(outputWidth / width, outputHeight / height);
+					drawFrame(context, image, logo, width, height, background, frame);
+				} else context.drawImage(image, 0, 0, outputWidth, outputHeight);
+				if (context.isContextLost?.()) throw new Error("The workflow image context was lost.");
+				const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+				if (!blob || context.isContextLost?.()) throw new Error("Unable to encode the workflow image.");
+				return {
+					blob,
+					width: outputWidth,
+					height: outputHeight
+				};
+			} catch (error) {
+				if (attempt === 2 || outputWidth === 1 && outputHeight === 1) throw error;
+				outputWidth = Math.max(1, Math.floor(outputWidth / 2));
+				outputHeight = Math.max(1, Math.floor(outputHeight / 2));
+			} finally {
+				canvas.width = canvas.height = 0;
+			}
+		}
+		throw new Error("Unable to render the workflow image.");
+	} finally {
+		image.src = "";
+		if (logo) logo.src = "";
+	}
+}
 /** Render the real canvas at full detail without moving or changing the user's canvas. */
-async function flowToSvg(model, title, language = "en", options = {}) {
+async function captureFlowImage(model, language, options) {
+	const contentPadding = options.frame ? padding / 2 : padding;
 	const positions = model.nodes.map((node) => node.position);
 	const minX = Math.min(0, ...positions.map((position) => position.x));
 	const minY = Math.min(0, ...positions.map((position) => position.y));
 	const snapshot = {
 		...model,
 		viewport: {
-			x: padding - minX,
-			y: padding - minY,
+			x: contentPadding - minX,
+			y: contentPadding - minY,
 			zoom: 1
 		}
 	};
 	const host = document.createElement("div");
+	host.lang = language;
 	Object.assign(host.style, {
 		position: "fixed",
 		left: "-100000px",
@@ -596,16 +755,13 @@ async function flowToSvg(model, title, language = "en", options = {}) {
 			layoutMotion: false,
 			nodesDraggable: false
 		}))));
-		await waitFor(() => store.$.initialized.value && store.$.rfNodes.value.every((node) => !!node.measured?.width && !!node.measured.height));
-		await waitFor(() => host.querySelector("[data-render-pending]") == null);
-		for (const image of host.querySelectorAll("img")) image.loading = "eager";
-		await Promise.all([...host.querySelectorAll("img")].map((image) => image.decode().catch(() => {})));
-		await document.fonts.ready;
-		await nextFrame();
-		await nextFrame();
+		const deadline = performance.now() + 15e3;
+		await waitFor(() => store.$.initialized.value && store.$.rfNodes.value.every((node) => !!node.measured?.width && !!node.measured.height), deadline);
+		let hasImagePlaceholders = await prepareImages(host, deadline);
+		await waitFor(() => document.fonts.status === "loaded", deadline);
 		const viewport = host.querySelector(".react-flow__viewport");
 		const origin = viewport.getBoundingClientRect();
-		const bounds = [...viewport.querySelectorAll(".react-flow__node")].map((node) => {
+		const bounds = [...viewport.querySelectorAll(".react-flow__node, [data-canvas-bounds]")].map((node) => {
 			const rect = node.getBoundingClientRect();
 			return {
 				x: rect.left - origin.left,
@@ -619,41 +775,83 @@ async function flowToSvg(model, title, language = "en", options = {}) {
 		const top = bounds.length ? Math.min(...bounds.map((rect) => rect.y)) : 0;
 		const right = bounds.length ? Math.max(...bounds.map((rect) => rect.x + rect.width)) : 320;
 		const bottom = bounds.length ? Math.max(...bounds.map((rect) => rect.y + rect.height)) : 120;
+		const width = Math.ceil(right - left + contentPadding * 2);
+		const height = Math.ceil(bottom - top + contentPadding * 2);
+		const background = getComputedStyle(host.querySelector(".react-flow")).backgroundColor;
 		const dataUrl = await toSvg(viewport, {
-			width: Math.ceil(right - left + 128),
-			height: Math.ceil(bottom - top + 128),
+			width,
+			height,
+			imagePlaceholder,
 			preferredFontFormat: "woff2",
 			includeQueryParams: true,
 			style: {
-				transform: `translate(${padding - left}px, ${padding - top}px)`,
+				transform: `translate(${contentPadding - left}px, ${contentPadding - top}px)`,
 				transformOrigin: "0 0"
 			}
 		});
-		const svg = new DOMParser().parseFromString(decodeURIComponent(dataUrl.slice(dataUrl.indexOf(",") + 1)), "image/svg+xml");
-		const background = svg.createElementNS("http://www.w3.org/2000/svg", "rect");
-		background.setAttribute("width", "100%");
-		background.setAttribute("height", "100%");
-		background.setAttribute("fill", getComputedStyle(host.querySelector(".react-flow")).backgroundColor);
-		const label = svg.createElementNS("http://www.w3.org/2000/svg", "title");
-		label.textContent = title;
-		svg.documentElement.prepend(label, background);
-		return `<?xml version="1.0" encoding="UTF-8"?>\n${new XMLSerializer().serializeToString(svg)}`;
+		hasImagePlaceholders ||= dataUrl.includes(encodeURIComponent(imagePlaceholder));
+		let frame;
+		if (options.frame) {
+			const palette = document.createElement("div");
+			palette.className = "open-flow-theme";
+			palette.dataset.theme = options.dark ? "dark" : "light";
+			Object.assign(palette.style, {
+				backgroundColor: "var(--ui-background)",
+				color: "var(--ui-foreground)",
+				borderColor: "var(--ui-border)"
+			});
+			host.append(palette);
+			const style = getComputedStyle(palette);
+			const outerBackground = style.backgroundColor;
+			if (options.dark) palette.style.backgroundColor = "var(--ui-card)";
+			frame = {
+				title: options.title ?? "",
+				logo: openFlowLogoSource(options.dark ? "dark" : "light"),
+				background: getComputedStyle(palette).backgroundColor,
+				outerBackground,
+				foreground: style.color,
+				border: style.borderColor,
+				fontFamily: getComputedStyle(viewport).fontFamily || "sans-serif"
+			};
+		}
+		return {
+			dataUrl,
+			width: width + (frame ? 40 : 0),
+			height: height + (frame ? 72 : 0),
+			background,
+			frame,
+			hasImagePlaceholders
+		};
 	} finally {
 		root.unmount();
 		store.dispose();
 		host.remove();
 	}
 }
-async function downloadFlowSvg(model, title, language = "en", options = {}) {
-	const source = await flowToSvg(model, title, language, options);
-	const url = URL.createObjectURL(new Blob([source], { type: "image/svg+xml;charset=utf-8" }));
+async function flowToPng(model, language = "en", options = {}) {
+	const { dataUrl, width, height, background, frame, hasImagePlaceholders } = await captureFlowImage(model, language, options);
+	return {
+		...await renderPng(dataUrl, width, height, background, frame),
+		hasImagePlaceholders
+	};
+}
+async function downloadFlowPng(model, title, language = "en", options = {}) {
+	const result = await flowToPng(model, language, {
+		...options,
+		title
+	});
+	const url = URL.createObjectURL(result.blob);
 	const link = document.createElement("a");
-	link.download = `${title.replace(/[<>:"/\\|?*\u0000-\u001f]/g, "_").replace(/[. ]+$/g, "") || "workflow"}.svg`;
-	link.href = url;
-	document.body.append(link);
-	link.click();
-	link.remove();
-	setTimeout(() => URL.revokeObjectURL(url), 0);
+	try {
+		link.download = `${title.replace(/[<>:"/\\|?*\u0000-\u001f]/g, "_").replace(/[. ]+$/g, "") || "workflow"}.png`;
+		link.href = url;
+		document.body.append(link);
+		link.click();
+	} finally {
+		link.remove();
+		setTimeout(() => URL.revokeObjectURL(url), 0);
+	}
+	return result;
 }
 //#endregion
-export { downloadFlowSvg };
+export { downloadFlowPng };