@statelyai/sdk 0.38.0 → 0.38.1

package/README.md

@@ -90,6 +90,15 @@ Use `viewMode: 'list'` on `createStatelyEmbed` to add `?view=list` to the
 iframe URL, or subscribe to `viewModeChanged` when the user switches views.
 Pass the initial `theme` or `settings.appearance.colorMode` when creating the
 embed so its loading screen uses that color mode before initialization.
+The default is dark, matching the editor. Attached and mounted iframes use the
+same color scheme while their document loads; `setTheme` and appearance settings
+also update that frame surface.
+If the initial theme is omitted, the SDK keeps the iframe hidden until the
+machine loads or reports an error, so a theme supplied only to `init` cannot
+flash the default theme. The surrounding host supplies the waiting surface.
+Source conversion failures notify `onError` and reveal the editor's error screen.
+Protocol incompatibility also restores the frame's visibility and reports the
+failure to the host.
 
 Custom profiles and formats can be supplied when the embed is created. Their
 serializable manifests are sent to the iframe; detector, importer, exporter,

package/dist/embed.mjs

@@ -1,5 +1,5 @@
 import "./protocol-M3Zeun3o.mjs";
-import { c as createPendingExportManager, l as settingsWithViewMode, r as createPostMessageTransport, s as createEventRegistry, t as SDK_VERSION, u as toInitMessage } from "./version-DdcBDv8b.mjs";
+import { c as createPendingExportManager, l as settingsWithViewMode, r as createPostMessageTransport, s as createEventRegistry, t as SDK_VERSION, u as toInitMessage } from "./version-IE72VxaP.mjs";
 import { EDITOR_PROTOCOL_VERSION } from "./editorHostProtocol.mjs";
 
 //#region src/embed.ts
@@ -36,7 +36,7 @@ function buildEmbedUrl(options) {
 	if (options.viewMode) url.searchParams.set("view", options.viewMode);
 	const appearance = options.settings?.appearance;
 	const settingsMode = appearance && typeof appearance === "object" && "colorMode" in appearance ? appearance.colorMode : void 0;
-	const colorMode = options.theme ?? settingsMode;
+	const colorMode = options.theme ?? settingsMode ?? "dark";
 	if (colorMode === "light" || colorMode === "dark" || colorMode === "system") url.searchParams.set("theme", colorMode);
 	return url.toString();
 }
@@ -126,6 +126,7 @@ function createStatelyEmbed(options) {
 	const embedUrl = buildEmbedUrl(options);
 	const targetOrigin = options.origin ?? new URL(embedUrl).origin;
 	let iframe = null;
+	let restoreIframeVisibility;
 	let transport = null;
 	let ownedIframe = false;
 	let sourceUpdateBaseline;
@@ -238,6 +239,8 @@ function createStatelyEmbed(options) {
 				if (ready.protocolVersion !== void 0) {
 					if (ready.protocolVersion !== EDITOR_PROTOCOL_VERSION) {
 						editorProtocolCompatible = false;
+						restoreIframeVisibility?.();
+						restoreIframeVisibility = void 0;
 						const error = {
 							code: "unsupported_protocol",
 							message: `Editor protocol ${ready.protocolVersion} is unsupported; this SDK supports ${EDITOR_PROTOCOL_VERSION}.`
@@ -269,6 +272,8 @@ function createStatelyEmbed(options) {
 				break;
 			}
 			case "@statelyai.loaded": {
+				restoreIframeVisibility?.();
+				restoreIframeVisibility = void 0;
 				const loaded = data;
 				sourceUpdateBaseline = structuredClone(loaded.graph);
 				options.onLoaded?.(loaded.graph);
@@ -374,6 +379,8 @@ function createStatelyEmbed(options) {
 				break;
 			}
 			case "@statelyai.error": {
+				restoreIframeVisibility?.();
+				restoreIframeVisibility = void 0;
 				const error = data;
 				const err = {
 					code: error.code,
@@ -451,6 +458,23 @@ function createStatelyEmbed(options) {
 			flush();
 		});
 	}
+	function applyIframeColorMode(el, mode) {
+		el.style.colorScheme = mode === "system" ? "light dark" : mode;
+		el.style.backgroundColor = "light-dark(#eff1f3, #15151d)";
+	}
+	function prepareIframe(el) {
+		restoreIframeVisibility?.();
+		restoreIframeVisibility = void 0;
+		applyIframeColorMode(el, new URL(embedUrl).searchParams.get("theme") ?? "dark");
+		const explicitMode = options.theme ?? (options.settings?.appearance)?.colorMode;
+		if (explicitMode !== "light" && explicitMode !== "dark" && explicitMode !== "system") {
+			const previous = el.style.visibility;
+			el.style.visibility = "hidden";
+			restoreIframeVisibility = () => {
+				el.style.visibility = previous;
+			};
+		}
+	}
 	const embed = {
 		attach(el) {
 			if (destroyed) return;
@@ -461,16 +485,19 @@ function createStatelyEmbed(options) {
 			});
 			iframe = el;
 			ownedIframe = false;
+			prepareIframe(el);
 			el.src = embedUrl;
 			setupTransport(el);
 		},
 		mount(container) {
 			if (destroyed) throw new Error("Embed is destroyed");
 			const el = document.createElement("iframe");
+			prepareIframe(el);
 			el.src = embedUrl;
 			el.style.border = "none";
 			el.style.width = "100%";
 			el.style.height = "100%";
+			el.style.display = "block";
 			el.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox");
 			el.setAttribute("allow", "clipboard-read; clipboard-write");
 			container.appendChild(el);
@@ -484,6 +511,8 @@ function createStatelyEmbed(options) {
 			sendApiKey();
 		},
 		init(opts) {
+			const colorMode = opts.theme ?? (opts.settings?.appearance)?.colorMode;
+			if (iframe && (colorMode === "light" || colorMode === "dark" || colorMode === "system")) applyIframeColorMode(iframe, colorMode);
 			send(toInitMessage("machine" in opts ? {
 				...opts,
 				extensions: opts.extensions ?? bundledExtensions
@@ -543,12 +572,15 @@ function createStatelyEmbed(options) {
 			});
 		},
 		setTheme(theme) {
+			if (iframe) applyIframeColorMode(iframe, theme);
 			send({
 				type: "@statelyai.setTheme",
 				theme
 			});
 		},
 		setSettings(settings) {
+			const mode = settings.appearance?.colorMode;
+			if (iframe && (mode === "light" || mode === "dark" || mode === "system")) applyIframeColorMode(iframe, mode);
 			send({
 				type: "@statelyai.setSettings",
 				settings
@@ -606,6 +638,8 @@ function createStatelyEmbed(options) {
 			exportManager.clear("Embed destroyed");
 			events.clear();
 			pendingMessages.length = 0;
+			restoreIframeVisibility?.();
+			restoreIframeVisibility = void 0;
 			if (ownedIframe && iframe) iframe.remove();
 			iframe = null;
 		}

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import { n as StudioApiError, r as createStatelyClient, t as DEFAULT_STATELY_BASE_URL } from "./studio-uGK1kS0n.mjs";
 import { c as createInspectionRoomUrls, d as isEmbedExampleMachine, i as INSPECTION_ROOM_QUERY_PARAM, l as getInspectionRoomId, m as resolveInspectorSettings, n as EMBED_DOCUMENT_LIMITS, o as assertEmbedExamples, p as mergeInspectorSettings, r as INSPECTION_PROTOCOL_VERSION, s as createInspectionActorId, t as EMBED_DOCUMENT_LANGUAGES, u as isEmbedExample } from "./protocol-M3Zeun3o.mjs";
-import { i as createWebSocketTransport, r as createPostMessageTransport } from "./version-DdcBDv8b.mjs";
+import { i as createWebSocketTransport, r as createPostMessageTransport } from "./version-IE72VxaP.mjs";
 import { EDITOR_PROTOCOL_VERSION } from "./editorHostProtocol.mjs";
 import { createStatelyEmbed } from "./embed.mjs";
 import { createS3AssetUploadAdapter, createSupabaseAssetUploadAdapter } from "./assetStorage.mjs";
-import { n as createStatelyInspector, t as createInspector } from "./inspect-IxL93uKX.mjs";
+import { n as createStatelyInspector, t as createInspector } from "./inspect-Ca_ZPcrf.mjs";
 import { createAuthorizationHeader, getCredentialToken } from "./auth.mjs";
 import { buildAuthorizeUrl, createPkcePair, discoverAuthorizationServer, discoverProtectedResource, exchangeCodeForToken, refreshToken, registerOAuthClient } from "./oauth.mjs";
 import { StatelyApiError, createStatelyApiClient, createStatelyApiUrl } from "./api.mjs";

package/dist/{inspect-IxL93uKX.mjs → inspect-Ca_ZPcrf.mjs}

@@ -1,5 +1,5 @@
 import { c as createInspectionRoomUrls, l as getInspectionRoomId, m as resolveInspectorSettings, p as mergeInspectorSettings, r as INSPECTION_PROTOCOL_VERSION } from "./protocol-M3Zeun3o.mjs";
-import { a as assertEmbedDocuments, c as createPendingExportManager, i as createWebSocketTransport, n as inspectionRuntime, o as assertEmbedPanels, s as createEventRegistry, t as SDK_VERSION } from "./version-DdcBDv8b.mjs";
+import { a as assertEmbedDocuments, c as createPendingExportManager, i as createWebSocketTransport, n as inspectionRuntime, o as assertEmbedPanels, s as createEventRegistry, t as SDK_VERSION } from "./version-IE72VxaP.mjs";
 
 //#region src/openBrowser.ts
 async function openBrowser(url) {

package/dist/inspect.mjs

@@ -1,5 +1,5 @@
 import "./protocol-M3Zeun3o.mjs";
-import "./version-DdcBDv8b.mjs";
-import { n as createStatelyInspector, t as createInspector } from "./inspect-IxL93uKX.mjs";
+import "./version-IE72VxaP.mjs";
+import { n as createStatelyInspector, t as createInspector } from "./inspect-Ca_ZPcrf.mjs";
 
 export { createInspector, createStatelyInspector };

package/dist/{version-DdcBDv8b.mjs → version-IE72VxaP.mjs}

@@ -379,7 +379,7 @@ function createWebSocketTransport(options) {
 
 //#endregion
 //#region src/version.ts
-const SDK_VERSION = "0.38.0";
+const SDK_VERSION = "0.38.1";
 function inspectionRuntime() {
 	if (typeof window !== "undefined") return "browser";
 	if (typeof process !== "undefined" && process.versions?.node) return "node";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/sdk",
-  "version": "0.38.0",
+  "version": "0.38.1",
   "license": "MIT",
   "bin": {
     "stately-sdk": "./dist/bin.mjs"