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

package/dist/browser/{createResourceDialog-bdOJa5Zk.js → createResourceDialog-Bi4fUnbD.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, 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 { xr as Button } from "./tooltip-DGj5pudg.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-BzoSxhXQ.js";
+import { t as WorkbenchSelect } from "./workbenchSelect-BIaEVTx6.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-CFlvkliO.js → dialog-BzoSxhXQ.js}

@@ -1,5 +1,5 @@
 import { a as toPlainObject, i as isString } from "./dist-BFmpkX4P.js";
-import { $ as useToolbarRootContext, A as string, At as useImplicitActiveTrigger, Bn as transitionStatusMapping, Br as useRefWithInit, C as literal, Cn as getFloatingFocusElement, Cr as cn, D as preprocess, Dn as getTarget, Dr as EMPTY_ARRAY, Dt as createInitialPopupStoreState, E as object, En as contains, Er as useRenderElement, Et as useFloatingRootContext, F as IndexGuessBehavior, Fn as createLucideIcon, Fr as formatErrorMessage, Ft as useDismiss, Gt as CLICK_TRIGGER_IDENTIFIER, Hr as getWindow, I as useCompositeListItem, In as useTransitionStatus, Ir as mergeProps, It as useClick, Jn as closePress, Kn as cancelOpen, Kt as DROPDOWN_COLLISION_AVOIDANCE, Ln as useOpenChangeComplete, Lr as useIsoLayoutEffect, Lt as FloatingFocusManager, M as unknown, Mn as ownerDocument, Mr as useButton, Mt as useTriggerDataForwarding, N as _isoDateTime, Nn as useLabelableId, O as record$1, Or as EMPTY_OBJECT, Ot as popupStoreSelectors, P as Separator, Pn as Check, Pt as platform, Qt as useStore, Sr as buttonVariants, T as number, Tn as activeElement, Tt as useSyncedFloatingRootContext, U as COMPOSITE_KEYS, Un as useValueChanged, Vn as useAnimationFrame, Wn as createChangeEventDetails, Wt as FloatingPortal, Xt as ReactStore, Yt as addEventListener, Zn as imperativeAction, Zt as Store, _ as array, _r as fieldValidityMapping, an as useOnFirstRender, at as useAnchorPositioning, br as useControlled, bt as useListNavigation, ct as CompositeList, dr as useFormContext, dt as CommonPopupDataAttributes, et as useAnchoredPopupScrollLock, f as isTimeZone, fr as useRegisterFieldControl, ft as popupStateMapping, g as _enum, gt as serializeValue, h as ZodType, ht as useOpenInteractionType, i as TooltipTrigger, in as useValueAsRef, it as InternalBackdrop, j as union, jn as isWebKit, jr as useMergedRefs, jt as useOpenStateTransitions, k as strictObject, kt as PopupTriggerMap, lr as windowResize, lt as inertValue, m as ZodISODateTime, mr as useBaseUiId, mt as triggerOpenStateMapping, n as TooltipContent, nt as usePositioner, pr as useFieldRootContext, pt as pressableTriggerOpenStateMapping, rn as createSelector, rr as none, rt as getDisabledMountTransitionStyles, sn as useTimeout, st as useDirection, t as Tooltip, tr as itemPress, tt as useScrollLock, ur as useLabelableContext, ut as getPseudoElementBounds, v as boolean, vr as visuallyHidden, vt as useTypeahead, w as never, wr as cva, x as json$1, xn as rectToClientRect, xr as Button, xt as useInteractions, y as discriminatedUnion, yr as visuallyHiddenInput, yt as useRole, zr as useStableCallback } from "./tooltip-BDcVTNpu.js";
+import { $ as useToolbarRootContext, A as string, At as useImplicitActiveTrigger, Bn as transitionStatusMapping, Br as useStableCallback, C as literal, Cn as getFloatingFocusElement, Cr as cn, D as preprocess, Dn as getTarget, Dr as EMPTY_ARRAY, Dt as createInitialPopupStoreState, E as object, En as contains, Er as useRenderElement, Et as useFloatingRootContext, F as IndexGuessBehavior, Fn as createLucideIcon, Fr as formatErrorMessage, Ft as useDismiss, Gt as CLICK_TRIGGER_IDENTIFIER, I as useCompositeListItem, In as useTransitionStatus, Ir as mergeProps, It as useClick, Jn as closePress, Kn as cancelOpen, Kt as DROPDOWN_COLLISION_AVOIDANCE, Ln as useOpenChangeComplete, Lr as useIsoLayoutEffect, Lt as FloatingFocusManager, M as unknown, Mn as ownerDocument, Mr as useButton, Mt as useTriggerDataForwarding, N as _isoDateTime, Nn as useLabelableId, O as record$1, Or as EMPTY_OBJECT, Ot as popupStoreSelectors, P as Separator, Pn as Check, Pt as platform, Qt as useStore, Sr as buttonVariants, T as number, Tn as activeElement, Tt as useSyncedFloatingRootContext, U as COMPOSITE_KEYS, Un as useValueChanged, Ur as getWindow, Vn as useAnimationFrame, Vr as useRefWithInit, Wn as createChangeEventDetails, Wt as FloatingPortal, Xt as ReactStore, Yt as addEventListener, Zn as imperativeAction, Zt as Store, _ as array, _r as fieldValidityMapping, an as useOnFirstRender, at as useAnchorPositioning, br as useControlled, bt as useListNavigation, ct as CompositeList, dr as useFormContext, dt as CommonPopupDataAttributes, et as useAnchoredPopupScrollLock, f as isTimeZone, fr as useRegisterFieldControl, ft as popupStateMapping, g as _enum, gt as serializeValue, h as ZodType, ht as useOpenInteractionType, i as TooltipTrigger, in as useValueAsRef, it as InternalBackdrop, j as union, jn as isWebKit, jr as useMergedRefs, jt as useOpenStateTransitions, k as strictObject, kt as PopupTriggerMap, lr as windowResize, lt as inertValue, m as ZodISODateTime, mr as useBaseUiId, mt as triggerOpenStateMapping, n as TooltipContent, nt as usePositioner, pr as useFieldRootContext, pt as pressableTriggerOpenStateMapping, rn as createSelector, rr as none, rt as getDisabledMountTransitionStyles, sn as useTimeout, st as useDirection, t as Tooltip, tr as itemPress, tt as useScrollLock, ur as useLabelableContext, ut as getPseudoElementBounds, v as boolean, vr as visuallyHidden, vt as useTypeahead, w as never, wr as cva, x as json$1, xn as rectToClientRect, xr as Button, xt as useInteractions, y as discriminatedUnion, yr as visuallyHiddenInput, yt as useRole } from "./tooltip-DGj5pudg.js";
 import * as React from "react";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/browser/{exportPng-Cjdb6COo.js → exportPng-CrAFfOaD.js}

@@ -1,9 +1,9 @@
-import { S as IconifyProvider, v as IconImageCrossOriginContext } from "./wrapLayout-DZvW9dBs.js";
-import { t as FlowCanvas, y as CanvasStore } from "./FlowCanvas-Dew2fmoT.js";
+import { C as IconifyProvider, y as IconImageCrossOriginContext } from "./wrapLayout-C4moMKgb.js";
+import { E as getFlowPngAspectRatio, t as FlowCanvas, y as CanvasStore } from "./FlowCanvas-ChbukrDh.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
+//#region ../../node_modules/.bun/html-to-image@1.11.13/node_modules/html-to-image/es/util.js
 function resolveUrl(url, baseUrl) {
 	if (url.match(/^[a-z]+:\/\//i)) return url;
 	if (url.match(/^\/\//)) return window.location.protocol + url;
@@ -30,6 +30,13 @@ function toArray(arrayLike) {
 	for (let i = 0, l = arrayLike.length; i < l; i++) arr.push(arrayLike[i]);
 	return arr;
 }
+var styleProps = null;
+function getStyleProperties(options = {}) {
+	if (options.includeStyleProperties) return options.includeStyleProperties;
+	if (styleProps) return styleProps;
+	styleProps = toArray(window.getComputedStyle(document.documentElement));
+	return styleProps;
+}
 function px(node, styleProperty) {
 	const val = (node.ownerDocument.defaultView || window).getComputedStyle(node).getPropertyValue(styleProperty);
 	return val ? parseFloat(val.replace("px", "")) : 0;
@@ -53,8 +60,11 @@ function getImageSize(targetNode, options = {}) {
 function createImage(url) {
 	return new Promise((resolve, reject) => {
 		const img = new Image();
-		img.decode = () => resolve(img);
-		img.onload = () => resolve(img);
+		img.onload = () => {
+			img.decode().then(() => {
+				requestAnimationFrame(() => resolve(img));
+			});
+		};
 		img.onerror = reject;
 		img.crossOrigin = "anonymous";
 		img.decoding = "async";
@@ -87,22 +97,22 @@ var isInstanceOfElement = (node, instance) => {
 	return nodePrototype.constructor.name === instance.name || isInstanceOfElement(nodePrototype, instance);
 };
 //#endregion
-//#region ../../node_modules/.bun/html-to-image@1.11.11/node_modules/html-to-image/es/clone-pseudos.js
+//#region ../../node_modules/.bun/html-to-image@1.11.13/node_modules/html-to-image/es/clone-pseudos.js
 function formatCSSText(style) {
 	const content = style.getPropertyValue("content");
 	return `${style.cssText} content: '${content.replace(/'|"/g, "")}';`;
 }
-function formatCSSProperties(style) {
-	return toArray(style).map((name) => {
+function formatCSSProperties(style, options) {
+	return getStyleProperties(options).map((name) => {
 		return `${name}: ${style.getPropertyValue(name)}${style.getPropertyPriority(name) ? " !important" : ""};`;
 	}).join(" ");
 }
-function getPseudoElementStyle(className, pseudo, style) {
+function getPseudoElementStyle(className, pseudo, style, options) {
 	const selector = `.${className}:${pseudo}`;
-	const cssText = style.cssText ? formatCSSText(style) : formatCSSProperties(style);
+	const cssText = style.cssText ? formatCSSText(style) : formatCSSProperties(style, options);
 	return document.createTextNode(`${selector}{${cssText}}`);
 }
-function clonePseudoElement(nativeNode, clonedNode, pseudo) {
+function clonePseudoElement(nativeNode, clonedNode, pseudo, options) {
 	const style = window.getComputedStyle(nativeNode, pseudo);
 	const content = style.getPropertyValue("content");
 	if (content === "" || content === "none") return;
@@ -113,15 +123,15 @@ function clonePseudoElement(nativeNode, clonedNode, pseudo) {
 		return;
 	}
 	const styleElement = document.createElement("style");
-	styleElement.appendChild(getPseudoElementStyle(className, pseudo, style));
+	styleElement.appendChild(getPseudoElementStyle(className, pseudo, style, options));
 	clonedNode.appendChild(styleElement);
 }
-function clonePseudoElements(nativeNode, clonedNode) {
-	clonePseudoElement(nativeNode, clonedNode, ":before");
-	clonePseudoElement(nativeNode, clonedNode, ":after");
+function clonePseudoElements(nativeNode, clonedNode, options) {
+	clonePseudoElement(nativeNode, clonedNode, ":before", options);
+	clonePseudoElement(nativeNode, clonedNode, ":after", options);
 }
 //#endregion
-//#region ../../node_modules/.bun/html-to-image@1.11.11/node_modules/html-to-image/es/mimes.js
+//#region ../../node_modules/.bun/html-to-image@1.11.13/node_modules/html-to-image/es/mimes.js
 var WOFF = "application/font-woff";
 var JPEG = "image/jpeg";
 var mimes = {
@@ -145,7 +155,7 @@ function getMimeType(url) {
 	return mimes[getExtension(url).toLowerCase()] || "";
 }
 //#endregion
-//#region ../../node_modules/.bun/html-to-image@1.11.11/node_modules/html-to-image/es/dataurl.js
+//#region ../../node_modules/.bun/html-to-image@1.11.13/node_modules/html-to-image/es/dataurl.js
 function getContentFromDataUrl(dataURL) {
 	return dataURL.split(/,/)[1];
 }
@@ -202,7 +212,7 @@ async function resourceToDataURL(resourceUrl, contentType, options) {
 	return dataURL;
 }
 //#endregion
-//#region ../../node_modules/.bun/html-to-image@1.11.11/node_modules/html-to-image/es/clone-node.js
+//#region ../../node_modules/.bun/html-to-image@1.11.13/node_modules/html-to-image/es/clone-node.js
 async function cloneCanvasElement(canvas) {
 	const dataURL = canvas.toDataURL();
 	if (dataURL === "data:,") return canvas.cloneNode(false);
@@ -220,17 +230,17 @@ async function cloneVideoElement(video, options) {
 	const poster = video.poster;
 	return createImage(await resourceToDataURL(poster, getMimeType(poster), options));
 }
-async function cloneIFrameElement(iframe) {
+async function cloneIFrameElement(iframe, options) {
 	var _a;
 	try {
-		if ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.body) return await cloneNode(iframe.contentDocument.body, {}, true);
+		if ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.body) return await cloneNode(iframe.contentDocument.body, options, true);
 	} catch (_b) {}
 	return iframe.cloneNode(false);
 }
 async function cloneSingleNode(node, options) {
 	if (isInstanceOfElement(node, HTMLCanvasElement)) return cloneCanvasElement(node);
 	if (isInstanceOfElement(node, HTMLVideoElement)) return cloneVideoElement(node, options);
-	if (isInstanceOfElement(node, HTMLIFrameElement)) return cloneIFrameElement(node);
+	if (isInstanceOfElement(node, HTMLIFrameElement)) return cloneIFrameElement(node, options);
 	return node.cloneNode(false);
 }
 var isSlotElement = (node) => node.tagName != null && node.tagName.toUpperCase() === "SLOT";
@@ -246,14 +256,14 @@ async function cloneChildren(nativeNode, clonedNode, options) {
 	}), Promise.resolve());
 	return clonedNode;
 }
-function cloneCSSStyle(nativeNode, clonedNode) {
+function cloneCSSStyle(nativeNode, clonedNode, options) {
 	const targetStyle = clonedNode.style;
 	if (!targetStyle) return;
 	const sourceStyle = window.getComputedStyle(nativeNode);
 	if (sourceStyle.cssText) {
 		targetStyle.cssText = sourceStyle.cssText;
 		targetStyle.transformOrigin = sourceStyle.transformOrigin;
-	} else toArray(sourceStyle).forEach((name) => {
+	} else getStyleProperties(options).forEach((name) => {
 		let value = sourceStyle.getPropertyValue(name);
 		if (name === "font-size" && value.endsWith("px")) value = `${Math.floor(parseFloat(value.substring(0, value.length - 2))) - .1}px`;
 		if (isInstanceOfElement(nativeNode, HTMLIFrameElement) && name === "display" && value === "inline") value = "block";
@@ -272,10 +282,10 @@ function cloneSelectValue(nativeNode, clonedNode) {
 		if (selectedOption) selectedOption.setAttribute("selected", "");
 	}
 }
-function decorate(nativeNode, clonedNode) {
+function decorate(nativeNode, clonedNode, options) {
 	if (isInstanceOfElement(clonedNode, Element)) {
-		cloneCSSStyle(nativeNode, clonedNode);
-		clonePseudoElements(nativeNode, clonedNode);
+		cloneCSSStyle(nativeNode, clonedNode, options);
+		clonePseudoElements(nativeNode, clonedNode, options);
 		cloneInputValue(nativeNode, clonedNode);
 		cloneSelectValue(nativeNode, clonedNode);
 	}
@@ -312,10 +322,10 @@ async function ensureSVGSymbols(clone, options) {
 }
 async function cloneNode(node, options, isRoot) {
 	if (!isRoot && options.filter && !options.filter(node)) return null;
-	return Promise.resolve(node).then((clonedNode) => cloneSingleNode(clonedNode, options)).then((clonedNode) => cloneChildren(node, clonedNode, options)).then((clonedNode) => decorate(node, clonedNode)).then((clonedNode) => ensureSVGSymbols(clonedNode, options));
+	return Promise.resolve(node).then((clonedNode) => cloneSingleNode(clonedNode, options)).then((clonedNode) => cloneChildren(node, clonedNode, options)).then((clonedNode) => decorate(node, clonedNode, options)).then((clonedNode) => ensureSVGSymbols(clonedNode, options));
 }
 //#endregion
-//#region ../../node_modules/.bun/html-to-image@1.11.11/node_modules/html-to-image/es/embed-resources.js
+//#region ../../node_modules/.bun/html-to-image@1.11.13/node_modules/html-to-image/es/embed-resources.js
 var URL_REGEX = /url\((['"]?)([^'"]+?)\1\)/g;
 var URL_WITH_FORMAT_REGEX = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
 var FONT_SRC_REGEX = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
@@ -360,7 +370,7 @@ async function embedResources(cssText, baseUrl, options) {
 	return parseURLs(filteredCSSText).reduce((deferred, url) => deferred.then((css) => embed(css, url, baseUrl, options)), Promise.resolve(filteredCSSText));
 }
 //#endregion
-//#region ../../node_modules/.bun/html-to-image@1.11.11/node_modules/html-to-image/es/embed-images.js
+//#region ../../node_modules/.bun/html-to-image@1.11.13/node_modules/html-to-image/es/embed-images.js
 async function embedProp(propName, node, options) {
 	var _a;
 	const propValue = (_a = node.style) === null || _a === void 0 ? void 0 : _a.getPropertyValue(propName);
@@ -372,8 +382,8 @@ async function embedProp(propName, node, options) {
 	return false;
 }
 async function embedBackground(clonedNode, options) {
-	if (!await embedProp("background", clonedNode, options)) await embedProp("background-image", clonedNode, options);
-	if (!await embedProp("mask", clonedNode, options)) await embedProp("mask-image", clonedNode, options);
+	await embedProp("background", clonedNode, options) || await embedProp("background-image", clonedNode, options);
+	await embedProp("mask", clonedNode, options) || await embedProp("-webkit-mask", clonedNode, options) || await embedProp("mask-image", clonedNode, options) || await embedProp("-webkit-mask-image", clonedNode, options);
 }
 async function embedImageNode(clonedNode, options) {
 	const isImageElement = isInstanceOfElement(clonedNode, HTMLImageElement);
@@ -382,7 +392,13 @@ async function embedImageNode(clonedNode, options) {
 	const dataURL = await resourceToDataURL(url, getMimeType(url), options);
 	await new Promise((resolve, reject) => {
 		clonedNode.onload = resolve;
-		clonedNode.onerror = reject;
+		clonedNode.onerror = options.onImageErrorHandler ? (...attributes) => {
+			try {
+				resolve(options.onImageErrorHandler(...attributes));
+			} catch (error) {
+				reject(error);
+			}
+		} : reject;
 		const image = clonedNode;
 		if (image.decode) image.decode = resolve;
 		if (image.loading === "lazy") image.loading = "eager";
@@ -404,7 +420,7 @@ async function embedImages(clonedNode, options) {
 	}
 }
 //#endregion
-//#region ../../node_modules/.bun/html-to-image@1.11.11/node_modules/html-to-image/es/apply-style.js
+//#region ../../node_modules/.bun/html-to-image@1.11.13/node_modules/html-to-image/es/apply-style.js
 function applyStyle(node, options) {
 	const { style } = node;
 	if (options.backgroundColor) style.backgroundColor = options.backgroundColor;
@@ -417,7 +433,7 @@ function applyStyle(node, options) {
 	return node;
 }
 //#endregion
-//#region ../../node_modules/.bun/html-to-image@1.11.11/node_modules/html-to-image/es/embed-webfonts.js
+//#region ../../node_modules/.bun/html-to-image@1.11.13/node_modules/html-to-image/es/embed-webfonts.js
 var cssFetchCache = {};
 async function fetchCSS(url) {
 	let cache = cssFetchCache[url];
@@ -493,7 +509,7 @@ async function getCSSRules(styleSheets, options) {
 		} catch (e) {
 			const inline = styleSheets.find((a) => a.href == null) || document.styleSheets[0];
 			if (sheet.href != null) deferreds.push(fetchCSS(sheet.href).then((metadata) => embedFonts(metadata, options)).then((cssText) => parseCSS(cssText).forEach((rule) => {
-				inline.insertRule(rule, sheet.cssRules.length);
+				inline.insertRule(rule, inline.cssRules.length);
 			})).catch((err) => {
 				console.error("Error loading remote stylesheet", err);
 			}));
@@ -520,9 +536,26 @@ async function parseWebFontRules(node, options) {
 	if (node.ownerDocument == null) throw new Error("Provided element is not within a Document");
 	return getWebFontRules(await getCSSRules(toArray(node.ownerDocument.styleSheets), options));
 }
+function normalizeFontFamily(font) {
+	return font.trim().replace(/["']/g, "");
+}
+function getUsedFonts(node) {
+	const fonts = /* @__PURE__ */ new Set();
+	function traverse(node) {
+		(node.style.fontFamily || getComputedStyle(node).fontFamily).split(",").forEach((font) => {
+			fonts.add(normalizeFontFamily(font));
+		});
+		Array.from(node.children).forEach((child) => {
+			if (child instanceof HTMLElement) traverse(child);
+		});
+	}
+	traverse(node);
+	return fonts;
+}
 async function getWebFontCSS(node, options) {
 	const rules = await parseWebFontRules(node, options);
-	return (await Promise.all(rules.map((rule) => {
+	const usedFonts = getUsedFonts(node);
+	return (await Promise.all(rules.filter((rule) => usedFonts.has(normalizeFontFamily(rule.style.fontFamily))).map((rule) => {
 		const baseUrl = rule.parentStyleSheet ? rule.parentStyleSheet.href : null;
 		return embedResources(rule.cssText, baseUrl, options);
 	}))).join("\n");
@@ -538,7 +571,7 @@ async function embedWebFonts(clonedNode, options) {
 	}
 }
 //#endregion
-//#region ../../node_modules/.bun/html-to-image@1.11.11/node_modules/html-to-image/es/index.js
+//#region ../../node_modules/.bun/html-to-image@1.11.13/node_modules/html-to-image/es/index.js
 async function toSvg(node, options = {}) {
 	const { width, height } = getImageSize(node, options);
 	const clonedNode = await cloneNode(node, options, true);
@@ -559,6 +592,49 @@ function openFlowLogoSource(theme) {
 	return theme === "dark" ? open_flow_dark_default : open_flow_light_default;
 }
 //#endregion
+//#region src/canvas/browser/graph/FlowCanvas/captureStyles.ts
+/** Capture authored properties instead of hundreds of unrelated browser defaults. */
+function captureStyleProperties(root) {
+	const complete = () => Array.from(getComputedStyle(root)).filter((name) => !name.startsWith("--"));
+	const properties = /* @__PURE__ */ new Set(["width", "height"]);
+	const add = (style) => {
+		for (const name of Array.from(style)) {
+			if (name === "all") return false;
+			if (!name.startsWith("--")) properties.add(name);
+		}
+		return true;
+	};
+	const collect = (rules) => {
+		for (const rule of rules) {
+			const style = rule.style;
+			if (style) {
+				const selector = rule.selectorText?.replace(/::[\w-]+(?:\([^)]*\))?/g, "");
+				let matches = true;
+				if (selector) try {
+					matches = root.closest(selector) != null || root.querySelector(selector) != null;
+				} catch {}
+				if (matches && !add(style)) return false;
+			}
+			if ("cssRules" in rule && !collect(rule.cssRules)) return false;
+			const imported = rule.styleSheet;
+			if (imported && !collect(imported.cssRules)) return false;
+		}
+		return true;
+	};
+	try {
+		const doc = root.ownerDocument;
+		for (const sheet of [...doc.styleSheets, ...doc.adoptedStyleSheets]) if (!collect(sheet.cssRules)) return complete();
+	} catch {
+		return complete();
+	}
+	for (let ancestor = root; ancestor; ancestor = ancestor.parentElement) if (!add(ancestor.style)) return complete();
+	for (const node of [root, ...root.querySelectorAll("*")]) {
+		if (node.style && !add(node.style)) return complete();
+		for (const attribute of node.attributes) if (CSS.supports(attribute.name, "initial")) properties.add(attribute.name);
+	}
+	return [...properties].toSorted();
+}
+//#endregion
 //#region src/canvas/browser/graph/FlowCanvas/exportPng.ts
 var padding = 64;
 var maximumDimension = 16384;
@@ -665,10 +741,22 @@ async function prepareImages(host, deadline) {
 		if (performance.now() > deadline) throw new Error("Timed out preparing workflow images.");
 	}
 }
-async function renderPng(dataUrl, width, height, background, frame) {
+async function renderPng(dataUrl, width, height, background, frame, aspectRatio) {
 	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 dimensions = (scale) => {
+		if (aspectRatio) {
+			const units = Math.max(1, Math.floor(Math.min(width * scale / aspectRatio[0], height * scale / aspectRatio[1])));
+			return {
+				width: units * aspectRatio[0],
+				height: units * aspectRatio[1]
+			};
+		}
+		return {
+			width: Math.max(1, Math.floor(width * scale)),
+			height: Math.max(1, Math.floor(height * scale))
+		};
+	};
+	let output = dimensions(ratio);
 	const image = new Image();
 	const logo = frame ? new Image() : void 0;
 	image.decoding = "async";
@@ -682,28 +770,28 @@ async function renderPng(dataUrl, width, height, background, frame) {
 		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 });
+				canvas.width = output.width;
+				canvas.height = output.height;
+				const context = canvas.getContext("2d", { alpha: !!frame });
 				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);
+					context.scale(output.width / width, output.height / height);
 					drawFrame(context, image, logo, width, height, background, frame);
-				} else context.drawImage(image, 0, 0, outputWidth, outputHeight);
+				} else {
+					context.fillStyle = background;
+					context.fillRect(0, 0, output.width, output.height);
+					context.drawImage(image, 0, 0, output.width, output.height);
+				}
 				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
+					...output
 				};
 			} 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));
+				if (attempt === 2 || output.width === 1 && output.height === 1) throw error;
+				output = dimensions(ratio / 2 ** (attempt + 1));
 			} finally {
 				canvas.width = canvas.height = 0;
 			}
@@ -715,7 +803,7 @@ async function renderPng(dataUrl, width, height, background, frame) {
 	}
 }
 /** Render the real canvas at full detail without moving or changing the user's canvas. */
-async function captureFlowImage(model, language, options) {
+async function captureFlowImage(model, language, options, aspectRatio) {
 	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));
@@ -742,6 +830,7 @@ async function captureFlowImage(model, language, options) {
 	host.setAttribute("aria-hidden", "true");
 	document.body.append(host);
 	const root = createRoot(host);
+	let instance;
 	const store = new CanvasStore(snapshot, false, language, {
 		onMoveNodes: () => {},
 		onChangeComment: () => {}
@@ -753,12 +842,34 @@ async function captureFlowImage(model, language, options) {
 			dark: options.dark ?? false,
 			fitView: false,
 			layoutMotion: false,
-			nodesDraggable: false
+			nodesDraggable: false,
+			onInit: (value) => {
+				instance = value;
+			}
 		}))));
 		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);
+		if (options.layout === "compact" && store.$.direction.value === "vertical") {
+			await nextFrame();
+			await nextFrame();
+			const bounds = store.compactForExport({
+				width: contentPadding * 2 + (options.frame ? 40 : 0),
+				height: contentPadding * 2 + (options.frame ? 72 : 0)
+			}, instance, aspectRatio ? aspectRatio[0] / aspectRatio[1] : 1);
+			host.style.width = Math.ceil(bounds.width + contentPadding * 2 + 1e3) + "px";
+			host.style.height = Math.ceil(bounds.height + contentPadding * 2 + 1e3) + "px";
+			store.$$.viewport.set({
+				x: contentPadding - bounds.x,
+				y: contentPadding - bounds.y,
+				zoom: 1
+			});
+			await nextFrame();
+			await nextFrame();
+			hasImagePlaceholders = await prepareImages(host, deadline) || hasImagePlaceholders;
+			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, [data-canvas-bounds]")].map((node) => {
@@ -775,8 +886,13 @@ async function captureFlowImage(model, language, 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 naturalWidth = Math.ceil(right - left + contentPadding * 2);
+		const naturalHeight = Math.ceil(bottom - top + contentPadding * 2);
+		const frameWidth = options.frame ? 40 : 0;
+		const frameHeight = options.frame ? 72 : 0;
+		const units = aspectRatio ? Math.ceil(Math.max((naturalWidth + frameWidth) / aspectRatio[0], (naturalHeight + frameHeight) / aspectRatio[1])) : 0;
+		const width = aspectRatio ? units * aspectRatio[0] - frameWidth : naturalWidth;
+		const height = aspectRatio ? units * aspectRatio[1] - frameHeight : naturalHeight;
 		const background = getComputedStyle(host.querySelector(".react-flow")).backgroundColor;
 		const dataUrl = await toSvg(viewport, {
 			width,
@@ -784,8 +900,14 @@ async function captureFlowImage(model, language, options) {
 			imagePlaceholder,
 			preferredFontFormat: "woff2",
 			includeQueryParams: true,
+			includeStyleProperties: captureStyleProperties(viewport),
+			filter: (node) => {
+				if (!(node instanceof HTMLElement)) return true;
+				const style = getComputedStyle(node);
+				return style.display !== "none" && style.opacity !== "0";
+			},
 			style: {
-				transform: `translate(${contentPadding - left}px, ${contentPadding - top}px)`,
+				transform: `translate(${contentPadding + (width - naturalWidth) / 2 - left}px, ${contentPadding + (height - naturalHeight) / 2 - top}px)`,
 				transformOrigin: "0 0"
 			}
 		});
@@ -802,13 +924,11 @@ async function captureFlowImage(model, language, options) {
 			});
 			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"
@@ -816,8 +936,8 @@ async function captureFlowImage(model, language, options) {
 		}
 		return {
 			dataUrl,
-			width: width + (frame ? 40 : 0),
-			height: height + (frame ? 72 : 0),
+			width: width + frameWidth,
+			height: height + frameHeight,
 			background,
 			frame,
 			hasImagePlaceholders
@@ -829,17 +949,15 @@ async function captureFlowImage(model, language, options) {
 	}
 }
 async function flowToPng(model, language = "en", options = {}) {
-	const { dataUrl, width, height, background, frame, hasImagePlaceholders } = await captureFlowImage(model, language, options);
+	const aspectRatio = getFlowPngAspectRatio(options.aspectRatio);
+	const { dataUrl, width, height, background, frame, hasImagePlaceholders } = await captureFlowImage(model, language, options, aspectRatio);
 	return {
-		...await renderPng(dataUrl, width, height, background, frame),
+		...await renderPng(dataUrl, width, height, background, frame, aspectRatio),
 		hasImagePlaceholders
 	};
 }
-async function downloadFlowPng(model, title, language = "en", options = {}) {
-	const result = await flowToPng(model, language, {
-		...options,
-		title
-	});
+/** Download the exact image already rendered for preview. */
+function downloadPng(result, title) {
 	const url = URL.createObjectURL(result.blob);
 	const link = document.createElement("a");
 	try {
@@ -851,7 +969,6 @@ async function downloadFlowPng(model, title, language = "en", options = {}) {
 		link.remove();
 		setTimeout(() => URL.revokeObjectURL(url), 0);
 	}
-	return result;
 }
 //#endregion
-export { downloadFlowPng };
+export { downloadPng, flowToPng };