@bian-womp/spark-workbench 0.1.10 → 0.1.11

package/lib/esm/index.js

@@ -317,37 +317,6 @@ class CLIWorkbench {
     }
 }
 
-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);
-    }
-}
-
 class GraphRunner {
     constructor(registry, backend) {
         this.registry = registry;
@@ -361,6 +330,8 @@ class GraphRunner {
         if (this.backend.kind === "local") {
             const builder = new GraphBuilder(this.registry);
             this.runtime = builder.build(def);
+            // Signal UI that freshly built graph should be considered invalidated
+            this.emit("invalidate", { reason: "graph-built" });
             return;
         }
         // Remote: no-op here; build is performed on remote server during launch
@@ -369,7 +340,20 @@ class GraphRunner {
         if (this.backend.kind === "local") {
             if (!this.runtime)
                 return;
+            // Prevent mid-run churn while wiring changes are applied
+            try {
+                this.runtime.pause();
+            }
+            catch {
+                console.error("Failed to pause runtime");
+            }
             this.runtime.update(def, this.registry);
+            try {
+                this.runtime.resume();
+            }
+            catch {
+                console.error("Failed to resume runtime");
+            }
             this.emit("invalidate", { reason: "graph-updated" });
             return;
         }
@@ -432,6 +416,8 @@ class GraphRunner {
         // Remote: build remotely then launch
         void this.ensureRemote().then(async (rc) => {
             await rc.runner.build(def);
+            // Signal UI after remote build as well
+            this.emit("invalidate", { reason: "graph-built" });
             const eng = rc.runner.getEngine();
             if (!rc.listenersBound) {
                 eng.on("value", (e) => {
@@ -461,8 +447,13 @@ class GraphRunner {
         if (!this.stagedInputs[nodeId])
             this.stagedInputs[nodeId] = {};
         this.stagedInputs[nodeId][handle] = value;
-        if (this.engine)
+        if (this.engine) {
             this.engine.setInput(nodeId, handle, value);
+        }
+        else {
+            // Emit a value event so UI updates even when engine isn't running
+            this.emit("value", { nodeId, handle, value, io: "input" });
+        }
     }
     async step() {
         if (this.backend.kind !== "local")
@@ -778,6 +769,98 @@ function useQueryParamString(key, defaultValue) {
     return [val, set];
 }
 
+function toReactFlow(def, positions, registry, 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] ?? [],
+                },
+                toString: opts.toString,
+                toElement: opts.toElement,
+            },
+            position: positions[n.nodeId] ?? { x: 0, y: 0 },
+            type: opts.resolveNodeType?.(n.typeId) ?? "spark-default",
+            selected: opts.selectedNodeIds
+                ? opts.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: opts.selectedEdgeIds
+                ? opts.selectedEdgeIds.has(e.id)
+                : undefined,
+            animated: isRunning,
+            style,
+        };
+    });
+    return { nodes, edges };
+}
+// Shared node container border class composition for consistent visuals
+function getNodeBorderClassNames(args) {
+    const selected = !!args.selected;
+    const status = args.status || {};
+    const issues = args.validation?.issues ?? [];
+    const hasError = !!status.lastError;
+    const hasValidationError = issues.some((i) => i?.level === "error");
+    const hasValidationWarning = !hasValidationError && issues.length > 0;
+    const isRunning = !!status.running;
+    const isInvalid = !!status.invalidated && !isRunning && !hasError;
+    const borderWidth = selected ? "border-2" : "border";
+    const borderStyle = isInvalid ? "border-dashed" : "border-solid";
+    const borderColor = hasError || hasValidationError
+        ? "border-red-500"
+        : hasValidationWarning
+            ? "border-amber-500"
+            : isRunning
+                ? "border-blue-500"
+                : "border-gray-500 dark:border-gray-400";
+    const ring = isRunning ? " ring-2 ring-blue-200 dark:ring-blue-900" : "";
+    return `${borderWidth} ${borderStyle} ${borderColor}${ring}`.trim();
+}
+
 const WorkbenchContext = createContext(null);
 function useWorkbenchContext() {
     const ctx = useContext(WorkbenchContext);
@@ -806,6 +889,19 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
     const def = wb.export();
     const inputsMap = useMemo(() => runner.getInputs(def), [runner, def, valuesTick]);
     const outputsMap = useMemo(() => runner.getOutputs(def), [runner, def, valuesTick]);
+    // Initialize nodes as invalidated by default until first successful run
+    useEffect(() => {
+        setNodeStatus((prev) => {
+            const next = { ...prev };
+            for (const n of def.nodes) {
+                const cur = next[n.nodeId] ?? (next[n.nodeId] = {});
+                if (cur.invalidated === undefined) {
+                    next[n.nodeId] = { ...cur, invalidated: true };
+                }
+            }
+            return next;
+        });
+    }, [def]);
     // Auto layout (simple layered layout)
     const runAutoLayout = useCallback(() => {
         const cur = wb.export();
@@ -873,20 +969,20 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         const off2 = runner.on("error", (e) => {
             const edgeError = e;
             const nodeError = e;
-            if (edgeError?.kind === "edge-convert") {
+            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;
+            else if (nodeError.nodeId) {
+                const nodeId = nodeError.nodeId;
                 setNodeStatus((s) => ({
                     ...s,
                     [nodeId]: {
                         ...(s[nodeId] ?? {}),
-                        lastError: nodeError?.err,
+                        lastError: nodeError.err,
                     },
                 }));
             }
@@ -954,6 +1050,17 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             return add("runner", "stats")(s);
         });
         const off4 = wb.on("graphChanged", add("workbench", "graphChanged"));
+        // Ensure newly added nodes start as invalidated until first evaluation
+        const off4c = wb.on("graphChanged", (e) => {
+            const change = e.change;
+            if (change?.type === "addNode" && typeof change.nodeId === "string") {
+                const id = change.nodeId;
+                setNodeStatus((s) => ({
+                    ...s,
+                    [id]: { ...(s[id] ?? {}), invalidated: true },
+                }));
+            }
+        });
         const off4b = wb.on("graphUiChanged", add("workbench", "graphUiChanged"));
         const off5 = wb.on("validationChanged", add("workbench", "validationChanged"));
         const off5b = wb.on("validationChanged", (r) => setValidation(r));
@@ -970,6 +1077,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             off3b();
             off4();
             off4b();
+            off4c();
             off5();
             off5b();
             off6();
@@ -992,10 +1100,10 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         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);
+            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) {
@@ -1024,10 +1132,10 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         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);
+            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 });
             }
@@ -1040,10 +1148,10 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         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);
+            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;
@@ -1154,6 +1262,16 @@ function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWork
 }
 
 function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toString, toElement, setInput, }) {
+    const safeToString = (typeId, value) => {
+        try {
+            return typeof toString === "function"
+                ? toString(typeId, value)
+                : String(value ?? "");
+        }
+        catch {
+            return String(value ?? "");
+        }
+    };
     const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, outputsMap, nodeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, } = useWorkbenchContext();
     const nodeValidationIssues = validationByNode.issues;
     const edgeValidationIssues = validationByEdge.issues;
@@ -1213,7 +1331,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
         for (const h of handles) {
             const typeId = desc?.inputs?.[h];
             const current = nodeInputs[h];
-            const display = toString(typeId, current);
+            const display = safeToString(typeId, current);
             const wasOriginal = originals[h];
             const isDirty = drafts[h] !== undefined &&
                 wasOriginal !== undefined &&
@@ -1239,7 +1357,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                         disabled: isLinked,
                                     };
                                     const current = nodeInputs[h];
-                                    const value = drafts[h] ?? toString(typeId, current);
+                                    const value = drafts[h] ?? safeToString(typeId, current);
                                     const onChangeText = (text) => setDrafts((d) => ({ ...d, [h]: text }));
                                     const commit = () => {
                                         const draft = drafts[h];
@@ -1249,7 +1367,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                         setOriginals((o) => ({ ...o, [h]: draft }));
                                     };
                                     const revert = () => {
-                                        const orig = originals[h] ?? toString(typeId, current);
+                                        const orig = originals[h] ?? safeToString(typeId, current);
                                         setDrafts((d) => ({ ...d, [h]: orig }));
                                     };
                                     const isEnum = typeId?.includes("enum:");
@@ -1259,19 +1377,17 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                     const title = inIssues
                                         .map((v) => `${v.code}: ${v.message}`)
                                         .join("; ");
-                                    return (jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxs("label", { className: "w-28", children: [h, jsx("span", { className: "text-gray-500 ml-1 text-[11px]", children: selectedDesc?.inputs?.[h] })] }), hasValidation && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (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] ?? toString(typeId, current), onChange: (e) => {
-                                                    const label = String(e.target.value);
-                                                    const byLabel = registry.enums
-                                                        .get(typeId)
-                                                        ?.labelToValue.get(label.toLowerCase());
-                                                    let raw = (byLabel !== undefined ? byLabel : Number(label));
-                                                    if (!Number.isFinite(raw))
-                                                        raw = undefined;
+                                    return (jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxs("label", { className: "w-28", children: [h, jsx("span", { className: "text-gray-500 ml-1 text-[11px]", children: selectedDesc?.inputs?.[h] })] }), hasValidation && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (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: current !== undefined && current !== null
+                                                    ? String(current)
+                                                    : "", onChange: (e) => {
+                                                    const val = e.target.value;
+                                                    const raw = val === "" ? undefined : Number(val);
                                                     setInput(h, raw);
-                                                    const display = toString(typeId, raw);
+                                                    // keep drafts/originals in sync with label for display elsewhere
+                                                    const display = safeToString(typeId, raw);
                                                     setDrafts((d) => ({ ...d, [h]: display }));
                                                     setOriginals((o) => ({ ...o, [h]: display }));
-                                                }, ...commonProps, children: [jsx("option", { value: "", children: "(select)" }), registry.enums.get(typeId)?.options.map((opt) => (jsx("option", { value: opt.label, children: opt.label }, opt.value)))] })) : (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) => {
+                                                }, ...commonProps, children: [jsx("option", { value: "", children: "(select)" }), registry.enums.get(typeId)?.options.map((opt) => (jsx("option", { value: String(opt.value), children: opt.label }, opt.value)))] })) : isLinked ? (toElement(typeId, current)) : (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")
@@ -1289,74 +1405,8 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                         })()] }, h))))] }), selectedNodeValidation.length > 0 && (jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsx("ul", { className: "list-disc ml-4", children: selectedNodeValidation.map((m, i) => (jsxs("li", { className: "flex items-center gap-1", children: [jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) }), debug && (jsx("div", { className: "mt-3 flex-none min-h-0 h-[50%]", children: jsx(DebugEvents, { autoScroll: !!autoScroll, hideWorkbench: !!hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange }) }))] }));
 }
 
-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] ?? [],
-                },
-                toString: opts?.toString,
-                toElement: opts?.toElement,
-            },
-            position: positions[n.nodeId] ?? { x: 0, y: 0 },
-            type: opts?.resolveNodeType?.(n.typeId) ?? "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 };
-}
-
 const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConnectable, }) {
-    const { typeId, showValues, inputValues, outputValues, toString, toElement, } = data;
+    const { typeId, showValues, inputValues, outputValues, toString } = data;
     const inputEntries = data.inputHandles ?? [];
     const outputEntries = data.outputHandles ?? [];
     const status = data.status ?? {};
@@ -1372,19 +1422,26 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
     const minWidth = data.showValues ? 320 : 160;
     const topFor = (i) => HEADER_SIZE + i * ROW_SIZE + ROW_SIZE / 2;
     const hasError = !!status.lastError;
+    const hasValidationError = validation.issues.some((i) => i.level === "error");
+    const hasValidationWarning = !hasValidationError && validation.issues.length > 0;
     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"
+    // Border color encodes severity; thickness encodes selection; style (dashed) encodes invalidated
+    const borderWidth = selected ? "border-2" : "border";
+    const borderStyle = isInvalid ? "border-dashed" : "border-solid";
+    const borderColor = hasError || hasValidationError
+        ? "border-red-500"
+        : hasValidationWarning
+            ? "border-amber-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";
+                ? "border-blue-500"
+                : "border-gray-500 dark:border-gray-400";
+    const ringClasses = isRunning
+        ? "ring-2 ring-blue-200 dark:ring-blue-900"
+        : undefined;
+    const borderClasses = cx(borderWidth, borderStyle, borderColor, ringClasses);
     const pct = Math.round(Math.max(0, Math.min(1, Number(status.progress) || 0)) * 100);
-    return (jsxs("div", { className: cx("rounded-lg bg-white/70 !dark:bg-stone-900 border-solid", borderClasses), style: { position: "relative", minHeight: minHeight, minWidth }, children: [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: [jsx("strong", { className: "flex-1 h-full leading-6 text-xs", children: typeId }), jsxs("div", { className: "flex items-center gap-1", children: [hasError && (jsx("span", { title: String(status.lastError?.message ?? status.lastError), children: jsx(XCircleIcon, { size: 12, weight: "fill", className: "text-red-500" }) })), validation.issues && validation.issues.length > 0 && (jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
+    return (jsxs("div", { className: cx("rounded-lg bg-white/70 !dark:bg-stone-900", borderClasses), style: { position: "relative", minHeight: minHeight, minWidth }, children: [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: [jsx("strong", { className: "flex-1 h-full leading-6 text-xs", children: typeId }), jsxs("div", { className: "flex items-center gap-1", children: [hasError && (jsx("span", { title: String(status.lastError?.message ?? status.lastError), children: jsx(XCircleIcon, { size: 12, weight: "fill", className: "text-red-500" }) })), validation.issues && validation.issues.length > 0 && (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}`)
@@ -1395,8 +1452,7 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                 const title = vIssues
                     .map((v) => `${v.code}: ${v.message}`)
                     .join("; ");
-                return (jsxs(React.Fragment, { children: [jsx(Handle, { id: entry.id, type: "target", position: 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) } }), 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 && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues &&
-                                    (toElement ? (toElement(entry.typeId, inputValues?.[entry.id])) : toString ? (jsx("span", { className: "ml-1 opacity-60", children: toString(entry.typeId, inputValues?.[entry.id]) })) : (jsx("span", { className: "ml-1 opacity-60", children: String(inputValues?.[entry.id]) })))] })] }, `in-${entry.id}`));
+                return (jsxs(React.Fragment, { children: [jsx(Handle, { id: entry.id, type: "target", position: 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) } }), 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 && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues && (jsx("span", { className: "ml-1 opacity-60", children: toString(entry.typeId, 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;
@@ -1404,8 +1460,7 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                 const title = vIssues
                     .map((v) => `${v.code}: ${v.message}`)
                     .join("; ");
-                return (jsxs(React.Fragment, { children: [jsx(Handle, { id: entry.id, type: "source", position: 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) } }), 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 && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues &&
-                                    (toElement ? (toElement(entry.typeId, outputValues?.[entry.id])) : toString ? (jsx("span", { className: "ml-1 opacity-60", children: toString(entry.typeId, outputValues?.[entry.id]) })) : (jsx("span", { className: "ml-1 opacity-60", children: String(outputValues?.[entry.id]) })))] })] }, `out-${entry.id}`));
+                return (jsxs(React.Fragment, { children: [jsx(Handle, { id: entry.id, type: "source", position: 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) } }), 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 && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues && (jsx("span", { className: "ml-1 opacity-60", children: toString(entry.typeId, outputValues?.[entry.id]) }))] })] }, `out-${entry.id}`));
             })] }));
 });
 DefaultNode.displayName = "DefaultNode";
@@ -1413,15 +1468,135 @@ DefaultNode.displayName = "DefaultNode";
 function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
     const { registry } = useWorkbenchContext();
     const rf = useReactFlow();
+    const ids = Array.from(registry.nodes.keys());
+    // Group node ids by the segment before the first '.'
+    const grouped = {};
+    for (const id of ids) {
+        const parts = id.split(".");
+        const cat = parts.length > 1 ? parts[0] : "other";
+        const label = parts.length > 1 ? parts.slice(1).join(".") : id;
+        (grouped[cat] = grouped[cat] || []).push({ id, label });
+    }
+    const cats = Object.keys(grouped).sort((a, b) => a.localeCompare(b));
+    cats.forEach((c) => grouped[c].sort((a, b) => a.label.localeCompare(b.label)));
+    const totalCount = ids.length;
+    // Ref for focus/outside click handling
+    const ref = useRef(null);
+    // Close on outside click and on ESC
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (!ref.current)
+                return;
+            if (!ref.current.contains(e.target))
+                onClose();
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("mousedown", onDown, true);
+        window.addEventListener("keydown", onKey);
+        return () => {
+            window.removeEventListener("mousedown", onDown, true);
+            window.removeEventListener("keydown", onKey);
+        };
+    }, [open, onClose]);
+    // Focus for keyboard accessibility
+    useEffect(() => {
+        if (open)
+            ref.current?.focus();
+    }, [open]);
     if (!open || !clientPos)
         return null;
-    const items = Array.from(registry.nodes.keys());
+    // Clamp menu position to viewport
+    const MENU_MIN_WIDTH = 180;
+    const PADDING = 16; // rough padding/shadow
+    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) -
+        (MENU_MIN_WIDTH + PADDING));
+    const y = Math.min(clientPos.y, (typeof window !== "undefined" ? window.innerHeight : 0) - 240);
     const handleClick = (typeId) => {
-        const p = rf.project({ x: clientPos.x, y: clientPos.y });
+        // project() is deprecated; use screenToFlowPosition for screen coordinates
+        const p = rf.screenToFlowPosition({ x: clientPos.x, y: clientPos.y });
         onAdd(typeId, p);
         onClose();
     };
-    return (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: [jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Add Node" }), jsx("div", { className: "max-h-60 overflow-auto", children: items.map((id) => (jsx("button", { onClick: () => handleClick(id), className: "block w-full text-left px-2 py-1 hover:bg-gray-100 cursor-pointer", children: id }, id))) })] }));
+    return (jsxs("div", { ref: ref, tabIndex: -1, className: "fixed z-[1000] bg-white border border-gray-300 rounded-none shadow-lg p-1 min-w-[180px] text-sm text-gray-700", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, children: [jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node ", jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsx("div", { className: "max-h-60 overflow-auto", children: cats.map((cat) => (jsxs("div", { className: "py-1", children: [jsxs("div", { className: "px-2 py-1 text-[11px] uppercase tracking-wide text-gray-400", children: [cat, " ", jsxs("span", { className: "opacity-60 normal-case", children: ["(", grouped[cat].length, ")"] })] }), grouped[cat].map(({ id, label }) => (jsx("button", { onClick: () => handleClick(id), className: "block w-full text-left px-3 py-1 hover:bg-gray-100 cursor-pointer", title: id, children: label }, id)))] }, cat))) })] }));
+}
+
+function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
+    const { wb, runner, engineKind } = useWorkbenchContext();
+    const ref = useRef(null);
+    // outside click + ESC
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (!ref.current)
+                return;
+            if (!ref.current.contains(e.target))
+                onClose();
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("mousedown", onDown, true);
+        window.addEventListener("keydown", onKey);
+        return () => {
+            window.removeEventListener("mousedown", onDown, true);
+            window.removeEventListener("keydown", onKey);
+        };
+    }, [open, onClose]);
+    useEffect(() => {
+        if (open)
+            ref.current?.focus();
+    }, [open]);
+    if (!open || !clientPos || !nodeId)
+        return null;
+    // clamp
+    const MENU_MIN_WIDTH = 180;
+    const PADDING = 16;
+    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) -
+        (MENU_MIN_WIDTH + PADDING));
+    const y = Math.min(clientPos.y, (typeof window !== "undefined" ? window.innerHeight : 0) - 240);
+    // actions
+    const handleDelete = () => {
+        wb.removeNode(nodeId);
+        onClose();
+    };
+    const handleDuplicate = () => {
+        const def = wb.export();
+        const n = def.nodes.find((n) => n.nodeId === nodeId);
+        if (!n)
+            return onClose();
+        const pos = wb.getPositions?.()[nodeId] || { x: 0, y: 0 };
+        wb.addNode({ typeId: n.typeId, params: n.params, position: { x: pos.x + 24, y: pos.y + 24 } });
+        onClose();
+    };
+    const handleCopyId = async () => {
+        try {
+            await navigator.clipboard.writeText(nodeId);
+        }
+        catch { }
+        onClose();
+    };
+    const canRunPull = engineKind()?.toString() === "pull";
+    const handleRunPull = async () => {
+        try {
+            await runner.computeNode(nodeId);
+        }
+        catch { }
+        onClose();
+    };
+    return (jsxs("div", { ref: ref, tabIndex: -1, 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: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, children: [jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDelete, children: "Delete" }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDuplicate, children: "Duplicate" }), canRunPull && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleRunPull, children: "Run (pull)" })), jsx("div", { className: "h-px bg-gray-200 my-1" }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleCopyId, children: "Copy Node ID" })] }));
 }
 
 function WorkbenchCanvas({ showValues, toString, toElement, }) {
@@ -1439,18 +1614,21 @@ function WorkbenchCanvas({ showValues, toString, toElement, }) {
             if (renderer)
                 custom.set(typeId, renderer);
         }
-        const types = { "spark:default": DefaultNode };
+        const types = {
+            "spark-default": DefaultNode,
+            default: DefaultNode,
+        };
         for (const [typeId, comp] of custom.entries()) {
-            types[`spark:${typeId}`] = comp;
+            types[`spark-${typeId}`] = comp;
         }
-        const resolver = (nodeTypeId) => custom.has(nodeTypeId) ? `spark:${nodeTypeId}` : "spark:default";
+        const resolver = (nodeTypeId) => custom.has(nodeTypeId) ? `spark-${nodeTypeId}` : "spark-default";
         return { nodeTypes: types, resolveNodeType: resolver };
         // registry is stable; ui renderers expected to be set up before mount
     }, [wb, registry]);
     const { nodes, edges } = useMemo(() => {
         const def = wb.export();
         const sel = wb.getSelection();
-        return toReactFlow(def, wb.getPositions(), registry, new Set(sel.nodes), new Set(sel.edges), {
+        return toReactFlow(def, wb.getPositions(), registry, {
             showValues,
             inputs: ioValues.inputs,
             outputs: ioValues.outputs,
@@ -1461,6 +1639,8 @@ function WorkbenchCanvas({ showValues, toString, toElement, }) {
             edgeStatus,
             nodeValidation,
             edgeValidation,
+            selectedNodeIds: new Set(sel.nodes),
+            selectedEdgeIds: new Set(sel.edges),
         });
     }, [
         showValues,
@@ -1475,15 +1655,31 @@ function WorkbenchCanvas({ showValues, toString, toElement, }) {
     ]);
     const [menuOpen, setMenuOpen] = useState(false);
     const [menuPos, setMenuPos] = useState(null);
+    const [nodeMenuOpen, setNodeMenuOpen] = useState(false);
+    const [nodeMenuPos, setNodeMenuPos] = useState(null);
+    const [nodeAtMenu, setNodeAtMenu] = useState(null);
     const onContextMenu = (e) => {
         e.preventDefault();
-        setMenuPos({ x: e.clientX, y: e.clientY });
-        setMenuOpen(true);
+        // Determine if right-clicked over a node by hit-testing selection
+        const target = e.target?.closest(".react-flow__node");
+        if (target) {
+            // Resolve node id from data-id attribute React Flow sets
+            const nodeId = target.getAttribute("data-id");
+            setNodeAtMenu(nodeId);
+            setNodeMenuPos({ x: e.clientX, y: e.clientY });
+            setNodeMenuOpen(true);
+            setMenuOpen(false);
+        }
+        else {
+            setMenuPos({ x: e.clientX, y: e.clientY });
+            setMenuOpen(true);
+            setNodeMenuOpen(false);
+        }
     };
     const addNodeAt = (typeId, pos) => {
         wb.addNode({ typeId, position: pos });
     };
-    return (jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: 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: [jsx(Background, {}), jsx(MiniMap, {}), jsx(Controls, {}), jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: () => setMenuOpen(false) })] }) }));
+    return (jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: 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: [jsx(Background, {}), jsx(MiniMap, {}), jsx(Controls, {}), jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: () => setMenuOpen(false) }), jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: () => setNodeMenuOpen(false) })] }) }));
 }
 
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, }) {
@@ -1776,7 +1972,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         return String(value);
     }, [registry]);
     const baseToElement = useCallback((typeId, value) => {
-        return jsx("span", { children: baseToString(typeId, value) });
+        return (jsx("span", { className: "ml-1 opacity-60", children: baseToString(typeId, value) }));
     }, [baseToString]);
     const toString = useMemo(() => {
         if (overrides?.toString)
@@ -1807,7 +2003,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                             catch (err) {
                                 alert(String(err?.message ?? err));
                             }
-                        }, disabled: !engine, children: "Start" })), jsx("button", { onClick: runAutoLayout, children: "Auto Layout" }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx("span", { children: "Debug events" })] }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx("span", { children: "Show values in nodes" })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WorkbenchCanvas, { showValues: showValues, toString: toString, toElement: toElement }, exampleState) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement })] })] }));
+                        }, disabled: !engine, children: "Start" })), jsx("button", { onClick: runAutoLayout, children: "Auto Layout" }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx("span", { children: "Debug events" })] }), jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx("span", { children: "Show values in nodes" })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WorkbenchCanvas, { showValues: showValues, toString: toString, toElement: toElement }) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement })] })] }));
 }
 function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, }) {
     const [registry, setRegistry] = useState(createSimpleGraphRegistry());
@@ -1833,5 +2029,5 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
             }, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange, overrides: overrides }) }));
 }
 
-export { AbstractWorkbench, CLIWorkbench, DefaultUIExtensionRegistry, GraphRunner, InMemoryWorkbench, Inspector, ReactFlowWorkbench, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, toReactFlow$1 as toReactFlow, useQueryParamBoolean, useQueryParamString, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
+export { AbstractWorkbench, CLIWorkbench, DefaultUIExtensionRegistry, GraphRunner, InMemoryWorkbench, Inspector, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, getNodeBorderClassNames, toReactFlow, useQueryParamBoolean, useQueryParamString, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
 //# sourceMappingURL=index.js.map