@statelyai/sdk 0.6.0 → 0.6.1

package/README.md

@@ -137,6 +137,8 @@ import {
   createStatelyClient,
   createStatelyEmbed,
   createStatelyInspector,
+  createS3AssetUploadAdapter,
+  createSupabaseAssetUploadAdapter,
   fromStudioMachine,
   graphToMachineConfig,
   graphToXStateTS,
@@ -156,6 +158,10 @@ import {
 } from '@statelyai/sdk/api';
 import { fromStudioMachine, toStudioMachine } from '@statelyai/sdk/graph';
 import { planSync, pullSync, pushSync } from '@statelyai/sdk/sync';
+import {
+  createS3AssetUploadAdapter,
+  createSupabaseAssetUploadAdapter,
+} from '@statelyai/sdk/assetStorage';
 import type { GraphPatch } from '@statelyai/sdk/patchTypes';
 ```
 
@@ -462,9 +468,54 @@ const embed = createStatelyEmbed({
 });
 ```
 
+For reusable integrations, pass an upload adapter instead of wiring the callback inline:
+
+```ts
+import { createStatelyEmbed, createS3AssetUploadAdapter } from '@statelyai/sdk';
+
+const adapter = createS3AssetUploadAdapter({
+  bucket: 'assets',
+  publicBaseUrl: 'https://cdn.example.com/assets',
+  async getUploadTarget({ key, contentType }) {
+    const response = await fetch('/api/assets/presign', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key, contentType }),
+    });
+    return response.json();
+  },
+});
+
+const embed = createStatelyEmbed({
+  baseUrl: 'https://stately.ai',
+  assets: { adapter },
+});
+```
+
+Supabase storage can use the same adapter contract:
+
+```ts
+import {
+  createStatelyEmbed,
+  createSupabaseAssetUploadAdapter,
+} from '@statelyai/sdk';
+
+const adapter = createSupabaseAssetUploadAdapter({
+  client: supabaseClient,
+  bucket: 'assets',
+  projectVersionId,
+});
+
+const embed = createStatelyEmbed({
+  baseUrl: 'https://stately.ai',
+  assets: { adapter },
+});
+```
+
 | Option            | Type                                                                      | Description                                                 |
 | ----------------- | ------------------------------------------------------------------------- | ----------------------------------------------------------- |
-| `onUploadRequest` | `(file: File, context: { stateNodeId: string }) => Promise<UploadResult>` | **Required.** Called when the editor needs to upload a file |
+| `onUploadRequest` | `(file: File, context: { stateNodeId: string }) => Promise<UploadResult>` | Called when the editor needs to upload a file               |
+| `adapter`         | `AssetUploadAdapter`                                                      | Provider-specific uploader, such as the S3 or Supabase adapter |
 | `accept`          | `string[]`                                                                | Accepted MIME types. Supports wildcards like `image/*`      |
 | `maxFileSize`     | `number`                                                                  | Max file size in bytes. Defaults to `10_485_760`            |
 

package/dist/assetStorage.d.mts

@@ -0,0 +1,73 @@
+import { m as UploadResult } from "./protocol-CDoCcaIP.mjs";
+
+//#region src/assetStorage.d.ts
+interface AssetUploadContext {
+  stateNodeId: string;
+}
+interface AssetUploadRequest extends AssetUploadContext {
+  file: File;
+}
+interface AssetUploadAdapter {
+  upload(request: AssetUploadRequest): Promise<UploadResult>;
+  accept?: string[];
+  maxFileSize?: number;
+}
+type AssetObjectKeyFactory = (request: AssetUploadRequest) => string | Promise<string>;
+interface S3UploadTarget {
+  uploadUrl: string;
+  publicUrl?: string;
+  method?: 'PUT' | 'POST';
+  headers?: Record<string, string>;
+  fields?: Record<string, string>;
+}
+interface CreateS3AssetUploadAdapterOptions {
+  bucket?: string;
+  publicBaseUrl?: string;
+  accept?: string[];
+  maxFileSize?: number;
+  key?: AssetObjectKeyFactory;
+  getUploadTarget: (request: AssetUploadRequest & {
+    key: string;
+    contentType: string;
+    bucket?: string;
+  }) => Promise<S3UploadTarget>;
+}
+interface SupabaseStorageBucket {
+  upload(path: string, file: File, options?: {
+    cacheControl?: string;
+    contentType?: string;
+    upsert?: boolean;
+  }): Promise<{
+    data: {
+      path: string;
+    } | null;
+    error: Error | {
+      message: string;
+    } | null;
+  }>;
+  getPublicUrl?(path: string): {
+    data: {
+      publicUrl: string;
+    };
+  };
+}
+interface SupabaseStorageClient {
+  storage: {
+    from(bucket: string): SupabaseStorageBucket;
+  };
+}
+interface CreateSupabaseAssetUploadAdapterOptions {
+  client: SupabaseStorageClient;
+  bucket?: string;
+  publicBaseUrl?: string;
+  projectVersionId?: string;
+  accept?: string[];
+  maxFileSize?: number;
+  cacheControl?: string;
+  upsert?: boolean;
+  key?: AssetObjectKeyFactory;
+}
+declare function createS3AssetUploadAdapter(options: CreateS3AssetUploadAdapterOptions): AssetUploadAdapter;
+declare function createSupabaseAssetUploadAdapter(options: CreateSupabaseAssetUploadAdapterOptions): AssetUploadAdapter;
+//#endregion
+export { AssetObjectKeyFactory, AssetUploadAdapter, AssetUploadContext, AssetUploadRequest, CreateS3AssetUploadAdapterOptions, CreateSupabaseAssetUploadAdapterOptions, S3UploadTarget, SupabaseStorageClient, createS3AssetUploadAdapter, createSupabaseAssetUploadAdapter };

package/dist/assetStorage.mjs

@@ -0,0 +1,99 @@
+//#region src/assetStorage.ts
+function sanitizeFileName(name) {
+	return name.replace(/[^A-Za-z0-9._-]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function defaultObjectKey({ file, stateNodeId }) {
+	const fileName = sanitizeFileName(file.name) || "asset";
+	return `${stateNodeId}/${crypto.randomUUID()}-${fileName}`;
+}
+function createProjectObjectKey(projectVersionId) {
+	return ({ file }) => {
+		const fileName = sanitizeFileName(file.name) || "asset";
+		return `${projectVersionId}/${crypto.randomUUID()}-${fileName}`;
+	};
+}
+function joinUrl(baseUrl, key) {
+	return `${baseUrl.replace(/\/+$/, "")}/${key.split("/").map(encodeURIComponent).join("/")}`;
+}
+async function uploadToTarget(target, file) {
+	if (target.method === "POST" || target.fields) {
+		const formData = new FormData();
+		Object.entries(target.fields ?? {}).forEach(([name, value]) => {
+			formData.append(name, value);
+		});
+		formData.append("file", file);
+		const response = await fetch(target.uploadUrl, {
+			method: "POST",
+			body: formData
+		});
+		if (!response.ok) throw new Error(`Asset upload failed with ${response.status}`);
+		return;
+	}
+	const response = await fetch(target.uploadUrl, {
+		method: target.method ?? "PUT",
+		headers: {
+			"Content-Type": file.type || "application/octet-stream",
+			...target.headers
+		},
+		body: file
+	});
+	if (!response.ok) throw new Error(`Asset upload failed with ${response.status}`);
+}
+function createS3AssetUploadAdapter(options) {
+	return {
+		accept: options.accept,
+		maxFileSize: options.maxFileSize,
+		async upload(request) {
+			const key = await (options.key ?? defaultObjectKey)(request);
+			const target = await options.getUploadTarget({
+				...request,
+				key,
+				contentType: request.file.type || "application/octet-stream",
+				bucket: options.bucket
+			});
+			await uploadToTarget(target, request.file);
+			const url = target.publicUrl ?? (options.publicBaseUrl ? joinUrl(options.publicBaseUrl, key) : void 0);
+			if (!url) throw new Error("S3 asset upload adapter requires a publicUrl or publicBaseUrl");
+			return {
+				url,
+				name: request.file.name,
+				metadata: {
+					bucket: options.bucket,
+					key
+				}
+			};
+		}
+	};
+}
+function createSupabaseAssetUploadAdapter(options) {
+	const bucket = options.bucket ?? "assets";
+	return {
+		accept: options.accept,
+		maxFileSize: options.maxFileSize,
+		async upload(request) {
+			const storage = options.client.storage.from(bucket);
+			const key = await (options.key ?? (options.projectVersionId ? createProjectObjectKey(options.projectVersionId) : defaultObjectKey))(request);
+			const { data, error } = await storage.upload(key, request.file, {
+				cacheControl: options.cacheControl,
+				contentType: request.file.type || "application/octet-stream",
+				upsert: options.upsert
+			});
+			if (error) throw new Error(error.message);
+			if (!data?.path) throw new Error("Supabase asset upload did not return a path");
+			const publicUrl = storage.getPublicUrl?.(data.path)?.data.publicUrl ?? (options.publicBaseUrl ? joinUrl(options.publicBaseUrl, data.path) : void 0);
+			if (!publicUrl) throw new Error("Supabase asset upload adapter requires getPublicUrl or publicBaseUrl");
+			return {
+				url: publicUrl,
+				name: request.file.name,
+				metadata: {
+					bucket,
+					path: data.path,
+					key: data.path
+				}
+			};
+		}
+	};
+}
+
+//#endregion
+export { createS3AssetUploadAdapter, createSupabaseAssetUploadAdapter };

package/dist/cli.d.mts

@@ -1,5 +1,5 @@
 import { ConnectedRepo, CreateProjectInput, ProjectData, StudioClient } from "./studio.mjs";
-import "./graph-CB-ALrdk.mjs";
+import "./graph-DpBGHZwl.mjs";
 import { SyncPlan } from "./sync.mjs";
 import { Command } from "@oclif/core";
 import * as _oclif_core_interfaces0 from "@oclif/core/interfaces";

package/dist/cli.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { createStatelyClient } from "./studio.mjs";
-import "./graphToXStateTS-CvXM8wHL.mjs";
+import "./graphToXStateTS-Gzh0ZqbN.mjs";
 import { planSync, pullSync } from "./sync.mjs";
 import fs from "node:fs/promises";
 import * as path$1 from "node:path";

package/dist/embed.d.mts

@@ -1,4 +1,5 @@
-import { a as EmbedMode, c as ExportFormatMap, d as MachineSourceLocations, f as ProjectEmbedMachine, i as EmbedEventName, l as InitOptions, m as UploadResult, n as EmbedEventHandler, o as ExportCallOptions, r as EmbedEventMap, s as ExportFormat, t as CommentsConfig, u as MachineInitOptions } from "./protocol-CEbWQPYe.mjs";
+import { a as EmbedMode, c as ExportFormatMap, d as MachineSourceLocations, f as ProjectEmbedMachine, i as EmbedEventName, l as InitOptions, m as UploadResult, n as EmbedEventHandler, o as ExportCallOptions, r as EmbedEventMap, s as ExportFormat, t as CommentsConfig, u as MachineInitOptions } from "./protocol-CDoCcaIP.mjs";
+import { AssetUploadAdapter } from "./assetStorage.mjs";
 
 //#region src/embed.d.ts
 interface AssetConfig {
@@ -7,9 +8,15 @@ interface AssetConfig {
    * Receives a real File object (reconstructed from serialized data).
    * Throwing or rejecting will show an error toast in the embed.
    */
-  onUploadRequest: (file: File, context: {
+  onUploadRequest?: (file: File, context: {
     stateNodeId: string;
   }) => Promise<UploadResult>;
+  /**
+   * Storage adapter used by the embed upload bridge. This keeps the editor
+   * protocol storage-neutral while allowing integrations to plug in S3, R2,
+   * Supabase, or any other backing store.
+   */
+  adapter?: AssetUploadAdapter;
   /**
    * Accepted MIME types. Supports wildcards (e.g. 'image/*').
    * @default ['image/*']

package/dist/embed.mjs

@@ -43,6 +43,13 @@ function createStatelyEmbed(options) {
 	const pendingMessages = [];
 	const events = createEventRegistry();
 	const exportManager = createPendingExportManager((message) => send(message));
+	const assetUploadAdapter = options.assets?.adapter;
+	const uploadAsset = options.assets?.onUploadRequest ? (file, context) => options.assets.onUploadRequest(file, context) : assetUploadAdapter ? (file, context) => assetUploadAdapter.upload({
+		file,
+		...context
+	}) : void 0;
+	const assetAccept = options.assets?.accept ?? assetUploadAdapter?.accept;
+	const assetMaxFileSize = options.assets?.maxFileSize ?? assetUploadAdapter?.maxFileSize;
 	function send(msg) {
 		if (!transport?.ready) {
 			pendingMessages.push(msg);
@@ -63,11 +70,11 @@ function createStatelyEmbed(options) {
 			case "@statelyai.ready": {
 				const ready = data;
 				flush();
-				if (options.assets?.onUploadRequest) send({
+				if (uploadAsset) send({
 					type: "@statelyai.uploadCapabilities",
 					enabled: true,
-					accept: options.assets.accept,
-					maxFileSize: options.assets.maxFileSize
+					accept: assetAccept,
+					maxFileSize: assetMaxFileSize
 				});
 				options.onReady?.();
 				events.emit("ready", { version: ready.version });
@@ -129,7 +136,7 @@ function createStatelyEmbed(options) {
 			}
 			case "@statelyai.uploadRequest": {
 				const req = data;
-				if (!options.assets?.onUploadRequest) {
+				if (!uploadAsset) {
 					send({
 						type: "@statelyai.error",
 						requestId: req.requestId,
@@ -138,7 +145,7 @@ function createStatelyEmbed(options) {
 					});
 					break;
 				}
-				const maxSize = options.assets.maxFileSize ?? 10485760;
+				const maxSize = assetMaxFileSize ?? 10485760;
 				if (req.file.size > maxSize) {
 					send({
 						type: "@statelyai.error",
@@ -151,8 +158,7 @@ function createStatelyEmbed(options) {
 				const binary = atob(req.file.data);
 				const bytes = new Uint8Array(binary.length);
 				for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-				const file = new File([bytes], req.file.name, { type: req.file.mimeType });
-				options.assets.onUploadRequest(file, { stateNodeId: req.stateNodeId }).then((result) => {
+				uploadAsset(new File([bytes], req.file.name, { type: req.file.mimeType }), { stateNodeId: req.stateNodeId }).then((result) => {
 					send({
 						type: "@statelyai.uploadResponse",
 						requestId: req.requestId,

package/dist/graph.d.mts

@@ -1,2 +1,2 @@
-import { _ as studioMachineConverter, a as StatelyGraphData, c as StatelyInvoke, d as StudioAction, f as StudioEdge, g as fromStudioMachine, h as StudioNode, i as StatelyGraph, l as StatelyNodeData, m as StudioMachine, n as StatelyActorImplementation, o as StatelyGuard, p as StudioEventTypeData, r as StatelyEdgeData, s as StatelyImplementation, t as StatelyAction, u as StatelyTagImplementation, v as toStudioMachine } from "./graph-CB-ALrdk.mjs";
+import { _ as studioMachineConverter, a as StatelyGraphData, c as StatelyInvoke, d as StudioAction, f as StudioEdge, g as fromStudioMachine, h as StudioNode, i as StatelyGraph, l as StatelyNodeData, m as StudioMachine, n as StatelyActorImplementation, o as StatelyGuard, p as StudioEventTypeData, r as StatelyEdgeData, s as StatelyImplementation, t as StatelyAction, u as StatelyTagImplementation, v as toStudioMachine } from "./graph-DpBGHZwl.mjs";
 export { StatelyAction, StatelyActorImplementation, StatelyEdgeData, StatelyGraph, StatelyGraphData, StatelyGuard, StatelyImplementation, StatelyInvoke, StatelyNodeData, StatelyTagImplementation, StudioAction, StudioEdge, StudioEventTypeData, StudioMachine, StudioNode, fromStudioMachine, studioMachineConverter, toStudioMachine };

package/dist/graph.mjs

@@ -2,8 +2,12 @@ import { createFormatConverter, createGraph } from "@statelyai/graph";
 
 //#region src/graph.ts
 const EXPR_ACTION_TYPE = "xstate.expr";
+function stripMarkdownLinks(code) {
+	return code.replace(/\[([^\]\n]+)\]\(([^)\n]+)\)/g, "$1");
+}
 function stripExportDefault(code) {
-	return code.match(/^export\s+default\s+(.+)/s)?.[1]?.trim() ?? code.trim();
+	const normalized = stripMarkdownLinks(code).trim();
+	return normalized.match(/^export\s+default\s+(.+)/s)?.[1]?.trim() ?? normalized;
 }
 function toJsonObject(value) {
 	return value;
@@ -332,7 +336,7 @@ function fromStudioMachine(studioMachine) {
 			...edge.data.guard ? { guard: {
 				type: edge.data.guard.type,
 				params: toUnknownRecord(edge.data.guard.params),
-				...edge.data.guard.kind === "inline" ? { code: edge.data.guard.type } : {}
+				...edge.data.guard.kind === "inline" ? { code: stripExportDefault(studioMachine.implementations?.guards?.[edge.data.guard.type]?.code ?? edge.data.guard.type) } : {}
 			} } : {},
 			actions: edge.data.actions.map((action) => fromStudioAction(action, studioMachine.implementations?.actions)),
 			...edge.data.description ? { description: edge.data.description } : {},
@@ -350,9 +354,9 @@ function fromStudioMachine(studioMachine) {
 		data: {
 			...studioMachine.schemas ? { schemas: studioMachine.schemas } : {},
 			...studioMachine.implementations ? { implementations: {
-				actions: Object.values(studioMachine.implementations.actions).map(fromActionSource),
-				guards: Object.values(studioMachine.implementations.guards).map(fromGuardSource),
-				actors: Object.values(studioMachine.implementations.actors).map(fromActorSource),
+				actions: Object.entries(studioMachine.implementations.actions).filter(([key]) => !key.startsWith("inline:")).map(([, source]) => fromActionSource(source)),
+				guards: Object.entries(studioMachine.implementations.guards).filter(([key]) => !key.startsWith("inline:")).map(([, guard]) => fromGuardSource(guard)),
+				actors: Object.entries(studioMachine.implementations.actors).filter(([key]) => !key.startsWith("inline:") && !/:invocation\[\d+\]$/.test(key)).map(([, actor]) => fromActorSource(actor)),
 				delays: [],
 				tags: []
 			} } : {}