@rkmodules/rules 0.0.165 → 0.0.167

package/dist/index.esm.mjs

@@ -1,7 +1,7 @@
 import { create, all } from 'mathjs';
 import { interpolate as interpolate$1 } from '@rkmodules/stringtemplate';
 import React, { createContext, memo, useEffect, useLayoutEffect, useState, useCallback, useMemo, isValidElement, cloneElement, useContext } from 'react';
-import { Handle, Position, useReactFlow, useConnection, getSimpleBezierPath, ReactFlowProvider, useOnSelectionChange, applyNodeChanges, applyEdgeChanges, ReactFlow, Background, BackgroundVariant, Controls } from '@xyflow/react';
+import { Handle, Position, useReactFlow, BezierEdge, useConnection, getSimpleBezierPath, ReactFlowProvider, useOnSelectionChange, applyNodeChanges, applyEdgeChanges, ReactFlow, Background, BackgroundVariant, Controls } from '@xyflow/react';
 import katex from 'katex';
 import classNames from 'classnames';
 import { useInner } from '@rkmodules/use-inner';
@@ -254,9 +254,25 @@ function isEmpty(value) {
         return true;
     return getBranches(value).every(function (branch) { return branch.length === 0; });
 }
+/**
+ * checks whether the tree has only one branch with one item
+ */
 function isSingleTon(value) {
     return (Object.keys(value).length === 1 && Object.values(value)[0].length === 1);
 }
+/**
+ * checks whether the tree has only one branch with multiple items
+ * @param value
+ */
+function isList(value) {
+    return (Object.keys(value).length === 1 && Object.values(value)[0].length > 1);
+}
+/**
+ * checks whether the tree has multiple branches
+ */
+function isMultiBranch(value) {
+    return Object.keys(value).length > 1;
+}
 /**
  * turns a value or array of values into a tree
  * - a single value becomes a tree with one branch "0" and one item
@@ -3172,6 +3188,7 @@ var Engine = /** @class */ (function () {
         this.listeners = {};
         this.cache = {};
         this.cacheMiss = Symbol("cacheMiss");
+        this.context = null;
         this.fnIndex = __assign(__assign({}, primitives), morePrimitives);
         this.env = env;
     }
@@ -3292,6 +3309,7 @@ var Engine = /** @class */ (function () {
                         };
                         // fire event
                         this.fireEvent("result", response);
+                        this.context = context;
                         // console.log("Engine run done", result, context, endTime - startTime);
                         return [2 /*return*/, response];
                 }
@@ -3371,6 +3389,9 @@ var Engine = /** @class */ (function () {
             _this.run(node);
         });
     };
+    Engine.prototype.getContext = function () {
+        return this.context;
+    };
     Engine.prototype.subscribe = function (eventName, listener) {
         var _this = this;
         if (!this.listeners[eventName]) {
@@ -3481,11 +3502,15 @@ var Engine = /** @class */ (function () {
         return newFn;
     };
     Engine.prototype.applyEdgeDelete = function (oldFn, fromNode, toNode, fromField, toField) {
-        var _a;
-        var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body) });
+        var _a, _b;
+        var newFn = __assign(__assign({}, oldFn), { body: __assign({}, oldFn.body), outputs: __assign({}, oldFn.outputs) });
         if (toNode === "output") {
-            // no deleting of output edges
-            return oldFn;
+            // deleting of output edges
+            if ((_a = newFn.outputs) === null || _a === void 0 ? void 0 : _a[toField]) {
+                // set to empty to prevent port from being removed, as that would cause the output node to be deleted
+                newFn.outputs[toField] = "";
+            }
+            return newFn;
         }
         var to = newFn.body[toNode];
         var fn = this.fnIndex[to === null || to === void 0 ? void 0 : to.name];
@@ -3501,7 +3526,7 @@ var Engine = /** @class */ (function () {
             // delete the incoming edge
             delete to.inputs[toField];
             // revert to default value if exists
-            if ((_a = fn.inputs) === null || _a === void 0 ? void 0 : _a[toField]) {
+            if ((_b = fn.inputs) === null || _b === void 0 ? void 0 : _b[toField]) {
                 var normDef = normalizeVarDef(fn.inputs[toField]);
                 if (normDef.default !== undefined) {
                     to.inputs[toField] = getDefault(normDef, to.inputs);
@@ -6409,7 +6434,7 @@ var InputBoolean = React.memo(function (_a) {
     var inputRef = React.useRef(null);
     React.useEffect(function () {
         if (allowEmpty && inputRef.current) {
-            console.log("setting indeterminate");
+            // console.log("setting indeterminate");
             inputRef.current.indeterminate = value === undefined;
         }
     }, [value]);
@@ -6417,7 +6442,7 @@ var InputBoolean = React.memo(function (_a) {
         var next = !value;
         if (value === false && allowEmpty)
             next = undefined;
-        console.log("setting next", next);
+        // console.log("setting next", next);
         onChange === null || onChange === void 0 ? void 0 : onChange(next);
     };
     return (React.createElement("input", { ref: inputRef, type: "checkbox", checked: Boolean(value), onChange: handleChange }));
@@ -6454,7 +6479,7 @@ var InputSelect = React.memo(function (_a) {
         })));
 });
 
-var styles$1 = {"Port":"Port_XWl7K","required":"required_ofB6J","Icon":"Icon_YJDC5","PortLabel":"PortLabel_wwLN0","Input":"Input_PHp3D","Output":"Output_FMRNv","ConnectionPath":"ConnectionPath_XkXr1","valid":"valid_LGNvc","Edge":"Edge_aNtpH","Hover":"Hover_1v8QT","Menu":"Menu_cusza","MenuCanvas":"MenuCanvas_3M2Ek","MenuItem":"MenuItem_UWLzD"};
+var styles$2 = {"Port":"Port_XWl7K","required":"required_ofB6J","Icon":"Icon_YJDC5","PortLabel":"PortLabel_wwLN0","Input":"Input_PHp3D","Output":"Output_FMRNv","ConnectionPath":"ConnectionPath_XkXr1","valid":"valid_LGNvc","Edge":"Edge_aNtpH","Hover":"Hover_1v8QT","Menu":"Menu_cusza","MenuCanvas":"MenuCanvas_3M2Ek","MenuItem":"MenuItem_UWLzD"};
 
 function Control(_a) {
     var _b;
@@ -6482,7 +6507,7 @@ function Control(_a) {
         case "boolean":
             return (React.createElement(InputBoolean, { value: value, onChange: onChange, allowEmpty: vardef.allowEmpty }));
         default:
-            return React.createElement("span", { className: styles$1.PortLabel },
+            return React.createElement("span", { className: styles$2.PortLabel },
                 "(",
                 vardef.type,
                 ")");
@@ -6498,13 +6523,13 @@ function Menu(_a) {
     var handleClose = function () {
         setOpen(false);
     };
-    return (React.createElement("div", { className: styles$1.Menu },
+    return (React.createElement("div", { className: styles$2.Menu },
         React.createElement("div", { onClick: handleOpen }, handle),
-        open && (React.createElement("div", { className: styles$1.MenuCanvas, onClick: handleClose }, children))));
+        open && (React.createElement("div", { className: styles$2.MenuCanvas, onClick: handleClose }, children))));
 }
 function MenuItem(_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (React.createElement("div", __assign({ className: styles$1.MenuItem }, props), children));
+    return (React.createElement("div", __assign({ className: styles$2.MenuItem }, props), children));
 }
 
 var Input = function (_a) {
@@ -6521,10 +6546,10 @@ var Input = function (_a) {
             inputs: __assign(__assign({}, data.inputs), (_a = {}, _a[param] = value, _a)),
         });
     }; };
-    return (React.createElement(Handle, { type: "target", position: Position.Left, id: portId, className: classNames(styles$1.Input, styles$1.Port, styles$1["type-".concat(normalized.type)]), style: {
+    return (React.createElement(Handle, { type: "target", position: Position.Left, id: portId, className: classNames(styles$2.Input, styles$2.Port, styles$2["type-".concat(normalized.type)]), style: {
             "--type-color": "var(--color-".concat(normalized.type, ")"),
         }, onClick: onClick },
-        React.createElement("span", { className: styles$1.PortLabel }, normalized.label || name),
+        React.createElement("span", { className: styles$2.PortLabel }, normalized.label || name),
         !isRef && !showMenu && (React.createElement(Control, { vardef: normalized, value: value, onChange: handleInputChange(name), data: data })),
         showMenu && (React.createElement("div", { style: { display: "flex" } },
             React.createElement("span", { style: { flex: 1 } }),
@@ -6545,10 +6570,10 @@ var Param = function (_a) {
             params: __assign(__assign({}, data.params), (_a = {}, _a[param] = value, _a)),
         });
     }; };
-    return (React.createElement("div", { className: classNames(styles$1.Param, styles$1.Port, styles$1["type-".concat(normalized.type)]), style: {
+    return (React.createElement("div", { className: classNames(styles$2.Param, styles$2.Port, styles$2["type-".concat(normalized.type)]), style: {
             "--type-color": "var(--color-".concat(normalized.type, ")"),
         }, onClick: onClick },
-        React.createElement("span", { className: styles$1.PortLabel }, normalized.label || name),
+        React.createElement("span", { className: styles$2.PortLabel }, normalized.label || name),
         !isRef && (React.createElement(Control, { vardef: normalized, value: value, onChange: handleParamChange(name), data: data }))));
 };
 
@@ -6556,15 +6581,15 @@ var Output = function (_a) {
     var name = _a.name, varDef = _a.varDef, id = _a.id, onClick = _a.onClick, focus = _a.focus;
     var normalized = normalizeVarDef(varDef);
     var portId = "".concat(id, "-").concat(safeName(name));
-    return (React.createElement(Handle, { type: "source", position: Position.Right, id: portId, className: classNames(styles$1.Output, styles$1.Port, styles$1["type-".concat(normalized.type)]), style: {
+    return (React.createElement(Handle, { type: "source", position: Position.Right, id: portId, className: classNames(styles$2.Output, styles$2.Port, styles$2["type-".concat(normalized.type)]), style: {
             "--type-color": "var(--color-".concat(normalized.type, ")"),
         }, onClick: onClick },
-        React.createElement("span", { className: styles$1.PortLabel },
+        React.createElement("span", { className: styles$2.PortLabel },
             focus && "👁 ",
             normalized.label || name)));
 };
 
-var styles = {"NodeContainer":"NodeContainer_gSdHY","selected":"selected_VmB-F","active":"active_zjUzx","Log":"Log_dsq5e","Label":"Label_wBwWA","Description":"Description_f9s4l","Ports":"Ports_fVs5I","Body":"Body_ptEZP","PreviewHead":"PreviewHead_oFT4K","expanded":"expanded_3vnbi","Preview":"Preview_HbkZ6","Duration":"Duration_0jqWx","GroupHead":"GroupHead_QJhST","GroupName":"GroupName_Qvu4r","GroupCnt":"GroupCnt_3ctdd","GroupMore":"GroupMore_D1Kiz","GroupChildren":"GroupChildren_NKx-B","GroupLeaf":"GroupLeaf_eliT8"};
+var styles$1 = {"NodeContainer":"NodeContainer_gSdHY","selected":"selected_VmB-F","active":"active_zjUzx","Log":"Log_dsq5e","Label":"Label_wBwWA","Description":"Description_f9s4l","Ports":"Ports_fVs5I","Body":"Body_ptEZP","PreviewHead":"PreviewHead_oFT4K","expanded":"expanded_3vnbi","Preview":"Preview_HbkZ6","Duration":"Duration_0jqWx","GroupHead":"GroupHead_QJhST","GroupName":"GroupName_Qvu4r","GroupCnt":"GroupCnt_3ctdd","GroupMore":"GroupMore_D1Kiz","GroupChildren":"GroupChildren_NKx-B","GroupLeaf":"GroupLeaf_eliT8"};
 
 function NodeContainer(_a) {
     var _b;
@@ -6606,14 +6631,14 @@ function NodeContainer(_a) {
     var handleDelete = function () {
         instance.deleteElements({ nodes: [{ id: id }] });
     };
-    return (React.createElement("div", { className: classNames(className, styles.NodeContainer, (_b = {},
-            _b[styles.selected] = selected,
-            _b[styles.active] = active,
+    return (React.createElement("div", { className: classNames(className, styles$1.NodeContainer, (_b = {},
+            _b[styles$1.selected] = selected,
+            _b[styles$1.active] = active,
             _b)) },
-        React.createElement("div", __assign({ className: styles.Label }, handlers()),
+        React.createElement("div", __assign({ className: styles$1.Label }, handlers()),
             React.createElement("span", null),
             label,
-            React.createElement("span", null, deleteMode && (React.createElement("button", { className: styles.DeleteButton, onClick: handleDelete }, "\u2715")))),
+            React.createElement("span", null, deleteMode && (React.createElement("button", { className: styles$1.DeleteButton, onClick: handleDelete }, "\u2715")))),
         children));
 }
 
@@ -6646,15 +6671,15 @@ function TreeBranchView(_a) {
     var subCnt = branch.children.length || ((_c = branch.items) === null || _c === void 0 ? void 0 : _c.length) || 0;
     var maxCnt = 10;
     return (React.createElement("div", null,
-        React.createElement("div", { className: classNames((_b = {}, _b[styles.expanded] = expanded, _b), styles.GroupHead), onClick: function () { return setExpanded(!expanded); } },
-            React.createElement("div", { className: styles.GroupName },
+        React.createElement("div", { className: classNames((_b = {}, _b[styles$1.expanded] = expanded, _b), styles$1.GroupHead), onClick: function () { return setExpanded(!expanded); } },
+            React.createElement("div", { className: styles$1.GroupName },
                 "group ",
                 branch.name),
-            React.createElement("div", { className: styles.GroupCnt },
+            React.createElement("div", { className: styles$1.GroupCnt },
                 "(",
                 subCnt,
                 ")")),
-        expanded && (React.createElement("div", { className: styles.GroupChildren },
+        expanded && (React.createElement("div", { className: styles$1.GroupChildren },
             !isLeaf &&
                 branch.children.map(function (subgroup, index) {
                     // sub branch
@@ -6669,9 +6694,9 @@ function TreeBranchView(_a) {
                         label = "{...}";
                     }
                     return (React.createElement("div", { key: index },
-                        React.createElement("div", { className: styles.GroupLeaf, title: JSON.stringify(item, null, 2) }, label)));
+                        React.createElement("div", { className: styles$1.GroupLeaf, title: JSON.stringify(item, null, 2) }, label)));
                 }),
-                branch.items && branch.items.length > maxCnt && (React.createElement("div", { className: styles.GroupMore },
+                branch.items && branch.items.length > maxCnt && (React.createElement("div", { className: styles$1.GroupMore },
                     "... ",
                     branch.items.length - maxCnt,
                     " more"))))))));
@@ -6693,7 +6718,7 @@ var Log = React.memo(function (_a) {
             }
         });
     }, []);
-    return (React.createElement(NodeContainer, { id: id, label: data.name, selected: selected, className: styles.Log },
+    return (React.createElement(NodeContainer, { id: id, label: data.name, selected: selected, className: styles$1.Log },
         React.createElement(TreeView, { value: value }),
         React.createElement(Handle, { type: "target", position: Position.Left, id: "".concat(id, "-data") }),
         React.createElement(Handle, { type: "source", position: Position.Right, id: "".concat(id, "-data") })));
@@ -6723,9 +6748,9 @@ function GenericNode(_a) {
         });
     }, []);
     return (React.createElement(NodeContainer, { label: data.label, selected: selected, id: id },
-        React.createElement("div", { className: styles.Description }, data.description),
+        React.createElement("div", { className: styles$1.Description }, data.description),
         children,
-        React.createElement("div", { className: styles.Ports },
+        React.createElement("div", { className: styles$1.Ports },
             outputEntries.map(function (_a, index) {
                 var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
                 return (React.createElement(Output, { key: "".concat(name, "_").concat(index), name: name, varDef: varDef, id: id, onClick: function () { return setFocus(name); }, focus: showPreview && focus === name }));
@@ -6738,12 +6763,12 @@ function GenericNode(_a) {
                 var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
                 return (React.createElement(Param, { key: "".concat(name, "_").concat(index), name: name, varDef: varDef, id: id, data: data }));
             })),
-        !!outputEntries.length && (React.createElement("div", { className: classNames(styles.PreviewHead, (_b = {},
-                _b[styles.expanded] = showPreview,
+        !!outputEntries.length && (React.createElement("div", { className: classNames(styles$1.PreviewHead, (_b = {},
+                _b[styles$1.expanded] = showPreview,
                 _b)), onClick: function () { return setShowPreview(!showPreview); } }, "Preview")),
-        showPreview && (React.createElement("div", { className: styles.Preview },
+        showPreview && (React.createElement("div", { className: styles$1.Preview },
             React.createElement(TreeView, { value: previewValue }),
-            duration !== null && (React.createElement("div", { className: styles.Duration },
+            duration !== null && (React.createElement("div", { className: styles$1.Duration },
                 duration.toFixed(2),
                 " ms"))))));
 }
@@ -6783,11 +6808,11 @@ var Calc = React.memo(function (_a) {
 });
 Calc.displayName = "CalcNode";
 
-var Default = React.memo(function (_a) {
+var Default$1 = React.memo(function (_a) {
     var id = _a.id, data = _a.data, selected = _a.selected;
     return React.createElement(GenericNode, { id: id, data: data, selected: selected });
 });
-Default.displayName = "DefaultNode";
+Default$1.displayName = "DefaultNode";
 
 /**
  * todo: get input data from graphed function
@@ -6895,15 +6920,15 @@ var InputNode = React.memo(function (_a) {
         });
     }); };
     return (React.createElement(NodeContainer, { label: data.label, selected: selected, id: id, noDelete: true },
-        React.createElement("div", { className: styles.Description }, data.description),
-        React.createElement("div", { className: styles.Ports },
+        React.createElement("div", { className: styles$1.Description }, data.description),
+        React.createElement("div", { className: styles$1.Ports },
             outputEntries.map(function (_a, index) {
                 var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
                 return (React.createElement(Output, { key: "".concat(name, "_").concat(index), name: name, varDef: varDef, id: id }));
             }),
             Object.entries(outputs || {}).map(function (_a) {
                 var _b = __read(_a, 2), name = _b[0], normalized = _b[1];
-                return (React.createElement(Handle, { key: name, type: "source", position: Position.Right, id: "".concat(id, "-").concat(name), className: classNames(styles$1.Output, styles$1.Port, styles$1["type-".concat(normalized.type)]), style: {
+                return (React.createElement(Handle, { key: name, type: "source", position: Position.Right, id: "".concat(id, "-").concat(name), className: classNames(styles$2.Output, styles$2.Port, styles$2["type-".concat(normalized.type)]), style: {
                         "--type-color": "var(--color-".concat(normalized.type, ")"),
                         gridColumn: "1/3",
                     } },
@@ -6914,9 +6939,9 @@ var InputNode = React.memo(function (_a) {
                         React.createElement(MenuItem, { onClick: function () { return onDelete(name); } }, "Delete"),
                         React.createElement(MenuItem, { onClick: function () { return onDefault(name); } }, "Set Default"),
                         React.createElement(MenuItem, { onClick: function () { return onType(name); } }, "Set Type")),
-                    React.createElement("span", { className: styles$1.PortLabel }, normalized.label || name)));
+                    React.createElement("span", { className: styles$2.PortLabel }, normalized.label || name)));
             })),
-        React.createElement("div", { className: styles.Body },
+        React.createElement("div", { className: styles$1.Body },
             React.createElement("button", { onClick: function () { return onAdd(); } }, "+"))));
 });
 InputNode.displayName = "InputNode";
@@ -7052,8 +7077,8 @@ var OutputNode = React.memo(function (_a) {
         });
     };
     return (React.createElement(NodeContainer, { label: data.label, selected: selected, id: id, noDelete: true },
-        React.createElement("div", { className: styles.Description }, data.description),
-        React.createElement("div", { className: styles.Ports },
+        React.createElement("div", { className: styles$1.Description }, data.description),
+        React.createElement("div", { className: styles$1.Ports },
             outputEntries.map(function (_a, index) {
                 var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
                 return (React.createElement(Output, { key: "".concat(name, "_").concat(index), name: name, varDef: varDef, id: id, onClick: function () { return setFocus(name); }, focus: showPreview && focus === name }));
@@ -7066,14 +7091,14 @@ var OutputNode = React.memo(function (_a) {
                 var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
                 return (React.createElement(Param, { key: "".concat(name, "_").concat(index), name: name, varDef: varDef, id: id, data: data }));
             })),
-        React.createElement("div", { className: styles.Body },
+        React.createElement("div", { className: styles$1.Body },
             React.createElement("button", { onClick: function () { return onAdd(); } }, "+")),
-        !!outputEntries.length && (React.createElement("div", { className: classNames(styles.PreviewHead, (_b = {},
-                _b[styles.expanded] = showPreview,
+        !!outputEntries.length && (React.createElement("div", { className: classNames(styles$1.PreviewHead, (_b = {},
+                _b[styles$1.expanded] = showPreview,
                 _b)), onClick: function () { return setShowPreview(!showPreview); } }, "Preview")),
-        showPreview && (React.createElement("div", { className: styles.Preview },
+        showPreview && (React.createElement("div", { className: styles$1.Preview },
             React.createElement(TreeView, { value: previewValue }),
-            duration !== null && (React.createElement("div", { className: styles.Duration },
+            duration !== null && (React.createElement("div", { className: styles$1.Duration },
                 duration.toFixed(2),
                 " ms"))))));
 });
@@ -7081,13 +7106,16 @@ OutputNode.displayName = "OutputNode";
 
 var DynamicOutput = React.memo(function (_a) {
     var id = _a.id, data = _a.data, selected = _a.selected;
-    var outputDefs = data.outputDefs || {};
-    Object.keys(data.outputs || {}).forEach(function (key) {
-        if (!outputDefs[key]) {
-            outputDefs[key] = { type: "any", label: key };
-        }
-    });
-    var _b = __read(React.useState(outputDefs), 2), outputs = _b[0], setOutputs = _b[1];
+    var outputDefs = React.useMemo(function () {
+        var outputDefs = __assign({}, (data.outputDefs || {}));
+        Object.keys(data.outputs || {}).forEach(function (key) {
+            if (!outputDefs[key]) {
+                outputDefs[key] = { type: "any", label: key };
+            }
+        });
+        return outputDefs;
+    }, [data.outputDefs, data.outputs]);
+    var _b = __read(React.useState({}), 2), outputs = _b[0], setOutputs = _b[1];
     var engine = useEngine();
     React.useEffect(function () {
         return engine.subscribe("functionResult", function (event) {
@@ -7096,10 +7124,10 @@ var DynamicOutput = React.memo(function (_a) {
                 setOutputs(mergeWithOrder(Object.fromEntries(Object.keys(result).map(function (name, i) { return [
                     name,
                     { type: "any", label: name },
-                ]; })), outputs));
+                ]; })), outputDefs));
             }
         });
-    }, []);
+    }, [outputDefs]);
     return (React.createElement(GenericNode, { outputs: outputs, id: id, data: data, selected: selected }));
 });
 DynamicOutput.displayName = "DynamicOutputNode";
@@ -7169,8 +7197,8 @@ var NamedInput = function (_a) {
         data.onChange({ inputs: inputs, inputDefs: inputDefs });
     };
     return (React.createElement(NodeContainer, { label: data.label, selected: selected, id: id, noDelete: true },
-        React.createElement("div", { className: styles.Description }, data.description),
-        React.createElement("div", { className: styles.Ports },
+        React.createElement("div", { className: styles$1.Description }, data.description),
+        React.createElement("div", { className: styles$1.Ports },
             outputEntries.map(function (_a, index) {
                 var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
                 return (React.createElement(Output, { key: "".concat(name, "_").concat(index), name: name, varDef: varDef, id: id, onClick: function () { return setFocus(name); }, focus: showPreview && focus === name }));
@@ -7180,25 +7208,26 @@ var NamedInput = function (_a) {
                 var menu = !fixedInputs.has(name);
                 return (React.createElement(Input, { key: "".concat(name, "_").concat(index), name: name, varDef: varDef, id: id, data: data, onRename: menu ? onRename : undefined, onDelete: menu ? onDelete : undefined }));
             }),
-            React.createElement("div", { className: styles.Body },
+            React.createElement("div", { className: styles$1.Body },
                 React.createElement("button", { onClick: function () { return onAdd(); } }, "+")),
             paramEntries.map(function (_a, index) {
                 var _b = __read(_a, 2), name = _b[0], varDef = _b[1];
                 return (React.createElement(Param, { key: "".concat(name, "_").concat(index), name: name, varDef: varDef, id: id, data: data }));
             })),
-        !!outputEntries.length && (React.createElement("div", { className: classNames(styles.PreviewHead, (_b = {},
-                _b[styles.expanded] = showPreview,
+        !!outputEntries.length && (React.createElement("div", { className: classNames(styles$1.PreviewHead, (_b = {},
+                _b[styles$1.expanded] = showPreview,
                 _b)), onClick: function () { return setShowPreview(!showPreview); } }, "Preview")),
-        showPreview && (React.createElement("div", { className: styles.Preview },
+        showPreview && (React.createElement("div", { className: styles$1.Preview },
             React.createElement(TreeView, { value: previewValue }),
-            duration !== null && (React.createElement("div", { className: styles.Duration },
+            duration !== null && (React.createElement("div", { className: styles$1.Duration },
                 duration.toFixed(2),
                 " ms"))))));
 };
 NamedInput.displayName = "NamedInput";
 
 var nodeTypes = {
-    Default: Default,
+    default: Default$1,
+    Default: Default$1,
     Calc: Calc,
     Log: Log,
     DynamicInput: DynamicInput,
@@ -7208,6 +7237,101 @@ var nodeTypes = {
     Output: OutputNode,
 };
 
+function useNodeResult(id) {
+    var _a, _b;
+    var engine = useEngine();
+    var scope = ((_b = (_a = engine.getContext()) === null || _a === void 0 ? void 0 : _a.scope) === null || _b === void 0 ? void 0 : _b[id]) || {};
+    var _c = __read(React.useState(scope || {}), 2), result = _c[0], setResult = _c[1];
+    React.useEffect(function () {
+        return engine.subscribe("functionResult", function (event) {
+            if (event.name === id) {
+                setResult(event.result || {});
+            }
+        });
+    }, [id, engine]);
+    return result;
+}
+
+var styles = {
+    empty: {
+        stroke: "var(--edge-empty-color, crimson)",
+    },
+    single: {
+        strokeWidth: 1,
+    },
+    listBack: {
+        strokeWidth: 4,
+    },
+    listFront: {
+        stroke: "var(--canvas-background)",
+        strokeWidth: 2,
+    },
+    multiBack: {
+        strokeWidth: 4,
+        strokeDasharray: "10,3",
+    },
+    multiFront: {
+        stroke: "var(--canvas-background)",
+        strokeWidth: 2,
+        strokeDasharray: "8,5",
+        strokeDashoffset: -1,
+    },
+};
+var Default = React.memo(function (_a) {
+    var _b, _c;
+    var props = __rest(_a, []);
+    var data = useNodeResult(props.source);
+    var flow = useReactFlow();
+    var src = flow.getInternalNode(props.source);
+    if ((src === null || src === void 0 ? void 0 : src.type) === "DynamicOutput") {
+        /**
+         * fix for dynamic output nodes. As connection order can change,
+         * the position of the handles is not updated internally with react-flow
+         * so we need to get the position of the handle and update the
+         * source position manually.
+         */
+        var el = document.querySelector("[data-handleid=\"".concat(props.sourceHandleId, "\"]"));
+        var bbox = el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
+        if (bbox) {
+            var pos = flow.screenToFlowPosition({
+                x: (bbox === null || bbox === void 0 ? void 0 : bbox.x) + (bbox === null || bbox === void 0 ? void 0 : bbox.width),
+                y: (bbox === null || bbox === void 0 ? void 0 : bbox.y) + (bbox === null || bbox === void 0 ? void 0 : bbox.height) / 2,
+            });
+            props.sourceX = (_b = pos === null || pos === void 0 ? void 0 : pos.x) !== null && _b !== void 0 ? _b : props.sourceX;
+            props.sourceY = (_c = pos === null || pos === void 0 ? void 0 : pos.y) !== null && _c !== void 0 ? _c : props.sourceY;
+        }
+    }
+    if (props.sourceHandleId) {
+        var field = deRefEdgeHandle(props.sourceHandleId).field;
+        var value = data[field];
+        if (value) {
+            if (isEmpty(value)) {
+                return React.createElement(BezierEdge, __assign({}, props, { style: styles.empty }));
+            }
+            else if (isList(value)) {
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(BezierEdge, __assign({}, props, { style: styles.listBack })),
+                    ";",
+                    React.createElement(BezierEdge, __assign({}, props, { style: styles.listFront })),
+                    ";"));
+            }
+            else if (isMultiBranch(value)) {
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(BezierEdge, __assign({}, props, { style: styles.multiBack })),
+                    ";",
+                    React.createElement(BezierEdge, __assign({}, props, { style: styles.multiFront })),
+                    ";"));
+            }
+        }
+    }
+    return React.createElement(BezierEdge, __assign({}, props, { style: styles.single }));
+});
+Default.displayName = "DefaultEdge";
+
+var edgeTypes = {
+    default: Default,
+};
+
 var variableStore = create$1(function (set, get, api) {
     return persist(function (pset, pget) { return ({
         data: {},
@@ -7338,6 +7462,7 @@ function createNode(engine, id, fncall, options) {
 }
 function createEdge(nodeId, ref) {
     return {
+        type: "default",
         id: "".concat(ref.path, "-").concat(nodeId, ".").concat(ref.name),
         source: ref.refNode,
         target: nodeId,
@@ -7527,7 +7652,7 @@ var ConnectionLine = (function (_a) {
         sourcePosition: Position.Right,
         targetPosition: Position.Left,
     });
-    return (React.createElement("g", { className: classNames(styles$1.ConnectionPath, "react-flow__connection-path", (_b = {}, _b[styles$1.valid] = connectionStatus === "valid", _b)) },
+    return (React.createElement("g", { className: classNames(styles$2.ConnectionPath, "react-flow__connection-path", (_b = {}, _b[styles$2.valid] = connectionStatus === "valid", _b)) },
         React.createElement("path", { d: d[0] })));
 });
 
@@ -7537,14 +7662,14 @@ var ConnectionLine = (function (_a) {
  */
 var emptyObject = {};
 function FlowInner(_a) {
-    var fn = _a.function, _b = _a.positions, defaultPositions = _b === void 0 ? emptyObject : _b, engine = _a.engine, _c = _a.center, center = _c === void 0 ? true : _c, fitView = _a.fitView, _d = _a.customNodes, customNodes = _d === void 0 ? {} : _d, onChange = _a.onChange, onClick = _a.onClick, onContextMenu = _a.onContextMenu, onMouseMove = _a.onMouseMove, onSelect = _a.onSelect, onInit = _a.onInit;
-    var _e = __read(React.useState(null), 2), instance = _e[0], setInstance = _e[1];
+    var fn = _a.function, _b = _a.positions, defaultPositions = _b === void 0 ? emptyObject : _b, engine = _a.engine, _c = _a.center, center = _c === void 0 ? true : _c, fitView = _a.fitView, _d = _a.customNodes, customNodes = _d === void 0 ? {} : _d, _e = _a.edgeDecoration, edgeDecoration = _e === void 0 ? false : _e, onChange = _a.onChange, onClick = _a.onClick, onContextMenu = _a.onContextMenu, onMouseMove = _a.onMouseMove, onSelect = _a.onSelect, onInit = _a.onInit;
+    var _f = __read(React.useState(null), 2), instance = _f[0], setInstance = _f[1];
     var handleInit = function (instance) {
         setInstance(instance);
         onInit === null || onInit === void 0 ? void 0 : onInit(instance);
     };
     var updatePosition = useUpdatePositions(fn);
-    var _f = __read(usePositions(fn), 2), positions = _f[0], setPositions = _f[1];
+    var _g = __read(usePositions(fn), 2), positions = _g[0], setPositions = _g[1];
     var options = React.useMemo(function () {
         var handleDataChange = function (id) { return function (newData) {
             onChange === null || onChange === void 0 ? void 0 : onChange(function (fn) {
@@ -7565,7 +7690,7 @@ function FlowInner(_a) {
             });
         };
         return {
-            dragHandle: ".".concat(styles.Label),
+            dragHandle: ".".concat(styles$1.Label),
             positions: __assign(__assign({}, positions), defaultPositions),
             onDataChange: handleDataChange,
             onIOChange: handleIOChange,
@@ -7574,7 +7699,7 @@ function FlowInner(_a) {
     React.useEffect(function () {
         setPositions(__assign(__assign({}, positions), defaultPositions));
     }, [defaultPositions]);
-    var _g = useFlow(fn, engine, options), nodes = _g.nodes, edges = _g.edges, setNodes = _g.setNodes, setEdges = _g.setEdges;
+    var _h = useFlow(fn, engine, options), nodes = _h.nodes, edges = _h.edges, setNodes = _h.setNodes, setEdges = _h.setEdges;
     // node selection handler
     var handleSelect = React.useCallback(function (_a) {
         var nodes = _a.nodes;
@@ -7584,7 +7709,7 @@ function FlowInner(_a) {
         onChange: handleSelect,
     });
     // dropping nodes
-    var _h = __read(useDrop({
+    var _j = __read(useDrop({
         accept: "flow-node",
         drop: function (item, monitor) {
             var pos = monitor.getClientOffset();
@@ -7604,9 +7729,13 @@ function FlowInner(_a) {
                 isOver: monitor.isOver(),
             };
         },
-    }), 2); _h[0].isOver; var drop = _h[1];
+    }), 2); _j[0].isOver; var drop = _j[1];
     // connecting nodes
     var onConnect = React.useCallback(function (params) {
+        if (!params.sourceHandle || !params.targetHandle) {
+            console.warn("Invalid connection handles", params);
+            return;
+        }
         var sourceField = deRefEdgeHandle(params.sourceHandle).field;
         var targetField = deRefEdgeHandle(params.targetHandle).field;
         if (!sourceField || !targetField) {
@@ -7628,6 +7757,10 @@ function FlowInner(_a) {
         onChange === null || onChange === void 0 ? void 0 : onChange(function (fn) {
             var newFn = fn;
             edgesToDelete.forEach(function (edge) {
+                if (!edge.sourceHandle || !edge.targetHandle) {
+                    console.warn("Invalid connection handles", edge);
+                    return;
+                }
                 var sourceField = deRefEdgeHandle(edge.sourceHandle).field;
                 var targetField = deRefEdgeHandle(edge.targetHandle).field;
                 if (!sourceField || !targetField) {
@@ -7687,12 +7820,14 @@ function FlowInner(_a) {
             return applyEdgeChanges(changes, edgesSnapshot);
         });
     }, []);
-    return (React.createElement(ReactFlow, { ref: drop, nodes: nodes, edges: edges, nodeTypes: __assign(__assign({}, nodeTypes), customNodes), onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onNodeDragStop: function (e, n) { return updatePosition(n.id, n.position); }, onConnect: onConnect, onInit: handleInit, onPaneClick: handleClick, onPaneContextMenu: handleContextMenu, onPaneMouseMove: handleMouseMove, fitView: center || fitView, fitViewOptions: {
+    return (React.createElement(ReactFlow, { ref: drop, nodes: nodes, edges: edges, nodeTypes: __assign(__assign({}, nodeTypes), customNodes), edgeTypes: edgeDecoration ? edgeTypes : undefined, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onNodeDragStop: function (e, n) { return updatePosition(n.id, n.position); }, onConnect: onConnect, onInit: handleInit, onPaneClick: handleClick, onPaneContextMenu: handleContextMenu, onPaneMouseMove: handleMouseMove, fitView: center || fitView, fitViewOptions: {
             minZoom: fitView ? undefined : 1,
             maxZoom: fitView ? undefined : 1,
         }, 
         // panOnDrag={false}
-        selectionOnDrag: true, minZoom: 0.1, maxZoom: 4, deleteKeyCode: "Delete", connectionLineComponent: ConnectionLine },
+        selectionOnDrag: true, minZoom: 0.1, maxZoom: 4, deleteKeyCode: "Delete", connectionLineComponent: ConnectionLine, style: {
+            backgroundColor: "var(--canvas-background)",
+        } },
         React.createElement(Background, { variant: BackgroundVariant.Dots }),
         React.createElement(Controls, null)));
 }
@@ -8743,5 +8878,5 @@ function DDContext(_a) {
     return React.createElement(DndProvider, { backend: HTML5Backend }, children);
 }
 
-export { DDContext, DISCARD, Engine, Flow, FlowContext, GenericNode, Input, InputBoolean, InputNumber, InputSelect, InputString, InputText, Lib, Output, Param, binaryOnTree, binaryOnTreeBranch, broadCast, deRefEdgeHandle, ensureBranch, expandTree, forEachBranch, forEachItem, getBranch, getBranches, getItem, getPaths, getPositions, getReferences, getValue$1 as getValue, getVariable, graftTree, hasReference, interpolate, isEmpty, isEmptyTree, isReference, isSingleTon, isTree, mapTree, mapTreeBranch, mergeWithOrder, nAryOnTree, nAryOnTreeBranch, normalizePaths, normalizeVarDef, parseReference, primitives, pushItem, safeName, sameShape, simplifyTree$1 as simplifyTree, toArray, topSort, treeSize, treeStats, trimTree, uid$1 as uid, useControls, useDraggableNode, useEngine, useFlow, useFunction, useGraphedFunction, usePositions, usePrompts, useUpdatePositions, useVariable, variableStore };
+export { DDContext, DISCARD, Engine, Flow, FlowContext, GenericNode, Input, InputBoolean, InputNumber, InputSelect, InputString, InputText, Lib, Output, Param, binaryOnTree, binaryOnTreeBranch, broadCast, deRefEdgeHandle, ensureBranch, expandTree, forEachBranch, forEachItem, getBranch, getBranches, getItem, getPaths, getPositions, getReferences, getValue$1 as getValue, getVariable, graftTree, hasReference, interpolate, isEmpty, isEmptyTree, isList, isMultiBranch, isReference, isSingleTon, isTree, mapTree, mapTreeBranch, mergeWithOrder, nAryOnTree, nAryOnTreeBranch, normalizePaths, normalizeVarDef, parseReference, primitives, pushItem, safeName, sameShape, simplifyTree$1 as simplifyTree, toArray, topSort, treeSize, treeStats, trimTree, uid$1 as uid, useControls, useDraggableNode, useEngine, useFlow, useFunction, useGraphedFunction, usePositions, usePrompts, useUpdatePositions, useVariable, variableStore };
 //# sourceMappingURL=index.esm.mjs.map