@babsey/code-graph 0.4.4 → 0.5.0

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 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 { reactive as te, defineComponent as F, createElementBlock as b, openBlock as p, toDisplayString as P, markRaw as Y, computed as G, createElementVNode as m, withDirectives as ke, vModelText as xe, createStaticVNode as fe, toRef as $e, ref as H, createVNode as L, unref as O, mergeModels as Be, useModel as Nt, resolveComponent as qe, createCommentVNode as j, 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 Ge, 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 Gt } from "vue";
 import { v4 as re } from "uuid";
-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 { AbstractNode as Lt, NodeInterface as J, Graph as At, getGraphNodeTypeString as tt, GraphTemplate as Rt, GRAPH_NODE_TYPE_PREFIX as jt, 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 { displayInSidebar as ot, CheckboxInterfaceComponent as Dt, useGraph as Le, IntegerInterfaceComponent as Ft, TextInputInterfaceComponent as st, NumberInterfaceComponent as Yt, SelectInterfaceComponent as Wt, SliderInterfaceComponent as Xt, TextareaInputInterfaceComponent as Kt, 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 rt extends Gt {
+class rt extends Lt {
   codeTemplate;
   isCodeNode = !0;
   mask = null;
@@ -55,7 +55,7 @@ class rt extends Gt {
     return this.graph.nodes.filter((e) => !e.state.integrated).indexOf(this) ?? -1;
   }
   get idxByVariableNames() {
-    return this.graph.getNodesBySameVariableNames(this.state.variableName).filter((e) => !e.state.integrated).indexOf(this) ?? -1;
+    return this.graph.getNodesByVariableName(this.state.variableName).filter((e) => !e.state.integrated).indexOf(this) ?? -1;
   }
   get lockCode() {
     return this.state.lockCode;
@@ -93,8 +93,8 @@ class rt extends Gt {
    * @returns code node instance or null
    */
   getConnectedNodeByInterface(e, t) {
-    const s = this.getConnectedNodesByInterface(e, t);
-    return s.length > 0 ? s[0] : null;
+    const o = this.getConnectedNodesByInterface(e, t);
+    return o.length > 0 ? o[0] : null;
   }
   /**
    * Get connected nodes to the node.
@@ -104,14 +104,14 @@ class rt extends Gt {
   getConnectedNodes(e) {
     let t = [];
     if (e !== "inputs") {
-      const s = this.graph.connections.filter((o) => o.from.name !== "_code").filter((o) => o.from.nodeId === this.id).map((o) => o.to.nodeId);
-      s && (t = t.concat(s));
+      const o = this.graph.connections.filter((s) => s.from.name !== "_code").filter((s) => s.from.nodeId === this.id).map((s) => s.to.nodeId);
+      o && (t = t.concat(o));
     }
     if (e !== "outputs") {
-      const s = this.graph.connections.filter((o) => o.from.name !== "_code").filter((o) => o.to.nodeId === this.id).map((o) => o.from.nodeId);
-      s && (t = t.concat(s));
+      const o = this.graph.connections.filter((s) => s.from.name !== "_code").filter((s) => s.to.nodeId === this.id).map((s) => s.from.nodeId);
+      o && (t = t.concat(o));
     }
-    return !t || t.length == 0 ? [] : t.map((s) => this.graph.findNodeById(s));
+    return !t || t.length == 0 ? [] : t.map((o) => this.graph.findNodeById(o));
   }
   /**
    * Get connected nodes to the node interface.
@@ -119,20 +119,26 @@ class rt extends Gt {
    * @returns code node instances
    */
   getConnectedNodesByInterface(e, t) {
-    let s = [];
+    let o = [];
     if (t !== "outputs" && this.inputs[e]) {
-      const o = this.graph.connections.filter(
+      const s = this.graph.connections.filter(
         (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));
+      s && (o = o.concat(s));
     }
     if (t !== "inputs" && this.outputs[e]) {
-      const o = this.graph.connections.filter(
+      const s = this.graph.connections.filter(
         (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));
+      s && (o = o.concat(s));
     }
-    return !s || s.length == 0 ? [] : s.map((o) => this.graph.findNodeById(o));
+    return !o || o.length == 0 ? [] : o.map((s) => this.graph.findNodeById(s));
+  }
+  /**
+   * Remove this node from the graph.
+   */
+  remove() {
+    this.graph?.removeNode(this);
   }
   /**
    * Render code of this node.
@@ -188,12 +194,12 @@ class rt extends Gt {
    */
   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));
+    Object.keys(e).forEach((o) => {
+      !t.includes(o) || !this.inputs[o] || (this.inputs[o].value = e[o], this.inputs[o].setHidden(!1));
     });
   }
 }
-class Re extends rt {
+class Ae extends rt {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -202,11 +208,11 @@ class Re extends rt {
    * @return Values for output interfaces
    */
   calculate = (e, t) => {
-    const s = {};
-    return this.lockCode || (s._code = this.renderCode({ inputs: e, ...t })), this.updateOutputValues(s), s;
+    const o = {};
+    return this.lockCode || (o._code = this.renderCode({ inputs: e, ...t })), this.updateOutputValues(o), o;
   };
   load(e) {
-    super.load(e), it(this.graph, e);
+    super.load(e), it(this.graph, e), this.afterLoaded();
   }
   save() {
     const e = super.save();
@@ -214,34 +220,34 @@ class Re extends rt {
   }
 }
 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} }}`);
+  const t = [], o = Object.keys(n);
+  return o.forEach((s) => {
+    if (n[s]?.hidden) return;
+    const i = e && t.length < o.indexOf(s) ? `${s}=` : "";
+    t.push(`${i}{{ inputs.${s} }}`);
   }), t;
 }, 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, 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);
+  const o = t;
+  o.state && (o.state.integrated = e.integrated, o.state.props = e.props), Object.entries(e.inputs).forEach(([s, a]) => {
+    s !== "_code" && o.inputs[s] && (o.inputs[s].hidden = a.hidden, o.inputs[s].state.optional = a.optional);
+  }), Object.entries(e.outputs).forEach(([s, a]) => {
+    s !== "_code" && o.outputs[s] && (o.outputs[s].hidden = a.hidden, o.outputs[s].state.optional = a.optional);
   });
 }, 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, a]) => {
-    if (o !== "_code" && s.inputs[o]) {
-      const i = s.inputs[o];
-      a.hidden = i.hidden, i.component?.__name && (a.component = i.component.__name);
+  const o = t;
+  o.state && (e.integrated = o.state.integrated, o.state.props && (e.props = o.state.props)), Object.entries(e.inputs).forEach(([s, a]) => {
+    if (s !== "_code" && o.inputs[s]) {
+      const i = o.inputs[s];
+      a.hidden = i.hidden, a.optional = i.state.optional, 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);
+  }), Object.entries(e.outputs).forEach(([s, a]) => {
+    s !== "_code" && o.outputs[s] && (a.hidden = o.outputs[s].hidden);
   });
 }, vn = (n, e) => {
   switch (n) {
@@ -266,7 +272,7 @@ const fn = (n, e = !0) => {
     default:
       return new ft(e.id, e.value);
   }
-}, gn = ["title"], je = /* @__PURE__ */ F({
+}, gn = ["title"], Re = /* @__PURE__ */ F({
   __name: "CodeNodeInterface",
   props: {
     intf: {}
@@ -283,7 +289,7 @@ class D extends J {
   state;
   type = null;
   constructor(e, t) {
-    super(e, t), this.setComponent(Y(je)), this.state = te({
+    super(e, t), this.setComponent(Y(Re)), this.state = te({
       optional: !1
     });
   }
@@ -300,7 +306,7 @@ class D extends J {
 }
 class ve extends D {
   constructor(e = "", t) {
-    super(e, t), this.setComponent(Y(je)), this.use(ot, !0);
+    super(e, t), this.setComponent(Y(Re)), this.use(ot, !0);
   }
   get value() {
     return super.value;
@@ -309,8 +315,8 @@ class ve extends D {
     super.value = e, this.name !== "_code" && this.setHidden(!1);
   }
 }
-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);
+const lt = new ie("boolean"), bn = new ie("dict"), dt = new ie("list"), X = 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, X, ut, ct, pt);
 };
 class yn extends ve {
   constructor(e, t) {
@@ -322,27 +328,27 @@ class _n extends D {
   isCodeNodeOutput = !0;
   suffix = "";
   constructor(e = "", t = "") {
-    super(e, ""), this.suffix = t, this.setComponent(Y(je));
+    super(e, ""), this.suffix = t, this.setComponent(Y(Re));
   }
   get codeValue() {
     return this.node?.outputs._code.value ?? "";
   }
   get node() {
-    const { graph: e } = Ge();
+    const { graph: e } = Le();
     return e.value.findNodeById(this.nodeId);
   }
 }
-class Le extends ve {
+class je extends ve {
   min;
   max;
-  constructor(e, t, s, o) {
-    super(e, t), this.min = s, this.max = o, this.use(V, ut);
+  constructor(e, t, o, s) {
+    super(e, t), this.min = o, this.max = s, this.use(V, ut);
   }
   validate(e) {
     return (this.min === void 0 || e >= this.min) && (this.max === void 0 || e <= this.max);
   }
 }
-class ht extends Le {
+class ht extends je {
   component = Y(Ft);
   validate(e) {
     return Number.isInteger(e) && super.validate(e);
@@ -354,7 +360,7 @@ class da extends ve {
   }
   getValue = () => `[${this.value}]`;
 }
-class Cn extends Le {
+class Cn extends je {
   component = Y(Yt);
 }
 class Pe extends ve {
@@ -366,16 +372,16 @@ class Pe extends ve {
 class wn extends Pe {
   component = Y(Wt);
   items;
-  constructor(e, t, s) {
-    super(e, t), this.items = s;
+  constructor(e, t, o) {
+    super(e, t), this.items = o;
   }
 }
-class ua extends Le {
-  component = Y(Kt);
+class ua extends je {
+  component = Y(Xt);
   min;
   max;
-  constructor(e, t, s, o) {
-    super(e, t, s, o), this.min = s, this.max = o;
+  constructor(e, t, o, s) {
+    super(e, t, o, s), this.min = o, this.max = s;
   }
   getValue = () => `${Math.round(this.value * 1e3) / 1e3}`;
 }
@@ -392,20 +398,20 @@ const kn = F({
   },
   emits: ["update:modelValue"],
   setup(n, { emit: e }) {
-    return { v: A({
+    return { v: G({
       get: () => n.modelValue,
-      set: (s) => {
-        e("update:modelValue", s);
+      set: (o) => {
+        e("update:modelValue", o);
       }
     }) };
   }
-}), R = (n, e) => {
+}), A = (n, e) => {
   const t = n.__vccOpts || n;
-  for (const [s, o] of e)
-    t[s] = o;
+  for (const [o, s] of e)
+    t[o] = s;
   return t;
 }, 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) {
+function En(n, e, t, o, s, a) {
   return p(), b("div", xn, [
     m("label", In, P(n.intf.name), 1),
     ke(m("input", {
@@ -419,12 +425,12 @@ function En(n, e, t, s, o, a) {
     ])
   ]);
 }
-const Tn = /* @__PURE__ */ R(kn, [["render", En]]);
+const Tn = /* @__PURE__ */ A(kn, [["render", En]]);
 class ft extends Pe {
   component = Y(Tn);
 }
 class ca extends Pe {
-  component = Y(Xt);
+  component = Y(Kt);
 }
 class pa extends ve {
   constructor(e = "", t = "") {
@@ -433,19 +439,25 @@ class pa extends ve {
   getValue = () => `(${this.value})`;
 }
 function ha(n) {
-  return class extends Re {
+  return class extends Ae {
     type = n.type;
     inputs = {};
     outputs = {};
     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("_code", []).use(V, K).use(ue).setHidden(!0)
+        new D("_code", []).use(V, X).use(ue).setHidden(!0)
       ), this.addOutput(
         "_code",
-        new D("_code", []).use(V, K).use(ue).setHidden(!0)
+        new D("_code", []).use(V, X).use(ue).setHidden(!0)
       );
     }
+    afterGraphLoaded() {
+      n.afterGraphLoaded?.call(this);
+    }
+    afterLoaded() {
+      n.afterLoaded?.call(this);
+    }
     onPlaced() {
       n.onPlaced?.call(this);
     }
@@ -462,14 +474,14 @@ function ha(n) {
       n.update?.call(this);
     }
     executeFactory(e, t) {
-      Object.keys(t || {}).forEach((s) => {
-        const o = t[s]();
-        e === "input" ? this.addInput(s, o) : this.addOutput(s, o);
+      Object.keys(t || {}).forEach((o) => {
+        const s = t[o]();
+        e === "input" ? this.addInput(o, s) : this.addOutput(o, s);
       });
     }
   };
 }
-class On extends Re {
+class On extends Ae {
 }
 function fa(n) {
   return class extends On {
@@ -482,12 +494,18 @@ function fa(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("_code", []).use(V, K).use(ue).setHidden(!0)
+        new D("_code", []).use(V, X).use(ue).setHidden(!0)
       ), this.addOutput(
         "_code",
-        new D("_code", []).use(V, K).use(ue).setHidden(!0)
+        new D("_code", []).use(V, X).use(ue).setHidden(!0)
       ), this.staticInputKeys.push("_code"), this.staticOutputKeys.push("_code");
     }
+    afterGraphLoaded() {
+      n.afterGraphLoaded?.call(this);
+    }
+    afterLoaded() {
+      n.afterLoaded?.call(this);
+    }
     onPlaced() {
       this.events.update.subscribe(this, (e) => {
         e && (e.type === "input" && this.staticInputKeys.includes(e.name) || e.type === "output" && this.staticOutputKeys.includes(e.name)) && this.onUpdate();
@@ -515,38 +533,41 @@ function fa(n) {
       for (const t of Object.keys(e.inputs))
         if (!(this.staticInputKeys.includes(t) || !e.inputs[t])) {
           if (!this.inputs[t]) {
-            const s = e.inputs[t], o = s.value;
+            const o = e.inputs[t], s = o.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);
+            o.component ? a = vn(o.component, { ...o, id: t }) : typeof s == "number" ? a = new ht(t, s) : a = new ft(t, JSON.stringify(s)), a.use(ot, !0), a.setOptional(o.optional ?? !1), a.setHidden(o.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) || !e.outputs[t])) {
           if (!this.outputs[t]) {
-            const s = new _n(t);
-            this.addOutput(t, s);
+            const o = new _n(t);
+            this.addOutput(t, o);
           }
           this.outputs[t] && (this.outputs[t].load(e.outputs[t]), this.outputs[t].nodeId = this.id);
         }
       it(this.graph, e), this.preventUpdate = !1, this.events.loaded.emit(this);
     }
     onUpdate() {
-      if (this.preventUpdate) return;
+      if (!n.onUpdate || this.preventUpdate) return;
       this.graph && this.graph.activeTransactions++;
-      const e = this.getStaticValues(this.staticInputKeys, this.inputs), t = this.getStaticValues(this.staticOutputKeys, this.outputs), s = n.onUpdate.call(this, e, t);
-      this.updateInterfaces("input", s.inputs ?? {}, s.forceUpdateInputs ?? []), this.updateInterfaces("output", s.outputs ?? {}, s.forceUpdateOutputs ?? []), this.graph && this.graph.activeTransactions--;
+      const e = this.getStaticValues(this.staticInputKeys, this.inputs), t = this.getStaticValues(this.staticOutputKeys, this.outputs), o = n.onUpdate.call(this, e, t);
+      this.updateInterfaces("input", o.inputs ?? {}, o.forceUpdateInputs ?? []), this.updateInterfaces("output", o.outputs ?? {}, o.forceUpdateOutputs ?? []), this.graph && this.graph.activeTransactions--;
     }
     getStaticValues(e, t) {
-      const s = {};
-      for (const o of e)
-        s[o] = t[o].value;
-      return s;
+      const o = {};
+      for (const s of e)
+        o[s] = t[s].value;
+      return o;
+    }
+    updateInputInterfaces(e, t) {
+      this.updateInterfaces("input", e, t);
     }
-    updateInterfaces(e, t, s) {
-      const o = e === "input" ? this.staticInputKeys : this.staticOutputKeys, a = e === "input" ? this.inputs : this.outputs;
+    updateInterfaces(e, t, o) {
+      const s = 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));
+        s.includes(i) || t[i] && !o.includes(i) || (e === "input" ? this.removeInput(i) : this.removeOutput(i));
       for (const i of Object.keys(t)) {
         if (a[i]) continue;
         const r = t[i]();
@@ -557,9 +578,9 @@ function fa(n) {
       this.state.props = e, this.onUpdate();
     }
     executeFactory(e, t) {
-      Object.keys(t || {}).forEach((s) => {
-        const o = t[s]();
-        e === "input" ? this.addInput(s, o) : this.addOutput(s, o);
+      Object.keys(t || {}).forEach((o) => {
+        const s = t[o]();
+        e === "input" ? this.addInput(o, s) : this.addOutput(o, s);
       });
     }
   };
@@ -659,17 +680,17 @@ class Mn extends zt {
   start() {
     super.start(), this.recalculateOrder = !0, this.calculateWithoutData();
   }
-  async runGraph(e, t, s) {
+  async runGraph(e, t, 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 { calculationOrder: s, connectionsFromNode: a } = this.order.get(e.id), i = /* @__PURE__ */ new Map();
+    for (const r of s) {
       const l = {};
       Object.entries(r.inputs).forEach(([f, C]) => {
         l[f] = this.getInterfaceValue(t, C.id);
       }), 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))
+        if (u = await r.calculate(l, { globalValues: o, 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 {
@@ -697,11 +718,11 @@ This is likely an internal issue. Please report it on GitHub.`
   }
   getInputValues(e) {
     const t = /* @__PURE__ */ new Map();
-    for (const s of e.nodes)
-      Object.values(s.inputs).forEach((o) => {
-        o.connectionCount === 0 && t.set(o.id, o.getValue ? o.getValue() : o.value);
-      }), s.calculate || Object.values(s.outputs).forEach((o) => {
-        t.set(o.id, o.getValue ? o.getValue() : o.value);
+    for (const o of e.nodes)
+      Object.values(o.inputs).forEach((s) => {
+        s.connectionCount === 0 && t.set(s.id, s.getValue ? s.getValue() : s.value);
+      }), o.calculate || Object.values(o.outputs).forEach((s) => {
+        t.set(s.id, s.getValue ? s.getValue() : s.value);
       });
     return t;
   }
@@ -729,7 +750,7 @@ const $n = {}, Sn = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-check"
 };
-function An(n, e) {
+function Gn(n, e) {
   return p(), b("svg", Sn, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
@@ -739,7 +760,7 @@ function An(n, e) {
     m("path", { d: "M5 12l5 5l10 -10" }, null, -1)
   ])]);
 }
-const Gn = /* @__PURE__ */ R($n, [["render", An]]), Rn = {}, jn = {
+const Ln = /* @__PURE__ */ A($n, [["render", Gn]]), An = {}, Rn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -751,8 +772,8 @@ const Gn = /* @__PURE__ */ R($n, [["render", An]]), Rn = {}, jn = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-code-variable"
 };
-function Ln(n, e) {
-  return p(), b("svg", jn, [...e[0] || (e[0] = [
+function jn(n, e) {
+  return p(), b("svg", Rn, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -761,7 +782,7 @@ function Ln(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__ */ R(Rn, [["render", Ln]]), Vn = {}, Bn = {
+const Pn = /* @__PURE__ */ A(An, [["render", jn]]), Vn = {}, Bn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -784,7 +805,7 @@ function Hn(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 zn = /* @__PURE__ */ R(Vn, [["render", Hn]]), Un = {}, Dn = {
+const zn = /* @__PURE__ */ A(Vn, [["render", Hn]]), Un = {}, Dn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -808,7 +829,7 @@ function Fn(n, e) {
     m("path", { d: "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
   ])]);
 }
-const Yn = /* @__PURE__ */ R(Un, [["render", Fn]]), Wn = {}, Kn = {
+const Yn = /* @__PURE__ */ A(Un, [["render", Fn]]), Wn = {}, Xn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -816,8 +837,8 @@ const Yn = /* @__PURE__ */ R(Un, [["render", Fn]]), Wn = {}, Kn = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"
 };
-function Xn(n, e) {
-  return p(), b("svg", Kn, [...e[0] || (e[0] = [
+function Kn(n, e) {
+  return p(), b("svg", Xn, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -826,7 +847,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-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 qn = /* @__PURE__ */ R(Wn, [["render", Xn]]), Jn = {}, Qn = {
+const qn = /* @__PURE__ */ A(Wn, [["render", Kn]]), Jn = {}, Qn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -844,7 +865,7 @@ function Zn(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 eo = /* @__PURE__ */ R(Jn, [["render", Zn]]), to = {}, no = {
+const eo = /* @__PURE__ */ A(Jn, [["render", Zn]]), to = {}, no = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -862,7 +883,7 @@ function oo(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 so = /* @__PURE__ */ R(to, [["render", oo]]), ao = {}, ro = {
+const so = /* @__PURE__ */ A(to, [["render", oo]]), ao = {}, ro = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -880,7 +901,7 @@ function io(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 lo = /* @__PURE__ */ R(ao, [["render", io]]), uo = {}, co = {
+const lo = /* @__PURE__ */ A(ao, [["render", io]]), uo = {}, co = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -898,7 +919,7 @@ function po(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 ho = /* @__PURE__ */ R(uo, [["render", po]]), fo = {}, mo = {
+const ho = /* @__PURE__ */ A(uo, [["render", po]]), fo = {}, mo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -915,7 +936,7 @@ function vo(n, e) {
     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 mt = /* @__PURE__ */ R(fo, [["render", vo]]), go = {}, bo = {
+const mt = /* @__PURE__ */ A(fo, [["render", vo]]), go = {}, bo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -937,7 +958,7 @@ function yo(n, e) {
     m("path", { d: "M7 4v16l13 -8z" }, null, -1)
   ])]);
 }
-const _o = /* @__PURE__ */ R(go, [["render", yo]]), Co = {}, wo = {
+const _o = /* @__PURE__ */ A(go, [["render", yo]]), Co = {}, wo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -960,7 +981,7 @@ function ko(n, e) {
     m("path", { d: "M5 12l14 0" }, null, -1)
   ])]);
 }
-const xo = /* @__PURE__ */ R(Co, [["render", ko]]), Io = {}, No = {
+const xo = /* @__PURE__ */ A(Co, [["render", ko]]), Io = {}, No = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -977,7 +998,7 @@ function Eo(n, e) {
     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 To = /* @__PURE__ */ R(Io, [["render", Eo]]), Oo = {}, Mo = {
+const To = /* @__PURE__ */ A(Io, [["render", Eo]]), Oo = {}, Mo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -994,7 +1015,7 @@ function $o(n, e) {
     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 So = /* @__PURE__ */ R(Oo, [["render", $o]]), Ao = {}, Go = {
+const So = /* @__PURE__ */ A(Oo, [["render", $o]]), Go = {}, Lo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1006,12 +1027,12 @@ const So = /* @__PURE__ */ R(Oo, [["render", $o]]), Ao = {}, Go = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-transition-bottom"
 };
-function Ro(n, e) {
-  return p(), b("svg", Go, [...e[0] || (e[0] = [
+function Ao(n, e) {
+  return p(), b("svg", Lo, [...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 jo = /* @__PURE__ */ R(Ao, [["render", Ro]]), Lo = {}, Po = {
+const Ro = /* @__PURE__ */ A(Go, [["render", Ao]]), jo = {}, Po = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1028,7 +1049,7 @@ function Vo(n, e) {
     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 Bo = /* @__PURE__ */ R(Lo, [["render", Vo]]), Ho = {}, zo = {
+const Bo = /* @__PURE__ */ A(jo, [["render", Vo]]), Ho = {}, zo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1051,11 +1072,11 @@ function Uo(n, e) {
     m("path", { d: "M6 6l12 12" }, null, -1)
   ])]);
 }
-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;
+const Do = /* @__PURE__ */ A(Ho, [["render", Uo]]), vt = "CLEAR_ALL", gt = "RUN_ENGINE", bt = "TOGGLE_MINIMAP", yt = "TOGGLE_PALETTE", Fo = (n, e, t) => {
+  const o = t.zoomToFit.paddingLeft;
   e.registerCommand(yt, {
     execute: () => {
-      t.palette.enabled = !t.palette.enabled, t.zoomToFit.paddingLeft = t.palette.enabled ? s : 50;
+      t.palette.enabled = !t.palette.enabled, t.zoomToFit.paddingLeft = t.palette.enabled ? o : 50;
     },
     canExecute: () => !0
   }), e.registerCommand(vt, {
@@ -1072,31 +1093,31 @@ const Do = /* @__PURE__ */ R(Ho, [["render", Uo]]), vt = "CLEAR_ALL", gt = "RUN_
     command: gt,
     title: "Run",
     // Tooltip text
-    icon: A(() => _o)
+    icon: G(() => _o)
   }, t = {
     command: yt,
     title: "Toggle palette",
     // Tooltip text
-    icon: A(() => n.palette.enabled ? qn : eo)
-  }, s = {
+    icon: G(() => n.palette.enabled ? qn : eo)
+  }, o = {
     command: vt,
     title: "Clear all",
     // Tooltip text
-    icon: A(() => Bo)
-  }, o = {
+    icon: G(() => Bo)
+  }, s = {
     command: bt,
     title: "Toggle minimap",
     // Tooltip text
-    icon: A(() => n.enableMinimap ? So : To)
+    icon: G(() => n.enableMinimap ? So : To)
   };
-  n.toolbar.commands = [t, e, ...qt, s, o];
+  n.toolbar.commands = [t, e, ...qt, o, s];
 }, Wo = (n, e, t) => {
   t.registerCommand(gt, {
     execute: () => e.runOnce(null),
     canExecute: () => n.nodes.length > 0
   });
 };
-function Ko(n) {
+function Xo(n) {
   const e = Symbol("CodeEngineToken");
   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);
@@ -1104,15 +1125,15 @@ function Ko(n) {
     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);
-      s && s.isCodeNode && s.onConnected();
-      const o = n.displayedGraph.findNodeById(t.from.nodeId);
+      const o = n.displayedGraph.findNodeById(t.to.nodeId);
       o && o.isCodeNode && o.onConnected();
+      const s = n.displayedGraph.findNodeById(t.from.nodeId);
+      s && s.isCodeNode && s.onConnected();
     }), n.displayedGraph.events.removeConnection.subscribe(e, (t) => {
-      const s = n.displayedGraph.findNodeById(t.to.nodeId);
-      s && s.isCodeNode && s.onUnconnected();
-      const o = n.displayedGraph.findNodeById(t.from.nodeId);
+      const o = n.displayedGraph.findNodeById(t.to.nodeId);
       o && o.isCodeNode && o.onUnconnected();
+      const s = n.displayedGraph.findNodeById(t.from.nodeId);
+      s && s.isCodeNode && s.onUnconnected();
     }), n.engine?.events.beforeRun.subscribe(e, () => {
       n.engine?.pause(), n.displayedGraph.sortNodes(), n.engine?.resume();
     }), n.engine?.events.afterRun.subscribe(e, (t) => {
@@ -1125,7 +1146,7 @@ function Ko(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 Rt {
+class Ie extends At {
   code = null;
   editor;
   _state = te({
@@ -1180,7 +1201,7 @@ class Ie extends Rt {
    * @param props optional
    * @returns code node
    */
-  addNodeAtCoordinates = (e, t = { x: 0, y: 0 }, s) => (this.addNode(e, s), e.position && (e.position = t), e);
+  addNodeAtCoordinates = (e, t = { x: 0, y: 0 }, o) => (this.addNode(e, o), e.position && (e.position = t), e);
   /**
    * Add connection of code nodes
    * @param from code node interface
@@ -1204,19 +1225,19 @@ class Ie extends Rt {
     return this.nodes.find((t) => t.type === e);
   }
   /**
-   * Get nodes of the same type.
+   * Get nodes of the type.
    * @param type node type
    * @returns a list of node instances
    */
-  getNodesBySameType(e) {
+  getNodesByType(e) {
     return this.nodes.filter((t) => t.type === e);
   }
   /**
-   * Get nodes of the same variable name.
+   * Get nodes of the variable name.
    * @param variableName variable name
    * @returns a list of node instances
    */
-  getNodesBySameVariableNames(e) {
+  getNodesByVariableName(e) {
     return this.nodes.filter(
       (t) => t.state?.variableName === e
     );
@@ -1229,9 +1250,18 @@ class Ie extends Rt {
    */
   hasConnection(e, t) {
     return this.connections.some(
-      (s) => s.from.id === e.id && s.to.id === t.id
+      (o) => o.from.id === e.id && o.to.id === t.id
     );
   }
+  /**
+   * Load a state
+   * @param state State to load
+   * @returns An array of warnings that occured during loading. If the array is empty, the state was successfully loaded.
+   */
+  load(e) {
+    const t = super.load(e);
+    return this.nodes.forEach((o) => o.afterGraphLoaded()), t;
+  }
   /**
    * Render code script.
    */
@@ -1249,10 +1279,10 @@ class Ie extends Rt {
           (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((a) => this.findNodeById(a));
-        o && (this.nodes = o);
+        const o = this.nodes.map((a) => a.id).filter((a) => !e.includes(a));
+        e = [...e, ...o];
+        const s = e.map((a) => this.findNodeById(a));
+        s && (this.nodes = s);
       } catch {
         console.warn("Failed to sort nodes.");
       }
@@ -1270,7 +1300,7 @@ const _t = (n) => {
   const e = { ...n.position };
   return e.x -= 440, e.y += 50, e;
 }, Ue = "__baklava_SubgraphInputNode", De = "__baklava_SubgraphOutputNode";
-class Ct extends Re {
+class Ct extends Ae {
   graphInterfaceId;
   constructor() {
     super(), this.graphInterfaceId = re();
@@ -1318,7 +1348,7 @@ class kt extends Ct {
     output: e
   });
 }
-const Xo = [
+const Ko = [
   "component",
   "connectionCount",
   "events",
@@ -1352,23 +1382,23 @@ function qo(n) {
     }
     onUnconnected() {
     }
-    calculate = async (t, s) => {
+    calculate = async (t, o) => {
       if (!this.subgraph) throw new Error(`GraphNode ${this.id}: calculate called without subgraph being initialized`);
-      if (!s.engine || typeof s.engine != "object")
+      if (!o.engine || typeof o.engine != "object")
         throw new Error(`GraphNode ${this.id}: calculate called but no engine provided in context`);
-      const o = s.engine.getInputValues(this.subgraph);
+      const s = o.engine.getInputValues(this.subgraph);
       for (const r of this.subgraph.inputs)
-        o.set(r.nodeInterfaceId, t[r.id]);
-      const a = await s.engine.runGraph(
+        s.set(r.nodeInterfaceId, t[r.id]);
+      const a = await o.engine.runGraph(
         this.subgraph,
-        o,
-        s.globalValues
+        s,
+        o.globalValues
       );
-      s.engine.pause(), nt(a, s.engine.editor), s.engine.resume();
+      o.engine.pause(), nt(a, o.engine.editor), o.engine.resume();
       const 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;
+      return i._calculationResults = a, this.lockCode || (i._code = this.renderCode({ inputs: t, ...o.globalValues })), this.updateOutputValues(i), i;
     };
     load(t) {
       if (!this.subgraph) throw new Error("Cannot load a graph node without a graph");
@@ -1405,17 +1435,17 @@ function qo(n) {
       for (const t of this.subgraph.inputs)
         t.id in this.inputs ? this.inputs[t.id].name = t.name : this.addInput(t.id, this.createProxyInterface(t, !0));
       for (const t of Object.keys(this.inputs))
-        this.subgraph.inputs.some((s) => s.id === t) || this.removeInput(t);
+        this.subgraph.inputs.some((o) => o.id === t) || this.removeInput(t);
       for (const t of this.subgraph.outputs)
         t.id in this.outputs ? this.outputs[t.id].name = t.name : this.addOutput(t.id, this.createProxyInterface(t, !1));
       for (const t of Object.keys(this.outputs))
-        this.subgraph.outputs.some((s) => s.id === t) || this.removeOutput(t);
+        this.subgraph.outputs.some((o) => o.id === t) || this.removeOutput(t);
       this.addInput(
         "_code",
-        new D("_code", []).use(V, K).use(ue).setHidden(!0)
+        new D("_code", []).use(V, X).use(ue).setHidden(!0)
       ), this.addOutput(
         "_code",
-        new D("_code", []).use(V, K).use(ue).setHidden(!0)
+        new D("_code", []).use(V, X).use(ue).setHidden(!0)
       ), this.addOutput("_calculationResults", new J("_calculationResults", void 0).setHidden(!0));
     }
     /**
@@ -1423,19 +1453,19 @@ function qo(n) {
      * For example, the `type` property or the `allowMultipleConnections` property.
      * These properties should be proxied to the subgraph interface, so they behave the same as the original interface.
      */
-    createProxyInterface(t, s) {
-      const o = new D(t.name, void 0);
-      return new Proxy(o, {
+    createProxyInterface(t, o) {
+      const s = new D(t.name, void 0);
+      return new Proxy(s, {
         get: (a, i) => {
-          if (Xo.includes(i) || i in a || typeof i == "string" && i.startsWith("__v_"))
+          if (Ko.includes(i) || i in a || typeof i == "string" && i.startsWith("__v_"))
             return Reflect.get(a, i);
           let r;
-          s ? r = this.subgraph?.nodes.find(
+          o ? 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) => r === (s ? f.from : f.to)?.id), u = s ? l?.to : l?.from;
+          const l = this.subgraph?.connections.find((f) => r === (o ? f.from : f.to)?.id), u = o ? l?.to : l?.from;
           if (u) return Reflect.get(u, i);
         }
       });
@@ -1446,9 +1476,9 @@ function Jo(n, e) {
   return Object.fromEntries(Object.entries(n).filter(e));
 }
 function Qo(n, e) {
-  return Object.fromEntries(Object.entries(n).map(([t, s]) => [t, e(s)]));
+  return Object.fromEntries(Object.entries(n).map(([t, o]) => [t, e(o)]));
 }
-class Ne extends jt {
+class Ne extends Rt {
   /** Create a new GraphTemplate from the nodes and connections inside the graph instance */
   static fromGraph(e, t) {
     return new Ne(e.save(), t);
@@ -1464,36 +1494,36 @@ class Ne extends jt {
    * or load the state into the provided graph instance.
    */
   createGraph(e) {
-    const t = /* @__PURE__ */ new Map(), s = (h) => {
+    const t = /* @__PURE__ */ new Map(), o = (h) => {
       const N = re();
       return t.set(h, N), N;
-    }, o = (h) => {
+    }, s = (h) => {
       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;
     }, a = (h) => Qo(h, (N) => ({
-      id: s(N.id),
+      id: o(N.id),
       templateId: N.id,
       value: N.value
     })), i = this.nodes.map((h) => ({
       ...h,
-      id: s(h.id),
+      id: o(h.id),
       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)
+      id: o(h.id),
+      from: s(h.from),
+      to: s(h.to)
     })), l = this.inputs.map((h) => ({
       id: h.id,
       name: h.name,
-      nodeId: o(h.nodeId),
-      nodeInterfaceId: o(h.nodeInterfaceId)
+      nodeId: s(h.nodeId),
+      nodeInterfaceId: s(h.nodeInterfaceId)
     })), u = this.outputs.map((h) => ({
       id: h.id,
       name: h.name,
-      nodeId: o(h.nodeId),
-      nodeInterfaceId: o(h.nodeInterfaceId)
+      nodeId: s(h.nodeId),
+      nodeInterfaceId: s(h.nodeInterfaceId)
     })), f = {
       id: re(),
       nodes: i,
@@ -1506,18 +1536,18 @@ class Ne extends jt {
 }
 const Zo = (n) => !(n instanceof Ie);
 function es(n, e) {
-  return { switchGraph: (s) => {
-    let o;
-    if (Zo(s))
-      o = new Ie(n.value), s.createGraph(o);
+  return { switchGraph: (o) => {
+    let s;
+    if (Zo(o))
+      s = new Ie(n.value), o.createGraph(s);
     else {
-      if (s !== n.value.graph)
+      if (o !== n.value.graph)
         throw new Error(
           "Can only switch using 'Graph' instance when it is the root graph. Otherwise a 'GraphTemplate' must be used."
         );
-      o = s;
+      s = o;
     }
-    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);
+    e.value && e.value !== n.value.graph && e.value.destroy(), s.panning = s.panning ?? o.panning ?? { x: 0, y: 0 }, s.scaling = s.scaling ?? o.scaling ?? 1, s.selectedNodes = s.selectedNodes ?? [], s.sidebar = s.sidebar ?? { visible: !1, nodeId: "", optionName: "" }, e.value = s, s.code?.engine?.runOnce(null);
   } };
 }
 function ts(n) {
@@ -1527,8 +1557,8 @@ var we = { exports: {} };
 var ns = we.exports, Fe;
 function os() {
   return Fe || (Fe = 1, (function(n, e) {
-    (function(s, o) {
-      n.exports = o();
+    (function(o, s) {
+      n.exports = s();
     })(ns, function() {
       return (
         /******/
@@ -1604,26 +1634,26 @@ function os() {
                       container: I
                     });
                 }, pe = Z;
-                function X(g) {
+                function K(g) {
                   "@babel/helpers - typeof";
-                  return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? X = function(_) {
+                  return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? K = function(_) {
                     return typeof _;
-                  } : X = function(_) {
+                  } : K = function(_) {
                     return _ && typeof Symbol == "function" && _.constructor === Symbol && _ !== Symbol.prototype ? "symbol" : typeof _;
-                  }, X(g);
+                  }, K(g);
                 }
                 function k(g, c) {
                   if (!(g instanceof c))
                     throw new TypeError("Cannot call a class as a function");
                 }
-                function j(g, c) {
+                function R(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 && j(g.prototype, c), _ && j(g, _), g;
+                  return c && R(g.prototype, c), _ && R(g, _), g;
                 }
                 function ge(g, c) {
                   if (typeof c != "function" && c !== null)
@@ -1648,7 +1678,7 @@ function os() {
                   };
                 }
                 function be(g, c) {
-                  return c && (X(c) === "object" || typeof c == "function") ? c : ye(g);
+                  return c && (K(c) === "object" || typeof c == "function") ? c : ye(g);
                 }
                 function ye(g) {
                   if (g === void 0)
@@ -1686,7 +1716,7 @@ function os() {
                     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 = X(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 = K(I.container) === "object" ? I.container : document.body;
                     }
                     /**
                      * Adds a click event listener to the passed trigger.
@@ -1965,11 +1995,11 @@ function os() {
               })
             )
             /******/
-          }, s = {};
-          function o(a) {
-            if (s[a])
-              return s[a].exports;
-            var i = s[a] = {
+          }, o = {};
+          function s(a) {
+            if (o[a])
+              return o[a].exports;
+            var i = o[a] = {
               /******/
               // no module.id needed
               /******/
@@ -1978,10 +2008,10 @@ function os() {
               exports: {}
               /******/
             };
-            return t[a](i, i.exports, o), i.exports;
+            return t[a](i, i.exports, s), i.exports;
           }
           return (function() {
-            o.n = function(a) {
+            s.n = function(a) {
               var i = a && a.__esModule ? (
                 /******/
                 function() {
@@ -1993,18 +2023,18 @@ function os() {
                   return a;
                 }
               );
-              return o.d(i, { a: i }), i;
+              return s.d(i, { a: i }), i;
             };
           })(), (function() {
-            o.d = function(a, i) {
+            s.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] });
+                s.o(i, r) && !s.o(a, r) && Object.defineProperty(a, r, { enumerable: !0, get: i[r] });
             };
           })(), (function() {
-            o.o = function(a, i) {
+            s.o = function(a, i) {
               return Object.prototype.hasOwnProperty.call(a, i);
             };
-          })(), o(686);
+          })(), s(686);
         })().default
       );
     });
@@ -2013,16 +2043,16 @@ function os() {
 var ss = os();
 const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
   toClipboard(e, t) {
-    return new Promise((s, o) => {
+    return new Promise((o, s) => {
       const a = document.createElement("button"), i = new as(a, {
         text: () => e,
         action: () => "copy",
         container: t !== void 0 ? t : document.body
       });
       i.on("success", (r) => {
-        i.destroy(), s(r);
-      }), i.on("error", (r) => {
         i.destroy(), o(r);
+      }), i.on("error", (r) => {
+        i.destroy(), s(r);
       }), document.body.appendChild(a), a.click(), document.body.removeChild(a);
     });
   }
@@ -2033,22 +2063,22 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
   __name: "CopyToClipboard",
   props: { text: String },
   setup(n) {
-    const { toClipboard: e } = rs(), s = $e(n, "text"), o = H(!1), a = async () => {
+    const { toClipboard: e } = rs(), o = $e(n, "text"), s = H(!1), a = async () => {
       try {
-        await e(s.value), o.value = !0, setTimeout(() => o.value = !1, 1500), console.log("Copied to clipboard");
+        await e(o.value), s.value = !0, setTimeout(() => s.value = !1, 1500), console.log("Copied to clipboard");
       } catch (i) {
         console.error(i);
       }
     };
     return (i, r) => (p(), b("div", null, [
-      o.value ? (p(), b("button", is, [
-        G(O(Gn))
+      s.value ? (p(), b("button", is, [
+        L(O(Ln))
       ])) : (p(), b("button", {
         key: 1,
         onClick: a,
         class: "baklava-button"
       }, [
-        G(O(zn))
+        L(O(zn))
       ]))
     ]));
   }
@@ -2063,7 +2093,7 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
   }),
   emits: /* @__PURE__ */ Be(["update:locked"], ["update:modelValue"]),
   setup(n, { emit: e }) {
-    const t = Nt(n, "modelValue"), s = e, o = (a) => s("update:locked", a);
+    const t = Nt(n, "modelValue"), o = e, s = (a) => o("update:locked", a);
     return (a, i) => {
       const r = qe("codemirror");
       return p(), b("div", ds, [
@@ -2072,19 +2102,19 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
             key: 0,
             class: "baklava-button",
             title: "The code is locked.",
-            onClick: i[0] || (i[0] = (l) => o(!1))
+            onClick: i[0] || (i[0] = (l) => s(!1))
           }, [
-            G(O(mt))
-          ])) : L("", !0),
-          G(ls, { text: n.modelValue }, null, 8, ["text"])
+            L(O(mt))
+          ])) : j("", !0),
+          L(ls, { text: n.modelValue }, null, 8, ["text"])
         ]),
-        G(r, {
+        L(r, {
           modelValue: t.value,
           "onUpdate:modelValue": i[1] || (i[1] = (l) => t.value = l),
           extensions: n.extensions,
           class: "codemirror",
           style: { height: "100%" },
-          onKeydown: i[2] || (i[2] = (l) => o(!0))
+          onKeydown: i[2] || (i[2] = (l) => s(!0))
         }, null, 8, ["modelValue", "extensions"])
       ]);
     };
@@ -2095,22 +2125,22 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
     viewModel: {}
   },
   setup(n) {
-    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 }, {
+    const t = $e(n, "viewModel"), o = (s) => s.events.update.emit(null);
+    return Se(t.value.onMounted), Je(t.value.onBeforeUnmount), Qe(t, (s, a) => {
+      a && a.onBeforeUnmount(), s && s.onMounted();
+    }), (s, a) => (p(), B(O(Jt), { "view-model": t.value }, {
       palette: ee(() => [
-        G(O(Bs))
+        L(O(Bs))
       ]),
       node: ee((i) => [
-        G(O(ws), Ot(i, {
-          onUpdate: (r) => s(i.node)
+        L(O(ws), Ot(i, {
+          onUpdate: (r) => o(i.node)
         }), null, 16, ["onUpdate"])
       ]),
       sidebar: ee((i) => [
-        G(O(Rs), Et(Tt(i)), {
+        L(O(As), Et(Tt(i)), {
           codeEditor: ee(({ node: r }) => [
-            q(o.$slots, "sidebarCodeEditor", { node: r })
+            q(s.$slots, "sidebarCodeEditor", { node: r })
           ]),
           _: 3
         }, 16)
@@ -2147,62 +2177,62 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
   },
   emits: ["select", "start-drag", "update"],
   setup(n, { emit: e }) {
-    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);
+    const t = Me.ContextMenu, o = Me.NodeInterface, s = n, a = G(() => s.node), i = e, { viewModel: r } = me(), { graph: l, switchGraph: u } = Le(), 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 y = H(!1), $ = G(() => {
       const M = [
         { value: "edit", label: "Edit" },
         { value: "rename", label: "Rename" },
         { value: "delete", label: "Delete" }
       ];
-      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,
+      return s.node.type.startsWith(jt) && M.push({ value: "editSubgraph", label: "Edit Subgraph" }), M;
+    }), T = G(() => ({
+      "--selected": s.selected,
+      "--dragging": s.dragging,
+      "--two-column": !!s.node.twoColumn,
       "--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 ?? 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 = () => {
+    })), S = G(() => ({
+      "--reverse-y": s.node.reverseY ?? r.value.settings.nodes.reverseY
+    })), Q = G(() => ({
+      top: `${s.node.position?.y ?? 0}px`,
+      left: `${s.node.position?.x ?? 0}px`,
+      "--width": `${s.node.width ?? r.value.settings.nodes.defaultWidth}px`
+    })), Z = G(() => Object.values(s.node.inputs).filter((M) => !M.hidden)), pe = G(() => Object.values(s.node.outputs).filter((M) => !M.hidden)), K = () => {
       i("select");
     }, k = (M) => {
-      o.selected || X(), i("start-drag", M);
-    }, j = () => {
+      s.selected || K(), i("start-drag", M);
+    }, R = () => {
       y.value = !0;
     }, z = () => {
       const M = r.value.displayedGraph.sidebar;
       M.nodeId = "", M.visible = !1;
     }, ge = () => {
       const M = r.value.displayedGraph.sidebar;
-      M.nodeId = o.node.id, M.visible = !0;
+      M.nodeId = s.node.id, M.visible = !0;
     }, he = () => {
       const M = r.value.displayedGraph.sidebar;
-      M.nodeId = o.node.id;
+      M.nodeId = s.node.id;
     }, Ee = async (M) => {
       switch (M) {
         case "edit":
           ge();
           break;
         case "delete":
-          l.value.removeNode(o.node);
+          l.value.removeNode(s.node);
           break;
         case "rename":
-          h.value = o.node.title, C.value = !0, await Mt(), N.value?.focus();
+          h.value = s.node.title, C.value = !0, await Mt(), N.value?.focus();
           break;
         case "editSubgraph":
-          u(o.node.template);
+          u(s.node.template);
           break;
       }
     }, be = () => {
       a.value.title = h.value, C.value = !1;
     }, ye = () => {
-      f.value && r.value.hooks.renderNode.execute({ node: o.node, el: f.value });
+      f.value && r.value.hooks.renderNode.execute({ node: s.node, el: f.value });
     }, Te = (M) => {
-      v.value = !0, w = o.node.width, d = M.clientX, M.preventDefault();
+      v.value = !0, w = s.node.width, d = M.clientX, M.preventDefault();
     }, se = (M) => {
       a.value.state && (a.value.state.integrated = M, i("update"));
     }, le = (M) => {
@@ -2220,20 +2250,20 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
       class: oe([T.value, "baklava-node"]),
       "data-node-type": a.value.type,
       id: a.value.id,
-      style: Ae(Q.value),
+      style: Ge(Q.value),
       ref_key: "el",
       ref: f,
-      onPointerdown: X
+      onPointerdown: K
     }, [
       O(r).settings.nodes.resizable ? (p(), b("div", {
         key: 0,
         class: "__resize-handle",
         onMousedown: Te
-      }, null, 32)) : L("", !0),
+      }, null, 32)) : j("", !0),
       m("div", {
         class: "__title",
         onPointerdown: de(k, ["self", "stop"]),
-        onContextmenu: de(j, ["prevent"])
+        onContextmenu: de(R, ["prevent"])
       }, [
         a.value.inputs._code ? (p(), B(O(Ye), {
           key: 0,
@@ -2243,7 +2273,7 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
           class: "--input",
           "data-interface-type": "node",
           style: { "flex-grow": "0" }
-        }, null, 8, ["intf", "node", "title"])) : L("", !0),
+        }, null, 8, ["intf", "node", "title"])) : j("", !0),
         C.value ? ke((p(), b("input", {
           key: 2,
           ref_key: "renameInputEl",
@@ -2259,7 +2289,7 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
           [xe, h.value]
         ]) : (p(), b(U, { key: 1 }, [
           m("div", hs, [
-            a.value.idx > -1 ? (p(), b("span", fs, P(a.value.idx + 1) + " > ", 1)) : L("", !0),
+            a.value.idx > -1 ? (p(), b("span", fs, P(a.value.idx + 1) + " > ", 1)) : j("", !0),
             et(P(a.value.title), 1)
           ]),
           m("div", ms, [
@@ -2268,12 +2298,12 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
                 key: 0,
                 class: "--clickable mx-1",
                 onClick: g[0] || (g[0] = (c) => a.value.lockCode = !1)
-              })) : L("", !0),
+              })) : j("", !0),
               a.value.state.integrated ? (p(), B(O(Pn), {
                 key: 1,
                 class: "--clickable mx-1",
                 onClick: g[1] || (g[1] = (c) => se(!1))
-              })) : (p(), B(O(jo), {
+              })) : (p(), B(O(Ro), {
                 key: 2,
                 class: "--clickable mx-1",
                 onClick: g[2] || (g[2] = (c) => se(!0))
@@ -2291,12 +2321,12 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
                 class: "--clickable mx-1",
                 onClick: z
               }))
-            ], 64)) : L("", !0),
-            G(O(Yn), {
+            ], 64)) : j("", !0),
+            L(O(Yn), {
               class: "--clickable mx-1",
-              onClick: j
+              onClick: R
             }),
-            G(O(t), {
+            L(O(t), {
               modelValue: y.value,
               "onUpdate:modelValue": g[3] || (g[3] = (c) => y.value = c),
               x: 0,
@@ -2313,7 +2343,7 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
           class: "--output",
           title: a.value.outputs._code.value,
           "data-interface-type": "node"
-        }, null, 8, ["node", "intf", "title"])) : L("", !0)
+        }, null, 8, ["node", "intf", "title"])) : j("", !0)
       ], 32),
       m("div", {
         class: oe(["__content", S.value]),
@@ -2334,14 +2364,14 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
                 class: "baklava-node-interface --output --connected"
               }, [...g[7] || (g[7] = [
                 m("div", { class: "__port" }, null, -1)
-              ])], 8, bs)) : L("", !0)
+              ])], 8, bs)) : j("", !0)
             ])) : q(M.$slots, "nodeInterface", {
               key: 1,
               type: "output",
               node: a.value,
               intf: c
             }, () => [
-              G(O(s), {
+              L(O(o), {
                 node: a.value,
                 intf: c,
                 title: c.value
@@ -2361,14 +2391,14 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
                 class: "baklava-node-interface --input --connected"
               }, [...g[8] || (g[8] = [
                 m("div", { class: "__port" }, null, -1)
-              ])], 8, Cs)) : L("", !0)
+              ])], 8, Cs)) : j("", !0)
             ])) : q(M.$slots, "nodeInterface", {
               key: 1,
               node: a.value,
               intf: c,
               type: "input"
             }, () => [
-              G(O(s), {
+              L(O(o), {
                 node: a.value,
                 intf: c,
                 title: c.value
@@ -2386,12 +2416,12 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
     intf: {}
   },
   setup(n) {
-    const e = n, { viewModel: t } = me(), { hoveredOver: s, temporaryConnection: o } = Qt(), a = H(null), i = A(() => e.intf.connectionCount > 0), r = A(() => ({
+    const e = n, { viewModel: t } = me(), { hoveredOver: o, temporaryConnection: s } = Qt(), a = H(null), i = G(() => e.intf.connectionCount > 0), r = G(() => ({
       "--connected": i.value
     })), l = () => {
-      s(e.intf);
+      o(e.intf);
     }, u = () => {
-      s(void 0);
+      o(void 0);
     }, f = () => {
       a.value && t.value.hooks.renderInterface.execute({ intf: e.intf, el: a.value });
     };
@@ -2403,10 +2433,10 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
     }, [
       n.intf.port ? (p(), b("div", {
         key: 0,
-        class: oe([{ "--selected": O(o)?.from === n.intf }, "__port"]),
+        class: oe([{ "--selected": O(s)?.from === n.intf }, "__port"]),
         onPointerover: l,
         onPointerout: u
-      }, null, 34)) : L("", !0),
+      }, null, 34)) : j("", !0),
       m("span", xs, [
         q(C.$slots, "default")
       ])
@@ -2426,12 +2456,12 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
   emits: ["update:modelValue"],
   setup(n, { emit: e }) {
     const t = e;
-    return (s, o) => (p(), b("div", {
+    return (o, s) => (p(), b("div", {
       class: oe(["baklava-checkbox", { "--checked": n.inversed ? !n.modelValue : n.modelValue, "--disabled": n.disabled }]),
       title: n.name,
-      onClick: o[0] || (o[0] = (a) => t("update:modelValue", !n.modelValue))
+      onClick: s[0] || (s[0] = (a) => t("update:modelValue", !n.modelValue))
     }, [
-      o[1] || (o[1] = m("div", { class: "__checkmark-container" }, [
+      s[1] || (s[1] = m("div", { class: "__checkmark-container" }, [
         m("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           width: "18",
@@ -2445,28 +2475,28 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
           })
         ])
       ], -1)),
-      n.name ? (p(), b("div", Ns, P(n.name), 1)) : L("", !0)
+      n.name ? (p(), b("div", Ns, P(n.name), 1)) : j("", !0)
     ], 10, Is));
   }
-}), Es = { class: "__header" }, Ts = { class: "__node-name" }, Os = { class: "__interfaces" }, Ms = { class: "__inputs" }, $s = { style: { display: "flex" } }, Ss = { class: "__outputs" }, As = {
+}), Es = { class: "__header" }, Ts = { class: "__node-name" }, Os = { class: "__interfaces" }, Ms = { class: "__inputs" }, $s = { style: { display: "flex" } }, Ss = { class: "__outputs" }, Gs = {
   key: 0,
   class: "__interface"
-}, Gs = { style: { display: "flex" } }, Rs = /* @__PURE__ */ F({
+}, Ls = { style: { display: "flex" } }, As = /* @__PURE__ */ F({
   __name: "CodeGraphSidebar",
   setup(n) {
-    const { viewModel: e } = me(), { graph: t } = Ge(), s = H(null), o = $e(e.value.settings.sidebar, "width"), a = A(() => e.value.settings.sidebar.resizable);
+    const { viewModel: e } = me(), { graph: t } = Le(), o = H(null), s = $e(e.value.settings.sidebar, "width"), a = G(() => e.value.settings.sidebar.resizable);
     let i = 0, r = 0;
-    const l = A(() => {
+    const l = G(() => {
       const y = t.value.sidebar.nodeId;
       return t.value.nodes.find(($) => $.id === y);
-    }), u = A(() => l.value), f = A(() => ({
-      width: `${o.value}px`
-    })), 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 = () => {
+    }), u = G(() => l.value), f = G(() => ({
+      width: `${s.value}px`
+    })), C = G(() => u.value ? Object.values(u.value.inputs).filter((y) => y.displayInSidebar && y.component) : []), h = G(() => 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, r = y.clientX, window.addEventListener("mousemove", d), window.addEventListener(
+      i = s.value, r = y.clientX, window.addEventListener("mousemove", d), window.addEventListener(
         "mouseup",
         () => {
           window.removeEventListener("mousemove", d);
@@ -2474,21 +2504,21 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
         { once: !0 }
       );
     }, d = (y) => {
-      const $ = s.value?.parentElement?.getBoundingClientRect().width ?? 500, T = y.clientX - r;
+      const $ = o.value?.parentElement?.getBoundingClientRect().width ?? 500, T = y.clientX - r;
       let S = i - T;
-      S < 300 ? S = 300 : S > 0.9 * $ && (S = 0.9 * $), o.value = S;
+      S < 300 ? S = 300 : S > 0.9 * $ && (S = 0.9 * $), s.value = S;
     };
     return (y, $) => (p(), b("div", {
       class: oe([{ "--open": O(t).sidebar.visible }, "baklava-sidebar"]),
-      style: Ae(f.value),
+      style: Ge(f.value),
       ref_key: "el",
-      ref: s
+      ref: o
     }, [
       a.value ? (p(), b("div", {
         key: 0,
         class: "__resizer",
         onMousedown: w
-      }, null, 32)) : L("", !0),
+      }, null, 32)) : j("", !0),
       l.value ? (p(), b(U, { key: 1 }, [
         m("div", Es, [
           m("button", {
@@ -2507,7 +2537,7 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
               class: "__interface"
             }, [
               m("div", $s, [
-                G(We, {
+                L(We, {
                   modelValue: T.hidden,
                   "onUpdate:modelValue": [
                     (S) => T.hidden = S,
@@ -2528,7 +2558,7 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
             ]))), 128))
           ]),
           m("div", Ss, [
-            u.value && u.value.state ? (p(), b("div", As, [
+            u.value && u.value.state ? (p(), b("div", Gs, [
               $[3] || ($[3] = m("label", null, "Variable name", -1)),
               ke(m("input", {
                 "onUpdate:modelValue": $[1] || ($[1] = (T) => u.value.state.variableName = T),
@@ -2540,13 +2570,13 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
               }, null, 544), [
                 [xe, u.value.state.variableName]
               ])
-            ])) : L("", !0),
+            ])) : j("", !0),
             (p(!0), b(U, null, ae(h.value, (T) => (p(), b("div", {
               key: T.id,
               class: "__interface"
             }, [
-              m("div", Gs, [
-                G(We, {
+              m("div", Ls, [
+                L(We, {
                   modelValue: T.hidden,
                   "onUpdate:modelValue": [
                     (S) => T.hidden = S,
@@ -2568,13 +2598,13 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
           ])
         ]),
         q(y.$slots, "codeEditor", { node: l.value })
-      ], 64)) : L("", !0)
+      ], 64)) : j("", !0)
     ], 6));
   }
-}), js = {
+}), Rs = {
   class: "baklava-node --palette",
   style: { "margin-top": "-20px", "margin-bottom": "20px" }
-}, Ls = {
+}, js = {
   key: 0,
   style: { display: "flex", "justify-content": "space-between" }
 }, Ps = ["onClick"], Vs = {
@@ -2583,19 +2613,19 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
 }, Bs = /* @__PURE__ */ F({
   __name: "CodeNodePalette",
   setup(n) {
-    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(
+    const e = Me.PaletteEntry, { viewModel: t } = me(), { x: o, y: s } = 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 ? Jo(v, (w) => {
       const d = w[1];
       return d.category.includes(l.value.toLowerCase()) || d.title?.toLowerCase().includes(l.value.toLowerCase());
-    }) : v, h = A(() => {
+    }) : v, h = G(() => {
       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`
+        top: `${s.value - w}px`,
+        left: `${o.value - v}px`
       };
     }), N = (v, w) => {
       u.value = {
@@ -2605,7 +2635,7 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
       const d = () => {
         const y = te(new w.type());
         t.value.displayedGraph.addNode(y);
-        const $ = r.value.getBoundingClientRect(), [T, S] = a(s.value - $.left, o.value - $.top);
+        const $ = r.value.getBoundingClientRect(), [T, S] = a(o.value - $.left, s.value - $.top);
         y.position.x = T, y.position.y = S, u.value = null, document.removeEventListener("pointerup", d);
       };
       document.addEventListener("pointerup", d);
@@ -2616,7 +2646,7 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
         onContextmenu: w[1] || (w[1] = de(() => {
         }, ["stop", "prevent"]))
       }, [
-        m("div", js, [
+        m("div", Rs, [
           ke(m("input", {
             "onUpdate:modelValue": w[0] || (w[0] = (d) => l.value = d),
             type: "text",
@@ -2630,13 +2660,13 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
         (p(!0), b(U, null, ae(f(), (d) => (p(), b("section", {
           key: d.name
         }, [
-          d.name !== "default" ? (p(), b("h3", Ls, [
+          d.name !== "default" ? (p(), b("h3", js, [
             m("div", {
               onClick: (y) => l.value = d.name,
               style: { cursor: "pointer" }
             }, 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),
+            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)) : j("", !0)
+          ])) : j("", !0),
           (p(!0), b(U, null, ae(C(d.nodeTypes), (y, $) => (p(), B(O(e), {
             key: $,
             title: y.title,
@@ -2645,18 +2675,18 @@ const as = /* @__PURE__ */ ts(ss), rs = (n) => ({
           }, null, 8, ["title", "type", "onPointerdown"]))), 128))
         ]))), 128))
       ], 34),
-      G(St, { name: "fade" }, {
+      L(St, { name: "fade" }, {
         default: ee(() => [
           u.value ? (p(), b("div", {
             key: 0,
             class: "baklava-dragged-node",
-            style: Ae(h.value)
+            style: Ge(h.value)
           }, [
-            G(O(e), {
+            L(O(e), {
               type: u.value.type,
               title: u.value.nodeInformation.title
             }, null, 8, ["type", "title"])
-          ], 4)) : L("", !0)
+          ], 4)) : j("", !0)
         ]),
         _: 1
       })
@@ -2678,7 +2708,7 @@ function Ds(n, e) {
     _: 3
   });
 }
-const Ke = /* @__PURE__ */ R(Hs, [["render", Ds]]), Fs = { class: "navbar" }, Ys = ["onClick"], xa = /* @__PURE__ */ F({
+const Xe = /* @__PURE__ */ A(Hs, [["render", Ds]]), Fs = { class: "navbar" }, Ys = ["onClick"], xa = /* @__PURE__ */ F({
   __name: "NavBar",
   props: {
     viewModel: {},
@@ -2687,12 +2717,12 @@ const Ke = /* @__PURE__ */ R(Hs, [["render", Ds]]), Fs = { class: "navbar" }, Ys
   },
   emits: ["click:remove"],
   setup(n, { emit: e }) {
-    const t = e, s = (o) => {
-      t("click:remove", o);
+    const t = e, o = (s) => {
+      t("click:remove", s);
     };
-    return (o, a) => (p(), b("nav", Fs, [
-      q(o.$slots, "prepend"),
-      (p(!0), b(U, null, ae(n.editorStates, (i) => (p(), B(Ke, {
+    return (s, a) => (p(), b("nav", Fs, [
+      q(s.$slots, "prepend"),
+      (p(!0), b(U, null, ae(n.editorStates, (i) => (p(), B(Xe, {
         key: i.graph.id,
         class: oe({ active: i.graph.id === n.viewModel.displayedGraph.id }),
         to: { name: n.routes?.edit ?? "edit", params: { editorId: i.graph.id } }
@@ -2700,9 +2730,9 @@ const Ke = /* @__PURE__ */ R(Hs, [["render", Ds]]), Fs = { class: "navbar" }, Ys
         appendIcon: ee(() => [
           m("button", {
             class: "remove",
-            onClick: de((r) => s(i.graph.id), ["prevent"])
+            onClick: de((r) => o(i.graph.id), ["prevent"])
           }, [
-            G(O(Do))
+            L(O(Do))
           ], 8, Ys)
         ]),
         default: ee(() => [
@@ -2710,13 +2740,13 @@ const Ke = /* @__PURE__ */ R(Hs, [["render", Ds]]), Fs = { class: "navbar" }, Ys
         ]),
         _: 2
       }, 1032, ["class", "to"]))), 128)),
-      q(o.$slots, "append", {}, () => [
-        G(Ke, {
+      q(s.$slots, "append", {}, () => [
+        L(Xe, {
           to: { name: n.routes?.new ?? "new" },
           class: "navItem"
         }, {
           default: ee(() => [
-            G(O(xo), { class: "plus" })
+            L(O(xo), { class: "plus" })
           ]),
           _: 1
         }, 8, ["to"])
@@ -2727,32 +2757,32 @@ const Ke = /* @__PURE__ */ R(Hs, [["render", Ds]]), Fs = { class: "navbar" }, Ys
 class xt extends wt {
   _title = "Subgraph Input";
   inputs = {
-    _code: new D("_code", "").use(V, K).setHidden(!0),
+    _code: new D("_code", "").use(V, X).setHidden(!0),
     name: new at("Name", "Input").setPort(!1)
   };
   outputs = {
-    _code: new D("_code", "").use(V, K).setHidden(!0),
+    _code: new D("_code", "").use(V, X).setHidden(!0),
     placeholder: new J("Connection", void 0)
   };
 }
 class It extends kt {
   _title = "Subgraph Output";
   inputs = {
-    _code: new D("_code", "").use(V, K).setHidden(!0),
+    _code: new D("_code", "").use(V, X).setHidden(!0),
     name: new at("Name", "Output").setPort(!1),
     placeholder: new J("Connection", void 0)
   };
   outputs = {
-    _code: new D("_code", "").use(V, K).setHidden(!0),
+    _code: new D("_code", "").use(V, X).setHidden(!0),
     output: new J("Output", void 0).setHidden(!0)
   };
 }
-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 Ws = "CREATE_SUBGRAPH", Ke = [Pt, Vt];
+function Xs(n, e, t) {
+  const o = () => n.value.selectedNodes.filter((a) => !Ke.includes(a.type)).length > 0, s = () => {
     const { viewModel: a } = me(), i = n.value, r = n.value.editor;
     if (i.selectedNodes.length === 0) return;
-    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(
+    const l = i.selectedNodes.filter((k) => !Ke.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) && !u.includes(k.to)
@@ -2762,20 +2792,20 @@ function Ks(n, e, t) {
       id: k.id,
       from: k.from.id,
       to: k.to.id
-    })), d = /* @__PURE__ */ new Map(), { xLeft: y, xRight: $, yTop: T } = Xs(l);
-    for (const [k, j] of C.entries()) {
+    })), d = /* @__PURE__ */ new Map(), { xLeft: y, xRight: $, yTop: T } = Ks(l);
+    for (const [k, R] of C.entries()) {
       const z = new xt();
-      z.inputs.name.value = j.to.name, v.push({
+      z.inputs.name.value = R.to.name, v.push({
         ...z.save(),
         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);
+      }), w.push({ id: re(), from: z.outputs.placeholder.id, to: R.to.id }), d.set(R.to.id, z.graphInterfaceId);
     }
-    for (const [k, j] of h.entries()) {
+    for (const [k, R] of h.entries()) {
       const z = new It();
-      z.inputs.name.value = j.from.name, v.push({
+      z.inputs.name.value = R.from.name, v.push({
         ...z.save(),
         position: { x: y + 100, y: T + k * 200 }
-      }), w.push({ id: re(), from: j.from.id, to: z.inputs.placeholder.id }), d.set(j.from.id, z.graphInterfaceId);
+      }), w.push({ id: re(), from: R.from.id, to: z.inputs.placeholder.id }), d.set(R.from.id, z.graphInterfaceId);
     }
     const S = te(
       new Ne(
@@ -2796,32 +2826,32 @@ function Ks(n, e, t) {
     const Z = te(new Q.type());
     i.addNode(Z);
     const pe = Math.round(
-      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
+      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
     );
-    Z.position.x = pe, Z.position.y = X, C.forEach((k) => {
+    Z.position.x = pe, Z.position.y = K, 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[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(Ws, {
-    canExecute: s,
-    execute: o
+    canExecute: o,
+    execute: s
   });
 }
-function Xs(n) {
-  const e = n.reduce((o, a) => {
+function Ks(n) {
+  const e = n.reduce((s, a) => {
     const i = a.position.x;
-    return i < o ? i : o;
-  }, 1 / 0), t = n.reduce((o, a) => {
+    return i < s ? i : s;
+  }, 1 / 0), t = n.reduce((s, a) => {
     const i = a.position.y;
-    return i < o ? i : o;
+    return i < s ? i : s;
   }, 1 / 0);
-  return { xLeft: n.reduce((o, a) => {
+  return { xLeft: n.reduce((s, a) => {
     const i = a.position.x + a.width;
-    return i > o ? i : o;
+    return i > s ? i : s;
   }, -1 / 0), xRight: e, yTop: t };
 }
 class qs extends Bt {
@@ -2857,12 +2887,12 @@ class qs extends Bt {
     try {
       for (super._loading = !0, e = this.hooks.load.execute(e); this.graphTemplates.length > 0; )
         this.removeGraphTemplate(this.graphTemplates[0]);
-      e.graphTemplates.forEach((s) => {
-        const o = new Ne(s, this);
-        this.addGraphTemplate(o);
+      e.graphTemplates.forEach((o) => {
+        const s = new Ne(o, this);
+        this.addGraphTemplate(s);
       });
       const t = this.graph.load(e.graph);
-      return this.events.loaded.emit(), t.forEach((s) => console.warn(s)), t;
+      return this.events.loaded.emit(), t.forEach((o) => console.warn(o)), t;
     } finally {
       super._loading = !1;
     }
@@ -2877,7 +2907,7 @@ class qs extends Bt {
   }
 }
 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());
+  const e = H(n?.code ?? new Ve()), t = H(n?.existingEditor ?? new qs(e.value)), o = Symbol("ViewModelToken"), s = H(null), a = Gt(s), { switchGraph: i } = es(t, s), r = G(() => a.value && a.value !== t.value.graph), l = te(tn());
   l.nodes.defaultWidth = 400;
   const u = nn(), f = on(a, u), C = sn(a, t, u), h = {
     /** Called whenever a node is rendered */
@@ -2900,11 +2930,11 @@ function Ia(n) {
     settings: l,
     switchGraph: i
   });
-  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(
+  return e.value.registerViewModel(N), Xo(N), an(a, u), Xs(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, (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,
+      w && (w.events.registerGraph.unsubscribe(o), w.graphEvents.beforeAddNode.unsubscribe(o), v.nodeHooks.beforeLoad.unsubscribe(o), v.nodeHooks.afterSave.unsubscribe(o), v.graphTemplateHooks.beforeLoad.unsubscribe(o), v.graphTemplateHooks.afterSave.unsubscribe(o), v.graph.hooks.load.unsubscribe(o), v.graph.hooks.save.unsubscribe(o)), v && (v.nodeHooks.beforeLoad.subscribe(o, (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(o, (d, y) => (d.position = y.position, d.width = y.width, d.twoColumn = y.twoColumn, d)), v.graphTemplateHooks.beforeLoad.subscribe(o, (d, y) => (y.panning = d.panning, y.scaling = d.scaling, d)), v.graphTemplateHooks.afterSave.subscribe(o, (d, y) => (d.panning = y.panning, d.scaling = y.scaling, d)), v.graph.hooks.load.subscribe(o, (d, y) => (y.panning = d.panning, y.scaling = d.scaling, d)), v.graph.hooks.save.subscribe(o, (d, y) => (d.panning = y.panning, d.scaling = y.scaling, d)), v.graphEvents.beforeAddNode.subscribe(
+        o,
         (d) => cn(d, { defaultWidth: l.nodes.defaultWidth })
       ), t.value.registerNodeType(xt, { category: "Subgraphs" }), t.value.registerNodeType(It, { category: "Subgraphs" }), i(v.graph));
     },
@@ -2915,7 +2945,7 @@ export {
   rt as AbstractCodeNode,
   vt as CLEAR_ALL_COMMAND,
   Ws as CREATE_SUBGRAPH_COMMAND,
-  Gn as Check,
+  Ln as Check,
   yn as CheckboxInterface,
   Ve as Code,
   Ca as CodeEditor,
@@ -2927,12 +2957,12 @@ export {
   ws as CodeGraphNode,
   Ye as CodeGraphNodeInterface,
   kt as CodeGraphOutputNode,
-  Rs as CodeGraphSidebar,
+  As as CodeGraphSidebar,
   Ne as CodeGraphTemplate,
-  Re as CodeNode,
+  Ae as CodeNode,
   ve as CodeNodeInputInterface,
   D as CodeNodeInterface,
-  je as CodeNodeInterfaceComponent,
+  Re as CodeNodeInterfaceComponent,
   _n as CodeNodeOutputInterface,
   Bs as CodeNodePalette,
   Pn as CodeVariable,
@@ -2952,7 +2982,7 @@ export {
   da as ListInputInterface,
   mt as LockCode,
   xa as NavBar,
-  Ke as NavItem,
+  Xe as NavItem,
   Cn as NumberInterface,
   _o as PlayerPlay,
   xo as Plus,
@@ -2970,7 +3000,7 @@ export {
   ft as TextInputInterface,
   Tn as TextInputInterfaceComponent,
   ca as TextareaInputInterface,
-  jo as TransitionBottom,
+  Ro as TransitionBottom,
   Bo as TrashOff,
   pa as TupleInputInterface,
   Do as X,
@@ -2988,10 +3018,10 @@ export {
   ya as getPositionBeforeNode,
   dt as listType,
   it as loadNodeState,
-  K as nodeType,
+  X as nodeType,
   ut as numberType,
-  Ko as registerCodeEngine,
-  Ks as registerCreateSubgraphCommand,
+  Xo as registerCodeEngine,
+  Xs as registerCreateSubgraphCommand,
   Fo as registerCustomCommands,
   Wo as registerRunEngineCommands,
   mn as saveNodeState,