@bian-womp/spark-workbench 0.2.93 → 0.2.94

package/lib/esm/index.js

@@ -1,4 +1,4 @@
-import { generateId, GraphBuilder, getTypedOutputValue, isTypedOutput, getInputTypeId, createEngine, StepEngine, PullEngine, BatchedEngine, getTypedOutputTypeId, isInputPrivate, offsetImportedPositions, createSimpleGraphRegistry, createSimpleGraphDef, createAsyncGraphDef, createAsyncGraphRegistry, createProgressGraphDef, createProgressGraphRegistry, createValidationGraphDef, createValidationGraphRegistry } from '@bian-womp/spark-graph';
+import { generateId, createSimpleGraphRegistry, GraphBuilder, getTypedOutputValue, isTypedOutput, getInputTypeId, createEngine, StepEngine, PullEngine, BatchedEngine, getTypedOutputTypeId, isInputPrivate, offsetImportedPositions, createSimpleGraphDef, createAsyncGraphDef, createAsyncGraphRegistry, createProgressGraphDef, createProgressGraphRegistry, createValidationGraphDef, createValidationGraphRegistry } from '@bian-womp/spark-graph';
 import lod from 'lodash';
 import { RuntimeApiClient } from '@bian-womp/spark-remote';
 import { Position, Handle, NodeResizer, getBezierPath, BaseEdge, useReactFlow, ReactFlowProvider, ReactFlow, Background, BackgroundVariant, MiniMap, Controls } from '@xyflow/react';
@@ -133,8 +133,8 @@ class AbstractWorkbench {
 }
 
 class InMemoryWorkbench extends AbstractWorkbench {
-    constructor() {
-        super(...arguments);
+    constructor(args) {
+        super(args);
         this._def = { nodes: [], edges: [] };
         this.listeners = new Map();
         this.positions = {};
@@ -148,12 +148,17 @@ class InMemoryWorkbench extends AbstractWorkbench {
         this.viewport = null;
         this.historyState = undefined;
         this.copiedData = null;
+        this._registry = createSimpleGraphRegistry();
     }
     get def() {
         return this._def;
     }
+    get registry() {
+        return this._registry;
+    }
     setRegistry(registry) {
-        this.registry = registry;
+        this._registry = registry;
+        this.emit("registryChanged", { registry });
     }
     async load(def) {
         this._def = { nodes: [...def.nodes], edges: [...def.edges] };
@@ -3647,7 +3652,7 @@ function computeInvalidatedFromMetadata(metadata) {
     const maxInputTime = Math.max(...Object.values(lastInputAt));
     return maxInputTime > (lastSuccessAt ?? lastRunAt ?? 0);
 }
-function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVersion, children, }) {
+function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
     const [nodeStatus, setNodeStatus] = useState({});
     const [edgeStatus, setEdgeStatus] = useState({});
     const [events, setEvents] = useState([]);
@@ -3722,7 +3727,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         const out = {};
         // Local: runtimeTypeId is not stored; derive from typed wrapper in outputsMap
         for (const n of wb.def.nodes) {
-            const effectiveHandles = computeEffectiveHandles(n, registry);
+            const effectiveHandles = computeEffectiveHandles(n, wb.registry);
             const outputsDecl = effectiveHandles.outputs;
             const handles = Object.keys(outputsDecl);
             const cur = {};
@@ -3736,7 +3741,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                 out[n.nodeId] = cur;
         }
         return out;
-    }, [wb, wb.def, outputsMap, registry]);
+    }, [wb, wb.def, outputsMap, wb.registry, registryVersion]);
     // Initialize nodes and derive invalidated status from persisted metadata
     useEffect(() => {
         const workbenchRuntimeState = wb.getRuntimeState() ?? { nodes: {} };
@@ -3814,7 +3819,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                 const overrideSize = overrides?.getDefaultNodeSize?.(node.typeId) ?? undefined;
                 const size = estimateNodeSize({
                     node,
-                    registry,
+                    registry: wb.registry,
                     showValues: true,
                     overrides: overrideSize,
                 });
@@ -3832,7 +3837,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             curX += maxWidth + H_GAP;
         }
         wb.setPositions(pos, { commit: true, reason: "auto-layout" });
-    }, [wb, wb.def, registry, overrides?.getDefaultNodeSize]);
+    }, [wb, wb.def, wb.registry, registryVersion, overrides?.getDefaultNodeSize]);
     const updateEdgeType = useCallback((edgeId, typeId) => wb.updateEdgeType(edgeId, typeId), [wb]);
     const triggerExternal = useCallback((nodeId, event) => runner.triggerExternal(nodeId, event), [runner]);
     const getNodeDisplayName = useCallback((nodeId) => {
@@ -3842,9 +3847,9 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         const node = wb.def.nodes.find((n) => n.nodeId === nodeId);
         if (!node)
             return nodeId;
-        const desc = registry.nodes.get(node.typeId);
+        const desc = wb.registry.nodes.get(node.typeId);
         return desc?.displayName || node.typeId;
-    }, [wb, registry]);
+    }, [wb, wb.registry, registryVersion]);
     const setNodeName = useCallback((nodeId, name) => {
         wb.setNodeName(nodeId, name, { commit: true, reason: "rename-node" });
     }, [wb]);
@@ -4160,6 +4165,9 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             return add("runner", "stats")(s);
         });
+        const offWbRegistryChanged = wb.on("registryChanged", (evt) => {
+            setRegistryVersion((v) => v + 1);
+        });
         const offWbGraphChanged = wb.on("graphChanged", (event) => {
             // Clear validation errors for removed nodes
             if (event.change?.type === "removeNode") {
@@ -4316,10 +4324,8 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         // Registry updates: swap registry and refresh graph validation/UI
         const offRunnerRegistry = runner.on("registry", async (newReg) => {
             try {
-                setRegistry(newReg);
                 wb.setRegistry(newReg);
                 // Increment registry version to trigger UI updates
-                setRegistryVersion((v) => v + 1);
                 // Trigger a graph update so the UI revalidates with new types/enums/nodes
                 try {
                     await runner.update(wb.def);
@@ -4390,6 +4396,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             offRunnerError();
             offRunnerInvalidate();
             offRunnerStats();
+            offWbRegistryChanged();
             offWbGraphChanged();
             offWbGraphUiChangedForLog();
             offWbGraphUiChanged();
@@ -4403,7 +4410,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             offFlowViewport();
             offWbRuntimeMetadataChanged();
         };
-    }, [runner, wb, setRegistry]);
+    }, [runner, wb]);
     const isRunning = useCallback(() => runner.isRunning(), [runner]);
     const engineKind = useCallback(() => runner.getRunningEngine(), [runner]);
     const start = useCallback((engine) => {
@@ -4481,8 +4488,6 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
     const value = useMemo(() => ({
         wb,
         runner,
-        registry,
-        setRegistry,
         selectedNodeId,
         selectedEdgeId,
         setSelection,
@@ -4524,8 +4529,6 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
     }), [
         wb,
         runner,
-        registry,
-        setRegistry,
         selectedNodeId,
         selectedEdgeId,
         setSelection,
@@ -4587,7 +4590,7 @@ function DefaultNodeHeader({ id, typeId, validation, right, showId, onInvalidate
         const node = ctx.wb.def.nodes.find((n) => n.nodeId === id);
         if (!node)
             return id;
-        const desc = ctx.registry.nodes.get(node.typeId);
+        const desc = ctx.wb.registry.nodes.get(node.typeId);
         return desc?.displayName || node.typeId;
     }, [ctx, id, typeId]);
     const handleInvalidate = React.useCallback(() => {
@@ -5046,7 +5049,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             return String(value ?? "");
         }
     };
-    const { wb, registry, selectedNodeId, selectedEdgeId, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, nodeStatus, edgeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, updateEdgeType, systemErrors, registryErrors, inputValidationErrors, clearSystemErrors, clearRegistryErrors, clearInputValidationErrors, removeSystemError, removeRegistryError, removeInputValidationError, } = useWorkbenchContext();
+    const { wb, registryVersion, selectedNodeId, selectedEdgeId, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, nodeStatus, edgeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, updateEdgeType, systemErrors, registryErrors, inputValidationErrors, clearSystemErrors, clearRegistryErrors, clearInputValidationErrors, removeSystemError, removeRegistryError, removeInputValidationError, } = useWorkbenchContext();
     const nodeValidationIssues = validationByNode.issues;
     const edgeValidationIssues = validationByEdge.issues;
     const nodeValidationHandles = validationByNode;
@@ -5055,7 +5058,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
     const selectedEdge = wb.def.edges.find((e) => e.id === selectedEdgeId);
     // Use computeEffectiveHandles to merge registry defaults with dynamically resolved handles
     const effectiveHandles = selectedNode
-        ? computeEffectiveHandles(selectedNode, registry)
+        ? computeEffectiveHandles(selectedNode, wb.registry)
         : { inputs: {}, outputs: {}};
     const inputHandles = Object.entries(effectiveHandles.inputs)
         .filter(([k]) => !isInputPrivate(effectiveHandles.inputs, k))
@@ -5182,7 +5185,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             setDrafts(nextDrafts);
         if (!shallowEqual(originals, nextOriginals))
             setOriginals(nextOriginals);
-    }, [selectedNodeId, selectedNode, registry, valuesTick]);
+    }, [selectedNodeId, selectedNode, wb.registry, registryVersion, valuesTick]);
     const widthClass = debug ? "w-[480px]" : "w-[320px]";
     const deleteEdgeById = (edgeId) => {
         if (!edgeId)
@@ -5202,7 +5205,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                         const v = e.target.value;
                                                         const next = v === "" ? undefined : v;
                                                         updateEdgeType(selectedEdge.id, next);
-                                                    }, children: [jsx("option", { value: "", children: "(infer from source)" }), Array.from(registry.types.keys()).map((tid) => (jsx("option", { value: tid, children: tid }, tid)))] })] })] }), selectedEdgeValidation.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: selectedEdgeValidation.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}` }), jsx("button", { className: "ml-2 text-[10px] px-1 py-[2px] border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
+                                                    }, children: [jsx("option", { value: "", children: "(infer from source)" }), Array.from(wb.registry.types.keys()).map((tid) => (jsx("option", { value: tid, children: tid }, tid)))] })] })] }), selectedEdgeValidation.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: selectedEdgeValidation.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}` }), jsx("button", { className: "ml-2 text-[10px] px-1 py-[2px] border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
                                                             e.stopPropagation();
                                                             deleteEdgeById(selectedEdge.id);
                                                         }, title: "Delete this edge", children: "Delete edge" })] }, i))) })] }))] })) : (jsxs("div", { children: [selectedNode && (jsxs("div", { className: "mb-2", children: [jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.activeRuns &&
@@ -5272,7 +5275,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                                     setOriginals((o) => ({ ...o, [h]: display }));
                                                                 }, ...commonProps, children: [jsx("option", { value: "", children: placeholder
                                                                             ? `Default: ${placeholder}`
-                                                                            : "(select)" }), registry.enums
+                                                                            : "(select)" }), wb.registry.enums
                                                                         .get(typeId)
                                                                         ?.options.map((opt) => (jsx("option", { value: String(opt.value), children: opt.label }, opt.value)))] }), hasValue && !isLinked && (jsx("button", { className: "flex-shrink-0 p-1 hover:bg-gray-100 rounded text-gray-500 hover:text-gray-700", onClick: clearInput, title: "Clear input value", children: jsx(XCircleIcon, { size: 16 }) }))] })) : isLinked ? (jsx("div", { className: "flex items-center gap-1 flex-1", children: jsx("div", { className: "flex-1 min-w-0", children: renderLinkedInputDisplay(typeId, current) }) })) : (jsxs("div", { className: "flex items-center gap-1 flex-1", children: [jsx("input", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 flex-1 select-text", placeholder: placeholder
                                                                     ? `Default: ${placeholder}`
@@ -5541,7 +5544,7 @@ function useKeyboardShortcutToast() {
 }
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
-    const { wb, registry, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, registryVersion, runner, engineKind, overrides, } = useWorkbenchContext();
+    const { wb, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, registryVersion, runner, engineKind, overrides, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
     const [historyState, setHistoryState] = useState(wb.getHistory());
@@ -5619,7 +5622,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         // Build nodeTypes map using UI extension registry
         const custom = new Map(); // Include all types present in registry AND current graph to avoid timing issues
         const ids = new Set([
-            ...Array.from(registry.nodes.keys()),
+            ...Array.from(wb.registry.nodes.keys()),
             ...wb.def.nodes.map((n) => n.typeId),
         ]);
         for (const typeId of ids) {
@@ -5638,7 +5641,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         return { nodeTypes: types, resolveNodeType: resolver };
         // Include uiVersion to recompute when custom renderers are registered
         // Include registryVersion to recompute when registry enums/types change
-    }, [wb, registry, uiVersion, ui]);
+    }, [wb, wb.registry, registryVersion, uiVersion, ui]);
     const edgeTypes = useMemo(() => {
         // Use default edge renderer override if registered, otherwise use DefaultEdge
         const customEdgeRenderer = ui.getEdgeRenderer();
@@ -5664,7 +5667,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 inputsWithDefaults[n.nodeId] = merged;
             }
         }
-        const out = toReactFlow(wb.def, wb.getPositions(), wb.getSizes(), registry, {
+        const out = toReactFlow(wb.def, wb.getPositions(), wb.getSizes(), wb.registry, {
             showValues,
             inputs: inputsWithDefaults,
             inputDefaults: inputDefaultsMap,
@@ -5931,7 +5934,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         });
         return () => off();
     }, [wb]);
-    const nodeIds = useMemo(() => Array.from(registry.nodes.keys()), [registry, registryVersion]);
+    const nodeIds = useMemo(() => Array.from(wb.registry.nodes.keys()), [wb.registry, registryVersion]);
     const defaultContextMenuHandlers = useMemo(() => {
         // Get storage from override or use workbench's internal storage
         const storage = overrides?.getCopiedDataStorage
@@ -5979,7 +5982,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 get: () => wb.getCopiedData(),
                 set: (data) => wb.setCopiedData(data),
             };
-        const baseHandlers = createNodeContextMenuHandlers(nodeAtMenu, wb, runner, registry, outputsMap, outputTypesMap, onCloseNodeMenu, overrides?.getDefaultNodeSize, (data) => {
+        const baseHandlers = createNodeContextMenuHandlers(nodeAtMenu, wb, runner, wb.registry, outputsMap, outputTypesMap, onCloseNodeMenu, overrides?.getDefaultNodeSize, (data) => {
             storage.set(data);
         });
         if (overrides?.getNodeContextMenuHandlers) {
@@ -5990,7 +5993,8 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         nodeAtMenu,
         wb,
         runner,
-        registry,
+        wb.registry,
+        registryVersion,
         outputsMap,
         outputTypesMap,
         onCloseNodeMenu,
@@ -6002,8 +6006,8 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const bakeableOutputs = useMemo(() => {
         if (!nodeAtMenu)
             return [];
-        return getBakeableOutputs(nodeAtMenu, wb, registry, outputTypesMap);
-    }, [nodeAtMenu, wb, registry, outputTypesMap]);
+        return getBakeableOutputs(nodeAtMenu, wb, wb.registry, outputTypesMap);
+    }, [nodeAtMenu, wb, wb.registry, registryVersion, outputTypesMap]);
     // Keyboard shortcuts configuration
     const enableKeyboardShortcuts = overrides?.enableKeyboardShortcuts !== false; // Default to true
     const keyboardShortcuts = overrides?.keyboardShortcuts || {
@@ -6199,9 +6203,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                         if (savedViewport) {
                             inst.setViewport(lod.clone(savedViewport));
                         }
-                    }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", children: [BackgroundRenderer ? (jsx(BackgroundRenderer, {})) : (jsx(Background, { id: "workbench-canvas-background", variant: BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsx(MinimapRenderer, {}) : jsx(MiniMap, {}), ControlsRenderer ? jsx(ControlsRenderer, {}) : jsx(Controls, {}), DefaultContextMenuRenderer ? (jsx(DefaultContextMenuRenderer, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: registry, nodeIds: nodeIds, ...(enableKeyboardShortcuts !== false
+                    }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", children: [BackgroundRenderer ? (jsx(BackgroundRenderer, {})) : (jsx(Background, { id: "workbench-canvas-background", variant: BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsx(MinimapRenderer, {}) : jsx(MiniMap, {}), ControlsRenderer ? jsx(ControlsRenderer, {}) : jsx(Controls, {}), DefaultContextMenuRenderer ? (jsx(DefaultContextMenuRenderer, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, ...(enableKeyboardShortcuts !== false
                                 ? { enableKeyboardShortcuts, keyboardShortcuts }
-                                : {}) })) : (jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })), !!nodeAtMenu &&
+                                : {}) })) : (jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })), !!nodeAtMenu &&
                             nodeContextMenuHandlers &&
                             (NodeContextMenuRenderer ? (jsx(NodeContextMenuRenderer, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs, ...(enableKeyboardShortcuts !== false
                                     ? { enableKeyboardShortcuts, keyboardShortcuts }
@@ -6210,14 +6214,14 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                             (SelectionContextMenuRenderer ? (jsx(SelectionContextMenuRenderer, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsx(SelectionContextMenu, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }) }), toast && (jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
 });
 
-function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
-    const { wb, runner, registry, selectedNodeId, runAutoLayout } = useWorkbenchContext();
+function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
+    const { wb, runner, selectedNodeId, runAutoLayout } = useWorkbenchContext();
     const [transportStatus, setTransportStatus] = useState({
         state: "local",
     });
     const selectedNode = wb.def.nodes.find((n) => n.nodeId === selectedNodeId);
     const effectiveHandles = selectedNode
-        ? computeEffectiveHandles(selectedNode, registry)
+        ? computeEffectiveHandles(selectedNode, wb.registry)
         : { inputs: {}, outputs: {}, inputDefaults: {} };
     const [exampleState, setExampleState] = useState(example ?? "");
     const isGraphRunning = runner.isRunning();
@@ -6364,7 +6368,6 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         // - For remote backend, registry is automatically managed by RemoteGraphRunner
         if (backendKind === "local") {
             if (r) {
-                setRegistry(r);
                 wb.setRegistry(r);
             }
         }
@@ -6380,15 +6383,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         runAutoLayout();
         setExampleState(key);
         onExampleChange?.(key);
-    }, [
-        runner,
-        wb,
-        onExampleChange,
-        runAutoLayout,
-        examples,
-        setRegistry,
-        backendKind,
-    ]);
+    }, [runner, wb, onExampleChange, runAutoLayout, examples, backendKind]);
     const download$1 = useCallback(async () => {
         try {
             await download(wb, runner);
@@ -6559,11 +6554,11 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return overrides.setInput(baseSetInput, {
                 runner,
                 selectedNodeId,
-                registry,
+                registry: wb.registry,
             });
         }
         return baseSetInput;
-    }, [overrides, baseSetInput, runner, selectedNodeId, registry]);
+    }, [overrides, baseSetInput, runner, selectedNodeId, wb.registry]);
     const baseToString = useCallback((typeId, value) => {
         if (value === undefined || value === null)
             return "";
@@ -6571,7 +6566,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         if (isTypedOutput(value)) {
             return baseToString(getTypedOutputTypeId(value), getTypedOutputValue(value));
         }
-        const pre = preformatValueForDisplay(typeId, value, registry);
+        const pre = preformatValueForDisplay(typeId, value, wb.registry);
         if (pre !== undefined)
             return pre;
         if (typeof value === "object" &&
@@ -6587,7 +6582,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         }
         if (typeId && typeId.startsWith("enum:")) {
             const n = Number(value);
-            const label = registry.enums.get(typeId)?.valueToLabel.get(n);
+            const label = wb.registry.enums.get(typeId)?.valueToLabel.get(n);
             return label ?? String(n);
         }
         const round4 = (n) => Math.round(Number(n) * 10000) / 10000;
@@ -6617,22 +6612,22 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return String(rounded);
         }
         return String(value);
-    }, [registry]);
+    }, [wb.registry]);
     const baseToElement = useCallback((typeId, value) => {
         return (jsx("span", { className: "ml-1 opacity-60", children: baseToString(typeId, value) }));
     }, [baseToString]);
     const toString = useMemo(() => {
         if (overrides?.toString)
-            return overrides.toString(baseToString, { registry });
+            return overrides.toString(baseToString, { registry: wb.registry });
         return baseToString;
-    }, [overrides, baseToString, registry]);
+    }, [overrides, baseToString, wb.registry]);
     // Optional: toElement (not currently consumed by core UI)
     // Consumers can access it by passing through their own node renderers.
     const toElement = useMemo(() => {
         if (overrides?.toElement)
-            return overrides.toElement(baseToElement, { registry });
+            return overrides.toElement(baseToElement, { registry: wb.registry });
         return baseToElement;
-    }, [overrides, baseToElement, registry]);
+    }, [overrides, baseToElement, wb.registry]);
     return (jsxs("div", { className: "w-full h-screen flex flex-col", children: [jsxs("div", { className: "p-2 border-b border-gray-300 flex gap-2 items-center", children: [isGraphRunning ? (jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", engineKind] })) : (jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Stopped" })), jsxs("span", { className: "ml-2 flex items-center gap-1 text-xs", title: transportStatus.kind || undefined, children: [transportStatus.state === "local" && (jsx(PlugsConnectedIcon, { size: 14, className: "text-gray-500" })), transportStatus.state === "connecting" && (jsx(ClockClockwiseIcon, { size: 14, className: "text-amber-600 animate-pulse" })), transportStatus.state === "connected" && (jsx(WifiHighIcon, { size: 14, className: "text-green-600" })), transportStatus.state === "disconnected" && (jsx(WifiSlashIcon, { size: 14, className: "text-red-600" })), transportStatus.state === "retrying" && (jsx(ClockClockwiseIcon, { size: 14, className: "text-amber-700 animate-pulse" }))] }), jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: exampleState, onChange: (e) => applyExample(e.target.value), disabled: isGraphRunning, title: isGraphRunning ? "Stop engine before switching example" : undefined, children: [jsx("option", { value: "", children: "Select Example\u2026" }), examples.map((ex) => (jsx("option", { value: ex.id, children: ex.label }, ex.id)))] }), jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: backendKind, onChange: (e) => onBackendKindChange(e.target.value), disabled: isGraphRunning, title: isGraphRunning ? "Stop engine before switching backend" : undefined, children: [jsx("option", { value: "local", children: "Local" }), jsx("option", { value: "remote-http", children: "Remote (HTTP)" }), jsx("option", { value: "remote-ws", children: "Remote (WebSocket)" })] }), backendKind === "remote-http" && !!onHttpBaseUrlChange && (jsx("input", { className: "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" && !!onWsUrlChange && (jsx("input", { className: "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) })), jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: engineKind ?? engine ?? "", onChange: async (e) => {
                             const kind = e.target.value || undefined;
                             const currentEngine = runner.getRunningEngine();
@@ -6734,7 +6729,7 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
             runner.dispose();
         onBackendKindChange(v);
     }, [isGraphRunning]);
-    return (jsx(WorkbenchProvider, { wb: wb, runner: runner, registry: registry, setRegistry: setRegistry, overrides: overrides, uiVersion: uiVersion, children: jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: onBackendKindChangeWithDispose, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange, overrides: overrides, onInit: onInit, onChange: onChange }) }));
+    return (jsx(WorkbenchProvider, { wb: wb, runner: runner, overrides: overrides, uiVersion: uiVersion, children: jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: onBackendKindChangeWithDispose, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange, overrides: overrides, onInit: onInit, onChange: onChange }) }));
 }
 
 export { AbstractWorkbench, CLIWorkbench, DefaultEdge, DefaultNode, DefaultNodeContent, DefaultNodeHeader, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, captureCanvasThumbnail, computeEffectiveHandles, countVisibleHandles, createCopyHandler, createDefaultContextMenuHandlers, createHandleBounds, createHandleLayout, createNodeContextMenuHandlers, createNodeCopyHandler, createSelectionContextMenuHandlers, download, downloadCanvasThumbnail, estimateNodeSize, excludeViewportFromUIState, formatDataUrlAsLabel, formatDeclaredTypeSignature, getBakeableOutputs, getHandleBoundsX, getHandleBoundsY, getHandleClassName, getHandleLayoutY, getNodeBorderClassNames, isValidViewport, layoutNode, mergeUIState, preformatValueForDisplay, prettyHandle, resolveOutputDisplay, summarizeDeep, toReactFlow, upload, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };