@babsey/code-graph 0.4.1 → 0.4.3

package/dist/code-graph.js

@@ -1,15 +1,15 @@
 import ce from "mustache";
-import { reactive as te, defineComponent as F, createElementBlock as b, openBlock as p, toDisplayString as L, markRaw as W, computed as P, createElementVNode as m, withDirectives as ke, vModelText as xe, createStaticVNode as fe, toRef as Me, ref as H, createVNode as G, unref as O, mergeModels as Ue, useModel as xt, resolveComponent as Ze, createCommentVNode as j, onMounted as Se, onBeforeUnmount as et, watch as tt, createBlock as B, withCtx as ee, normalizeProps as It, guardReactiveProps as Nt, renderSlot as q, mergeProps as Et, onUpdated as nt, normalizeStyle as Pe, normalizeClass as ne, withModifiers as le, Fragment as U, createTextVNode as ot, withKeys as Oe, renderList as se, nextTick as Tt, resolveDynamicComponent as De, inject as Ot, Transition as $t, shallowReadonly as Mt } from "vue";
+import { reactive as te, defineComponent as F, createElementBlock as b, openBlock as p, toDisplayString as P, markRaw as Y, computed as A, createElementVNode as m, withDirectives as ke, vModelText as xe, createStaticVNode as fe, toRef as $e, ref as H, createVNode as G, unref as O, mergeModels as Be, useModel as Nt, resolveComponent as qe, createCommentVNode as L, onMounted as Se, onBeforeUnmount as Je, watch as Qe, createBlock as B, withCtx as ee, normalizeProps as Et, guardReactiveProps as Tt, renderSlot as q, mergeProps as Ot, onUpdated as Ze, normalizeStyle as Ae, normalizeClass as oe, withModifiers as de, Fragment as U, createTextVNode as et, withKeys as Oe, renderList as ae, nextTick as Mt, resolveDynamicComponent as He, inject as $t, Transition as St, shallowReadonly as At } from "vue";
 import { v4 as re } from "uuid";
-import { AbstractNode as St, NodeInterface as J, Graph as Pt, getGraphNodeTypeString as st, GraphTemplate as Gt, GRAPH_NODE_TYPE_PREFIX as At, GRAPH_INPUT_NODE_TYPE as Rt, GRAPH_OUTPUT_NODE_TYPE as jt, Editor as Lt } from "@baklavajs/core";
-import { NodeInterfaceType as ae, BaklavaInterfaceTypes as Vt, setType as V } from "@baklavajs/interface-types";
-import { allowMultipleConnections as de, BaseEngine as Bt, sortTopologically as Ht, applyResult as rt } from "@baklavajs/engine";
-import { displayInSidebar as at, CheckboxInterfaceComponent as zt, useGraph as Ge, IntegerInterfaceComponent as Ut, TextInputInterfaceComponent as it, NumberInterfaceComponent as Dt, SelectInterfaceComponent as Ft, SliderInterfaceComponent as Wt, TextareaInputInterfaceComponent as Yt, IntegerInterface as Xt, TextInputInterface as Ae, DEFAULT_TOOLBAR_COMMANDS as Kt, Commands as ue, BaklavaEditor as qt, Components as $e, useViewModel as me, useTemporaryConnection as Jt, useTransform as Qt, useNodeCategories as Zt, DEFAULT_SETTINGS as en, useCommandHandler as tn, useHistory as nn, useClipboard as on, registerDeleteNodesCommand as sn, registerSaveSubgraphCommand as rn, registerSwitchToMainGraphCommand as an, registerSidebarCommands as ln, registerZoomToFitCommands as un, setViewNodeProperties as dn } from "@baklavajs/renderer-vue";
-import cn from "toposort";
-import { SequentialHook as Fe } from "@baklavajs/events";
-import { usePointer as pn } from "@vueuse/core";
+import { AbstractNode as Gt, NodeInterface as J, Graph as Rt, getGraphNodeTypeString as tt, GraphTemplate as jt, GRAPH_NODE_TYPE_PREFIX as Lt, GRAPH_INPUT_NODE_TYPE as Pt, GRAPH_OUTPUT_NODE_TYPE as Vt, Editor as Bt } from "@baklavajs/core";
+import { NodeInterfaceType as ie, BaklavaInterfaceTypes as Ht, setType as V } from "@baklavajs/interface-types";
+import { allowMultipleConnections as ue, BaseEngine as zt, sortTopologically as Ut, applyResult as nt } from "@baklavajs/engine";
+import { displayInSidebar as ot, CheckboxInterfaceComponent as Dt, useGraph as Ge, IntegerInterfaceComponent as Ft, TextInputInterfaceComponent as st, NumberInterfaceComponent as Yt, SelectInterfaceComponent as Wt, SliderInterfaceComponent as Kt, TextareaInputInterfaceComponent as Xt, Commands as ne, DEFAULT_TOOLBAR_COMMANDS as qt, BaklavaEditor as Jt, Components as Me, useViewModel as me, useTemporaryConnection as Qt, useTransform as Zt, useNodeCategories as en, TextInputInterface as at, DEFAULT_SETTINGS as tn, useCommandHandler as nn, useHistory as on, useClipboard as sn, registerDeleteNodesCommand as an, registerSaveSubgraphCommand as rn, registerSwitchToMainGraphCommand as ln, registerSidebarCommands as dn, registerZoomToFitCommands as un, setViewNodeProperties as cn } from "@baklavajs/renderer-vue";
+import pn from "toposort";
+import { SequentialHook as ze } from "@baklavajs/events";
+import { usePointer as hn } from "@vueuse/core";
 ce.escape = (n) => n;
-class lt extends St {
+class rt extends Gt {
   codeTemplate;
   isCodeNode = !0;
   mask = null;
@@ -26,9 +26,9 @@ class lt extends St {
       modules: [],
       props: null,
       script: "",
-      variableName: "a"
+      variableName: ""
     }), this.codeTemplate = function() {
-      return `${this.name}(${hn(this.codeNodeInputs).join(", ")})`;
+      return `${this.name}(${fn(this.codeNodeInputs).join(", ")})`;
     };
   }
   get code() {
@@ -122,14 +122,14 @@ class lt extends St {
     let s = [];
     if (t !== "outputs" && this.inputs[e]) {
       const o = this.graph.connections.filter(
-        (r) => r.to.id === this.inputs[e]?.id || r.from.id === this.inputs[e]?.id
-      ).map((r) => r.from.nodeId);
+        (a) => a.to.id === this.inputs[e]?.id || a.from.id === this.inputs[e]?.id
+      ).map((a) => a.from.nodeId);
       o && (s = s.concat(o));
     }
     if (t !== "inputs" && this.outputs[e]) {
       const o = this.graph.connections.filter(
-        (r) => r.from.id === this.outputs[e]?.id || r.from.id === this.outputs[e]?.id
-      ).map((r) => r.to.nodeId);
+        (a) => a.from.id === this.outputs[e]?.id || a.from.id === this.outputs[e]?.id
+      ).map((a) => a.to.nodeId);
       o && (s = s.concat(o));
     }
     return !s || s.length == 0 ? [] : s.map((o) => this.graph.findNodeById(o));
@@ -182,8 +182,18 @@ class lt extends St {
   updateProps(e) {
     this.state.props = e;
   }
+  /**
+   * Update input values
+   * @param props values for inputs
+   */
+  updateInputValues(e) {
+    const t = Object.keys(this.inputs);
+    Object.keys(e).forEach((s) => {
+      !t.includes(s) || !this.inputs[s] || (this.inputs[s].value = e[s], this.inputs[s].setHidden(!1));
+    });
+  }
 }
-class Re extends lt {
+class Re extends rt {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -196,41 +206,67 @@ class Re extends lt {
     return this.lockCode || (s._code = this.renderCode({ inputs: e, ...t })), this.updateOutputValues(s), s;
   };
   load(e) {
-    super.load(e), ut(this.graph, e);
+    super.load(e), it(this.graph, e);
   }
   save() {
     const e = super.save();
-    return fn(this.graph, e), e;
+    return mn(this.graph, e), e;
   }
 }
-const hn = (n, e = !0) => {
+const fn = (n, e = !0) => {
   const t = [], s = Object.keys(n);
   return s.forEach((o) => {
     if (n[o]?.hidden) return;
     const i = e && t.length < s.indexOf(o) ? `${o}=` : "";
     t.push(`${i}{{ inputs.${o} }}`);
   }), t;
-}, ut = (n, e) => {
+}, it = (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(([o, r]) => {
-    o !== "_code" && s.inputs[o] && (s.inputs[o].hidden = r.hidden);
-  }), Object.entries(e.outputs).forEach(([o, r]) => {
-    o !== "_code" && s.outputs[o] && (s.outputs[o].hidden = r.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 !== "_code" && s.inputs[o] && (s.inputs[o].hidden = a.hidden);
+  }), Object.entries(e.outputs).forEach(([o, a]) => {
+    o !== "_code" && s.outputs[o] && (s.outputs[o].hidden = a.hidden);
   });
-}, fn = (n, e) => {
+}, mn = (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(([o, r]) => {
-    o !== "_code" && s.inputs[o] && (r.hidden = s.inputs[o].hidden);
-  }), Object.entries(e.outputs).forEach(([o, r]) => {
-    o !== "_code" && s.outputs[o] && (r.hidden = s.outputs[o].hidden);
+  s.state && (e.integrated = s.state.integrated, e.modules = s.state.modules), Object.entries(e.inputs).forEach(([o, a]) => {
+    if (o !== "_code" && s.inputs[o]) {
+      const i = s.inputs[o];
+      a.hidden = i.hidden, i.component?.__name && (a.component = i.component.__name);
+    }
+  }), Object.entries(e.outputs).forEach(([o, a]) => {
+    o !== "_code" && s.outputs[o] && (a.hidden = s.outputs[o].hidden);
   });
-}, mn = ["title"], je = /* @__PURE__ */ F({
+}, vn = (n, e) => {
+  switch (n) {
+    case "CheckBoxInterface":
+      return new yn(e.id, e.value);
+    case "IntegerInterface":
+      return new ht(
+        e.id,
+        e.value,
+        e.min,
+        e.max
+      );
+    case "NumberInterface":
+      return new Cn(
+        e.id,
+        e.value,
+        e.min,
+        e.max
+      );
+    case "SelectInterface":
+      return new wn(e.id, e.value, e.items);
+    default:
+      return new ft(e.id, e.value);
+  }
+}, gn = ["title"], je = /* @__PURE__ */ F({
   __name: "CodeNodeInterface",
   props: {
     intf: {}
@@ -238,7 +274,7 @@ const hn = (n, e = !0) => {
   setup(n) {
     return (e, t) => (p(), b("div", {
       title: n.intf.value
-    }, L(n.intf.name), 9, mn));
+    }, P(n.intf.name), 9, gn));
   }
 });
 class D extends J {
@@ -247,7 +283,7 @@ class D extends J {
   state;
   type = null;
   constructor(e, t) {
-    super(e, t), this.setComponent(W(je)), this.state = te({
+    super(e, t), this.setComponent(Y(je)), this.state = te({
       optional: !1
     });
   }
@@ -264,7 +300,7 @@ class D extends J {
 }
 class ve extends D {
   constructor(e = "", t) {
-    super(e, t), this.setComponent(W(je)), this.use(at, !0);
+    super(e, t), this.setComponent(Y(je)), this.use(ot, !0);
   }
   get value() {
     return super.value;
@@ -273,20 +309,20 @@ class ve extends D {
     super.value = e, this.name !== "_code" && this.setHidden(!1);
   }
 }
-const dt = new ae("boolean"), vn = new ae("dict"), ct = new ae("list"), X = new ae("node"), Le = new ae("number"), Ve = new ae("string"), pt = new ae("tuple"), or = (n) => {
-  new Vt(n.editor, { viewPlugin: n }).addTypes(dt, vn, ct, X, Le, Ve, pt);
+const lt = new ie("boolean"), bn = new ie("dict"), dt = new ie("list"), K = new ie("node"), ut = new ie("number"), ct = new ie("string"), pt = new ie("tuple"), la = (n) => {
+  new Ht(n.editor, { viewPlugin: n }).addTypes(lt, bn, dt, K, ut, ct, pt);
 };
-class sr extends ve {
+class yn extends ve {
   constructor(e, t) {
-    super(e, t), this.setComponent(W(zt)), this.use(V, dt);
+    super(e, t), this.setComponent(Y(Dt)), this.use(V, lt);
   }
   getValue = () => this.value ? "True" : "False";
 }
-class gn extends D {
+class _n extends D {
   isCodeNodeOutput = !0;
   suffix = "";
   constructor(e = "", t = "") {
-    super(e, ""), this.suffix = t, this.setComponent(W(je));
+    super(e, ""), this.suffix = t, this.setComponent(Y(je));
   }
   get codeValue() {
     return this.node?.outputs._code.value ?? "";
@@ -296,46 +332,46 @@ class gn extends D {
     return e.value.findNodeById(this.nodeId);
   }
 }
-class Be extends ve {
+class Le extends ve {
   min;
   max;
   constructor(e, t, s, o) {
-    super(e, t), this.min = s, this.max = o, this.use(V, Le);
+    super(e, t), this.min = s, this.max = o, this.use(V, ut);
   }
   validate(e) {
     return (this.min === void 0 || e >= this.min) && (this.max === void 0 || e <= this.max);
   }
 }
-class rr extends Be {
-  component = W(Ut);
+class ht extends Le {
+  component = Y(Ft);
   validate(e) {
     return Number.isInteger(e) && super.validate(e);
   }
 }
-class ar extends ve {
+class da extends ve {
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(W(it)), this.use(V, ct);
+    super(e, t), this.setComponent(Y(st)), this.use(V, dt);
   }
   getValue = () => `[${this.value}]`;
 }
-class ir extends Be {
-  component = W(Dt);
+class Cn extends Le {
+  component = Y(Yt);
 }
-class He extends ve {
+class Pe extends ve {
   constructor(e, t) {
-    super(e, t), this.use(V, Ve);
+    super(e, t), this.use(V, ct);
   }
   getValue = () => `"${this.value}"`;
 }
-class lr extends He {
-  component = W(Ft);
+class wn extends Pe {
+  component = Y(Wt);
   items;
   constructor(e, t, s) {
     super(e, t), this.items = s;
   }
 }
-class ur extends Be {
-  component = W(Wt);
+class ua extends Le {
+  component = Y(Kt);
   min;
   max;
   constructor(e, t, s, o) {
@@ -343,7 +379,7 @@ class ur extends Be {
   }
   getValue = () => `${Math.round(this.value * 1e3) / 1e3}`;
 }
-const bn = F({
+const kn = F({
   props: {
     intf: {
       type: Object,
@@ -356,47 +392,47 @@ const bn = F({
   },
   emits: ["update:modelValue"],
   setup(n, { emit: e }) {
-    return { v: P({
+    return { v: A({
       get: () => n.modelValue,
       set: (s) => {
         e("update:modelValue", s);
       }
     }) };
   }
-}), A = (n, e) => {
+}), R = (n, e) => {
   const t = n.__vccOpts || n;
   for (const [s, o] of e)
     t[s] = o;
   return t;
-}, yn = { style: { position: "relative" } }, _n = { style: { "font-size": "12px", padding: "0 6px", position: "absolute", top: "-8px", "background-color": "var(--baklava-node-color-background)" } }, Cn = ["placeholder", "title"];
-function wn(n, e, t, s, o, r) {
-  return p(), b("div", yn, [
-    m("label", _n, L(n.intf.name), 1),
+}, xn = { style: { position: "relative" } }, In = { style: { "font-size": "12px", padding: "0 6px", position: "absolute", top: "-8px", "background-color": "var(--baklava-node-color-background)" } }, Nn = ["placeholder", "title"];
+function En(n, e, t, s, o, a) {
+  return p(), b("div", xn, [
+    m("label", In, P(n.intf.name), 1),
     ke(m("input", {
       "onUpdate:modelValue": e[0] || (e[0] = (i) => n.v = i),
       type: "text",
       class: "baklava-input",
       placeholder: n.intf.name,
       title: n.intf.name
-    }, null, 8, Cn), [
+    }, null, 8, Nn), [
       [xe, n.v]
     ])
   ]);
 }
-const kn = /* @__PURE__ */ A(bn, [["render", wn]]);
-class dr extends He {
-  component = W(kn);
+const Tn = /* @__PURE__ */ R(kn, [["render", En]]);
+class ft extends Pe {
+  component = Y(Tn);
 }
-class cr extends He {
-  component = W(Yt);
+class ca extends Pe {
+  component = Y(Xt);
 }
-class pr extends ve {
+class pa extends ve {
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(W(it)), this.use(V, pt);
+    super(e, t), this.setComponent(Y(st)), this.use(V, pt);
   }
   getValue = () => `(${this.value})`;
 }
-function hr(n) {
+function ha(n) {
   return class extends Re {
     type = n.type;
     inputs = {};
@@ -404,10 +440,10 @@ function hr(n) {
     constructor() {
       super(), this._title = n.title ?? n.type, this.executeFactory("input", n.inputs), this.executeFactory("output", n.outputs), n.calculate && (this.calculate = (e, t) => n.calculate.call(this, { inputs: e, ...t })), n.onCreate?.call(this), this.name = n.name ?? n.type, this.updateModules(n.modules), n.variableName != null && (this.state.variableName = n.variableName), n.codeTemplate && (this.codeTemplate = n.codeTemplate), this.addInput(
         "_code",
-        new D("", []).use(V, X).use(de).setHidden(!0)
+        new D("_code", []).use(V, K).use(ue).setHidden(!0)
       ), this.addOutput(
         "_code",
-        new D("", []).use(V, X).use(de).setHidden(!0)
+        new D("_code", []).use(V, K).use(ue).setHidden(!0)
       );
     }
     onPlaced() {
@@ -433,10 +469,10 @@ function hr(n) {
     }
   };
 }
-class xn extends Re {
+class On extends Re {
 }
-function fr(n) {
-  return class extends xn {
+function fa(n) {
+  return class extends On {
     type = n.type;
     inputs = {};
     outputs = {};
@@ -446,10 +482,10 @@ function fr(n) {
     constructor() {
       super(), this._title = n.title ?? n.type, this.executeFactory("input", n.inputs), this.executeFactory("output", n.outputs), n.calculate && (this.calculate = (e, t) => n.calculate?.call(this, e, t)), n.onCreate?.call(this), this.name = n.name ?? n.type, this.updateModules(n.modules), n.codeTemplate && (this.codeTemplate = n.codeTemplate), n.variableName && (this.state.variableName = n.variableName), this.addInput(
         "_code",
-        new D("", []).use(V, X).use(de).setHidden(!0)
+        new D("_code", []).use(V, K).use(ue).setHidden(!0)
       ), this.addOutput(
         "_code",
-        new D("", []).use(V, X).use(de).setHidden(!0)
+        new D("_code", []).use(V, K).use(ue).setHidden(!0)
       ), this.staticInputKeys.push("_code"), this.staticOutputKeys.push("_code");
     }
     onPlaced() {
@@ -477,23 +513,23 @@ function fr(n) {
         this.outputs[t].load(e.outputs[t]), this.outputs[t].nodeId = this.id, t !== "_code" && (this.outputs[t].hidden = e.outputs[t].hidden);
       this.preventUpdate = !1, this.onUpdate(), this.preventUpdate = !0;
       for (const t of Object.keys(e.inputs))
-        if (!this.staticInputKeys.includes(t)) {
+        if (!(this.staticInputKeys.includes(t) || !e.inputs[t])) {
           if (!this.inputs[t]) {
-            const s = e.inputs[t].value;
-            let o;
-            typeof s == "number" ? o = new Xt(t, s).use(V, Le) : o = new Ae(t, JSON.stringify(s)).use(V, Ve), o.use(at, !0), this.addInput(t, o);
+            const s = e.inputs[t], o = s.value;
+            let a;
+            s.component ? a = vn(s.component, { ...s, id: t }) : typeof o == "number" ? a = new ht(t, o) : a = new ft(t, JSON.stringify(o)), a.use(ot, !0), a.setOptional(s.optional ?? !1), a.setHidden(s.hidden ?? !1), this.addInput(t, a);
           }
           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.staticOutputKeys.includes(t) || !e.outputs[t])) {
           if (!this.outputs[t]) {
-            const s = new gn(t);
+            const s = new _n(t);
             this.addOutput(t, s);
           }
           this.outputs[t] && (this.outputs[t].load(e.outputs[t]), this.outputs[t].nodeId = this.id);
         }
-      ut(this.graph, e), this.preventUpdate = !1, this.events.loaded.emit(this);
+      it(this.graph, e), this.preventUpdate = !1, this.events.loaded.emit(this);
     }
     onUpdate() {
       if (this.preventUpdate) return;
@@ -508,13 +544,13 @@ function fr(n) {
       return s;
     }
     updateInterfaces(e, t, s) {
-      const o = e === "input" ? this.staticInputKeys : this.staticOutputKeys, r = e === "input" ? this.inputs : this.outputs;
-      for (const i of Object.keys(r))
+      const o = e === "input" ? this.staticInputKeys : this.staticOutputKeys, a = e === "input" ? this.inputs : this.outputs;
+      for (const i of Object.keys(a))
         o.includes(i) || t[i] && !s.includes(i) || (e === "input" ? this.removeInput(i) : this.removeOutput(i));
       for (const i of Object.keys(t)) {
-        if (r[i]) continue;
-        const a = t[i]();
-        e === "input" ? this.addInput(i, a) : this.addOutput(i, a);
+        if (a[i]) continue;
+        const r = t[i]();
+        e === "input" ? this.addInput(i, r) : this.addOutput(i, r);
       }
     }
     updateProps(e) {
@@ -529,7 +565,7 @@ function fr(n) {
   };
 }
 ce.escape = (n) => n;
-class ze {
+class Ve {
   _id;
   _state;
   viewModel;
@@ -596,25 +632,26 @@ class ze {
   }
   /**
    * Render code script.
+   * @param data data for render template.
    */
   renderCode(e) {
-    this.state.script = ce.render(this.state.template || "", e);
+    this.state.script = ce.render(this.state.template || "", e ?? {});
   }
 }
-class mr extends ze {
+class ma extends Ve {
   constructor() {
     super(), this.loadTemplate(import("./python-CKuCd7tg.js"));
   }
 }
-class vr extends ze {
+class va extends Ve {
   constructor() {
     super(), this.loadTemplate(import("./javascript-DK1c6Ap1.js"));
   }
 }
-const gr = (n) => {
+const ga = (n) => {
   n.allowMultipleConnections = !0;
 };
-class In extends Bt {
+class Mn extends zt {
   order = /* @__PURE__ */ new Map();
   constructor(e) {
     super(e);
@@ -623,32 +660,32 @@ class In extends Bt {
     super.start(), this.recalculateOrder = !0, this.calculateWithoutData();
   }
   async runGraph(e, t, s) {
-    this.order.has(e.id) || this.order.set(e.id, Ht(e));
-    const { calculationOrder: o, connectionsFromNode: r } = this.order.get(e.id), i = /* @__PURE__ */ new Map();
-    for (const a of o) {
+    this.order.has(e.id) || this.order.set(e.id, Ut(e));
+    const { calculationOrder: o, connectionsFromNode: a } = this.order.get(e.id), i = /* @__PURE__ */ new Map();
+    for (const r of o) {
       const l = {};
-      Object.entries(a.inputs).forEach(([f, C]) => {
+      Object.entries(r.inputs).forEach(([f, C]) => {
         l[f] = this.getInterfaceValue(t, C.id);
-      }), a.isCodeNode && (a.updateCodeTemplate(), a.updateOutputNames()), this.events.beforeNodeCalculation.emit({ inputValues: l, node: a });
-      let d;
-      if (a.calculate) {
-        if (d = await a.calculate(l, { globalValues: s, engine: this }), r.has(a))
-          for (const [f, C] of Object.entries(d))
-            this.hooks.transferData.execute(d[f], C), r.get(a).forEach((h) => t.set(h.to.id, C));
+      }), r.isCodeNode && (r.updateCodeTemplate(), r.updateOutputNames()), this.events.beforeNodeCalculation.emit({ inputValues: l, node: r });
+      let u;
+      if (r.calculate) {
+        if (u = await r.calculate(l, { globalValues: s, engine: this }), a.has(r))
+          for (const [f, C] of Object.entries(u))
+            this.hooks.transferData.execute(u[f], C), a.get(r).forEach((h) => t.set(h.to.id, C));
       } else {
-        d = {};
-        for (const [f, C] of Object.entries(a.outputs))
-          d[f] = this.getInterfaceValue(t, C.id);
+        u = {};
+        for (const [f, C] of Object.entries(r.outputs))
+          u[f] = this.getInterfaceValue(t, C.id);
       }
-      this.events.afterNodeCalculation.emit({ outputValues: d, node: a }), i.set(a.id, new Map(Object.entries(d))), r.has(a) && r.get(a).forEach((f) => {
-        const C = Object.entries(a.outputs).find(([, N]) => N.id === f.from.id)?.[0];
+      this.events.afterNodeCalculation.emit({ outputValues: u, node: r }), i.set(r.id, new Map(Object.entries(u))), a.has(r) && a.get(r).forEach((f) => {
+        const C = Object.entries(r.outputs).find(([, N]) => N.id === f.from.id)?.[0];
         if (!C)
           throw new Error(
             `Could not find key for interface ${f.from.id}
 This is likely an internal issue. Please report it on GitHub.`
           );
-        const h = this.hooks.transferData.execute(d[C], f);
-        f.to.allowMultipleConnections ? t.has(f.to.id) ? t.get(f.to.id).push(h) : t.set(f.to.id, [h]) : t.set(f.to.id, h);
+        const h = this.hooks.transferData.execute(u[C], f);
+        C !== "_code" && (f.to.allowMultipleConnections ? t.has(f.to.id) ? t.get(f.to.id).push(h) : t.set(f.to.id, [h]) : t.set(f.to.id, h));
       });
     }
     return i;
@@ -680,7 +717,7 @@ This is likely an internal issue. Please report it on GitHub.`
     return e.get(t);
   }
 }
-const Nn = {}, En = {
+const $n = {}, Sn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -692,8 +729,8 @@ const Nn = {}, En = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-check"
 };
-function Tn(n, e) {
-  return p(), b("svg", En, [...e[0] || (e[0] = [
+function An(n, e) {
+  return p(), b("svg", Sn, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -702,7 +739,7 @@ function Tn(n, e) {
     m("path", { d: "M5 12l5 5l10 -10" }, null, -1)
   ])]);
 }
-const On = /* @__PURE__ */ A(Nn, [["render", Tn]]), $n = {}, Mn = {
+const Gn = /* @__PURE__ */ R($n, [["render", An]]), Rn = {}, jn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -714,8 +751,8 @@ const On = /* @__PURE__ */ A(Nn, [["render", Tn]]), $n = {}, Mn = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-code-variable"
 };
-function Sn(n, e) {
-  return p(), b("svg", Mn, [...e[0] || (e[0] = [
+function Ln(n, e) {
+  return p(), b("svg", jn, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -724,7 +761,7 @@ function Sn(n, e) {
     m("path", { d: "M4 8m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" }, null, -1)
   ])]);
 }
-const Pn = /* @__PURE__ */ A($n, [["render", Sn]]), Gn = {}, An = {
+const Pn = /* @__PURE__ */ R(Rn, [["render", Ln]]), Vn = {}, Bn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -736,8 +773,8 @@ const Pn = /* @__PURE__ */ A($n, [["render", Sn]]), Gn = {}, An = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-copy"
 };
-function Rn(n, e) {
-  return p(), b("svg", An, [...e[0] || (e[0] = [
+function Hn(n, e) {
+  return p(), b("svg", Bn, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -747,7 +784,7 @@ function Rn(n, e) {
     m("path", { d: "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" }, null, -1)
   ])]);
 }
-const jn = /* @__PURE__ */ A(Gn, [["render", Rn]]), Ln = {}, Vn = {
+const zn = /* @__PURE__ */ R(Vn, [["render", Hn]]), Un = {}, Dn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -759,8 +796,8 @@ const jn = /* @__PURE__ */ A(Gn, [["render", Rn]]), Ln = {}, Vn = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"
 };
-function Bn(n, e) {
-  return p(), b("svg", Vn, [...e[0] || (e[0] = [
+function Fn(n, e) {
+  return p(), b("svg", Dn, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -771,7 +808,7 @@ function Bn(n, e) {
     m("path", { d: "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
   ])]);
 }
-const Hn = /* @__PURE__ */ A(Ln, [["render", Bn]]), zn = {}, Un = {
+const Yn = /* @__PURE__ */ R(Un, [["render", Fn]]), Wn = {}, Kn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -779,8 +816,8 @@ const Hn = /* @__PURE__ */ A(Ln, [["render", Bn]]), zn = {}, Un = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"
 };
-function Dn(n, e) {
-  return p(), b("svg", Un, [...e[0] || (e[0] = [
+function Xn(n, e) {
+  return p(), b("svg", Kn, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -789,7 +826,7 @@ function Dn(n, e) {
     m("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 Fn = /* @__PURE__ */ A(zn, [["render", Dn]]), Wn = {}, Yn = {
+const qn = /* @__PURE__ */ R(Wn, [["render", Xn]]), Jn = {}, Qn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -797,8 +834,8 @@ const Fn = /* @__PURE__ */ A(zn, [["render", Dn]]), Wn = {}, Yn = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-expand"
 };
-function Xn(n, e) {
-  return p(), b("svg", Yn, [...e[0] || (e[0] = [
+function Zn(n, e) {
+  return p(), b("svg", Qn, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -807,7 +844,7 @@ function Xn(n, e) {
     m("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 Kn = /* @__PURE__ */ A(Wn, [["render", Xn]]), qn = {}, Jn = {
+const eo = /* @__PURE__ */ R(Jn, [["render", Zn]]), to = {}, no = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -815,8 +852,8 @@ const Kn = /* @__PURE__ */ A(Wn, [["render", Xn]]), qn = {}, Jn = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right"
 };
-function Qn(n, e) {
-  return p(), b("svg", Jn, [...e[0] || (e[0] = [
+function oo(n, e) {
+  return p(), b("svg", no, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -825,7 +862,7 @@ function Qn(n, e) {
     m("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 Zn = /* @__PURE__ */ A(qn, [["render", Qn]]), eo = {}, to = {
+const so = /* @__PURE__ */ R(to, [["render", oo]]), ao = {}, ro = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -833,8 +870,8 @@ const Zn = /* @__PURE__ */ A(qn, [["render", Qn]]), eo = {}, to = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-collapse"
 };
-function no(n, e) {
-  return p(), b("svg", to, [...e[0] || (e[0] = [
+function io(n, e) {
+  return p(), b("svg", ro, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -843,7 +880,7 @@ function no(n, e) {
     m("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 oo = /* @__PURE__ */ A(eo, [["render", no]]), so = {}, ro = {
+const lo = /* @__PURE__ */ R(ao, [["render", io]]), uo = {}, co = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -851,8 +888,8 @@ const oo = /* @__PURE__ */ A(eo, [["render", no]]), so = {}, ro = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-expand"
 };
-function ao(n, e) {
-  return p(), b("svg", ro, [...e[0] || (e[0] = [
+function po(n, e) {
+  return p(), b("svg", co, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -861,7 +898,7 @@ function ao(n, e) {
     m("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 io = /* @__PURE__ */ A(so, [["render", ao]]), lo = {}, uo = {
+const ho = /* @__PURE__ */ R(uo, [["render", po]]), fo = {}, mo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -873,12 +910,12 @@ const io = /* @__PURE__ */ A(so, [["render", ao]]), lo = {}, uo = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-lock-code"
 };
-function co(n, e) {
-  return p(), b("svg", uo, [...e[0] || (e[0] = [
+function vo(n, e) {
+  return p(), b("svg", mo, [...e[0] || (e[0] = [
     fe('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2"></path><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M8 11v-4a4 4 0 1 1 8 0v4"></path><path d="M20 21l2 -2l-2 -2"></path><path d="M17 17l-2 2l2 2"></path>', 6)
   ])]);
 }
-const ht = /* @__PURE__ */ A(lo, [["render", co]]), po = {}, ho = {
+const mt = /* @__PURE__ */ R(fo, [["render", vo]]), go = {}, bo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -890,8 +927,8 @@ const ht = /* @__PURE__ */ A(lo, [["render", co]]), po = {}, ho = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-player-play"
 };
-function fo(n, e) {
-  return p(), b("svg", ho, [...e[0] || (e[0] = [
+function yo(n, e) {
+  return p(), b("svg", bo, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -900,7 +937,7 @@ function fo(n, e) {
     m("path", { d: "M7 4v16l13 -8z" }, null, -1)
   ])]);
 }
-const mo = /* @__PURE__ */ A(po, [["render", fo]]), vo = {}, go = {
+const _o = /* @__PURE__ */ R(go, [["render", yo]]), Co = {}, wo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -912,8 +949,8 @@ const mo = /* @__PURE__ */ A(po, [["render", fo]]), vo = {}, go = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-plus"
 };
-function bo(n, e) {
-  return p(), b("svg", go, [...e[0] || (e[0] = [
+function ko(n, e) {
+  return p(), b("svg", wo, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -923,7 +960,7 @@ function bo(n, e) {
     m("path", { d: "M5 12l14 0" }, null, -1)
   ])]);
 }
-const yo = /* @__PURE__ */ A(vo, [["render", bo]]), _o = {}, Co = {
+const xo = /* @__PURE__ */ R(Co, [["render", ko]]), Io = {}, No = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -935,12 +972,12 @@ const yo = /* @__PURE__ */ A(vo, [["render", bo]]), _o = {}, Co = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema"
 };
-function wo(n, e) {
-  return p(), b("svg", Co, [...e[0] || (e[0] = [
+function Eo(n, e) {
+  return p(), b("svg", No, [...e[0] || (e[0] = [
     fe('<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 ko = /* @__PURE__ */ A(_o, [["render", wo]]), xo = {}, Io = {
+const To = /* @__PURE__ */ R(Io, [["render", Eo]]), Oo = {}, Mo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -952,12 +989,12 @@ const ko = /* @__PURE__ */ A(_o, [["render", wo]]), xo = {}, Io = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema-off"
 };
-function No(n, e) {
-  return p(), b("svg", Io, [...e[0] || (e[0] = [
+function $o(n, e) {
+  return p(), b("svg", Mo, [...e[0] || (e[0] = [
     fe('<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 Eo = /* @__PURE__ */ A(xo, [["render", No]]), To = {}, Oo = {
+const So = /* @__PURE__ */ R(Oo, [["render", $o]]), Ao = {}, Go = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -969,12 +1006,12 @@ const Eo = /* @__PURE__ */ A(xo, [["render", No]]), To = {}, Oo = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-transition-bottom"
 };
-function $o(n, e) {
-  return p(), b("svg", Oo, [...e[0] || (e[0] = [
+function Ro(n, e) {
+  return p(), b("svg", Go, [...e[0] || (e[0] = [
     fe('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M21 18a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3"></path><path d="M3 3m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v0a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path><path d="M12 9v8"></path><path d="M9 14l3 3l3 -3"></path>', 5)
   ])]);
 }
-const Mo = /* @__PURE__ */ A(To, [["render", $o]]), So = {}, Po = {
+const jo = /* @__PURE__ */ R(Ao, [["render", Ro]]), Lo = {}, Po = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -986,12 +1023,12 @@ const Mo = /* @__PURE__ */ A(To, [["render", $o]]), So = {}, Po = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-trash-off"
 };
-function Go(n, e) {
+function Vo(n, e) {
   return p(), b("svg", Po, [...e[0] || (e[0] = [
     fe('<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 Ao = /* @__PURE__ */ A(So, [["render", Go]]), Ro = {}, jo = {
+const Bo = /* @__PURE__ */ R(Lo, [["render", Vo]]), Ho = {}, zo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1003,8 +1040,8 @@ const Ao = /* @__PURE__ */ A(So, [["render", Go]]), Ro = {}, jo = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-x"
 };
-function Lo(n, e) {
-  return p(), b("svg", jo, [...e[0] || (e[0] = [
+function Uo(n, e) {
+  return p(), b("svg", zo, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -1014,55 +1051,57 @@ function Lo(n, e) {
     m("path", { d: "M6 6l12 12" }, null, -1)
   ])]);
 }
-const Vo = /* @__PURE__ */ A(Ro, [["render", Lo]]), ft = "CLEAR_ALL", mt = "RUN_ENGINE", vt = "TOGGLE_MINIMAP", gt = "TOGGLE_PALETTE", Bo = (n, e, t) => {
+const Do = /* @__PURE__ */ R(Ho, [["render", Uo]]), vt = "CLEAR_ALL", gt = "RUN_ENGINE", bt = "TOGGLE_MINIMAP", yt = "TOGGLE_PALETTE", Fo = (n, e, t) => {
   const s = t.zoomToFit.paddingLeft;
-  e.registerCommand(gt, {
+  e.registerCommand(yt, {
     execute: () => {
       t.palette.enabled = !t.palette.enabled, t.zoomToFit.paddingLeft = t.palette.enabled ? s : 50;
     },
     canExecute: () => !0
-  }), e.registerCommand(ft, {
-    execute: () => n.value.clear(),
-    canExecute: () => n.value.nodes.length > 0
   }), e.registerCommand(vt, {
+    execute: () => {
+      e.executeCommand(ne.CLEAR_CLIPBOARD_COMMAND), e.executeCommand(ne.CLEAR_HISTORY_COMMAND), n.value.clear(), n.value.editor.code.clear();
+    },
+    canExecute: () => n.value.nodes.length > 0
+  }), e.registerCommand(bt, {
     execute: () => t.enableMinimap = !t.enableMinimap,
     canExecute: () => n.value.nodes.length > 1
   });
-}, Ho = (n) => {
+}, Yo = (n) => {
   const e = {
-    command: mt,
+    command: gt,
     title: "Run",
     // Tooltip text
-    icon: P(() => mo)
+    icon: A(() => _o)
   }, t = {
-    command: gt,
+    command: yt,
     title: "Toggle palette",
     // Tooltip text
-    icon: P(() => n.palette.enabled ? Fn : Kn)
+    icon: A(() => n.palette.enabled ? qn : eo)
   }, s = {
-    command: ft,
+    command: vt,
     title: "Clear all",
     // Tooltip text
-    icon: P(() => Ao)
+    icon: A(() => Bo)
   }, o = {
-    command: vt,
+    command: bt,
     title: "Toggle minimap",
     // Tooltip text
-    icon: P(() => n.enableMinimap ? Eo : ko)
+    icon: A(() => n.enableMinimap ? So : To)
   };
-  n.toolbar.commands = [t, e, ...Kt, s, o];
-}, zo = (n, e) => {
-  e.registerCommand(mt, {
-    execute: () => n.runOnce(null),
-    canExecute: () => !0
+  n.toolbar.commands = [t, e, ...qt, s, o];
+}, Wo = (n, e, t) => {
+  t.registerCommand(gt, {
+    execute: () => e.runOnce(null),
+    canExecute: () => n.nodes.length > 0
   });
 };
-function Uo(n) {
+function Ko(n) {
   const e = Symbol("CodeEngineToken");
-  n.engine = new In(n.editor), zo(n.engine, n.commandHandler), n.loadEditor = (t) => {
-    n.engine?.pause(), n.displayedGraph.clear(), n.editor.load(t), n.commandHandler.executeCommand(ue.CLEAR_CLIPBOARD_COMMAND), n.commandHandler.executeCommand(ue.CLEAR_HISTORY_COMMAND), n.engine?.resume(), n.engine?.runOnce(null);
+  n.engine = new Mn(n.editor), Wo(n.editor.graph, n.engine, n.commandHandler), n.loadEditor = (t) => {
+    n.engine?.pause(), n.displayedGraph.clear(), n.editor.load(t), n.commandHandler.executeCommand(ne.CLEAR_CLIPBOARD_COMMAND), n.commandHandler.executeCommand(ne.CLEAR_HISTORY_COMMAND), n.engine?.resume(), n.engine?.runOnce(null);
   }, n.newGraph = () => {
-    n.engine?.pause(), n.displayedGraph.clear(), n.commandHandler.executeCommand(ue.CLEAR_CLIPBOARD_COMMAND), n.commandHandler.executeCommand(ue.CLEAR_HISTORY_COMMAND), n.displayedGraph.id = re(), n.engine?.resume(), n.engine?.runOnce(null);
+    n.engine?.pause(), n.displayedGraph.clear(), n.commandHandler.executeCommand(ne.CLEAR_CLIPBOARD_COMMAND), n.commandHandler.executeCommand(ne.CLEAR_HISTORY_COMMAND), n.displayedGraph.id = re(), n.engine?.resume(), n.engine?.runOnce(null);
   }, n.subscribe = () => {
     n.displayedGraph.events.addConnection.subscribe(e, (t) => {
       const s = n.displayedGraph.findNodeById(t.to.nodeId);
@@ -1077,7 +1116,7 @@ function Uo(n) {
     }), n.engine?.events.beforeRun.subscribe(e, () => {
       n.engine?.pause(), n.displayedGraph.sortNodes(), n.engine?.resume();
     }), n.engine?.events.afterRun.subscribe(e, (t) => {
-      n.engine?.pause(), rt(t, n.editor), n.code.state.lockCode || n.code.renderCode({
+      n.engine?.pause(), nt(t, n.editor), n.code.state.lockCode || n.code.renderCode({
         nodes: n.editor.graph.scriptedCodeNodes,
         modules: n.editor.code.modules
       }), n.engine?.resume();
@@ -1086,7 +1125,7 @@ function Uo(n) {
     n.displayedGraph.events.addConnection.unsubscribe(e), n.displayedGraph.events.removeConnection.unsubscribe(e), n.engine?.events.beforeRun.unsubscribe(e), n.engine?.events.afterRun.unsubscribe(e);
   };
 }
-class Ie extends Pt {
+class Ie extends Rt {
   code = null;
   editor;
   _state = te({
@@ -1097,7 +1136,7 @@ class Ie extends Pt {
     super(e, t), this.editor = e, this.template = t, e.code && (this.code = e.code);
   }
   get codeNodes() {
-    return bt(this);
+    return _t(this);
   }
   get connections() {
     return super.connections;
@@ -1207,31 +1246,31 @@ class Ie extends Pt {
       try {
         let e = this.nodeIds;
         const t = this.connections.filter(
-          (r) => e.includes(r.to.nodeId) && e.includes(r.from.nodeId)
-        ).map((r) => [r.to.nodeId, r.from.nodeId]);
-        e.reverse(), e = cn.array(e, t), e.reverse();
-        const s = this.nodes.map((r) => r.id).filter((r) => !e.includes(r));
+          (a) => e.includes(a.to.nodeId) && e.includes(a.from.nodeId)
+        ).map((a) => [a.to.nodeId, a.from.nodeId]);
+        e.reverse(), e = pn.array(e, t), e.reverse();
+        const s = this.nodes.map((a) => a.id).filter((a) => !e.includes(a));
         e = [...e, ...s];
-        const o = e.map((r) => this.findNodeById(r));
+        const o = e.map((a) => this.findNodeById(a));
         o && (this.nodes = o);
       } catch {
         console.warn("Failed to sort nodes.");
       }
   }
 }
-const bt = (n) => {
+const _t = (n) => {
   const e = [];
   return n.nodes.length === 0 || n.nodes.forEach((t) => {
-    t && (t.hasOwnProperty("subgraph") ? e.push(...bt(t.subgraph)) : t.hasOwnProperty("isCodeNode") && e.push(t));
+    t && (t.hasOwnProperty("subgraph") ? e.push(..._t(t.subgraph)) : t.hasOwnProperty("isCodeNode") && e.push(t));
   }), e;
-}, br = (n = 0, e = 100) => ({
+}, ba = (n = 0, e = 100) => ({
   x: n * 420,
   y: e
-}), yr = (n) => {
+}), ya = (n) => {
   const e = { ...n.position };
   return e.x -= 440, e.y += 50, e;
-}, We = "__baklava_SubgraphInputNode", Ye = "__baklava_SubgraphOutputNode";
-class yt extends Re {
+}, Ue = "__baklava_SubgraphInputNode", De = "__baklava_SubgraphOutputNode";
+class Ct extends Re {
   graphInterfaceId;
   constructor() {
     super(), this.graphInterfaceId = re();
@@ -1251,11 +1290,11 @@ class yt extends Re {
   update() {
   }
 }
-class _t extends yt {
+class wt extends Ct {
   static isGraphInputNode(e) {
-    return e.type === We;
+    return e.type === Ue;
   }
-  type = We;
+  type = Ue;
   inputs = {
     name: new J("Name", "Input")
   };
@@ -1263,11 +1302,11 @@ class _t extends yt {
     placeholder: new J("Value", void 0)
   };
 }
-class Ct extends yt {
+class kt extends Ct {
   static isGraphOutputNode(e) {
-    return e.type === Ye;
+    return e.type === De;
   }
-  type = Ye;
+  type = De;
   inputs = {
     name: new J("Name", "Output"),
     placeholder: new J("Value", void 0)
@@ -1279,7 +1318,7 @@ class Ct extends yt {
     output: e
   });
 }
-const Do = [
+const Xo = [
   "component",
   "connectionCount",
   "events",
@@ -1294,9 +1333,9 @@ const Do = [
   "templateId",
   "value"
 ];
-function Fo(n) {
-  return class extends lt {
-    type = st(n);
+function qo(n) {
+  return class extends rt {
+    type = tt(n);
     get title() {
       return this._title;
     }
@@ -1318,18 +1357,18 @@ function Fo(n) {
       if (!s.engine || typeof s.engine != "object")
         throw new Error(`GraphNode ${this.id}: calculate called but no engine provided in context`);
       const o = s.engine.getInputValues(this.subgraph);
-      for (const a of this.subgraph.inputs)
-        o.set(a.nodeInterfaceId, t[a.id]);
-      const r = await s.engine.runGraph(
+      for (const r of this.subgraph.inputs)
+        o.set(r.nodeInterfaceId, t[r.id]);
+      const a = await s.engine.runGraph(
         this.subgraph,
         o,
         s.globalValues
       );
-      s.engine.pause(), rt(r, s.engine.editor), s.engine.resume();
+      s.engine.pause(), nt(a, s.engine.editor), s.engine.resume();
       const i = {};
-      for (const a of this.subgraph.outputs)
-        i[a.id] = r.get(a.nodeId)?.get("output");
-      return i._calculationResults = r, this.lockCode || (i._code = this.renderCode({ inputs: t, ...s.globalValues })), this.updateOutputValues(i), i;
+      for (const r of this.subgraph.outputs)
+        i[r.id] = a.get(r.nodeId)?.get("output");
+      return i._calculationResults = a, this.lockCode || (i._code = this.renderCode({ inputs: t, ...s.globalValues })), this.updateOutputValues(i), i;
     };
     load(t) {
       if (!this.subgraph) throw new Error("Cannot load a graph node without a graph");
@@ -1373,10 +1412,10 @@ function Fo(n) {
         this.subgraph.outputs.some((s) => s.id === t) || this.removeOutput(t);
       this.addInput(
         "_code",
-        new D("", []).use(V, X).use(de).setHidden(!0)
+        new D("_code", []).use(V, K).use(ue).setHidden(!0)
       ), this.addOutput(
         "_code",
-        new D("", []).use(V, X).use(de).setHidden(!0)
+        new D("_code", []).use(V, K).use(ue).setHidden(!0)
       ), this.addOutput("_calculationResults", new J("_calculationResults", void 0).setHidden(!0));
     }
     /**
@@ -1387,29 +1426,29 @@ function Fo(n) {
     createProxyInterface(t, s) {
       const o = new D(t.name, void 0);
       return new Proxy(o, {
-        get: (r, i) => {
-          if (Do.includes(i) || i in r || typeof i == "string" && i.startsWith("__v_"))
-            return Reflect.get(r, i);
-          let a;
-          s ? a = this.subgraph?.nodes.find(
-            (C) => _t.isGraphInputNode(C) && C.graphInterfaceId === t.id
-          )?.outputs.placeholder.id : a = this.subgraph?.nodes.find(
-            (C) => Ct.isGraphOutputNode(C) && C.graphInterfaceId === t.id
+        get: (a, i) => {
+          if (Xo.includes(i) || i in a || typeof i == "string" && i.startsWith("__v_"))
+            return Reflect.get(a, i);
+          let r;
+          s ? r = this.subgraph?.nodes.find(
+            (C) => wt.isGraphInputNode(C) && C.graphInterfaceId === t.id
+          )?.outputs.placeholder.id : r = this.subgraph?.nodes.find(
+            (C) => kt.isGraphOutputNode(C) && C.graphInterfaceId === t.id
           )?.inputs.placeholder.id;
-          const l = this.subgraph?.connections.find((f) => a === (s ? f.from : f.to)?.id), d = s ? l?.to : l?.from;
-          if (d) return Reflect.get(d, i);
+          const l = this.subgraph?.connections.find((f) => r === (s ? f.from : f.to)?.id), u = s ? l?.to : l?.from;
+          if (u) return Reflect.get(u, i);
         }
       });
     }
   };
 }
-function Wo(n, e) {
+function Jo(n, e) {
   return Object.fromEntries(Object.entries(n).filter(e));
 }
-function Yo(n, e) {
+function Qo(n, e) {
   return Object.fromEntries(Object.entries(n).map(([t, s]) => [t, e(s)]));
 }
-class Ne extends Gt {
+class Ne extends jt {
   /** Create a new GraphTemplate from the nodes and connections inside the graph instance */
   static fromGraph(e, t) {
     return new Ne(e.save(), t);
@@ -1432,16 +1471,16 @@ class Ne extends Gt {
       const N = t.get(h);
       if (!N) throw new Error(`Unable to create graph from template: Could not map old id ${h} to new id`);
       return N;
-    }, r = (h) => Yo(h, (N) => ({
+    }, a = (h) => Qo(h, (N) => ({
       id: s(N.id),
       templateId: N.id,
       value: N.value
     })), i = this.nodes.map((h) => ({
       ...h,
       id: s(h.id),
-      inputs: r(h.inputs),
-      outputs: r(h.outputs)
-    })), a = this.connections.map((h) => ({
+      inputs: a(h.inputs),
+      outputs: a(h.outputs)
+    })), r = this.connections.map((h) => ({
       id: s(h.id),
       from: o(h.from),
       to: o(h.to)
@@ -1450,7 +1489,7 @@ class Ne extends Gt {
       name: h.name,
       nodeId: o(h.nodeId),
       nodeInterfaceId: o(h.nodeInterfaceId)
-    })), d = this.outputs.map((h) => ({
+    })), u = this.outputs.map((h) => ({
       id: h.id,
       name: h.name,
       nodeId: o(h.nodeId),
@@ -1458,18 +1497,18 @@ class Ne extends Gt {
     })), f = {
       id: re(),
       nodes: i,
-      connections: a,
+      connections: r,
       inputs: l,
-      outputs: d
+      outputs: u
     };
     return e || (e = new Ie(this.editor)), e.load(f).forEach((h) => console.warn(h)), e.template = this, e;
   }
 }
-const Xo = (n) => !(n instanceof Ie);
-function Ko(n, e) {
+const Zo = (n) => !(n instanceof Ie);
+function es(n, e) {
   return { switchGraph: (s) => {
     let o;
-    if (Xo(s))
+    if (Zo(s))
       o = new Ie(n.value), s.createGraph(o);
     else {
       if (s !== n.value.graph)
@@ -1481,16 +1520,16 @@ function Ko(n, e) {
     e.value && e.value !== n.value.graph && e.value.destroy(), o.panning = o.panning ?? s.panning ?? { x: 0, y: 0 }, o.scaling = o.scaling ?? s.scaling ?? 1, o.selectedNodes = o.selectedNodes ?? [], o.sidebar = o.sidebar ?? { visible: !1, nodeId: "", optionName: "" }, e.value = o, o.code?.engine?.runOnce(null);
   } };
 }
-function qo(n) {
+function ts(n) {
   return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n;
 }
 var we = { exports: {} };
-var Jo = we.exports, Xe;
-function Qo() {
-  return Xe || (Xe = 1, (function(n, e) {
+var ns = we.exports, Fe;
+function os() {
+  return Fe || (Fe = 1, (function(n, e) {
     (function(s, o) {
       n.exports = o();
-    })(Jo, function() {
+    })(ns, function() {
       return (
         /******/
         (function() {
@@ -1498,16 +1537,16 @@ function Qo() {
             /***/
             686: (
               /***/
-              (function(r, i, a) {
-                a.d(i, {
+              (function(a, i, r) {
+                r.d(i, {
                   default: function() {
                     return (
                       /* binding */
-                      $
+                      M
                     );
                   }
                 });
-                var l = a(279), d = /* @__PURE__ */ a.n(l), f = a(370), C = /* @__PURE__ */ a.n(f), h = a(817), N = /* @__PURE__ */ a.n(h);
+                var l = r(279), u = /* @__PURE__ */ r.n(l), f = r(370), C = /* @__PURE__ */ r.n(f), h = r(817), N = /* @__PURE__ */ r.n(h);
                 function v(g) {
                   try {
                     return document.execCommand(g);
@@ -1518,14 +1557,14 @@ function Qo() {
                 var w = function(c) {
                   var _ = N()(c);
                   return v("cut"), _;
-                }, u = w;
+                }, d = w;
                 function y(g) {
                   var c = document.documentElement.getAttribute("dir") === "rtl", _ = document.createElement("textarea");
                   _.style.fontSize = "12pt", _.style.border = "0", _.style.padding = "0", _.style.margin = "0", _.style.position = "absolute", _.style[c ? "right" : "left"] = "-9999px";
                   var x = window.pageYOffset || document.documentElement.scrollTop;
                   return _.style.top = "".concat(x, "px"), _.setAttribute("readonly", ""), _.value = g, _;
                 }
-                var M = function(c, _) {
+                var $ = function(c, _) {
                   var x = y(c);
                   _.container.appendChild(x);
                   var I = N()(x);
@@ -1534,7 +1573,7 @@ function Qo() {
                   var _ = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
                     container: document.body
                   }, x = "";
-                  return typeof c == "string" ? x = M(c, _) : c instanceof HTMLInputElement && !["text", "search", "url", "tel", "password"].includes(c?.type) ? x = M(c.value, _) : (x = N()(c), v("copy")), x;
+                  return typeof c == "string" ? x = $(c, _) : c instanceof HTMLInputElement && !["text", "search", "url", "tel", "password"].includes(c?.type) ? x = $(c.value, _) : (x = N()(c), v("copy")), x;
                 }, S = T;
                 function Q(g) {
                   "@babel/helpers - typeof";
@@ -1545,7 +1584,7 @@ function Qo() {
                   }, Q(g);
                 }
                 var Z = function() {
-                  var c = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ = c.action, x = _ === void 0 ? "copy" : _, I = c.container, E = c.target, Y = c.text;
+                  var c = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ = c.action, x = _ === void 0 ? "copy" : _, I = c.container, E = c.target, W = c.text;
                   if (x !== "copy" && x !== "cut")
                     throw new Error('Invalid "action" value, use either "copy" or "cut"');
                   if (E !== void 0)
@@ -1556,35 +1595,35 @@ function Qo() {
                         throw new Error(`Invalid "target" attribute. You can't cut text from elements with "readonly" or "disabled" attributes`);
                     } else
                       throw new Error('Invalid "target" value, use a valid Element');
-                  if (Y)
-                    return S(Y, {
+                  if (W)
+                    return S(W, {
                       container: I
                     });
                   if (E)
-                    return x === "cut" ? u(E) : S(E, {
+                    return x === "cut" ? d(E) : S(E, {
                       container: I
                     });
                 }, pe = Z;
-                function K(g) {
+                function X(g) {
                   "@babel/helpers - typeof";
-                  return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? K = function(_) {
+                  return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? X = function(_) {
                     return typeof _;
-                  } : K = function(_) {
+                  } : X = function(_) {
                     return _ && typeof Symbol == "function" && _.constructor === Symbol && _ !== Symbol.prototype ? "symbol" : typeof _;
-                  }, K(g);
+                  }, X(g);
                 }
                 function k(g, c) {
                   if (!(g instanceof c))
                     throw new TypeError("Cannot call a class as a function");
                 }
-                function R(g, c) {
+                function j(g, c) {
                   for (var _ = 0; _ < c.length; _++) {
                     var x = c[_];
                     x.enumerable = x.enumerable || !1, x.configurable = !0, "value" in x && (x.writable = !0), Object.defineProperty(g, x.key, x);
                   }
                 }
                 function z(g, c, _) {
-                  return c && R(g.prototype, c), _ && R(g, _), g;
+                  return c && j(g.prototype, c), _ && j(g, _), g;
                 }
                 function ge(g, c) {
                   if (typeof c != "function" && c !== null)
@@ -1599,9 +1638,9 @@ function Qo() {
                 function Ee(g) {
                   var c = Te();
                   return function() {
-                    var x = oe(g), I;
+                    var x = se(g), I;
                     if (c) {
-                      var E = oe(this).constructor;
+                      var E = se(this).constructor;
                       I = Reflect.construct(x, arguments, E);
                     } else
                       I = x.apply(this, arguments);
@@ -1609,7 +1648,7 @@ function Qo() {
                   };
                 }
                 function be(g, c) {
-                  return c && (K(c) === "object" || typeof c == "function") ? c : ye(g);
+                  return c && (X(c) === "object" || typeof c == "function") ? c : ye(g);
                 }
                 function ye(g) {
                   if (g === void 0)
@@ -1626,12 +1665,12 @@ function Qo() {
                     return !1;
                   }
                 }
-                function oe(g) {
-                  return oe = Object.setPrototypeOf ? Object.getPrototypeOf : function(_) {
+                function se(g) {
+                  return se = Object.setPrototypeOf ? Object.getPrototypeOf : function(_) {
                     return _.__proto__ || Object.getPrototypeOf(_);
-                  }, oe(g);
+                  }, se(g);
                 }
-                function ie(g, c) {
+                function le(g, c) {
                   var _ = "data-clipboard-".concat(g);
                   if (c.hasAttribute(_))
                     return c.getAttribute(_);
@@ -1647,7 +1686,7 @@ function Qo() {
                     key: "resolveOptions",
                     value: function() {
                       var I = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-                      this.action = typeof I.action == "function" ? I.action : this.defaultAction, this.target = typeof I.target == "function" ? I.target : this.defaultTarget, this.text = typeof I.text == "function" ? I.text : this.defaultText, this.container = K(I.container) === "object" ? I.container : document.body;
+                      this.action = typeof I.action == "function" ? I.action : this.defaultAction, this.target = typeof I.target == "function" ? I.target : this.defaultTarget, this.text = typeof I.text == "function" ? I.text : this.defaultText, this.container = X(I.container) === "object" ? I.container : document.body;
                     }
                     /**
                      * Adds a click event listener to the passed trigger.
@@ -1657,8 +1696,8 @@ function Qo() {
                     key: "listenClick",
                     value: function(I) {
                       var E = this;
-                      this.listener = C()(I, "click", function(Y) {
-                        return E.onClick(Y);
+                      this.listener = C()(I, "click", function(W) {
+                        return E.onClick(W);
                       });
                     }
                     /**
@@ -1668,14 +1707,14 @@ function Qo() {
                   }, {
                     key: "onClick",
                     value: function(I) {
-                      var E = I.delegateTarget || I.currentTarget, Y = this.action(E) || "copy", Ce = pe({
-                        action: Y,
+                      var E = I.delegateTarget || I.currentTarget, W = this.action(E) || "copy", Ce = pe({
+                        action: W,
                         container: this.container,
                         target: this.target(E),
                         text: this.text(E)
                       });
                       this.emit(Ce ? "success" : "error", {
-                        action: Y,
+                        action: W,
                         text: Ce,
                         trigger: E,
                         clearSelection: function() {
@@ -1690,7 +1729,7 @@ function Qo() {
                   }, {
                     key: "defaultAction",
                     value: function(I) {
-                      return ie("action", I);
+                      return le("action", I);
                     }
                     /**
                      * Default `target` lookup function.
@@ -1699,7 +1738,7 @@ function Qo() {
                   }, {
                     key: "defaultTarget",
                     value: function(I) {
-                      var E = ie("target", I);
+                      var E = le("target", I);
                       if (E)
                         return document.querySelector(E);
                     }
@@ -1716,7 +1755,7 @@ function Qo() {
                      * @param {Element} trigger
                      */
                     value: function(I) {
-                      return ie("text", I);
+                      return le("text", I);
                     }
                     /**
                      * Destroy lifecycle.
@@ -1742,7 +1781,7 @@ function Qo() {
                   }, {
                     key: "cut",
                     value: function(I) {
-                      return u(I);
+                      return d(I);
                     }
                     /**
                      * Returns the support of the given action, or all actions if no action is
@@ -1752,73 +1791,73 @@ function Qo() {
                   }, {
                     key: "isSupported",
                     value: function() {
-                      var I = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : ["copy", "cut"], E = typeof I == "string" ? [I] : I, Y = !!document.queryCommandSupported;
+                      var I = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : ["copy", "cut"], E = typeof I == "string" ? [I] : I, W = !!document.queryCommandSupported;
                       return E.forEach(function(Ce) {
-                        Y = Y && !!document.queryCommandSupported(Ce);
-                      }), Y;
+                        W = W && !!document.queryCommandSupported(Ce);
+                      }), W;
                     }
                   }]), _;
-                })(d()), $ = _e;
+                })(u()), M = _e;
               })
             ),
             /***/
             828: (
               /***/
-              (function(r) {
+              (function(a) {
                 var i = 9;
                 if (typeof Element < "u" && !Element.prototype.matches) {
-                  var a = Element.prototype;
-                  a.matches = a.matchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector || a.webkitMatchesSelector;
+                  var r = Element.prototype;
+                  r.matches = r.matchesSelector || r.mozMatchesSelector || r.msMatchesSelector || r.oMatchesSelector || r.webkitMatchesSelector;
                 }
-                function l(d, f) {
-                  for (; d && d.nodeType !== i; ) {
-                    if (typeof d.matches == "function" && d.matches(f))
-                      return d;
-                    d = d.parentNode;
+                function l(u, f) {
+                  for (; u && u.nodeType !== i; ) {
+                    if (typeof u.matches == "function" && u.matches(f))
+                      return u;
+                    u = u.parentNode;
                   }
                 }
-                r.exports = l;
+                a.exports = l;
               })
             ),
             /***/
             438: (
               /***/
-              (function(r, i, a) {
-                var l = a(828);
-                function d(h, N, v, w, u) {
+              (function(a, i, r) {
+                var l = r(828);
+                function u(h, N, v, w, d) {
                   var y = C.apply(this, arguments);
-                  return h.addEventListener(v, y, u), {
+                  return h.addEventListener(v, y, d), {
                     destroy: function() {
-                      h.removeEventListener(v, y, u);
+                      h.removeEventListener(v, y, d);
                     }
                   };
                 }
-                function f(h, N, v, w, u) {
-                  return typeof h.addEventListener == "function" ? d.apply(null, arguments) : typeof v == "function" ? d.bind(null, document).apply(null, arguments) : (typeof h == "string" && (h = document.querySelectorAll(h)), Array.prototype.map.call(h, function(y) {
-                    return d(y, N, v, w, u);
+                function f(h, N, v, w, d) {
+                  return typeof h.addEventListener == "function" ? u.apply(null, arguments) : typeof v == "function" ? u.bind(null, document).apply(null, arguments) : (typeof h == "string" && (h = document.querySelectorAll(h)), Array.prototype.map.call(h, function(y) {
+                    return u(y, N, v, w, d);
                   }));
                 }
                 function C(h, N, v, w) {
-                  return function(u) {
-                    u.delegateTarget = l(u.target, N), u.delegateTarget && w.call(h, u);
+                  return function(d) {
+                    d.delegateTarget = l(d.target, N), d.delegateTarget && w.call(h, d);
                   };
                 }
-                r.exports = f;
+                a.exports = f;
               })
             ),
             /***/
             879: (
               /***/
-              (function(r, i) {
-                i.node = function(a) {
-                  return a !== void 0 && a instanceof HTMLElement && a.nodeType === 1;
-                }, i.nodeList = function(a) {
-                  var l = Object.prototype.toString.call(a);
-                  return a !== void 0 && (l === "[object NodeList]" || l === "[object HTMLCollection]") && "length" in a && (a.length === 0 || i.node(a[0]));
-                }, i.string = function(a) {
-                  return typeof a == "string" || a instanceof String;
-                }, i.fn = function(a) {
-                  var l = Object.prototype.toString.call(a);
+              (function(a, i) {
+                i.node = function(r) {
+                  return r !== void 0 && r instanceof HTMLElement && r.nodeType === 1;
+                }, i.nodeList = function(r) {
+                  var l = Object.prototype.toString.call(r);
+                  return r !== void 0 && (l === "[object NodeList]" || l === "[object HTMLCollection]") && "length" in r && (r.length === 0 || i.node(r[0]));
+                }, i.string = function(r) {
+                  return typeof r == "string" || r instanceof String;
+                }, i.fn = function(r) {
+                  var l = Object.prototype.toString.call(r);
                   return l === "[object Function]";
                 };
               })
@@ -1826,111 +1865,111 @@ function Qo() {
             /***/
             370: (
               /***/
-              (function(r, i, a) {
-                var l = a(879), d = a(438);
-                function f(v, w, u) {
-                  if (!v && !w && !u)
+              (function(a, i, r) {
+                var l = r(879), u = r(438);
+                function f(v, w, d) {
+                  if (!v && !w && !d)
                     throw new Error("Missing required arguments");
                   if (!l.string(w))
                     throw new TypeError("Second argument must be a String");
-                  if (!l.fn(u))
+                  if (!l.fn(d))
                     throw new TypeError("Third argument must be a Function");
                   if (l.node(v))
-                    return C(v, w, u);
+                    return C(v, w, d);
                   if (l.nodeList(v))
-                    return h(v, w, u);
+                    return h(v, w, d);
                   if (l.string(v))
-                    return N(v, w, u);
+                    return N(v, w, d);
                   throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList");
                 }
-                function C(v, w, u) {
-                  return v.addEventListener(w, u), {
+                function C(v, w, d) {
+                  return v.addEventListener(w, d), {
                     destroy: function() {
-                      v.removeEventListener(w, u);
+                      v.removeEventListener(w, d);
                     }
                   };
                 }
-                function h(v, w, u) {
+                function h(v, w, d) {
                   return Array.prototype.forEach.call(v, function(y) {
-                    y.addEventListener(w, u);
+                    y.addEventListener(w, d);
                   }), {
                     destroy: function() {
                       Array.prototype.forEach.call(v, function(y) {
-                        y.removeEventListener(w, u);
+                        y.removeEventListener(w, d);
                       });
                     }
                   };
                 }
-                function N(v, w, u) {
-                  return d(document.body, v, w, u);
+                function N(v, w, d) {
+                  return u(document.body, v, w, d);
                 }
-                r.exports = f;
+                a.exports = f;
               })
             ),
             /***/
             817: (
               /***/
-              (function(r) {
-                function i(a) {
+              (function(a) {
+                function i(r) {
                   var l;
-                  if (a.nodeName === "SELECT")
-                    a.focus(), l = a.value;
-                  else if (a.nodeName === "INPUT" || a.nodeName === "TEXTAREA") {
-                    var d = a.hasAttribute("readonly");
-                    d || a.setAttribute("readonly", ""), a.select(), a.setSelectionRange(0, a.value.length), d || a.removeAttribute("readonly"), l = a.value;
+                  if (r.nodeName === "SELECT")
+                    r.focus(), l = r.value;
+                  else if (r.nodeName === "INPUT" || r.nodeName === "TEXTAREA") {
+                    var u = r.hasAttribute("readonly");
+                    u || r.setAttribute("readonly", ""), r.select(), r.setSelectionRange(0, r.value.length), u || r.removeAttribute("readonly"), l = r.value;
                   } else {
-                    a.hasAttribute("contenteditable") && a.focus();
+                    r.hasAttribute("contenteditable") && r.focus();
                     var f = window.getSelection(), C = document.createRange();
-                    C.selectNodeContents(a), f.removeAllRanges(), f.addRange(C), l = f.toString();
+                    C.selectNodeContents(r), f.removeAllRanges(), f.addRange(C), l = f.toString();
                   }
                   return l;
                 }
-                r.exports = i;
+                a.exports = i;
               })
             ),
             /***/
             279: (
               /***/
-              (function(r) {
+              (function(a) {
                 function i() {
                 }
                 i.prototype = {
-                  on: function(a, l, d) {
+                  on: function(r, l, u) {
                     var f = this.e || (this.e = {});
-                    return (f[a] || (f[a] = [])).push({
+                    return (f[r] || (f[r] = [])).push({
                       fn: l,
-                      ctx: d
+                      ctx: u
                     }), this;
                   },
-                  once: function(a, l, d) {
+                  once: function(r, l, u) {
                     var f = this;
                     function C() {
-                      f.off(a, C), l.apply(d, arguments);
+                      f.off(r, C), l.apply(u, arguments);
                     }
-                    return C._ = l, this.on(a, C, d);
+                    return C._ = l, this.on(r, C, u);
                   },
-                  emit: function(a) {
-                    var l = [].slice.call(arguments, 1), d = ((this.e || (this.e = {}))[a] || []).slice(), f = 0, C = d.length;
+                  emit: function(r) {
+                    var l = [].slice.call(arguments, 1), u = ((this.e || (this.e = {}))[r] || []).slice(), f = 0, C = u.length;
                     for (f; f < C; f++)
-                      d[f].fn.apply(d[f].ctx, l);
+                      u[f].fn.apply(u[f].ctx, l);
                     return this;
                   },
-                  off: function(a, l) {
-                    var d = this.e || (this.e = {}), f = d[a], C = [];
+                  off: function(r, l) {
+                    var u = this.e || (this.e = {}), f = u[r], C = [];
                     if (f && l)
                       for (var h = 0, N = f.length; h < N; h++)
                         f[h].fn !== l && f[h].fn._ !== l && C.push(f[h]);
-                    return C.length ? d[a] = C : delete d[a], this;
+                    return C.length ? u[r] = C : delete u[r], this;
                   }
-                }, r.exports = i, r.exports.TinyEmitter = i;
+                }, a.exports = i, a.exports.TinyEmitter = i;
               })
             )
             /******/
           }, s = {};
-          function o(r) {
-            if (s[r])
-              return s[r].exports;
-            var i = s[r] = {
+          function o(a) {
+            if (s[a])
+              return s[a].exports;
+            var i = s[a] = {
               /******/
               // no module.id needed
               /******/
@@ -1939,31 +1978,31 @@ function Qo() {
               exports: {}
               /******/
             };
-            return t[r](i, i.exports, o), i.exports;
+            return t[a](i, i.exports, o), i.exports;
           }
           return (function() {
-            o.n = function(r) {
-              var i = r && r.__esModule ? (
+            o.n = function(a) {
+              var i = a && a.__esModule ? (
                 /******/
                 function() {
-                  return r.default;
+                  return a.default;
                 }
               ) : (
                 /******/
                 function() {
-                  return r;
+                  return a;
                 }
               );
               return o.d(i, { a: i }), i;
             };
           })(), (function() {
-            o.d = function(r, i) {
-              for (var a in i)
-                o.o(i, a) && !o.o(r, a) && Object.defineProperty(r, a, { enumerable: !0, get: i[a] });
+            o.d = function(a, i) {
+              for (var r in i)
+                o.o(i, r) && !o.o(a, r) && Object.defineProperty(a, r, { enumerable: !0, get: i[r] });
             };
           })(), (function() {
-            o.o = function(r, i) {
-              return Object.prototype.hasOwnProperty.call(r, i);
+            o.o = function(a, i) {
+              return Object.prototype.hasOwnProperty.call(a, i);
             };
           })(), o(686);
         })().default
@@ -1971,75 +2010,75 @@ function Qo() {
     });
   })(we)), we.exports;
 }
-var Zo = Qo();
-const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
+var ss = os();
+const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
   toClipboard(e, t) {
     return new Promise((s, o) => {
-      const r = document.createElement("button"), i = new es(r, {
+      const a = document.createElement("button"), i = new as(a, {
         text: () => e,
         action: () => "copy",
         container: t !== void 0 ? t : document.body
       });
-      i.on("success", (a) => {
-        i.destroy(), s(a);
-      }), i.on("error", (a) => {
-        i.destroy(), o(a);
-      }), document.body.appendChild(r), r.click(), document.body.removeChild(r);
+      i.on("success", (r) => {
+        i.destroy(), s(r);
+      }), i.on("error", (r) => {
+        i.destroy(), o(r);
+      }), document.body.appendChild(a), a.click(), document.body.removeChild(a);
     });
   }
-}), ns = {
+}), is = {
   key: 0,
   class: "baklava-button"
-}, os = /* @__PURE__ */ F({
+}, ls = /* @__PURE__ */ F({
   __name: "CopyToClipboard",
   props: { text: String },
   setup(n) {
-    const { toClipboard: e } = ts(), s = Me(n, "text"), o = H(!1), r = async () => {
+    const { toClipboard: e } = rs(), s = $e(n, "text"), o = H(!1), a = async () => {
       try {
         await e(s.value), o.value = !0, setTimeout(() => o.value = !1, 1500), console.log("Copied to clipboard");
       } catch (i) {
         console.error(i);
       }
     };
-    return (i, a) => (p(), b("div", null, [
-      o.value ? (p(), b("button", ns, [
-        G(O(On))
+    return (i, r) => (p(), b("div", null, [
+      o.value ? (p(), b("button", is, [
+        G(O(Gn))
       ])) : (p(), b("button", {
         key: 1,
-        onClick: r,
+        onClick: a,
         class: "baklava-button"
       }, [
-        G(O(jn))
+        G(O(zn))
       ]))
     ]));
   }
-}), ss = { class: "code-editor" }, rs = { class: "code-buttons" }, Cr = /* @__PURE__ */ F({
+}), ds = { class: "code-editor" }, us = { class: "code-buttons" }, Ca = /* @__PURE__ */ F({
   __name: "CodeEditor",
-  props: /* @__PURE__ */ Ue({
+  props: /* @__PURE__ */ Be({
     locked: { type: Boolean },
     extensions: {}
   }, {
     modelValue: { required: !0, type: String },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ Ue(["update:locked"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ Be(["update:locked"], ["update:modelValue"]),
   setup(n, { emit: e }) {
-    const t = xt(n, "modelValue"), s = e, o = (r) => s("update:locked", r);
-    return (r, i) => {
-      const a = Ze("codemirror");
-      return p(), b("div", ss, [
-        m("div", rs, [
+    const t = Nt(n, "modelValue"), s = e, o = (a) => s("update:locked", a);
+    return (a, i) => {
+      const r = qe("codemirror");
+      return p(), b("div", ds, [
+        m("div", us, [
           n.locked ? (p(), b("button", {
             key: 0,
             class: "baklava-button",
             title: "The code is locked.",
             onClick: i[0] || (i[0] = (l) => o(!1))
           }, [
-            G(O(ht))
-          ])) : j("", !0),
-          G(os, { text: n.modelValue }, null, 8, ["text"])
+            G(O(mt))
+          ])) : L("", !0),
+          G(ls, { text: n.modelValue }, null, 8, ["text"])
         ]),
-        G(a, {
+        G(r, {
           modelValue: t.value,
           "onUpdate:modelValue": i[1] || (i[1] = (l) => t.value = l),
           extensions: n.extensions,
@@ -2050,60 +2089,56 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
       ]);
     };
   }
-}), wr = /* @__PURE__ */ F({
+}), wa = /* @__PURE__ */ F({
   __name: "CodeGraphEditor",
   props: {
     viewModel: {}
   },
   setup(n) {
-    const t = Me(n, "viewModel"), s = (o) => o.events.update.emit(null);
-    return Se(() => {
-      t.value.subscribe && t.value.subscribe(), t.value.engine?.start();
-    }), et(() => {
-      t.value.unsubscribe && t.value.unsubscribe(), t.value.engine?.stop();
-    }), tt(t, (o, r) => {
-      r && r.unsubscribe(), o && o.subscribe();
-    }), (o, r) => (p(), B(O(qt), { viewModel: t.value }, {
+    const t = $e(n, "viewModel"), s = (o) => o.events.update.emit(null);
+    return Se(t.value.onMounted), Je(t.value.onBeforeUnmount), Qe(t, (o, a) => {
+      a && a.onBeforeUnmount(), o && o.onMounted();
+    }), (o, a) => (p(), B(O(Jt), { "view-model": t.value }, {
       palette: ee(() => [
-        G(O(As))
+        G(O(Bs))
       ]),
       node: ee((i) => [
-        G(O(gs), Et(i, {
-          onUpdate: (a) => s(i.node)
+        G(O(ws), Ot(i, {
+          onUpdate: (r) => s(i.node)
         }), null, 16, ["onUpdate"])
       ]),
       sidebar: ee((i) => [
-        G(O($s), It(Nt(i)), {
-          codeEditor: ee(({ node: a }) => [
-            q(o.$slots, "sidebarCodeEditor", { node: a })
+        G(O(Rs), Et(Tt(i)), {
+          codeEditor: ee(({ node: r }) => [
+            q(o.$slots, "sidebarCodeEditor", { node: r })
           ]),
           _: 3
         }, 16)
       ]),
       _: 3
-    }, 8, ["viewModel"]));
+    }, 8, ["view-model"]));
   }
-}), as = { class: "code-graph-info" }, kr = /* @__PURE__ */ F({
+}), cs = { class: "code-graph-info" }, ka = /* @__PURE__ */ F({
   __name: "CodeGraphInfo",
   props: {
     viewModel: {}
   },
   setup(n) {
-    return (e, t) => (p(), b("div", as, [
-      m("div", null, "Editor graph: " + L(n.viewModel.editor.graph.shortId), 1),
-      m("div", null, "Displayed graph: " + L(n.viewModel.displayedGraph.shortId), 1),
-      m("div", null, "Graphs: " + L(n.viewModel.editor.graphIds), 1),
-      m("div", null, "Graph templates: " + L(n.viewModel.editor.graphTemplateIds), 1),
-      m("div", null, "Engine status: " + L(n.viewModel.engine?.status), 1)
+    return (e, t) => (p(), b("div", cs, [
+      m("div", null, "Editor graph: " + P(n.viewModel.editor.graph.shortId), 1),
+      m("div", null, "Displayed graph: " + P(n.viewModel.displayedGraph.shortId), 1),
+      m("div", null, "Graphs: " + P(n.viewModel.editor.graphIds), 1),
+      m("div", null, "Graph templates: " + P(n.viewModel.editor.graphTemplateIds), 1),
+      m("div", null, "Engine status: " + P(n.viewModel.engine?.status), 1)
     ]));
   }
-}), is = ["id", "data-node-type"], ls = {
+}), ps = ["data-node-type", "id"], hs = {
   class: "__title-label",
   style: { "flex-grow": "1" }
-}, us = { key: 0 }, ds = {
+}, fs = { key: 0 }, ms = {
   class: "__menu",
   style: { display: "flex" }
-}, cs = { class: "__outputs" }, ps = { key: 0 }, hs = ["id", "title"], fs = { class: "__inputs" }, ms = { key: 0 }, vs = ["id", "title"], gs = /* @__PURE__ */ F({
+}, vs = { class: "__outputs" }, gs = { key: 0 }, bs = ["id", "title"], ys = { class: "__inputs" }, _s = { key: 0 }, Cs = ["id", "title"], ws = /* @__PURE__ */ F({
   __name: "CodeGraphNode",
   props: {
     node: {},
@@ -2112,43 +2147,43 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
   },
   emits: ["select", "start-drag", "update"],
   setup(n, { emit: e }) {
-    const t = $e.ContextMenu, s = $e.NodeInterface, o = n, r = P(() => o.node), i = e, { viewModel: a } = me(), { graph: l, switchGraph: d } = Ge(), f = H(null), C = H(!1), h = H(""), N = H(null), v = H(!1);
-    let w = 0, u = 0;
-    const y = H(!1), M = P(() => {
-      const $ = [
+    const t = Me.ContextMenu, s = Me.NodeInterface, o = n, a = A(() => o.node), i = e, { viewModel: r } = me(), { graph: l, switchGraph: u } = Ge(), f = H(null), C = H(!1), h = H(""), N = H(null), v = H(!1);
+    let w = 0, d = 0;
+    const y = H(!1), $ = A(() => {
+      const M = [
         { value: "edit", label: "Edit" },
         { value: "rename", label: "Rename" },
         { value: "delete", label: "Delete" }
       ];
-      return o.node.type.startsWith(At) && $.push({ value: "editSubgraph", label: "Edit Subgraph" }), $;
-    }), T = P(() => ({
+      return o.node.type.startsWith(Lt) && M.push({ value: "editSubgraph", label: "Edit Subgraph" }), M;
+    }), T = A(() => ({
       "--selected": o.selected,
       "--dragging": o.dragging,
       "--two-column": !!o.node.twoColumn,
-      "--hidden": r.value.state?.hidden
-    })), S = P(() => ({
-      "--reverse-y": o.node.reverseY ?? a.value.settings.nodes.reverseY
-    })), Q = P(() => ({
+      "--hidden": a.value.state?.hidden
+    })), S = A(() => ({
+      "--reverse-y": o.node.reverseY ?? r.value.settings.nodes.reverseY
+    })), Q = A(() => ({
       top: `${o.node.position?.y ?? 0}px`,
       left: `${o.node.position?.x ?? 0}px`,
-      "--width": `${o.node.width ?? a.value.settings.nodes.defaultWidth}px`
-    })), Z = P(() => Object.values(o.node.inputs).filter(($) => !$.hidden)), pe = P(() => Object.values(o.node.outputs).filter(($) => !$.hidden)), K = () => {
+      "--width": `${o.node.width ?? r.value.settings.nodes.defaultWidth}px`
+    })), Z = A(() => Object.values(o.node.inputs).filter((M) => !M.hidden)), pe = A(() => Object.values(o.node.outputs).filter((M) => !M.hidden)), X = () => {
       i("select");
-    }, k = ($) => {
-      o.selected || K(), i("start-drag", $);
-    }, R = () => {
+    }, k = (M) => {
+      o.selected || X(), i("start-drag", M);
+    }, j = () => {
       y.value = !0;
     }, z = () => {
-      const $ = a.value.displayedGraph.sidebar;
-      $.nodeId = "", $.visible = !1;
+      const M = r.value.displayedGraph.sidebar;
+      M.nodeId = "", M.visible = !1;
     }, ge = () => {
-      const $ = a.value.displayedGraph.sidebar;
-      $.nodeId = o.node.id, $.visible = !0;
+      const M = r.value.displayedGraph.sidebar;
+      M.nodeId = o.node.id, M.visible = !0;
     }, he = () => {
-      const $ = a.value.displayedGraph.sidebar;
-      $.nodeId = o.node.id;
-    }, Ee = async ($) => {
-      switch ($) {
+      const M = r.value.displayedGraph.sidebar;
+      M.nodeId = o.node.id;
+    }, Ee = async (M) => {
+      switch (M) {
         case "edit":
           ge();
           break;
@@ -2156,59 +2191,59 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
           l.value.removeNode(o.node);
           break;
         case "rename":
-          h.value = o.node.title, C.value = !0, await Tt(), N.value?.focus();
+          h.value = o.node.title, C.value = !0, await Mt(), N.value?.focus();
           break;
         case "editSubgraph":
-          d(o.node.template);
+          u(o.node.template);
           break;
       }
     }, be = () => {
-      r.value.title = h.value, C.value = !1;
+      a.value.title = h.value, C.value = !1;
     }, ye = () => {
-      f.value && a.value.hooks.renderNode.execute({ node: o.node, el: f.value });
-    }, Te = ($) => {
-      v.value = !0, w = o.node.width, u = $.clientX, $.preventDefault();
-    }, oe = ($) => {
-      r.value.state && (r.value.state.integrated = $, i("update"));
-    }, ie = ($) => {
+      f.value && r.value.hooks.renderNode.execute({ node: o.node, el: f.value });
+    }, Te = (M) => {
+      v.value = !0, w = o.node.width, d = M.clientX, M.preventDefault();
+    }, se = (M) => {
+      a.value.state && (a.value.state.integrated = M, i("update"));
+    }, le = (M) => {
       if (!v.value) return;
-      const g = $.clientX - u, c = w + g / l.value.scaling, _ = a.value.settings.nodes.minWidth, x = a.value.settings.nodes.maxWidth;
-      r.value.width = Math.max(_, Math.min(x, c));
+      const g = M.clientX - d, c = w + g / l.value.scaling, _ = r.value.settings.nodes.minWidth, x = r.value.settings.nodes.maxWidth;
+      a.value.width = Math.max(_, Math.min(x, c));
     }, _e = () => {
       v.value = !1;
     };
     return Se(() => {
-      ye(), window.addEventListener("mousemove", ie), window.addEventListener("mouseup", _e);
-    }), nt(ye), et(() => {
-      window.removeEventListener("mousemove", ie), window.removeEventListener("mouseup", _e);
-    }), ($, g) => (p(), b("div", {
-      id: r.value.id,
+      ye(), window.addEventListener("mousemove", le), window.addEventListener("mouseup", _e);
+    }), Ze(ye), Je(() => {
+      window.removeEventListener("mousemove", le), window.removeEventListener("mouseup", _e);
+    }), (M, g) => (p(), b("div", {
+      class: oe([T.value, "baklava-node"]),
+      "data-node-type": a.value.type,
+      id: a.value.id,
+      style: Ae(Q.value),
       ref_key: "el",
       ref: f,
-      class: ne([T.value, "baklava-node"]),
-      "data-node-type": r.value.type,
-      style: Pe(Q.value),
-      onPointerdown: K
+      onPointerdown: X
     }, [
-      O(a).settings.nodes.resizable ? (p(), b("div", {
+      O(r).settings.nodes.resizable ? (p(), b("div", {
         key: 0,
         class: "__resize-handle",
         onMousedown: Te
-      }, null, 32)) : j("", !0),
+      }, null, 32)) : L("", !0),
       m("div", {
         class: "__title",
-        onPointerdown: le(k, ["self", "stop"]),
-        onContextmenu: le(R, ["prevent"])
+        onPointerdown: de(k, ["self", "stop"]),
+        onContextmenu: de(j, ["prevent"])
       }, [
-        r.value.inputs._code ? (p(), B(O(Ke), {
+        a.value.inputs._code ? (p(), B(O(Ye), {
           key: 0,
-          node: r.value,
-          intf: r.value.inputs._code,
-          title: r.value.inputs._code.value,
+          intf: a.value.inputs._code,
+          node: a.value,
+          title: a.value.inputs._code.value,
           class: "--input",
           "data-interface-type": "node",
           style: { "flex-grow": "0" }
-        }, null, 8, ["node", "intf", "title"])) : j("", !0),
+        }, null, 8, ["intf", "node", "title"])) : L("", !0),
         C.value ? ke((p(), b("input", {
           key: 2,
           ref_key: "renameInputEl",
@@ -2223,75 +2258,75 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
         }, null, 544)), [
           [xe, h.value]
         ]) : (p(), b(U, { key: 1 }, [
-          m("div", ls, [
-            r.value.idx > -1 ? (p(), b("span", us, L(r.value.idx + 1) + " - ", 1)) : j("", !0),
-            ot(L(r.value.title) + " " + L(r.value.graph.shortId) + " " + L(r.value.shortId), 1)
+          m("div", hs, [
+            a.value.idx > -1 ? (p(), b("span", fs, P(a.value.idx + 1) + " > ", 1)) : L("", !0),
+            et(P(a.value.title), 1)
           ]),
-          m("div", ds, [
-            r.value.isCodeNode ? (p(), b(U, { key: 0 }, [
-              r.value.state.lockCode ? (p(), B(O(ht), {
+          m("div", ms, [
+            a.value.isCodeNode ? (p(), b(U, { key: 0 }, [
+              a.value.state.lockCode ? (p(), B(O(mt), {
                 key: 0,
                 class: "--clickable mx-1",
-                onClick: g[0] || (g[0] = (c) => r.value.lockCode = !1)
-              })) : j("", !0),
-              r.value.state.integrated ? (p(), B(O(Pn), {
+                onClick: g[0] || (g[0] = (c) => a.value.lockCode = !1)
+              })) : L("", !0),
+              a.value.state.integrated ? (p(), B(O(Pn), {
                 key: 1,
                 class: "--clickable mx-1",
-                onClick: g[1] || (g[1] = (c) => oe(!1))
-              })) : (p(), B(O(Mo), {
+                onClick: g[1] || (g[1] = (c) => se(!1))
+              })) : (p(), B(O(jo), {
                 key: 2,
                 class: "--clickable mx-1",
-                onClick: g[2] || (g[2] = (c) => oe(!0))
+                onClick: g[2] || (g[2] = (c) => se(!0))
               })),
-              !O(a).displayedGraph.sidebar.visible && O(a).displayedGraph.sidebar.nodeId !== r.value.id ? (p(), B(O(io), {
+              !O(r).displayedGraph.sidebar.visible && O(r).displayedGraph.sidebar.nodeId !== a.value.id ? (p(), B(O(ho), {
                 key: 3,
                 class: "--clickable mx-1",
                 onClick: ge
-              })) : O(a).displayedGraph.sidebar.visible && O(a).displayedGraph.sidebar.nodeId !== r.value.id ? (p(), B(O(Zn), {
+              })) : O(r).displayedGraph.sidebar.visible && O(r).displayedGraph.sidebar.nodeId !== a.value.id ? (p(), B(O(so), {
                 key: 4,
                 class: "--clickable mx-1",
                 onClick: he
-              })) : (p(), B(O(oo), {
+              })) : (p(), B(O(lo), {
                 key: 5,
                 class: "--clickable mx-1",
                 onClick: z
               }))
-            ], 64)) : j("", !0),
-            G(O(Hn), {
+            ], 64)) : L("", !0),
+            G(O(Yn), {
               class: "--clickable mx-1",
-              onClick: R
+              onClick: j
             }),
             G(O(t), {
               modelValue: y.value,
               "onUpdate:modelValue": g[3] || (g[3] = (c) => y.value = c),
               x: 0,
               y: 0,
-              items: M.value,
+              items: $.value,
               onClick: Ee
             }, null, 8, ["modelValue", "items"])
           ])
         ], 64)),
-        r.value.outputs._code ? (p(), B(O(Ke), {
+        a.value.outputs._code ? (p(), B(O(Ye), {
           key: 3,
-          node: r.value,
-          intf: r.value.outputs._code,
+          node: a.value,
+          intf: a.value.outputs._code,
           class: "--output",
-          title: r.value.outputs._code.value,
+          title: a.value.outputs._code.value,
           "data-interface-type": "node"
-        }, null, 8, ["node", "intf", "title"])) : j("", !0)
+        }, null, 8, ["node", "intf", "title"])) : L("", !0)
       ], 32),
       m("div", {
-        class: ne(["__content", S.value]),
-        onKeydown: g[5] || (g[5] = Oe(le(() => {
+        class: oe(["__content", S.value]),
+        onKeydown: g[5] || (g[5] = Oe(de(() => {
         }, ["stop"]), ["delete"])),
-        onContextmenu: g[6] || (g[6] = le(() => {
+        onContextmenu: g[6] || (g[6] = de(() => {
         }, ["prevent"]))
       }, [
-        m("div", cs, [
-          (p(!0), b(U, null, se(pe.value, (c) => (p(), b(U, {
+        m("div", vs, [
+          (p(!0), b(U, null, ae(pe.value, (c) => (p(), b(U, {
             key: c.id
           }, [
-            r.value.state?.hidden ? (p(), b("div", ps, [
+            a.value.state?.hidden ? (p(), b("div", gs, [
               c.port ? (p(), b("div", {
                 key: 0,
                 id: c.id,
@@ -2299,26 +2334,26 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
                 class: "baklava-node-interface --output --connected"
               }, [...g[7] || (g[7] = [
                 m("div", { class: "__port" }, null, -1)
-              ])], 8, hs)) : j("", !0)
-            ])) : q($.$slots, "nodeInterface", {
+              ])], 8, bs)) : L("", !0)
+            ])) : q(M.$slots, "nodeInterface", {
               key: 1,
               type: "output",
-              node: r.value,
+              node: a.value,
               intf: c
             }, () => [
               G(O(s), {
-                node: r.value,
+                node: a.value,
                 intf: c,
                 title: c.value
               }, null, 8, ["node", "intf", "title"])
             ])
           ], 64))), 128))
         ]),
-        m("div", fs, [
-          (p(!0), b(U, null, se(Z.value, (c) => (p(), b(U, {
+        m("div", ys, [
+          (p(!0), b(U, null, ae(Z.value, (c) => (p(), b(U, {
             key: c.id
           }, [
-            r.value.state?.hidden ? (p(), b("div", ms, [
+            a.value.state?.hidden ? (p(), b("div", _s, [
               c.port ? (p(), b("div", {
                 key: 0,
                 id: c.id,
@@ -2326,15 +2361,15 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
                 class: "baklava-node-interface --input --connected"
               }, [...g[8] || (g[8] = [
                 m("div", { class: "__port" }, null, -1)
-              ])], 8, vs)) : j("", !0)
-            ])) : q($.$slots, "nodeInterface", {
+              ])], 8, Cs)) : L("", !0)
+            ])) : q(M.$slots, "nodeInterface", {
               key: 1,
-              node: r.value,
+              node: a.value,
               intf: c,
               type: "input"
             }, () => [
               G(O(s), {
-                node: r.value,
+                node: a.value,
                 intf: c,
                 title: c.value
               }, null, 8, ["node", "intf", "title"])
@@ -2342,45 +2377,45 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
           ], 64))), 128))
         ])
       ], 34)
-    ], 46, is));
+    ], 46, ps));
   }
-}), bs = ["id"], ys = { class: "align-middle" }, Ke = /* @__PURE__ */ F({
+}), ks = ["id"], xs = { class: "align-middle" }, Ye = /* @__PURE__ */ F({
   __name: "CodeGraphNodeInterface",
   props: {
     node: {},
     intf: {}
   },
   setup(n) {
-    const e = n, { viewModel: t } = me(), { hoveredOver: s, temporaryConnection: o } = Jt(), r = H(null), i = P(() => e.intf.connectionCount > 0), a = P(() => ({
+    const e = n, { viewModel: t } = me(), { hoveredOver: s, temporaryConnection: o } = Qt(), a = H(null), i = A(() => e.intf.connectionCount > 0), r = A(() => ({
       "--connected": i.value
     })), l = () => {
       s(e.intf);
-    }, d = () => {
+    }, u = () => {
       s(void 0);
     }, f = () => {
-      r.value && t.value.hooks.renderInterface.execute({ intf: e.intf, el: r.value });
+      a.value && t.value.hooks.renderInterface.execute({ intf: e.intf, el: a.value });
     };
-    return Se(f), nt(f), (C, h) => (p(), b("div", {
+    return Se(f), Ze(f), (C, h) => (p(), b("div", {
       id: n.intf.id,
       ref_key: "el",
-      ref: r,
-      class: ne(["baklava-node-interface", a.value])
+      ref: a,
+      class: oe(["baklava-node-interface", r.value])
     }, [
       n.intf.port ? (p(), b("div", {
         key: 0,
-        class: ne(["__port", { "--selected": O(o)?.from === n.intf }]),
+        class: oe([{ "--selected": O(o)?.from === n.intf }, "__port"]),
         onPointerover: l,
-        onPointerout: d
-      }, null, 34)) : j("", !0),
-      m("span", ys, [
+        onPointerout: u
+      }, null, 34)) : L("", !0),
+      m("span", xs, [
         q(C.$slots, "default")
       ])
-    ], 10, bs));
+    ], 10, ks));
   }
-}), _s = ["title"], Cs = {
+}), Is = ["title"], Ns = {
   key: 0,
   class: "__label"
-}, qe = /* @__PURE__ */ F({
+}, We = /* @__PURE__ */ F({
   __name: "SidebarCheckbox",
   props: {
     disabled: { type: Boolean },
@@ -2392,9 +2427,9 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
   setup(n, { emit: e }) {
     const t = e;
     return (s, o) => (p(), b("div", {
-      class: ne(["baklava-checkbox", { "--checked": n.inversed ? !n.modelValue : n.modelValue, "--disabled": n.disabled }]),
+      class: oe(["baklava-checkbox", { "--checked": n.inversed ? !n.modelValue : n.modelValue, "--disabled": n.disabled }]),
       title: n.name,
-      onClick: o[0] || (o[0] = (r) => t("update:modelValue", !n.modelValue))
+      onClick: o[0] || (o[0] = (a) => t("update:modelValue", !n.modelValue))
     }, [
       o[1] || (o[1] = m("div", { class: "__checkmark-container" }, [
         m("svg", {
@@ -2410,79 +2445,79 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
           })
         ])
       ], -1)),
-      n.name ? (p(), b("div", Cs, L(n.name), 1)) : j("", !0)
-    ], 10, _s));
+      n.name ? (p(), b("div", Ns, P(n.name), 1)) : L("", !0)
+    ], 10, Is));
   }
-}), ws = { class: "__header" }, ks = { class: "__node-name" }, xs = { class: "__interfaces" }, Is = { class: "__inputs" }, Ns = { style: { display: "flex" } }, Es = { class: "__outputs" }, Ts = {
+}), Es = { class: "__header" }, Ts = { class: "__node-name" }, Os = { class: "__interfaces" }, Ms = { class: "__inputs" }, $s = { style: { display: "flex" } }, Ss = { class: "__outputs" }, As = {
   key: 0,
   class: "__interface"
-}, Os = { style: { display: "flex" } }, $s = /* @__PURE__ */ F({
+}, Gs = { style: { display: "flex" } }, Rs = /* @__PURE__ */ F({
   __name: "CodeGraphSidebar",
   setup(n) {
-    const { viewModel: e } = me(), { graph: t } = Ge(), s = H(null), o = Me(e.value.settings.sidebar, "width"), r = P(() => e.value.settings.sidebar.resizable);
-    let i = 0, a = 0;
-    const l = P(() => {
+    const { viewModel: e } = me(), { graph: t } = Ge(), s = H(null), o = $e(e.value.settings.sidebar, "width"), a = A(() => e.value.settings.sidebar.resizable);
+    let i = 0, r = 0;
+    const l = A(() => {
       const y = t.value.sidebar.nodeId;
-      return t.value.nodes.find((M) => M.id === y);
-    }), d = P(() => l.value), f = P(() => ({
+      return t.value.nodes.find(($) => $.id === y);
+    }), u = A(() => l.value), f = A(() => ({
       width: `${o.value}px`
-    })), C = P(() => d.value ? Object.values(d.value.inputs).filter((y) => y.displayInSidebar && y.component) : []), h = P(() => d.value ? Object.values(d.value.outputs).filter((y) => y.displayInSidebar && y.component) : []), N = () => {
+    })), C = A(() => u.value ? Object.values(u.value.inputs).filter((y) => y.displayInSidebar && y.component) : []), h = A(() => u.value ? Object.values(u.value.outputs).filter((y) => y.displayInSidebar && y.component) : []), N = () => {
       t.value.sidebar.visible = !1;
     }, v = () => {
       l.value?.events.update.emit(null);
     }, w = (y) => {
-      i = o.value, a = y.clientX, window.addEventListener("mousemove", u), window.addEventListener(
+      i = o.value, r = y.clientX, window.addEventListener("mousemove", d), window.addEventListener(
         "mouseup",
         () => {
-          window.removeEventListener("mousemove", u);
+          window.removeEventListener("mousemove", d);
         },
         { once: !0 }
       );
-    }, u = (y) => {
-      const M = s.value?.parentElement?.getBoundingClientRect().width ?? 500, T = y.clientX - a;
+    }, d = (y) => {
+      const $ = s.value?.parentElement?.getBoundingClientRect().width ?? 500, T = y.clientX - r;
       let S = i - T;
-      S < 300 ? S = 300 : S > 0.9 * M && (S = 0.9 * M), o.value = S;
+      S < 300 ? S = 300 : S > 0.9 * $ && (S = 0.9 * $), o.value = S;
     };
-    return (y, M) => (p(), b("div", {
-      class: ne([{ "--open": O(t).sidebar.visible }, "baklava-sidebar"]),
-      style: Pe(f.value),
+    return (y, $) => (p(), b("div", {
+      class: oe([{ "--open": O(t).sidebar.visible }, "baklava-sidebar"]),
+      style: Ae(f.value),
       ref_key: "el",
       ref: s
     }, [
-      r.value ? (p(), b("div", {
+      a.value ? (p(), b("div", {
         key: 0,
         class: "__resizer",
         onMousedown: w
-      }, null, 32)) : j("", !0),
+      }, null, 32)) : L("", !0),
       l.value ? (p(), b(U, { key: 1 }, [
-        m("div", ws, [
+        m("div", Es, [
           m("button", {
             tabindex: "-1",
             class: "__close",
             onClick: N
           }, "×"),
-          m("div", ks, [
-            m("b", null, L(l.value.title), 1)
+          m("div", Ts, [
+            m("b", null, P(l.value.title), 1)
           ])
         ]),
-        m("div", xs, [
-          m("div", Is, [
-            (p(!0), b(U, null, se(C.value, (T) => (p(), b("div", {
+        m("div", Os, [
+          m("div", Ms, [
+            (p(!0), b(U, null, ae(C.value, (T) => (p(), b("div", {
               key: T.id,
               class: "__interface"
             }, [
-              m("div", Ns, [
-                G(qe, {
+              m("div", $s, [
+                G(We, {
                   modelValue: T.hidden,
                   "onUpdate:modelValue": [
                     (S) => T.hidden = S,
-                    M[0] || (M[0] = () => l.value?.events.update.emit(null))
+                    $[0] || ($[0] = () => l.value?.events.update.emit(null))
                   ],
                   disabled: !T.optional,
                   inversed: "",
                   style: { "padding-right": "8px" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
-                (p(), B(De(T.component), {
+                (p(), B(He(T.component), {
                   modelValue: T.value,
                   "onUpdate:modelValue": (S) => T.value = S,
                   node: l.value,
@@ -2492,36 +2527,36 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
               ])
             ]))), 128))
           ]),
-          m("div", Es, [
-            d.value && d.value.state ? (p(), b("div", Ts, [
-              M[3] || (M[3] = m("label", null, "Variable name", -1)),
+          m("div", Ss, [
+            u.value && u.value.state ? (p(), b("div", As, [
+              $[3] || ($[3] = m("label", null, "Variable name", -1)),
               ke(m("input", {
-                "onUpdate:modelValue": M[1] || (M[1] = (T) => d.value.state.variableName = T),
+                "onUpdate:modelValue": $[1] || ($[1] = (T) => u.value.state.variableName = T),
                 type: "text",
                 class: "baklava-input",
                 title: "Variable name",
                 onBlur: v,
                 onKeydown: Oe(v, ["enter"])
               }, null, 544), [
-                [xe, d.value.state.variableName]
+                [xe, u.value.state.variableName]
               ])
-            ])) : j("", !0),
-            (p(!0), b(U, null, se(h.value, (T) => (p(), b("div", {
+            ])) : L("", !0),
+            (p(!0), b(U, null, ae(h.value, (T) => (p(), b("div", {
               key: T.id,
               class: "__interface"
             }, [
-              m("div", Os, [
-                G(qe, {
+              m("div", Gs, [
+                G(We, {
                   modelValue: T.hidden,
                   "onUpdate:modelValue": [
                     (S) => T.hidden = S,
-                    M[2] || (M[2] = () => l.value?.events.update.emit(null))
+                    $[2] || ($[2] = () => l.value?.events.update.emit(null))
                   ],
                   disabled: !T.optional,
                   inversed: "",
                   style: { "padding-right": "8px" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
-                (p(), B(De(T.component), {
+                (p(), B(He(T.component), {
                   modelValue: T.value,
                   "onUpdate:modelValue": (S) => T.value = S,
                   node: l.value,
@@ -2533,57 +2568,57 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
           ])
         ]),
         q(y.$slots, "codeEditor", { node: l.value })
-      ], 64)) : j("", !0)
+      ], 64)) : L("", !0)
     ], 6));
   }
-}), Ms = {
+}), js = {
   class: "baklava-node --palette",
   style: { "margin-top": "-20px", "margin-bottom": "20px" }
-}, Ss = {
+}, Ls = {
   key: 0,
   style: { display: "flex", "justify-content": "space-between" }
-}, Ps = ["onClick"], Gs = {
+}, Ps = ["onClick"], Vs = {
   key: 0,
   style: { margin: "auto 0", "font-size": "12px" }
-}, As = /* @__PURE__ */ F({
+}, Bs = /* @__PURE__ */ F({
   __name: "CodeNodePalette",
   setup(n) {
-    const e = $e.PaletteEntry, { viewModel: t } = me(), { x: s, y: o } = pn(), { transform: r } = Qt(), i = Zt(t), a = Ot("editorEl"), l = H(""), d = H(null), f = () => l.value ? i.value.filter(
+    const e = Me.PaletteEntry, { viewModel: t } = me(), { x: s, y: o } = hn(), { transform: a } = Zt(), i = en(t), r = $t("editorEl"), l = H(""), u = H(null), f = () => l.value ? i.value.filter(
       (v) => v.name.toLowerCase().includes(l.value.toLowerCase()) || Object.values(v.nodeTypes).some(
         (w) => w.title.toLowerCase().includes(l.value.toLowerCase())
       )
-    ) : i.value, C = (v) => l.value ? Wo(v, (w) => {
-      const u = w[1];
-      return u.category.includes(l.value.toLowerCase()) || u.title?.toLowerCase().includes(l.value.toLowerCase());
-    }) : v, h = P(() => {
-      if (!d.value || !a?.value) return {};
-      const { left: v, top: w } = a.value.getBoundingClientRect();
+    ) : i.value, C = (v) => l.value ? Jo(v, (w) => {
+      const d = w[1];
+      return d.category.includes(l.value.toLowerCase()) || d.title?.toLowerCase().includes(l.value.toLowerCase());
+    }) : v, h = A(() => {
+      if (!u.value || !r?.value) return {};
+      const { left: v, top: w } = r.value.getBoundingClientRect();
       return {
         top: `${o.value - w}px`,
         left: `${s.value - v}px`
       };
     }), N = (v, w) => {
-      d.value = {
+      u.value = {
         type: v,
         nodeInformation: w
       };
-      const u = () => {
+      const d = () => {
         const y = te(new w.type());
         t.value.displayedGraph.addNode(y);
-        const M = a.value.getBoundingClientRect(), [T, S] = r(s.value - M.left, o.value - M.top);
-        y.position.x = T, y.position.y = S, d.value = null, document.removeEventListener("pointerup", u);
+        const $ = r.value.getBoundingClientRect(), [T, S] = a(s.value - $.left, o.value - $.top);
+        y.position.x = T, y.position.y = S, u.value = null, document.removeEventListener("pointerup", d);
       };
-      document.addEventListener("pointerup", u);
+      document.addEventListener("pointerup", d);
     };
     return (v, w) => (p(), b(U, null, [
       m("div", {
-        class: ne([{ "--open": O(t).settings.palette.enabled }, "baklava-node-palette"]),
-        onContextmenu: w[1] || (w[1] = le(() => {
+        class: oe([{ "--open": O(t).settings.palette.enabled }, "baklava-node-palette"]),
+        onContextmenu: w[1] || (w[1] = de(() => {
         }, ["stop", "prevent"]))
       }, [
-        m("div", Ms, [
+        m("div", js, [
           ke(m("input", {
-            "onUpdate:modelValue": w[0] || (w[0] = (u) => l.value = u),
+            "onUpdate:modelValue": w[0] || (w[0] = (d) => l.value = d),
             type: "text",
             class: "baklava-input",
             title: "Filter nodes",
@@ -2592,58 +2627,58 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
             [xe, l.value]
           ])
         ]),
-        (p(!0), b(U, null, se(f(), (u) => (p(), b("section", {
-          key: u.name
+        (p(!0), b(U, null, ae(f(), (d) => (p(), b("section", {
+          key: d.name
         }, [
-          u.name !== "default" ? (p(), b("h3", Ss, [
+          d.name !== "default" ? (p(), b("h3", Ls, [
             m("div", {
-              onClick: (y) => l.value = u.name,
+              onClick: (y) => l.value = d.name,
               style: { cursor: "pointer" }
-            }, L(u.name), 9, Ps),
-            Object.keys(C(u.nodeTypes)).length < Object.values(u.nodeTypes).length ? (p(), b("div", Gs, " ( " + L(Object.keys(C(u.nodeTypes)).length) + " / " + L(Object.values(u.nodeTypes).length) + " ) ", 1)) : j("", !0)
-          ])) : j("", !0),
-          (p(!0), b(U, null, se(C(u.nodeTypes), (y, M) => (p(), B(O(e), {
-            key: M,
-            type: M,
+            }, P(d.name), 9, Ps),
+            Object.keys(C(d.nodeTypes)).length < Object.values(d.nodeTypes).length ? (p(), b("div", Vs, " ( " + P(Object.keys(C(d.nodeTypes)).length) + " / " + P(Object.values(d.nodeTypes).length) + " ) ", 1)) : L("", !0)
+          ])) : L("", !0),
+          (p(!0), b(U, null, ae(C(d.nodeTypes), (y, $) => (p(), B(O(e), {
+            key: $,
             title: y.title,
-            onPointerdown: (T) => N(M, y)
-          }, null, 8, ["type", "title", "onPointerdown"]))), 128))
+            type: $,
+            onPointerdown: (T) => N($, y)
+          }, null, 8, ["title", "type", "onPointerdown"]))), 128))
         ]))), 128))
       ], 34),
-      G($t, { name: "fade" }, {
+      G(St, { name: "fade" }, {
         default: ee(() => [
-          d.value ? (p(), b("div", {
+          u.value ? (p(), b("div", {
             key: 0,
             class: "baklava-dragged-node",
-            style: Pe(h.value)
+            style: Ae(h.value)
           }, [
             G(O(e), {
-              type: d.value.type,
-              title: d.value.nodeInformation.title
+              type: u.value.type,
+              title: u.value.nodeInformation.title
             }, null, 8, ["type", "title"])
-          ], 4)) : j("", !0)
+          ], 4)) : L("", !0)
         ]),
         _: 1
       })
     ], 64));
   }
-}), Rs = {}, js = { class: "prependIcon" }, Ls = { class: "appendIcon" };
-function Vs(n, e) {
-  const t = Ze("router-link");
+}), Hs = {}, zs = { class: "prependIcon" }, Us = { class: "appendIcon" };
+function Ds(n, e) {
+  const t = qe("router-link");
   return p(), B(t, { class: "navItem" }, {
     default: ee(() => [
-      m("span", js, [
+      m("span", zs, [
         q(n.$slots, "prependIcon")
       ]),
       q(n.$slots, "default"),
-      m("span", Ls, [
+      m("span", Us, [
         q(n.$slots, "appendIcon")
       ])
     ]),
     _: 3
   });
 }
-const Je = /* @__PURE__ */ A(Rs, [["render", Vs]]), Bs = { class: "navbar" }, Hs = ["onClick"], xr = /* @__PURE__ */ F({
+const Ke = /* @__PURE__ */ R(Hs, [["render", Ds]]), Fs = { class: "navbar" }, Ys = ["onClick"], xa = /* @__PURE__ */ F({
   __name: "NavBar",
   props: {
     viewModel: {},
@@ -2655,33 +2690,33 @@ const Je = /* @__PURE__ */ A(Rs, [["render", Vs]]), Bs = { class: "navbar" }, Hs
     const t = e, s = (o) => {
       t("click:remove", o);
     };
-    return (o, r) => (p(), b("nav", Bs, [
+    return (o, a) => (p(), b("nav", Fs, [
       q(o.$slots, "prepend"),
-      (p(!0), b(U, null, se(n.editorStates, (i) => (p(), B(Je, {
+      (p(!0), b(U, null, ae(n.editorStates, (i) => (p(), B(Ke, {
         key: i.graph.id,
-        class: ne({ active: i.graph.id === n.viewModel.displayedGraph.id }),
+        class: oe({ active: i.graph.id === n.viewModel.displayedGraph.id }),
         to: { name: n.routes?.edit ?? "edit", params: { editorId: i.graph.id } }
       }, {
         appendIcon: ee(() => [
           m("button", {
             class: "remove",
-            onClick: le((a) => s(i.graph.id), ["prevent"])
+            onClick: de((r) => s(i.graph.id), ["prevent"])
           }, [
-            G(O(Vo))
-          ], 8, Hs)
+            G(O(Do))
+          ], 8, Ys)
         ]),
         default: ee(() => [
-          ot(L(i.graph.id.slice(0, 6)) + " ", 1)
+          et(P(i.graph.id.slice(0, 6)) + " ", 1)
         ]),
         _: 2
       }, 1032, ["class", "to"]))), 128)),
       q(o.$slots, "append", {}, () => [
-        G(Je, {
+        G(Ke, {
           to: { name: n.routes?.new ?? "new" },
           class: "navItem"
         }, {
           default: ee(() => [
-            G(O(yo), { class: "plus" })
+            G(O(xo), { class: "plus" })
           ]),
           _: 1
         }, 8, ["to"])
@@ -2689,58 +2724,58 @@ const Je = /* @__PURE__ */ A(Rs, [["render", Vs]]), Bs = { class: "navbar" }, Hs
     ]));
   }
 });
-class wt extends _t {
+class xt extends wt {
   _title = "Subgraph Input";
   inputs = {
-    _code: new D("", "").use(V, X).setHidden(!0),
-    name: new Ae("Name", "Input").setPort(!1)
+    _code: new D("_code", "").use(V, K).setHidden(!0),
+    name: new at("Name", "Input").setPort(!1)
   };
   outputs = {
-    _code: new D("", "").use(V, X).setHidden(!0),
+    _code: new D("_code", "").use(V, K).setHidden(!0),
     placeholder: new J("Connection", void 0)
   };
 }
-class kt extends Ct {
+class It extends kt {
   _title = "Subgraph Output";
   inputs = {
-    _code: new D("", "").use(V, X).setHidden(!0),
-    name: new Ae("Name", "Output").setPort(!1),
+    _code: new D("_code", "").use(V, K).setHidden(!0),
+    name: new at("Name", "Output").setPort(!1),
     placeholder: new J("Connection", void 0)
   };
   outputs = {
-    _code: new D("", "").use(V, X).setHidden(!0),
+    _code: new D("_code", "").use(V, K).setHidden(!0),
     output: new J("Output", void 0).setHidden(!0)
   };
 }
-const zs = "CREATE_SUBGRAPH", Qe = [Rt, jt];
-function Us(n, e, t) {
-  const s = () => n.value.selectedNodes.filter((r) => !Qe.includes(r.type)).length > 0, o = () => {
-    const { viewModel: r } = me(), i = n.value, a = n.value.editor;
+const Ws = "CREATE_SUBGRAPH", Xe = [Pt, Vt];
+function Ks(n, e, t) {
+  const s = () => n.value.selectedNodes.filter((a) => !Xe.includes(a.type)).length > 0, o = () => {
+    const { viewModel: a } = me(), i = n.value, r = n.value.editor;
     if (i.selectedNodes.length === 0) return;
-    const l = i.selectedNodes.filter((k) => !Qe.includes(k.type)), d = l.flatMap((k) => Object.values(k.inputs)), f = l.flatMap((k) => Object.values(k.outputs)), C = i.connections.filter(
-      (k) => !f.includes(k.from) && d.includes(k.to)
+    const l = i.selectedNodes.filter((k) => !Xe.includes(k.type)), u = l.flatMap((k) => Object.values(k.inputs)), f = l.flatMap((k) => Object.values(k.outputs)), C = i.connections.filter(
+      (k) => !f.includes(k.from) && u.includes(k.to)
     ), h = i.connections.filter(
-      (k) => f.includes(k.from) && !d.includes(k.to)
+      (k) => f.includes(k.from) && !u.includes(k.to)
     ), N = i.connections.filter(
-      (k) => f.includes(k.from) && d.includes(k.to)
+      (k) => f.includes(k.from) && u.includes(k.to)
     ), v = l.map((k) => k.save()), w = N.map((k) => ({
       id: k.id,
       from: k.from.id,
       to: k.to.id
-    })), u = /* @__PURE__ */ new Map(), { xLeft: y, xRight: M, yTop: T } = Ds(l);
-    for (const [k, R] of C.entries()) {
-      const z = new wt();
-      z.inputs.name.value = R.to.name, v.push({
+    })), d = /* @__PURE__ */ new Map(), { xLeft: y, xRight: $, yTop: T } = Xs(l);
+    for (const [k, j] of C.entries()) {
+      const z = new xt();
+      z.inputs.name.value = j.to.name, v.push({
         ...z.save(),
-        position: { x: M - r.value.settings.nodes.defaultWidth - 100, y: T + k * 200 }
-      }), w.push({ id: re(), from: z.outputs.placeholder.id, to: R.to.id }), u.set(R.to.id, z.graphInterfaceId);
+        position: { x: $ - a.value.settings.nodes.defaultWidth - 100, y: T + k * 200 }
+      }), w.push({ id: re(), from: z.outputs.placeholder.id, to: j.to.id }), d.set(j.to.id, z.graphInterfaceId);
     }
-    for (const [k, R] of h.entries()) {
-      const z = new kt();
-      z.inputs.name.value = R.from.name, v.push({
+    for (const [k, j] of h.entries()) {
+      const z = new It();
+      z.inputs.name.value = j.from.name, v.push({
         ...z.save(),
         position: { x: y + 100, y: T + k * 200 }
-      }), w.push({ id: re(), from: R.from.id, to: z.inputs.placeholder.id }), u.set(R.from.id, z.graphInterfaceId);
+      }), w.push({ id: re(), from: j.from.id, to: z.inputs.placeholder.id }), d.set(j.from.id, z.graphInterfaceId);
     }
     const S = te(
       new Ne(
@@ -2751,45 +2786,45 @@ function Us(n, e, t) {
           inputs: [],
           outputs: []
         },
-        a
+        r
       )
     );
-    a.addGraphTemplate(S);
-    const Q = a.nodeTypes.get(st(S));
+    r.addGraphTemplate(S);
+    const Q = r.nodeTypes.get(tt(S));
     if (!Q) throw new Error("Unable to create subgraph: Could not find corresponding graph node type");
     i.activeTransactions++;
     const Z = te(new Q.type());
     i.addNode(Z);
     const pe = Math.round(
-      l.map((k) => k.position.x).reduce((k, R) => k + R, 0) / l.length
-    ), K = Math.round(
-      l.map((k) => k.position.y).reduce((k, R) => k + R, 0) / l.length
+      l.map((k) => k.position.x).reduce((k, j) => k + j, 0) / l.length
+    ), X = Math.round(
+      l.map((k) => k.position.y).reduce((k, j) => k + j, 0) / l.length
     );
-    Z.position.x = pe, Z.position.y = K, C.forEach((k) => {
-      i.removeConnection(k), i.addConnection(k.from, Z.inputs[u.get(k.to.id)]);
+    Z.position.x = pe, Z.position.y = X, C.forEach((k) => {
+      i.removeConnection(k), i.addConnection(k.from, Z.inputs[d.get(k.to.id)]);
     }), h.forEach((k) => {
-      i.removeConnection(k), i.addConnection(Z.outputs[u.get(k.from.id)], k.to);
-    }), l.forEach((k) => i.removeNode(k)), i.activeTransactions--, e.canExecuteCommand(ue.SAVE_SUBGRAPH_COMMAND) && e.executeCommand(ue.SAVE_SUBGRAPH_COMMAND), t(S), n.value.panning = { ...i.panning }, n.value.scaling = i.scaling;
+      i.removeConnection(k), i.addConnection(Z.outputs[d.get(k.from.id)], k.to);
+    }), l.forEach((k) => i.removeNode(k)), i.activeTransactions--, e.canExecuteCommand(ne.SAVE_SUBGRAPH_COMMAND) && e.executeCommand(ne.SAVE_SUBGRAPH_COMMAND), t(S), n.value.panning = { ...i.panning }, n.value.scaling = i.scaling;
   };
-  e.registerCommand(zs, {
+  e.registerCommand(Ws, {
     canExecute: s,
     execute: o
   });
 }
-function Ds(n) {
-  const e = n.reduce((o, r) => {
-    const i = r.position.x;
+function Xs(n) {
+  const e = n.reduce((o, a) => {
+    const i = a.position.x;
     return i < o ? i : o;
-  }, 1 / 0), t = n.reduce((o, r) => {
-    const i = r.position.y;
+  }, 1 / 0), t = n.reduce((o, a) => {
+    const i = a.position.y;
     return i < o ? i : o;
   }, 1 / 0);
-  return { xLeft: n.reduce((o, r) => {
-    const i = r.position.x + r.width;
+  return { xLeft: n.reduce((o, a) => {
+    const i = a.position.x + a.width;
     return i > o ? i : o;
   }, -1 / 0), xRight: e, yTop: t };
 }
-class Fs extends Lt {
+class qs extends Bt {
   code;
   graph;
   constructor(e) {
@@ -2810,7 +2845,7 @@ class Fs extends Lt {
   addGraphTemplate(e) {
     if (this.events.beforeAddGraphTemplate.emit(e).prevented) return;
     this._graphTemplates.push(e), this.graphTemplateEvents.addTarget(e.events), this.graphTemplateHooks.addTarget(e.hooks);
-    const t = Fo(e);
+    const t = qo(e);
     this.registerNodeType(t, { category: "Subgraphs", title: e.name }), this.events.addGraphTemplate.emit(e);
   }
   /**
@@ -2841,123 +2876,128 @@ class Fs extends Lt {
     this.code.state.modules[e] = t;
   }
 }
-function Ir(n) {
-  const e = H(n?.code ?? new ze()), t = H(n?.existingEditor ?? new Fs(e.value)), s = Symbol("ViewModelToken"), o = H(null), r = Mt(o), { switchGraph: i } = Ko(t, o), a = P(() => r.value && r.value !== t.value.graph), l = te(en());
+function Ia(n) {
+  const e = H(n?.code ?? new Ve()), t = H(n?.existingEditor ?? new qs(e.value)), s = Symbol("ViewModelToken"), o = H(null), a = At(o), { switchGraph: i } = es(t, o), r = A(() => a.value && a.value !== t.value.graph), l = te(tn());
   l.nodes.defaultWidth = 400;
-  const d = tn(), f = nn(r, d), C = on(r, t, d), h = {
+  const u = nn(), f = on(a, u), C = sn(a, t, u), h = {
     /** Called whenever a node is rendered */
-    renderNode: new Fe(null),
+    renderNode: new ze(null),
     /** Called whenever an interface is rendered */
-    renderInterface: new Fe(null)
+    renderInterface: new ze(null)
   }, N = te({
     clipboard: C,
     code: e,
-    commandHandler: d,
-    displayedGraph: r,
+    commandHandler: u,
+    displayedGraph: a,
     editor: t,
     history: f,
     hooks: h,
-    isSubgraph: a,
+    isSubgraph: r,
+    onBeforeUnmount: () => {
+    },
+    onMounted: () => {
+    },
     settings: l,
     switchGraph: i
   });
-  return e.value.registerViewModel(N), Uo(N), sn(r, d), Us(r, d, i), rn(r, d), an(r, d, i), ln(r, d), un(r, d, l), Bo(r, d, l), Ho(l), tt(
+  return e.value.registerViewModel(N), Ko(N), an(a, u), Ks(a, u, i), rn(a, u), ln(a, u, i), dn(a, u), un(a, u, l), Fo(a, u, l), Yo(l), Qe(
     t,
     (v, w) => {
-      w && (w.events.registerGraph.unsubscribe(s), w.graphEvents.beforeAddNode.unsubscribe(s), v.nodeHooks.beforeLoad.unsubscribe(s), v.nodeHooks.afterSave.unsubscribe(s), v.graphTemplateHooks.beforeLoad.unsubscribe(s), v.graphTemplateHooks.afterSave.unsubscribe(s), v.graph.hooks.load.unsubscribe(s), v.graph.hooks.save.unsubscribe(s)), v && (v.nodeHooks.beforeLoad.subscribe(s, (u, y) => (y.position = u.position ?? { x: 0, y: 0 }, y.width = u.width ?? l.nodes.defaultWidth, y.twoColumn = u.twoColumn ?? !1, u)), v.nodeHooks.afterSave.subscribe(s, (u, y) => (u.position = y.position, u.width = y.width, u.twoColumn = y.twoColumn, u)), v.graphTemplateHooks.beforeLoad.subscribe(s, (u, y) => (y.panning = u.panning, y.scaling = u.scaling, u)), v.graphTemplateHooks.afterSave.subscribe(s, (u, y) => (u.panning = y.panning, u.scaling = y.scaling, u)), v.graph.hooks.load.subscribe(s, (u, y) => (y.panning = u.panning, y.scaling = u.scaling, u)), v.graph.hooks.save.subscribe(s, (u, y) => (u.panning = y.panning, u.scaling = y.scaling, u)), v.graphEvents.beforeAddNode.subscribe(
+      w && (w.events.registerGraph.unsubscribe(s), w.graphEvents.beforeAddNode.unsubscribe(s), v.nodeHooks.beforeLoad.unsubscribe(s), v.nodeHooks.afterSave.unsubscribe(s), v.graphTemplateHooks.beforeLoad.unsubscribe(s), v.graphTemplateHooks.afterSave.unsubscribe(s), v.graph.hooks.load.unsubscribe(s), v.graph.hooks.save.unsubscribe(s)), v && (v.nodeHooks.beforeLoad.subscribe(s, (d, y) => (y.position = d.position ?? { x: 0, y: 0 }, y.width = d.width ?? l.nodes.defaultWidth, y.twoColumn = d.twoColumn ?? !1, d)), v.nodeHooks.afterSave.subscribe(s, (d, y) => (d.position = y.position, d.width = y.width, d.twoColumn = y.twoColumn, d)), v.graphTemplateHooks.beforeLoad.subscribe(s, (d, y) => (y.panning = d.panning, y.scaling = d.scaling, d)), v.graphTemplateHooks.afterSave.subscribe(s, (d, y) => (d.panning = y.panning, d.scaling = y.scaling, d)), v.graph.hooks.load.subscribe(s, (d, y) => (y.panning = d.panning, y.scaling = d.scaling, d)), v.graph.hooks.save.subscribe(s, (d, y) => (d.panning = y.panning, d.scaling = y.scaling, d)), v.graphEvents.beforeAddNode.subscribe(
         s,
-        (u) => dn(u, { defaultWidth: l.nodes.defaultWidth })
-      ), t.value.registerNodeType(wt, { category: "Subgraphs" }), t.value.registerNodeType(kt, { category: "Subgraphs" }), i(v.graph));
+        (d) => cn(d, { defaultWidth: l.nodes.defaultWidth })
+      ), t.value.registerNodeType(xt, { category: "Subgraphs" }), t.value.registerNodeType(It, { category: "Subgraphs" }), i(v.graph));
     },
     { immediate: !0 }
   ), N;
 }
 export {
-  lt as AbstractCodeNode,
-  ft as CLEAR_ALL_COMMAND,
-  zs as CREATE_SUBGRAPH_COMMAND,
-  On as Check,
-  sr as CheckboxInterface,
-  ze as Code,
-  Cr as CodeEditor,
-  In as CodeEngine,
+  rt as AbstractCodeNode,
+  vt as CLEAR_ALL_COMMAND,
+  Ws as CREATE_SUBGRAPH_COMMAND,
+  Gn as Check,
+  yn as CheckboxInterface,
+  Ve as Code,
+  Ca as CodeEditor,
+  Mn as CodeEngine,
   Ie as CodeGraph,
-  wr as CodeGraphEditor,
-  kr as CodeGraphInfo,
-  _t as CodeGraphInputNode,
-  gs as CodeGraphNode,
-  Ke as CodeGraphNodeInterface,
-  Ct as CodeGraphOutputNode,
-  $s as CodeGraphSidebar,
+  wa as CodeGraphEditor,
+  ka as CodeGraphInfo,
+  wt as CodeGraphInputNode,
+  ws as CodeGraphNode,
+  Ye as CodeGraphNodeInterface,
+  kt as CodeGraphOutputNode,
+  Rs as CodeGraphSidebar,
   Ne as CodeGraphTemplate,
   Re as CodeNode,
   ve as CodeNodeInputInterface,
   D as CodeNodeInterface,
   je as CodeNodeInterfaceComponent,
-  gn as CodeNodeOutputInterface,
-  As as CodeNodePalette,
+  _n as CodeNodeOutputInterface,
+  Bs as CodeNodePalette,
   Pn as CodeVariable,
-  jn as Copy,
-  os as CopyToClipboard,
-  Hn as DotsVertical,
-  xn as DynamicCodeNode,
-  We as GRAPH_INPUT_NODE_TYPE,
-  Ye as GRAPH_OUTPUT_NODE_TYPE,
-  rr as IntegerInterface,
-  vr as JavascriptCode,
-  Fn as LayoutSidebarLeftCollapse,
-  Kn as LayoutSidebarLeftExpand,
-  Zn as LayoutSidebarRight,
-  oo as LayoutSidebarRightCollapse,
-  io as LayoutSidebarRightExpand,
-  ar as ListInputInterface,
-  ht as LockCode,
-  xr as NavBar,
-  Je as NavItem,
-  ir as NumberInterface,
-  mo as PlayerPlay,
-  yo as Plus,
-  mr as PythonCode,
-  mt as RUN_ENGINE_COMMAND,
-  ko as Schema,
-  Eo as SchemaOff,
-  lr as SelectInterface,
-  qe as SidebarCheckbox,
-  ur as SliderInterface,
-  wt as SubgraphInputNode,
-  kt as SubgraphOutputNode,
-  vt as TOGGLE_MINIMAP_COMMAND,
-  gt as TOGGLE_PALETTE_COMMAND,
-  dr as TextInputInterface,
-  kn as TextInputInterfaceComponent,
-  cr as TextareaInputInterface,
-  Mo as TransitionBottom,
-  Ao as TrashOff,
-  pr as TupleInputInterface,
-  Vo as X,
-  or as addDefaultInterfaceTypes,
-  gr as allowMultipleConnections,
-  dt as booleanType,
-  Fo as createCodeGraphNodeType,
-  hr as defineCodeNode,
-  fr as defineDynamicCodeNode,
-  vn as dictType,
-  hn as formatInputs,
-  bt as getCodeNodes,
-  br as getPositionAtColumn,
-  yr as getPositionBeforeNode,
-  ct as listType,
-  ut as loadNodeState,
-  X as nodeType,
-  Le as numberType,
-  Uo as registerCodeEngine,
-  Us as registerCreateSubgraphCommand,
-  Bo as registerCustomCommands,
-  zo as registerRunEngineCommands,
-  fn as saveNodeState,
-  Ve as stringType,
+  zn as Copy,
+  ls as CopyToClipboard,
+  Yn as DotsVertical,
+  On as DynamicCodeNode,
+  Ue as GRAPH_INPUT_NODE_TYPE,
+  De as GRAPH_OUTPUT_NODE_TYPE,
+  ht as IntegerInterface,
+  va as JavascriptCode,
+  qn as LayoutSidebarLeftCollapse,
+  eo as LayoutSidebarLeftExpand,
+  so as LayoutSidebarRight,
+  lo as LayoutSidebarRightCollapse,
+  ho as LayoutSidebarRightExpand,
+  da as ListInputInterface,
+  mt as LockCode,
+  xa as NavBar,
+  Ke as NavItem,
+  Cn as NumberInterface,
+  _o as PlayerPlay,
+  xo as Plus,
+  ma as PythonCode,
+  gt as RUN_ENGINE_COMMAND,
+  To as Schema,
+  So as SchemaOff,
+  wn as SelectInterface,
+  We as SidebarCheckbox,
+  ua as SliderInterface,
+  xt as SubgraphInputNode,
+  It as SubgraphOutputNode,
+  bt as TOGGLE_MINIMAP_COMMAND,
+  yt as TOGGLE_PALETTE_COMMAND,
+  ft as TextInputInterface,
+  Tn as TextInputInterfaceComponent,
+  ca as TextareaInputInterface,
+  jo as TransitionBottom,
+  Bo as TrashOff,
+  pa as TupleInputInterface,
+  Do as X,
+  la as addDefaultInterfaceTypes,
+  ga as allowMultipleConnections,
+  lt as booleanType,
+  qo as createCodeGraphNodeType,
+  vn as createInterface,
+  ha as defineCodeNode,
+  fa as defineDynamicCodeNode,
+  bn as dictType,
+  fn as formatInputs,
+  _t as getCodeNodes,
+  ba as getPositionAtColumn,
+  ya as getPositionBeforeNode,
+  dt as listType,
+  it as loadNodeState,
+  K as nodeType,
+  ut as numberType,
+  Ko as registerCodeEngine,
+  Ks as registerCreateSubgraphCommand,
+  Fo as registerCustomCommands,
+  Wo as registerRunEngineCommands,
+  mn as saveNodeState,
+  ct as stringType,
   pt as tupleType,
-  Ho as updateToolbarItems,
-  Ir as useCodeGraph,
-  Ko as useSwitchCodeGraph
+  Yo as updateToolbarItems,
+  Ia as useCodeGraph,
+  es as useSwitchCodeGraph
 };