@bian-womp/spark-workbench 0.1.0

package/lib/cjs/index.cjs

@@ -0,0 +1,1748 @@
+'use strict';
+
+var sparkGraph = require('@bian-womp/spark-graph');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ReactFlow = require('reactflow');
+require('reactflow/dist/style.css');
+var cx = require('classnames');
+var react = require('@phosphor-icons/react');
+var sparkRemote = require('@bian-womp/spark-remote');
+
+class DefaultUIExtensionRegistry {
+    constructor() {
+        this.nodeRenderers = new Map();
+        this.portRenderers = new Map();
+        this.edgeRenderers = new Map();
+    }
+    registerNodeRenderer(nodeTypeId, renderer) {
+        this.nodeRenderers.set(nodeTypeId, renderer);
+        return this;
+    }
+    getNodeRenderer(nodeTypeId) {
+        return this.nodeRenderers.get(nodeTypeId);
+    }
+    registerPortRenderer(dataTypeId, renderer) {
+        this.portRenderers.set(dataTypeId, renderer);
+        return this;
+    }
+    getPortRenderer(dataTypeId) {
+        return this.portRenderers.get(dataTypeId);
+    }
+    registerEdgeRenderer(typeId, renderer) {
+        this.edgeRenderers.set(typeId, renderer);
+        return this;
+    }
+    getEdgeRenderer(typeId) {
+        return this.edgeRenderers.get(typeId);
+    }
+    setInspector(renderer) {
+        this.inspector = renderer;
+        return this;
+    }
+    getInspector() {
+        return this.inspector;
+    }
+    setPalette(renderer) {
+        this.palette = renderer;
+        return this;
+    }
+    getPalette() {
+        return this.palette;
+    }
+    setToolbar(renderer) {
+        this.toolbar = renderer;
+        return this;
+    }
+    getToolbar() {
+        return this.toolbar;
+    }
+    setContextMenu(renderer) {
+        this.contextMenu = renderer;
+        return this;
+    }
+    getContextMenu() {
+        return this.contextMenu;
+    }
+    setMiniMap(renderer) {
+        this.miniMap = renderer;
+        return this;
+    }
+    getMiniMap() {
+        return this.miniMap;
+    }
+    setIconProvider(provider) {
+        this.iconProvider = provider;
+        return this;
+    }
+    getIconProvider() {
+        return this.iconProvider;
+    }
+}
+
+class AbstractWorkbench {
+    constructor(args) {
+        this.ui = args.ui;
+        this.layout = args.layout;
+        this.storage = args.storage;
+        this.serializer = args.serializer;
+    }
+    // Expose UI registry to adapters (React Flow, CLI) to allow overrides
+    getUI() {
+        return this.ui;
+    }
+}
+
+class InMemoryWorkbench extends AbstractWorkbench {
+    constructor() {
+        super(...arguments);
+        this.def = { nodes: [], edges: [] };
+        this.positions = {};
+        this.listeners = new Map();
+        this.selection = {
+            nodes: [],
+            edges: [],
+        };
+    }
+    setRegistry(registry) {
+        this.registry = registry;
+    }
+    async load(def) {
+        this.def = { nodes: [...def.nodes], edges: [...def.edges] };
+        if (this.layout) {
+            const { positions } = await this.layout.layout(this.def);
+            this.positions = positions;
+        }
+        this.emit("graphChanged", { def: this.def });
+        this.refreshValidation();
+    }
+    export() {
+        return this.def;
+    }
+    refreshValidation() {
+        this.emit("validationChanged", this.validate());
+    }
+    validate() {
+        if (this.registry) {
+            const builder = new sparkGraph.GraphBuilder(this.registry);
+            const report = builder.validate(this.def);
+            return report;
+        }
+        const issues = [];
+        const nodeIds = new Set();
+        for (const n of this.def.nodes) {
+            if (nodeIds.has(n.nodeId)) {
+                issues.push({
+                    level: "error",
+                    code: "NODE_ID_DUP",
+                    message: `Duplicate nodeId ${n.nodeId}`,
+                });
+            }
+            else
+                nodeIds.add(n.nodeId);
+        }
+        const edgeIds = new Set();
+        for (const e of this.def.edges) {
+            if (edgeIds.has(e.id)) {
+                issues.push({
+                    level: "error",
+                    code: "EDGE_ID_DUP",
+                    message: `Duplicate edge id ${e.id}`,
+                });
+            }
+            else
+                edgeIds.add(e.id);
+        }
+        return { ok: issues.every((i) => i.level !== "error"), issues };
+    }
+    addNode(node) {
+        const id = node.nodeId ?? this.generateId("n");
+        this.def.nodes.push({
+            nodeId: id,
+            typeId: node.typeId,
+            params: node.params,
+        });
+        if (node.position)
+            this.positions[id] = node.position;
+        this.emit("graphChanged", {
+            def: this.def,
+            change: { type: "addNode", nodeId: id },
+        });
+        this.refreshValidation();
+    }
+    removeNode(nodeId) {
+        this.def.nodes = this.def.nodes.filter((n) => n.nodeId !== nodeId);
+        this.def.edges = this.def.edges.filter((e) => e.source.nodeId !== nodeId && e.target.nodeId !== nodeId);
+        delete this.positions[nodeId];
+        this.emit("graphChanged", {
+            def: this.def,
+            change: { type: "removeNode", nodeId },
+        });
+        this.refreshValidation();
+    }
+    connect(edge) {
+        const id = edge.id ?? this.generateId("e");
+        this.def.edges.push({
+            id,
+            source: { ...edge.source },
+            target: { ...edge.target },
+            typeId: edge.typeId,
+        });
+        this.emit("graphChanged", {
+            def: this.def,
+            change: { type: "connect", edgeId: id },
+        });
+        this.refreshValidation();
+    }
+    disconnect(edgeId) {
+        this.def.edges = this.def.edges.filter((e) => e.id !== edgeId);
+        this.emit("graphChanged", {
+            def: this.def,
+            change: { type: "disconnect", edgeId },
+        });
+        this.emit("validationChanged", this.validate());
+    }
+    updateParams(nodeId, params) {
+        const n = this.def.nodes.find((n) => n.nodeId === nodeId);
+        if (!n)
+            return;
+        n.params = { ...(n.params ?? {}), ...params };
+        this.emit("graphChanged", {
+            def: this.def,
+            change: { type: "updateParams", nodeId },
+        });
+    }
+    // Position and selection APIs for React Flow bridge
+    setPosition(nodeId, pos) {
+        this.positions[nodeId] = pos;
+        this.emit("graphUiChanged", {
+            def: this.def,
+            change: { type: "moveNode", nodeId, pos },
+        });
+    }
+    setPositions(map) {
+        this.positions = { ...map };
+        this.emit("graphUiChanged", {
+            def: this.def,
+            change: { type: "moveNodes" },
+        });
+    }
+    getPositions() {
+        return { ...this.positions };
+    }
+    setSelection(sel) {
+        this.selection = { nodes: [...sel.nodes], edges: [...sel.edges] };
+        this.emit("selectionChanged", this.selection);
+    }
+    getSelection() {
+        return {
+            nodes: [...this.selection.nodes],
+            edges: [...this.selection.edges],
+        };
+    }
+    toggleNodeSelection(nodeId) {
+        this.selection.nodes = this.selection.nodes.includes(nodeId)
+            ? this.selection.nodes.filter((id) => id !== nodeId)
+            : [...this.selection.nodes, nodeId];
+        this.emit("selectionChanged", this.selection);
+    }
+    toggleEdgeSelection(edgeId) {
+        this.selection.edges = this.selection.edges.includes(edgeId)
+            ? this.selection.edges.filter((id) => id !== edgeId)
+            : [...this.selection.edges, edgeId];
+        this.emit("selectionChanged", this.selection);
+    }
+    on(event, handler) {
+        if (!this.listeners.has(event))
+            this.listeners.set(event, new Set());
+        const set = this.listeners.get(event);
+        set.add(handler);
+        return () => set.delete(handler);
+    }
+    emit(event, payload) {
+        const set = this.listeners.get(event);
+        if (set)
+            for (const h of Array.from(set))
+                h(payload);
+    }
+    generateId(prefix) {
+        return `${prefix}${Math.random().toString(36).slice(2, 8)}`;
+    }
+}
+
+class CLIWorkbench {
+    constructor(wb, deps = {}) {
+        this.wb = wb;
+        this.deps = deps;
+    }
+    async load(def) {
+        await this.wb.load(def);
+    }
+    print(def, options) {
+        const d = def ?? this.wb.export();
+        const detail = !!options?.detail;
+        const lines = [];
+        lines.push(`Nodes (${d.nodes.length})`);
+        for (const n of d.nodes) {
+            if (!detail) {
+                lines.push(`  - ${n.nodeId}: ${n.typeId}`);
+            }
+            else {
+                const reg = this.wb["registry"];
+                const desc = reg?.nodes?.get(n.typeId);
+                const inputs = Object.entries(desc?.inputs ?? {})
+                    .map(([h, t]) => `${h}:${t}`)
+                    .join(", ");
+                const outputs = Object.entries(desc?.outputs ?? {})
+                    .map(([h, t]) => `${h}:${t}`)
+                    .join(", ");
+                const params = n.params ? JSON.stringify(n.params) : "{}";
+                lines.push(`  - ${n.nodeId}: ${n.typeId}`);
+                lines.push(`      inputs:  ${inputs || "-"}`);
+                lines.push(`      outputs: ${outputs || "-"}`);
+                lines.push(`      params:  ${params}`);
+                const inVals = options?.values?.inputs?.[n.nodeId];
+                const outVals = options?.values?.outputs?.[n.nodeId];
+                if (inVals && Object.keys(inVals).length > 0)
+                    lines.push(`      inputValues:  ${JSON.stringify(inVals)}`);
+                if (outVals && Object.keys(outVals).length > 0)
+                    lines.push(`      outputValues: ${JSON.stringify(outVals)}`);
+            }
+        }
+        lines.push(`Edges (${d.edges.length})`);
+        for (const e of d.edges) {
+            lines.push(`  - ${e.id}: ${e.source.nodeId}.${e.source.handle} -> ${e.target.nodeId}.${e.target.handle} (${e.typeId})`);
+        }
+        return lines.join("\n");
+    }
+    get actions() {
+        return this.wb;
+    }
+}
+
+function toReactFlow$1(def, positions = {}) {
+    const nodes = def.nodes.map((n) => ({
+        id: n.nodeId,
+        data: { typeId: n.typeId, params: n.params },
+        position: positions[n.nodeId] ?? { x: 0, y: 0 },
+    }));
+    const edges = def.edges.map((e) => ({
+        id: e.id,
+        source: e.source.nodeId,
+        target: e.target.nodeId,
+        sourceHandle: e.source.handle,
+        targetHandle: e.target.handle,
+    }));
+    return { nodes, edges };
+}
+class ReactFlowWorkbench {
+    constructor(wb) {
+        this.wb = wb;
+    }
+    get actions() {
+        return this.wb;
+    }
+    async load(def) {
+        await this.wb.load(def);
+    }
+    export(def) {
+        const d = def ?? this.wb.export();
+        return toReactFlow$1(d);
+    }
+}
+
+const WorkbenchContext = React.createContext(null);
+function useWorkbenchContext() {
+    const ctx = React.useContext(WorkbenchContext);
+    if (!ctx)
+        throw new Error("useWorkbenchContext must be used within WorkbenchProvider");
+    return ctx;
+}
+
+function useWorkbenchBridge(wb) {
+    const onConnect = React.useCallback((params) => {
+        if (!params.source || !params.target)
+            return;
+        if (!params.sourceHandle || !params.targetHandle)
+            return;
+        wb.connect({
+            source: { nodeId: params.source, handle: params.sourceHandle },
+            target: { nodeId: params.target, handle: params.targetHandle },
+        });
+    }, [wb]);
+    const onNodesChange = React.useCallback((changes) => {
+        changes.forEach((c) => {
+            if (c.type === "position" && c.position)
+                wb.setPosition(c.id, c.position);
+            if (c.type === "remove")
+                wb.removeNode(c.id);
+            if (c.type === "select")
+                wb.toggleNodeSelection(c.id);
+        });
+    }, [wb]);
+    const onEdgesDelete = React.useCallback((edges) => edges.forEach((e) => wb.disconnect(e.id)), [wb]);
+    const onEdgesChange = React.useCallback((changes) => {
+        changes.forEach((c) => {
+            if (c.type === "remove")
+                wb.disconnect(c.id);
+            else if (c.type === "select")
+                wb.toggleEdgeSelection(c.id);
+        });
+    }, [wb]);
+    const onNodesDelete = React.useCallback((nodes) => {
+        for (const n of nodes)
+            wb.removeNode(n.id);
+    }, [wb]);
+    const onSelectionChange = React.useCallback((sel) => {
+        const next = {
+            nodes: sel.nodes.map((n) => n.id),
+            edges: sel.edges.map((e) => e.id),
+        };
+        const cur = wb.getSelection();
+        const sameLen = cur.nodes.length === next.nodes.length &&
+            cur.edges.length === next.edges.length;
+        const same = sameLen &&
+            cur.nodes.every((id, i) => id === next.nodes[i]) &&
+            cur.edges.every((id, i) => id === next.edges[i]);
+        if (!same)
+            wb.setSelection(next);
+    }, [wb]);
+    return {
+        onConnect,
+        onNodesChange,
+        onEdgesChange,
+        onEdgesDelete,
+        onNodesDelete,
+        onSelectionChange,
+    };
+}
+function useWorkbenchGraphTick(wb) {
+    const [tick, setTick] = React.useState(0);
+    React.useEffect(() => {
+        const bump = () => setTick((t) => t + 1);
+        const off = wb.on("graphChanged", bump);
+        return () => off();
+    }, [wb]);
+    return tick;
+}
+function useWorkbenchGraphUiTick(wb) {
+    const [tick, setTick] = React.useState(0);
+    React.useEffect(() => {
+        const bump = () => setTick((t) => t + 1);
+        const off = wb.on("graphUiChanged", bump);
+        return () => off();
+    }, [wb]);
+    return tick;
+}
+function useWorkbenchVersionTick(runner) {
+    const [version, setVersion] = React.useState(0);
+    React.useEffect(() => {
+        const bump = () => setVersion((v) => v + 1);
+        const u1 = runner.on("value", bump);
+        const u2 = runner.on("error", bump);
+        const u3 = runner.on("invalidate", bump);
+        const u4 = runner.on("status", bump);
+        const u5 = runner.on("stats", bump);
+        return () => {
+            u1();
+            u2();
+            u3();
+            u4();
+            u5();
+        };
+    }, [runner]);
+    return version;
+}
+// Query param helpers
+function setSearchParam(key, val) {
+    if (typeof window === "undefined")
+        return;
+    const url = new URL(window.location.href);
+    if (val === undefined || val === "")
+        url.searchParams.delete(key);
+    else
+        url.searchParams.set(key, val);
+    window.history.replaceState({}, "", url.toString());
+}
+function useQueryParamBoolean(key, defaultValue) {
+    const initial = React.useMemo(() => {
+        if (typeof window === "undefined")
+            return defaultValue;
+        const sp = new URLSearchParams(window.location.search);
+        const v = sp.get(key);
+        if (v === null)
+            return defaultValue;
+        return v === "1" || v === "true";
+    }, [key, defaultValue]);
+    const [val, setVal] = React.useState(initial);
+    const set = React.useCallback((v) => {
+        setVal(v);
+        setSearchParam(key, v ? "1" : undefined);
+    }, [key]);
+    React.useEffect(() => {
+        const onPop = () => {
+            const sp = new URLSearchParams(window.location.search);
+            const v = sp.get(key);
+            setVal(v === "1" || v === "true");
+        };
+        window.addEventListener("popstate", onPop);
+        return () => window.removeEventListener("popstate", onPop);
+    }, [key]);
+    return [val, set];
+}
+function useQueryParamString(key, defaultValue) {
+    const initial = React.useMemo(() => {
+        if (typeof window === "undefined")
+            return defaultValue;
+        const sp = new URLSearchParams(window.location.search);
+        const v = sp.get(key);
+        return v ?? defaultValue;
+    }, [key, defaultValue]);
+    const [val, setVal] = React.useState(initial);
+    const set = React.useCallback((v) => {
+        setVal(v);
+        setSearchParam(key, v);
+    }, [key]);
+    React.useEffect(() => {
+        const onPop = () => {
+            const sp = new URLSearchParams(window.location.search);
+            const v = sp.get(key) ?? undefined;
+            setVal(v);
+        };
+        window.addEventListener("popstate", onPop);
+        return () => window.removeEventListener("popstate", onPop);
+    }, [key]);
+    return [val, set];
+}
+
+function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
+    const [nodeStatus, setNodeStatus] = React.useState({});
+    const [edgeStatus, setEdgeStatus] = React.useState({});
+    const [events, setEvents] = React.useState([]);
+    const clearEvents = React.useCallback(() => setEvents([]), []);
+    // Validation
+    const [validation, setValidation] = React.useState(undefined);
+    // Selection (mirror workbench selectionChanged)
+    const [selectedNodeId, setSelectedNodeId] = React.useState();
+    const [selectedEdgeId, setSelectedEdgeId] = React.useState();
+    const setSelection = React.useCallback((sel) => wb.setSelection(sel), [wb]);
+    // Ticks
+    const graphTick = useWorkbenchGraphTick(wb);
+    const graphUiTick = useWorkbenchGraphUiTick(wb);
+    const versionTick = useWorkbenchVersionTick(runner);
+    const valuesTick = versionTick + graphTick + graphUiTick;
+    // Def and IO values
+    const def = wb.export();
+    const inputsMap = React.useMemo(() => runner.getInputs(def), [runner, def, valuesTick]);
+    const outputsMap = React.useMemo(() => runner.getOutputs(def), [runner, def, valuesTick]);
+    // Auto layout (simple layered layout)
+    const runAutoLayout = React.useCallback(() => {
+        const cur = wb.export();
+        const indegree = {};
+        const adj = {};
+        for (const n of cur.nodes) {
+            indegree[n.nodeId] = 0;
+            adj[n.nodeId] = [];
+        }
+        for (const e of cur.edges) {
+            indegree[e.target.nodeId] = (indegree[e.target.nodeId] ?? 0) + 1;
+            adj[e.source.nodeId].push(e.target.nodeId);
+        }
+        const q = Object.keys(indegree).filter((k) => indegree[k] === 0);
+        const layers = [];
+        while (q.length) {
+            const layer = [];
+            const next = [];
+            for (const id of q) {
+                layer.push(id);
+                for (const nb of adj[id]) {
+                    indegree[nb] -= 1;
+                    if (indegree[nb] === 0)
+                        next.push(nb);
+                }
+            }
+            layers.push(layer);
+            q.splice(0, q.length, ...next);
+        }
+        const X = 360;
+        const Y = 180;
+        const pos = {};
+        layers.forEach((layer, layerIndex) => {
+            layer.forEach((id, itemIndex) => {
+                pos[id] = { x: layerIndex * X, y: itemIndex * Y };
+            });
+        });
+        wb.setPositions(pos);
+    }, [wb]);
+    // Subscribe to runner/workbench events
+    React.useEffect(() => {
+        const add = (source, type) => (payload) => setEvents((prev) => {
+            if (source === "workbench" &&
+                (type === "graphChanged" || type === "graphUiChanged")) {
+                const changeType = payload?.change?.type;
+                if (changeType === "moveNode" || changeType === "moveNodes")
+                    return prev;
+            }
+            const next = [
+                { at: Date.now(), source, type, payload: structuredClone(payload) },
+                ...prev,
+            ];
+            return next.length > 200 ? next.slice(0, 200) : next;
+        });
+        const off1 = runner.on("value", (e) => {
+            if (e?.io === "input") {
+                const nodeId = e?.nodeId;
+                setNodeStatus((s) => ({
+                    ...s,
+                    [nodeId]: { ...(s[nodeId] ?? {}), invalidated: true },
+                }));
+            }
+            return add("runner", "value")(e);
+        });
+        const off2 = runner.on("error", (e) => {
+            const edgeError = e;
+            const nodeError = e;
+            if (edgeError?.kind === "edge-convert") {
+                const edgeId = edgeError.edgeId;
+                setEdgeStatus((s) => ({
+                    ...s,
+                    [edgeId]: { ...(s[edgeId] ?? {}), lastError: edgeError.err },
+                }));
+            }
+            else if (nodeError?.nodeId) {
+                const nodeId = nodeError?.nodeId;
+                setNodeStatus((s) => ({
+                    ...s,
+                    [nodeId]: {
+                        ...(s[nodeId] ?? {}),
+                        lastError: nodeError?.err,
+                    },
+                }));
+            }
+            return add("runner", "error")(e);
+        });
+        const off3 = runner.on("invalidate", (e) => {
+            if (e?.reason === "graph-updated") {
+                setNodeStatus((s) => {
+                    const next = {};
+                    for (const n of wb.export().nodes) {
+                        next[n.nodeId] = { ...(s[n.nodeId] ?? {}), invalidated: true };
+                    }
+                    return next;
+                });
+            }
+            return add("runner", "invalidate")(e);
+        });
+        const off3b = runner.on("stats", (s) => {
+            if (!s)
+                return;
+            if (s.kind === "node-start") {
+                const id = s.nodeId;
+                setNodeStatus((prev) => ({
+                    ...prev,
+                    [id]: {
+                        ...(prev[id] ?? {}),
+                        running: true,
+                        progress: 0,
+                        invalidated: false,
+                    },
+                }));
+            }
+            else if (s.kind === "node-progress") {
+                const id = s.nodeId;
+                setNodeStatus((prev) => ({
+                    ...prev,
+                    [id]: {
+                        ...(prev[id] ?? {}),
+                        running: true,
+                        progress: Number(s.progress) || 0,
+                    },
+                }));
+            }
+            else if (s.kind === "node-done") {
+                const id = s.nodeId;
+                setNodeStatus((prev) => ({
+                    ...prev,
+                    [id]: { ...(prev[id] ?? {}), running: false },
+                }));
+            }
+            else if (s.kind === "edge-start") {
+                const id = s.edgeId;
+                setEdgeStatus((prev) => ({
+                    ...prev,
+                    [id]: { ...(prev[id] ?? {}), running: true },
+                }));
+            }
+            else if (s.kind === "edge-done") {
+                const id = s.edgeId;
+                setEdgeStatus((prev) => ({
+                    ...prev,
+                    [id]: { ...(prev[id] ?? {}), running: false },
+                }));
+            }
+            return add("runner", "stats")(s);
+        });
+        const off4 = wb.on("graphChanged", add("workbench", "graphChanged"));
+        const off4b = wb.on("graphUiChanged", add("workbench", "graphUiChanged"));
+        const off5 = wb.on("validationChanged", add("workbench", "validationChanged"));
+        const off5b = wb.on("validationChanged", (r) => setValidation(r));
+        const off6 = wb.on("selectionChanged", (sel) => {
+            setSelectedNodeId(sel.nodes?.[0]);
+            setSelectedEdgeId(sel.edges?.[0]);
+        });
+        const off7 = wb.on("error", add("workbench", "error"));
+        wb.refreshValidation();
+        return () => {
+            off1();
+            off2();
+            off3();
+            off3b();
+            off4();
+            off4b();
+            off5();
+            off5b();
+            off6();
+            off7();
+        };
+    }, [runner, wb]);
+    // Push incremental updates into running engine without full reload
+    React.useEffect(() => {
+        if (runner.isRunning()) {
+            try {
+                runner.update(def);
+            }
+            catch { }
+        }
+    }, [runner, def, graphTick]);
+    const validationByNode = React.useMemo(() => {
+        const inputs = {};
+        const outputs = {};
+        const issues = {};
+        if (!validation)
+            return { inputs, outputs, issues };
+        for (const is of validation.issues ?? []) {
+            const d = is?.data;
+            const level = is?.level;
+            const code = String(is?.code ?? "");
+            const message = String(is?.message ?? code);
+            if (!d)
+                continue;
+            if (d.nodeId) {
+                if (d.input) {
+                    const arr = inputs[d.nodeId] ?? (inputs[d.nodeId] = []);
+                    arr.push({ handle: String(d.input), level, message, code });
+                    const nodeArr = issues[d.nodeId] ?? (issues[d.nodeId] = []);
+                    nodeArr.push({ level, message, code });
+                }
+                if (d.output) {
+                    const arr = outputs[d.nodeId] ?? (outputs[d.nodeId] = []);
+                    arr.push({ handle: String(d.output), level, message, code });
+                    const nodeArr = issues[d.nodeId] ?? (issues[d.nodeId] = []);
+                    nodeArr.push({ level, message, code });
+                }
+                if (!d.input && !d.output) {
+                    const arr = issues[d.nodeId] ?? (issues[d.nodeId] = []);
+                    arr.push({ level, message, code });
+                }
+            }
+        }
+        return { inputs, outputs, issues };
+    }, [validation]);
+    const validationGlobal = React.useMemo(() => {
+        const list = [];
+        if (!validation)
+            return list;
+        for (const is of validation.issues ?? []) {
+            const d = is?.data;
+            const level = is?.level;
+            const code = String(is?.code ?? "");
+            const message = String(is?.message ?? code);
+            if (!d || (!d.nodeId && !d.edgeId)) {
+                list.push({ level, code, message });
+            }
+        }
+        return list;
+    }, [validation]);
+    const validationByEdge = React.useMemo(() => {
+        const errors = {};
+        const issues = {};
+        if (!validation)
+            return { errors, issues };
+        for (const is of validation.issues ?? []) {
+            const d = is?.data;
+            const level = is?.level;
+            const code = String(is?.code ?? "");
+            const message = String(is?.message ?? code);
+            if (d?.edgeId) {
+                if (level === "error")
+                    errors[d.edgeId] = true;
+                const arr = issues[d.edgeId] ?? (issues[d.edgeId] = []);
+                arr.push({ level, message, code });
+            }
+        }
+        return { errors, issues };
+    }, [validation]);
+    const isRunning = React.useCallback(() => runner.isRunning(), [runner]);
+    const engineKind = React.useCallback(() => runner.getRunningEngine(), [runner]);
+    const start = React.useCallback((engine) => {
+        try {
+            runner.launch(wb.export(), { engine });
+        }
+        catch { }
+    }, [runner, wb]);
+    const stop = React.useCallback(() => runner.dispose(), [runner]);
+    const step = React.useCallback(() => runner.step(), [runner]);
+    const flush = React.useCallback(() => runner.flush(), [runner]);
+    const value = React.useMemo(() => ({
+        wb,
+        runner,
+        registry,
+        setRegistry,
+        def,
+        selectedNodeId,
+        selectedEdgeId,
+        setSelection,
+        nodeStatus,
+        edgeStatus,
+        valuesTick,
+        inputsMap,
+        outputsMap,
+        validationByNode,
+        validationByEdge,
+        validationGlobal,
+        events,
+        clearEvents,
+        isRunning,
+        engineKind,
+        start,
+        stop,
+        step,
+        flush,
+        runAutoLayout,
+    }), [
+        wb,
+        runner,
+        registry,
+        setRegistry,
+        def,
+        selectedNodeId,
+        selectedEdgeId,
+        setSelection,
+        nodeStatus,
+        edgeStatus,
+        valuesTick,
+        inputsMap,
+        outputsMap,
+        validationByNode,
+        validationByEdge,
+        validationGlobal,
+        events,
+        clearEvents,
+        isRunning,
+        engineKind,
+        start,
+        stop,
+        step,
+        flush,
+        runAutoLayout,
+    ]);
+    return (jsxRuntime.jsx(WorkbenchContext.Provider, { value: value, children: children }));
+}
+
+function toReactFlow(def, positions, registry, selectedNodeIds, selectedEdgeIds, opts) {
+    const nodeHandleMap = {};
+    const nodes = def.nodes.map((n) => {
+        const desc = registry.nodes.get(n.typeId);
+        const inputHandles = Object.entries(desc?.inputs ?? {}).map(([id, typeId]) => ({ id, typeId }));
+        const outputHandles = Object.entries(desc?.outputs ?? {}).map(([id, typeId]) => ({ id, typeId }));
+        nodeHandleMap[n.nodeId] = {
+            inputs: new Set(inputHandles.map((h) => h.id)),
+            outputs: new Set(outputHandles.map((h) => h.id)),
+        };
+        return {
+            id: n.nodeId,
+            data: {
+                typeId: n.typeId,
+                params: n.params,
+                inputHandles,
+                outputHandles,
+                showValues: opts?.showValues,
+                inputValues: opts?.inputs?.[n.nodeId],
+                outputValues: opts?.outputs?.[n.nodeId],
+                status: opts?.nodeStatus?.[n.nodeId],
+                validation: {
+                    inputs: opts?.nodeValidation?.inputs?.[n.nodeId] ?? [],
+                    outputs: opts?.nodeValidation?.outputs?.[n.nodeId] ?? [],
+                    issues: opts?.nodeValidation?.issues?.[n.nodeId] ?? [],
+                },
+                toDisplay: opts?.toDisplay,
+            },
+            position: positions[n.nodeId] ?? { x: 0, y: 0 },
+            type: opts?.resolveNodeType?.(n.typeId) ?? "@bian-womp/spark:default",
+            selected: selectedNodeIds ? selectedNodeIds.has(n.nodeId) : undefined,
+        };
+    });
+    const edges = def.edges
+        .filter((e) => {
+        const src = nodeHandleMap[e.source.nodeId];
+        const dst = nodeHandleMap[e.target.nodeId];
+        if (!src || !dst)
+            return false;
+        return src.outputs.has(e.source.handle) && dst.inputs.has(e.target.handle);
+    })
+        .map((e) => {
+        const st = opts?.edgeStatus?.[e.id];
+        const isRunning = !!st?.running;
+        const hasError = !!st?.lastError;
+        const isInvalidEdge = !!opts?.edgeValidation?.[e.id];
+        const style = hasError || isInvalidEdge
+            ? { stroke: "#ef4444", strokeWidth: 2 }
+            : isRunning
+                ? { stroke: "#3b82f6" }
+                : undefined;
+        return {
+            id: e.id,
+            source: e.source.nodeId,
+            target: e.target.nodeId,
+            sourceHandle: e.source.handle,
+            targetHandle: e.target.handle,
+            selected: selectedEdgeIds ? selectedEdgeIds.has(e.id) : undefined,
+            animated: isRunning,
+            style,
+        };
+    });
+    return { nodes, edges };
+}
+
+function IssueBadge({ level, title, size = 12, className, }) {
+    const colorClass = level === "error" ? "text-red-600" : "text-amber-600";
+    return (jsxRuntime.jsx("button", { type: "button", className: `inline-flex items-center justify-center shrink-0 ${colorClass} ${className ?? ""}`, title: title, style: { width: size, height: size }, children: level === "error" ? (jsxRuntime.jsx(react.XCircleIcon, { size: size, weight: "fill" })) : (jsxRuntime.jsx(react.WarningCircleIcon, { size: size, weight: "fill" })) }));
+}
+
+const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConnectable, }) {
+    const typeId = data.typeId;
+    const inputEntries = data.inputHandles ?? [];
+    const outputEntries = data.outputHandles ?? [];
+    const status = data.status ?? {};
+    const validation = data.validation ?? {
+        inputs: [],
+        outputs: [],
+        issues: [],
+    };
+    const HEADER_SIZE = 24;
+    const ROW_SIZE = 22;
+    const maxRows = Math.max(inputEntries.length, outputEntries.length);
+    const minHeight = HEADER_SIZE + maxRows * ROW_SIZE;
+    const minWidth = data.showValues ? 320 : 160;
+    const topFor = (i) => HEADER_SIZE + i * ROW_SIZE + ROW_SIZE / 2;
+    const hasError = !!status.lastError;
+    const isRunning = !!status.running;
+    const isInvalid = !!status.invalidated && !isRunning && !hasError;
+    const borderClasses = selected
+        ? "border-2 border-gray-900 dark:border-gray-100"
+        : hasError
+            ? "border-2 border-red-500"
+            : isRunning
+                ? "border-2 border-blue-500 ring-2 ring-blue-200 dark:ring-blue-900"
+                : isInvalid
+                    ? "border-2 border-amber-500 border-dashed"
+                    : "border border-gray-500 dark:border-gray-400";
+    const pct = Math.round(Math.max(0, Math.min(1, Number(status.progress) || 0)) * 100);
+    return (jsxRuntime.jsxs("div", { className: cx("rounded-lg bg-white/70 !dark:bg-stone-900 border-solid", borderClasses), style: { position: "relative", minHeight: minHeight, minWidth }, children: [jsxRuntime.jsxs("div", { className: "flex h-6 items-center justify-center px-2 border-b border-solid border-gray-500 dark:border-gray-400 text-gray-600 dark:text-gray-300", children: [jsxRuntime.jsx("strong", { className: "flex-1 h-full leading-6 text-xs", children: typeId }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [hasError && (jsxRuntime.jsx("span", { title: String(status.lastError?.message ?? status.lastError), children: jsxRuntime.jsx(react.XCircleIcon, { size: 12, weight: "fill", className: "text-red-500" }) })), validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
+                                    ? "error"
+                                    : "warning", size: 12, className: "w-3 h-3", title: validation.issues
+                                    .map((v) => `${v.code}: ${v.message}`)
+                                    .join("; ") })), jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }), (isRunning || pct > 0) && (jsxRuntime.jsx("div", { className: "h-1 bg-blue-200 dark:bg-blue-900", children: jsxRuntime.jsx("div", { className: "h-1 bg-blue-500 transition-all", style: { width: `${pct}%` } }) })), inputEntries.map((entry, i) => {
+                const vIssues = validation.inputs.filter((v) => v.handle === entry.id);
+                const hasAny = vIssues.length > 0;
+                const hasErr = vIssues.some((v) => v.level === "error");
+                const title = vIssues
+                    .map((v) => `${v.code}: ${v.message}`)
+                    .join("; ");
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(ReactFlow.Handle, { id: entry.id, type: "target", position: ReactFlow.Position.Left, isConnectable: isConnectable, className: cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500")), style: { left: -5, top: topFor(i) } }), jsxRuntime.jsxs("div", { className: "absolute left-2 text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", style: { top: topFor(i) - 8 }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), data.showValues && (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: data.toDisplay
+                                        ? data.toDisplay(entry.typeId, data.inputValues?.[entry.id])
+                                        : String(data.inputValues?.[entry.id]) }))] })] }, `in-${entry.id}`));
+            }), outputEntries.map((entry, i) => {
+                const vIssues = validation.outputs.filter((v) => v.handle === entry.id);
+                const hasAny = vIssues.length > 0;
+                const hasErr = vIssues.some((v) => v.level === "error");
+                const title = vIssues
+                    .map((v) => `${v.code}: ${v.message}`)
+                    .join("; ");
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(ReactFlow.Handle, { id: entry.id, type: "source", position: ReactFlow.Position.Right, isConnectable: isConnectable, className: cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400 !rounded-none", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500")), style: { right: -5, top: topFor(i) } }), jsxRuntime.jsxs("div", { className: "absolute right-2 text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", style: { top: topFor(i) - 8, textAlign: "right" }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), data.showValues && (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: data.toDisplay
+                                        ? data.toDisplay(entry.typeId, data.outputValues?.[entry.id])
+                                        : String(data.outputValues?.[entry.id]) }))] })] }, `out-${entry.id}`));
+            })] }));
+});
+DefaultNode.displayName = "DefaultNode";
+
+function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
+    const { registry } = useWorkbenchContext();
+    const rf = ReactFlow.useReactFlow();
+    if (!open || !clientPos)
+        return null;
+    const items = Array.from(registry.nodes.keys());
+    const handleClick = (typeId) => {
+        const p = rf.project({ x: clientPos.x, y: clientPos.y });
+        onAdd(typeId, p);
+        onClose();
+    };
+    return (jsxRuntime.jsxs("div", { className: "fixed z-[1000] bg-white border border-gray-300 rounded-lg shadow-lg p-1 min-w-[180px] text-sm text-gray-700", style: { left: clientPos.x, top: clientPos.y }, onMouseLeave: onClose, children: [jsxRuntime.jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Add Node" }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-auto", children: items.map((id) => (jsxRuntime.jsx("button", { onClick: () => handleClick(id), className: "block w-full text-left px-2 py-1 hover:bg-gray-100 cursor-pointer", children: id }, id))) })] }));
+}
+
+function WorkbenchCanvas({ showValues, toDisplay, }) {
+    const { wb, registry, inputsMap, outputsMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, } = useWorkbenchContext();
+    const ioValues = { inputs: inputsMap, outputs: outputsMap };
+    const nodeValidation = validationByNode;
+    const edgeValidation = validationByEdge.errors;
+    const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete, onSelectionChange, } = useWorkbenchBridge(wb);
+    const { nodeTypes, resolveNodeType } = React.useMemo(() => {
+        // Build nodeTypes map using UI extension registry
+        const ui = wb.getUI();
+        const custom = new Map();
+        for (const typeId of Array.from(registry.nodes.keys())) {
+            const renderer = ui.getNodeRenderer(typeId);
+            if (renderer)
+                custom.set(typeId, renderer);
+        }
+        const types = { "@bian-womp/spark:default": DefaultNode };
+        for (const [typeId, comp] of custom.entries()) {
+            types[`spark:${typeId}`] = comp;
+        }
+        const resolver = (nodeTypeId) => custom.has(nodeTypeId) ? `spark:${nodeTypeId}` : "@bian-womp/spark:default";
+        return { nodeTypes: types, resolveNodeType: resolver };
+        // registry is stable; ui renderers expected to be set up before mount
+    }, [wb, registry]);
+    const { nodes, edges } = React.useMemo(() => {
+        const def = wb.export();
+        const sel = wb.getSelection();
+        return toReactFlow(def, wb.getPositions(), registry, new Set(sel.nodes), new Set(sel.edges), {
+            showValues,
+            inputs: ioValues.inputs,
+            outputs: ioValues.outputs,
+            resolveNodeType,
+            toDisplay,
+            nodeStatus,
+            edgeStatus,
+            nodeValidation,
+            edgeValidation,
+        });
+    }, [
+        showValues,
+        ioValues,
+        valuesTick,
+        toDisplay,
+        nodeStatus,
+        edgeStatus,
+        nodeValidation,
+        edgeValidation,
+    ]);
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const [menuPos, setMenuPos] = React.useState(null);
+    const onContextMenu = (e) => {
+        e.preventDefault();
+        setMenuPos({ x: e.clientX, y: e.clientY });
+        setMenuOpen(true);
+    };
+    const addNodeAt = (typeId, pos) => {
+        wb.addNode({ typeId, position: pos });
+    };
+    return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, selectionOnDrag: true, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onSelectionChange: onSelectionChange, deleteKeyCode: ["Backspace", "Delete"], fitView: true, children: [jsxRuntime.jsx(ReactFlow.Background, {}), jsxRuntime.jsx(ReactFlow.MiniMap, {}), jsxRuntime.jsx(ReactFlow.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: () => setMenuOpen(false) })] }) }));
+}
+
+function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWorkbenchChange, }) {
+    const { events, clearEvents } = useWorkbenchContext();
+    const scrollRef = React.useRef(null);
+    const rows = React.useMemo(() => {
+        const filtered = hideWorkbench
+            ? events.filter((e) => e.source !== "workbench")
+            : events;
+        return filtered.slice().reverse();
+    }, [events, hideWorkbench]);
+    React.useEffect(() => {
+        if (!autoScroll)
+            return;
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        el.scrollTop = el.scrollHeight;
+    }, [rows, autoScroll]);
+    const renderPayload = (v) => {
+        try {
+            return JSON.stringify(v, null, 0);
+        }
+        catch {
+            return String(v);
+        }
+    };
+    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: clearEvents, className: "text-xs px-2 py-0.5 border border-gray-300 rounded", children: "Clear" })] })] }), jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto text-[11px] leading-4 divide-y divide-gray-200", children: rows.map((ev, idx) => (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-8 shrink-0 text-right text-gray-500 select-none", children: idx + 1 }), 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-10", children: renderPayload(ev.payload) })] }, `${ev.at}:${idx}`))) })] }));
+}
+
+function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toDisplay, setInput, }) {
+    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, outputsMap, nodeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, } = useWorkbenchContext();
+    const nodeValidationIssues = validationByNode.issues;
+    const edgeValidationIssues = validationByEdge.issues;
+    const nodeValidationHandles = validationByNode;
+    const globalValidationIssues = validationGlobal;
+    const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
+    const selectedEdge = def.edges.find((e) => e.id === selectedEdgeId);
+    const selectedDesc = selectedNode
+        ? registry.nodes.get(selectedNode.typeId)
+        : undefined;
+    const inputHandles = Object.keys(selectedDesc?.inputs ?? {});
+    const outputHandles = Object.keys(selectedDesc?.outputs ?? {});
+    const nodeInputs = selectedNodeId ? inputsMap[selectedNodeId] ?? {} : {};
+    const nodeOutputs = selectedNodeId ? outputsMap[selectedNodeId] ?? {} : {};
+    const selectedNodeStatus = selectedNodeId
+        ? nodeStatus?.[selectedNodeId]
+        : undefined;
+    const selectedNodeValidation = selectedNodeId
+        ? nodeValidationIssues?.[selectedNodeId] ?? []
+        : [];
+    const selectedEdgeValidation = selectedEdge
+        ? edgeValidationIssues?.[selectedEdge.id] ?? []
+        : [];
+    const selectedNodeHandleValidation = selectedNodeId
+        ? {
+            inputs: nodeValidationHandles?.inputs?.[selectedNodeId] ?? [],
+            outputs: nodeValidationHandles?.outputs?.[selectedNodeId] ?? [],
+        }
+        : { inputs: [], outputs: [] };
+    // Local drafts and originals for commit-on-blur/enter behavior
+    const [drafts, setDrafts] = React.useState({});
+    const [originals, setOriginals] = React.useState({});
+    // Initialize drafts from current inputs whenever selection or valuesTick change,
+    // but do not clobber fields currently being edited (dirty drafts)
+    React.useEffect(() => {
+        const shallowEqual = (a, b) => {
+            const ak = Object.keys(a);
+            const bk = Object.keys(b);
+            if (ak.length !== bk.length)
+                return false;
+            for (const k of ak)
+                if (a[k] !== b[k])
+                    return false;
+            return true;
+        };
+        if (!selectedNodeId) {
+            if (Object.keys(drafts).length || Object.keys(originals).length) {
+                setDrafts({});
+                setOriginals({});
+            }
+            return;
+        }
+        const desc = selectedDesc;
+        const handles = Object.keys(desc?.inputs ?? {});
+        const nextDrafts = { ...drafts };
+        const nextOriginals = { ...originals };
+        for (const h of handles) {
+            const typeId = desc?.inputs?.[h];
+            const current = nodeInputs[h];
+            const display = toDisplay(typeId, current);
+            const wasOriginal = originals[h];
+            const isDirty = drafts[h] !== undefined &&
+                wasOriginal !== undefined &&
+                drafts[h] !== wasOriginal;
+            if (!isDirty) {
+                nextDrafts[h] = display;
+                nextOriginals[h] = display;
+            }
+        }
+        if (!shallowEqual(drafts, nextDrafts))
+            setDrafts(nextDrafts);
+        if (!shallowEqual(originals, nextOriginals))
+            setOriginals(nextOriginals);
+    }, [selectedNodeId, selectedDesc, valuesTick]);
+    const widthClass = debug ? "w-[480px]" : "w-[320px]";
+    return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedEdge.typeId] })] }), selectedEdgeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedEdgeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
+                                        selectedNodeStatus.lastError) }))] })), jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
+                                    const typeId = (selectedDesc?.inputs ?? {})[h];
+                                    const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId && e.target.handle === h);
+                                    const commonProps = {
+                                        style: { flex: 1 },
+                                        disabled: isLinked,
+                                    };
+                                    const current = nodeInputs[h];
+                                    const value = drafts[h] ?? toDisplay(typeId, current);
+                                    const onChangeText = (text) => setDrafts((d) => ({ ...d, [h]: text }));
+                                    const commit = () => {
+                                        const draft = drafts[h];
+                                        if (draft === undefined)
+                                            return;
+                                        setInput(h, draft);
+                                        setOriginals((o) => ({ ...o, [h]: draft }));
+                                    };
+                                    const revert = () => {
+                                        const orig = originals[h] ?? toDisplay(typeId, current);
+                                        setDrafts((d) => ({ ...d, [h]: orig }));
+                                    };
+                                    const isEnum = typeId?.startsWith("enum:");
+                                    const inIssues = selectedNodeHandleValidation.inputs.filter((m) => m.handle === h);
+                                    const hasValidation = inIssues.length > 0;
+                                    const hasErr = inIssues.some((m) => m.level === "error");
+                                    const title = inIssues
+                                        .map((v) => `${v.code}: ${v.message}`)
+                                        .join("; ");
+                                    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-28", children: [h, jsxRuntime.jsx("span", { className: "text-gray-500 ml-1 text-[11px]", children: selectedDesc?.inputs?.[h] })] }), hasValidation && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: drafts[h] ?? toDisplay(typeId, current), onChange: (e) => {
+                                                    const label = String(e.target.value);
+                                                    const byLabel = registry.getEnumValue(typeId, label);
+                                                    let raw = (byLabel !== undefined ? byLabel : Number(label));
+                                                    if (!Number.isFinite(raw))
+                                                        raw = undefined;
+                                                    setInput(h, raw);
+                                                    const display = toDisplay(typeId, raw);
+                                                    setDrafts((d) => ({ ...d, [h]: display }));
+                                                    setOriginals((o) => ({ ...o, [h]: display }));
+                                                }, ...commonProps, children: [jsxRuntime.jsx("option", { value: "", children: "(select)" }), registry.getEnumOptions?.(typeId).map((opt) => (jsxRuntime.jsx("option", { value: opt.label, children: opt.label }, opt.value)))] })) : (jsxRuntime.jsx("input", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", placeholder: isLinked ? "wired" : undefined, value: value, onChange: (e) => onChangeText(e.target.value), onBlur: commit, onKeyDown: (e) => {
+                                                    if (e.key === "Enter")
+                                                        commit();
+                                                    if (e.key === "Escape")
+                                                        revert();
+                                                }, ...commonProps }))] }, h));
+                                }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsx("label", { className: "w-20", children: h }), jsxRuntime.jsx("div", { className: "flex-1", children: toDisplay(selectedDesc?.outputs?.[h], nodeOutputs[h]) }), (() => {
+                                            const outIssues = selectedNodeHandleValidation.outputs.filter((m) => m.handle === h);
+                                            if (outIssues.length === 0)
+                                                return null;
+                                            const outErr = outIssues.some((m) => m.level === "error");
+                                            const outTitle = outIssues
+                                                .map((v) => `${v.code}: ${v.message}`)
+                                                .join("; ");
+                                            return (jsxRuntime.jsx(IssueBadge, { level: outErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: outTitle }));
+                                        })()] }, h))))] }), selectedNodeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedNodeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) }), debug && (jsxRuntime.jsx("div", { className: "mt-3 flex-none min-h-0 h-[50%]", children: jsxRuntime.jsx(DebugEvents, { autoScroll: !!autoScroll, hideWorkbench: !!hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange }) }))] }));
+}
+
+class GraphRunner {
+    constructor(registry, backend) {
+        this.registry = registry;
+        this.listeners = new Map();
+        this.stagedInputs = {};
+        this.backend = { kind: "local" };
+        if (backend)
+            this.backend = backend;
+    }
+    build(def) {
+        if (this.backend.kind === "local") {
+            const builder = new sparkGraph.GraphBuilder(this.registry);
+            this.runtime = builder.build(def);
+            return;
+        }
+        // Remote: no-op here; build is performed on remote server during launch
+    }
+    update(def) {
+        if (this.backend.kind === "local") {
+            if (!this.runtime)
+                return;
+            this.runtime.update(def, this.registry);
+            this.emit("invalidate", { reason: "graph-updated" });
+            return;
+        }
+        // Remote: forward update; ignore errors (fire-and-forget)
+        void this.ensureRemote().then(async (rc) => {
+            try {
+                await rc.runner.update(def);
+                this.emit("invalidate", { reason: "graph-updated" });
+            }
+            catch { }
+        });
+    }
+    launch(def, opts) {
+        if (this.engine) {
+            throw new Error("Engine already running. Stop the current engine first.");
+        }
+        if (this.backend.kind === "local") {
+            this.build(def);
+            if (!this.runtime)
+                throw new Error("Runtime not built");
+            const rt = this.runtime;
+            switch (opts.engine) {
+                case "push":
+                    this.engine = new sparkGraph.PushEngine(rt);
+                    break;
+                case "batched":
+                    this.engine = new sparkGraph.BatchedEngine(rt, {
+                        flushIntervalMs: opts.batched?.flushIntervalMs ?? 0,
+                    });
+                    break;
+                case "pull":
+                    this.engine = new sparkGraph.PullEngine(rt);
+                    break;
+                case "hybrid":
+                    this.engine = new sparkGraph.HybridEngine(rt, {
+                        windowMs: opts.hybrid?.windowMs ?? 250,
+                        batchThreshold: opts.hybrid?.batchThreshold ?? 3,
+                    });
+                    break;
+                case "step":
+                    this.engine = new sparkGraph.StepEngine(rt);
+                    break;
+                default:
+                    throw new Error("Unknown engine kind");
+            }
+            this.engine.on("value", (e) => this.emit("value", e));
+            this.engine.on("error", (e) => this.emit("error", e));
+            this.engine.on("invalidate", (e) => this.emit("invalidate", e));
+            this.engine.on("stats", (e) => this.emit("stats", e));
+            this.engine.launch();
+            this.runningKind = opts.engine;
+            this.emit("status", { running: true, engine: this.runningKind });
+            for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
+                for (const [handle, value] of Object.entries(map)) {
+                    this.engine.setInput(nodeId, handle, value);
+                }
+            }
+            return;
+        }
+        // Remote: build remotely then launch
+        void this.ensureRemote().then(async (rc) => {
+            await rc.runner.build(def);
+            const eng = rc.runner.getEngine();
+            if (!rc.listenersBound) {
+                eng.on("value", (e) => {
+                    rc.valueCache.set(`${e.nodeId}.${e.handle}`, {
+                        io: e.io,
+                        value: e.value,
+                    });
+                    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));
+                rc.listenersBound = true;
+            }
+            this.engine = eng;
+            this.engine.launch();
+            this.runningKind = "push";
+            this.emit("status", { running: true, engine: this.runningKind });
+            for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
+                for (const [handle, value] of Object.entries(map)) {
+                    this.engine.setInput(nodeId, handle, value);
+                }
+            }
+        });
+    }
+    setInput(nodeId, handle, value) {
+        if (!this.stagedInputs[nodeId])
+            this.stagedInputs[nodeId] = {};
+        this.stagedInputs[nodeId][handle] = value;
+        if (this.engine)
+            this.engine.setInput(nodeId, handle, value);
+    }
+    async step() {
+        if (this.backend.kind !== "local")
+            return; // unsupported remotely
+        const eng = this.engine;
+        if (eng instanceof sparkGraph.StepEngine)
+            await eng.step();
+    }
+    async computeNode(nodeId) {
+        if (this.backend.kind !== "local")
+            return; // unsupported remotely
+        const eng = this.engine;
+        if (eng instanceof sparkGraph.PullEngine)
+            await eng.computeNode(nodeId);
+    }
+    flush() {
+        if (this.backend.kind !== "local")
+            return; // unsupported remotely
+        const eng = this.engine;
+        if (eng instanceof sparkGraph.BatchedEngine)
+            eng.flush();
+    }
+    getOutputs(def) {
+        const out = {};
+        if (this.backend.kind === "local") {
+            if (!this.runtime)
+                return out;
+            for (const n of def.nodes) {
+                const desc = this.registry.nodes.get(n.typeId);
+                const handles = Object.keys(desc?.outputs ?? {});
+                for (const h of handles) {
+                    const v = this.runtime.getOutput(n.nodeId, h);
+                    if (v !== undefined) {
+                        if (!out[n.nodeId])
+                            out[n.nodeId] = {};
+                        out[n.nodeId][h] = v;
+                    }
+                }
+            }
+            return out;
+        }
+        const cache = this.remote?.valueCache;
+        if (!cache)
+            return out;
+        for (const n of def.nodes) {
+            const desc = this.registry.nodes.get(n.typeId);
+            const handles = Object.keys(desc?.outputs ?? {});
+            for (const h of handles) {
+                const key = `${n.nodeId}.${h}`;
+                const rec = cache.get(key);
+                if (rec && rec.io === "output") {
+                    if (!out[n.nodeId])
+                        out[n.nodeId] = {};
+                    out[n.nodeId][h] = rec.value;
+                }
+            }
+        }
+        return out;
+    }
+    getInputs(def) {
+        const out = {};
+        if (this.backend.kind === "local") {
+            for (const n of def.nodes) {
+                const staged = this.stagedInputs[n.nodeId] ?? {};
+                const runtimeInputs = this.runtime
+                    ? this.runtime.__unsafe_getNodeData?.(n.nodeId)?.inputs ?? {}
+                    : {};
+                if (this.isRunning()) {
+                    out[n.nodeId] = runtimeInputs;
+                }
+                else {
+                    const merged = { ...runtimeInputs, ...staged };
+                    if (Object.keys(merged).length > 0)
+                        out[n.nodeId] = merged;
+                }
+            }
+            return out;
+        }
+        const cache = this.remote?.valueCache;
+        for (const n of def.nodes) {
+            const staged = this.stagedInputs[n.nodeId] ?? {};
+            const desc = this.registry.nodes.get(n.typeId);
+            const handles = Object.keys(desc?.inputs ?? {});
+            const cur = {};
+            for (const h of handles) {
+                const rec = cache?.get(`${n.nodeId}.${h}`);
+                if (rec && rec.io === "input")
+                    cur[h] = rec.value;
+            }
+            const merged = this.isRunning() ? cur : { ...cur, ...staged };
+            if (Object.keys(merged).length > 0)
+                out[n.nodeId] = merged;
+        }
+        return out;
+    }
+    async whenIdle() {
+        await this.engine?.whenIdle();
+    }
+    on(event, handler) {
+        if (!this.listeners.has(event))
+            this.listeners.set(event, new Set());
+        const set = this.listeners.get(event);
+        set.add(handler);
+        return () => set.delete(handler);
+    }
+    emit(event, payload) {
+        const set = this.listeners.get(event);
+        if (set)
+            for (const h of Array.from(set))
+                h(payload);
+    }
+    dispose() {
+        this.engine?.dispose();
+        this.engine = undefined;
+        this.runtime?.dispose();
+        this.runtime = undefined;
+        this.remote = undefined;
+        if (this.runningKind) {
+            this.runningKind = undefined;
+            this.emit("status", { running: false, engine: undefined });
+        }
+    }
+    isRunning() {
+        return !!this.engine;
+    }
+    getRunningEngine() {
+        return this.runningKind;
+    }
+    // Ensure remote transport/runner
+    async ensureRemote() {
+        if (this.remote)
+            return this.remote;
+        let transport;
+        if (this.backend.kind === "remote-http") {
+            if (!sparkRemote.HttpPollingTransport)
+                throw new Error("HttpPollingTransport not available");
+            transport = new sparkRemote.HttpPollingTransport(this.backend.baseUrl);
+            await transport.connect();
+        }
+        else if (this.backend.kind === "remote-ws") {
+            if (!sparkRemote.WebSocketTransport)
+                throw new Error("WebSocketTransport not available");
+            transport = new sparkRemote.WebSocketTransport(this.backend.url);
+            await transport.connect();
+        }
+        else {
+            throw new Error("Remote backend not configured");
+        }
+        const runner = new sparkRemote.RemoteRunner(transport);
+        this.remote = {
+            runner,
+            transport,
+            valueCache: new Map(),
+            listenersBound: false,
+        };
+        return this.remote;
+    }
+}
+
+function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, }) {
+    const { wb, runner, registry, def, selectedNodeId, runAutoLayout } = useWorkbenchContext();
+    const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
+    const selectedDesc = selectedNode
+        ? registry.nodes.get(selectedNode.typeId)
+        : undefined;
+    const [exampleState, setExampleState] = React.useState(example ?? "simple");
+    const lastAutoLaunched = React.useRef(undefined);
+    const autoLayoutRan = React.useRef(false);
+    const applyExample = React.useCallback(async (key) => {
+        if (runner.isRunning()) {
+            alert(`Stop engine before switching example.`);
+            return;
+        }
+        switch (key) {
+            case "simple": {
+                const r = sparkGraph.createSimpleGraphRegistry();
+                setRegistry(r);
+                wb.setRegistry(r);
+                await wb.load(sparkGraph.createSimpleGraphDef());
+                break;
+            }
+            case "async": {
+                const r = sparkGraph.createAsyncGraphRegistry();
+                setRegistry(r);
+                wb.setRegistry(r);
+                await wb.load(sparkGraph.createAsyncGraphDef());
+                break;
+            }
+            case "progress": {
+                const r = sparkGraph.createProgressGraphRegistry();
+                setRegistry(r);
+                wb.setRegistry(r);
+                await wb.load(sparkGraph.createProgressGraphDef());
+                break;
+            }
+            case "validation": {
+                const r = sparkGraph.createValidationGraphRegistry();
+                setRegistry(r);
+                wb.setRegistry(r);
+                await wb.load(sparkGraph.createValidationGraphDef());
+                break;
+            }
+            default: {
+                const r = sparkGraph.createSimpleGraphRegistry();
+                setRegistry(r);
+                wb.setRegistry(r);
+                await wb.load(sparkGraph.createSimpleGraphDef());
+            }
+        }
+        runAutoLayout();
+        setExampleState(key);
+        onExampleChange?.(key);
+    }, [runner, wb, onExampleChange, runAutoLayout]);
+    // Ensure initial example is loaded (and sync when example prop changes)
+    React.useEffect(() => {
+        applyExample(example ?? "simple");
+    }, [example, wb]);
+    React.useEffect(() => {
+        if (!engine)
+            return;
+        if (runner.isRunning())
+            return;
+        const d = wb.export();
+        if (!d.nodes || d.nodes.length === 0)
+            return;
+        if (lastAutoLaunched.current === engine)
+            return;
+        try {
+            runner.launch(d, { engine: engine });
+            lastAutoLaunched.current = engine;
+        }
+        catch {
+            // ignore
+        }
+    }, [engine, runner, wb]);
+    React.useEffect(() => {
+        if (autoLayoutRan.current)
+            return;
+        const cur = wb.export();
+        const allMissing = cur.nodes.every((n) => !wb.getPositions()[n.nodeId]);
+        if (allMissing) {
+            autoLayoutRan.current = true;
+            runAutoLayout();
+        }
+    }, [wb, runAutoLayout]);
+    const setInput = React.useCallback((handle, raw) => {
+        if (!selectedNodeId)
+            return;
+        // If selected input is wired (has inbound edge), ignore user input to respect runtime value
+        const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId && e.target.handle === handle);
+        if (isLinked)
+            return;
+        const typeId = selectedDesc?.inputs?.[handle];
+        let value = raw;
+        const parseArray = (s, map) => {
+            const str = String(s).trim();
+            try {
+                const parsed = JSON.parse(str);
+                if (Array.isArray(parsed))
+                    return parsed.map((x) => map(String(x)));
+            }
+            catch { }
+            if (!str)
+                return [];
+            return str
+                .split(",")
+                .map((t) => t.trim())
+                .filter((t) => t.length > 0)
+                .map(map);
+        };
+        switch (typeId) {
+            case "float": {
+                const n = Number(raw);
+                value = Number.isFinite(n) ? n : 0;
+                break;
+            }
+            case "bool": {
+                value = Boolean(raw);
+                break;
+            }
+            case "string": {
+                value = String(raw);
+                break;
+            }
+            case "float[]": {
+                value = parseArray(String(raw), (x) => Number(x));
+                break;
+            }
+            case "bool[]": {
+                value = parseArray(String(raw), (x) => /^(true|1)$/i.test(x));
+                break;
+            }
+            case "vec3": {
+                const arr = parseArray(String(raw), (x) => Number(x));
+                value = [arr[0] ?? 0, arr[1] ?? 0, arr[2] ?? 0];
+                break;
+            }
+            case "vec3[]": {
+                try {
+                    const parsed = JSON.parse(String(raw));
+                    if (Array.isArray(parsed)) {
+                        value = parsed.map((v) => [
+                            Number(v?.[0] ?? 0),
+                            Number(v?.[1] ?? 0),
+                            Number(v?.[2] ?? 0),
+                        ]);
+                        break;
+                    }
+                }
+                catch { }
+                // fallback CSV triples: "x1,y1,z1; x2,y2,z2"
+                value = String(raw)
+                    .split(";")
+                    .map((seg) => seg.trim())
+                    .filter(Boolean)
+                    .map((seg) => seg.split(",").map((n) => Number(n.trim())))
+                    .map((a) => [a[0] ?? 0, a[1] ?? 0, a[2] ?? 0]);
+                break;
+            }
+            default: {
+                // fallback to string
+                value = raw;
+            }
+        }
+        runner.setInput(selectedNodeId, handle, value);
+    }, [selectedNodeId, def.edges, selectedDesc, runner]);
+    const toDisplay = React.useCallback((typeId, value) => {
+        if (value === undefined || value === null)
+            return "";
+        if (typeId && typeId.startsWith("enum:")) {
+            const n = Number(value);
+            const label = registry.getEnumLabel(typeId, n);
+            return label ?? String(n);
+        }
+        const round4 = (n) => Math.round(Number(n) * 10000) / 10000;
+        if (typeId === "vec3" && Array.isArray(value)) {
+            const a = value;
+            return [round4(a[0] ?? 0), round4(a[1] ?? 0), round4(a[2] ?? 0)].join(",");
+        }
+        const stringifyRounded = (v) => {
+            try {
+                return JSON.stringify(v, (_k, val) => typeof val === "number" ? round4(val) : val);
+            }
+            catch {
+                return String(v);
+            }
+        };
+        if (typeId?.endsWith("[]") ||
+            Array.isArray(value) ||
+            (typeof value === "object" && value !== null)) {
+            return stringifyRounded(value);
+        }
+        if (typeof value === "number") {
+            const rounded = Math.round(Number(value) * 10000) / 10000;
+            return String(rounded);
+        }
+        return String(value);
+    }, [registry]);
+    return (jsxRuntime.jsxs("div", { className: "w-full h-screen flex flex-col", children: [jsxRuntime.jsxs("div", { className: "p-2 border-b border-gray-300 flex gap-2 items-center", children: [runner.isRunning() ? (jsxRuntime.jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", runner.getRunningEngine()] })) : (jsxRuntime.jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Stopped" })), jsxRuntime.jsx("label", { className: "ml-2 text-sm", children: "Example:" }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: exampleState, onChange: (e) => applyExample(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
+                            ? "Stop engine before switching example"
+                            : undefined, children: [jsxRuntime.jsx("option", { value: "simple", children: "Simple" }), jsxRuntime.jsx("option", { value: "async", children: "Async Chain" }), jsxRuntime.jsx("option", { value: "progress", children: "Progress + Errors" }), jsxRuntime.jsx("option", { value: "validation", children: "Validation" })] }), jsxRuntime.jsx("label", { className: "ml-2 text-sm", children: "Backend:" }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: backendKind, onChange: (e) => onBackendKindChange(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
+                            ? "Stop engine before switching backend"
+                            : undefined, children: [jsxRuntime.jsx("option", { value: "local", children: "Local" }), jsxRuntime.jsx("option", { value: "remote-http", children: "Remote (HTTP)" }), jsxRuntime.jsx("option", { value: "remote-ws", children: "Remote (WebSocket)" })] }), backendKind === "remote-http" && (jsxRuntime.jsx("input", { className: "ml-2 border border-gray-300 rounded px-2 py-1 w-72", placeholder: "http://127.0.0.1:18080", value: httpBaseUrl, onChange: (e) => onHttpBaseUrlChange(e.target.value) })), backendKind === "remote-ws" && (jsxRuntime.jsx("input", { className: "ml-2 border border-gray-300 rounded px-2 py-1 w-72", placeholder: "ws://127.0.0.1:18081", value: wsUrl, onChange: (e) => onWsUrlChange(e.target.value) })), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: runner.getRunningEngine() ?? engine ?? "", onChange: (e) => {
+                            const kind = e.target.value || undefined;
+                            onEngineChange?.(kind);
+                        }, children: [jsxRuntime.jsx("option", { value: "", children: "Select Engine\u2026" }), jsxRuntime.jsx("option", { value: "push", children: "Push" }), jsxRuntime.jsx("option", { value: "batched", children: "Batched" }), jsxRuntime.jsx("option", { value: "pull", children: "Pull" }), jsxRuntime.jsx("option", { value: "hybrid", children: "Hybrid" }), jsxRuntime.jsx("option", { value: "step", children: "Step" })] }), runner.getRunningEngine() === "step" && (jsxRuntime.jsx("button", { className: "ml-2", onClick: () => runner.step(), disabled: !runner.isRunning(), children: "Step" })), runner.getRunningEngine() === "batched" && (jsxRuntime.jsx("button", { className: "ml-2", onClick: () => runner.flush(), disabled: !runner.isRunning(), children: "Flush" })), runner.isRunning() ? (jsxRuntime.jsx("button", { onClick: () => runner.dispose(), disabled: !runner.isRunning(), children: "Stop" })) : (jsxRuntime.jsx("button", { onClick: () => {
+                            const kind = engine;
+                            if (!kind)
+                                return alert("Select an engine first.");
+                            try {
+                                runner.launch(wb.export(), { engine: kind });
+                            }
+                            catch (err) {
+                                alert(String(err?.message ?? err));
+                            }
+                        }, disabled: !engine, children: "Start" })), jsxRuntime.jsx("button", { onClick: runAutoLayout, children: "Auto Layout" }), 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, { showValues: showValues, toDisplay: toDisplay }, exampleState) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toDisplay: toDisplay })] })] }));
+}
+function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, }) {
+    const [registry, setRegistry] = React.useState(sparkGraph.createSimpleGraphRegistry());
+    const [wb] = React.useState(() => new InMemoryWorkbench({ ui: new DefaultUIExtensionRegistry() }));
+    const runner = React.useMemo(() => {
+        const backend = backendKind === "remote-http"
+            ? { kind: "remote-http", baseUrl: httpBaseUrl }
+            : backendKind === "remote-ws"
+                ? { kind: "remote-ws", url: wsUrl }
+                : { kind: "local" };
+        return new GraphRunner(registry, backend);
+    }, [registry, backendKind, httpBaseUrl, wsUrl]);
+    return (jsxRuntime.jsx(WorkbenchProvider, { wb: wb, runner: runner, registry: registry, setRegistry: setRegistry, children: jsxRuntime.jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: (v) => {
+                if (runner.isRunning())
+                    runner.dispose();
+                onBackendKindChange(v);
+            }, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange }) }));
+}
+
+function App() {
+    const [engine, setEngine] = useQueryParamString("engine", "");
+    const [example, setExample] = useQueryParamString("example", "simple");
+    const [debug, setDebug] = useQueryParamBoolean("debug", false);
+    const [showValues, setShowValues] = useQueryParamBoolean("values", false);
+    const [hideWorkbench, setHideWorkbench] = useQueryParamBoolean("hideWb", false);
+    const [autoScroll, setAutoScroll] = useQueryParamBoolean("autoScroll", true);
+    // Backend selection via URL params
+    const [backendKind, setBackendKind] = useQueryParamString("backend", "local");
+    const [httpBaseUrl, setHttpBaseUrl] = useQueryParamString("sparkHttp", "http://127.0.0.1:18080");
+    const [wsUrl, setWsUrl] = useQueryParamString("sparkWs", "ws://127.0.0.1:18081");
+    React.useEffect(() => {
+        document.getElementById("loading-screen")?.remove();
+    }, []);
+    return (jsxRuntime.jsx(WorkbenchStudio, { engine: engine, onEngineChange: setEngine, example: example, onExampleChange: setExample, backendKind: (backendKind || "local"), onBackendKindChange: (v) => setBackendKind(v), httpBaseUrl: httpBaseUrl || "http://127.0.0.1:18080", onHttpBaseUrlChange: setHttpBaseUrl, wsUrl: wsUrl || "ws://127.0.0.1:18081", onWsUrlChange: setWsUrl, debug: debug, onDebugChange: setDebug, showValues: showValues, onShowValuesChange: setShowValues, hideWorkbench: hideWorkbench, onHideWorkbenchChange: setHideWorkbench, autoScroll: autoScroll, onAutoScrollChange: setAutoScroll }));
+}
+
+exports.AbstractWorkbench = AbstractWorkbench;
+exports.App = App;
+exports.CLIWorkbench = CLIWorkbench;
+exports.DefaultUIExtensionRegistry = DefaultUIExtensionRegistry;
+exports.InMemoryWorkbench = InMemoryWorkbench;
+exports.ReactFlowWorkbench = ReactFlowWorkbench;
+exports.toReactFlow = toReactFlow$1;
+//# sourceMappingURL=index.cjs.map