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

package/dist/browser/preview.js

@@ -1,7 +1,7 @@
 import { a as __toCommonJS, n as __esmMin, o as __toESM, r as __exportAll, t as __commonJSMin } from "./rolldown-runtime-CEgmsyvS.js";
 import { _ as readonlyVal, a as isPlainObject$2, c as I18nProvider, d as useTranslate, f as useVal, g as derive, h as compute, i as isBoolean$1, l as useI18n, m as combine, n as pasteVideoLink, o as isString$1, p as attachSetter, r as isArray$2, s as toPlainObject, u as useLang, v as strictEqual, y as val } from "./videoLink-NAWDmBtf.js";
 import * as m$4 from "react";
-import reactExports, { Children, Fragment, Suspense, createContext, createElement, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import reactExports, { Children, Fragment, Suspense, createContext, createElement, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import { createPortal, flushSync } from "react-dom";
@@ -66,6 +66,299 @@ function useIconifyCollectionLoader() {
 /** Resource selection only; visual styling remains owned by theme.css. */
 var IconThemeContext = createContext("light");
 //#endregion
+//#region src/connector/common/providerIconCache.ts
+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
+var ProviderIconCacheContext = 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 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 = useRef();
+	const resource = 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);
+	useEffect(() => {
+		resource.refresh();
+	}, [resource]);
+	return 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 ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r$1(e) {
 	var t, f, n = "";
@@ -33742,9 +34035,10 @@ var Zap = createLucideIcon("Zap", [["path", {
 	key: "1xq2db"
 }]]);
 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 src/connector/common/providerIconSprite.ts
@@ -33988,60 +34282,8 @@ function generateSvgDataUri(width, height, rawIcon, color) {
 	return `data:image/svg+xml;utf8,${encodeSvgForCss(svg)}`;
 }
 //#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 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. */
+/** Standalone image capture crops sprites and uses cross-origin-readable images. */
 var IconImageCrossOriginContext = createContext(void 0);
 /** A bundled, theme-aware placeholder that does not load a remote icon. */
 var placeholderIcon = "data:application/vnd.open-flow.placeholder-icon,";
@@ -34053,18 +34295,19 @@ var ContentIcon = ({ src, className, fallback = null, loading = "lazy", decoding
 	const result = useMemo(() => parseIconifyIcon(source), [source]);
 	const [error, setError] = useState();
 	const onError = () => setError(source);
-	if (sprite) return crossOrigin ? /* @__PURE__ */ jsx(ContentIcon, {
+	if (sprite) return /* @__PURE__ */ jsx(SpriteIcon, {
 		className,
 		fallback,
 		loading,
 		decoding,
-		src: sprite.fallback
-	}) : /* @__PURE__ */ jsx(SpriteIcon, {
+		sprite
+	});
+	if (image?.providerId) return /* @__PURE__ */ jsx(ProviderImage, {
 		className,
 		fallback,
 		loading,
 		decoding,
-		sprite
+		image
 	});
 	if (source === "data:application/vnd.open-flow.placeholder-icon,") return /* @__PURE__ */ jsx("i", {
 		"aria-hidden": "true",
@@ -34107,10 +34350,11 @@ var ContentIcon = ({ src, className, fallback = null, loading = "lazy", decoding
 };
 var initialsIconPrefix = "data:application/vnd.open-flow.initials,";
 var imageIconPrefix = "data:application/vnd.open-flow.image-icon+json,";
-function imageIcon(source, fallback) {
+function imageIcon(source, fallback, providerId) {
 	return `${imageIconPrefix}${encodeURIComponent(JSON.stringify({
 		fallback,
-		source
+		source,
+		...providerId == null ? {} : { providerId }
 	}))}`;
 }
 function parseImageIcon(src) {
@@ -34119,7 +34363,8 @@ function parseImageIcon(src) {
 		const value = JSON.parse(decodeURIComponent(src.slice(47)));
 		if (typeof value.fallback == "string" && typeof value.source == "string") return {
 			fallback: value.fallback,
-			source: value.source
+			source: value.source,
+			...typeof value.providerId === "string" ? { providerId: value.providerId } : {}
 		};
 	} catch {
 		return;
@@ -34159,19 +34404,39 @@ function parseSpriteIcon(src) {
 }
 function SpriteIcon({ sprite, ...props }) {
 	const theme = useContext(IconThemeContext);
+	const capture = useContext(IconImageCrossOriginContext) != null;
 	const { iconSprite: m, iconSpritePosition: p } = sprite;
-	const url = theme == "dark" ? m.darkUrl : m.lightUrl;
-	const status = useSpriteStatus(url);
-	if (status == "failed") return /* @__PURE__ */ jsx(ContentIcon, {
+	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__ */ jsx(ContentIcon, {
 		...props,
 		src: sprite.fallback
 	});
+	if (resource.status === "loading") return /* @__PURE__ */ jsx(PendingIcon, {
+		className: props.className,
+		fallback: props.fallback
+	});
+	if (capture) return /* @__PURE__ */ 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__ */ jsx("span", {
 		"aria-hidden": "true",
-		"data-render-pending": status == "loading" || void 0,
+		"data-render-pending": resource.refreshing || void 0,
 		className: clsx(ContentIcon_module_default.sprite, props.className),
-		children: status == "loaded" && /* @__PURE__ */ jsx("span", { style: {
-			backgroundImage: `url(${JSON.stringify(url)})`,
+		children: /* @__PURE__ */ 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}%`,
@@ -34179,6 +34444,40 @@ function SpriteIcon({ sprite, ...props }) {
 		} })
 	});
 }
+function ProviderImage({ image, ...props }) {
+	const resource = useProviderIconResource({
+		kind: "image",
+		providerId: image.providerId,
+		url: image.source
+	});
+	if (resource.status === "failed") return /* @__PURE__ */ jsx(ContentIcon, {
+		...props,
+		src: image.fallback
+	});
+	if (resource.status === "loading") return /* @__PURE__ */ jsx(PendingIcon, {
+		className: props.className,
+		fallback: props.fallback
+	});
+	return /* @__PURE__ */ 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__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: clsx(ContentIcon_module_default.pending, className),
+		"data-render-pending": true,
+		children: fallback ?? /* @__PURE__ */ jsx(ContentIcon, {
+			src: "data:application/vnd.open-flow.placeholder-icon,",
+			className
+		})
+	});
+}
 var handle_module_default = {
 	wrapper: "handle_wrapper_c0108",
 	handle: "handle_handle_c0108",
@@ -65785,7 +66084,7 @@ function provider(value, metadata) {
 //#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,
@@ -120415,36 +120714,39 @@ function RevisionCanvas({ draft, presentation, theme, interactiveMode$, defaultI
 //#endregion
 //#region src/workbench/browser/runtime/openFlowPreview.tsx
 /** Offline workflow preview. Use a React key to start a new layout/selection session. */
-function OpenFlowPreview({ draft, presentation, language, theme, defaultInteractiveMode, defaultDirection, defaultMiniMapExpanded, defaultInspectorOpen, defaultSelectedNodeIds, nodesDraggable = true, dottedBackground = true, layoutMotion = true, label, className }) {
+function OpenFlowPreview({ iconCache, draft, presentation, language, theme, defaultInteractiveMode, defaultDirection, defaultMiniMapExpanded, defaultInspectorOpen, defaultSelectedNodeIds, nodesDraggable = true, dottedBackground = true, layoutMotion = true, label, className }) {
 	const [i18n] = useState(() => createI18n(language));
 	useEffect(() => {
 		if (i18n.lang !== language) i18n.switchLang(language);
 	}, [i18n, language]);
 	useEffect(() => () => i18n.dispose(), [i18n]);
-	return /* @__PURE__ */ jsx(IconThemeContext.Provider, {
-		value: theme,
-		children: /* @__PURE__ */ jsx(IconifyProvider, { children: /* @__PURE__ */ jsx(I18nProvider, {
-			i18n,
-			children: /* @__PURE__ */ jsx("div", {
-				className: cn$1("open-flow-theme open-flow-workbench open-flow-preview", className),
-				"data-theme": theme,
-				children: /* @__PURE__ */ jsx(RevisionCanvas, {
-					draft,
-					presentation,
-					theme,
-					defaultInteractiveMode,
-					defaultDirection,
-					defaultMiniMapExpanded,
-					defaultInspectorOpen,
-					defaultSelectedNodeIds,
-					nodesDraggable,
-					layoutMotion,
-					label,
-					background: dottedBackground ? "dotted" : "none",
-					showHeader: false
+	return /* @__PURE__ */ jsx(ProviderIconCacheContext.Provider, {
+		value: iconCache,
+		children: /* @__PURE__ */ jsx(IconThemeContext.Provider, {
+			value: theme,
+			children: /* @__PURE__ */ jsx(IconifyProvider, { children: /* @__PURE__ */ jsx(I18nProvider, {
+				i18n,
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn$1("open-flow-theme open-flow-workbench open-flow-preview", className),
+					"data-theme": theme,
+					children: /* @__PURE__ */ jsx(RevisionCanvas, {
+						draft,
+						presentation,
+						theme,
+						defaultInteractiveMode,
+						defaultDirection,
+						defaultMiniMapExpanded,
+						defaultInspectorOpen,
+						defaultSelectedNodeIds,
+						nodesDraggable,
+						layoutMotion,
+						label,
+						background: dottedBackground ? "dotted" : "none",
+						showHeader: false
+					})
 				})
-			})
-		}) })
+			}) })
+		})
 	});
 }
 //#endregion

package/dist/browser/workbench-contract.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { ProviderIconLoader } from '../common/provider-icons.js';
 import type { WorkflowBundleImportResult } from '../common/control-api.js';
 import type { FlowCatalogEvent, FlowChangeEvent } from './flow-notifications.js';
 import type { WorkflowBundle } from '../common/flow-workflowBundle.js';
@@ -22,6 +23,8 @@ export interface WorkbenchActor {
     readonly avatarUrl?: string;
 }
 export interface WorkbenchHost {
+    /** Optional shared Provider artwork cache; defaults to browser IndexedDB. */
+    readonly iconCache?: ProviderIconLoader;
     /** Optional deployment-owned identity lookup. Return null for an unknown actor. */
     readonly resolveActor?: (actorId: string, signal: AbortSignal) => Promise<WorkbenchActor | null>;
     /** Cache deployment identity. The session id must be stable and non-secret. */

package/dist/browser/workbench.css

@@ -1,4 +1,4 @@
-@charset "UTF-8";.ContentIcon_img_4e5d2 {
+@charset "UTF-8";.ContentIcon_img_e2c99 {
   width: 1em;
   height: 1em;
   vertical-align: middle;
@@ -6,7 +6,16 @@
   object-fit: contain;
 }
 
-.ContentIcon_initials_4e5d2 {
+.ContentIcon_pending_e2c99 {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+
+.ContentIcon_initials_e2c99 {
   display: inline-flex;
   width: 1em;
   height: 1em;
@@ -19,13 +28,13 @@
   vertical-align: middle;
   pointer-events: none;
 }
-.ContentIcon_initials_4e5d2 > span {
+.ContentIcon_initials_e2c99 > span {
   font-size: 0.42em;
   font-weight: 400;
   line-height: 1;
 }
 
-.ContentIcon_sprite_4e5d2 {
+.ContentIcon_sprite_e2c99 {
   display: inline-block;
   position: relative;
   overflow: hidden;
@@ -35,7 +44,7 @@
   vertical-align: middle;
   pointer-events: none;
 }
-.ContentIcon_sprite_4e5d2 > span {
+.ContentIcon_sprite_e2c99 > span {
   position: absolute;
   background-size: 100% 100%;
   background-repeat: no-repeat;