@bian-womp/spark-workbench 0.2.37 → 0.2.39

package/lib/cjs/index.cjs

@@ -2,11 +2,11 @@
 
 var sparkGraph = require('@bian-womp/spark-graph');
 var sparkRemote = require('@bian-womp/spark-remote');
-var React = require('react');
 var react = require('@xyflow/react');
+var React = require('react');
+var cx = require('classnames');
 var jsxRuntime = require('react/jsx-runtime');
 var react$1 = require('@phosphor-icons/react');
-var cx = require('classnames');
 var isEqual = require('lodash/isEqual');
 
 class DefaultUIExtensionRegistry {
@@ -602,8 +602,200 @@ class LocalGraphRunner extends AbstractGraphRunner {
 }
 
 class RemoteGraphRunner extends AbstractGraphRunner {
+    /**
+     * Fetch full registry description from remote and register it locally.
+     * Called automatically on first connection with retry mechanism.
+     */
+    async fetchRegistry(client, attempt = 1) {
+        if (this.registryFetching) {
+            // Already fetching, don't start another fetch
+            return;
+        }
+        this.registryFetching = true;
+        try {
+            const desc = await client.describeRegistry();
+            // Register types
+            for (const t of desc.types) {
+                if (t.options) {
+                    this.registry.registerEnum({
+                        id: t.id,
+                        options: t.options,
+                        bakeTarget: t.bakeTarget,
+                    });
+                }
+                else {
+                    if (!this.registry.types.has(t.id)) {
+                        this.registry.registerType({
+                            id: t.id,
+                            displayName: t.displayName,
+                            validate: (_v) => true,
+                            bakeTarget: t.bakeTarget,
+                        });
+                    }
+                }
+            }
+            // Register categories
+            for (const c of desc.categories || []) {
+                if (!this.registry.categories.has(c.id)) {
+                    // Create placeholder category descriptor
+                    const category = {
+                        id: c.id,
+                        displayName: c.displayName,
+                        createRuntime: () => ({
+                            async onInputsChanged() { },
+                        }),
+                        policy: { asyncConcurrency: "switch" },
+                    };
+                    this.registry.categories.register(category);
+                }
+            }
+            // Register coercions
+            for (const c of desc.coercions) {
+                if (c.async) {
+                    this.registry.registerAsyncCoercion(c.from, c.to, async (v) => v, {
+                        nonTransitive: c.nonTransitive,
+                    });
+                }
+                else {
+                    this.registry.registerCoercion(c.from, c.to, (v) => v, {
+                        nonTransitive: c.nonTransitive,
+                    });
+                }
+            }
+            // Register nodes
+            for (const n of desc.nodes) {
+                if (!this.registry.nodes.has(n.id)) {
+                    this.registry.registerNode({
+                        id: n.id,
+                        categoryId: n.categoryId,
+                        displayName: n.displayName,
+                        inputs: n.inputs || {},
+                        outputs: n.outputs || {},
+                        impl: () => { },
+                    });
+                }
+            }
+            this.registryFetched = true;
+            this.registryFetching = false;
+            this.emit("registry", this.registry);
+        }
+        catch (err) {
+            this.registryFetching = false;
+            const error = err instanceof Error ? err : new Error(String(err));
+            // Retry with exponential backoff if attempts remaining
+            if (attempt < this.MAX_REGISTRY_FETCH_ATTEMPTS) {
+                const delayMs = this.INITIAL_RETRY_DELAY_MS * Math.pow(2, attempt - 1);
+                console.warn(`Failed to fetch registry (attempt ${attempt}/${this.MAX_REGISTRY_FETCH_ATTEMPTS}), retrying in ${delayMs}ms...`, error);
+                // Emit error event for UI feedback
+                this.emit("error", {
+                    kind: "registry",
+                    message: `Registry fetch failed (attempt ${attempt}/${this.MAX_REGISTRY_FETCH_ATTEMPTS}), retrying...`,
+                    err: error,
+                    attempt,
+                    maxAttempts: this.MAX_REGISTRY_FETCH_ATTEMPTS,
+                });
+                // Retry after delay
+                setTimeout(() => {
+                    this.fetchRegistry(client, attempt + 1).catch(() => {
+                        // Final failure handled below
+                    });
+                }, delayMs);
+            }
+            else {
+                // Max attempts reached, emit final error
+                console.error(`Failed to fetch registry after ${this.MAX_REGISTRY_FETCH_ATTEMPTS} attempts:`, error);
+                this.emit("error", {
+                    kind: "registry",
+                    message: `Failed to fetch registry after ${this.MAX_REGISTRY_FETCH_ATTEMPTS} attempts. Please check your connection and try refreshing.`,
+                    err: error,
+                    attempt: this.MAX_REGISTRY_FETCH_ATTEMPTS,
+                    maxAttempts: this.MAX_REGISTRY_FETCH_ATTEMPTS,
+                });
+            }
+        }
+    }
+    /**
+     * Build RuntimeApiClient config from RemoteExecutionBackend config.
+     */
+    buildClientConfig(backend) {
+        if (backend.kind === "remote-http") {
+            return {
+                kind: "remote-http",
+                baseUrl: backend.baseUrl,
+                connectOptions: backend.connectOptions,
+            };
+        }
+        else {
+            return {
+                kind: "remote-ws",
+                url: backend.url,
+                connectOptions: backend.connectOptions,
+            };
+        }
+    }
+    /**
+     * Setup event subscriptions for the client.
+     */
+    setupClientSubscriptions(client, backend) {
+        // Subscribe to custom events (for additional listeners if needed)
+        if (backend.onCustomEvent) {
+            this.customEventUnsubscribe = client.subscribeCustomEvents(backend.onCustomEvent);
+        }
+        // Subscribe to transport status changes
+        // Convert RuntimeApiClient.TransportStatus to IGraphRunner.TransportStatus
+        this.transportStatusUnsubscribe = client.onTransportStatus((status) => {
+            // Map remote-unix to undefined since RemoteGraphRunner doesn't support it
+            const mappedKind = status.kind === "remote-unix" ? undefined : status.kind;
+            this.emit("transport", {
+                state: status.state,
+                kind: mappedKind,
+            });
+        });
+    }
+    // Ensure remote client
+    async ensureClient() {
+        if (this.disposed) {
+            throw new Error("Cannot ensure client: RemoteGraphRunner has been disposed");
+        }
+        if (this.client)
+            return this.client;
+        // If already connecting, wait for that connection to complete
+        if (this.clientPromise)
+            return this.clientPromise;
+        const backend = this.backend;
+        // Create connection promise to prevent concurrent connections
+        this.clientPromise = (async () => {
+            // Build client config from backend config
+            const clientConfig = this.buildClientConfig(backend);
+            // Create client with custom event handler if provided
+            const client = new sparkRemote.RuntimeApiClient(clientConfig, {
+                onCustomEvent: backend.onCustomEvent,
+            });
+            // Setup event subscriptions
+            this.setupClientSubscriptions(client, backend);
+            // Connect the client (this will create and connect transport)
+            await client.connect();
+            this.client = client;
+            this.valueCache.clear();
+            this.listenersBound = false;
+            // Auto-fetch registry on first connection (only once)
+            if (!this.registryFetched && !this.registryFetching) {
+                // Log loading state (UI can listen to transport status for loading indication)
+                console.info("Loading registry from remote...");
+                this.fetchRegistry(client).catch((err) => {
+                    console.error("[RemoteGraphRunner] Failed to fetch registry:", err);
+                    // Error handling is done inside fetchRegistry, but we catch unhandled rejections
+                });
+            }
+            // Clear promise on success
+            this.clientPromise = undefined;
+            return client;
+        })();
+        return this.clientPromise;
+    }
     constructor(registry, backend) {
         super(registry, backend);
+        this.disposed = false;
         this.valueCache = new Map();
         this.listenersBound = false;
         this.registryFetched = false;
@@ -612,8 +804,8 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         this.INITIAL_RETRY_DELAY_MS = 1000; // 1 second
         // Auto-handle registry-changed invalidations from remote
         // We listen on invalidate and if reason matches, we rehydrate registry and emit a registry event
-        this.ensureRemoteRunner().then(async (runner) => {
-            const eng = runner.getEngine();
+        this.ensureClient().then(async (client) => {
+            const eng = client.getEngine();
             if (!this.listenersBound) {
                 eng.on("invalidate", async (e) => {
                     if (e.reason === "registry-changed") {
@@ -672,14 +864,12 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             }
         });
     }
-    build(def) {
-        console.warn("Unsupported operation for remote runner");
-    }
+    build(def) { }
     update(def) {
         // Remote: forward update; ignore errors (fire-and-forget)
-        this.ensureRemoteRunner().then(async (runner) => {
+        this.ensureClient().then(async (client) => {
             try {
-                await runner.update(def);
+                await client.update(def);
                 this.emit("invalidate", { reason: "graph-updated" });
                 this.lastDef = def;
             }
@@ -689,14 +879,14 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     launch(def, opts) {
         super.launch(def, opts);
         // Remote: build remotely then launch
-        this.ensureRemoteRunner().then(async (runner) => {
-            await runner.build(def);
+        this.ensureClient().then(async (client) => {
+            await client.build(def);
             // Signal UI after remote build as well
             this.emit("invalidate", { reason: "graph-built" });
             this.lastDef = def;
             // Hydrate current remote inputs/outputs (including defaults) into cache
             try {
-                const snap = await runner.snapshot();
+                const snap = await client.snapshot();
                 for (const [nodeId, map] of Object.entries(snap.inputs || {})) {
                     for (const [handle, value] of Object.entries(map || {})) {
                         this.valueCache.set(`${nodeId}.${handle}`, {
@@ -719,7 +909,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             catch {
                 console.error("Failed to hydrate remote inputs/outputs");
             }
-            const eng = runner.getEngine();
+            const eng = client.getEngine();
             if (!this.listenersBound) {
                 eng.on("value", (e) => {
                     this.valueCache.set(`${e.nodeId}.${e.handle}`, {
@@ -743,36 +933,70 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             }
         });
     }
-    async step() {
-        console.warn("Unsupported operation for remote runner");
-    }
-    async computeNode(nodeId) {
-        console.warn("Unsupported operation for remote runner");
-    }
-    flush() {
-        console.warn("Unsupported operation for remote runner");
+    /**
+     * Launch using an existing backend runtime that has already been built and hydrated.
+     * This is used when resuming from a snapshot where the backend has already applied
+     * ApplySnapshotFull (which builds the graph and hydrates inputs/outputs).
+     * Unlike launch(), this method does NOT call client.build() to avoid destroying
+     * the runtime state that was just restored.
+     */
+    launchExisting(def, opts) {
+        super.launch(def, opts);
+        // Remote: attach to existing runtime and launch (do NOT rebuild)
+        this.ensureClient().then(async (client) => {
+            // NOTE: We do NOT call client.build(def) here because the backend runtime
+            // has already been built and hydrated via ApplySnapshotFull.
+            // Calling build() would create a new runtime and lose the restored state.
+            this.lastDef = def;
+            // Attach to the existing engine
+            const eng = client.getEngine();
+            if (!this.listenersBound) {
+                eng.on("value", (e) => {
+                    this.valueCache.set(`${e.nodeId}.${e.handle}`, {
+                        io: e.io,
+                        value: e.value,
+                        runtimeTypeId: e.runtimeTypeId,
+                    });
+                    this.emit("value", e);
+                });
+                eng.on("error", (e) => this.emit("error", e));
+                eng.on("invalidate", (e) => this.emit("invalidate", e));
+                eng.on("stats", (e) => this.emit("stats", e));
+                this.listenersBound = true;
+            }
+            this.engine = eng;
+            this.engine.launch(opts.invalidate);
+            this.runningKind = "push";
+            this.emit("status", { running: true, engine: this.runningKind });
+            for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
+                this.engine.setInputs(nodeId, map);
+            }
+        });
     }
+    async step() { }
+    async computeNode(nodeId) { }
+    flush() { }
     triggerExternal(nodeId, event) {
-        this.ensureRemoteRunner().then(async (runner) => {
+        this.ensureClient().then(async (client) => {
             try {
-                await runner.getEngine().triggerExternal(nodeId, event);
+                await client.getEngine().triggerExternal(nodeId, event);
             }
             catch { }
         });
     }
     async coerce(from, to, value) {
-        const runner = await this.ensureRemoteRunner();
+        const client = await this.ensureClient();
         try {
-            return await runner.coerce(from, to, value);
+            return await client.coerce(from, to, value);
         }
         catch {
             return value;
         }
     }
     async snapshotFull() {
-        const runner = await this.ensureRemoteRunner();
+        const client = await this.ensureClient();
         try {
-            return await runner.snapshotFull();
+            return await client.snapshotFull();
         }
         catch {
             return { def: undefined, environment: {}, inputs: {}, outputs: {} };
@@ -780,17 +1004,17 @@ class RemoteGraphRunner extends AbstractGraphRunner {
     }
     async applySnapshotFull(payload) {
         // Hydrate local cache first so UI can display values immediately
-        this.hydrateCacheFromSnapshot(payload);
+        this.hydrateSnapshotFull(payload);
         // Then sync with backend
-        const runner = await this.ensureRemoteRunner();
-        await runner.applySnapshotFull(payload);
+        const client = await this.ensureClient();
+        await client.applySnapshotFull(payload);
     }
     /**
      * Hydrates the local valueCache from a snapshot and emits value events.
      * This ensures the UI can display inputs/outputs immediately without waiting
      * for value events from the remote backend.
      */
-    hydrateCacheFromSnapshot(snapshot) {
+    hydrateSnapshotFull(snapshot) {
         // Hydrate inputs
         for (const [nodeId, map] of Object.entries(snapshot.inputs || {})) {
             for (const [handle, value] of Object.entries(map || {})) {
@@ -813,20 +1037,25 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
     }
     setEnvironment(env, opts) {
-        const t = this.transport;
-        if (!t)
-            return;
-        t.request({
-            message: {
-                type: "SetEnvironment",
-                payload: { environment: env, merge: opts?.merge },
-            },
-        }).catch(() => { });
+        // Use client if available, otherwise ensure client and then set environment
+        if (this.client) {
+            this.client.setEnvironment(env, opts).catch(() => { });
+        }
+        else {
+            // If client not ready yet, ensure it and then set environment
+            this.ensureClient()
+                .then((client) => {
+                client.setEnvironment(env, opts).catch(() => { });
+            })
+                .catch(() => { });
+        }
     }
     getEnvironment() {
-        // Fetch from remote via lightweight command
-        // Note: returns undefined synchronously; callers needing value should use snapshotFull or call runner directly
-        // For now, we expose an async helper on RemoteRunner. Keep sync signature per interface.
+        // Interface requires sync return, but RuntimeApiClient.getEnvironment() is async.
+        // Returns undefined synchronously; callers needing the actual value should:
+        // - Use snapshotFull() which includes environment
+        // - Call client.getEnvironment() directly if they have access to the client
+        // This is a limitation of the sync interface signature.
         return undefined;
     }
     getOutputs(def) {
@@ -890,183 +1119,233 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         return out;
     }
     dispose() {
+        // Idempotent: allow multiple calls safely
+        if (this.disposed)
+            return;
+        this.disposed = true;
         super.dispose();
-        this.runner = undefined;
-        this.transport = undefined;
+        // Clear client promise if any
+        this.clientPromise = undefined;
+        // Unsubscribe from custom events and transport status
+        if (this.customEventUnsubscribe) {
+            this.customEventUnsubscribe();
+            this.customEventUnsubscribe = undefined;
+        }
+        if (this.transportStatusUnsubscribe) {
+            this.transportStatusUnsubscribe();
+            this.transportStatusUnsubscribe = undefined;
+        }
+        // Dispose client (which will close transport)
+        const clientToDispose = this.client;
+        this.client = undefined;
         this.registryFetched = false; // Reset so registry is fetched again on reconnect
         this.registryFetching = false; // Reset fetching state
+        if (clientToDispose) {
+            clientToDispose.dispose().catch((err) => {
+                console.warn("[RemoteGraphRunner] Error disposing client:", err);
+            });
+        }
         this.emit("transport", {
             state: "disconnected",
             kind: this.backend.kind,
         });
     }
-    /**
-     * Fetch full registry description from remote and register it locally.
-     * Called automatically on first connection with retry mechanism.
-     */
-    async fetchRegistry(runner, attempt = 1) {
-        if (this.registryFetching) {
-            // Already fetching, don't start another fetch
-            return;
-        }
-        this.registryFetching = true;
-        try {
-            const desc = await runner.describeRegistry();
-            // Register types
-            for (const t of desc.types) {
-                if (t.options) {
-                    this.registry.registerEnum({
-                        id: t.id,
-                        options: t.options,
-                        bakeTarget: t.bakeTarget,
-                    });
-                }
-                else {
-                    if (!this.registry.types.has(t.id)) {
-                        this.registry.registerType({
-                            id: t.id,
-                            displayName: t.displayName,
-                            validate: (_v) => true,
-                            bakeTarget: t.bakeTarget,
-                        });
-                    }
-                }
-            }
-            // Register categories
-            for (const c of desc.categories || []) {
-                if (!this.registry.categories.has(c.id)) {
-                    // Create placeholder category descriptor
-                    const category = {
-                        id: c.id,
-                        displayName: c.displayName,
-                        createRuntime: () => ({
-                            async onInputsChanged() { },
-                        }),
-                        policy: { asyncConcurrency: "switch" },
-                    };
-                    this.registry.categories.register(category);
-                }
-            }
-            // Register coercions
-            for (const c of desc.coercions) {
-                if (c.async) {
-                    this.registry.registerAsyncCoercion(c.from, c.to, async (v) => v, {
-                        nonTransitive: c.nonTransitive,
-                    });
-                }
-                else {
-                    this.registry.registerCoercion(c.from, c.to, (v) => v, {
-                        nonTransitive: c.nonTransitive,
-                    });
-                }
-            }
-            // Register nodes
-            for (const n of desc.nodes) {
-                if (!this.registry.nodes.has(n.id)) {
-                    this.registry.registerNode({
-                        id: n.id,
-                        categoryId: n.categoryId,
-                        displayName: n.displayName,
-                        inputs: n.inputs || {},
-                        outputs: n.outputs || {},
-                        impl: () => { },
-                    });
-                }
-            }
-            this.registryFetched = true;
-            this.registryFetching = false;
-            this.emit("registry", this.registry);
-        }
-        catch (err) {
-            this.registryFetching = false;
-            const error = err instanceof Error ? err : new Error(String(err));
-            // Retry with exponential backoff if attempts remaining
-            if (attempt < this.MAX_REGISTRY_FETCH_ATTEMPTS) {
-                const delayMs = this.INITIAL_RETRY_DELAY_MS * Math.pow(2, attempt - 1);
-                console.warn(`Failed to fetch registry (attempt ${attempt}/${this.MAX_REGISTRY_FETCH_ATTEMPTS}), retrying in ${delayMs}ms...`, error);
-                // Emit error event for UI feedback
-                this.emit("error", {
-                    kind: "registry",
-                    message: `Registry fetch failed (attempt ${attempt}/${this.MAX_REGISTRY_FETCH_ATTEMPTS}), retrying...`,
-                    err: error,
-                    attempt,
-                    maxAttempts: this.MAX_REGISTRY_FETCH_ATTEMPTS,
-                });
-                // Retry after delay
-                setTimeout(() => {
-                    this.fetchRegistry(runner, attempt + 1).catch(() => {
-                        // Final failure handled below
-                    });
-                }, delayMs);
-            }
-            else {
-                // Max attempts reached, emit final error
-                console.error(`Failed to fetch registry after ${this.MAX_REGISTRY_FETCH_ATTEMPTS} attempts:`, error);
-                this.emit("error", {
-                    kind: "registry",
-                    message: `Failed to fetch registry after ${this.MAX_REGISTRY_FETCH_ATTEMPTS} attempts. Please check your connection and try refreshing.`,
-                    err: error,
-                    attempt: this.MAX_REGISTRY_FETCH_ATTEMPTS,
-                    maxAttempts: this.MAX_REGISTRY_FETCH_ATTEMPTS,
-                });
-            }
-        }
+}
+
+function formatDataUrlAsLabel(dataUrl) {
+    try {
+        const semi = dataUrl.indexOf(";");
+        const comma = dataUrl.indexOf(",");
+        const mime = dataUrl.slice(5, semi > 0 ? semi : undefined).toUpperCase();
+        const b64 = comma >= 0 ? dataUrl.slice(comma + 1) : "";
+        const bytes = Math.floor((b64.length * 3) / 4);
+        return `${mime} Data (${bytes} bytes)`;
     }
-    // Ensure remote transport/runner
-    async ensureRemoteRunner() {
-        if (this.runner)
-            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 (backend.kind === "remote-http") {
-            if (!sparkRemote.HttpPollingTransport)
-                throw new Error("HttpPollingTransport not available");
-            transport = new sparkRemote.HttpPollingTransport(backend.baseUrl);
-            await transport.connect(connectOptions);
-        }
-        else if (backend.kind === "remote-ws") {
-            if (!sparkRemote.WebSocketTransport)
-                throw new Error("WebSocketTransport not available");
-            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);
-                    }
-                }
-            });
+    catch {
+        return dataUrl.length > 64 ? dataUrl.slice(0, 64) + "…" : dataUrl;
+    }
+}
+function resolveOutputDisplay(raw, declared) {
+    if (sparkGraph.isTypedOutput(raw)) {
+        return {
+            typeId: sparkGraph.getTypedOutputTypeId(raw),
+            value: sparkGraph.getTypedOutputValue(raw),
+        };
+    }
+    let typeId = undefined;
+    if (Array.isArray(declared)) {
+        typeId = declared.length === 1 ? declared[0] : undefined;
+    }
+    else if (typeof declared === "string") {
+        typeId = declared.includes("|") ? undefined : declared;
+    }
+    return { typeId, value: raw };
+}
+function formatDeclaredTypeSignature(declared) {
+    if (Array.isArray(declared))
+        return declared.join(" | ");
+    return declared ?? "";
+}
+/**
+ * Formats a handle ID for display in the UI.
+ * For handles with format "prefix:middle:suffix:extra" (4 parts), displays only the middle part.
+ * Otherwise returns the handle ID as-is.
+ */
+function prettyHandle(id) {
+    try {
+        const parts = String(id).split(":");
+        // If there are exactly 3 colons (4 parts), display only the second part
+        if (parts.length === 4)
+            return parts[1] || id;
+        return id;
+    }
+    catch {
+        return id;
+    }
+}
+// Pre-format common structures for display; return undefined to defer to caller
+function preformatValueForDisplay(typeId, value, registry) {
+    if (value === undefined || value === null)
+        return "";
+    // Unwrap typed outputs
+    if (sparkGraph.isTypedOutput(value)) {
+        return preformatValueForDisplay(sparkGraph.getTypedOutputTypeId(value), sparkGraph.getTypedOutputValue(value), registry);
+    }
+    // Enums
+    if (typeId && typeId.startsWith("enum:") && registry) {
+        const n = Number(value);
+        const label = registry.enums.get(typeId)?.valueToLabel.get(n);
+        if (label)
+            return label;
+    }
+    // Use deep summarization for strings, arrays and nested objects to avoid huge HTML payloads
+    const summarized = summarizeDeep(value);
+    if (typeof summarized === "string")
+        return summarized;
+    // Resource-like objects with url/title (after summarization)
+    if (summarized && typeof summarized === "object") {
+        const urlMaybe = summarized.url;
+        if (typeof urlMaybe === "string") {
+            const title = summarized.title || "";
+            const shortUrl = urlMaybe.length > 32 ? urlMaybe.slice(0, 32) + "…" : urlMaybe;
+            return title ? `${title} (${shortUrl})` : shortUrl;
         }
-        const runner = new sparkRemote.RemoteRunner(transport);
-        this.runner = runner;
-        this.transport = transport;
-        this.valueCache.clear();
-        this.listenersBound = false;
-        this.emit("transport", { state: "connected", kind });
-        // Auto-fetch registry on first connection (only once)
-        if (!this.registryFetched && !this.registryFetching) {
-            // Log loading state (UI can listen to transport status for loading indication)
-            console.info("Loading registry from remote...");
-            this.fetchRegistry(runner).catch(() => {
-                // Error handling is done inside fetchRegistry
-            });
+    }
+    return undefined;
+}
+function summarizeDeep(value) {
+    // Strings: summarize data URLs and trim extremely long strings
+    if (typeof value === "string") {
+        if (value.startsWith("data:"))
+            return formatDataUrlAsLabel(value);
+        return value.length > 512 ? value.slice(0, 512) + "…" : value;
+    }
+    // Typed output wrapper
+    if (sparkGraph.isTypedOutput(value)) {
+        return summarizeDeep(sparkGraph.getTypedOutputValue(value));
+    }
+    // Arrays
+    if (Array.isArray(value)) {
+        return value.map((v) => summarizeDeep(v));
+    }
+    // Objects
+    if (value && typeof value === "object") {
+        const obj = value;
+        const out = {};
+        for (const [k, v] of Object.entries(obj)) {
+            // Special-case any 'url' field
+            if (typeof v === "string" &&
+                k.toLowerCase() === "url" &&
+                v.startsWith("data:")) {
+                out[k] = formatDataUrlAsLabel(v);
+                continue;
+            }
+            out[k] = summarizeDeep(v);
         }
-        return runner;
+        return out;
     }
+    return value;
+}
+
+// Shared UI constants for node layout to keep mapping and rendering in sync
+const NODE_HEADER_HEIGHT_PX = 24;
+const NODE_ROW_HEIGHT_PX = 22;
+
+function computeEffectiveHandles(node, registry) {
+    const desc = registry.nodes.get(node.typeId);
+    const resolved = node.resolvedHandles || {};
+    const inputs = { ...desc?.inputs, ...resolved.inputs };
+    const outputs = { ...desc?.outputs, ...resolved.outputs };
+    const inputDefaults = { ...desc?.inputDefaults, ...resolved.inputDefaults };
+    return { inputs, outputs, inputDefaults };
+}
+function countVisibleHandles(handles) {
+    const inputIds = Object.keys(handles.inputs).filter((k) => !sparkGraph.isInputPrivate(handles.inputs, k));
+    const outputIds = Object.keys(handles.outputs);
+    return { inputsCount: inputIds.length, outputsCount: outputIds.length };
+}
+function estimateNodeSize(args) {
+    const { node, registry, showValues, overrides } = args;
+    const { inputs, outputs } = computeEffectiveHandles(node, registry);
+    // Count only non-private inputs for rows on left
+    const { inputsCount, outputsCount } = countVisibleHandles({
+        inputs,
+        outputs,
+    });
+    const rows = Math.max(inputsCount, outputsCount);
+    const baseWidth = showValues ? 320 : 240;
+    const width = overrides?.width ?? baseWidth;
+    const height = overrides?.height ?? NODE_HEADER_HEIGHT_PX + rows * NODE_ROW_HEIGHT_PX;
+    return { width, height, inputsCount, outputsCount, rowCount: rows };
+}
+function layoutNode(args) {
+    const { node, registry, showValues, overrides } = args;
+    const { inputs, outputs } = computeEffectiveHandles(node, registry);
+    const inputOrder = Object.keys(inputs).filter((k) => !sparkGraph.isInputPrivate(inputs, k));
+    const outputOrder = Object.keys(outputs);
+    const { width, height } = estimateNodeSize({
+        node,
+        registry,
+        showValues,
+        overrides,
+    });
+    const HEADER = NODE_HEADER_HEIGHT_PX;
+    const ROW = NODE_ROW_HEIGHT_PX;
+    const handles = [
+        ...inputOrder.map((id, i) => ({
+            id,
+            type: "target",
+            position: react.Position.Left,
+            x: 0,
+            y: HEADER + i * ROW,
+            width: 1,
+            height: ROW + 2,
+        })),
+        ...outputOrder.map((id, i) => ({
+            id,
+            type: "source",
+            position: react.Position.Right,
+            x: width - 1,
+            y: HEADER + i * ROW,
+            width: 1,
+            height: ROW + 2,
+        })),
+    ];
+    const handleLayout = [
+        ...inputOrder.map((id, i) => ({
+            id,
+            type: "target",
+            position: react.Position.Left,
+            y: HEADER + i * ROW + ROW / 2,
+        })),
+        ...outputOrder.map((id, i) => ({
+            id,
+            type: "source",
+            position: react.Position.Right,
+            y: HEADER + i * ROW + ROW / 2,
+        })),
+    ];
+    return { width, height, inputOrder, outputOrder, handles, handleLayout };
 }
 
 function useWorkbenchBridge(wb) {
@@ -1313,202 +1592,6 @@ function useQueryParamString(key, defaultValue) {
     return [val, set];
 }
 
-function formatDataUrlAsLabel(dataUrl) {
-    try {
-        const semi = dataUrl.indexOf(";");
-        const comma = dataUrl.indexOf(",");
-        const mime = dataUrl.slice(5, semi > 0 ? semi : undefined).toUpperCase();
-        const b64 = comma >= 0 ? dataUrl.slice(comma + 1) : "";
-        const bytes = Math.floor((b64.length * 3) / 4);
-        return `${mime} Data (${bytes} bytes)`;
-    }
-    catch {
-        return dataUrl.length > 64 ? dataUrl.slice(0, 64) + "…" : dataUrl;
-    }
-}
-function resolveOutputDisplay(raw, declared) {
-    if (sparkGraph.isTypedOutput(raw)) {
-        return {
-            typeId: sparkGraph.getTypedOutputTypeId(raw),
-            value: sparkGraph.getTypedOutputValue(raw),
-        };
-    }
-    let typeId = undefined;
-    if (Array.isArray(declared)) {
-        typeId = declared.length === 1 ? declared[0] : undefined;
-    }
-    else if (typeof declared === "string") {
-        typeId = declared.includes("|") ? undefined : declared;
-    }
-    return { typeId, value: raw };
-}
-function formatDeclaredTypeSignature(declared) {
-    if (Array.isArray(declared))
-        return declared.join(" | ");
-    return declared ?? "";
-}
-/**
- * Formats a handle ID for display in the UI.
- * For handles with format "prefix:middle:suffix:extra" (4 parts), displays only the middle part.
- * Otherwise returns the handle ID as-is.
- */
-function prettyHandle(id) {
-    try {
-        const parts = String(id).split(":");
-        // If there are exactly 3 colons (4 parts), display only the second part
-        if (parts.length === 4)
-            return parts[1] || id;
-        return id;
-    }
-    catch {
-        return id;
-    }
-}
-// Pre-format common structures for display; return undefined to defer to caller
-function preformatValueForDisplay(typeId, value, registry) {
-    if (value === undefined || value === null)
-        return "";
-    // Unwrap typed outputs
-    if (sparkGraph.isTypedOutput(value)) {
-        return preformatValueForDisplay(sparkGraph.getTypedOutputTypeId(value), sparkGraph.getTypedOutputValue(value), registry);
-    }
-    // Enums
-    if (typeId && typeId.startsWith("enum:") && registry) {
-        const n = Number(value);
-        const label = registry.enums.get(typeId)?.valueToLabel.get(n);
-        if (label)
-            return label;
-    }
-    // Use deep summarization for strings, arrays and nested objects to avoid huge HTML payloads
-    const summarized = summarizeDeep(value);
-    if (typeof summarized === "string")
-        return summarized;
-    // Resource-like objects with url/title (after summarization)
-    if (summarized && typeof summarized === "object") {
-        const urlMaybe = summarized.url;
-        if (typeof urlMaybe === "string") {
-            const title = summarized.title || "";
-            const shortUrl = urlMaybe.length > 32 ? urlMaybe.slice(0, 32) + "…" : urlMaybe;
-            return title ? `${title} (${shortUrl})` : shortUrl;
-        }
-    }
-    return undefined;
-}
-function summarizeDeep(value) {
-    // Strings: summarize data URLs and trim extremely long strings
-    if (typeof value === "string") {
-        if (value.startsWith("data:"))
-            return formatDataUrlAsLabel(value);
-        return value.length > 512 ? value.slice(0, 512) + "…" : value;
-    }
-    // Typed output wrapper
-    if (sparkGraph.isTypedOutput(value)) {
-        return summarizeDeep(sparkGraph.getTypedOutputValue(value));
-    }
-    // Arrays
-    if (Array.isArray(value)) {
-        return value.map((v) => summarizeDeep(v));
-    }
-    // Objects
-    if (value && typeof value === "object") {
-        const obj = value;
-        const out = {};
-        for (const [k, v] of Object.entries(obj)) {
-            // Special-case any 'url' field
-            if (typeof v === "string" &&
-                k.toLowerCase() === "url" &&
-                v.startsWith("data:")) {
-                out[k] = formatDataUrlAsLabel(v);
-                continue;
-            }
-            out[k] = summarizeDeep(v);
-        }
-        return out;
-    }
-    return value;
-}
-
-// Shared UI constants for node layout to keep mapping and rendering in sync
-const NODE_HEADER_HEIGHT_PX = 24;
-const NODE_ROW_HEIGHT_PX = 22;
-
-function computeEffectiveHandles(node, registry) {
-    const desc = registry.nodes.get(node.typeId);
-    const resolved = node.resolvedHandles || {};
-    const inputs = { ...desc?.inputs, ...resolved.inputs };
-    const outputs = { ...desc?.outputs, ...resolved.outputs };
-    const inputDefaults = { ...desc?.inputDefaults, ...resolved.inputDefaults };
-    return { inputs, outputs, inputDefaults };
-}
-function countVisibleHandles(handles) {
-    const inputIds = Object.keys(handles.inputs).filter((k) => !sparkGraph.isInputPrivate(handles.inputs, k));
-    const outputIds = Object.keys(handles.outputs);
-    return { inputsCount: inputIds.length, outputsCount: outputIds.length };
-}
-function estimateNodeSize(args) {
-    const { node, registry, showValues, overrides } = args;
-    const { inputs, outputs } = computeEffectiveHandles(node, registry);
-    // Count only non-private inputs for rows on left
-    const { inputsCount, outputsCount } = countVisibleHandles({
-        inputs,
-        outputs,
-    });
-    const rows = Math.max(inputsCount, outputsCount);
-    const baseWidth = showValues ? 320 : 240;
-    const width = overrides?.width ?? baseWidth;
-    const height = overrides?.height ?? NODE_HEADER_HEIGHT_PX + rows * NODE_ROW_HEIGHT_PX;
-    return { width, height, inputsCount, outputsCount, rowCount: rows };
-}
-function layoutNode(args) {
-    const { node, registry, showValues, overrides } = args;
-    const { inputs, outputs } = computeEffectiveHandles(node, registry);
-    const inputOrder = Object.keys(inputs).filter((k) => !sparkGraph.isInputPrivate(inputs, k));
-    const outputOrder = Object.keys(outputs);
-    const { width, height } = estimateNodeSize({
-        node,
-        registry,
-        showValues,
-        overrides,
-    });
-    const HEADER = NODE_HEADER_HEIGHT_PX;
-    const ROW = NODE_ROW_HEIGHT_PX;
-    const handles = [
-        ...inputOrder.map((id, i) => ({
-            id,
-            type: "target",
-            position: react.Position.Left,
-            x: 0,
-            y: HEADER + i * ROW,
-            width: 1,
-            height: ROW + 2,
-        })),
-        ...outputOrder.map((id, i) => ({
-            id,
-            type: "source",
-            position: react.Position.Right,
-            x: width - 1,
-            y: HEADER + i * ROW,
-            width: 1,
-            height: ROW + 2,
-        })),
-    ];
-    const handleLayout = [
-        ...inputOrder.map((id, i) => ({
-            id,
-            type: "target",
-            position: react.Position.Left,
-            y: HEADER + i * ROW + ROW / 2,
-        })),
-        ...outputOrder.map((id, i) => ({
-            id,
-            type: "source",
-            position: react.Position.Right,
-            y: HEADER + i * ROW + ROW / 2,
-        })),
-    ];
-    return { width, height, inputOrder, outputOrder, handles, handleLayout };
-}
-
 function toReactFlow(def, positions, registry, opts) {
     const EDGE_STYLE_MISSING = { stroke: "#f59e0b", strokeWidth: 2 }; // amber-500
     const EDGE_STYLE_ERROR = { stroke: "#ef4444", strokeWidth: 2 };
@@ -1734,6 +1817,33 @@ function getNodeBorderClassNames(args) {
             : "";
     return [borderWidth, borderStyle, borderColor, ring].join(" ").trim();
 }
+/**
+ * Shared utility to generate handle className based on validation and value state.
+ * - Linked handles (with inbound edges) get black borders
+ * - Handles with values (but not linked) get darker gray borders
+ * - Handles with only defaults (no value, not linked) get lighter gray borders
+ * - Validation errors (red/amber) take precedence over value-based styling.
+ */
+function getHandleClassName(args) {
+    const { kind, id, validation } = args;
+    const vIssues = (kind === "input" ? validation.inputs : validation.outputs)?.filter((v) => v.handle === id) || [];
+    const hasAny = vIssues.length > 0;
+    const hasErr = vIssues.some((v) => v.level === "error");
+    // Determine border color based on priority:
+    // 1. Validation errors (red/amber) - highest priority
+    // 2. Gray border
+    let borderColor;
+    if (hasAny && hasErr) {
+        borderColor = "!border-red-500";
+    }
+    else if (hasAny) {
+        borderColor = "!border-amber-500";
+    }
+    else {
+        borderColor = "!border-gray-500 dark:!border-gray-400";
+    }
+    return cx("!w-3 !h-3 !bg-white !dark:bg-stone-900", borderColor, kind === "output" && "!rounded-none");
+}
 
 const WorkbenchContext = React.createContext(null);
 function useWorkbenchContext() {
@@ -2456,7 +2566,7 @@ function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWork
     return (jsxRuntime.jsxs("div", { className: "flex flex-col h-full min-h-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: "Events" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: hideWorkbench, onChange: (e) => onHideWorkbenchChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Hide workbench" })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: autoScroll, onChange: (e) => onAutoScrollChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Auto scroll" })] }), jsxRuntime.jsx("button", { onClick: handleCopyLogs, className: "p-2 border border-gray-300 rounded flex items-center justify-center", title: copied ? "Copied!" : "Copy logs as formatted JSON", children: jsxRuntime.jsx(react$1.CopyIcon, { size: 14 }) }), jsxRuntime.jsx("button", { onClick: clearEvents, className: "p-2 border border-gray-300 rounded flex items-center justify-center", title: "Clear all events", children: jsxRuntime.jsx(react$1.TrashIcon, { size: 14 }) })] })] }), jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto text-[11px] leading-4 divide-y divide-gray-200", children: rows.map((ev) => (jsxRuntime.jsxs("div", { className: "opacity-85 odd:bg-gray-50 px-2 py-1", children: [jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx("span", { className: "w-12 shrink-0 text-right text-gray-500 select-none", children: ev.no }), jsxRuntime.jsxs("span", { className: "text-gray-500", children: [new Date(ev.at).toLocaleTimeString(), " \u00B7 ", ev.source, ":", ev.type] })] }), jsxRuntime.jsx("pre", { className: "m-0 whitespace-pre-wrap ml-12", children: renderPayload(ev.payload) })] }, `${ev.at}:${ev.no}`))) })] }));
 }
 
-function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toString, toElement, contextPanel, setInput, }) {
+function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toString, contextPanel, setInput, }) {
     const safeToString = (typeId, value) => {
         try {
             if (typeof toString === "function") {
@@ -2834,15 +2944,17 @@ function DefaultNodeContent({ data, isConnectable, }) {
     const status = data.status ?? { activeRuns: 0 };
     const validation = data.validation ?? {
         inputs: [],
-        outputs: []};
+        outputs: [],
+        issues: [],
+    };
     const isRunning = !!status.activeRuns;
     const pct = Math.round(Math.max(0, Math.min(1, Number(status.progress) || 0)) * 100);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cx("h-px", (isRunning || pct > 0) && "bg-blue-200 dark:bg-blue-900"), children: jsxRuntime.jsx("div", { className: cx("h-px transition-all", (isRunning || pct > 0) && "bg-blue-500"), style: { width: isRunning || pct > 0 ? `${pct}%` : 0 } }) }), jsxRuntime.jsx(NodeHandles, { data: data, isConnectable: isConnectable, getClassName: ({ kind, id }) => {
-                    const vIssues = (kind === "input" ? validation.inputs : validation.outputs).filter((v) => v.handle === id);
-                    const hasAny = vIssues.length > 0;
-                    const hasErr = vIssues.some((v) => v.level === "error");
-                    return cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400", kind === "output" && "!rounded-none", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500"));
-                }, renderLabel: ({ kind, id: handleId }) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cx("h-px", (isRunning || pct > 0) && "bg-blue-200 dark:bg-blue-900"), children: jsxRuntime.jsx("div", { className: cx("h-px transition-all", (isRunning || pct > 0) && "bg-blue-500"), style: { width: isRunning || pct > 0 ? `${pct}%` : 0 } }) }), jsxRuntime.jsx(NodeHandles, { data: data, isConnectable: isConnectable, getClassName: ({ kind, id }) => getHandleClassName({
+                    kind,
+                    id,
+                    validation,
+                    inputConnected: data.inputConnected,
+                }), renderLabel: ({ kind, id: handleId }) => {
                     const entries = kind === "input" ? inputEntries : outputEntries;
                     const entry = entries.find((e) => e.id === handleId);
                     if (!entry)
@@ -3448,9 +3560,6 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         state: "local",
     });
     const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
-    selectedNode
-        ? registry.nodes.get(selectedNode.typeId)
-        : undefined;
     const effectiveHandles = selectedNode
         ? computeEffectiveHandles(selectedNode, registry)
         : { inputs: {}, outputs: {}, inputDefaults: {} };
@@ -3741,7 +3850,12 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId && e.target.handle === handle);
         if (isLinked)
             return;
-        const typeId = effectiveHandles.inputs[handle];
+        // If raw is undefined, pass it through to delete the input value
+        if (raw === undefined) {
+            runner.setInput(selectedNodeId, handle, undefined);
+            return;
+        }
+        const typeId = sparkGraph.getInputTypeId(effectiveHandles.inputs, handle);
         let value = raw;
         const parseArray = (s, map) => {
             const str = String(s).trim();
@@ -3950,7 +4064,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                                 const message = err instanceof Error ? err.message : String(err);
                                 alert(message);
                             }
-                        }, children: jsxRuntime.jsx(react$1.DownloadIcon, { size: 24 }) }), 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: jsxRuntime.jsx(react$1.UploadIcon, { size: 24 }) }), 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(react$1.BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), 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(react$1.ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), 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 })] })] }));
+                        }, children: jsxRuntime.jsx(react$1.DownloadIcon, { size: 24 }) }), 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: jsxRuntime.jsx(react$1.UploadIcon, { size: 24 }) }), 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(react$1.BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), 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(react$1.ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), 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, contextPanel: overrides?.contextPanel })] })] }));
 }
 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());
@@ -4046,9 +4160,14 @@ exports.WorkbenchCanvas = WorkbenchCanvas;
 exports.WorkbenchContext = WorkbenchContext;
 exports.WorkbenchProvider = WorkbenchProvider;
 exports.WorkbenchStudio = WorkbenchStudio;
+exports.computeEffectiveHandles = computeEffectiveHandles;
+exports.countVisibleHandles = countVisibleHandles;
+exports.estimateNodeSize = estimateNodeSize;
 exports.formatDataUrlAsLabel = formatDataUrlAsLabel;
 exports.formatDeclaredTypeSignature = formatDeclaredTypeSignature;
+exports.getHandleClassName = getHandleClassName;
 exports.getNodeBorderClassNames = getNodeBorderClassNames;
+exports.layoutNode = layoutNode;
 exports.preformatValueForDisplay = preformatValueForDisplay;
 exports.prettyHandle = prettyHandle;
 exports.resolveOutputDisplay = resolveOutputDisplay;