@bian-womp/spark-workbench 0.1.16 → 0.1.18

package/lib/cjs/index.cjs

@@ -827,6 +827,90 @@ function formatDeclaredTypeSignature(declared) {
         return declared.join(" | ");
     return declared ?? "";
 }
+// Pre-format common structures for display; return undefined to defer to caller
+function preformatValueForDisplay(typeId, value, registry) {
+    if (value === undefined || value === null)
+        return "";
+    // Unwrap typed outputs
+    if (sparkGraph.isTypedOutput(value)) {
+        return preformatValueForDisplay(String(value.__spark_type), value.__spark_value, registry);
+    }
+    // Enums
+    if (typeId && typeId.includes("enum:") && registry) {
+        const n = Number(value);
+        const label = registry.enums.get(typeId)?.valueToLabel.get(n);
+        if (label)
+            return label;
+    }
+    // Use deep summarization for strings, arrays and nested objects to avoid huge HTML payloads
+    const summarized = summarizeDeep(value);
+    if (typeof summarized === "string")
+        return summarized;
+    // Resource-like objects with url/title (after summarization)
+    if (summarized && typeof summarized === "object") {
+        const urlMaybe = summarized.url;
+        if (typeof urlMaybe === "string") {
+            const title = summarized.title || "";
+            const shortUrl = urlMaybe.length > 32 ? urlMaybe.slice(0, 32) + "…" : urlMaybe;
+            return title ? `${title} (${shortUrl})` : shortUrl;
+        }
+    }
+    return undefined;
+}
+function summarizeDeep(value) {
+    // Strings: summarize data URLs and trim extremely long strings
+    if (typeof value === "string") {
+        if (value.startsWith("data:")) {
+            try {
+                const semi = value.indexOf(";");
+                const comma = value.indexOf(",");
+                const mime = value.slice(5, semi > 0 ? semi : undefined).toUpperCase();
+                const b64 = comma >= 0 ? value.slice(comma + 1) : "";
+                const bytes = Math.floor((b64.length * 3) / 4);
+                return `${mime} Data (${bytes} bytes)`;
+            }
+            catch {
+                return value.length > 64 ? value.slice(0, 64) + "…" : value;
+            }
+        }
+        return value.length > 512 ? value.slice(0, 512) + "…" : value;
+    }
+    // Typed output wrapper
+    if (sparkGraph.isTypedOutput(value)) {
+        return summarizeDeep(value.__spark_value);
+    }
+    // Arrays
+    if (Array.isArray(value)) {
+        return value.map((v) => summarizeDeep(v));
+    }
+    // Objects
+    if (value && typeof value === "object") {
+        const obj = value;
+        const out = {};
+        for (const [k, v] of Object.entries(obj)) {
+            // Special-case any 'url' field
+            if (typeof v === "string" &&
+                k.toLowerCase() === "url" &&
+                v.startsWith("data:")) {
+                try {
+                    const semi = v.indexOf(";");
+                    const comma = v.indexOf(",");
+                    const mime = v.slice(5, semi > 0 ? semi : undefined).toUpperCase();
+                    const b64 = comma >= 0 ? v.slice(comma + 1) : "";
+                    const bytes = Math.floor((b64.length * 3) / 4);
+                    out[k] = `${mime} Data (${bytes} bytes)`;
+                    continue;
+                }
+                catch {
+                    // fallthrough
+                }
+            }
+            out[k] = summarizeDeep(v);
+        }
+        return out;
+    }
+    return value;
+}
 
 function toReactFlow(def, positions, registry, opts) {
     const nodeHandleMap = {};
@@ -893,6 +977,7 @@ function toReactFlow(def, positions, registry, opts) {
                 : undefined,
             animated: isRunning,
             style,
+            label: e.typeId || undefined,
         };
     });
     return { nodes, edges };
@@ -1025,8 +1110,8 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             layers.push(layer);
             q.splice(0, q.length, ...next);
         }
-        const X = 360;
-        const Y = 180;
+        const X = 480;
+        const Y = 240;
         const pos = {};
         layers.forEach((layer, layerIndex) => {
             layer.forEach((id, itemIndex) => {
@@ -1396,7 +1481,8 @@ function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWork
     }, [rows, autoScroll]);
     const renderPayload = (v) => {
         try {
-            return JSON.stringify(v, null, 0);
+            const summarized = summarizeDeep(v);
+            return JSON.stringify(summarized, null, 0);
         }
         catch {
             return String(v);
@@ -1408,9 +1494,18 @@ 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 ?? "");
+            if (typeof toString === "function") {
+                // Special-case data URLs for readability
+                if (typeof value === "string" && value.startsWith("data:image/")) {
+                    const comma = value.indexOf(",");
+                    const b64 = comma >= 0 ? value.slice(comma + 1) : "";
+                    const bytes = Math.floor((b64.length * 3) / 4);
+                    const fmt = value.slice(5, value.indexOf(";")) || "image";
+                    return `${fmt.toUpperCase()} Data (${bytes} bytes)`;
+                }
+                return toString(typeId, value);
+            }
+            return String(value ?? "");
         }
         catch {
             return String(value ?? "");
@@ -1521,7 +1616,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-28", children: [h, jsxRuntime.jsx("span", { className: "text-gray-500 ml-1 text-[11px]", children: selectedDesc?.inputs?.[h] })] }), hasValidation && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: current !== undefined && current !== null
+                                    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-32", children: [h, jsxRuntime.jsx("span", { className: "text-gray-500 ml-1 text-[11px]", children: selectedDesc?.inputs?.[h] })] }), hasValidation && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: current !== undefined && current !== null
                                                     ? String(current)
                                                     : "", onChange: (e) => {
                                                     const val = e.target.value;
@@ -1566,7 +1661,7 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
     const ROW_SIZE = 22;
     const maxRows = Math.max(inputEntries.length, outputEntries.length);
     const minHeight = HEADER_SIZE + maxRows * ROW_SIZE;
-    const minWidth = data.showValues ? 320 : 160;
+    const minWidth = data.showValues ? 320 : 240;
     const topFor = (i) => HEADER_SIZE + i * ROW_SIZE + ROW_SIZE / 2;
     const hasError = !!status.lastError;
     const hasValidationError = validation.issues.some((i) => i.level === "error");
@@ -1599,7 +1694,13 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                 const title = vIssues
                     .map((v) => `${v.code}: ${v.message}`)
                     .join("; ");
-                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(ReactFlow.Handle, { id: entry.id, type: "target", position: ReactFlow.Position.Left, isConnectable: isConnectable, className: cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500")), style: { left: -5, top: topFor(i) } }), jsxRuntime.jsxs("div", { className: "absolute left-2 text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", style: { top: topFor(i) - 8 }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues && (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: toString(entry.typeId, inputValues?.[entry.id]) }))] })] }, `in-${entry.id}`));
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(ReactFlow.Handle, { id: entry.id, type: "target", position: ReactFlow.Position.Left, isConnectable: isConnectable, className: cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500")), style: { left: -5, top: topFor(i) } }), jsxRuntime.jsxs("div", { className: "absolute left-2 text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", style: {
+                                top: topFor(i) - 8,
+                                right: "50%",
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                            }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues && (jsxRuntime.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;
@@ -1607,10 +1708,15 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                 const title = vIssues
                     .map((v) => `${v.code}: ${v.message}`)
                     .join("; ");
-                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(ReactFlow.Handle, { id: entry.id, type: "source", position: ReactFlow.Position.Right, isConnectable: isConnectable, className: cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400 !rounded-none", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500")), style: { right: -5, top: topFor(i) } }), jsxRuntime.jsxs("div", { className: "absolute right-2 text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", style: { top: topFor(i) - 8, textAlign: "right" }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues && (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: (() => {
-                                        const { typeId, value } = resolveOutputDisplay(outputValues?.[entry.id], entry.typeId);
-                                        return toString(typeId, value);
-                                    })() }))] })] }, `out-${entry.id}`));
+                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: {
+                                top: topFor(i) - 8,
+                                textAlign: "right",
+                                left: "50%",
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                            }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, resolved.typeId && (jsxRuntime.jsxs("span", { className: "ml-1 opacity-60", children: ["(", resolved.typeId, ")"] })), hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues && (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: toString(resolved.typeId, resolved.value) }))] })] }, `out-${entry.id}`));
             })] }));
 });
 DefaultNode.displayName = "DefaultNode";
@@ -1749,11 +1855,21 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
         }, children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDelete, children: "Delete" }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDuplicate, children: "Duplicate" }), canRunPull && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleRunPull, children: "Run (pull)" })), jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxRuntime.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, }) {
+const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, ref) => {
     const { wb, registry, inputsMap, outputsMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, } = useWorkbenchContext();
     const ioValues = { inputs: inputsMap, outputs: outputsMap };
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
+    // Expose imperative API
+    const rfInstanceRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({
+        fitView: () => {
+            try {
+                rfInstanceRef.current?.fitView({ padding: 0.2 });
+            }
+            catch { }
+        },
+    }));
     const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete, onSelectionChange, } = useWorkbenchBridge(wb);
     const { nodeTypes, resolveNodeType } = React.useMemo(() => {
         // Build nodeTypes map using UI extension registry
@@ -1829,8 +1945,8 @@ function WorkbenchCanvas({ showValues, toString, toElement, }) {
     const addNodeAt = (typeId, pos) => {
         wb.addNode({ typeId, position: pos });
     };
-    return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, selectionOnDrag: true, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onSelectionChange: onSelectionChange, deleteKeyCode: ["Backspace", "Delete"], fitView: true, children: [jsxRuntime.jsx(ReactFlow.Background, {}), jsxRuntime.jsx(ReactFlow.MiniMap, {}), jsxRuntime.jsx(ReactFlow.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: () => setMenuOpen(false) }), 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(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) })] }) }));
+});
 
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, }) {
     const { wb, runner, registry, def, selectedNodeId, runAutoLayout } = useWorkbenchContext();
@@ -1880,6 +1996,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
     }, [overrides, defaultExamples]);
     const lastAutoLaunched = React.useRef(undefined);
     const autoLayoutRan = React.useRef(false);
+    const canvasRef = React.useRef(null);
     const applyExample = React.useCallback(async (key) => {
         if (runner.isRunning()) {
             alert(`Stop engine before switching example.`);
@@ -1900,6 +2017,27 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         setExampleState(key);
         onExampleChange?.(key);
     }, [runner, wb, onExampleChange, runAutoLayout, examples, setRegistry]);
+    const downloadGraph = React.useCallback(() => {
+        try {
+            const def = wb.export();
+            const pretty = JSON.stringify(def, null, 2);
+            const blob = new Blob([pretty], { type: "application/json" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            const d = new Date();
+            const pad = (n) => String(n).padStart(2, "0");
+            const ts = `${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}`;
+            a.href = url;
+            a.download = `spark-graph-${ts}.json`;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            URL.revokeObjectURL(url);
+        }
+        catch (err) {
+            alert(String(err?.message ?? err));
+        }
+    }, [wb]);
     const hydrateFromBackend = React.useCallback(async (kind, base) => {
         try {
             const transport = kind === "remote-http"
@@ -2106,6 +2244,37 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
     const baseToString = React.useCallback((typeId, value) => {
         if (value === undefined || value === null)
             return "";
+        // Normalize typed wrapper
+        if (sparkGraph.isTypedOutput(value)) {
+            return baseToString(String(value.__spark_type), value.__spark_value);
+        }
+        const pre = preformatValueForDisplay(typeId, value, registry);
+        if (pre !== undefined)
+            return pre;
+        if (typeof value === "object" &&
+            value !== null &&
+            typeof value.url === "string") {
+            const title = value.title || "";
+            const url = String(value.url || "");
+            if (url.startsWith("data:image/")) {
+                try {
+                    const semi = url.indexOf(";");
+                    const comma = url.indexOf(",");
+                    const mime = url
+                        .slice(5, semi > 0 ? semi : undefined)
+                        .toUpperCase();
+                    const b64 = comma >= 0 ? url.slice(comma + 1) : "";
+                    const bytes = Math.floor((b64.length * 3) / 4);
+                    return title
+                        ? `${title} (${mime} ${bytes} bytes)`
+                        : `${mime} Data (${bytes} bytes)`;
+                }
+                catch {
+                    return title || url.slice(0, 32) + (url.length > 32 ? "…" : "");
+                }
+            }
+            return title || url.slice(0, 32) + (url.length > 32 ? "…" : "");
+        }
         if (typeId && typeId.includes("enum:")) {
             const n = Number(value);
             const label = registry.enums.get(typeId)?.valueToLabel.get(n);
@@ -2167,7 +2336,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                             catch (err) {
                                 alert(String(err?.message ?? err));
                             }
-                        }, disabled: !engine, children: "Start" })), jsxRuntime.jsx("button", { onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { showValues: showValues, toString: toString, toElement: toElement }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement })] })] }));
+                        }, disabled: !engine, children: "Start" })), jsxRuntime.jsx("button", { onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.jsx("button", { className: "ml-2", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsxRuntime.jsx("button", { className: "ml-2", 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 })] })] }));
 }
 function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, }) {
     const [registry, setRegistry] = React.useState(sparkGraph.createSimpleGraphRegistry());
@@ -2203,7 +2372,11 @@ exports.WorkbenchCanvas = WorkbenchCanvas;
 exports.WorkbenchContext = WorkbenchContext;
 exports.WorkbenchProvider = WorkbenchProvider;
 exports.WorkbenchStudio = WorkbenchStudio;
+exports.formatDeclaredTypeSignature = formatDeclaredTypeSignature;
 exports.getNodeBorderClassNames = getNodeBorderClassNames;
+exports.preformatValueForDisplay = preformatValueForDisplay;
+exports.resolveOutputDisplay = resolveOutputDisplay;
+exports.summarizeDeep = summarizeDeep;
 exports.toReactFlow = toReactFlow;
 exports.useQueryParamBoolean = useQueryParamBoolean;
 exports.useQueryParamString = useQueryParamString;