@bian-womp/spark-workbench 0.2.27 → 0.2.29

package/lib/cjs/index.cjs

@@ -524,7 +524,16 @@ class LocalGraphRunner extends AbstractGraphRunner {
             const runtimeInputs = this.runtime
                 ? this.runtime.getNodeData?.(n.nodeId)?.inputs ?? {}
                 : {};
-            const merged = { ...runtimeInputs, ...staged };
+            // Build inbound handle set for this node from current def
+            const inbound = new Set(def.edges
+                .filter((e) => e.target.nodeId === n.nodeId)
+                .map((e) => e.target.handle));
+            // Merge staged only for non-inbound handles so UI reflects runtime values for wired inputs
+            const merged = { ...runtimeInputs };
+            for (const [h, v] of Object.entries(staged)) {
+                if (!inbound.has(h))
+                    merged[h] = v;
+            }
             if (Object.keys(merged).length > 0)
                 out[n.nodeId] = merged;
         }
@@ -795,12 +804,21 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             const desc = this.registry.nodes.get(n.typeId);
             const handles = Object.keys(resolved ?? desc?.inputs ?? {});
             const cur = {};
+            // Build inbound handle set for this node to honor wiring precedence
+            const inbound = new Set(def.edges
+                .filter((e) => e.target.nodeId === n.nodeId)
+                .map((e) => e.target.handle));
             for (const h of handles) {
                 const rec = cache.get(`${n.nodeId}.${h}`);
                 if (rec && rec.io === "input")
                     cur[h] = rec.value;
             }
-            const merged = { ...cur, ...staged };
+            // Merge staged only for non-inbound handles so UI doesn't override runtime values
+            const merged = { ...cur };
+            for (const [h, v] of Object.entries(staged)) {
+                if (!inbound.has(h))
+                    merged[h] = v;
+            }
             if (Object.keys(merged).length > 0)
                 out[n.nodeId] = merged;
         }
@@ -1264,6 +1282,23 @@ function formatDeclaredTypeSignature(declared) {
         return declared.join(" | ");
     return declared ?? "";
 }
+/**
+ * Formats a handle ID for display in the UI.
+ * For handles with format "prefix:middle:suffix:extra" (4 parts), displays only the middle part.
+ * Otherwise returns the handle ID as-is.
+ */
+function prettyHandle(id) {
+    try {
+        const parts = String(id).split(":");
+        // If there are exactly 3 colons (4 parts), display only the second part
+        if (parts.length === 4)
+            return parts[1] || id;
+        return id;
+    }
+    catch {
+        return id;
+    }
+}
 // Pre-format common structures for display; return undefined to defer to caller
 function preformatValueForDisplay(typeId, value, registry) {
     if (value === undefined || value === null)
@@ -1642,7 +1677,7 @@ function useWorkbenchContext() {
     return ctx;
 }
 
-function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, children, }) {
+function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVersion, children, }) {
     const [nodeStatus, setNodeStatus] = React.useState({});
     const [edgeStatus, setEdgeStatus] = React.useState({});
     const [events, setEvents] = React.useState([]);
@@ -2184,6 +2219,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, child
         runAutoLayout,
         updateEdgeType,
         triggerExternal,
+        uiVersion,
     }), [
         wb,
         runner,
@@ -2218,6 +2254,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, child
         runAutoLayout,
         wb,
         runner,
+        uiVersion,
     ]);
     return (jsxRuntime.jsx(WorkbenchContext.Provider, { value: value, children: children }));
 }
@@ -2230,6 +2267,7 @@ function IssueBadge({ level, title, size = 12, className, }) {
 function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWorkbenchChange, }) {
     const { events, clearEvents } = useWorkbenchContext();
     const scrollRef = React.useRef(null);
+    const [copied, setCopied] = React.useState(false);
     const rows = React.useMemo(() => {
         const filtered = hideWorkbench
             ? events.filter((e) => e.source !== "workbench")
@@ -2253,7 +2291,25 @@ function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWork
             return String(v);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col h-full min-h-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: "Events" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: hideWorkbench, onChange: (e) => onHideWorkbenchChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Hide workbench" })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: autoScroll, onChange: (e) => onAutoScrollChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Auto scroll" })] }), jsxRuntime.jsx("button", { onClick: clearEvents, className: "text-xs px-2 py-0.5 border border-gray-300 rounded", children: "Clear" })] })] }), jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto text-[11px] leading-4 divide-y divide-gray-200", children: rows.map((ev) => (jsxRuntime.jsxs("div", { className: "opacity-85 odd:bg-gray-50 px-2 py-1", children: [jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx("span", { className: "w-12 shrink-0 text-right text-gray-500 select-none", children: ev.no }), jsxRuntime.jsxs("span", { className: "text-gray-500", children: [new Date(ev.at).toLocaleTimeString(), " \u00B7 ", ev.source, ":", ev.type] })] }), jsxRuntime.jsx("pre", { className: "m-0 whitespace-pre-wrap ml-12", children: renderPayload(ev.payload) })] }, `${ev.at}:${ev.no}`))) })] }));
+    const handleCopyLogs = async () => {
+        try {
+            const formattedEvents = rows.map((ev) => ({
+                no: ev.no,
+                at: ev.at,
+                source: ev.source,
+                type: ev.type,
+                payload: summarizeDeep(ev.payload),
+            }));
+            const jsonString = JSON.stringify(formattedEvents, null, 2);
+            await navigator.clipboard.writeText(jsonString);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error("Failed to copy logs:", err);
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col h-full min-h-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: "Events" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: hideWorkbench, onChange: (e) => onHideWorkbenchChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Hide workbench" })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: autoScroll, onChange: (e) => onAutoScrollChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Auto scroll" })] }), jsxRuntime.jsx("button", { onClick: handleCopyLogs, className: "p-2 border border-gray-300 rounded flex items-center justify-center", title: copied ? "Copied!" : "Copy logs as formatted JSON", children: jsxRuntime.jsx(react$1.CopyIcon, { size: 14 }) }), jsxRuntime.jsx("button", { onClick: clearEvents, className: "p-2 border border-gray-300 rounded flex items-center justify-center", title: "Clear all events", children: jsxRuntime.jsx(react$1.TrashIcon, { size: 14 }) })] })] }), jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto text-[11px] leading-4 divide-y divide-gray-200", children: rows.map((ev) => (jsxRuntime.jsxs("div", { className: "opacity-85 odd:bg-gray-50 px-2 py-1", children: [jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx("span", { className: "w-12 shrink-0 text-right text-gray-500 select-none", children: ev.no }), jsxRuntime.jsxs("span", { className: "text-gray-500", children: [new Date(ev.at).toLocaleTimeString(), " \u00B7 ", ev.source, ":", ev.type] })] }), jsxRuntime.jsx("pre", { className: "m-0 whitespace-pre-wrap ml-12", children: renderPayload(ev.payload) })] }, `${ev.at}:${ev.no}`))) })] }));
 }
 
 function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toString, toElement, contextPanel, setInput, }) {
@@ -2275,13 +2331,17 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
     const globalValidationIssues = validationGlobal;
     const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
     const selectedEdge = def.edges.find((e) => e.id === selectedEdgeId);
-    const selectedDesc = selectedNode
+    selectedNode
         ? registry.nodes.get(selectedNode.typeId)
         : undefined;
-    const inputHandles = Object.entries(selectedDesc?.inputs ?? {})
-        .filter(([k]) => !sparkGraph.isInputPrivate(selectedDesc?.inputs, k))
+    // Use computeEffectiveHandles to merge registry defaults with dynamically resolved handles
+    const effectiveHandles = selectedNode
+        ? computeEffectiveHandles(selectedNode, registry)
+        : { inputs: {}, outputs: {}};
+    const inputHandles = Object.entries(effectiveHandles.inputs)
+        .filter(([k]) => !sparkGraph.isInputPrivate(effectiveHandles.inputs, k))
         .map(([k]) => k);
-    const outputHandles = Object.keys(selectedDesc?.outputs ?? {});
+    const outputHandles = Object.keys(effectiveHandles.outputs);
     const nodeInputs = selectedNodeId ? inputsMap[selectedNodeId] ?? {} : {};
     const nodeOutputs = selectedNodeId ? outputsMap[selectedNodeId] ?? {} : {};
     const selectedNodeStatus = selectedNodeId
@@ -2322,12 +2382,11 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             }
             return;
         }
-        const desc = selectedDesc;
-        const handles = Object.keys(desc?.inputs ?? {});
+        const handles = Object.keys(effectiveHandles.inputs);
         const nextDrafts = { ...drafts };
         const nextOriginals = { ...originals };
         for (const h of handles) {
-            const typeId = sparkGraph.getInputTypeId(desc?.inputs, h);
+            const typeId = sparkGraph.getInputTypeId(effectiveHandles.inputs, h);
             const current = nodeInputs[h];
             const display = safeToString(typeId, current);
             const wasOriginal = originals[h];
@@ -2343,7 +2402,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             setDrafts(nextDrafts);
         if (!shallowEqual(originals, nextOriginals))
             setOriginals(nextOriginals);
-    }, [selectedNodeId, selectedDesc, valuesTick]);
+    }, [selectedNodeId, selectedNode, registry, valuesTick]);
     const widthClass = debug ? "w-[480px]" : "w-[320px]";
     const { wb } = useWorkbenchContext();
     const deleteEdgeById = (edgeId) => {
@@ -2369,7 +2428,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                     deleteEdgeById(selectedEdge.id);
                                                 }, title: "Delete this edge", children: "Delete edge" })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
                                         selectedNodeStatus.lastError) }))] })), jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
-                                    const typeId = sparkGraph.getInputTypeId(selectedDesc?.inputs, h);
+                                    const typeId = sparkGraph.getInputTypeId(effectiveHandles.inputs, h);
                                     const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId &&
                                         e.target.handle === h);
                                     const commonProps = {
@@ -2397,7 +2456,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                     const title = inIssues
                                         .map((v) => `${v.code}: ${v.message}`)
                                         .join("; ");
-                                    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-32 flex flex-col", children: [jsxRuntime.jsx("span", { children: h }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: typeId })] }), hasValidation && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: current !== undefined && current !== null
+                                    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-32 flex flex-col", children: [jsxRuntime.jsx("span", { children: prettyHandle(h) }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: typeId })] }), hasValidation && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: current !== undefined && current !== null
                                                     ? String(current)
                                                     : "", onChange: (e) => {
                                                     const val = e.target.value;
@@ -2413,8 +2472,8 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                     if (e.key === "Escape")
                                                         revert();
                                                 }, ...commonProps }))] }, h));
-                                }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-20 flex flex-col", children: [jsxRuntime.jsx("span", { children: h }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: outputTypesMap[selectedNodeId]?.[h] ?? "" })] }), jsxRuntime.jsx("div", { className: "flex-1", children: (() => {
-                                                const { typeId, value } = resolveOutputDisplay(nodeOutputs[h], selectedDesc?.outputs?.[h]);
+                                }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-20 flex flex-col", children: [jsxRuntime.jsx("span", { children: prettyHandle(h) }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: outputTypesMap[selectedNodeId]?.[h] ?? "" })] }), jsxRuntime.jsx("div", { className: "flex-1", children: (() => {
+                                                const { typeId, value } = resolveOutputDisplay(nodeOutputs[h], effectiveHandles.outputs[h]);
                                                 return toElement(typeId, value);
                                             })() }), (() => {
                                             const outIssues = selectedNodeHandleValidation.outputs.filter((m) => m.handle === h);
@@ -2558,18 +2617,6 @@ function DefaultNodeHeader({ id, title, validation, right, showId, onInvalidate,
 }
 function DefaultNodeContent({ data, isConnectable, }) {
     const { showValues, inputValues, outputValues, toString } = data;
-    const prettyHandle = React.useCallback((id) => {
-        try {
-            const parts = String(id).split(":");
-            // If there are exactly 3 colons (4 parts), display only the second part
-            if (parts.length === 4)
-                return parts[1] || id;
-            return id;
-        }
-        catch {
-            return id;
-        }
-    }, []);
     const inputEntries = data.inputHandles ?? [];
     const outputEntries = data.outputHandles ?? [];
     const status = data.status ?? { activeRuns: 0 };
@@ -2902,7 +2949,7 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
 }
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
-    const { wb, registry, inputsMap, outputsMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, } = useWorkbenchContext();
+    const { wb, registry, inputsMap, outputsMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
     // Keep stable references for nodes/edges to avoid unnecessary updates
@@ -2972,8 +3019,13 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const { nodeTypes, resolveNodeType } = React.useMemo(() => {
         // Build nodeTypes map using UI extension registry
         const ui = wb.getUI();
-        const custom = new Map();
-        for (const typeId of Array.from(registry.nodes.keys())) {
+        const custom = new Map(); // Include all types present in registry AND current graph to avoid timing issues
+        const def = wb.export();
+        const ids = new Set([
+            ...Array.from(registry.nodes.keys()),
+            ...def.nodes.map((n) => n.typeId),
+        ]);
+        for (const typeId of ids) {
             const renderer = ui.getNodeRenderer(typeId);
             if (renderer)
                 custom.set(typeId, renderer);
@@ -2987,8 +3039,8 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         }
         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]);
+        // Include uiVersion to recompute when custom renderers are registered
+    }, [wb, registry, uiVersion]);
     const { nodes, edges } = React.useMemo(() => {
         const def = wb.export();
         const sel = wb.getSelection();
@@ -3028,7 +3080,11 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             })
                 .map((n) => n.id);
             // Detect handle updates (ids/length changes) for targeted debug
-            const toIds = (arr) => Array.isArray(arr) ? arr.map((h) => (h && typeof h === "object" && "id" in h ? String(h.id) : "")).filter(Boolean) : [];
+            const toIds = (arr) => Array.isArray(arr)
+                ? arr
+                    .map((h) => h && typeof h === "object" && "id" in h ? String(h.id) : "")
+                    .filter(Boolean)
+                : [];
             const handlesEqual = (a, b) => {
                 const aIds = toIds(a);
                 const bIds = toIds(b);
@@ -3654,15 +3710,6 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
     // Store previous runner for cleanup
     const prevRunnerRef = React.useRef(null);
     const runner = React.useMemo(() => {
-        // Dispose previous runner if it exists
-        if (prevRunnerRef.current) {
-            try {
-                prevRunnerRef.current.dispose();
-            }
-            catch (err) {
-                console.warn("Error disposing previous runner:", err);
-            }
-        }
         let newRunner;
         if (backendKind === "remote-http") {
             const backend = {
@@ -3693,29 +3740,43 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
         else {
             newRunner = new LocalGraphRunner(registry);
         }
-        prevRunnerRef.current = newRunner;
         return newRunner;
     }, [registry, backendKind, httpBaseUrl, wsUrl, backendOptions]);
-    // Cleanup runner on unmount
+    // Dispose previous runner after commit; dispose current on unmount
     React.useEffect(() => {
+        const previous = prevRunnerRef.current;
+        prevRunnerRef.current = runner;
+        if (previous && previous !== runner) {
+            try {
+                previous.dispose();
+            }
+            catch (err) {
+                console.warn("Error disposing previous runner:", err);
+            }
+        }
         return () => {
-            if (prevRunnerRef.current) {
+            // Only dispose if this runner is still the current one
+            if (prevRunnerRef.current === runner) {
                 try {
-                    prevRunnerRef.current.dispose();
+                    runner.dispose();
                 }
                 catch (err) {
                     console.warn("Error disposing runner on unmount:", err);
                 }
             }
         };
-    }, []);
+    }, [runner]);
+    // Track UI registration version to trigger nodeTypes recomputation
+    const [uiVersion, setUiVersion] = React.useState(0);
     // Allow external UI registration (e.g., node renderers) with access to wb
     React.useEffect(() => {
         const baseRegisterUI = (_wb) => { };
         overrides?.registerUI?.(baseRegisterUI, { wb, wbRunner: runner });
+        // Increment UI version to trigger nodeTypes recomputation in WorkbenchCanvas
+        setUiVersion((v) => v + 1);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [wb, runner, overrides]);
-    return (jsxRuntime.jsx(WorkbenchProvider, { wb: wb, runner: runner, registry: registry, setRegistry: setRegistry, overrides: overrides, children: jsxRuntime.jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: (v) => {
+    return (jsxRuntime.jsx(WorkbenchProvider, { wb: wb, runner: runner, registry: registry, setRegistry: setRegistry, overrides: overrides, uiVersion: uiVersion, children: jsxRuntime.jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: (v) => {
                 if (runner.isRunning())
                     runner.dispose();
                 onBackendKindChange(v);
@@ -3741,6 +3802,7 @@ exports.formatDataUrlAsLabel = formatDataUrlAsLabel;
 exports.formatDeclaredTypeSignature = formatDeclaredTypeSignature;
 exports.getNodeBorderClassNames = getNodeBorderClassNames;
 exports.preformatValueForDisplay = preformatValueForDisplay;
+exports.prettyHandle = prettyHandle;
 exports.resolveOutputDisplay = resolveOutputDisplay;
 exports.summarizeDeep = summarizeDeep;
 exports.toReactFlow = toReactFlow;