@bian-womp/spark-workbench 0.1.30 → 0.2.0

package/lib/cjs/index.cjs

@@ -5,7 +5,7 @@ var sparkRemote = require('@bian-womp/spark-remote');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@phosphor-icons/react');
-var ReactFlow = require('reactflow');
+var react$1 = require('@xyflow/react');
 var cx = require('classnames');
 
 class DefaultUIExtensionRegistry {
@@ -1814,10 +1814,8 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                 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: {
+                const title = vIssues.map((v) => `${v.code}: ${v.message}`).join("; ");
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react$1.Handle, { id: entry.id, type: "target", position: react$1.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,
                                 right: "50%",
                                 whiteSpace: "nowrap",
@@ -1828,11 +1826,9 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                 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("; ");
+                const title = vIssues.map((v) => `${v.code}: ${v.message}`).join("; ");
                 const resolved = resolveOutputDisplay(outputValues?.[entry.id], entry.typeId);
-                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: {
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react$1.Handle, { id: entry.id, type: "source", position: react$1.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",
                                 left: "50%",
@@ -1846,7 +1842,7 @@ DefaultNode.displayName = "DefaultNode";
 
 function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
     const { registry } = useWorkbenchContext();
-    const rf = ReactFlow.useReactFlow();
+    const rf = react$1.useReactFlow();
     const ids = Array.from(registry.nodes.keys());
     const [query, setQuery] = React.useState("");
     const q = query.trim().toLowerCase();
@@ -2053,7 +2049,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
             selectedNodeIds: new Set(sel.nodes),
             selectedEdgeIds: new Set(sel.edges),
         });
-        console.info(nodeTypes, out);
+        // console.info(nodeTypes, out);
         return out;
     }, [
         showValues,
@@ -2095,7 +2091,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
     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, onInit: (inst) => (rfInstanceRef.current = inst), 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) }), jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: () => setNodeMenuOpen(false) })] }) }));
+    return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsxs(react$1.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, onInit: (inst) => (rfInstanceRef.current = inst), children: [jsxRuntime.jsx(react$1.Background, {}), jsxRuntime.jsx(react$1.MiniMap, {}), jsxRuntime.jsx(react$1.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: () => setMenuOpen(false) }), jsxRuntime.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, onInit, onChange, }) {
@@ -2172,7 +2168,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             runAutoLayout();
         };
         onInit({ wb, runner, setInitialGraph });
-    }, [onInit, wb, runner, runAutoLayout]);
+    }, [onInit, wb, runner, runAutoLayout, registry, setRegistry]);
     // Expose change callback on graph/value changes
     React.useEffect(() => {
         if (!onChange)
@@ -2327,6 +2323,9 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return;
         if (runner.isRunning())
             return;
+        // Only auto-launch for local backend; require explicit Start for remote
+        if (backendKind !== "local")
+            return;
         const d = wb.export();
         if (!d.nodes || d.nodes.length === 0)
             return;
@@ -2339,14 +2338,14 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         catch {
             // ignore
         }
-    }, [engine, runner, wb]);
+    }, [engine, runner, wb, backendKind]);
     // When switching to remote backend, auto-hydrate registry from backend
     React.useEffect(() => {
         if (backendKind === "remote-http" && httpBaseUrl) {
-            void hydrateFromBackend("remote-http", httpBaseUrl);
+            hydrateFromBackend("remote-http", httpBaseUrl);
         }
         else if (backendKind === "remote-ws" && wsUrl) {
-            void hydrateFromBackend("remote-ws", wsUrl);
+            hydrateFromBackend("remote-ws", wsUrl);
         }
     }, [backendKind, httpBaseUrl, wsUrl, hydrateFromBackend]);
     React.useEffect(() => {
@@ -2535,7 +2534,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                             }
                         }, disabled: !engine, children: "Start" })), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement, contextPanel: overrides?.contextPanel })] })] }));
 }
-function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, onInit, onChange, contextPanel, }) {
+function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, onInit, onChange, }) {
     const [registry, setRegistry] = React.useState(sparkGraph.createSimpleGraphRegistry());
     const [wb] = React.useState(() => new InMemoryWorkbench({ ui: new DefaultUIExtensionRegistry() }));
     const runner = React.useMemo(() => {