@bian-womp/spark-workbench 0.2.5 → 0.2.6

package/lib/cjs/index.cjs

@@ -6,8 +6,8 @@ var React = require('react');
 var react = require('@xyflow/react');
 var jsxRuntime = require('react/jsx-runtime');
 var react$1 = require('@phosphor-icons/react');
-var isEqual = require('lodash/isEqual');
 var cx = require('classnames');
+var isEqual = require('lodash/isEqual');
 
 class DefaultUIExtensionRegistry {
     constructor() {
@@ -1989,7 +1989,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 (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: h.id, type: "source", position: position, isConnectable: isConnectable, className: cls, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: labelClassName + " right-2", style: {
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: h.id, type: "source", position: position, isConnectable: isConnectable, className: `${cls} wb-nodrag wb-nowheel`, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: labelClassName + " right-2", style: {
                                 top: (y ?? 0) - 8,
                                 left: "50%",
                                 textAlign: "right",
@@ -2002,7 +2002,7 @@ function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray
 
 const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConnectable, }) {
     const updateNodeInternals = react.useUpdateNodeInternals();
-    const { typeId, showValues, inputValues, outputValues, toString } = data;
+    const { typeId, showValues } = data;
     const inputEntries = data.inputHandles ?? [];
     const outputEntries = data.outputHandles ?? [];
     React.useEffect(() => {
@@ -2020,14 +2020,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 (jsxRuntime.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,
@@ -2035,11 +2032,24 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
         }, children: [jsxRuntime.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: [jsxRuntime.jsx("strong", { className: "flex-1 h-full text-sm", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, children: typeId }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [hasError && (jsxRuntime.jsx("span", { title: String(status.lastError?.message ?? status.lastError), children: jsxRuntime.jsx(react$1.XCircleIcon, { size: 12, weight: "fill", className: "text-red-500" }) })), validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
+                }, children: [jsxRuntime.jsx("strong", { className: "flex-1 h-full text-sm", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, children: typeId }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [validation.issues && validation.issues.length > 0 && (jsxRuntime.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("; ") })), jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }), jsxRuntime.jsx("div", { className: cx("h-px", (isRunning || pct > 0) && "bg-blue-200 dark:bg-blue-900"), children: jsxRuntime.jsx("div", { className: cx("h-px transition-all", (isRunning || pct > 0) && "bg-blue-500"), style: { width: isRunning || pct > 0 ? `${pct}%` : 0 } }) }), jsxRuntime.jsx(NodeHandles, { data: data, isConnectable: isConnectable, getClassName: ({ kind, id }) => {
+                                    .join("; ") })), jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }), jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cx("h-px", (isRunning || pct > 0) && "bg-blue-200 dark:bg-blue-900"), children: jsxRuntime.jsx("div", { className: cx("h-px transition-all", (isRunning || pct > 0) && "bg-blue-500"), style: { width: isRunning || pct > 0 ? `${pct}%` : 0 } }) }), jsxRuntime.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");
@@ -2055,7 +2065,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;
@@ -2069,8 +2078,7 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                     })();
                     return (jsxRuntime.jsxs("span", { className: "flex items-center gap-1 w-full", children: [kind === "output" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [valueText !== undefined && (jsxRuntime.jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText })), jsxRuntime.jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: id })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: id }), valueText !== undefined && (jsxRuntime.jsx("span", { className: "opacity-60 truncate pr-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText }))] })), hasAny && (jsxRuntime.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();
@@ -2945,6 +2953,8 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
 
 exports.AbstractWorkbench = AbstractWorkbench;
 exports.CLIWorkbench = CLIWorkbench;
+exports.DefaultNode = DefaultNode;
+exports.DefaultNodeContent = DefaultNodeContent;
 exports.DefaultUIExtensionRegistry = DefaultUIExtensionRegistry;
 exports.InMemoryWorkbench = InMemoryWorkbench;
 exports.Inspector = Inspector;