@rkmodules/rules 0.0.176 → 0.0.178

package/dist/index.esm.css

@@ -98,6 +98,7 @@
     top: 100%;
     right: 0;
     background-color: var(--bg);
+    z-index: 9999;
 }
 .MenuItem_UWLzD {
     padding: 4px 8px;

package/dist/index.esm.mjs

@@ -7,8 +7,9 @@ import classNames from 'classnames';
 import { useInner } from '@rkmodules/use-inner';
 import rcin from 'rc-input-number';
 import { useLongPress } from 'use-long-press';
-import { create as create$1 } from 'zustand';
+import { create as create$1, useStore } from 'zustand';
 import { persist } from 'zustand/middleware';
+import { createStore as createStore$1 } from 'zustand/vanilla';
 import { jsx } from 'react/jsx-runtime';
 
 /******************************************************************************
@@ -3867,6 +3868,7 @@ var Engine = /** @class */ (function () {
         // register the primitive
         this.fnIndex[primitive.name] = primitive;
         this.graphDefinitions.set(primitive, node);
+        this.fireEvent("functionBuilt", { name: primitive.name, fn: primitive });
         return primitive;
     };
     Engine.prototype.mount = function (node, inputs, options) {
@@ -7060,6 +7062,19 @@ function Menu(_a) {
     var handleClose = function () {
         setOpen(false);
     };
+    React.useEffect(function () {
+        if (!open)
+            return;
+        var handleClickOutside = function (event) {
+            if (!event.target.closest(".".concat(styles$2.MenuCanvas))) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("click", handleClickOutside);
+        return function () {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [open]);
     return (React.createElement("div", { className: styles$2.Menu },
         React.createElement("div", { onClick: handleOpen }, handle),
         open && (React.createElement("div", { className: styles$2.MenuCanvas, onClick: handleClose }, children))));
@@ -8005,7 +8020,7 @@ function addOutputToNode(nodes, ref, targetId) {
  * flow state stores nodes and edges for the flow graph these can be updated when the function changes
  * using setFn
  */
-var useFlowState = create$1(function (set, get) { return ({
+var createFlowStore = function () { return createStore$1(function (set, get) { return ({
     engine: null,
     fn: null,
     options: {},
@@ -8121,25 +8136,48 @@ var useFlowState = create$1(function (set, get) { return ({
         });
         // console.log("final graph", nodes, edges);
         // update the function, nodes and edges
-        set({ fn: fn, nodes: nodes, edges: edges });
+        set({ fn: fn, nodes: nodes, edges: edges, options: options });
+    },
+    refreshFunctions: function (name) {
+        var _a = get(), fn = _a.fn, engine = _a.engine, options = _a.options, nodes = _a.nodes;
+        if (!fn || !engine)
+            return;
+        var matching = Object.entries(fn.body || {}).filter(function (_a) {
+            var _b = __read(_a, 2), id = _b[0], call = _b[1];
+            return nodes[id] && (name === undefined || call.name === name);
+        });
+        if (!matching.length)
+            return;
+        var nextNodes = __assign({}, nodes);
+        matching.forEach(function (_a) {
+            var _b = __read(_a, 2), id = _b[0], call = _b[1];
+            var node = nodes[id];
+            var refreshed = createNode(engine, id, call, options);
+            nextNodes[id] = __assign(__assign({}, node), { type: refreshed.type, dragHandle: refreshed.dragHandle, data: __assign(__assign({}, refreshed.data), { outputs: node.data.outputs }) });
+        });
+        set({ nodes: nextNodes });
     },
     init: function (fn, engine, options) {
         // console.log("initing");
         set({ engine: engine, options: options });
         get().setFn(fn, options);
+        // Reconcile builds that happened before the effect subscribed.
+        get().refreshFunctions();
     },
-}); });
-/**
- * creates a flow state and provides handlers to update nodes and edges
- */
+}); }); };
+
+/** Creates isolated editor state and observes definitions used by its nodes. */
 function useFlow(fn, engine, options) {
-    var state = useFlowState();
+    var store = React.useMemo(function () { return createFlowStore(); }, [engine]);
+    var state = useStore(store);
     React.useEffect(function () {
-        state.init(fn, engine, options);
-    }, [engine]);
-    React.useEffect(function () {
-        state.setFn(fn, options);
-    }, [fn, options]);
+        var unsubscribe = engine.subscribe("functionBuilt", function (_a) {
+            var name = _a.name;
+            store.getState().refreshFunctions(name);
+        });
+        store.getState().init(fn, engine, options);
+        return unsubscribe;
+    }, [store, engine, fn, options]);
     return React.useMemo(function () { return ({
         nodes: Object.values(state.nodes),
         edges: state.edges,