@babsey/code-graph 0.0.13 → 0.0.15

package/dist/code-graph.js

@@ -1,11 +1,11 @@
-import { AbstractNode as Le, NodeInterface as Ge, ButtonInterfaceComponent as Ue, CheckboxInterfaceComponent as je, IntegerInterfaceComponent as Re, NumberInterfaceComponent as Pe, SelectInterfaceComponent as De, SliderInterfaceComponent as Ae, TextInputInterfaceComponent as ge, TextareaInputInterfaceComponent as He, NodeInterfaceType as P, BaklavaInterfaceTypes as Fe, setType as j, allowMultipleConnections as Y, IntegerInterface as We, TextInputInterface as Xe, displayInSidebar as Ye, sortTopologically as Je, useViewModel as F, useTemporaryConnection as qe, Components as ve, useGraph as K, GRAPH_NODE_TYPE_PREFIX as J, useTransform as Qe, useNodeCategories as Ze, BaklavaEditor as Ke, DEFAULT_TOOLBAR_COMMANDS as et, useBaklava as tt, DependencyEngine as st, applyResult as nt } from "baklavajs";
-import { ButtonInterfaceComponent as cn, CheckboxInterfaceComponent as pn, IntegerInterfaceComponent as hn, NumberInterfaceComponent as vn, SelectInterfaceComponent as mn, SliderInterfaceComponent as fn, TextInputInterfaceComponent as gn, TextareaInputInterfaceComponent as bn } from "baklavajs";
-import be from "mustache";
-import { reactive as R, defineComponent as G, createElementBlock as l, openBlock as i, toDisplayString as L, markRaw as T, ref as $, computed as f, onMounted as ee, onUpdated as _e, normalizeClass as U, createCommentVNode as N, createElementVNode as r, unref as _, renderSlot as q, createStaticVNode as te, onBeforeUnmount as ot, normalizeStyle as se, withModifiers as D, createBlock as V, withDirectives as ne, Fragment as E, createTextVNode as at, createVNode as S, withKeys as Q, vModelText as oe, renderList as A, nextTick as it, toRef as ye, resolveDynamicComponent as lt, inject as rt, Transition as dt, withCtx as X, onUnmounted as ut, normalizeProps as ct, guardReactiveProps as pt, mergeProps as ht } from "vue";
-import vt from "toposort";
-import { v4 as mt } from "uuid";
-import { usePointer as ft } from "@vueuse/core";
-class gt extends Le {
+import { AbstractNode as De, sortTopologically as Ce, NodeInterface as Pe, displayInSidebar as ke, NodeInterfaceType as D, BaklavaInterfaceTypes as Ae, CheckboxInterfaceComponent as He, setType as L, IntegerInterfaceComponent as Fe, NumberInterfaceComponent as We, SelectInterfaceComponent as Xe, SliderInterfaceComponent as Ye, TextInputInterfaceComponent as qe, TextareaInputInterfaceComponent as Je, allowMultipleConnections as Y, IntegerInterface as Qe, TextInputInterface as Ze, useViewModel as F, useTemporaryConnection as Ke, Components as be, useGraph as K, GRAPH_NODE_TYPE_PREFIX as q, useTransform as et, useNodeCategories as tt, BaklavaEditor as st, DEFAULT_TOOLBAR_COMMANDS as nt, useBaklava as ot, DependencyEngine as at, applyResult as it } from "baklavajs";
+import { CheckboxInterfaceComponent as vn, IntegerInterfaceComponent as mn, NumberInterfaceComponent as fn, SelectInterfaceComponent as gn, SliderInterfaceComponent as bn, TextInputInterfaceComponent as _n, TextareaInputInterfaceComponent as yn } from "baklavajs";
+import xe from "mustache";
+import { reactive as G, defineComponent as j, createElementBlock as r, openBlock as i, toDisplayString as E, markRaw as z, ref as O, computed as b, onMounted as ee, onUpdated as Ne, normalizeClass as U, createCommentVNode as I, createElementVNode as d, unref as k, renderSlot as J, createStaticVNode as te, onBeforeUnmount as rt, normalizeStyle as se, withModifiers as P, createBlock as V, withDirectives as ne, Fragment as $, createTextVNode as dt, createVNode as T, withKeys as Q, vModelText as oe, renderList as A, nextTick as lt, toRef as Ie, resolveDynamicComponent as ut, inject as ct, Transition as pt, withCtx as X, onUnmounted as ht, normalizeProps as vt, guardReactiveProps as mt, mergeProps as ft } from "vue";
+import gt from "toposort";
+import { v4 as bt } from "uuid";
+import { usePointer as _t } from "@vueuse/core";
+class yt extends De {
   state;
   code;
   isCodeNode = !0;
@@ -13,7 +13,7 @@ class gt extends Le {
   inputs = {};
   outputs = {};
   constructor() {
-    super(), this.initializeIo(), this.width = 400, this.twoColumn = !0, this.state = R({
+    super(), this.initializeIo(), this.width = 400, this.twoColumn = !0, this.state = G({
       codeTemplate: "",
       hidden: !1,
       integrated: !1,
@@ -22,12 +22,21 @@ class gt extends Le {
       variableName: ""
     });
   }
+  get codeNodeInputs() {
+    return Object.fromEntries(Object.entries(this.inputs).filter(([e, t]) => t.type != "node"));
+  }
   get idx() {
     return this.code?.codeNodes.filter((e) => !e.state.integrated).indexOf(this) ?? -1;
   }
   get idxByVariableNames() {
     return this.code?.getNodesBySameVariableNames(this.state.variableName).indexOf(this) ?? -1;
   }
+  get optionalInputs() {
+    return Object.fromEntries(Object.entries(this.codeNodeInputs).filter(([e, t]) => t.optional));
+  }
+  get requiredInputs() {
+    return Object.fromEntries(Object.entries(this.codeNodeInputs).filter(([e, t]) => !t.optional));
+  }
   get script() {
     return this.state.script;
   }
@@ -45,11 +54,11 @@ class gt extends Le {
   getConnectedNodes(e) {
     let t = [];
     if (e !== "inputs") {
-      const s = this.graph?.connections.filter((n) => n.from.name !== "_node").filter((n) => n.from.nodeId === this.id).map((n) => n.to.nodeId);
+      const s = this.graph?.connections.filter((o) => o.from.name !== "_node").filter((o) => o.from.nodeId === this.id).map((o) => o.to.nodeId);
       s && (t = t.concat(s));
     }
     if (e !== "outputs") {
-      const s = this.graph?.connections.filter((n) => n.from.name !== "_node").filter((n) => n.to.nodeId === this.id).map((n) => n.from.nodeId);
+      const s = this.graph?.connections.filter((o) => o.from.name !== "_node").filter((o) => o.to.nodeId === this.id).map((o) => o.from.nodeId);
       s && (t = t.concat(s));
     }
     return !t || t.length == 0 ? [] : t.map((s) => this.graph?.findNodeById(s));
@@ -65,21 +74,29 @@ class gt extends Le {
     const e = {};
     Object.keys(this.inputs).forEach((s) => {
       if (s === "_node") return;
-      const n = this.inputs[s], a = n.isString ? `'${n.value}'` : n.value;
-      n && n.state && (e[s] = n.state.script.length > 0 ? n.state.script : a);
+      const o = this.inputs[s], a = _e(o);
+      o && o.state && (e[s] = o.state.script.length > 0 ? o.state.script : a);
     });
     const t = {};
     Object.keys(this.outputs).forEach((s) => {
       if (s === "_node") return;
-      const n = this.outputs[s], a = n.isString ? `'${n.value}'` : n.value;
-      n && n.state && (t[s] = a);
-    }), this.state.script = be.render(this.state.codeTemplate, { inputs: e, outputs: t }), this.outputs.code && (this.outputs.code.state.script = this.state.script);
+      const o = this.outputs[s], a = _e(o);
+      o && o.state && (t[s] = a);
+    }), this.state.script = xe.render(this.state.codeTemplate, { inputs: e, outputs: t }), this.outputs.code && (this.outputs.code.state.script = this.state.script);
+  }
+  updateCodeNodeInputInterfaces() {
+    if (!this.graph) return;
+    const { connectionsFromNode: e } = Ce(this.graph);
+    e.has(this) && e.get(this).forEach((t) => {
+      const s = this.graph?.findNodeById(t.from.nodeId);
+      s && (s.renderCode(), t.from.isCodeNode && t.to.isCodeNode && (t.to.state.script = t.from.script));
+    });
   }
   updateOutputVariableName() {
     this.outputs.code && (this.outputs.code.name = this.variableName);
   }
 }
-class we extends gt {
+class Me extends yt {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -89,11 +106,11 @@ class we extends gt {
    */
   calculate;
   load(e) {
-    super.load(e), xe(this.graph, e);
+    super.load(e), Oe(this.graph, e);
   }
   save() {
     const e = super.save();
-    return bt(this.graph, e), e;
+    return wt(this.graph, e), e;
   }
   updateModules(e) {
     if (e)
@@ -104,46 +121,75 @@ class we extends gt {
     }
   }
 }
-const xe = (o, e) => {
-  if (!o) return;
-  const t = o.findNodeById(e.id);
+const Ys = (n) => {
+  const e = [], t = Object.keys(n);
+  return t.forEach((s) => {
+    if (n[s]?.hidden) return;
+    const a = e.length < t.indexOf(s) ? `${s}=` : "";
+    e.push(`${a}{{& inputs.${s} }}`);
+  }), e;
+}, Oe = (n, e) => {
+  if (!n) return;
+  const t = n.findNodeById(e.id);
   if (!t || t.subgraph) return;
   const s = t;
-  s.state && (s.state.integrated = e.integrated, s.state.modules = e.modules, s.state.props = e.props), Object.entries(e.inputs).forEach(([n, a]) => {
-    n !== "_node" && s.inputs[n] && (s.inputs[n].hidden = a.hidden);
-  }), Object.entries(e.outputs).forEach(([n, a]) => {
-    n !== "_node" && s.outputs[n] && (s.outputs[n].hidden = a.hidden);
+  s.state && (s.state.integrated = e.integrated, s.state.modules = e.modules, s.state.props = e.props), Object.entries(e.inputs).forEach(([o, a]) => {
+    o !== "_node" && s.inputs[o] && (s.inputs[o].hidden = a.hidden);
+  }), Object.entries(e.outputs).forEach(([o, a]) => {
+    o !== "_node" && s.outputs[o] && (s.outputs[o].hidden = a.hidden);
   });
-}, bt = (o, e) => {
-  if (!o) return;
-  const t = o.findNodeById(e.id);
+}, wt = (n, e) => {
+  if (!n) return;
+  const t = n.findNodeById(e.id);
   if (!t || t.subgraph) return;
   const s = t;
-  s.state && (e.integrated = s.state.integrated, e.modules = s.state.modules), Object.entries(e.inputs).forEach(([n, a]) => {
-    n !== "_node" && s.inputs[n] && (a.hidden = s.inputs[n].hidden);
-  }), Object.entries(e.outputs).forEach(([n, a]) => {
-    n !== "_node" && s.outputs[n] && (a.hidden = s.outputs[n].hidden);
+  s.state && (e.integrated = s.state.integrated, e.modules = s.state.modules), Object.entries(e.inputs).forEach(([o, a]) => {
+    o !== "_node" && s.inputs[o] && (a.hidden = s.inputs[o].hidden);
+  }), Object.entries(e.outputs).forEach(([o, a]) => {
+    o !== "_node" && s.outputs[o] && (a.hidden = s.outputs[o].hidden);
   });
-}, _t = ["title"], ae = /* @__PURE__ */ G({
+}, _e = (n) => {
+  let e;
+  if (n.value == null) return "None";
+  switch (n.type) {
+    case "boolean":
+      e = n.value ? "True" : "False";
+      break;
+    case "string":
+      e = `'${n.value}'`;
+      break;
+    case void 0:
+      e = "None";
+      break;
+    default:
+      e = `${n.value}`;
+  }
+  return e;
+}, Ct = ["title"], ae = /* @__PURE__ */ j({
   __name: "CodeNodeInterface",
   props: {
     intf: {}
   },
-  setup(o) {
-    return (e, t) => (i(), l("div", {
+  setup(n) {
+    return (e, t) => (i(), r("div", {
       title: e.intf.state?.script
-    }, L(e.intf.name), 9, _t));
+    }, E(e.intf.name), 9, Ct));
   }
 });
-class M extends Ge {
-  optional = !1;
+class R extends Pe {
+  isCodeNode = !0;
   code;
   state;
+  type = null;
   constructor(e, t) {
-    super(e, t), this.setComponent(T(ae)), this.state = R({
+    super(e, t), this.setComponent(z(ae)), this.state = G({
+      optional: !1,
       script: ""
     });
   }
+  get optional() {
+    return this.state.optional;
+  }
   get shortId() {
     return this.id.slice(0, 6);
   }
@@ -155,123 +201,114 @@ class M extends Ge {
   //   if (this.name !== '_node') this.setHidden(false);
   // }
 }
-class Fs extends M {
-  component = T(Ue);
-  callback;
+const qs = (n, e) => {
+  n.state.optional = e, n.setHidden(!0);
+};
+class ie extends R {
+  constructor(e = "", t) {
+    super(e, t), this.setComponent(z(ae)), this.use(ke, !0);
+  }
+}
+const $e = new D("boolean"), kt = new D("dict"), xt = new D("list"), H = new D("node"), re = new D("number"), de = new D("string"), Js = (n) => {
+  new Ae(n.editor, { viewPlugin: n }).addTypes($e, kt, xt, H, re, de);
+};
+class Qs extends ie {
   constructor(e, t) {
-    super(e, void 0), this.callback = t, this.setPort(!1);
+    super(e, t), this.setComponent(z(He)), this.use(L, $e);
   }
 }
-class Ws extends M {
-  component = T(je);
+class Nt extends R {
+  isCodeNodeOutput = !0;
+  constructor(e = "", t = "") {
+    super(e, t), this.setComponent(z(ae));
+  }
+  get script() {
+    return this.name.length > 0 ? this.name : this.state.script;
+  }
 }
-class ie extends M {
+class le extends ie {
   min;
   max;
-  constructor(e, t, s, n) {
-    super(e, t), this.min = s, this.max = n;
+  constructor(e, t, s, o) {
+    super(e, t), this.min = s, this.max = o, this.use(L, re);
   }
   validate(e) {
     return (this.min === void 0 || e >= this.min) && (this.max === void 0 || e <= this.max);
   }
 }
-class Xs extends ie {
-  component = T(Re);
+class Zs extends le {
+  component = z(Fe);
   validate(e) {
     return Number.isInteger(e) && super.validate(e);
   }
 }
-class Ys extends M {
-  isCodeInput = !0;
-  constructor(e = "", t) {
-    super(e, t), this.setComponent(T(ae));
-  }
+class Ks extends le {
+  component = z(We);
 }
-class yt extends M {
-  isCodeOutput = !0;
-  constructor(e = "", t = "") {
-    super(e, t), this.setComponent(T(ae));
-  }
-  get script() {
-    return this.state.script;
-  }
-  get value() {
-    return super.value;
-  }
-  set value(e) {
-    super.value = e, this.state.script = this.name.length > 0 ? this.name : this.value;
+class ue extends ie {
+  constructor(e, t) {
+    super(e, t), this.use(L, de);
   }
 }
-class Js extends ie {
-  component = T(Pe);
-}
-class qs extends M {
-  component = T(De);
+class en extends ue {
+  component = z(Xe);
   items;
   constructor(e, t, s) {
     super(e, t), this.items = s;
   }
 }
-class Qs extends ie {
-  component = T(Ae);
+class tn extends le {
+  component = z(Ye);
   min;
   max;
-  constructor(e, t, s, n) {
-    super(e, t, s, n), this.min = s, this.max = n;
-  }
-}
-class Zs extends M {
-  component = T(ge);
-  constructor(e, t) {
-    super(e, t), this.setPort(!1);
+  constructor(e, t, s, o) {
+    super(e, t, s, o), this.min = s, this.max = o;
   }
 }
-class Ks extends M {
-  isString = !0;
-  component = T(ge);
+class sn extends ue {
+  component = z(qe);
 }
-class en extends M {
-  component = T(He);
+class nn extends ue {
+  component = z(Je);
 }
-const wt = new P("boolean"), xt = new P("dict"), kt = new P("list"), H = new P("node"), ke = new P("number"), Ce = new P("string"), tn = (o) => {
-  new Fe(o.editor, { viewPlugin: o }).addTypes(Ce, H, ke, wt, xt, kt);
-};
-function sn(o) {
-  return class extends we {
-    type = o.type;
+function on(n) {
+  return class extends Me {
+    type = n.type;
     inputs = {};
     outputs = {};
     constructor() {
-      super(), this._title = o.title ?? o.type, this.updateModules(o.modules), o.variableName && (this.state.variableName = o.variableName), o.codeTemplate && (this.codeTemplate = o.codeTemplate), this.addInput(
+      super(), this._title = n.title ?? n.type, this.updateModules(n.modules), n.variableName && (this.state.variableName = n.variableName), n.codeTemplate && (this.codeTemplate = n.codeTemplate), this.addInput(
         "_node",
-        new M("", []).use(j, H).use(Y).setHidden(!0)
+        new R("", []).use(L, H).use(Y).setHidden(!0)
       ), this.addOutput(
         "_node",
-        new M("", []).use(j, H).use(Y).setHidden(!0)
-      ), this.executeFactory("input", o.inputs), this.executeFactory("output", o.outputs), o.onCreate?.call(this);
+        new R("", []).use(L, H).use(Y).setHidden(!0)
+      ), this.executeFactory("input", n.inputs), this.executeFactory("output", n.outputs), n.onCreate?.call(this);
     }
-    calculate = o.calculate ? (e, t) => ({
-      ...o.calculate.call(this, e, t),
-      _node: null
-    }) : void 0;
+    // public calculate = definition.calculate
+    //   ? (inputs: I, globalValues: CalculationContext) => ({
+    //       ...definition.calculate!.call(this, inputs, globalValues),
+    //       _node: null,
+    //     })
+    //   : undefined
     onPlaced() {
-      o.onPlaced?.call(this);
+      n.onPlaced?.call(this);
     }
     onDestroy() {
-      o.onDestroy?.call(this);
+      n.onDestroy?.call(this);
     }
     onCodeUpdate() {
-      o.onCodeUpdate?.call(this);
+      n.onCodeUpdate?.call(this);
     }
     executeFactory(e, t) {
       Object.keys(t || {}).forEach((s) => {
-        const n = t[s]();
-        e === "input" ? this.addInput(s, n) : this.addOutput(s, n);
+        const o = t[s]();
+        e === "input" ? this.addInput(s, o) : this.addOutput(s, o);
       });
     }
   };
 }
-class Ct extends we {
+class It extends Me {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -281,37 +318,34 @@ class Ct extends we {
    */
   calculate;
 }
-function nn(o) {
-  return class extends Ct {
-    type = o.type;
+function an(n) {
+  return class extends It {
+    type = n.type;
     inputs = {};
     outputs = {};
     calculate;
     preventUpdate = !1;
-    staticInputKeys = Object.keys(o.inputs ?? {});
-    staticOutputKeys = Object.keys(o.outputs ?? {});
+    staticInputKeys = Object.keys(n.inputs ?? {});
+    staticOutputKeys = Object.keys(n.outputs ?? {});
     constructor() {
-      super(), this._title = o.title ?? o.type, this.updateModules(o.modules), o.codeTemplate && (this.codeTemplate = o.codeTemplate), o.variableName && (this.state.variableName = o.variableName), this.addInput(
+      super(), this._title = n.title ?? n.type, this.updateModules(n.modules), n.codeTemplate && (this.codeTemplate = n.codeTemplate), n.variableName && (this.state.variableName = n.variableName), this.addInput(
         "_node",
-        new M("", []).use(j, H).use(Y).setHidden(!0)
+        new R("", []).use(L, H).use(Y).setHidden(!0)
       ), this.addOutput(
         "_node",
-        new M("", []).use(j, H).use(Y).setHidden(!0)
-      ), this.staticInputKeys.push("_node"), this.staticOutputKeys.push("_node"), this.executeFactory("input", o.inputs), this.executeFactory("output", o.outputs), o.calculate && (this.calculate = (e, t) => ({
-        ...o.calculate?.call(this, e, t),
-        _node: null
-      })), o.onCreate?.call(this);
+        new R("", []).use(L, H).use(Y).setHidden(!0)
+      ), this.staticInputKeys.push("_node"), this.staticOutputKeys.push("_node"), this.executeFactory("input", n.inputs), this.executeFactory("output", n.outputs), n.onCreate?.call(this);
     }
     onPlaced() {
       this.events.update.subscribe(this, (e) => {
         e && (e.type === "input" && this.staticInputKeys.includes(e.name) || e.type === "output" && this.staticOutputKeys.includes(e.name)) && this.onUpdate();
-      }), this.onUpdate(), o.onPlaced?.call(this);
+      }), this.onUpdate(), n.onPlaced?.call(this);
     }
     onDestroy() {
-      o.onDestroy?.call(this);
+      n.onDestroy?.call(this);
     }
     onCodeUpdate() {
-      o.onCodeUpdate?.call(this);
+      n.onCodeUpdate?.call(this);
     }
     load(e) {
       this.preventUpdate = !0, this.hooks.beforeLoad.execute(e), this.id = e.id, this.title = e.title;
@@ -324,57 +358,57 @@ function nn(o) {
         if (!this.staticInputKeys.includes(t)) {
           if (!this.inputs[t]) {
             const s = e.inputs[t].value;
-            let n;
-            typeof s == "number" ? n = new We(t, s).use(j, ke) : n = new Xe(t, JSON.stringify(s)).use(j, Ce), n.use(Ye, !0), this.addInput(t, n);
+            let o;
+            typeof s == "number" ? o = new Qe(t, s).use(L, re) : o = new Ze(t, JSON.stringify(s)).use(L, de), o.use(ke, !0), this.addInput(t, o);
           }
           this.inputs[t] && (this.inputs[t].load(e.inputs[t]), this.inputs[t].nodeId = this.id);
         }
       for (const t of Object.keys(e.outputs))
         if (!this.staticOutputKeys.includes(t)) {
           if (!this.outputs[t]) {
-            const s = new yt(t);
+            const s = new Nt(t);
             this.addOutput(t, s);
           }
           this.outputs[t] && (this.outputs[t].load(e.outputs[t]), this.outputs[t].nodeId = this.id);
         }
-      xe(this.graph, e), this.preventUpdate = !1, this.events.loaded.emit(this);
+      Oe(this.graph, e), this.preventUpdate = !1, this.events.loaded.emit(this);
     }
     onUpdate() {
       if (this.preventUpdate) return;
       this.graph && this.graph.activeTransactions++;
-      const e = this.getStaticValues(this.staticInputKeys, this.inputs), t = this.getStaticValues(this.staticOutputKeys, this.outputs), s = o.onUpdate.call(this, e, t);
+      const e = this.getStaticValues(this.staticInputKeys, this.inputs), t = this.getStaticValues(this.staticOutputKeys, this.outputs), s = n.onUpdate.call(this, e, t);
       this.updateInterfaces("input", s.inputs ?? {}, s.forceUpdateInputs ?? []), this.updateInterfaces("output", s.outputs ?? {}, s.forceUpdateOutputs ?? []), this.graph && this.graph.activeTransactions--;
     }
     getStaticValues(e, t) {
       const s = {};
-      for (const n of e)
-        s[n] = t[n].value;
+      for (const o of e)
+        s[o] = t[o].value;
       return s;
     }
     updateInterfaces(e, t, s) {
-      const n = e === "input" ? this.staticInputKeys : this.staticOutputKeys, a = e === "input" ? this.inputs : this.outputs;
+      const o = e === "input" ? this.staticInputKeys : this.staticOutputKeys, a = e === "input" ? this.inputs : this.outputs;
       for (const u of Object.keys(a))
-        n.includes(u) || t[u] && !s.includes(u) || (e === "input" ? this.removeInput(u) : this.removeOutput(u));
+        o.includes(u) || t[u] && !s.includes(u) || (e === "input" ? this.removeInput(u) : this.removeOutput(u));
       for (const u of Object.keys(t)) {
         if (a[u]) continue;
-        const d = t[u]();
-        e === "input" ? this.addInput(u, d) : this.addOutput(u, d);
+        const l = t[u]();
+        e === "input" ? this.addInput(u, l) : this.addOutput(u, l);
       }
     }
     executeFactory(e, t) {
       Object.keys(t || {}).forEach((s) => {
-        const n = t[s]();
-        e === "input" ? this.addInput(s, n) : this.addOutput(s, n);
+        const o = t[s]();
+        e === "input" ? this.addInput(s, o) : this.addOutput(s, o);
       });
     }
   };
 }
-class It {
+class Mt {
   _id;
   _viewModel;
   _state;
   constructor(e) {
-    this._id = mt(), this._viewModel = e, this._state = R({
+    this._id = bt(), this._viewModel = e, this._state = G({
       autosort: !1,
       modules: {},
       script: "",
@@ -457,7 +491,7 @@ class It {
    * Clear code graph.
    */
   clear() {
-    this.nodes = [], this.connections = [];
+    this.state.modules = {}, this.nodes = [], this.connections = [], this.state.script = "";
   }
   findNodeById(e) {
     return this.graph.findNodeById(e);
@@ -519,7 +553,7 @@ class It {
    * Render code.
    */
   renderCode() {
-    this.state.script = be.render(this.state.template || "", this);
+    this.state.script = xe.render(this.state.template || "", this);
   }
   /**
    * Save code graph.
@@ -536,11 +570,11 @@ class It {
    */
   saveNodeStates(e) {
     e.forEach((t, s) => {
-      const n = this.nodes[s];
+      const o = this.nodes[s];
       Object.entries(t.inputs).forEach(([a]) => {
-        t.inputs && n.inputs[a] && (t.inputs[a].hidden = n.inputs[a].hidden);
+        t.inputs && o.inputs[a] && (t.inputs[a].hidden = o.inputs[a].hidden);
       }), Object.entries(t.outputs).forEach(([a]) => {
-        t.outputs && n.outputs[a] && (t.outputs[a].hidden = n.outputs[a].hidden);
+        t.outputs && o.outputs[a] && (t.outputs[a].hidden = o.outputs[a].hidden);
       });
     });
   }
@@ -555,11 +589,11 @@ class It {
           a.from.nodeId
         ]);
         let t = [...this.nodeIds];
-        t.reverse(), t = vt.array(t, e), t.reverse();
+        t.reverse(), t = gt.array(t, e), t.reverse();
         const s = this.graph.nodes.map((a) => a.id).filter((a) => !t.includes(a));
         t = t.concat(s);
-        const n = t.map((a) => this.findNodeById(a));
-        n && (this.nodes = n);
+        const o = t.map((a) => this.findNodeById(a));
+        o && (this.nodes = o);
       } catch {
         console.warn("Failed to sort nodes.");
       }
@@ -568,65 +602,65 @@ class It {
     this.codeNodes.forEach((e) => e.updateOutputVariableName());
   }
 }
-const Z = (o) => {
+const Z = (n) => {
   let e = [];
-  return o.nodes.forEach((t) => {
+  return n.nodes.forEach((t) => {
     t.subgraph ? e = e.concat(Z(t.subgraph)) : t.isCodeNode && e.push(t);
   }), e;
-}, on = (o = 0, e = 100) => ({
-  x: o * 420,
+}, rn = (n = 0, e = 100) => ({
+  x: n * 420,
   y: e
-}), an = (o) => {
-  const e = { ...o.position };
+}), dn = (n) => {
+  const e = { ...n.position };
   return e.x -= 400, e.y += 50, e;
-}, Nt = (o) => {
-  const { calculationOrder: e, connectionsFromNode: t } = Je(o);
+}, ln = (n) => {
+  const { calculationOrder: e, connectionsFromNode: t } = Ce(n);
   e.forEach((s) => {
     if (!s.isCodeNode) return;
-    const n = s;
-    t.has(n) && t.get(n).forEach((a) => {
+    const o = s;
+    t.has(o) && t.get(o).forEach((a) => {
       a.to.state && a.from.script && (a.to.state.script = a.from.script);
     });
   });
-}, Mt = ["id"], Ot = { class: "align-middle" }, me = /* @__PURE__ */ G({
+}, Ot = ["id"], $t = { class: "align-middle" }, ye = /* @__PURE__ */ j({
   __name: "CodeGraphNodeInterface",
   props: {
     node: {},
     intf: {}
   },
-  setup(o) {
-    const e = o, { viewModel: t } = F(), { hoveredOver: s, temporaryConnection: n } = qe(), a = $(null), u = f(() => e.intf.connectionCount > 0), d = f(() => ({
+  setup(n) {
+    const e = n, { viewModel: t } = F(), { hoveredOver: s, temporaryConnection: o } = Ke(), a = O(null), u = b(() => e.intf.connectionCount > 0), l = b(() => ({
       "--connected": u.value
-    })), h = () => {
+    })), v = () => {
       s(e.intf);
-    }, O = () => {
+    }, _ = () => {
       s(void 0);
-    }, x = () => {
+    }, y = () => {
       a.value && t.value.hooks.renderInterface.execute({ intf: e.intf, el: a.value });
     };
-    return ee(x), _e(x), (k, B) => (i(), l("div", {
-      id: k.intf.id,
+    return ee(y), Ne(y), (x, B) => (i(), r("div", {
+      id: x.intf.id,
       ref_key: "el",
       ref: a,
-      class: U(["baklava-node-interface", d.value])
+      class: U(["baklava-node-interface", l.value])
     }, [
-      k.intf.port ? (i(), l("div", {
+      x.intf.port ? (i(), r("div", {
         key: 0,
-        class: U(["__port", { "--selected": _(n)?.from === k.intf }]),
-        onPointerover: h,
-        onPointerout: O
-      }, null, 34)) : N("", !0),
-      r("span", Ot, [
-        q(k.$slots, "default")
+        class: U(["__port", { "--selected": k(o)?.from === x.intf }]),
+        onPointerover: v,
+        onPointerout: _
+      }, null, 34)) : I("", !0),
+      d("span", $t, [
+        J(x.$slots, "default")
       ])
-    ], 10, Mt));
+    ], 10, Ot));
   }
-}), z = (o, e) => {
-  const t = o.__vccOpts || o;
-  for (const [s, n] of e)
-    t[s] = n;
+}), S = (n, e) => {
+  const t = n.__vccOpts || n;
+  for (const [s, o] of e)
+    t[s] = o;
   return t;
-}, Tt = {}, $t = {
+}, Tt = {}, Et = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -634,17 +668,17 @@ const Z = (o) => {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"
 };
-function Et(o, e) {
-  return i(), l("svg", $t, [...e[0] || (e[0] = [
-    r("path", {
+function zt(n, e) {
+  return i(), r("svg", Et, [...e[0] || (e[0] = [
+    d("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    r("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-2.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
+    d("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-2.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
   ])]);
 }
-const St = /* @__PURE__ */ z(Tt, [["render", Et]]), zt = {}, Bt = {
+const St = /* @__PURE__ */ S(Tt, [["render", zt]]), Bt = {}, Lt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -652,17 +686,17 @@ const St = /* @__PURE__ */ z(Tt, [["render", Et]]), zt = {}, Bt = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-expand"
 };
-function Vt(o, e) {
-  return i(), l("svg", Bt, [...e[0] || (e[0] = [
-    r("path", {
+function Vt(n, e) {
+  return i(), r("svg", Lt, [...e[0] || (e[0] = [
+    d("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    r("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-4.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
+    d("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-4.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
   ])]);
 }
-const Lt = /* @__PURE__ */ z(zt, [["render", Vt]]), Gt = {}, Ut = {
+const jt = /* @__PURE__ */ S(Bt, [["render", Vt]]), Ut = {}, Gt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -670,17 +704,17 @@ const Lt = /* @__PURE__ */ z(zt, [["render", Vt]]), Gt = {}, Ut = {
   fill: "currentColor",
   class: "balkava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right"
 };
-function jt(o, e) {
-  return i(), l("svg", Ut, [...e[0] || (e[0] = [
-    r("path", {
+function Rt(n, e) {
+  return i(), r("svg", Gt, [...e[0] || (e[0] = [
+    d("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    r("path", { d: "M6 21a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3zm8 -16h-8a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h8z" }, null, -1)
+    d("path", { d: "M6 21a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3zm8 -16h-8a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h8z" }, null, -1)
   ])]);
 }
-const Rt = /* @__PURE__ */ z(Gt, [["render", jt]]), Pt = {}, Dt = {
+const Dt = /* @__PURE__ */ S(Ut, [["render", Rt]]), Pt = {}, At = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -688,17 +722,17 @@ const Rt = /* @__PURE__ */ z(Gt, [["render", jt]]), Pt = {}, Dt = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-collapse"
 };
-function At(o, e) {
-  return i(), l("svg", Dt, [...e[0] || (e[0] = [
-    r("path", {
+function Ht(n, e) {
+  return i(), r("svg", At, [...e[0] || (e[0] = [
+    d("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    r("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-5.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
+    d("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-5.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
   ])]);
 }
-const Ht = /* @__PURE__ */ z(Pt, [["render", At]]), Ft = {}, Wt = {
+const Ft = /* @__PURE__ */ S(Pt, [["render", Ht]]), Wt = {}, Xt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -706,17 +740,17 @@ const Ht = /* @__PURE__ */ z(Pt, [["render", At]]), Ft = {}, Wt = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-expand"
 };
-function Xt(o, e) {
-  return i(), l("svg", Wt, [...e[0] || (e[0] = [
-    r("path", {
+function Yt(n, e) {
+  return i(), r("svg", Xt, [...e[0] || (e[0] = [
+    d("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    r("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-3.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
+    d("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-3.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
   ])]);
 }
-const Yt = /* @__PURE__ */ z(Ft, [["render", Xt]]), Jt = {}, qt = {
+const qt = /* @__PURE__ */ S(Wt, [["render", Yt]]), Jt = {}, Qt = {
   xmlns: "http://www.w3.org/2000/svg",
   class: "baklava-icon",
   width: "24",
@@ -728,12 +762,12 @@ const Yt = /* @__PURE__ */ z(Ft, [["render", Xt]]), Jt = {}, qt = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-function Qt(o, e) {
-  return i(), l("svg", qt, [...e[0] || (e[0] = [
+function Zt(n, e) {
+  return i(), r("svg", Qt, [...e[0] || (e[0] = [
     te('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 2h5v4h-5z"></path><path d="M15 10h5v4h-5z"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h5"></path><path d="M7.5 6v4"></path><path d="M7.5 14v4"></path>', 8)
   ])]);
 }
-const Zt = /* @__PURE__ */ z(Jt, [["render", Qt]]), Kt = {}, es = {
+const Kt = /* @__PURE__ */ S(Jt, [["render", Zt]]), es = {}, ts = {
   xmlns: "http://www.w3.org/2000/svg",
   class: "baklava-icon",
   width: "24",
@@ -745,12 +779,12 @@ const Zt = /* @__PURE__ */ z(Jt, [["render", Qt]]), Kt = {}, es = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-function ts(o, e) {
-  return i(), l("svg", es, [...e[0] || (e[0] = [
+function ss(n, e) {
+  return i(), r("svg", ts, [...e[0] || (e[0] = [
     te('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 2h4v4m-4 0h-1v-1"></path><path d="M15 11v-1h5v4h-2"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h2"></path><path d="M7.5 7.5v2.5"></path><path d="M7.5 14v4"></path><path d="M3 3l18 18"></path>', 9)
   ])]);
 }
-const ss = /* @__PURE__ */ z(Kt, [["render", ts]]), ns = {}, os = {
+const ns = /* @__PURE__ */ S(es, [["render", ss]]), os = {}, as = {
   xmlns: "http://www.w3.org/2000/svg",
   class: "baklava-icon",
   width: "24",
@@ -762,12 +796,12 @@ const ss = /* @__PURE__ */ z(Kt, [["render", ts]]), ns = {}, os = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-function as(o, e) {
-  return i(), l("svg", os, [...e[0] || (e[0] = [
+function is(n, e) {
+  return i(), r("svg", as, [...e[0] || (e[0] = [
     te('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 3l18 18"></path><path d="M4 7h3m4 0h9"></path><path d="M10 11l0 6"></path><path d="M14 14l0 3"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l.077 -.923"></path><path d="M18.384 14.373l.616 -7.373"></path><path d="M9 5v-1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>', 8)
   ])]);
 }
-const is = /* @__PURE__ */ z(ns, [["render", as]]), ls = {}, rs = {
+const rs = /* @__PURE__ */ S(os, [["render", is]]), ds = {}, ls = {
   xmlns: "http://www.w3.org/2000/svg",
   class: "baklava-icon",
   width: "16",
@@ -779,37 +813,37 @@ const is = /* @__PURE__ */ z(ns, [["render", as]]), ls = {}, rs = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-function ds(o, e) {
-  return i(), l("svg", rs, [...e[0] || (e[0] = [
-    r("path", {
+function us(n, e) {
+  return i(), r("svg", ls, [...e[0] || (e[0] = [
+    d("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    r("circle", {
+    d("circle", {
       cx: "12",
       cy: "12",
       r: "1"
     }, null, -1),
-    r("circle", {
+    d("circle", {
       cx: "12",
       cy: "19",
       r: "1"
     }, null, -1),
-    r("circle", {
+    d("circle", {
       cx: "12",
       cy: "5",
       r: "1"
     }, null, -1)
   ])]);
 }
-const us = /* @__PURE__ */ z(ls, [["render", ds]]), cs = ["id", "data-node-type"], ps = {
+const cs = /* @__PURE__ */ S(ds, [["render", us]]), ps = ["id", "data-node-type"], hs = {
   class: "__title-label",
   style: { "flex-grow": "1" }
-}, hs = { key: 0 }, vs = {
+}, vs = { key: 0 }, ms = {
   class: "__menu",
   style: { display: "flex" }
-}, ms = { class: "__outputs" }, fs = { key: 0 }, gs = ["id", "title"], bs = { class: "__inputs" }, _s = { key: 0 }, ys = ["id", "title"], ws = /* @__PURE__ */ G({
+}, fs = { class: "__outputs" }, gs = { key: 0 }, bs = ["id", "title"], _s = { class: "__inputs" }, ys = { key: 0 }, ws = ["id", "title"], Cs = /* @__PURE__ */ j({
   __name: "CodeGraphNode",
   props: {
     node: {},
@@ -817,345 +851,347 @@ const us = /* @__PURE__ */ z(ls, [["render", ds]]), cs = ["id", "data-node-type"
     dragging: { type: Boolean }
   },
   emits: ["select", "start-drag", "update"],
-  setup(o, { emit: e }) {
-    const t = ve.ContextMenu, s = ve.NodeInterface, n = o, a = f(() => n.node), u = e, { viewModel: d } = F(), { graph: h, switchGraph: O } = K(), x = $(null), k = $(!1), B = $(""), y = $(null), m = $(!1);
-    let g = 0, b = 0;
-    const p = $(!1), w = f(() => {
+  setup(n, { emit: e }) {
+    const t = be.ContextMenu, s = be.NodeInterface, o = n, a = b(() => o.node), u = e, { viewModel: l } = F(), { graph: v, switchGraph: _ } = K(), y = O(null), x = O(!1), B = O(""), w = O(null), m = O(!1);
+    let f = 0, h = 0;
+    const p = O(!1), C = b(() => {
       const c = [
         { value: "edit", label: "Edit" },
         { value: "rename", label: "Rename" },
         { value: "delete", label: "Delete" }
       ];
-      return n.node.type.startsWith(J) && c.push({ value: "editSubgraph", label: "Edit Subgraph" }), c;
-    }), I = f(() => ({
-      "--selected": n.selected,
-      "--dragging": n.dragging,
-      "--two-column": !!n.node.twoColumn,
+      return o.node.type.startsWith(q) && c.push({ value: "editSubgraph", label: "Edit Subgraph" }), c;
+    }), M = b(() => ({
+      "--selected": o.selected,
+      "--dragging": o.dragging,
+      "--two-column": !!o.node.twoColumn,
       "--hidden": a.value.state?.hidden
-    })), Ie = f(() => ({
-      "--reverse-y": n.node.reverseY ?? d.value.settings.nodes.reverseY
-    })), Ne = f(() => ({
-      top: `${n.node.position?.y ?? 0}px`,
-      left: `${n.node.position?.x ?? 0}px`,
-      "--width": `${n.node.width ?? d.value.settings.nodes.defaultWidth}px`
-    })), Me = f(() => Object.values(n.node.inputs).filter((c) => !c.hidden)), Oe = f(() => Object.values(n.node.outputs).filter((c) => !c.hidden)), le = () => {
+    })), Te = b(() => ({
+      "--reverse-y": o.node.reverseY ?? l.value.settings.nodes.reverseY
+    })), Ee = b(() => ({
+      top: `${o.node.position?.y ?? 0}px`,
+      left: `${o.node.position?.x ?? 0}px`,
+      "--width": `${o.node.width ?? l.value.settings.nodes.defaultWidth}px`
+    })), ze = b(() => Object.values(o.node.inputs).filter((c) => !c.hidden)), Se = b(() => Object.values(o.node.outputs).filter((c) => !c.hidden)), ce = () => {
       u("select");
-    }, Te = (c) => {
-      n.selected || le(), u("start-drag", c);
-    }, re = () => {
+    }, Be = (c) => {
+      o.selected || ce(), u("start-drag", c);
+    }, pe = () => {
       p.value = !0;
-    }, $e = () => {
-      const c = d.value.displayedGraph.sidebar;
+    }, Le = () => {
+      const c = l.value.displayedGraph.sidebar;
       c.nodeId = "", c.visible = !1;
-    }, de = () => {
-      const c = d.value.displayedGraph.sidebar;
-      c.nodeId = n.node.id, c.visible = !0;
-    }, Ee = () => {
-      const c = d.value.displayedGraph.sidebar;
-      c.nodeId = n.node.id;
-    }, Se = async (c) => {
+    }, he = () => {
+      const c = l.value.displayedGraph.sidebar;
+      c.nodeId = o.node.id, c.visible = !0;
+    }, Ve = () => {
+      const c = l.value.displayedGraph.sidebar;
+      c.nodeId = o.node.id;
+    }, je = async (c) => {
       switch (c) {
         case "edit":
-          de();
+          he();
           break;
         case "delete":
-          h.value.removeNode(n.node);
+          v.value.removeNode(o.node);
           break;
         case "rename":
-          B.value = n.node.title, k.value = !0, await it(), y.value?.focus();
+          B.value = o.node.title, x.value = !0, await lt(), w.value?.focus();
           break;
         case "editSubgraph":
-          O(n.node.template);
+          _(o.node.template);
           break;
       }
-    }, ue = () => {
-      n.node.title = B.value, k.value = !1;
-    }, ce = () => {
-      x.value && d.value.hooks.renderNode.execute({ node: n.node, el: x.value });
-    }, ze = (c) => {
-      m.value = !0, g = n.node.width, b = c.clientX, c.preventDefault();
-    }, pe = (c) => {
+    }, ve = () => {
+      o.node.title = B.value, x.value = !1;
+    }, me = () => {
+      y.value && l.value.hooks.renderNode.execute({ node: o.node, el: y.value });
+    }, Ue = (c) => {
+      m.value = !0, f = o.node.width, h = c.clientX, c.preventDefault();
+    }, fe = (c) => {
       if (!m.value) return;
-      const C = c.clientX - b, v = g + C / h.value.scaling, Be = d.value.settings.nodes.minWidth, Ve = d.value.settings.nodes.maxWidth;
-      n.node.width = Math.max(Be, Math.min(Ve, v));
-    }, he = () => {
+      const N = c.clientX - h, g = f + N / v.value.scaling, Ge = l.value.settings.nodes.minWidth, Re = l.value.settings.nodes.maxWidth;
+      o.node.width = Math.max(Ge, Math.min(Re, g));
+    }, ge = () => {
       m.value = !1;
     };
     return ee(() => {
-      ce(), window.addEventListener("mousemove", pe), window.addEventListener("mouseup", he);
-    }), _e(ce), ot(() => {
-      window.removeEventListener("mousemove", pe), window.removeEventListener("mouseup", he);
-    }), (c, C) => (i(), l("div", {
+      me(), window.addEventListener("mousemove", fe), window.addEventListener("mouseup", ge);
+    }), Ne(me), rt(() => {
+      window.removeEventListener("mousemove", fe), window.removeEventListener("mouseup", ge);
+    }), (c, N) => (i(), r("div", {
       id: a.value.id,
       ref_key: "el",
-      ref: x,
-      class: U([I.value, "baklava-node"]),
+      ref: y,
+      class: U([M.value, "baklava-node"]),
       "data-node-type": a.value.type,
-      style: se(Ne.value),
-      onPointerdown: le
+      style: se(Ee.value),
+      onPointerdown: ce
     }, [
-      _(d).settings.nodes.resizable ? (i(), l("div", {
+      k(l).settings.nodes.resizable ? (i(), r("div", {
         key: 0,
         class: "__resize-handle",
-        onMousedown: ze
-      }, null, 32)) : N("", !0),
-      r("div", {
+        onMousedown: Ue
+      }, null, 32)) : I("", !0),
+      d("div", {
         class: "__title",
-        onPointerdown: D(Te, ["self", "stop"]),
-        onContextmenu: D(re, ["prevent"])
+        onPointerdown: P(Be, ["self", "stop"]),
+        onContextmenu: P(pe, ["prevent"])
       }, [
-        a.value.inputs._node ? (i(), V(me, {
+        a.value.inputs._node ? (i(), V(ye, {
           key: 0,
           node: a.value,
           intf: a.value.inputs._node,
           class: "--input",
           "data-interface-type": "node",
           style: { "flex-grow": "0" }
-        }, null, 8, ["node", "intf"])) : N("", !0),
-        k.value ? ne((i(), l("input", {
+        }, null, 8, ["node", "intf"])) : I("", !0),
+        x.value ? ne((i(), r("input", {
           key: 2,
           ref_key: "renameInputEl",
-          ref: y,
-          "onUpdate:modelValue": C[1] || (C[1] = (v) => B.value = v),
+          ref: w,
+          "onUpdate:modelValue": N[1] || (N[1] = (g) => B.value = g),
           class: "baklava-input",
           placeholder: "Node Name",
           style: { "flex-grow": "1" },
           type: "text",
-          onBlur: ue,
-          onKeydown: Q(ue, ["enter"])
+          onBlur: ve,
+          onKeydown: Q(ve, ["enter"])
         }, null, 544)), [
           [oe, B.value]
-        ]) : (i(), l(E, { key: 1 }, [
-          r("div", ps, [
-            a.value.idx > -1 ? (i(), l("span", hs, L(a.value.idx + 1) + " - ", 1)) : N("", !0),
-            at(L(a.value.title) + " (" + L(a.value.shortId) + ") ", 1)
+        ]) : (i(), r($, { key: 1 }, [
+          d("div", hs, [
+            a.value.idx > -1 ? (i(), r("span", vs, E(a.value.idx + 1) + " - ", 1)) : I("", !0),
+            dt(E(a.value.title) + " (" + E(a.value.shortId) + ") ", 1)
           ]),
-          r("div", vs, [
-            a.value.subgraph ? N("", !0) : (i(), l(E, { key: 0 }, [
-              !_(d).displayedGraph.sidebar.visible && _(d).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), V(_(Yt), {
+          d("div", ms, [
+            a.value.subgraph ? I("", !0) : (i(), r($, { key: 0 }, [
+              !k(l).displayedGraph.sidebar.visible && k(l).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), V(k(qt), {
                 key: 0,
                 class: "--clickable mx-1",
-                onClick: de
-              })) : _(d).displayedGraph.sidebar.visible && _(d).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), V(_(Rt), {
+                onClick: he
+              })) : k(l).displayedGraph.sidebar.visible && k(l).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), V(k(Dt), {
                 key: 1,
                 class: "--clickable mx-1",
-                onClick: Ee
-              })) : (i(), V(_(Ht), {
+                onClick: Ve
+              })) : (i(), V(k(Ft), {
                 key: 2,
                 class: "--clickable mx-1",
-                onClick: $e
+                onClick: Le
               }))
             ], 64)),
-            S(_(us), {
+            T(k(cs), {
               class: "--clickable mx-1",
-              onClick: re
+              onClick: pe
             }),
-            S(_(t), {
+            T(k(t), {
               modelValue: p.value,
-              "onUpdate:modelValue": C[0] || (C[0] = (v) => p.value = v),
+              "onUpdate:modelValue": N[0] || (N[0] = (g) => p.value = g),
               x: 0,
               y: 0,
-              items: w.value,
-              onClick: Se
+              items: C.value,
+              onClick: je
             }, null, 8, ["modelValue", "items"])
           ])
         ], 64)),
-        a.value.outputs._node ? (i(), V(me, {
+        a.value.outputs._node ? (i(), V(ye, {
           key: 3,
           node: a.value,
           intf: a.value.outputs._node,
           class: "--output",
           "data-interface-type": "node"
-        }, null, 8, ["node", "intf"])) : N("", !0)
+        }, null, 8, ["node", "intf"])) : I("", !0)
       ], 32),
-      r("div", {
-        class: U(["__content", Ie.value]),
-        onKeydown: C[2] || (C[2] = Q(D(() => {
+      d("div", {
+        class: U(["__content", Te.value]),
+        onKeydown: N[2] || (N[2] = Q(P(() => {
         }, ["stop"]), ["delete"])),
-        onContextmenu: C[3] || (C[3] = D(() => {
+        onContextmenu: N[3] || (N[3] = P(() => {
         }, ["prevent"]))
       }, [
-        r("div", ms, [
-          (i(!0), l(E, null, A(Oe.value, (v) => (i(), l(E, {
-            key: v.id
+        d("div", fs, [
+          (i(!0), r($, null, A(Se.value, (g) => (i(), r($, {
+            key: g.id
           }, [
-            a.value.state?.hidden ? (i(), l("div", fs, [
-              v.port ? (i(), l("div", {
+            a.value.state?.hidden ? (i(), r("div", gs, [
+              g.port ? (i(), r("div", {
                 key: 0,
-                id: v.id,
-                title: v.name,
+                id: g.id,
+                title: g.name,
                 class: "baklava-node-interface --output --connected"
-              }, [...C[4] || (C[4] = [
-                r("div", { class: "__port" }, null, -1)
-              ])], 8, gs)) : N("", !0)
-            ])) : q(c.$slots, "nodeInterface", {
+              }, [...N[4] || (N[4] = [
+                d("div", { class: "__port" }, null, -1)
+              ])], 8, bs)) : I("", !0)
+            ])) : J(c.$slots, "nodeInterface", {
               key: 1,
               type: "output",
               node: a.value,
-              intf: v
+              intf: g
             }, () => [
-              S(_(s), {
+              T(k(s), {
                 node: a.value,
-                intf: v
+                intf: g
               }, null, 8, ["node", "intf"])
             ])
           ], 64))), 128))
         ]),
-        r("div", bs, [
-          (i(!0), l(E, null, A(Me.value, (v) => (i(), l(E, {
-            key: v.id
+        d("div", _s, [
+          (i(!0), r($, null, A(ze.value, (g) => (i(), r($, {
+            key: g.id
           }, [
-            a.value.state?.hidden ? (i(), l("div", _s, [
-              v.port ? (i(), l("div", {
+            a.value.state?.hidden ? (i(), r("div", ys, [
+              g.port ? (i(), r("div", {
                 key: 0,
-                id: v.id,
-                title: v.name,
+                id: g.id,
+                title: g.name,
                 class: "baklava-node-interface --input --connected"
-              }, [...C[5] || (C[5] = [
-                r("div", { class: "__port" }, null, -1)
-              ])], 8, ys)) : N("", !0)
-            ])) : q(c.$slots, "nodeInterface", {
+              }, [...N[5] || (N[5] = [
+                d("div", { class: "__port" }, null, -1)
+              ])], 8, ws)) : I("", !0)
+            ])) : J(c.$slots, "nodeInterface", {
               key: 1,
               node: a.value,
-              intf: v,
+              intf: g,
               type: "input"
             }, () => [
-              S(_(s), {
+              T(k(s), {
                 node: a.value,
-                intf: v,
-                title: v.name
+                intf: g,
+                title: g.name
               }, null, 8, ["node", "intf", "title"])
             ])
           ], 64))), 128))
         ])
       ], 34)
-    ], 46, cs));
+    ], 46, ps));
   }
-}), xs = ["title"], ks = {
+}), ks = ["title"], xs = {
   key: 0,
   class: "__label"
-}, Cs = /* @__PURE__ */ G({
+}, Ns = /* @__PURE__ */ j({
   __name: "Checkbox",
   props: {
-    modelValue: { type: Boolean },
+    disabled: { type: Boolean },
     inversed: { type: Boolean },
+    modelValue: { type: Boolean },
     name: {}
   },
   emits: ["update:modelValue"],
-  setup(o, { emit: e }) {
+  setup(n, { emit: e }) {
     const t = e;
-    return (s, n) => (i(), l("div", {
-      class: U(["baklava-checkbox", { "--checked": s.inversed ? !s.modelValue : s.modelValue }]),
+    return (s, o) => (i(), r("div", {
+      class: U(["baklava-checkbox", { "--checked": s.inversed ? !s.modelValue : s.modelValue, "--disabled": s.disabled }]),
       title: s.name,
-      onClick: n[0] || (n[0] = (a) => t("update:modelValue", !s.modelValue))
+      onClick: o[0] || (o[0] = (a) => t("update:modelValue", !s.modelValue))
     }, [
-      n[1] || (n[1] = r("div", { class: "__checkmark-container" }, [
-        r("svg", {
+      o[1] || (o[1] = d("div", { class: "__checkmark-container" }, [
+        d("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           width: "18",
           height: "18",
           viewBox: "0 0 18 18"
         }, [
-          r("path", {
+          d("path", {
             class: "__checkmark",
             d: "M 6 5 L 6 10 L 16 10",
             transform: "rotate(-45 10 10)"
           })
         ])
       ], -1)),
-      s.name ? (i(), l("div", ks, L(s.name), 1)) : N("", !0)
-    ], 10, xs));
+      s.name ? (i(), r("div", xs, E(s.name), 1)) : I("", !0)
+    ], 10, ks));
   }
-}), Is = { class: "__header" }, Ns = { class: "__node-name" }, Ms = { style: { display: "flex" } }, Os = {
+}), Is = { class: "__header" }, Ms = { class: "__node-name" }, Os = { style: { display: "flex" } }, $s = {
   key: 1,
   class: "__interface"
-}, Ts = /* @__PURE__ */ G({
+}, Ts = /* @__PURE__ */ j({
   __name: "CodeGraphSidebar",
-  setup(o) {
-    const { viewModel: e } = F(), { graph: t } = K(), s = $(null), n = ye(e.value.settings.sidebar, "width"), a = f(() => e.value.settings.sidebar.resizable);
-    let u = 0, d = 0;
-    const h = f(() => {
-      const b = t.value.sidebar.nodeId;
-      return t.value.nodes.find((p) => p.id === b);
-    }), O = f(() => h.value), x = f(() => ({
-      width: `${n.value}px`
-    })), k = f(() => h.value ? [...Object.values(h.value.inputs), ...Object.values(h.value.outputs)].filter((p) => p.displayInSidebar && p.component) : []), B = () => {
+  setup(n) {
+    const { viewModel: e } = F(), { graph: t } = K(), s = O(null), o = Ie(e.value.settings.sidebar, "width"), a = b(() => e.value.settings.sidebar.resizable);
+    let u = 0, l = 0;
+    const v = b(() => {
+      const h = t.value.sidebar.nodeId;
+      return t.value.nodes.find((p) => p.id === h);
+    }), _ = b(() => v.value), y = b(() => ({
+      width: `${o.value}px`
+    })), x = b(() => _.value ? [...Object.values(_.value.inputs), ...Object.values(_.value.outputs)].filter((p) => p.displayInSidebar && p.component) : []), B = () => {
       t.value.sidebar.visible = !1;
-    }, y = () => {
-      h.value?.events.update.emit(null);
-    }, m = (b) => {
-      u = n.value, d = b.clientX, window.addEventListener("mousemove", g), window.addEventListener(
+    }, w = () => {
+      v.value?.events.update.emit(null);
+    }, m = (h) => {
+      u = o.value, l = h.clientX, window.addEventListener("mousemove", f), window.addEventListener(
         "mouseup",
         () => {
-          window.removeEventListener("mousemove", g);
+          window.removeEventListener("mousemove", f);
         },
         { once: !0 }
       );
-    }, g = (b) => {
-      const p = s.value?.parentElement?.getBoundingClientRect().width ?? 500, w = b.clientX - d;
-      let I = u - w;
-      I < 300 ? I = 300 : I > 0.9 * p && (I = 0.9 * p), n.value = I;
+    }, f = (h) => {
+      const p = s.value?.parentElement?.getBoundingClientRect().width ?? 500, C = h.clientX - l;
+      let M = u - C;
+      M < 300 ? M = 300 : M > 0.9 * p && (M = 0.9 * p), o.value = M;
     };
-    return (b, p) => (i(), l("div", {
+    return (h, p) => (i(), r("div", {
       ref_key: "el",
       ref: s,
-      class: U(["baklava-sidebar", { "--open": _(t).sidebar.visible }]),
-      style: se(x.value)
+      class: U(["baklava-sidebar", { "--open": k(t).sidebar.visible }]),
+      style: se(y.value)
     }, [
-      a.value ? (i(), l("div", {
+      a.value ? (i(), r("div", {
         key: 0,
         class: "__resizer",
         onMousedown: m
-      }, null, 32)) : N("", !0),
-      r("div", Is, [
-        r("button", {
+      }, null, 32)) : I("", !0),
+      d("div", Is, [
+        d("button", {
           tabindex: "-1",
           class: "__close",
           onClick: B
         }, "×"),
-        r("div", Ns, [
-          r("b", null, L(h.value ? h.value.title : ""), 1)
+        d("div", Ms, [
+          d("b", null, E(v.value ? v.value.title : ""), 1)
         ])
       ]),
-      (i(!0), l(E, null, A(k.value, (w) => (i(), l("div", {
-        key: w.id,
+      (i(!0), r($, null, A(x.value, (C) => (i(), r("div", {
+        key: C.id,
         class: "__interface"
       }, [
-        r("div", Ms, [
-          S(Cs, {
-            modelValue: w.hidden,
+        d("div", Os, [
+          T(Ns, {
+            modelValue: C.hidden,
             "onUpdate:modelValue": [
-              (I) => w.hidden = I,
-              p[0] || (p[0] = () => h.value?.events.update.emit(null))
+              (M) => C.hidden = M,
+              p[0] || (p[0] = () => v.value?.events.update.emit(null))
             ],
+            disabled: !C.optional,
             inversed: "",
             style: { "margin-right": "8px" }
-          }, null, 8, ["modelValue", "onUpdate:modelValue"]),
-          (i(), V(lt(w.component), {
-            modelValue: w.value,
-            "onUpdate:modelValue": (I) => w.value = I,
-            node: h.value,
-            intf: w,
+          }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
+          (i(), V(ut(C.component), {
+            modelValue: C.value,
+            "onUpdate:modelValue": (M) => C.value = M,
+            node: v.value,
+            intf: C,
             style: { width: "100%" }
           }, null, 8, ["modelValue", "onUpdate:modelValue", "node", "intf"]))
         ])
       ]))), 128)),
-      O.value && O.value.state ? (i(), l("div", Os, [
-        p[2] || (p[2] = r("label", null, "Variable name", -1)),
-        ne(r("input", {
-          "onUpdate:modelValue": p[1] || (p[1] = (w) => O.value.state.variableName = w),
+      _.value && _.value.state ? (i(), r("div", $s, [
+        p[2] || (p[2] = d("label", null, "Variable name", -1)),
+        ne(d("input", {
+          "onUpdate:modelValue": p[1] || (p[1] = (C) => _.value.state.variableName = C),
           type: "text",
           class: "baklava-input",
           title: "Variable name",
-          onBlur: y,
-          onKeydown: Q(y, ["enter"])
+          onBlur: w,
+          onKeydown: Q(w, ["enter"])
         }, null, 544), [
-          [oe, O.value.state.variableName]
+          [oe, _.value.state.variableName]
         ])
-      ])) : N("", !0)
+      ])) : I("", !0)
     ], 6));
   }
-}), $s = G({
+}), Es = j({
   props: {
     type: {
       type: String,
@@ -1166,174 +1202,187 @@ const us = /* @__PURE__ */ z(ls, [["render", ds]]), cs = ["id", "data-node-type"
       required: !0
     }
   },
-  setup(o) {
-    const { viewModel: e } = F(), { switchGraph: t } = K(), s = $(!1), n = f(() => o.type.startsWith(J));
-    return { showContextMenu: s, hasContextMenu: n, contextMenuItems: [
+  setup(n) {
+    const { viewModel: e } = F(), { switchGraph: t } = K(), s = O(!1), o = b(() => n.type.startsWith(q));
+    return { showContextMenu: s, hasContextMenu: o, contextMenuItems: [
       { label: "Edit Subgraph", value: "editSubgraph" },
       { label: "Delete Subgraph", value: "deleteSubgraph" }
     ], openContextMenu: () => {
       s.value = !0;
-    }, onContextMenuClick: (h) => {
-      const O = o.type.substring(J.length), x = e.value.editor.graphTemplates.find((k) => k.id === O);
-      if (x)
-        switch (h) {
+    }, onContextMenuClick: (v) => {
+      const _ = n.type.substring(q.length), y = e.value.editor.graphTemplates.find((x) => x.id === _);
+      if (y)
+        switch (v) {
           case "editSubgraph":
-            t(x);
+            t(y);
             break;
           case "deleteSubgraph":
-            e.value.editor.removeGraphTemplate(x);
+            e.value.editor.removeGraphTemplate(y);
             break;
         }
     } };
   }
-}), Es = ["data-node-type"], Ss = { class: "__title" }, zs = { class: "__title-label" };
-function Bs(o, e, t, s, n, a) {
-  return i(), l("div", {
+}), zs = ["data-node-type"], Ss = { class: "__title" }, Bs = { class: "__title-label" };
+function Ls(n, e, t, s, o, a) {
+  return i(), r("div", {
     class: "baklava-node --palette",
-    "data-node-type": o.type
+    "data-node-type": n.type
   }, [
-    r("div", Ss, [
-      r("div", zs, L(o.title), 1)
+    d("div", Ss, [
+      d("div", Bs, E(n.title), 1)
     ])
-  ], 8, Es);
+  ], 8, zs);
 }
-const fe = /* @__PURE__ */ z($s, [["render", Bs]]), Vs = {
+const we = /* @__PURE__ */ S(Es, [["render", Ls]]), Vs = {
   class: "baklava-node --palette",
-  style: { "margin-top": "-20px", "margin-bottom": "30px" }
-}, Ls = { key: 0 }, Gs = /* @__PURE__ */ G({
+  style: { "margin-top": "-20px", "margin-bottom": "20px" }
+}, js = {
+  key: 0,
+  style: { display: "flex", "justify-content": "space-between" }
+}, Us = ["onClick"], Gs = {
+  key: 0,
+  style: { margin: "auto 0", "font-size": "12px" }
+}, Rs = /* @__PURE__ */ j({
   __name: "CodeNodePalette",
-  setup(o) {
-    const { viewModel: e } = F(), { x: t, y: s } = ft(), { transform: n } = Qe(), a = Ze(e), u = rt("editorEl"), d = $(""), h = $(null), O = (y) => d.value ? y.filter(
-      (m) => Object.values(m.nodeTypes).some(
-        (g) => g.title.toLowerCase().includes(d.value?.toLowerCase())
+  setup(n) {
+    const { viewModel: e } = F(), { x: t, y: s } = _t(), { transform: o } = et(), a = tt(e), u = ct("editorEl"), l = O(""), v = O(null), _ = () => l.value ? a.value.filter(
+      (w) => w.name.toLowerCase().includes(l.value.toLowerCase()) || Object.values(w.nodeTypes).some(
+        (m) => m.title.toLowerCase().includes(l.value.toLowerCase())
       )
-    ) : y, x = (y) => d.value ? Object.values(y).filter(
-      (m) => m.title.toLowerCase().includes(d.value?.toLowerCase())
-    ) : Object.values(y), k = f(() => {
-      if (!h.value || !u?.value) return {};
-      const { left: y, top: m } = u.value.getBoundingClientRect();
+    ) : a.value, y = (w) => l.value ? Object.values(w).filter(
+      (m) => m.category.toLowerCase().includes(l.value.toLowerCase()) || m.title.toLowerCase().includes(l.value.toLowerCase())
+    ) : Object.values(w), x = b(() => {
+      if (!v.value || !u?.value) return {};
+      const { left: w, top: m } = u.value.getBoundingClientRect();
       return {
         top: `${s.value - m}px`,
-        left: `${t.value - y}px`
+        left: `${t.value - w}px`
       };
-    }), B = (y, m) => {
-      h.value = {
-        type: y,
+    }), B = (w, m) => {
+      v.value = {
+        type: w,
         nodeInformation: m
       };
-      const g = () => {
-        const b = R(new m.type());
-        e.value.displayedGraph.addNode(b);
-        const p = u.value.getBoundingClientRect(), [w, I] = n(t.value - p.left, s.value - p.top);
-        b.position.x = w, b.position.y = I, h.value = null, document.removeEventListener("pointerup", g);
+      const f = () => {
+        const h = G(new m.type());
+        e.value.displayedGraph.addNode(h);
+        const p = u.value.getBoundingClientRect(), [C, M] = o(t.value - p.left, s.value - p.top);
+        h.position.x = C, h.position.y = M, v.value = null, document.removeEventListener("pointerup", f);
       };
-      document.addEventListener("pointerup", g);
+      document.addEventListener("pointerup", f);
     };
-    return (y, m) => (i(), l(E, null, [
-      r("div", {
-        class: U(["baklava-node-palette", { "--open": _(e).settings.palette.enabled }]),
-        onContextmenu: m[1] || (m[1] = D(() => {
+    return (w, m) => (i(), r($, null, [
+      d("div", {
+        class: U(["baklava-node-palette", { "--open": k(e).settings.palette.enabled }]),
+        onContextmenu: m[1] || (m[1] = P(() => {
         }, ["stop", "prevent"]))
       }, [
-        r("div", Vs, [
-          ne(r("input", {
-            "onUpdate:modelValue": m[0] || (m[0] = (g) => d.value = g),
+        d("div", Vs, [
+          ne(d("input", {
+            "onUpdate:modelValue": m[0] || (m[0] = (f) => l.value = f),
             type: "text",
             class: "baklava-input",
-            title: "Filter node types"
-          }, null, 512), [
-            [oe, d.value]
+            title: "Filter nodes",
+            onKeyup: _
+          }, null, 544), [
+            [oe, l.value]
           ])
         ]),
-        (i(!0), l(E, null, A(O(_(a)), (g) => (i(), l("section", {
-          key: g.name
+        (i(!0), r($, null, A(_(), (f) => (i(), r("section", {
+          key: f.name
         }, [
-          g.name !== "default" ? (i(), l("h3", Ls, L(g.name), 1)) : N("", !0),
-          (i(!0), l(E, null, A(x(g.nodeTypes), (b, p) => (i(), V(fe, {
-            key: p,
-            type: p,
-            title: b.title,
-            onPointerdown: (w) => B(p, b)
+          f.name !== "default" ? (i(), r("h3", js, [
+            d("div", {
+              onClick: (h) => l.value = f.name,
+              style: { cursor: "pointer" }
+            }, E(f.name), 9, Us),
+            y(f.nodeTypes).length < Object.values(f.nodeTypes).length ? (i(), r("div", Gs, " ( " + E(y(f.nodeTypes).length) + " / " + E(Object.values(f.nodeTypes).length) + " ) ", 1)) : I("", !0)
+          ])) : I("", !0),
+          (i(!0), r($, null, A(y(f.nodeTypes), (h) => (i(), V(we, {
+            key: h.type,
+            type: h.type,
+            title: h.title,
+            onPointerdown: (p) => B(h.type, h)
           }, null, 8, ["type", "title", "onPointerdown"]))), 128))
         ]))), 128))
       ], 34),
-      S(dt, { name: "fade" }, {
+      T(pt, { name: "fade" }, {
         default: X(() => [
-          h.value ? (i(), l("div", {
+          v.value ? (i(), r("div", {
             key: 0,
             class: "baklava-dragged-node",
-            style: se(k.value)
+            style: se(x.value)
           }, [
-            S(fe, {
-              type: h.value.type,
-              title: h.value.nodeInformation.title
+            T(we, {
+              type: v.value.type,
+              title: v.value.nodeInformation.title
             }, null, 8, ["type", "title"])
-          ], 4)) : N("", !0)
+          ], 4)) : I("", !0)
         ]),
         _: 1
       })
     ], 64));
   }
-}), ln = /* @__PURE__ */ G({
+}), un = /* @__PURE__ */ j({
   __name: "CodeGraphEditor",
   props: {
     viewModel: {}
   },
-  setup(o) {
-    const t = ye(o, "viewModel"), s = (n) => n.events.update.emit(null);
+  setup(n) {
+    const t = Ie(n, "viewModel"), s = (o) => o.events.update.emit(null);
     return ee(() => {
       t.value.subscribe(), t.value.engine.start();
-    }), ut(() => {
+    }), ht(() => {
       t.value.unsubscribe(), t.value.engine.stop();
-    }), (n, a) => (i(), V(_(Ke), { "view-model": t.value }, {
+    }), (o, a) => (i(), V(k(st), { "view-model": t.value }, {
       palette: X(() => [
-        S(Gs)
+        T(Rs)
       ]),
       node: X((u) => [
-        S(ws, ht(u, {
-          onUpdate: (d) => s(u.node)
+        T(Cs, ft(u, {
+          onUpdate: (l) => s(u.node)
         }), null, 16, ["onUpdate"])
       ]),
       sidebar: X((u) => [
-        S(Ts, ct(pt(u)), null, 16)
+        T(Ts, vt(mt(u)), null, 16)
       ]),
       _: 1
     }, 8, ["view-model"]));
   }
-}), Us = (o) => {
+}), Ds = (n) => {
   const e = "TOGGLE_PALETTE";
-  o.commandHandler.registerCommand(e, {
-    execute: () => o.settings.palette.enabled = !o.settings.palette.enabled,
+  n.commandHandler.registerCommand(e, {
+    execute: () => n.settings.palette.enabled = !n.settings.palette.enabled,
     canExecute: () => !0
   });
   const t = "CLEAR_ALL";
-  o.commandHandler.registerCommand(t, {
-    execute: () => o.displayedGraph.nodes.forEach((n) => o.displayedGraph.removeNode(n)),
-    canExecute: () => o.displayedGraph.nodes.length > 0
+  n.commandHandler.registerCommand(t, {
+    execute: () => n.code.clear(),
+    canExecute: () => n.displayedGraph.nodes.length > 0
   });
   const s = "TOGGLE_MINIMAP";
-  o.commandHandler.registerCommand(s, {
-    execute: () => o.settings.enableMinimap = !o.settings.enableMinimap,
-    canExecute: () => o.displayedGraph.nodes.length > 1
-  }), o.settings.toolbar.commands = [
+  n.commandHandler.registerCommand(s, {
+    execute: () => n.settings.enableMinimap = !n.settings.enableMinimap,
+    canExecute: () => n.displayedGraph.nodes.length > 1
+  }), n.settings.toolbar.commands = [
     {
       command: e,
       title: "Toggle palette",
       // Tooltip text
-      icon: f(() => o.settings.palette.enabled ? St : Lt)
+      icon: b(() => n.settings.palette.enabled ? St : jt)
     },
-    ...et,
+    ...nt,
     {
       command: t,
       title: "Clear all",
       // Tooltip text
-      icon: is
+      icon: rs
     },
     {
       command: s,
       title: "Toggle minimap",
       // Tooltip text
-      icon: f(() => o.settings.enableMinimap ? ss : Zt)
+      icon: b(() => n.settings.enableMinimap ? ns : Kt)
     }
   ];
 }, W = {
@@ -1351,22 +1400,26 @@ const fe = /* @__PURE__ */ z($s, [["render", Bs]]), Vs = {
   },
   displayValueOnHover: !1
 };
-function rn(o) {
-  const e = tt(o?.existingEditor);
-  e.code = o?.code ? new o.code(e) : new It(e), Us(e);
+function cn(n) {
+  const e = ot(n?.existingEditor);
+  e.code = n?.code ? new n.code(e) : new Mt(e), Ds(e);
   const t = {};
   return Object.keys(W).forEach((s) => {
     t[s] = typeof W[s] == "object" ? { ...e.settings[s], ...W[s] } : W[s];
-  }), e.settings = R({ ...e.settings, ...t }), e.settings.nodes.defaultWidth = 350, e.state = R({
+  }), e.settings = G({ ...e.settings, ...t }), e.settings.nodes.defaultWidth = 350, e.state = G({
     modules: {},
     token: null
-  }), e.engine = new st(e.editor), e.subscribe = () => {
+  }), e.engine = new at(e.editor), e.subscribe = () => {
     e.state.token && e.unsubscribe();
     const s = Symbol();
-    e.displayedGraph.events.addNode.subscribe(s, (n) => n.code = e.code), e.engine.events.beforeRun.subscribe(s, () => {
-      e.engine.pause(), e.code && (e.code.onCodeUpdate(), e.code.sortNodes(), e.code.updateOutputVariableNames()), e.engine.resume();
-    }), e.engine.events.afterRun.subscribe(s, (n) => {
-      e.engine.pause(), nt(n, e.editor), Nt(e.displayedGraph), e.code && (e.code.renderNodeCodes(), e.code.renderCode()), e.engine.resume();
+    e.displayedGraph.events.addNode.subscribe(s, (o) => o.code = e.code), e.engine.events.beforeRun.subscribe(s, () => {
+      e.engine.pause(), e.code && (e.code.onCodeUpdate(), e.code.sortNodes()), e.engine.resume();
+    }), e.engine.events.beforeNodeCalculation.subscribe(s, (o) => {
+      e.engine.pause();
+      const a = o.node;
+      a.isCodeNode && (a.updateOutputVariableName(), a.updateCodeNodeInputInterfaces()), e.engine.resume();
+    }), e.engine.events.afterRun.subscribe(s, (o) => {
+      e.engine.pause(), it(o, e.editor), e.code && (e.code.renderNodeCodes(), e.code.renderCode()), e.engine.resume();
     }), e.state.token = s;
   }, e.unsubscribe = () => {
     if (!e.state.token) return;
@@ -1375,47 +1428,46 @@ function rn(o) {
   }, e;
 }
 export {
-  gt as AbstractCodeNode,
-  Fs as ButtonInterface,
-  cn as ButtonInterfaceComponent,
-  Ws as CheckboxInterface,
-  pn as CheckboxInterfaceComponent,
-  It as Code,
-  ln as CodeGraphEditor,
-  Ys as CodeInputInterface,
-  we as CodeNode,
-  M as CodeNodeInterface,
-  yt as CodeOutputInterface,
+  yt as AbstractCodeNode,
+  Qs as CheckboxInterface,
+  vn as CheckboxInterfaceComponent,
+  Mt as Code,
+  un as CodeGraphEditor,
+  Me as CodeNode,
+  ie as CodeNodeInputInterface,
+  R as CodeNodeInterface,
+  Nt as CodeNodeOutputInterface,
   W as DEFAULT_SETTINGS,
-  Ct as DynamicCodeNode,
-  Xs as IntegerInterface,
-  hn as IntegerInterfaceComponent,
-  Js as NumberInterface,
-  vn as NumberInterfaceComponent,
-  qs as SelectInterface,
-  mn as SelectInterfaceComponent,
-  Qs as SliderInterface,
-  fn as SliderInterfaceComponent,
-  Ks as TextInputInterface,
-  gn as TextInputInterfaceComponent,
-  Zs as TextInterface,
-  en as TextareaInputInterface,
-  bn as TextareaInputInterfaceComponent,
-  tn as addDefaultInterfaceTypes,
-  Us as addToolbarCommands,
-  wt as booleanType,
-  sn as defineCodeNode,
-  nn as defineDynamicCodeNode,
-  xt as dictType,
+  It as DynamicCodeNode,
+  Zs as IntegerInterface,
+  mn as IntegerInterfaceComponent,
+  Ks as NumberInterface,
+  fn as NumberInterfaceComponent,
+  en as SelectInterface,
+  gn as SelectInterfaceComponent,
+  tn as SliderInterface,
+  bn as SliderInterfaceComponent,
+  sn as TextInputInterface,
+  _n as TextInputInterfaceComponent,
+  nn as TextareaInputInterface,
+  yn as TextareaInputInterfaceComponent,
+  Js as addDefaultInterfaceTypes,
+  Ds as addToolbarCommands,
+  $e as booleanType,
+  on as defineCodeNode,
+  an as defineDynamicCodeNode,
+  kt as dictType,
+  Ys as formatInputs,
   Z as getCodeNodes,
-  on as getPositionAtColumn,
-  an as getPositionBeforeNode,
-  kt as listType,
-  xe as loadNodeState,
+  rn as getPositionAtColumn,
+  dn as getPositionBeforeNode,
+  xt as listType,
+  Oe as loadNodeState,
   H as nodeType,
-  ke as numberType,
-  bt as saveNodeState,
-  Ce as stringType,
-  Nt as transferCodeScript,
-  rn as useCodeGraph
+  re as numberType,
+  wt as saveNodeState,
+  qs as setOptional,
+  de as stringType,
+  ln as transferCodeScript,
+  cn as useCodeGraph
 };