@bian-womp/spark-workbench 0.1.21 → 0.1.23

package/lib/cjs/index.cjs

@@ -327,6 +327,9 @@ class GraphRunner {
         this.backend = { kind: "local" };
         if (backend)
             this.backend = backend;
+        // Emit initial transport status
+        if (this.backend.kind === "local")
+            this.emit("transport", { state: "local" });
     }
     build(def) {
         if (this.backend.kind === "local") {
@@ -615,6 +618,13 @@ class GraphRunner {
             this.runningKind = undefined;
             this.emit("status", { running: false, engine: undefined });
         }
+        const kind = this.backend.kind === "local"
+            ? undefined
+            : this.backend.kind;
+        this.emit("transport", {
+            state: this.backend.kind === "local" ? "local" : "disconnected",
+            kind,
+        });
     }
     isRunning() {
         return !!this.engine;
@@ -627,6 +637,8 @@ class GraphRunner {
         if (this.remote)
             return this.remote;
         let transport;
+        const kind = this.backend.kind === "remote-http" ? "remote-http" : "remote-ws";
+        this.emit("transport", { state: "connecting", kind });
         if (this.backend.kind === "remote-http") {
             if (!sparkRemote.HttpPollingTransport)
                 throw new Error("HttpPollingTransport not available");
@@ -649,6 +661,7 @@ class GraphRunner {
             valueCache: new Map(),
             listenersBound: false,
         };
+        this.emit("transport", { state: "connected", kind });
         return this.remote;
     }
 }
@@ -817,6 +830,19 @@ function useQueryParamString(key, defaultValue) {
     return [val, set];
 }
 
+function formatDataUrlAsLabel(dataUrl) {
+    try {
+        const semi = dataUrl.indexOf(";");
+        const comma = dataUrl.indexOf(",");
+        const mime = dataUrl.slice(5, semi > 0 ? semi : undefined).toUpperCase();
+        const b64 = comma >= 0 ? dataUrl.slice(comma + 1) : "";
+        const bytes = Math.floor((b64.length * 3) / 4);
+        return `${mime} Data (${bytes} bytes)`;
+    }
+    catch {
+        return dataUrl.length > 64 ? dataUrl.slice(0, 64) + "…" : dataUrl;
+    }
+}
 function resolveOutputDisplay(raw, declared) {
     if (sparkGraph.isTypedOutput(raw)) {
         return {
@@ -847,7 +873,7 @@ function preformatValueForDisplay(typeId, value, registry) {
         return preformatValueForDisplay(sparkGraph.getTypedOutputTypeId(value), sparkGraph.getTypedOutputValue(value), registry);
     }
     // Enums
-    if (typeId && typeId.includes("enum:") && registry) {
+    if (typeId && typeId.startsWith("enum:") && registry) {
         const n = Number(value);
         const label = registry.enums.get(typeId)?.valueToLabel.get(n);
         if (label)
@@ -871,19 +897,8 @@ function preformatValueForDisplay(typeId, value, registry) {
 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;
-            }
-        }
+        if (value.startsWith("data:"))
+            return formatDataUrlAsLabel(value);
         return value.length > 512 ? value.slice(0, 512) + "…" : value;
     }
     // Typed output wrapper
@@ -903,18 +918,8 @@ function summarizeDeep(value) {
             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] = formatDataUrlAsLabel(v);
+                continue;
             }
             out[k] = summarizeDeep(v);
         }
@@ -1085,11 +1090,14 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         const out = {};
         // Local: runtimeTypeId is not stored; derive from typed wrapper in outputsMap
         for (const n of def.nodes) {
-            const handles = Object.keys(registry.nodes.get(n.typeId)?.outputs ?? {});
+            const outputsDecl = registry.nodes.get(n.typeId)?.outputs ?? {};
+            const handles = Object.keys(outputsDecl);
             const cur = {};
             for (const h of handles) {
                 const v = outputsMap[n.nodeId]?.[h];
-                cur[h] = sparkGraph.getTypedOutputTypeId(v);
+                const declared = outputsDecl[h];
+                const { typeId } = resolveOutputDisplay(v, declared);
+                cur[h] = typeId;
             }
             if (Object.keys(cur).length > 0)
                 out[n.nodeId] = cur;
@@ -1524,14 +1532,6 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
     const safeToString = (typeId, value) => {
         try {
             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 ?? "");
@@ -1640,7 +1640,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                         const orig = originals[h] ?? safeToString(typeId, current);
                                         setDrafts((d) => ({ ...d, [h]: orig }));
                                     };
-                                    const isEnum = typeId?.includes("enum:");
+                                    const isEnum = typeId?.startsWith("enum:");
                                     const inIssues = selectedNodeHandleValidation.inputs.filter((m) => m.handle === h);
                                     const hasValidation = inIssues.length > 0;
                                     const hasErr = inIssues.some((m) => m.level === "error");
@@ -1747,7 +1747,7 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                                 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}`));
+                            }, 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(resolved.typeId, resolved.value) }))] })] }, `out-${entry.id}`));
             })] }));
 });
 DefaultNode.displayName = "DefaultNode";
@@ -1756,16 +1756,18 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
     const { registry } = useWorkbenchContext();
     const rf = ReactFlow.useReactFlow();
     const ids = Array.from(registry.nodes.keys());
-    // Group node ids by the segment before the first '.'
-    const grouped = {};
+    const root = { __children: {} };
     for (const id of ids) {
         const parts = id.split(".");
-        const cat = parts.length > 1 ? parts[0] : "other";
-        const label = parts.length > 1 ? parts.slice(1).join(".") : id;
-        (grouped[cat] = grouped[cat] || []).push({ id, label });
+        let node = root;
+        for (let i = 0; i < parts.length; i++) {
+            const key = parts[i];
+            node.__children[key] = node.__children[key] || { __children: {} };
+            node = node.__children[key];
+            if (i === parts.length - 1)
+                node.__self = id;
+        }
     }
-    const cats = Object.keys(grouped).sort((a, b) => a.localeCompare(b));
-    cats.forEach((c) => grouped[c].sort((a, b) => a.label.localeCompare(b.label)));
     const totalCount = ids.length;
     // Ref for focus/outside click handling
     const ref = React.useRef(null);
@@ -1809,10 +1811,19 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
         onAdd(typeId, p);
         onClose();
     };
+    const renderTree = (tree, path = []) => {
+        const entries = Object.entries(tree.__children).sort((a, b) => a[0].localeCompare(b[0]));
+        return (jsxRuntime.jsx("div", { children: entries.map(([key, child]) => {
+                const label = key;
+                const hasChildren = Object.keys(child.__children).length > 0;
+                !!child.__self && !hasChildren;
+                return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "px-2 py-1 text-[11px] uppercase tracking-wide text-gray-400", children: label }), child.__self && (jsxRuntime.jsx("button", { onClick: () => handleClick(child.__self), className: "block w-full text-left px-3 py-1 hover:bg-gray-100 cursor-pointer", title: child.__self, children: child.__self.split(".").slice(-1)[0] })), hasChildren && (jsxRuntime.jsx("div", { className: "pl-2 border-l border-gray-200 ml-2", children: renderTree(child, [...path, key]) }))] }, [...path, key].join(".")));
+            }) }));
+    };
     return (jsxRuntime.jsxs("div", { ref: ref, tabIndex: -1, className: "fixed z-[1000] bg-white border border-gray-300 rounded-none shadow-lg p-1 min-w-[180px] text-sm text-gray-700", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
             e.preventDefault();
             e.stopPropagation();
-        }, children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node ", jsxRuntime.jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-auto", children: cats.map((cat) => (jsxRuntime.jsxs("div", { className: "py-1", children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 text-[11px] uppercase tracking-wide text-gray-400", children: [cat, " ", jsxRuntime.jsxs("span", { className: "opacity-60 normal-case", children: ["(", grouped[cat].length, ")"] })] }), grouped[cat].map(({ id, label }) => (jsxRuntime.jsx("button", { onClick: () => handleClick(id), className: "block w-full text-left px-3 py-1 hover:bg-gray-100 cursor-pointer", title: id, children: label }, id)))] }, cat))) })] }));
+        }, children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node ", jsxRuntime.jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-auto", children: renderTree(root) })] }));
 }
 
 function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
@@ -1981,6 +1992,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
 
 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, def, selectedNodeId, runAutoLayout } = useWorkbenchContext();
+    const [transportStatus, setTransportStatus] = React.useState({
+        state: "local",
+    });
     const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
     const selectedDesc = selectedNode
         ? registry.nodes.get(selectedNode.typeId)
@@ -2194,6 +2208,10 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return;
         applyExample(example);
     }, [example, wb]);
+    React.useEffect(() => {
+        const off = runner.on("transport", (s) => setTransportStatus(s));
+        return () => off();
+    }, [runner]);
     React.useEffect(() => {
         if (!engine)
             return;
@@ -2337,26 +2355,10 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             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 ? "…" : "");
-                }
-            }
+            // value.ts handles data URL formatting
             return title || url.slice(0, 32) + (url.length > 32 ? "…" : "");
         }
-        if (typeId && typeId.includes("enum:")) {
+        if (typeId && typeId.startsWith("enum:")) {
             const n = Number(value);
             const label = registry.enums.get(typeId)?.valueToLabel.get(n);
             return label ?? String(n);
@@ -2400,7 +2402,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return overrides.toElement(baseToElement, { registry });
         return baseToElement;
     }, [overrides, baseToElement, registry]);
-    return (jsxRuntime.jsxs("div", { className: "w-full h-screen flex flex-col", children: [jsxRuntime.jsxs("div", { className: "p-2 border-b border-gray-300 flex gap-2 items-center", children: [runner.isRunning() ? (jsxRuntime.jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", runner.getRunningEngine()] })) : (jsxRuntime.jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Stopped" })), jsxRuntime.jsx("label", { className: "ml-2 text-sm", children: "Example:" }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: exampleState, onChange: (e) => applyExample(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
+    return (jsxRuntime.jsxs("div", { className: "w-full h-screen flex flex-col", children: [jsxRuntime.jsxs("div", { className: "p-2 border-b border-gray-300 flex gap-2 items-center", children: [runner.isRunning() ? (jsxRuntime.jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", runner.getRunningEngine()] })) : (jsxRuntime.jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Stopped" })), jsxRuntime.jsxs("span", { className: "ml-2 flex items-center gap-1 text-xs", title: transportStatus.kind || undefined, children: [transportStatus.state === "local" && (jsxRuntime.jsx(react.PlugsConnectedIcon, { size: 14, className: "text-gray-500" })), transportStatus.state === "connecting" && (jsxRuntime.jsx(react.ClockClockwiseIcon, { size: 14, className: "text-amber-600 animate-pulse" })), transportStatus.state === "connected" && (jsxRuntime.jsx(react.WifiHighIcon, { size: 14, className: "text-green-600" })), transportStatus.state === "disconnected" && (jsxRuntime.jsx(react.WifiSlashIcon, { size: 14, className: "text-red-600" })), transportStatus.state === "retrying" && (jsxRuntime.jsx(react.ClockClockwiseIcon, { size: 14, className: "text-amber-700 animate-pulse" }))] }), jsxRuntime.jsx("label", { className: "ml-2 text-sm", children: "Example:" }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: exampleState, onChange: (e) => applyExample(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
                             ? "Stop engine before switching example"
                             : undefined, children: [jsxRuntime.jsx("option", { value: "", children: "Select Example\u2026" }), examples.map((ex) => (jsxRuntime.jsx("option", { value: ex.id, children: ex.label }, ex.id)))] }), jsxRuntime.jsx("label", { className: "ml-2 text-sm", children: "Backend:" }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: backendKind, onChange: (e) => onBackendKindChange(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
                             ? "Stop engine before switching backend"
@@ -2453,6 +2455,7 @@ exports.WorkbenchCanvas = WorkbenchCanvas;
 exports.WorkbenchContext = WorkbenchContext;
 exports.WorkbenchProvider = WorkbenchProvider;
 exports.WorkbenchStudio = WorkbenchStudio;
+exports.formatDataUrlAsLabel = formatDataUrlAsLabel;
 exports.formatDeclaredTypeSignature = formatDeclaredTypeSignature;
 exports.getNodeBorderClassNames = getNodeBorderClassNames;
 exports.preformatValueForDisplay = preformatValueForDisplay;