@oomol-lab/open-flow 0.1.0-beta.89 → 0.1.0-beta.90

package/dist/render/browser/runtime.js

@@ -8121,9 +8121,10 @@ var OpenFlowRenderer = (function(exports) {
 		return [width, height];
 	}
 	var ContentIcon_module_default = {
-		img: "ContentIcon_img_4e5d2",
-		initials: "ContentIcon_initials_4e5d2",
-		sprite: "ContentIcon_sprite_4e5d2"
+		img: "ContentIcon_img_e2c99",
+		pending: "ContentIcon_pending_e2c99",
+		initials: "ContentIcon_initials_e2c99",
+		sprite: "ContentIcon_sprite_e2c99"
 	};
 	//#endregion
 	//#region ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
@@ -23610,312 +23611,8 @@ var OpenFlowRenderer = (function(exports) {
 	/** Resource selection only; visual styling remains owned by theme.css. */
 	var IconThemeContext = (0, import_react$4.createContext)("light");
 	//#endregion
-	//#region src/ui/browser/icons/spriteResource.ts
-	function createResource(url) {
-		let status = "loading";
-		let started = false;
-		const listeners = /* @__PURE__ */ new Set();
-		return {
-			getSnapshot: () => status,
-			subscribe(listener) {
-				listeners.add(listener);
-				if (!started) {
-					started = true;
-					const finish = (next) => {
-						status = next;
-						for (const notify of listeners) notify();
-					};
-					if (typeof Image == "undefined") finish("failed");
-					else {
-						const image = new Image();
-						const settle = (next) => {
-							image.removeEventListener("load", loaded);
-							image.removeEventListener("error", failed);
-							finish(next);
-						};
-						const loaded = () => settle("loaded");
-						const failed = () => settle("failed");
-						image.addEventListener("load", loaded, { once: true });
-						image.addEventListener("error", failed, { once: true });
-						image.referrerPolicy = "no-referrer";
-						image.src = url;
-					}
-				}
-				return () => {
-					listeners.delete(listener);
-				};
-			}
-		};
-	}
-	var resources$1 = /* @__PURE__ */ new Map();
-	function spriteResource(url) {
-		let resource = resources$1.get(url);
-		if (!resource) {
-			resource = createResource(url);
-			resources$1.set(url, resource);
-		}
-		return resource;
-	}
-	var serverSnapshot = () => "loading";
-	function useSpriteStatus(url) {
-		const resource = spriteResource(url);
-		return (0, import_react$4.useSyncExternalStore)(resource.subscribe, resource.getSnapshot, serverSnapshot);
-	}
-	//#endregion
-	//#region src/ui/browser/icons/ContentIcon.tsx
-	/** Standalone image capture uses individual, cross-origin-readable images instead of sprites. */
-	var IconImageCrossOriginContext = (0, import_react$4.createContext)(void 0);
-	/** A bundled, theme-aware placeholder that does not load a remote icon. */
-	var placeholderIcon = "data:application/vnd.open-flow.placeholder-icon,";
-	var ContentIcon = ({ src, className, fallback = null, loading = "lazy", decoding = "async" }) => {
-		const crossOrigin = (0, import_react$4.useContext)(IconImageCrossOriginContext);
-		const sprite = (0, import_react$4.useMemo)(() => parseSpriteIcon(src), [src]);
-		const image = (0, import_react$4.useMemo)(() => parseImageIcon(src), [src]);
-		const source = image?.source ?? src;
-		const result = (0, import_react$4.useMemo)(() => parseIconifyIcon(source), [source]);
-		const [error, setError] = (0, import_react$4.useState)();
-		const onError = () => setError(source);
-		if (sprite) return crossOrigin ? /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(ContentIcon, {
-			className,
-			fallback,
-			loading,
-			decoding,
-			src: sprite.fallback
-		}) : /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(SpriteIcon, {
-			className,
-			fallback,
-			loading,
-			decoding,
-			sprite
-		});
-		if (source === "data:application/vnd.open-flow.placeholder-icon,") return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("i", {
-			"aria-hidden": "true",
-			className: clsx("i-lucide-light:plug", className)
-		});
-		if (source?.startsWith(initialsIconPrefix)) {
-			if (crossOrigin && fallback != null) return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(import_jsx_runtime$2.Fragment, { children: fallback });
-			return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("span", {
-				"data-icon-kind": "initials",
-				"aria-hidden": "true",
-				className: clsx(ContentIcon_module_default.initials, className),
-				children: /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("span", { children: source.slice(initialsIconPrefix.length) })
-			});
-		}
-		if (!source) return fallback;
-		if (source === error && crossOrigin && fallback != null) return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(import_jsx_runtime$2.Fragment, { children: fallback });
-		if (source === error) return image == null ? fallback : /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(ContentIcon, {
-			className,
-			fallback,
-			src: image.fallback,
-			loading,
-			decoding
-		});
-		return result ? /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(IconifyIcon, {
-			collection: result.collection,
-			icon: result.icon,
-			color: result.color,
-			className,
-			onError
-		}) : /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("img", {
-			className: clsx(ContentIcon_module_default.img, className),
-			src: source,
-			alt: "",
-			crossOrigin,
-			decoding,
-			loading,
-			referrerPolicy: "no-referrer",
-			onError
-		});
-	};
-	var initialsIconPrefix = "data:application/vnd.open-flow.initials,";
-	var imageIconPrefix = "data:application/vnd.open-flow.image-icon+json,";
-	function imageIcon(source, fallback) {
-		return `${imageIconPrefix}${encodeURIComponent(JSON.stringify({
-			fallback,
-			source
-		}))}`;
-	}
-	function parseImageIcon(src) {
-		if (!src?.startsWith(imageIconPrefix)) return;
-		try {
-			const value = JSON.parse(decodeURIComponent(src.slice(47)));
-			if (typeof value.fallback == "string" && typeof value.source == "string") return {
-				fallback: value.fallback,
-				source: value.source
-			};
-		} catch {
-			return;
-		}
-	}
-	function parseIconifyIcon(src) {
-		if (src && src.length > 2 && src[0] === ":" && src.endsWith(":")) {
-			const [, collection, icon, color] = src.split(":");
-			if (collection && icon) return {
-				collection,
-				icon,
-				color: color || "currentColor"
-			};
-		}
-		return null;
-	}
-	var spriteIconPrefix = "data:application/vnd.open-flow.sprite-icon+json,";
-	function spriteIcon(appearance, fallback) {
-		return `${spriteIconPrefix}${encodeURIComponent(JSON.stringify({
-			...appearance,
-			fallback
-		}))}`;
-	}
-	function parseSpriteIcon(src) {
-		if (!src?.startsWith(spriteIconPrefix)) return;
-		try {
-			const value = JSON.parse(decodeURIComponent(src.slice(48)));
-			const appearance = providerIconAppearance(value?.iconSprite, value?.iconSpritePosition);
-			if (appearance.iconSprite && appearance.iconSpritePosition && typeof value.fallback == "string") return {
-				iconSprite: appearance.iconSprite,
-				iconSpritePosition: appearance.iconSpritePosition,
-				fallback: value.fallback
-			};
-		} catch {
-			return;
-		}
-	}
-	function SpriteIcon({ sprite, ...props }) {
-		const theme = (0, import_react$4.useContext)(IconThemeContext);
-		const { iconSprite: m, iconSpritePosition: p } = sprite;
-		const url = theme == "dark" ? m.darkUrl : m.lightUrl;
-		const status = useSpriteStatus(url);
-		if (status == "failed") return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(ContentIcon, {
-			...props,
-			src: sprite.fallback
-		});
-		return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("span", {
-			"aria-hidden": "true",
-			"data-render-pending": status == "loading" || void 0,
-			className: clsx(ContentIcon_module_default.sprite, props.className),
-			children: status == "loaded" && /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("span", { style: {
-				backgroundImage: `url(${JSON.stringify(url)})`,
-				width: `${m.width / m.iconSize * 100}%`,
-				height: `${m.height / m.iconSize * 100}%`,
-				left: `${-p.x / m.iconSize * 100}%`,
-				top: `${-p.y / m.iconSize * 100}%`
-			} })
-		});
-	}
-	//#endregion
-	//#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 ../../node_modules/.bun/@wopjs+disposable@0.1.24/node_modules/@wopjs/disposable/dist/index.mjs
-	var isFn = (value) => !!(value && value.constructor && value.call && value.apply);
-	/**
-	* Check if a value is a {@link DisposableType}.
-	* @param value The value to check.
-	* @returns True if the value is a {@link DisposableType}, false otherwise.
-	*/
-	var isDisposable = (value) => isFn(value) || isFn(value?.dispose);
-	/**
-	* Dispose a disposable object or a disposer function. Log the error if any.
-	* @param disposable A disposable object or a disposer function. Do nothing otherwise.
-	*/
-	function dispose(disposable) {
-		try {
-			if (disposable) {
-				if (isFn(disposable.dispose)) disposable.dispose();
-				else if (isFn(disposable)) disposable();
-			}
-		} catch (e) {
-			console.error(e);
-		}
-	}
-	var isAbortable = (disposable) => isDisposable(disposable) && isFn(disposable.abortable);
-	/**
-	* Create a {@link DisposableStore} that manages {@link Disposer}s and {@link IDisposable}s.
-	*
-	* A {@link DisposableStore} is also a {@link Disposer}, which means it can be the `dispose` method of an {@link IDisposable}.
-	*
-	* A {@link DisposableStore} is also an {@link IDisposable}, which means it can be managed by another {@link DisposableStore}.
-	*
-	* @example
-	* ```ts
-	* import { type IDisposable, disposableStore } from "@wopjs/disposable";
-	*
-	* class A implements IDisposable {
-	*   dispose = disposableStore()
-	*   constructor() {
-	*     this.dispose.add(...);
-	*   }
-	* }
-	*
-	* class B implements IDisposable {
-	*   dispose = disposableStore()
-	*   a = this.dispose.add(new A())
-	*   constructor() {
-	*     this.dispose.add(...);
-	*  }
-	* }
-	*
-	* const b = new B();
-	* b.dispose(); // dispose both `b` and `b.a`.
-	* ```
-	*
-	* @param disposables Optional array of {@link DisposableType}s added to the store.
-	* @returns A disposable store.
-	*/
-	function disposableStore(disposables) {
-		let isDisposing;
-		function disposableStore() {
-			if (!isDisposing) {
-				isDisposing = 1;
-				isDisposing = disposableStore._disposables_ = disposableStore._disposables_?.forEach(dispose);
-			}
-		}
-		disposableStore.dispose = disposableStore;
-		disposableStore.size = size$3;
-		disposableStore.has = has$2;
-		disposableStore.add = add$1;
-		disposableStore.make = make;
-		disposableStore.remove = remove$1;
-		disposableStore.flush = flush$1;
-		if (disposables) disposableStore.add(disposables);
-		return disposableStore;
-	}
-	function _addOne(disposable) {
-		if (!this._disposables_?.has(disposable)) {
-			(this._disposables_ ??= /* @__PURE__ */ new Set()).add(disposable);
-			if (isAbortable(disposable)) disposable.abortable(remove$1.bind(this, disposable));
-		}
-	}
-	function add$1(disposables) {
-		Array.isArray(disposables) ? disposables.forEach(_addOne, this) : _addOne.call(this, disposables);
-		return disposables;
-	}
-	function flush$1(disposable) {
-		dispose(disposable ? this.remove(disposable) && disposable : this);
-	}
-	function has$2(disposable) {
-		return !!this._disposables_?.has(disposable);
-	}
-	function make(executor) {
-		const disposable = executor();
-		return disposable && this.add(disposable);
-	}
-	function remove$1(disposable) {
-		return !!this._disposables_?.delete(disposable);
-	}
-	function size$3() {
-		return this._disposables_?.size || 0;
-	}
-	//#endregion
 	//#region ../../node_modules/.bun/value-enhancer@5.7.2/node_modules/value-enhancer/dist/index.mjs
-	var INIT_VALUE, identity$4, strictEqual, arrayShallowEqual, getValue, getValues, getValVersion, invoke, attachSetter, isVal, tick, pendingTasks1, pendingTasks2, pendingTasks, pending, flush, schedule, cancelTask, registry$1, ValAgent, RefValAgent, ValImpl, readonlyVal, val, from$1, combine$1, compute, derive;
+	var INIT_VALUE, identity$4, strictEqual, arrayShallowEqual, getValue, getValues, getValVersion, invoke, attachSetter, isVal, tick, pendingTasks1, pendingTasks2, pendingTasks, pending, flush$1, schedule, cancelTask, registry$1, ValAgent, RefValAgent, ValImpl, readonlyVal, val, from$1, combine$1, compute, derive;
 	var init_dist$3 = __esmMin((() => {
 		INIT_VALUE = {};
 		identity$4 = (value) => value;
@@ -23944,7 +23641,7 @@ var OpenFlowRenderer = (function(exports) {
 		pendingTasks1 = /* @__PURE__ */ new Set();
 		pendingTasks2 = /* @__PURE__ */ new Set();
 		pendingTasks = pendingTasks1;
-		flush = () => {
+		flush$1 = () => {
 			const currentPendingTasks = pendingTasks;
 			pendingTasks = pendingTasks === pendingTasks1 ? pendingTasks2 : pendingTasks1;
 			pending = false;
@@ -23953,7 +23650,7 @@ var OpenFlowRenderer = (function(exports) {
 		};
 		schedule = (task) => {
 			pendingTasks.add(task);
-			pending = pending || tick.then(flush);
+			pending = pending || tick.then(flush$1);
 		};
 		cancelTask = (task) => pendingTasks.delete(task);
 		registry$1 = /* @__PURE__ */ new FinalizationRegistry(invoke);
@@ -24268,6 +23965,658 @@ var OpenFlowRenderer = (function(exports) {
 		};
 	}));
 	//#endregion
+	//#region ../../node_modules/.bun/use-value-enhancer@5.0.7+5fffd67310d91248/node_modules/use-value-enhancer/dist/use-value-enhancer.mjs
+	var import_react$3, getVal, noop$3, returnsNoop, defaultArgs, useValWithUseSyncExternalStore, useValWithUseEffect, useVal;
+	var init_use_value_enhancer = __esmMin((() => {
+		import_react$3 = /* @__PURE__ */ __toESM(require_react(), 1);
+		init_dist$3();
+		getVal = ($) => isVal($) ? $ : isVal($ == null ? void 0 : $.$) ? $.$ : void 0;
+		noop$3 = () => {};
+		returnsNoop = () => noop$3;
+		defaultArgs = [returnsNoop, returnsNoop];
+		useValWithUseSyncExternalStore = (v, eager = true) => {
+			const args = (0, import_react$3.useMemo)(() => {
+				const v$2 = getVal(v);
+				return v$2 && [
+					(onChange) => v$2.subscribe(onChange, eager),
+					() => v$2.$version,
+					v$2
+				];
+			}, [v, eager]);
+			const [subscriber, getSnapshot, v$] = args != null ? args : defaultArgs;
+			const version = import_react$3.useSyncExternalStore(subscriber, getSnapshot, getSnapshot);
+			const value = (0, import_react$3.useMemo)(() => v$ ? v$.get() : v, [
+				version,
+				v$,
+				v
+			]);
+			(0, import_react$3.useDebugValue)(value);
+			return value;
+		};
+		useValWithUseEffect = (v, eager = true) => {
+			const v$ = (0, import_react$3.useMemo)(() => getVal(v), [v]);
+			const [version, setVersion] = (0, import_react$3.useState)(() => v$ == null ? void 0 : v$.$version);
+			(0, import_react$3.useEffect)(() => {
+				if (v$) {
+					const versionSetter = () => v$.$version;
+					return v$.subscribe(() => setVersion(versionSetter), eager);
+				}
+			}, [v$, eager]);
+			const value = (0, import_react$3.useMemo)(() => v$ ? v$.get() : v, [
+				version,
+				v$,
+				v
+			]);
+			(0, import_react$3.useDebugValue)(value);
+			return value;
+		};
+		useVal = /* @__PURE__ */ (() => import_react$3.useSyncExternalStore ? useValWithUseSyncExternalStore : useValWithUseEffect)();
+	}));
+	//#endregion
+	//#region src/connector/common/providerIconCache.ts
+	init_use_value_enhancer();
+	var defaultMaxAgeMs = 864e5;
+	var dataUrl = (entry) => `data:${entry.contentType};base64,${entry.body}`;
+	function decodeRecord(value) {
+		if (value == null || typeof value !== "object") return;
+		const v = value;
+		if (v.formatVersion !== 1 || typeof v.sourceUrl !== "string" || !(v.spriteVersion === null || typeof v.spriteVersion === "string") || typeof v.contentType !== "string" || !/^image\/[\w.+-]+$/i.test(v.contentType) || typeof v.body !== "string" || !v.body || v.body.length % 4 !== 0 || !/^[A-Za-z0-9+/]*={0,2}$/.test(v.body) || !(v.etag === null || typeof v.etag === "string") || !Number.isFinite(v.validatedAt) || v.validatedAt < 0 || !(v.maxAgeMs === null || Number.isFinite(v.maxAgeMs) && v.maxAgeMs >= 0)) return;
+		return v;
+	}
+	function encodeBytes(bytes) {
+		let text = "";
+		for (let index = 0; index < bytes.length; index += 8192) text += String.fromCharCode(...bytes.subarray(index, index + 8192));
+		return btoa(text);
+	}
+	function freshness(response, immutable, previous) {
+		const control = response.headers.get("cache-control") ?? "";
+		if (/\bno-cache\b/i.test(control)) return 0;
+		if (immutable) return null;
+		const maxAge = /(?:^|,)\s*max-age\s*=\s*"?(\d+)/i.exec(control);
+		if (maxAge) return Math.max(0, Number(maxAge[1]) * 1e3 - (Number(response.headers.get("age")) || 0) * 1e3);
+		const expires = Date.parse(response.headers.get("expires") ?? "");
+		if (Number.isFinite(expires)) return Math.max(0, expires - Date.parse(response.headers.get("date") ?? (/* @__PURE__ */ new Date()).toUTCString()));
+		return previous?.maxAgeMs ?? defaultMaxAgeMs;
+	}
+	/** Complete image responses in bounded, identity-checked slots; no catalog entities live here. */
+	var ProviderIconCache = class {
+		#memory = /* @__PURE__ */ new Map();
+		#pending = /* @__PURE__ */ new Map();
+		#targets = /* @__PURE__ */ new Map();
+		#writes = /* @__PURE__ */ new Map();
+		constructor(options) {
+			this.options = options;
+			if (!options.scope.trim()) throw new TypeError("Provider icon cache scope must be nonempty.");
+		}
+		get(request, options = {}) {
+			if (request.url.startsWith("data:image/")) return Promise.resolve(request.url);
+			let protocol;
+			try {
+				protocol = new URL(request.url).protocol;
+			} catch (error) {
+				return Promise.reject(error);
+			}
+			if (!["http:", "https:"].includes(protocol)) return Promise.reject(/* @__PURE__ */ new TypeError("Unsupported Provider icon URL."));
+			const slot = JSON.stringify([
+				"open-flow:provider-icons",
+				1,
+				this.options.scope,
+				request.kind,
+				request.kind === "sprite" ? request.theme : request.providerId
+			]);
+			const version = request.kind === "sprite" ? request.version : null;
+			const identity = JSON.stringify([request.url, version]);
+			const offline = options.allowNetwork === false || this.options.mode === "offline";
+			const key = JSON.stringify([
+				slot,
+				identity,
+				offline
+			]);
+			const pending = this.#pending.get(key);
+			if (pending) return pending;
+			if (!offline) this.#targets.set(slot, identity);
+			const promise = this.#load(slot, identity, request.url, version, offline).finally(() => this.#pending.delete(key));
+			this.#pending.set(key, promise);
+			return promise;
+		}
+		async #read(slot, url, version) {
+			const memory = this.#memory.get(slot);
+			if (this.#memory.has(slot) && (!memory || memory.sourceUrl === url && memory.spriteVersion === version)) return memory;
+			if (!this.options.delegate) return this.#memory.get(slot);
+			try {
+				const stored = await this.options.delegate.get(slot);
+				if (stored === void 0) return this.#memory.get(slot);
+				const entry = decodeRecord(stored);
+				if (entry) {
+					this.#memory.set(slot, entry);
+					return entry;
+				}
+				this.#memory.delete(slot);
+				await this.options.delegate.delete(slot);
+			} catch {
+				return this.#memory.get(slot);
+			}
+		}
+		async #store(slot, identity, entry) {
+			const operation = (this.#writes.get(slot) ?? Promise.resolve()).then(async () => {
+				if (this.#targets.get(slot) !== identity) return;
+				this.#memory.set(slot, entry);
+				if (!this.options.delegate) return;
+				try {
+					if (entry) await this.options.delegate.set(slot, { ...entry });
+					else await this.options.delegate.delete(slot);
+				} catch {}
+			});
+			this.#writes.set(slot, operation);
+			try {
+				await operation;
+			} finally {
+				if (this.#writes.get(slot) === operation) this.#writes.delete(slot);
+			}
+		}
+		async #load(slot, identity, url, version, offline) {
+			const stored = await this.#read(slot, url, version);
+			const cached = stored?.sourceUrl === url && stored.spriteVersion === version ? stored : void 0;
+			const age = cached == null ? Infinity : Date.now() - cached.validatedAt;
+			if (cached && (offline || this.options.mode !== "refresh" && age >= 0 && (cached.maxAgeMs === null || age < cached.maxAgeMs))) return dataUrl(cached);
+			if (offline) throw new Error(`Provider icon is not cached: ${url}`);
+			const response = await (this.options.fetch ?? globalThis.fetch)(url, {
+				credentials: "omit",
+				referrerPolicy: "no-referrer",
+				signal: AbortSignal.timeout(15e3),
+				headers: cached?.etag ? { "if-none-match": cached.etag } : {}
+			});
+			if (response.status !== 304 && !response.ok) throw new Error(`Could not load Provider icon: ${response.status}`);
+			if (response.status === 304 && !cached) throw new Error("Provider icon returned 304 without a cached image.");
+			const contentType = response.status === 304 ? cached.contentType : response.headers.get("content-type")?.split(";")[0]?.trim().toLowerCase();
+			if (!contentType || !/^image\/[\w.+-]+$/i.test(contentType)) throw new Error("Provider icon response is not an image.");
+			const body = response.status === 304 ? cached.body : encodeBytes(new Uint8Array(await response.arrayBuffer()));
+			if (!body) throw new Error("Provider icon response is empty.");
+			const entry = {
+				formatVersion: 1,
+				sourceUrl: url,
+				spriteVersion: version,
+				contentType,
+				body,
+				etag: response.headers.get("etag") ?? (response.status === 304 ? cached.etag : null),
+				validatedAt: Date.now(),
+				maxAgeMs: freshness(response, version !== null, response.status === 304 ? cached : void 0)
+			};
+			await this.#store(slot, identity, /\bno-store\b/i.test(response.headers.get("cache-control") ?? "") ? void 0 : entry);
+			return dataUrl(entry);
+		}
+	};
+	//#endregion
+	//#region src/ui/browser/icons/providerIconResource.ts
+	init_dist$3();
+	var ProviderIconCacheContext = (0, import_react$4.createContext)(void 0);
+	/** IDB holds the same opaque JSON records as a host's disk delegate. */
+	function indexedDbIconDelegate() {
+		let database;
+		function open() {
+			database ??= new Promise((resolve, reject) => {
+				const request = indexedDB.open("open-flow-provider-icons", 1);
+				request.addEventListener("upgradeneeded", () => request.result.createObjectStore("icons"), { once: true });
+				request.addEventListener("error", () => reject(request.error), { once: true });
+				request.addEventListener("blocked", () => reject(/* @__PURE__ */ new Error("Provider icon cache is blocked.")), { once: true });
+				request.addEventListener("success", () => {
+					const db = request.result;
+					db.addEventListener("versionchange", () => {
+						db.close();
+						database = void 0;
+					}, { once: true });
+					resolve(db);
+				}, { once: true });
+			}).catch((error) => {
+				database = void 0;
+				throw error;
+			});
+			return database;
+		}
+		async function transaction(mode, operation) {
+			const db = await open();
+			return new Promise((resolve, reject) => {
+				const tx = db.transaction("icons", mode);
+				const request = operation(tx.objectStore("icons"));
+				tx.addEventListener("complete", () => resolve(request.result), { once: true });
+				tx.addEventListener("abort", () => reject(tx.error ?? request.error), { once: true });
+				tx.addEventListener("error", () => reject(tx.error ?? request.error), { once: true });
+			});
+		}
+		return {
+			get: (key) => transaction("readonly", (store) => store.get(key)),
+			set: async (key, value) => {
+				await transaction("readwrite", (store) => store.put(value, key));
+			},
+			delete: async (key) => {
+				await transaction("readwrite", (store) => store.delete(key));
+			}
+		};
+	}
+	var browserCache;
+	function defaultBrowserIconCache() {
+		return browserCache ??= new ProviderIconCache({
+			scope: "browser",
+			delegate: indexedDbIconDelegate()
+		});
+	}
+	function useProviderIconCache() {
+		return (0, import_react$4.useContext)(ProviderIconCacheContext) ?? defaultBrowserIconCache();
+	}
+	var loading = { status: "loading" };
+	function createIconResource(cache, request, ready) {
+		const state = val(ready ?? loading);
+		let pending;
+		return {
+			state,
+			refresh() {
+				if (pending) return pending;
+				const previous = state.value.status === "loaded" ? state.value : void 0;
+				if (previous) state.set({
+					...previous,
+					refreshing: true
+				});
+				else if (state.value.status === "failed") state.set(loading);
+				pending = (async () => {
+					let image;
+					try {
+						const url = await cache.get(request);
+						if (previous?.url === url) {
+							state.set({
+								...previous,
+								refreshing: false
+							});
+							return;
+						}
+						image = new Image();
+						image.src = url;
+						await image.decode();
+						state.set({
+							status: "loaded",
+							url,
+							image
+						});
+					} catch {
+						if (image) image.src = "";
+						state.set(previous ? {
+							...previous,
+							refreshing: false
+						} : { status: "failed" });
+					}
+				})().finally(() => {
+					pending = void 0;
+				});
+				return pending;
+			}
+		};
+	}
+	var resources$1 = /* @__PURE__ */ new WeakMap();
+	/** Components read ready state synchronously; only the shared owner fetches and decodes. */
+	function useProviderIconResource(request, crop) {
+		const cache = useProviderIconCache();
+		const slot = JSON.stringify([request.kind, request.kind === "sprite" ? request.theme : request.providerId]);
+		const identity = JSON.stringify([
+			slot,
+			request.url,
+			request.kind === "sprite" ? request.version : null
+		]);
+		const previous = (0, import_react$4.useRef)();
+		const resource = (0, import_react$4.useMemo)(() => {
+			let slots = resources$1.get(cache);
+			if (!slots) {
+				slots = /* @__PURE__ */ new Map();
+				resources$1.set(cache, slots);
+			}
+			let current = slots.get(slot);
+			if (current?.identity !== identity) {
+				const value = previous.current?.identity === identity ? previous.current.resource.state.value : void 0;
+				current = {
+					identity,
+					resource: createIconResource(cache, request, value?.status === "loaded" ? value : void 0)
+				};
+				slots.set(slot, current);
+			}
+			previous.current = current;
+			return current.resource;
+		}, [cache, identity]);
+		const state = useVal(resource.state);
+		(0, import_react$4.useEffect)(() => {
+			resource.refresh();
+		}, [resource]);
+		return (0, import_react$4.useMemo)(() => {
+			if (state.status !== "loaded" || !crop) return state;
+			const canvas = document.createElement("canvas");
+			try {
+				canvas.width = canvas.height = crop.size;
+				const context = canvas.getContext("2d");
+				if (!context) throw new Error("Could not crop the Provider icon.");
+				context.drawImage(state.image, crop.x, crop.y, crop.size, crop.size, 0, 0, crop.size, crop.size);
+				return {
+					...state,
+					url: canvas.toDataURL("image/png")
+				};
+			} catch {
+				return { status: "failed" };
+			} finally {
+				canvas.width = canvas.height = 0;
+			}
+		}, [
+			state,
+			crop?.x,
+			crop?.y,
+			crop?.size
+		]);
+	}
+	//#endregion
+	//#region src/ui/browser/icons/ContentIcon.tsx
+	/** Standalone image capture crops sprites and uses cross-origin-readable images. */
+	var IconImageCrossOriginContext = (0, import_react$4.createContext)(void 0);
+	/** A bundled, theme-aware placeholder that does not load a remote icon. */
+	var placeholderIcon = "data:application/vnd.open-flow.placeholder-icon,";
+	var ContentIcon = ({ src, className, fallback = null, loading = "lazy", decoding = "async" }) => {
+		const crossOrigin = (0, import_react$4.useContext)(IconImageCrossOriginContext);
+		const sprite = (0, import_react$4.useMemo)(() => parseSpriteIcon(src), [src]);
+		const image = (0, import_react$4.useMemo)(() => parseImageIcon(src), [src]);
+		const source = image?.source ?? src;
+		const result = (0, import_react$4.useMemo)(() => parseIconifyIcon(source), [source]);
+		const [error, setError] = (0, import_react$4.useState)();
+		const onError = () => setError(source);
+		if (sprite) return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(SpriteIcon, {
+			className,
+			fallback,
+			loading,
+			decoding,
+			sprite
+		});
+		if (image?.providerId) return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(ProviderImage, {
+			className,
+			fallback,
+			loading,
+			decoding,
+			image
+		});
+		if (source === "data:application/vnd.open-flow.placeholder-icon,") return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("i", {
+			"aria-hidden": "true",
+			className: clsx("i-lucide-light:plug", className)
+		});
+		if (source?.startsWith(initialsIconPrefix)) {
+			if (crossOrigin && fallback != null) return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(import_jsx_runtime$2.Fragment, { children: fallback });
+			return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("span", {
+				"data-icon-kind": "initials",
+				"aria-hidden": "true",
+				className: clsx(ContentIcon_module_default.initials, className),
+				children: /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("span", { children: source.slice(initialsIconPrefix.length) })
+			});
+		}
+		if (!source) return fallback;
+		if (source === error && crossOrigin && fallback != null) return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(import_jsx_runtime$2.Fragment, { children: fallback });
+		if (source === error) return image == null ? fallback : /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(ContentIcon, {
+			className,
+			fallback,
+			src: image.fallback,
+			loading,
+			decoding
+		});
+		return result ? /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(IconifyIcon, {
+			collection: result.collection,
+			icon: result.icon,
+			color: result.color,
+			className,
+			onError
+		}) : /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("img", {
+			className: clsx(ContentIcon_module_default.img, className),
+			src: source,
+			alt: "",
+			crossOrigin,
+			decoding,
+			loading,
+			referrerPolicy: "no-referrer",
+			onError
+		});
+	};
+	var initialsIconPrefix = "data:application/vnd.open-flow.initials,";
+	var imageIconPrefix = "data:application/vnd.open-flow.image-icon+json,";
+	function imageIcon(source, fallback, providerId) {
+		return `${imageIconPrefix}${encodeURIComponent(JSON.stringify({
+			fallback,
+			source,
+			...providerId == null ? {} : { providerId }
+		}))}`;
+	}
+	function parseImageIcon(src) {
+		if (!src?.startsWith(imageIconPrefix)) return;
+		try {
+			const value = JSON.parse(decodeURIComponent(src.slice(47)));
+			if (typeof value.fallback == "string" && typeof value.source == "string") return {
+				fallback: value.fallback,
+				source: value.source,
+				...typeof value.providerId === "string" ? { providerId: value.providerId } : {}
+			};
+		} catch {
+			return;
+		}
+	}
+	function parseIconifyIcon(src) {
+		if (src && src.length > 2 && src[0] === ":" && src.endsWith(":")) {
+			const [, collection, icon, color] = src.split(":");
+			if (collection && icon) return {
+				collection,
+				icon,
+				color: color || "currentColor"
+			};
+		}
+		return null;
+	}
+	var spriteIconPrefix = "data:application/vnd.open-flow.sprite-icon+json,";
+	function spriteIcon(appearance, fallback) {
+		return `${spriteIconPrefix}${encodeURIComponent(JSON.stringify({
+			...appearance,
+			fallback
+		}))}`;
+	}
+	function parseSpriteIcon(src) {
+		if (!src?.startsWith(spriteIconPrefix)) return;
+		try {
+			const value = JSON.parse(decodeURIComponent(src.slice(48)));
+			const appearance = providerIconAppearance(value?.iconSprite, value?.iconSpritePosition);
+			if (appearance.iconSprite && appearance.iconSpritePosition && typeof value.fallback == "string") return {
+				iconSprite: appearance.iconSprite,
+				iconSpritePosition: appearance.iconSpritePosition,
+				fallback: value.fallback
+			};
+		} catch {
+			return;
+		}
+	}
+	function SpriteIcon({ sprite, ...props }) {
+		const theme = (0, import_react$4.useContext)(IconThemeContext);
+		const capture = (0, import_react$4.useContext)(IconImageCrossOriginContext) != null;
+		const { iconSprite: m, iconSpritePosition: p } = sprite;
+		const resource = useProviderIconResource({
+			kind: "sprite",
+			theme,
+			url: theme == "dark" ? m.darkUrl : m.lightUrl,
+			version: m.version
+		}, capture ? {
+			x: p.x,
+			y: p.y,
+			size: m.iconSize
+		} : void 0);
+		if (resource.status == "failed") return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(ContentIcon, {
+			...props,
+			src: sprite.fallback
+		});
+		if (resource.status === "loading") return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(PendingIcon, {
+			className: props.className,
+			fallback: props.fallback
+		});
+		if (capture) return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("img", {
+			alt: "",
+			className: clsx(ContentIcon_module_default.img, props.className),
+			"data-render-pending": resource.refreshing || void 0,
+			src: resource.url,
+			decoding: "sync"
+		});
+		return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("span", {
+			"aria-hidden": "true",
+			"data-render-pending": resource.refreshing || void 0,
+			className: clsx(ContentIcon_module_default.sprite, props.className),
+			children: /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("span", { style: {
+				backgroundImage: `url(${JSON.stringify(resource.url)})`,
+				width: `${m.width / m.iconSize * 100}%`,
+				height: `${m.height / m.iconSize * 100}%`,
+				left: `${-p.x / m.iconSize * 100}%`,
+				top: `${-p.y / m.iconSize * 100}%`
+			} })
+		});
+	}
+	function ProviderImage({ image, ...props }) {
+		const resource = useProviderIconResource({
+			kind: "image",
+			providerId: image.providerId,
+			url: image.source
+		});
+		if (resource.status === "failed") return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(ContentIcon, {
+			...props,
+			src: image.fallback
+		});
+		if (resource.status === "loading") return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(PendingIcon, {
+			className: props.className,
+			fallback: props.fallback
+		});
+		return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("img", {
+			alt: "",
+			className: clsx(ContentIcon_module_default.img, props.className),
+			"data-render-pending": resource.refreshing || void 0,
+			src: resource.url,
+			loading: props.loading,
+			decoding: props.decoding
+		});
+	}
+	function PendingIcon({ className, fallback }) {
+		return /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)("span", {
+			"aria-hidden": "true",
+			className: clsx(ContentIcon_module_default.pending, className),
+			"data-render-pending": true,
+			children: fallback ?? /* @__PURE__ */ (0, import_jsx_runtime$2.jsx)(ContentIcon, {
+				src: "data:application/vnd.open-flow.placeholder-icon,",
+				className
+			})
+		});
+	}
+	//#endregion
+	//#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 ../../node_modules/.bun/@wopjs+disposable@0.1.24/node_modules/@wopjs/disposable/dist/index.mjs
+	var isFn = (value) => !!(value && value.constructor && value.call && value.apply);
+	/**
+	* Check if a value is a {@link DisposableType}.
+	* @param value The value to check.
+	* @returns True if the value is a {@link DisposableType}, false otherwise.
+	*/
+	var isDisposable = (value) => isFn(value) || isFn(value?.dispose);
+	/**
+	* Dispose a disposable object or a disposer function. Log the error if any.
+	* @param disposable A disposable object or a disposer function. Do nothing otherwise.
+	*/
+	function dispose(disposable) {
+		try {
+			if (disposable) {
+				if (isFn(disposable.dispose)) disposable.dispose();
+				else if (isFn(disposable)) disposable();
+			}
+		} catch (e) {
+			console.error(e);
+		}
+	}
+	var isAbortable = (disposable) => isDisposable(disposable) && isFn(disposable.abortable);
+	/**
+	* Create a {@link DisposableStore} that manages {@link Disposer}s and {@link IDisposable}s.
+	*
+	* A {@link DisposableStore} is also a {@link Disposer}, which means it can be the `dispose` method of an {@link IDisposable}.
+	*
+	* A {@link DisposableStore} is also an {@link IDisposable}, which means it can be managed by another {@link DisposableStore}.
+	*
+	* @example
+	* ```ts
+	* import { type IDisposable, disposableStore } from "@wopjs/disposable";
+	*
+	* class A implements IDisposable {
+	*   dispose = disposableStore()
+	*   constructor() {
+	*     this.dispose.add(...);
+	*   }
+	* }
+	*
+	* class B implements IDisposable {
+	*   dispose = disposableStore()
+	*   a = this.dispose.add(new A())
+	*   constructor() {
+	*     this.dispose.add(...);
+	*  }
+	* }
+	*
+	* const b = new B();
+	* b.dispose(); // dispose both `b` and `b.a`.
+	* ```
+	*
+	* @param disposables Optional array of {@link DisposableType}s added to the store.
+	* @returns A disposable store.
+	*/
+	function disposableStore(disposables) {
+		let isDisposing;
+		function disposableStore() {
+			if (!isDisposing) {
+				isDisposing = 1;
+				isDisposing = disposableStore._disposables_ = disposableStore._disposables_?.forEach(dispose);
+			}
+		}
+		disposableStore.dispose = disposableStore;
+		disposableStore.size = size$3;
+		disposableStore.has = has$2;
+		disposableStore.add = add$1;
+		disposableStore.make = make;
+		disposableStore.remove = remove$1;
+		disposableStore.flush = flush;
+		if (disposables) disposableStore.add(disposables);
+		return disposableStore;
+	}
+	function _addOne(disposable) {
+		if (!this._disposables_?.has(disposable)) {
+			(this._disposables_ ??= /* @__PURE__ */ new Set()).add(disposable);
+			if (isAbortable(disposable)) disposable.abortable(remove$1.bind(this, disposable));
+		}
+	}
+	function add$1(disposables) {
+		Array.isArray(disposables) ? disposables.forEach(_addOne, this) : _addOne.call(this, disposables);
+		return disposables;
+	}
+	function flush(disposable) {
+		dispose(disposable ? this.remove(disposable) && disposable : this);
+	}
+	function has$2(disposable) {
+		return !!this._disposables_?.has(disposable);
+	}
+	function make(executor) {
+		const disposable = executor();
+		return disposable && this.add(disposable);
+	}
+	function remove$1(disposable) {
+		return !!this._disposables_?.delete(disposable);
+	}
+	function size$3() {
+		return this._disposables_?.size || 0;
+	}
+	//#endregion
 	//#region ../../node_modules/.bun/value-enhancer@5.7.2/node_modules/value-enhancer/dist/collections.mjs
 	init_dist$3();
 	var ReactiveMapImpl = class extends Map {
@@ -33666,56 +34015,7 @@ var OpenFlowRenderer = (function(exports) {
 		return [...properties].toSorted();
 	}
 	//#endregion
-	//#region ../../node_modules/.bun/use-value-enhancer@5.0.7+5fffd67310d91248/node_modules/use-value-enhancer/dist/use-value-enhancer.mjs
-	var import_react$3, getVal, noop$3, returnsNoop, defaultArgs, useValWithUseSyncExternalStore, useValWithUseEffect, useVal;
-	var init_use_value_enhancer = __esmMin((() => {
-		import_react$3 = /* @__PURE__ */ __toESM(require_react(), 1);
-		init_dist$3();
-		getVal = ($) => isVal($) ? $ : isVal($ == null ? void 0 : $.$) ? $.$ : void 0;
-		noop$3 = () => {};
-		returnsNoop = () => noop$3;
-		defaultArgs = [returnsNoop, returnsNoop];
-		useValWithUseSyncExternalStore = (v, eager = true) => {
-			const args = (0, import_react$3.useMemo)(() => {
-				const v$2 = getVal(v);
-				return v$2 && [
-					(onChange) => v$2.subscribe(onChange, eager),
-					() => v$2.$version,
-					v$2
-				];
-			}, [v, eager]);
-			const [subscriber, getSnapshot, v$] = args != null ? args : defaultArgs;
-			const version = import_react$3.useSyncExternalStore(subscriber, getSnapshot, getSnapshot);
-			const value = (0, import_react$3.useMemo)(() => v$ ? v$.get() : v, [
-				version,
-				v$,
-				v
-			]);
-			(0, import_react$3.useDebugValue)(value);
-			return value;
-		};
-		useValWithUseEffect = (v, eager = true) => {
-			const v$ = (0, import_react$3.useMemo)(() => getVal(v), [v]);
-			const [version, setVersion] = (0, import_react$3.useState)(() => v$ == null ? void 0 : v$.$version);
-			(0, import_react$3.useEffect)(() => {
-				if (v$) {
-					const versionSetter = () => v$.$version;
-					return v$.subscribe(() => setVersion(versionSetter), eager);
-				}
-			}, [v$, eager]);
-			const value = (0, import_react$3.useMemo)(() => v$ ? v$.get() : v, [
-				version,
-				v$,
-				v
-			]);
-			(0, import_react$3.useDebugValue)(value);
-			return value;
-		};
-		useVal = /* @__PURE__ */ (() => import_react$3.useSyncExternalStore ? useValWithUseSyncExternalStore : useValWithUseEffect)();
-	}));
-	//#endregion
 	//#region src/canvas/browser/components/minimap.tsx
-	init_use_value_enhancer();
 	var NodeMiniMapContext = /*#__PURE__*/ (0, import_react$4.createContext)(NodeMiniMapPhase.None);
 	var NodeMiniMapProvider = /*#__PURE__*/ (() => NodeMiniMapContext.Provider)();
 	function useNodeMiniMapPhase() {
@@ -56607,6 +56907,7 @@ var OpenFlowRenderer = (function(exports) {
 	}
 	//#endregion
 	//#region src/canvas/browser/graph/Edges/BasicEdge.tsx
+	init_use_value_enhancer();
 	function BasicEdge(props) {
 		const arrowId = (0, import_react$4.useId)().replaceAll(":", "");
 		const edgeStore = props.data?.store;
@@ -250389,7 +250690,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 		});
 		store.reconcile(snapshot, false, language, [], options.ignoredNodeIds ?? []);
 		try {
-			root.render((0, import_react$4.createElement)(IconifyProvider, null, (0, import_react$4.createElement)(IconImageCrossOriginContext.Provider, { value: "anonymous" }, (0, import_react$4.createElement)(FlowCanvas, {
+			root.render((0, import_react$4.createElement)(ProviderIconCacheContext.Provider, { value: options.iconCache }, (0, import_react$4.createElement)(IconifyProvider, null, (0, import_react$4.createElement)(IconImageCrossOriginContext.Provider, { value: "anonymous" }, (0, import_react$4.createElement)(FlowCanvas, {
 				flowCanvasStore: store,
 				dark: options.dark ?? false,
 				fitView: false,
@@ -250398,7 +250699,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				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);
@@ -265686,7 +265987,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 	//#region src/workbench/browser/runtime/providerIcon.ts
 	function providerIcon(provider) {
 		const source = provider.icon?.trim();
-		const original = source ? imageIcon(source, placeholderIcon) : placeholderIcon;
+		const original = source ? imageIcon(source, placeholderIcon, provider.serviceId) : placeholderIcon;
 		const appearance = providerIconAppearance(provider.iconSprite, provider.iconSpritePosition);
 		return appearance?.iconSprite && appearance.iconSpritePosition ? spriteIcon({
 			iconSprite: appearance.iconSprite,
@@ -267722,19 +268023,20 @@ export function identity(value) { return value }
 	//#endregion
 	//#region src/render/browser/runtime.ts
 	/** Runs only inside the caller's Chromium, using the same renderer as Workbench. */
-	async function render({ workflow, options }) {
+	async function render({ workflow, options, providers }) {
 		const language = options.language ?? "en";
 		document.documentElement.lang = language;
 		document.body.className = "open-flow-theme open-flow-workbench";
 		document.body.dataset.theme = options.dark ? "dark" : "light";
 		const i18n = createI18n(language);
 		try {
-			const result = await flowToPng(designerGraph(workflow, workflow.presentation, [], {}, {}, i18n.t), language, {
+			const result = await flowToPng(designerGraph(workflow, workflow.presentation, [], {}, {}, i18n.t, void 0, [], Object.fromEntries((providers ?? []).map((provider) => [provider.serviceId, provider]))), language, {
 				layout: options.layout,
 				aspectRatio: options.aspectRatio,
 				dark: options.dark,
 				frame: options.frame,
-				title: options.title ?? workflow.name ?? "Workflow"
+				title: options.title ?? workflow.name ?? "Workflow",
+				iconCache: { get: (request) => globalThis.OpenFlowProviderIcon(request) }
 			});
 			return {
 				dataUrl: await new Promise((resolve, reject) => {