@bian-womp/spark-workbench 0.2.23 → 0.2.25

package/lib/cjs/index.cjs

@@ -817,22 +817,39 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             return this.runner;
         let transport;
         const kind = this.backend.kind;
+        const backend = this.backend;
+        const connectOptions = backend.connectOptions;
         this.emit("transport", { state: "connecting", kind });
-        if (this.backend.kind === "remote-http") {
+        if (backend.kind === "remote-http") {
             if (!sparkRemote.HttpPollingTransport)
                 throw new Error("HttpPollingTransport not available");
-            transport = new sparkRemote.HttpPollingTransport(this.backend.baseUrl);
-            await transport.connect();
+            transport = new sparkRemote.HttpPollingTransport(backend.baseUrl);
+            await transport.connect(connectOptions);
         }
-        else if (this.backend.kind === "remote-ws") {
+        else if (backend.kind === "remote-ws") {
             if (!sparkRemote.WebSocketTransport)
                 throw new Error("WebSocketTransport not available");
-            transport = new sparkRemote.WebSocketTransport(this.backend.url);
-            await transport.connect();
+            transport = new sparkRemote.WebSocketTransport(backend.url);
+            await transport.connect(connectOptions);
         }
         else {
             throw new Error("Remote backend not configured");
         }
+        // Subscribe to custom events if handler provided
+        if (backend.onCustomEvent) {
+            transport.subscribe((event) => {
+                // Filter out standard runtime events, pass others to custom handler
+                const msg = event.message;
+                if (msg && typeof msg === "object" && "type" in msg) {
+                    const type = msg.type;
+                    // Standard runtime events: stats, value, error, invalidate
+                    // Custom events are anything else (e.g., flow-opened, flow-latest)
+                    if (!["stats", "value", "error", "invalidate"].includes(type)) {
+                        backend.onCustomEvent?.(event);
+                    }
+                }
+            });
+        }
         const runner = new sparkRemote.RemoteRunner(transport);
         this.runner = runner;
         this.transport = transport;
@@ -2837,7 +2854,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             })
                 .map((n) => n.id);
             // Detect handle updates (ids/length changes) for targeted debug
-            const toIds = (arr) => Array.isArray(arr) ? arr.map((h) => h?.id) : [];
+            const toIds = (arr) => Array.isArray(arr) ? arr.map((h) => (h && typeof h === "object" && "id" in h ? String(h.id) : "")).filter(Boolean) : [];
             const handlesEqual = (a, b) => {
                 const aIds = toIds(a);
                 const bIds = toIds(b);
@@ -3109,7 +3126,8 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             URL.revokeObjectURL(url);
         }
         catch (err) {
-            alert(String(err?.message ?? err));
+            const message = err instanceof Error ? err.message : String(err);
+            alert(message);
         }
     }, [wb, runner]);
     const onUploadPicked = React.useCallback(async (e) => {
@@ -3167,7 +3185,8 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             runAutoLayout();
         }
         catch (err) {
-            alert(String(err?.message ?? err));
+            const message = err instanceof Error ? err.message : String(err);
+            alert(message);
         }
         finally {
             // reset input so same file can be picked again
@@ -3417,8 +3436,11 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return pre;
         if (typeof value === "object" &&
             value !== null &&
+            "url" in value &&
             typeof value.url === "string") {
-            const title = value.title || "";
+            const title = "title" in value && typeof value.title === "string"
+                ? value.title
+                : "";
             const url = String(value.url || "");
             // value.ts handles data URL formatting
             return title || url.slice(0, 32) + (url.length > 32 ? "…" : "");
@@ -3431,7 +3453,11 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         const round4 = (n) => Math.round(Number(n) * 10000) / 10000;
         if (typeId === "base.vec3" && Array.isArray(value)) {
             const a = value;
-            return [round4(a[0] ?? 0), round4(a[1] ?? 0), round4(a[2] ?? 0)].join(",");
+            return [
+                round4(Number(a[0] ?? 0)),
+                round4(Number(a[1] ?? 0)),
+                round4(Number(a[2] ?? 0)),
+            ].join(",");
         }
         const stringifyRounded = (v) => {
             try {
@@ -3482,7 +3508,8 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                                 runner.launch(wb.export(), { engine: kind });
                             }
                             catch (err) {
-                                alert(String(err?.message ?? err));
+                                const message = err instanceof Error ? err.message : String(err);
+                                alert(message);
                             }
                         }, disabled: !engine, title: engine ? "Start engine" : "Select an engine first", children: [jsxRuntime.jsx(react$1.PlayIcon, { size: 14, weight: "fill" }), jsxRuntime.jsx("span", { className: "font-medium ml-1", children: "Start" })] })), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: async () => {
                             try {
@@ -3510,25 +3537,43 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                                 URL.revokeObjectURL(url);
                             }
                             catch (err) {
-                                alert(String(err?.message ?? err));
+                                const message = err instanceof Error ? err.message : String(err);
+                                alert(message);
                             }
                         }, children: "Download Snapshot" }), jsxRuntime.jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: triggerUpload, children: "Upload Graph/Snapshot" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement, contextPanel: overrides?.contextPanel })] })] }));
 }
-function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, onInit, onChange, }) {
+function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, backendOptions, overrides, onInit, onChange, }) {
     const [registry, setRegistry] = React.useState(sparkGraph.createSimpleGraphRegistry());
     const [wb] = React.useState(() => new InMemoryWorkbench({ ui: new DefaultUIExtensionRegistry() }));
     const runner = React.useMemo(() => {
         if (backendKind === "remote-http") {
-            return new RemoteGraphRunner(registry, {
+            const backend = {
                 kind: "remote-http",
                 baseUrl: httpBaseUrl,
-            });
+                ...(backendOptions?.connectOptions && {
+                    connectOptions: backendOptions.connectOptions,
+                }),
+                ...(backendOptions?.onCustomEvent && {
+                    onCustomEvent: backendOptions.onCustomEvent,
+                }),
+            };
+            return new RemoteGraphRunner(registry, backend);
         }
         if (backendKind === "remote-ws") {
-            return new RemoteGraphRunner(registry, { kind: "remote-ws", url: wsUrl });
+            const backend = {
+                kind: "remote-ws",
+                url: wsUrl,
+                ...(backendOptions?.connectOptions && {
+                    connectOptions: backendOptions.connectOptions,
+                }),
+                ...(backendOptions?.onCustomEvent && {
+                    onCustomEvent: backendOptions.onCustomEvent,
+                }),
+            };
+            return new RemoteGraphRunner(registry, backend);
         }
         return new LocalGraphRunner(registry);
-    }, [registry, backendKind, httpBaseUrl, wsUrl]);
+    }, [registry, backendKind, httpBaseUrl, wsUrl, backendOptions]);
     // Allow external UI registration (e.g., node renderers) with access to wb
     React.useEffect(() => {
         const baseRegisterUI = (_wb) => { };