@bian-womp/spark-workbench 0.2.5 → 0.2.6

package/lib/cjs/src/index.d.ts

@@ -11,6 +11,7 @@ export * from "./misc/mapping";
 export * from "./misc/context/WorkbenchContext";
 export * from "./misc/context/WorkbenchContext.provider";
 export * from "./misc/Inspector";
+export * from "./misc/DefaultNode";
 export * from "./misc/WorkbenchCanvas";
 export * from "./misc/WorkbenchStudio";
 export * from "./misc/value";

package/lib/cjs/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAE/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,iCAAiC,CAAC;AAChD,cAAc,0CAA0C,CAAC;AAEzD,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAE/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,iCAAiC,CAAC;AAChD,cAAc,0CAA0C,CAAC;AAEzD,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC"}

package/lib/cjs/src/misc/DefaultNode.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 import { type NodeProps, type Node } from "@xyflow/react";
 import { type RFNodeData } from "./mapping";
 export declare const DefaultNode: React.NamedExoticComponent<NodeProps<Node<RFNodeData>>>;
+export declare function DefaultNodeContent({ data, isConnectable, }: Pick<NodeProps<Node<RFNodeData>>, "data" | "isConnectable">): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DefaultNode.d.ts.map

package/lib/cjs/src/misc/DefaultNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultNode.d.ts","sourceRoot":"","sources":["../../../../src/misc/DefaultNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,IAAI,EACV,MAAM,eAAe,CAAC;AAOvB,OAAO,EAA2B,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAErE,eAAO,MAAM,WAAW,yDAuMtB,CAAC"}
+{"version":3,"file":"DefaultNode.d.ts","sourceRoot":"","sources":["../../../../src/misc/DefaultNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,IAAI,EACV,MAAM,eAAe,CAAC;AAMvB,OAAO,EAA2B,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAErE,eAAO,MAAM,WAAW,yDAgFtB,CAAC;AAGH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,aAAa,GACd,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,2CA2H7D"}

package/lib/esm/index.js

@@ -4,8 +4,8 @@ import React, { useCallback, useState, useRef, useEffect, useMemo, createContext
 import { Position, Handle, useUpdateNodeInternals, useReactFlow, ReactFlowProvider, ReactFlow, Background, BackgroundVariant, MiniMap, Controls } from '@xyflow/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { XCircleIcon, WarningCircleIcon, PlugsConnectedIcon, ClockClockwiseIcon, WifiHighIcon, WifiSlashIcon } from '@phosphor-icons/react';
-import isEqual from 'lodash/isEqual';
 import cx from 'classnames';
+import isEqual from 'lodash/isEqual';
 
 class DefaultUIExtensionRegistry {
     constructor() {
@@ -1987,7 +1987,7 @@ function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray
                 const y = placed?.y;
                 const cls = getClassName?.({ kind: "output", id: h.id, type: "source" }) ??
                     outputClassName;
-                return (jsxs(React.Fragment, { children: [jsx(Handle, { id: h.id, type: "source", position: position, isConnectable: isConnectable, className: cls, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsx("div", { className: labelClassName + " right-2", style: {
+                return (jsxs(React.Fragment, { children: [jsx(Handle, { id: h.id, type: "source", position: position, isConnectable: isConnectable, className: `${cls} wb-nodrag wb-nowheel`, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsx("div", { className: labelClassName + " right-2", style: {
                                 top: (y ?? 0) - 8,
                                 left: "50%",
                                 textAlign: "right",
@@ -2000,7 +2000,7 @@ function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray
 
 const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConnectable, }) {
     const updateNodeInternals = useUpdateNodeInternals();
-    const { typeId, showValues, inputValues, outputValues, toString } = data;
+    const { typeId, showValues } = data;
     const inputEntries = data.inputHandles ?? [];
     const outputEntries = data.outputHandles ?? [];
     React.useEffect(() => {
@@ -2018,14 +2018,11 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
         outputs: [],
         issues: [],
     };
-    const hasError = !!status.lastError;
-    const isRunning = !!status.activeRuns;
     const containerBorder = getNodeBorderClassNames({
         selected,
         status,
         validation,
     });
-    const pct = Math.round(Math.max(0, Math.min(1, Number(status.progress) || 0)) * 100);
     return (jsxs("div", { className: cx("rounded-lg bg-white/70 !dark:bg-stone-900", containerBorder), style: {
             position: "relative",
             minWidth: typeof data.renderWidth === "number" ? data.renderWidth : undefined,
@@ -2033,11 +2030,24 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
         }, children: [jsxs("div", { className: "flex items-center justify-center px-2 border-b border-solid border-gray-500 dark:border-gray-400 text-gray-600 dark:text-gray-300", style: {
                     maxHeight: NODE_HEADER_HEIGHT_PX,
                     minHeight: NODE_HEADER_HEIGHT_PX,
-                }, children: [jsx("strong", { className: "flex-1 h-full text-sm", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, children: typeId }), jsxs("div", { className: "flex items-center gap-1", children: [hasError && (jsx("span", { title: String(status.lastError?.message ?? status.lastError), children: jsx(XCircleIcon, { size: 12, weight: "fill", className: "text-red-500" }) })), validation.issues && validation.issues.length > 0 && (jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
+                }, children: [jsx("strong", { className: "flex-1 h-full text-sm", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, children: typeId }), jsxs("div", { className: "flex items-center gap-1", children: [validation.issues && validation.issues.length > 0 && (jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
                                     ? "error"
                                     : "warning", size: 12, className: "w-3 h-3", title: validation.issues
                                     .map((v) => `${v.code}: ${v.message}`)
-                                    .join("; ") })), jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }), jsx("div", { className: cx("h-px", (isRunning || pct > 0) && "bg-blue-200 dark:bg-blue-900"), children: jsx("div", { className: cx("h-px transition-all", (isRunning || pct > 0) && "bg-blue-500"), style: { width: isRunning || pct > 0 ? `${pct}%` : 0 } }) }), jsx(NodeHandles, { data: data, isConnectable: isConnectable, getClassName: ({ kind, id }) => {
+                                    .join("; ") })), jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }), jsx(DefaultNodeContent, { data: data, isConnectable: isConnectable })] }));
+});
+DefaultNode.displayName = "DefaultNode";
+function DefaultNodeContent({ data, isConnectable, }) {
+    const { showValues, inputValues, outputValues, toString } = data;
+    const inputEntries = data.inputHandles ?? [];
+    const outputEntries = data.outputHandles ?? [];
+    const status = data.status ?? { activeRuns: 0 };
+    const validation = data.validation ?? {
+        inputs: [],
+        outputs: []};
+    const isRunning = !!status.activeRuns;
+    const pct = Math.round(Math.max(0, Math.min(1, Number(status.progress) || 0)) * 100);
+    return (jsxs(Fragment, { children: [jsx("div", { className: cx("h-px", (isRunning || pct > 0) && "bg-blue-200 dark:bg-blue-900"), children: jsx("div", { className: cx("h-px transition-all", (isRunning || pct > 0) && "bg-blue-500"), style: { width: isRunning || pct > 0 ? `${pct}%` : 0 } }) }), jsx(NodeHandles, { data: data, isConnectable: isConnectable, getClassName: ({ kind, id }) => {
                     const vIssues = (kind === "input" ? validation.inputs : validation.outputs).filter((v) => v.handle === id);
                     const hasAny = vIssues.length > 0;
                     const hasErr = vIssues.some((v) => v.level === "error");
@@ -2053,7 +2063,6 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                     const title = vIssues
                         .map((v) => `${v.code}: ${v.message}`)
                         .join("; ");
-                    // Compose label with truncated value to prevent layout growth
                     const valueText = (() => {
                         if (!showValues)
                             return undefined;
@@ -2067,8 +2076,7 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                     })();
                     return (jsxs("span", { className: "flex items-center gap-1 w-full", children: [kind === "output" ? (jsxs(Fragment, { children: [valueText !== undefined && (jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText })), jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: id })] })) : (jsxs(Fragment, { children: [jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: id }), valueText !== undefined && (jsx("span", { className: "opacity-60 truncate pr-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText }))] })), hasAny && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
                 } })] }));
-});
-DefaultNode.displayName = "DefaultNode";
+}
 
 function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
     const { registry } = useWorkbenchContext();
@@ -2941,5 +2949,5 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
             }, 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, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, formatDataUrlAsLabel, formatDeclaredTypeSignature, getNodeBorderClassNames, preformatValueForDisplay, resolveOutputDisplay, summarizeDeep, toReactFlow, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
+export { AbstractWorkbench, CLIWorkbench, DefaultNode, DefaultNodeContent, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, formatDataUrlAsLabel, formatDeclaredTypeSignature, getNodeBorderClassNames, preformatValueForDisplay, resolveOutputDisplay, summarizeDeep, toReactFlow, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
 //# sourceMappingURL=index.js.map