@babsey/code-graph 0.0.16 → 0.0.17

package/dist/code-graph.js

@@ -1,27 +1,30 @@
-import { AbstractNode as De, sortTopologically as Ce, NodeInterface as Pe, displayInSidebar as ke, NodeInterfaceType as D, BaklavaInterfaceTypes as He, CheckboxInterfaceComponent as Ae, setType as L, IntegerInterfaceComponent as Fe, NumberInterfaceComponent as We, SelectInterfaceComponent as Xe, SliderInterfaceComponent as Ye, TextInputInterfaceComponent as qe, TextareaInputInterfaceComponent as Je, allowMultipleConnections as Y, IntegerInterface as Qe, TextInputInterface as Ke, useViewModel as F, useTemporaryConnection as Ze, Components as ye, useGraph as ee, GRAPH_NODE_TYPE_PREFIX as J, useTransform as et, useNodeCategories as tt, BaklavaEditor as st, DEFAULT_TOOLBAR_COMMANDS as nt, useBaklava as ot, DependencyEngine as at, applyResult as it } from "baklavajs";
-import { CheckboxInterfaceComponent as vn, IntegerInterfaceComponent as mn, NumberInterfaceComponent as fn, SelectInterfaceComponent as gn, SliderInterfaceComponent as bn, TextInputInterfaceComponent as yn, TextareaInputInterfaceComponent as _n } from "baklavajs";
+import { AbstractNode as Ae, sortTopologically as Ce, NodeInterface as Fe, displayInSidebar as Ie, NodeInterfaceType as G, BaklavaInterfaceTypes as We, CheckboxInterfaceComponent as Xe, setType as E, IntegerInterfaceComponent as Je, TextInputInterfaceComponent as se, NumberInterfaceComponent as Ye, SelectInterfaceComponent as qe, SliderInterfaceComponent as Qe, TextareaInputInterfaceComponent as Ke, allowMultipleConnections as Y, IntegerInterface as Ze, TextInputInterface as et, useViewModel as F, useTemporaryConnection as tt, Components as we, useGraph as ne, GRAPH_NODE_TYPE_PREFIX as K, useTransform as st, useNodeCategories as nt, BaklavaEditor as ot, DEFAULT_TOOLBAR_COMMANDS as at, useBaklava as it, DependencyEngine as rt, applyResult as lt } from "baklavajs";
+import { CheckboxInterfaceComponent as In, NumberInterfaceComponent as Nn } from "baklavajs";
 import q from "mustache";
-import { reactive as G, defineComponent as j, createElementBlock as r, openBlock as i, toDisplayString as E, markRaw as S, ref as O, computed as b, onMounted as te, onUpdated as Ne, normalizeClass as U, createCommentVNode as N, createElementVNode as d, unref as C, renderSlot as Q, createStaticVNode as se, onBeforeUnmount as rt, normalizeStyle as ne, withModifiers as P, createBlock as V, withDirectives as oe, Fragment as $, createTextVNode as dt, createVNode as T, withKeys as K, vModelText as ae, renderList as H, nextTick as lt, toRef as Ie, resolveDynamicComponent as ut, inject as ct, Transition as pt, withCtx as X, onUnmounted as ht, normalizeProps as vt, guardReactiveProps as mt, mergeProps as ft } from "vue";
-import gt from "toposort";
-import { v4 as bt } from "uuid";
-import { usePointer as yt } from "@vueuse/core";
+import { reactive as R, defineComponent as L, createElementBlock as r, openBlock as i, toDisplayString as B, markRaw as M, ref as T, computed as _, onMounted as oe, onUpdated as Ne, normalizeClass as U, createCommentVNode as I, createElementVNode as l, unref as y, renderSlot as Z, createStaticVNode as Q, onBeforeUnmount as dt, normalizeStyle as ae, withModifiers as P, createBlock as S, withDirectives as ie, Fragment as z, createTextVNode as ut, createVNode as V, withKeys as ee, vModelText as re, renderList as H, nextTick as ct, toRef as Me, resolveDynamicComponent as pt, inject as ht, Transition as vt, withCtx as J, onUnmounted as mt, normalizeProps as ft, guardReactiveProps as gt, mergeProps as bt } from "vue";
+import yt from "toposort";
+import { v4 as _t } from "uuid";
+import { usePointer as wt } from "@vueuse/core";
 q.escape = (s) => s;
-class _t extends De {
+class kt extends Ae {
   state;
   code;
   isCodeNode = !0;
-  codeTemplate = () => "{{ outputs.code }}";
+  name = "";
+  codeTemplate;
   inputs = {};
   outputs = {};
   constructor() {
-    super(), this.initializeIo(), this.width = 400, this.twoColumn = !0, this.state = G({
+    super(), this.initializeIo(), this.width = 400, this.twoColumn = !0, this.state = R({
       codeTemplate: "",
       hidden: !1,
       integrated: !1,
       modules: [],
       script: "",
       variableName: ""
-    });
+    }), this.codeTemplate = function() {
+      return `${this.name}(${xt(this.codeNodeInputs).join(", ")})`;
+    };
   }
   get codeNodeInputs() {
     return Object.fromEntries(Object.entries(this.inputs).filter(([e, t]) => t.type != "node"));
@@ -73,33 +76,49 @@ class _t extends De {
    * Render code of this node.
    */
   renderCode() {
-    this.state.codeTemplate = this.codeTemplate.call(this);
     const e = {};
     Object.keys(this.inputs).forEach((n) => {
       if (n === "_node") return;
-      const o = this.inputs[n], a = _e(o);
-      o && o.state && (e[n] = o.state.script.length > 0 ? o.state.script : a);
+      const o = this.inputs[n];
+      o && o.state && (e[n] = o.state.script.length > 0 ? o.state.script : o.getValue());
     });
     const t = {};
     Object.keys(this.outputs).forEach((n) => {
       if (n === "_node") return;
-      const o = this.outputs[n], a = _e(o);
-      o && o.state && (t[n] = a);
+      const o = this.outputs[n];
+      o && o.state && (t[n] = o.getValue());
     }), this.state.script = q.render(this.state.codeTemplate, { inputs: e, outputs: t }), this.outputs.code && (this.outputs.code.state.script = this.state.script);
   }
-  updateCodeNodeInputInterfaces() {
+  resetInputInterfaceScript() {
+    Object.values(this.inputs).forEach((e) => e.state.script = "");
+  }
+  updateCodeTemplate() {
+    this.state.codeTemplate = this.codeTemplate.call(this);
+  }
+  updateConnectedInputInterfaces() {
     if (!this.graph) return;
     const { connectionsFromNode: e } = Ce(this.graph);
-    e.has(this) && e.get(this).forEach((t) => {
-      const n = this.graph?.findNodeById(t.from.nodeId);
-      n && (n.renderCode(), t.from.isCodeNode && t.to.isCodeNode && (t.to.state.script = t.from.script));
+    if (!e.has(this)) return;
+    const t = e.get(this);
+    t && t.forEach((n) => {
+      if (!n.from.isCodeNode || !n.to.isCodeNode) return;
+      const o = this.graph?.findNodeById(n.from.nodeId);
+      if (o)
+        if (o.renderCode(), n.to.allowMultipleConnections)
+          if (n.to.state.script.startsWith("[") && n.to.state.script.endsWith("]")) {
+            const a = JSON.parse(n.to.state.script);
+            n.to.state.script = JSON.stringify([...a, n.from.script]);
+          } else
+            n.to.state.script += n.from.script;
+        else
+          n.to.state.script = n.from.script;
     });
   }
   updateOutputVariableName() {
-    this.outputs.code && (this.outputs.code.name = this.variableName);
+    this.outputs.code && (this.outputs.code.name = this.state.integrated ? "" : this.variableName);
   }
 }
-class Me extends _t {
+class $e extends kt {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -113,7 +132,7 @@ class Me extends _t {
   }
   save() {
     const e = super.save();
-    return wt(this.graph, e), e;
+    return Ct(this.graph, e), e;
   }
   updateModules(e) {
     if (e)
@@ -124,7 +143,7 @@ class Me extends _t {
     }
   }
 }
-const Ys = (s) => {
+const xt = (s) => {
   const e = [], t = Object.keys(s);
   return t.forEach((n) => {
     if (s[n]?.hidden) return;
@@ -141,7 +160,7 @@ const Ys = (s) => {
   }), Object.entries(e.outputs).forEach(([o, a]) => {
     o !== "_node" && n.outputs[o] && (n.outputs[o].hidden = a.hidden);
   });
-}, wt = (s, e) => {
+}, Ct = (s, e) => {
   if (!s) return;
   const t = s.findNodeById(e.id);
   if (!t || t.subgraph) return;
@@ -151,24 +170,7 @@ const Ys = (s) => {
   }), Object.entries(e.outputs).forEach(([o, a]) => {
     o !== "_node" && n.outputs[o] && (a.hidden = n.outputs[o].hidden);
   });
-}, _e = (s) => {
-  let e;
-  if (s.value == null) return "None";
-  switch (s.type) {
-    case "boolean":
-      e = s.value ? "True" : "False";
-      break;
-    case "string":
-      e = `'${s.value}'`;
-      break;
-    case void 0:
-      e = "None";
-      break;
-    default:
-      e = `${s.value}`;
-  }
-  return e;
-}, xt = ["title"], ie = /* @__PURE__ */ j({
+}, It = ["title"], le = /* @__PURE__ */ L({
   __name: "CodeNodeInterface",
   props: {
     intf: {}
@@ -176,16 +178,16 @@ const Ys = (s) => {
   setup(s) {
     return (e, t) => (i(), r("div", {
       title: s.intf.state?.script
-    }, E(s.intf.name), 9, xt));
+    }, B(s.intf.name), 9, It));
   }
 });
-class R extends Pe {
+class D extends Fe {
   isCodeNode = !0;
   code;
   state;
   type = null;
   constructor(e, t) {
-    super(e, t), this.setComponent(S(ie)), this.state = G({
+    super(e, t), this.setComponent(M(le)), this.state = R({
       optional: !1,
       script: ""
     });
@@ -196,13 +198,14 @@ class R extends Pe {
   get shortId() {
     return this.id.slice(0, 6);
   }
+  getValue = () => `${this.value ?? "None"}`;
 }
-const qs = (s, e) => {
-  s.state.optional = e, s.setHidden(!0);
+const on = (s, e) => {
+  s.state.optional = e, s.setHidden(e);
 };
-class re extends R {
+class W extends D {
   constructor(e = "", t) {
-    super(e, t), this.setComponent(S(ie)), this.use(ke, !0);
+    super(e, t), this.setComponent(M(le)), this.use(Ie, !0);
   }
   get value() {
     return super.value;
@@ -211,80 +214,95 @@ class re extends R {
     super.value = e, this.name !== "_node" && this.setHidden(!1);
   }
 }
-const $e = new D("boolean"), Ct = new D("dict"), kt = new D("list"), A = new D("node"), de = new D("number"), le = new D("string"), Js = (s) => {
-  new He(s.editor, { viewPlugin: s }).addTypes($e, Ct, kt, A, de, le);
+const Te = new G("boolean"), Nt = new G("dict"), Ee = new G("list"), A = new G("node"), de = new G("number"), ue = new G("string"), Se = new G("tuple"), an = (s) => {
+  new We(s.editor, { viewPlugin: s }).addTypes(Te, Nt, Ee, A, de, ue, Se);
 };
-class Qs extends re {
+class rn extends W {
   constructor(e, t) {
-    super(e, t), this.setComponent(S(Ae)), this.use(L, $e);
+    super(e, t), this.setComponent(M(Xe)), this.use(E, Te);
   }
+  getValue = () => this.value ? "True" : "False";
 }
-class Nt extends R {
+class Mt extends D {
   isCodeNodeOutput = !0;
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(S(ie));
+    super(e, t), this.setComponent(M(le));
   }
   get script() {
     return this.name.length > 0 ? this.name : this.state.script;
   }
 }
-class ue extends re {
+class ce extends W {
   min;
   max;
   constructor(e, t, n, o) {
-    super(e, t), this.min = n, this.max = o, this.use(L, de);
+    super(e, t), this.min = n, this.max = o, this.use(E, de);
   }
   validate(e) {
     return (this.min === void 0 || e >= this.min) && (this.max === void 0 || e <= this.max);
   }
 }
-class Ks extends ue {
-  component = S(Fe);
+class ln extends ce {
+  component = M(Je);
   validate(e) {
     return Number.isInteger(e) && super.validate(e);
   }
 }
-class Zs extends ue {
-  component = S(We);
+class dn extends W {
+  constructor(e = "", t = "") {
+    super(e, t), this.setComponent(M(se)), this.use(E, Ee);
+  }
+  getValue = () => `[${this.value}]`;
+}
+class un extends ce {
+  component = M(Ye);
 }
-class ce extends re {
+class pe extends W {
   constructor(e, t) {
-    super(e, t), this.use(L, le);
+    super(e, t), this.use(E, ue);
   }
+  getValue = () => `'${this.value}'`;
 }
-class en extends ce {
-  component = S(Xe);
+class cn extends pe {
+  component = M(qe);
   items;
   constructor(e, t, n) {
     super(e, t), this.items = n;
   }
 }
-class tn extends ue {
-  component = S(Ye);
+class pn extends ce {
+  component = M(Qe);
   min;
   max;
   constructor(e, t, n, o) {
     super(e, t, n, o), this.min = n, this.max = o;
   }
+  getValue = () => `${Math.round(this.value * 1e3) / 1e3}`;
 }
-class sn extends ce {
-  component = S(qe);
+class hn extends pe {
+  component = M(se);
 }
-class nn extends ce {
-  component = S(Je);
+class vn extends pe {
+  component = M(Ke);
 }
-function on(s) {
-  return class extends Me {
+class mn extends W {
+  constructor(e = "", t = "") {
+    super(e, t), this.setComponent(M(se)), this.use(E, Se);
+  }
+  getValue = () => `(${this.value})`;
+}
+function fn(s) {
+  return class extends $e {
     type = s.type;
     inputs = {};
     outputs = {};
     constructor() {
-      super(), this._title = s.title ?? s.type, this.updateModules(s.modules), s.variableName && (this.state.variableName = s.variableName), s.codeTemplate && (this.codeTemplate = s.codeTemplate), this.addInput(
+      super(), this._title = s.title ?? s.type, this.name = s.name ?? s.type, this.updateModules(s.modules), s.variableName && (this.state.variableName = s.variableName), s.codeTemplate && (this.codeTemplate = s.codeTemplate), this.addInput(
         "_node",
-        new R("", []).use(L, A).use(Y).setHidden(!0)
+        new D("", []).use(E, A).use(Y).setHidden(!0)
       ), this.addOutput(
         "_node",
-        new R("", []).use(L, A).use(Y).setHidden(!0)
+        new D("", []).use(E, A).use(Y).setHidden(!0)
       ), this.executeFactory("input", s.inputs), this.executeFactory("output", s.outputs), s.onCreate?.call(this);
     }
     // public calculate = definition.calculate
@@ -310,7 +328,7 @@ function on(s) {
     }
   };
 }
-class It extends Me {
+class $t extends $e {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -320,8 +338,8 @@ class It extends Me {
    */
   calculate;
 }
-function an(s) {
-  return class extends It {
+function gn(s) {
+  return class extends $t {
     type = s.type;
     inputs = {};
     outputs = {};
@@ -330,12 +348,12 @@ function an(s) {
     staticInputKeys = Object.keys(s.inputs ?? {});
     staticOutputKeys = Object.keys(s.outputs ?? {});
     constructor() {
-      super(), this._title = s.title ?? s.type, this.updateModules(s.modules), s.codeTemplate && (this.codeTemplate = s.codeTemplate), s.variableName && (this.state.variableName = s.variableName), this.addInput(
+      super(), this._title = s.title ?? s.type, this.name = s.name ?? s.type, this.updateModules(s.modules), s.codeTemplate && (this.codeTemplate = s.codeTemplate), s.variableName && (this.state.variableName = s.variableName), this.addInput(
         "_node",
-        new R("", []).use(L, A).use(Y).setHidden(!0)
+        new D("", []).use(E, A).use(Y).setHidden(!0)
       ), this.addOutput(
         "_node",
-        new R("", []).use(L, A).use(Y).setHidden(!0)
+        new D("", []).use(E, A).use(Y).setHidden(!0)
       ), this.staticInputKeys.push("_node"), this.staticOutputKeys.push("_node"), this.executeFactory("input", s.inputs), this.executeFactory("output", s.outputs), s.onCreate?.call(this);
     }
     onPlaced() {
@@ -361,14 +379,14 @@ function an(s) {
           if (!this.inputs[t]) {
             const n = e.inputs[t].value;
             let o;
-            typeof n == "number" ? o = new Qe(t, n).use(L, de) : o = new Ke(t, JSON.stringify(n)).use(L, le), o.use(ke, !0), this.addInput(t, o);
+            typeof n == "number" ? o = new Ze(t, n).use(E, de) : o = new et(t, JSON.stringify(n)).use(E, ue), o.use(Ie, !0), this.addInput(t, o);
           }
           this.inputs[t] && (this.inputs[t].load(e.inputs[t]), this.inputs[t].nodeId = this.id);
         }
       for (const t of Object.keys(e.outputs))
         if (!this.staticOutputKeys.includes(t)) {
           if (!this.outputs[t]) {
-            const n = new Nt(t);
+            const n = new Mt(t);
             this.addOutput(t, n);
           }
           this.outputs[t] && (this.outputs[t].load(e.outputs[t]), this.outputs[t].nodeId = this.id);
@@ -389,12 +407,12 @@ function an(s) {
     }
     updateInterfaces(e, t, n) {
       const o = e === "input" ? this.staticInputKeys : this.staticOutputKeys, a = e === "input" ? this.inputs : this.outputs;
-      for (const u of Object.keys(a))
-        o.includes(u) || t[u] && !n.includes(u) || (e === "input" ? this.removeInput(u) : this.removeOutput(u));
-      for (const u of Object.keys(t)) {
-        if (a[u]) continue;
-        const l = t[u]();
-        e === "input" ? this.addInput(u, l) : this.addOutput(u, l);
+      for (const d of Object.keys(a))
+        o.includes(d) || t[d] && !n.includes(d) || (e === "input" ? this.removeInput(d) : this.removeOutput(d));
+      for (const d of Object.keys(t)) {
+        if (a[d]) continue;
+        const u = t[d]();
+        e === "input" ? this.addInput(d, u) : this.addOutput(d, u);
       }
     }
     executeFactory(e, t) {
@@ -406,12 +424,12 @@ function an(s) {
   };
 }
 q.escape = (s) => s;
-class Mt {
+class Ot {
   _id;
   _viewModel;
   _state;
   constructor(e) {
-    this._id = bt(), this._viewModel = e, this._state = G({
+    this._id = _t(), this._viewModel = e, this._state = R({
       autosort: !1,
       modules: {},
       script: "",
@@ -420,7 +438,7 @@ class Mt {
     });
   }
   get codeNodes() {
-    return Z(this.graph);
+    return te(this.graph);
   }
   get connections() {
     return this.graph.connections;
@@ -450,8 +468,8 @@ class Mt {
     this.graph._nodes = e;
   }
   get scriptedCodeNodes() {
-    return Z(this.graph).filter(
-      (e) => e.state?.script.length > 0
+    return te(this.graph).filter(
+      (e) => !e.state?.integrated
     );
   }
   get shortId() {
@@ -558,6 +576,9 @@ class Mt {
   renderCode() {
     this.state.script = q.render(this.state.template || "", this);
   }
+  resetInputInterfaceScript() {
+    this.codeNodes.forEach((e) => e.resetInputInterfaceScript());
+  }
   /**
    * Save code graph.
    * @returns graph state
@@ -574,10 +595,10 @@ class Mt {
   saveNodeStates(e) {
     e.forEach((t, n) => {
       const o = this.nodes[n];
-      Object.entries(t.inputs).forEach(([a, u]) => {
-        t.inputs && o.inputs[a] && (u.hidden = o.inputs[a].hidden);
-      }), Object.entries(t.outputs).forEach(([a, u]) => {
-        t.outputs && o.outputs[a] && (u.hidden = o.outputs[a].hidden);
+      Object.entries(t.inputs).forEach(([a, d]) => {
+        t.inputs && o.inputs[a] && (d.hidden = o.inputs[a].hidden);
+      }), Object.entries(t.outputs).forEach(([a, d]) => {
+        t.outputs && o.outputs[a] && (d.hidden = o.outputs[a].hidden);
       });
     });
   }
@@ -592,7 +613,7 @@ class Mt {
           a.from.nodeId
         ]);
         let t = [...this.nodeIds];
-        t.reverse(), t = gt.array(t, e), t.reverse();
+        t.reverse(), t = yt.array(t, e), t.reverse();
         const n = this.graph.nodes.map((a) => a.id).filter((a) => !t.includes(a));
         t = t.concat(n);
         const o = t.map((a) => this.findNodeById(a));
@@ -601,22 +622,25 @@ class Mt {
         console.warn("Failed to sort nodes.");
       }
   }
+  updateCodeTemplates() {
+    this.codeNodes.forEach((e) => e.updateCodeTemplate());
+  }
   updateOutputVariableNames() {
     this.codeNodes.forEach((e) => e.updateOutputVariableName());
   }
 }
-const Z = (s) => {
+const te = (s) => {
   let e = [];
   return s.nodes.forEach((t) => {
-    t.subgraph ? e = e.concat(Z(t.subgraph)) : t.isCodeNode && e.push(t);
+    t.subgraph ? e = e.concat(te(t.subgraph)) : t.isCodeNode && e.push(t);
   }), e;
-}, rn = (s = 0, e = 100) => ({
+}, bn = (s = 0, e = 100) => ({
   x: s * 420,
   y: e
-}), dn = (s) => {
+}), yn = (s) => {
   const e = { ...s.position };
   return e.x -= 400, e.y += 50, e;
-}, ln = (s) => {
+}, _n = (s) => {
   const { calculationOrder: e, connectionsFromNode: t } = Ce(s);
   e.forEach((n) => {
     if (!n.isCodeNode) return;
@@ -625,45 +649,91 @@ const Z = (s) => {
       a.to.state && a.from.script && (a.to.state.script = a.from.script);
     });
   });
-}, Ot = ["id"], $t = { class: "align-middle" }, we = /* @__PURE__ */ j({
+}, Tt = ["id"], Et = { class: "align-middle" }, ke = /* @__PURE__ */ L({
   __name: "CodeGraphNodeInterface",
   props: {
     node: {},
     intf: {}
   },
   setup(s) {
-    const e = s, { viewModel: t } = F(), { hoveredOver: n, temporaryConnection: o } = Ze(), a = O(null), u = b(() => e.intf.connectionCount > 0), l = b(() => ({
-      "--connected": u.value
-    })), v = () => {
+    const e = s, { viewModel: t } = F(), { hoveredOver: n, temporaryConnection: o } = tt(), a = T(null), d = _(() => e.intf.connectionCount > 0), u = _(() => ({
+      "--connected": d.value
+    })), m = () => {
       n(e.intf);
-    }, y = () => {
+    }, w = () => {
       n(void 0);
-    }, _ = () => {
+    }, k = () => {
       a.value && t.value.hooks.renderInterface.execute({ intf: e.intf, el: a.value });
     };
-    return te(_), Ne(_), (M, B) => (i(), r("div", {
+    return oe(k), Ne(k), (O, j) => (i(), r("div", {
       id: s.intf.id,
       ref_key: "el",
       ref: a,
-      class: U(["baklava-node-interface", l.value])
+      class: U(["baklava-node-interface", u.value])
     }, [
       s.intf.port ? (i(), r("div", {
         key: 0,
-        class: U(["__port", { "--selected": C(o)?.from === s.intf }]),
-        onPointerover: v,
-        onPointerout: y
-      }, null, 34)) : N("", !0),
-      d("span", $t, [
-        Q(M.$slots, "default")
+        class: U(["__port", { "--selected": y(o)?.from === s.intf }]),
+        onPointerover: m,
+        onPointerout: w
+      }, null, 34)) : I("", !0),
+      l("span", Et, [
+        Z(O.$slots, "default")
       ])
-    ], 10, Ot));
+    ], 10, Tt));
   }
-}), z = (s, e) => {
+}), $ = (s, e) => {
   const t = s.__vccOpts || s;
   for (const [n, o] of e)
     t[n] = o;
   return t;
-}, Tt = {}, Et = {
+}, St = {}, zt = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-code-variable"
+};
+function Vt(s, e) {
+  return i(), r("svg", zt, [...e[0] || (e[0] = [
+    l("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    l("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 Bt = /* @__PURE__ */ $(St, [["render", Vt]]), jt = {}, Lt = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"
+};
+function Ut(s, e) {
+  return i(), r("svg", Lt, [...e[0] || (e[0] = [
+    l("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    l("path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+    l("path", { d: "M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+    l("path", { d: "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
+  ])]);
+}
+const Gt = /* @__PURE__ */ $(jt, [["render", Ut]]), Rt = {}, Dt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -671,17 +741,17 @@ const Z = (s) => {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"
 };
-function St(s, e) {
-  return i(), r("svg", Et, [...e[0] || (e[0] = [
-    d("path", {
+function Pt(s, e) {
+  return i(), r("svg", Dt, [...e[0] || (e[0] = [
+    l("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    d("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-2.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
+    l("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 zt = /* @__PURE__ */ z(Tt, [["render", St]]), Bt = {}, Lt = {
+const Ht = /* @__PURE__ */ $(Rt, [["render", Pt]]), At = {}, Ft = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -689,17 +759,17 @@ const zt = /* @__PURE__ */ z(Tt, [["render", St]]), Bt = {}, Lt = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-expand"
 };
-function Vt(s, e) {
-  return i(), r("svg", Lt, [...e[0] || (e[0] = [
-    d("path", {
+function Wt(s, e) {
+  return i(), r("svg", Ft, [...e[0] || (e[0] = [
+    l("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    d("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-4.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
+    l("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 jt = /* @__PURE__ */ z(Bt, [["render", Vt]]), Ut = {}, Gt = {
+const Xt = /* @__PURE__ */ $(At, [["render", Wt]]), Jt = {}, Yt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -707,17 +777,17 @@ const jt = /* @__PURE__ */ z(Bt, [["render", Vt]]), Ut = {}, Gt = {
   fill: "currentColor",
   class: "balkava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right"
 };
-function Rt(s, e) {
-  return i(), r("svg", Gt, [...e[0] || (e[0] = [
-    d("path", {
+function qt(s, e) {
+  return i(), r("svg", Yt, [...e[0] || (e[0] = [
+    l("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    d("path", { d: "M6 21a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3zm8 -16h-8a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h8z" }, null, -1)
+    l("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 Dt = /* @__PURE__ */ z(Ut, [["render", Rt]]), Pt = {}, Ht = {
+const Qt = /* @__PURE__ */ $(Jt, [["render", qt]]), Kt = {}, Zt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -725,17 +795,17 @@ const Dt = /* @__PURE__ */ z(Ut, [["render", Rt]]), Pt = {}, Ht = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-collapse"
 };
-function At(s, e) {
-  return i(), r("svg", Ht, [...e[0] || (e[0] = [
-    d("path", {
+function es(s, e) {
+  return i(), r("svg", Zt, [...e[0] || (e[0] = [
+    l("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    d("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-5.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
+    l("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 Ft = /* @__PURE__ */ z(Pt, [["render", At]]), Wt = {}, Xt = {
+const ts = /* @__PURE__ */ $(Kt, [["render", es]]), ss = {}, ns = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -743,19 +813,18 @@ const Ft = /* @__PURE__ */ z(Pt, [["render", At]]), Wt = {}, Xt = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-expand"
 };
-function Yt(s, e) {
-  return i(), r("svg", Xt, [...e[0] || (e[0] = [
-    d("path", {
+function os(s, e) {
+  return i(), r("svg", ns, [...e[0] || (e[0] = [
+    l("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    d("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-3.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
+    l("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 qt = /* @__PURE__ */ z(Wt, [["render", Yt]]), Jt = {}, Qt = {
+const as = /* @__PURE__ */ $(ss, [["render", os]]), is = {}, rs = {
   xmlns: "http://www.w3.org/2000/svg",
-  class: "baklava-icon",
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
@@ -763,16 +832,16 @@ const qt = /* @__PURE__ */ z(Wt, [["render", Yt]]), Jt = {}, Qt = {
   stroke: "currentColor",
   "stroke-width": "2",
   "stroke-linecap": "round",
-  "stroke-linejoin": "round"
+  "stroke-linejoin": "round",
+  class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema"
 };
-function Kt(s, e) {
-  return i(), r("svg", Qt, [...e[0] || (e[0] = [
-    se('<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)
+function ls(s, e) {
+  return i(), r("svg", rs, [...e[0] || (e[0] = [
+    Q('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 2h5v4h-5z"></path><path d="M15 10h5v4h-5z"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h5"></path><path d="M7.5 6v4"></path><path d="M7.5 14v4"></path>', 8)
   ])]);
 }
-const Zt = /* @__PURE__ */ z(Jt, [["render", Kt]]), es = {}, ts = {
+const ds = /* @__PURE__ */ $(is, [["render", ls]]), us = {}, cs = {
   xmlns: "http://www.w3.org/2000/svg",
-  class: "baklava-icon",
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
@@ -780,16 +849,16 @@ const Zt = /* @__PURE__ */ z(Jt, [["render", Kt]]), es = {}, ts = {
   stroke: "currentColor",
   "stroke-width": "2",
   "stroke-linecap": "round",
-  "stroke-linejoin": "round"
+  "stroke-linejoin": "round",
+  class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema-off"
 };
-function ss(s, e) {
-  return i(), r("svg", ts, [...e[0] || (e[0] = [
-    se('<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)
+function ps(s, e) {
+  return i(), r("svg", cs, [...e[0] || (e[0] = [
+    Q('<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 ns = /* @__PURE__ */ z(es, [["render", ss]]), os = {}, as = {
+const hs = /* @__PURE__ */ $(us, [["render", ps]]), vs = {}, ms = {
   xmlns: "http://www.w3.org/2000/svg",
-  class: "baklava-icon",
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
@@ -797,56 +866,38 @@ const ns = /* @__PURE__ */ z(es, [["render", ss]]), os = {}, as = {
   stroke: "currentColor",
   "stroke-width": "2",
   "stroke-linecap": "round",
-  "stroke-linejoin": "round"
+  "stroke-linejoin": "round",
+  class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-transition-bottom"
 };
-function is(s, e) {
-  return i(), r("svg", as, [...e[0] || (e[0] = [
-    se('<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)
+function fs(s, e) {
+  return i(), r("svg", ms, [...e[0] || (e[0] = [
+    Q('<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 rs = /* @__PURE__ */ z(os, [["render", is]]), ds = {}, ls = {
+const gs = /* @__PURE__ */ $(vs, [["render", fs]]), bs = {}, ys = {
   xmlns: "http://www.w3.org/2000/svg",
-  class: "baklava-icon",
-  width: "16",
-  height: "16",
+  width: "24",
+  height: "24",
   viewBox: "0 0 24 24",
-  "stroke-width": "2",
-  stroke: "currentColor",
   fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
   "stroke-linecap": "round",
-  "stroke-linejoin": "round"
+  "stroke-linejoin": "round",
+  class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-trash-off"
 };
-function us(s, e) {
-  return i(), r("svg", ls, [...e[0] || (e[0] = [
-    d("path", {
-      stroke: "none",
-      d: "M0 0h24v24H0z",
-      fill: "none"
-    }, null, -1),
-    d("circle", {
-      cx: "12",
-      cy: "12",
-      r: "1"
-    }, null, -1),
-    d("circle", {
-      cx: "12",
-      cy: "19",
-      r: "1"
-    }, null, -1),
-    d("circle", {
-      cx: "12",
-      cy: "5",
-      r: "1"
-    }, null, -1)
+function _s(s, e) {
+  return i(), r("svg", ys, [...e[0] || (e[0] = [
+    Q('<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 cs = /* @__PURE__ */ z(ds, [["render", us]]), ps = ["id", "data-node-type"], hs = {
+const ws = /* @__PURE__ */ $(bs, [["render", _s]]), ks = ["id", "data-node-type"], xs = {
   class: "__title-label",
   style: { "flex-grow": "1" }
-}, vs = { key: 0 }, ms = {
+}, Cs = { key: 0 }, Is = {
   class: "__menu",
   style: { display: "flex" }
-}, fs = { class: "__outputs" }, gs = { key: 0 }, bs = ["id", "title"], ys = { class: "__inputs" }, _s = { key: 0 }, ws = ["id", "title"], xs = /* @__PURE__ */ j({
+}, Ns = { class: "__outputs" }, Ms = { key: 0 }, $s = ["id", "title"], Os = { class: "__inputs" }, Ts = { key: 0 }, Es = ["id", "title"], Ss = /* @__PURE__ */ L({
   __name: "CodeGraphNode",
   props: {
     node: {},
@@ -855,223 +906,235 @@ const cs = /* @__PURE__ */ z(ds, [["render", us]]), ps = ["id", "data-node-type"
   },
   emits: ["select", "start-drag", "update"],
   setup(s, { emit: e }) {
-    const t = ye.ContextMenu, n = ye.NodeInterface, o = s, a = b(() => o.node), u = e, { viewModel: l } = F(), { graph: v, switchGraph: y } = ee(), _ = O(null), M = O(!1), B = O(""), w = O(null), m = O(!1);
-    let f = 0, h = 0;
-    const p = O(!1), x = b(() => {
+    const t = we.ContextMenu, n = we.NodeInterface, o = s, a = _(() => o.node), d = e, { viewModel: u } = F(), { graph: m, switchGraph: w } = ne(), k = T(null), O = T(!1), j = T(""), x = T(null), f = T(!1);
+    let g = 0, v = 0;
+    const h = T(!1), C = _(() => {
       const c = [
         { value: "edit", label: "Edit" },
         { value: "rename", label: "Rename" },
         { value: "delete", label: "Delete" }
       ];
-      return o.node.type.startsWith(J) && c.push({ value: "editSubgraph", label: "Edit Subgraph" }), c;
-    }), I = b(() => ({
+      return o.node.type.startsWith(K) && c.push({ value: "editSubgraph", label: "Edit Subgraph" }), c;
+    }), N = _(() => ({
       "--selected": o.selected,
       "--dragging": o.dragging,
       "--two-column": !!o.node.twoColumn,
       "--hidden": a.value.state?.hidden
-    })), Te = b(() => ({
-      "--reverse-y": o.node.reverseY ?? l.value.settings.nodes.reverseY
-    })), Ee = b(() => ({
+    })), ze = _(() => ({
+      "--reverse-y": o.node.reverseY ?? u.value.settings.nodes.reverseY
+    })), Ve = _(() => ({
       top: `${o.node.position?.y ?? 0}px`,
       left: `${o.node.position?.x ?? 0}px`,
-      "--width": `${o.node.width ?? l.value.settings.nodes.defaultWidth}px`
-    })), Se = b(() => Object.values(o.node.inputs).filter((c) => !c.hidden)), ze = b(() => Object.values(o.node.outputs).filter((c) => !c.hidden)), pe = () => {
-      u("select");
-    }, Be = (c) => {
-      o.selected || pe(), u("start-drag", c);
-    }, he = () => {
-      p.value = !0;
-    }, Le = () => {
-      const c = l.value.displayedGraph.sidebar;
-      c.nodeId = "", c.visible = !1;
+      "--width": `${o.node.width ?? u.value.settings.nodes.defaultWidth}px`
+    })), Be = _(() => Object.values(o.node.inputs).filter((c) => !c.hidden)), je = _(() => Object.values(o.node.outputs).filter((c) => !c.hidden)), he = () => {
+      d("select");
+    }, Le = (c) => {
+      o.selected || he(), d("start-drag", c);
     }, ve = () => {
-      const c = l.value.displayedGraph.sidebar;
+      h.value = !0;
+    }, Ue = () => {
+      const c = u.value.displayedGraph.sidebar;
+      c.nodeId = "", c.visible = !1;
+    }, me = () => {
+      const c = u.value.displayedGraph.sidebar;
       c.nodeId = o.node.id, c.visible = !0;
-    }, Ve = () => {
-      const c = l.value.displayedGraph.sidebar;
+    }, Ge = () => {
+      const c = u.value.displayedGraph.sidebar;
       c.nodeId = o.node.id;
-    }, je = async (c) => {
+    }, Re = async (c) => {
       switch (c) {
         case "edit":
-          ve();
+          me();
           break;
         case "delete":
-          v.value.removeNode(o.node);
+          m.value.removeNode(o.node);
           break;
         case "rename":
-          B.value = o.node.title, M.value = !0, await lt(), w.value?.focus();
+          j.value = o.node.title, O.value = !0, await ct(), x.value?.focus();
           break;
         case "editSubgraph":
-          y(o.node.template);
+          w(o.node.template);
           break;
       }
-    }, me = () => {
-      o.node.title = B.value, M.value = !1;
     }, fe = () => {
-      _.value && l.value.hooks.renderNode.execute({ node: o.node, el: _.value });
-    }, Ue = (c) => {
-      m.value = !0, f = o.node.width, h = c.clientX, c.preventDefault();
-    }, ge = (c) => {
-      if (!m.value) return;
-      const k = c.clientX - h, g = f + k / v.value.scaling, Ge = l.value.settings.nodes.minWidth, Re = l.value.settings.nodes.maxWidth;
-      o.node.width = Math.max(Ge, Math.min(Re, g));
-    }, be = () => {
-      m.value = !1;
+      o.node.title = j.value, O.value = !1;
+    }, ge = () => {
+      k.value && u.value.hooks.renderNode.execute({ node: o.node, el: k.value });
+    }, De = (c) => {
+      f.value = !0, g = o.node.width, v = c.clientX, c.preventDefault();
+    }, be = (c) => {
+      a.value.state && (a.value.state.integrated = c, d("update"));
+    }, ye = (c) => {
+      if (!f.value) return;
+      const b = c.clientX - v, p = g + b / m.value.scaling, Pe = u.value.settings.nodes.minWidth, He = u.value.settings.nodes.maxWidth;
+      o.node.width = Math.max(Pe, Math.min(He, p));
+    }, _e = () => {
+      f.value = !1;
     };
-    return te(() => {
-      fe(), window.addEventListener("mousemove", ge), window.addEventListener("mouseup", be);
-    }), Ne(fe), rt(() => {
-      window.removeEventListener("mousemove", ge), window.removeEventListener("mouseup", be);
-    }), (c, k) => (i(), r("div", {
+    return oe(() => {
+      ge(), window.addEventListener("mousemove", ye), window.addEventListener("mouseup", _e);
+    }), Ne(ge), dt(() => {
+      window.removeEventListener("mousemove", ye), window.removeEventListener("mouseup", _e);
+    }), (c, b) => (i(), r("div", {
       id: a.value.id,
       ref_key: "el",
-      ref: _,
-      class: U([I.value, "baklava-node"]),
+      ref: k,
+      class: U([N.value, "baklava-node"]),
       "data-node-type": a.value.type,
-      style: ne(Ee.value),
-      onPointerdown: pe
+      style: ae(Ve.value),
+      onPointerdown: he
     }, [
-      C(l).settings.nodes.resizable ? (i(), r("div", {
+      y(u).settings.nodes.resizable ? (i(), r("div", {
         key: 0,
         class: "__resize-handle",
-        onMousedown: Ue
-      }, null, 32)) : N("", !0),
-      d("div", {
+        onMousedown: De
+      }, null, 32)) : I("", !0),
+      l("div", {
         class: "__title",
-        onPointerdown: P(Be, ["self", "stop"]),
-        onContextmenu: P(he, ["prevent"])
+        onPointerdown: P(Le, ["self", "stop"]),
+        onContextmenu: P(ve, ["prevent"])
       }, [
-        a.value.inputs._node ? (i(), V(we, {
+        a.value.inputs._node ? (i(), S(ke, {
           key: 0,
           node: a.value,
           intf: a.value.inputs._node,
           class: "--input",
           "data-interface-type": "node",
           style: { "flex-grow": "0" }
-        }, null, 8, ["node", "intf"])) : N("", !0),
-        M.value ? oe((i(), r("input", {
+        }, null, 8, ["node", "intf"])) : I("", !0),
+        O.value ? ie((i(), r("input", {
           key: 2,
           ref_key: "renameInputEl",
-          ref: w,
-          "onUpdate:modelValue": k[1] || (k[1] = (g) => B.value = g),
+          ref: x,
+          "onUpdate:modelValue": b[3] || (b[3] = (p) => j.value = p),
           class: "baklava-input",
           placeholder: "Node Name",
           style: { "flex-grow": "1" },
           type: "text",
-          onBlur: me,
-          onKeydown: K(me, ["enter"])
+          onBlur: fe,
+          onKeydown: ee(fe, ["enter"])
         }, null, 544)), [
-          [ae, B.value]
-        ]) : (i(), r($, { key: 1 }, [
-          d("div", hs, [
-            a.value.idx > -1 ? (i(), r("span", vs, E(a.value.idx + 1) + " - ", 1)) : N("", !0),
-            dt(E(a.value.title) + " (" + E(a.value.shortId) + ") ", 1)
+          [re, j.value]
+        ]) : (i(), r(z, { key: 1 }, [
+          l("div", xs, [
+            a.value.idx > -1 ? (i(), r("span", Cs, B(a.value.idx + 1) + " - ", 1)) : I("", !0),
+            ut(B(a.value.title) + " (" + B(a.value.shortId) + ") ", 1)
           ]),
-          d("div", ms, [
-            a.value.subgraph ? N("", !0) : (i(), r($, { key: 0 }, [
-              !C(l).displayedGraph.sidebar.visible && C(l).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), V(C(qt), {
+          l("div", Is, [
+            a.value.subgraph ? I("", !0) : (i(), r(z, { key: 0 }, [
+              a.value.state.integrated ? (i(), S(y(Bt), {
                 key: 0,
                 class: "--clickable mx-1",
-                onClick: ve
-              })) : C(l).displayedGraph.sidebar.visible && C(l).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), V(C(Dt), {
+                onClick: b[0] || (b[0] = (p) => be(!1))
+              })) : (i(), S(y(gs), {
                 key: 1,
                 class: "--clickable mx-1",
-                onClick: Ve
-              })) : (i(), V(C(Ft), {
+                onClick: b[1] || (b[1] = (p) => be(!0))
+              })),
+              !y(u).displayedGraph.sidebar.visible && y(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), S(y(as), {
                 key: 2,
                 class: "--clickable mx-1",
-                onClick: Le
+                onClick: me
+              })) : y(u).displayedGraph.sidebar.visible && y(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), S(y(Qt), {
+                key: 3,
+                class: "--clickable mx-1",
+                onClick: Ge
+              })) : (i(), S(y(ts), {
+                key: 4,
+                class: "--clickable mx-1",
+                onClick: Ue
               }))
             ], 64)),
-            T(C(cs), {
+            V(y(Gt), {
               class: "--clickable mx-1",
-              onClick: he
+              onClick: ve
             }),
-            T(C(t), {
-              modelValue: p.value,
-              "onUpdate:modelValue": k[0] || (k[0] = (g) => p.value = g),
+            V(y(t), {
+              modelValue: h.value,
+              "onUpdate:modelValue": b[2] || (b[2] = (p) => h.value = p),
               x: 0,
               y: 0,
-              items: x.value,
-              onClick: je
+              items: C.value,
+              onClick: Re
             }, null, 8, ["modelValue", "items"])
           ])
         ], 64)),
-        a.value.outputs._node ? (i(), V(we, {
+        a.value.outputs._node ? (i(), S(ke, {
           key: 3,
           node: a.value,
           intf: a.value.outputs._node,
           class: "--output",
           "data-interface-type": "node"
-        }, null, 8, ["node", "intf"])) : N("", !0)
+        }, null, 8, ["node", "intf"])) : I("", !0)
       ], 32),
-      d("div", {
-        class: U(["__content", Te.value]),
-        onKeydown: k[2] || (k[2] = K(P(() => {
+      l("div", {
+        class: U(["__content", ze.value]),
+        onKeydown: b[4] || (b[4] = ee(P(() => {
         }, ["stop"]), ["delete"])),
-        onContextmenu: k[3] || (k[3] = P(() => {
+        onContextmenu: b[5] || (b[5] = P(() => {
         }, ["prevent"]))
       }, [
-        d("div", fs, [
-          (i(!0), r($, null, H(ze.value, (g) => (i(), r($, {
-            key: g.id
+        l("div", Ns, [
+          (i(!0), r(z, null, H(je.value, (p) => (i(), r(z, {
+            key: p.id
           }, [
-            a.value.state?.hidden ? (i(), r("div", gs, [
-              g.port ? (i(), r("div", {
+            a.value.state?.hidden ? (i(), r("div", Ms, [
+              p.port ? (i(), r("div", {
                 key: 0,
-                id: g.id,
-                title: g.name,
+                id: p.id,
+                title: p.name,
                 class: "baklava-node-interface --output --connected"
-              }, [...k[4] || (k[4] = [
-                d("div", { class: "__port" }, null, -1)
-              ])], 8, bs)) : N("", !0)
-            ])) : Q(c.$slots, "nodeInterface", {
+              }, [...b[6] || (b[6] = [
+                l("div", { class: "__port" }, null, -1)
+              ])], 8, $s)) : I("", !0)
+            ])) : Z(c.$slots, "nodeInterface", {
               key: 1,
               type: "output",
               node: a.value,
-              intf: g
+              intf: p
             }, () => [
-              T(C(n), {
+              V(y(n), {
                 node: a.value,
-                intf: g
-              }, null, 8, ["node", "intf"])
+                intf: p,
+                title: p.type
+              }, null, 8, ["node", "intf", "title"])
             ])
           ], 64))), 128))
         ]),
-        d("div", ys, [
-          (i(!0), r($, null, H(Se.value, (g) => (i(), r($, {
-            key: g.id
+        l("div", Os, [
+          (i(!0), r(z, null, H(Be.value, (p) => (i(), r(z, {
+            key: p.id
           }, [
-            a.value.state?.hidden ? (i(), r("div", _s, [
-              g.port ? (i(), r("div", {
+            a.value.state?.hidden ? (i(), r("div", Ts, [
+              p.port ? (i(), r("div", {
                 key: 0,
-                id: g.id,
-                title: g.name,
+                id: p.id,
+                title: p.name,
                 class: "baklava-node-interface --input --connected"
-              }, [...k[5] || (k[5] = [
-                d("div", { class: "__port" }, null, -1)
-              ])], 8, ws)) : N("", !0)
-            ])) : Q(c.$slots, "nodeInterface", {
+              }, [...b[7] || (b[7] = [
+                l("div", { class: "__port" }, null, -1)
+              ])], 8, Es)) : I("", !0)
+            ])) : Z(c.$slots, "nodeInterface", {
               key: 1,
               node: a.value,
-              intf: g,
+              intf: p,
               type: "input"
             }, () => [
-              T(C(n), {
+              V(y(n), {
                 node: a.value,
-                intf: g,
-                title: g.name
+                intf: p,
+                title: p.type
               }, null, 8, ["node", "intf", "title"])
             ])
           ], 64))), 128))
         ])
       ], 34)
-    ], 46, ps));
+    ], 46, ks));
   }
-}), Cs = ["title"], ks = {
+}), zs = ["title"], Vs = {
   key: 0,
   class: "__label"
-}, Ns = /* @__PURE__ */ j({
+}, Bs = /* @__PURE__ */ L({
   __name: "Checkbox",
   props: {
     disabled: { type: Boolean },
@@ -1087,114 +1150,114 @@ const cs = /* @__PURE__ */ z(ds, [["render", us]]), ps = ["id", "data-node-type"
       title: s.name,
       onClick: o[0] || (o[0] = (a) => t("update:modelValue", !s.modelValue))
     }, [
-      o[1] || (o[1] = d("div", { class: "__checkmark-container" }, [
-        d("svg", {
+      o[1] || (o[1] = l("div", { class: "__checkmark-container" }, [
+        l("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           width: "18",
           height: "18",
           viewBox: "0 0 18 18"
         }, [
-          d("path", {
+          l("path", {
             class: "__checkmark",
             d: "M 6 5 L 6 10 L 16 10",
             transform: "rotate(-45 10 10)"
           })
         ])
       ], -1)),
-      s.name ? (i(), r("div", ks, E(s.name), 1)) : N("", !0)
-    ], 10, Cs));
+      s.name ? (i(), r("div", Vs, B(s.name), 1)) : I("", !0)
+    ], 10, zs));
   }
-}), Is = { class: "__header" }, Ms = { class: "__node-name" }, Os = { style: { display: "flex" } }, $s = {
+}), js = { class: "__header" }, Ls = { class: "__node-name" }, Us = { style: { display: "flex" } }, Gs = {
   key: 1,
   class: "__interface"
-}, Ts = /* @__PURE__ */ j({
+}, Rs = /* @__PURE__ */ L({
   __name: "CodeGraphSidebar",
   setup(s) {
-    const { viewModel: e } = F(), { graph: t } = ee(), n = O(null), o = Ie(e.value.settings.sidebar, "width"), a = b(() => e.value.settings.sidebar.resizable);
-    let u = 0, l = 0;
-    const v = b(() => {
-      const h = t.value.sidebar.nodeId;
-      return t.value.nodes.find((p) => p.id === h);
-    }), y = b(() => v.value), _ = b(() => ({
+    const { viewModel: e } = F(), { graph: t } = ne(), n = T(null), o = Me(e.value.settings.sidebar, "width"), a = _(() => e.value.settings.sidebar.resizable);
+    let d = 0, u = 0;
+    const m = _(() => {
+      const v = t.value.sidebar.nodeId;
+      return t.value.nodes.find((h) => h.id === v);
+    }), w = _(() => m.value), k = _(() => ({
       width: `${o.value}px`
-    })), M = b(() => y.value ? [...Object.values(y.value.inputs), ...Object.values(y.value.outputs)].filter((p) => p.displayInSidebar && p.component) : []), B = () => {
+    })), O = _(() => w.value ? [...Object.values(w.value.inputs), ...Object.values(w.value.outputs)].filter((h) => h.displayInSidebar && h.component) : []), j = () => {
       t.value.sidebar.visible = !1;
-    }, w = () => {
-      v.value?.events.update.emit(null);
-    }, m = (h) => {
-      u = o.value, l = h.clientX, window.addEventListener("mousemove", f), window.addEventListener(
+    }, x = () => {
+      m.value?.events.update.emit(null);
+    }, f = (v) => {
+      d = o.value, u = v.clientX, window.addEventListener("mousemove", g), window.addEventListener(
         "mouseup",
         () => {
-          window.removeEventListener("mousemove", f);
+          window.removeEventListener("mousemove", g);
         },
         { once: !0 }
       );
-    }, f = (h) => {
-      const p = n.value?.parentElement?.getBoundingClientRect().width ?? 500, x = h.clientX - l;
-      let I = u - x;
-      I < 300 ? I = 300 : I > 0.9 * p && (I = 0.9 * p), o.value = I;
+    }, g = (v) => {
+      const h = n.value?.parentElement?.getBoundingClientRect().width ?? 500, C = v.clientX - u;
+      let N = d - C;
+      N < 300 ? N = 300 : N > 0.9 * h && (N = 0.9 * h), o.value = N;
     };
-    return (h, p) => (i(), r("div", {
+    return (v, h) => (i(), r("div", {
       ref_key: "el",
       ref: n,
-      class: U(["baklava-sidebar", { "--open": C(t).sidebar.visible }]),
-      style: ne(_.value)
+      class: U(["baklava-sidebar", { "--open": y(t).sidebar.visible }]),
+      style: ae(k.value)
     }, [
       a.value ? (i(), r("div", {
         key: 0,
         class: "__resizer",
-        onMousedown: m
-      }, null, 32)) : N("", !0),
-      d("div", Is, [
-        d("button", {
+        onMousedown: f
+      }, null, 32)) : I("", !0),
+      l("div", js, [
+        l("button", {
           tabindex: "-1",
           class: "__close",
-          onClick: B
+          onClick: j
         }, "×"),
-        d("div", Ms, [
-          d("b", null, E(v.value ? v.value.title : ""), 1)
+        l("div", Ls, [
+          l("b", null, B(m.value ? m.value.title : ""), 1)
         ])
       ]),
-      (i(!0), r($, null, H(M.value, (x) => (i(), r("div", {
-        key: x.id,
+      (i(!0), r(z, null, H(O.value, (C) => (i(), r("div", {
+        key: C.id,
         class: "__interface"
       }, [
-        d("div", Os, [
-          T(Ns, {
-            modelValue: x.hidden,
+        l("div", Us, [
+          V(Bs, {
+            modelValue: C.hidden,
             "onUpdate:modelValue": [
-              (I) => x.hidden = I,
-              p[0] || (p[0] = () => v.value?.events.update.emit(null))
+              (N) => C.hidden = N,
+              h[0] || (h[0] = () => m.value?.events.update.emit(null))
             ],
-            disabled: !x.optional,
+            disabled: !C.optional,
             inversed: "",
             style: { "padding-right": "8px" }
           }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
-          (i(), V(ut(x.component), {
-            modelValue: x.value,
-            "onUpdate:modelValue": (I) => x.value = I,
-            node: v.value,
-            intf: x,
+          (i(), S(pt(C.component), {
+            modelValue: C.value,
+            "onUpdate:modelValue": (N) => C.value = N,
+            node: m.value,
+            intf: C,
             style: { width: "100%" }
           }, null, 8, ["modelValue", "onUpdate:modelValue", "node", "intf"]))
         ])
       ]))), 128)),
-      y.value && y.value.state ? (i(), r("div", $s, [
-        p[2] || (p[2] = d("label", null, "Variable name", -1)),
-        oe(d("input", {
-          "onUpdate:modelValue": p[1] || (p[1] = (x) => y.value.state.variableName = x),
+      w.value && w.value.state ? (i(), r("div", Gs, [
+        h[2] || (h[2] = l("label", null, "Variable name", -1)),
+        ie(l("input", {
+          "onUpdate:modelValue": h[1] || (h[1] = (C) => w.value.state.variableName = C),
           type: "text",
           class: "baklava-input",
           title: "Variable name",
-          onBlur: w,
-          onKeydown: K(w, ["enter"])
+          onBlur: x,
+          onKeydown: ee(x, ["enter"])
         }, null, 544), [
-          [ae, y.value.state.variableName]
+          [re, w.value.state.variableName]
         ])
-      ])) : N("", !0)
+      ])) : I("", !0)
     ], 6));
   }
-}), Es = j({
+}), Ds = L({
   props: {
     type: {
       type: String,
@@ -1206,153 +1269,153 @@ const cs = /* @__PURE__ */ z(ds, [["render", us]]), ps = ["id", "data-node-type"
     }
   },
   setup(s) {
-    const { viewModel: e } = F(), { switchGraph: t } = ee(), n = O(!1), o = b(() => s.type.startsWith(J));
+    const { viewModel: e } = F(), { switchGraph: t } = ne(), n = T(!1), o = _(() => s.type.startsWith(K));
     return { showContextMenu: n, hasContextMenu: o, contextMenuItems: [
       { label: "Edit Subgraph", value: "editSubgraph" },
       { label: "Delete Subgraph", value: "deleteSubgraph" }
     ], openContextMenu: () => {
       n.value = !0;
-    }, onContextMenuClick: (v) => {
-      const y = s.type.substring(J.length), _ = e.value.editor.graphTemplates.find((M) => M.id === y);
-      if (_)
-        switch (v) {
+    }, onContextMenuClick: (m) => {
+      const w = s.type.substring(K.length), k = e.value.editor.graphTemplates.find((O) => O.id === w);
+      if (k)
+        switch (m) {
           case "editSubgraph":
-            t(_);
+            t(k);
             break;
           case "deleteSubgraph":
-            e.value.editor.removeGraphTemplate(_);
+            e.value.editor.removeGraphTemplate(k);
             break;
         }
     } };
   }
-}), Ss = ["data-node-type"], zs = { class: "__title" }, Bs = { class: "__title-label" };
-function Ls(s, e, t, n, o, a) {
+}), Ps = ["data-node-type"], Hs = { class: "__title" }, As = { class: "__title-label" };
+function Fs(s, e, t, n, o, a) {
   return i(), r("div", {
     class: "baklava-node --palette",
     "data-node-type": s.type
   }, [
-    d("div", zs, [
-      d("div", Bs, E(s.title), 1)
+    l("div", Hs, [
+      l("div", As, B(s.title), 1)
     ])
-  ], 8, Ss);
+  ], 8, Ps);
 }
-const xe = /* @__PURE__ */ z(Es, [["render", Ls]]), Vs = {
+const xe = /* @__PURE__ */ $(Ds, [["render", Fs]]), Ws = {
   class: "baklava-node --palette",
   style: { "margin-top": "-20px", "margin-bottom": "20px" }
-}, js = {
+}, Xs = {
   key: 0,
   style: { display: "flex", "justify-content": "space-between" }
-}, Us = ["onClick"], Gs = {
+}, Js = ["onClick"], Ys = {
   key: 0,
   style: { margin: "auto 0", "font-size": "12px" }
-}, Rs = /* @__PURE__ */ j({
+}, qs = /* @__PURE__ */ L({
   __name: "CodeNodePalette",
   setup(s) {
-    const { viewModel: e } = F(), { x: t, y: n } = yt(), { transform: o } = et(), a = tt(e), u = ct("editorEl"), l = O(""), v = O(null), y = () => l.value ? a.value.filter(
-      (w) => w.name.toLowerCase().includes(l.value.toLowerCase()) || Object.values(w.nodeTypes).some(
-        (m) => m.title.toLowerCase().includes(l.value.toLowerCase())
+    const { viewModel: e } = F(), { x: t, y: n } = wt(), { transform: o } = st(), a = nt(e), d = ht("editorEl"), u = T(""), m = T(null), w = () => u.value ? a.value.filter(
+      (x) => x.name.toLowerCase().includes(u.value.toLowerCase()) || Object.values(x.nodeTypes).some(
+        (f) => f.title.toLowerCase().includes(u.value.toLowerCase())
       )
-    ) : a.value, _ = (w) => l.value ? Object.values(w).filter(
-      (m) => m.category.toLowerCase().includes(l.value.toLowerCase()) || m.title.toLowerCase().includes(l.value.toLowerCase())
-    ) : Object.values(w), M = b(() => {
-      if (!v.value || !u?.value) return {};
-      const { left: w, top: m } = u.value.getBoundingClientRect();
+    ) : a.value, k = (x) => u.value ? Object.values(x).filter(
+      (f) => f.category.toLowerCase().includes(u.value.toLowerCase()) || f.title.toLowerCase().includes(u.value.toLowerCase())
+    ) : Object.values(x), O = _(() => {
+      if (!m.value || !d?.value) return {};
+      const { left: x, top: f } = d.value.getBoundingClientRect();
       return {
-        top: `${n.value - m}px`,
-        left: `${t.value - w}px`
+        top: `${n.value - f}px`,
+        left: `${t.value - x}px`
       };
-    }), B = (w, m) => {
-      v.value = {
-        type: w,
-        nodeInformation: m
+    }), j = (x, f) => {
+      m.value = {
+        type: x,
+        nodeInformation: f
       };
-      const f = () => {
-        const h = G(new m.type());
-        e.value.displayedGraph.addNode(h);
-        const p = u.value.getBoundingClientRect(), [x, I] = o(t.value - p.left, n.value - p.top);
-        h.position.x = x, h.position.y = I, v.value = null, document.removeEventListener("pointerup", f);
+      const g = () => {
+        const v = R(new f.type());
+        e.value.displayedGraph.addNode(v);
+        const h = d.value.getBoundingClientRect(), [C, N] = o(t.value - h.left, n.value - h.top);
+        v.position.x = C, v.position.y = N, m.value = null, document.removeEventListener("pointerup", g);
       };
-      document.addEventListener("pointerup", f);
+      document.addEventListener("pointerup", g);
     };
-    return (w, m) => (i(), r($, null, [
-      d("div", {
-        class: U(["baklava-node-palette", { "--open": C(e).settings.palette.enabled }]),
-        onContextmenu: m[1] || (m[1] = P(() => {
+    return (x, f) => (i(), r(z, null, [
+      l("div", {
+        class: U(["baklava-node-palette", { "--open": y(e).settings.palette.enabled }]),
+        onContextmenu: f[1] || (f[1] = P(() => {
         }, ["stop", "prevent"]))
       }, [
-        d("div", Vs, [
-          oe(d("input", {
-            "onUpdate:modelValue": m[0] || (m[0] = (f) => l.value = f),
+        l("div", Ws, [
+          ie(l("input", {
+            "onUpdate:modelValue": f[0] || (f[0] = (g) => u.value = g),
             type: "text",
             class: "baklava-input",
             title: "Filter nodes",
-            onKeyup: y
+            onKeyup: w
           }, null, 544), [
-            [ae, l.value]
+            [re, u.value]
           ])
         ]),
-        (i(!0), r($, null, H(y(), (f) => (i(), r("section", {
-          key: f.name
+        (i(!0), r(z, null, H(w(), (g) => (i(), r("section", {
+          key: g.name
         }, [
-          f.name !== "default" ? (i(), r("h3", js, [
-            d("div", {
-              onClick: (h) => l.value = f.name,
+          g.name !== "default" ? (i(), r("h3", Xs, [
+            l("div", {
+              onClick: (v) => u.value = g.name,
               style: { cursor: "pointer" }
-            }, E(f.name), 9, Us),
-            _(f.nodeTypes).length < Object.values(f.nodeTypes).length ? (i(), r("div", Gs, " ( " + E(_(f.nodeTypes).length) + " / " + E(Object.values(f.nodeTypes).length) + " ) ", 1)) : N("", !0)
-          ])) : N("", !0),
-          (i(!0), r($, null, H(_(f.nodeTypes), (h) => (i(), V(xe, {
-            key: h.type,
-            type: h.type,
-            title: h.title,
-            onPointerdown: (p) => B(h.type, h)
+            }, B(g.name), 9, Js),
+            k(g.nodeTypes).length < Object.values(g.nodeTypes).length ? (i(), r("div", Ys, " ( " + B(k(g.nodeTypes).length) + " / " + B(Object.values(g.nodeTypes).length) + " ) ", 1)) : I("", !0)
+          ])) : I("", !0),
+          (i(!0), r(z, null, H(k(g.nodeTypes), (v) => (i(), S(xe, {
+            key: v.type,
+            type: v.type,
+            title: v.title,
+            onPointerdown: (h) => j(v.type, v)
           }, null, 8, ["type", "title", "onPointerdown"]))), 128))
         ]))), 128))
       ], 34),
-      T(pt, { name: "fade" }, {
-        default: X(() => [
-          v.value ? (i(), r("div", {
+      V(vt, { name: "fade" }, {
+        default: J(() => [
+          m.value ? (i(), r("div", {
             key: 0,
             class: "baklava-dragged-node",
-            style: ne(M.value)
+            style: ae(O.value)
           }, [
-            T(xe, {
-              type: v.value.type,
-              title: v.value.nodeInformation.title
+            V(xe, {
+              type: m.value.type,
+              title: m.value.nodeInformation.title
             }, null, 8, ["type", "title"])
-          ], 4)) : N("", !0)
+          ], 4)) : I("", !0)
         ]),
         _: 1
       })
     ], 64));
   }
-}), un = /* @__PURE__ */ j({
+}), wn = /* @__PURE__ */ L({
   __name: "CodeGraphEditor",
   props: {
     viewModel: {}
   },
   setup(s) {
-    const t = Ie(s, "viewModel"), n = (o) => o.events.update.emit(null);
-    return te(() => {
+    const t = Me(s, "viewModel"), n = (o) => o.events.update.emit(null);
+    return oe(() => {
       t.value.subscribe(), t.value.engine.start();
-    }), ht(() => {
+    }), mt(() => {
       t.value.unsubscribe(), t.value.engine.stop();
-    }), (o, a) => (i(), V(C(st), { "view-model": t.value }, {
-      palette: X(() => [
-        T(Rs)
+    }), (o, a) => (i(), S(y(ot), { "view-model": t.value }, {
+      palette: J(() => [
+        V(qs)
       ]),
-      node: X((u) => [
-        T(xs, ft(u, {
-          onUpdate: (l) => n(u.node)
+      node: J((d) => [
+        V(Ss, bt(d, {
+          onUpdate: (u) => n(d.node)
         }), null, 16, ["onUpdate"])
       ]),
-      sidebar: X((u) => [
-        T(Ts, vt(mt(u)), null, 16)
+      sidebar: J((d) => [
+        V(Rs, ft(gt(d)), null, 16)
       ]),
       _: 1
     }, 8, ["view-model"]));
   }
-}), Ds = (s) => {
+}), Qs = (s) => {
   const e = "TOGGLE_PALETTE";
   s.commandHandler.registerCommand(e, {
     execute: () => s.settings.palette.enabled = !s.settings.palette.enabled,
@@ -1372,23 +1435,23 @@ const xe = /* @__PURE__ */ z(Es, [["render", Ls]]), Vs = {
       command: e,
       title: "Toggle palette",
       // Tooltip text
-      icon: b(() => s.settings.palette.enabled ? zt : jt)
+      icon: _(() => s.settings.palette.enabled ? Ht : Xt)
     },
-    ...nt,
+    ...at,
     {
       command: t,
       title: "Clear all",
       // Tooltip text
-      icon: rs
+      icon: ws
     },
     {
       command: n,
       title: "Toggle minimap",
       // Tooltip text
-      icon: b(() => s.settings.enableMinimap ? ns : Zt)
+      icon: _(() => s.settings.enableMinimap ? hs : ds)
     }
   ];
-}, W = {
+}, X = {
   enableMinimap: !1,
   toolbar: {
     enabled: !0
@@ -1403,26 +1466,26 @@ const xe = /* @__PURE__ */ z(Es, [["render", Ls]]), Vs = {
   },
   displayValueOnHover: !1
 };
-function cn(s) {
-  const e = ot(s?.existingEditor);
-  e.code = s?.code ? new s.code(e) : new Mt(e), Ds(e);
+function kn(s) {
+  const e = it(s?.existingEditor);
+  e.code = s?.code ? new s.code(e) : new Ot(e), Qs(e);
   const t = {};
-  return Object.keys(W).forEach((n) => {
-    t[n] = typeof W[n] == "object" ? { ...e.settings[n], ...W[n] } : W[n];
-  }), e.settings = G({ ...e.settings, ...t }), e.settings.nodes.defaultWidth = 350, e.state = G({
+  return Object.keys(X).forEach((n) => {
+    t[n] = typeof X[n] == "object" ? { ...e.settings[n], ...X[n] } : X[n];
+  }), e.settings = R({ ...e.settings, ...t }), e.settings.nodes.defaultWidth = 350, e.state = R({
     modules: {},
     token: null
-  }), e.engine = new at(e.editor), e.subscribe = () => {
+  }), e.engine = new rt(e.editor), e.subscribe = () => {
     e.state.token && e.unsubscribe();
     const n = Symbol();
     e.displayedGraph.events.addNode.subscribe(n, (o) => o.code = e.code), e.engine.events.beforeRun.subscribe(n, () => {
-      e.engine.pause(), e.code && (e.code.onCodeUpdate(), e.code.sortNodes()), e.engine.resume();
+      e.engine.pause(), e.code && (e.code.onCodeUpdate(), e.code.sortNodes(), e.code.updateCodeTemplates(), e.code.resetInputInterfaceScript()), e.engine.resume();
     }), e.engine.events.beforeNodeCalculation.subscribe(n, (o) => {
       e.engine.pause();
       const a = o.node;
-      a.isCodeNode && (a.updateOutputVariableName(), a.updateCodeNodeInputInterfaces()), e.engine.resume();
+      a.isCodeNode && (a.updateOutputVariableName(), a.updateConnectedInputInterfaces()), e.engine.resume();
     }), e.engine.events.afterRun.subscribe(n, (o) => {
-      e.engine.pause(), it(o, e.editor), e.code && (e.code.renderNodeCodes(), e.code.renderCode()), e.engine.resume();
+      e.engine.pause(), lt(o, e.editor), e.code && (e.code.renderNodeCodes(), e.code.renderCode()), e.engine.resume();
     }), e.state.token = n;
   }, e.unsubscribe = () => {
     if (!e.state.token) return;
@@ -1431,46 +1494,44 @@ function cn(s) {
   }, e;
 }
 export {
-  _t as AbstractCodeNode,
-  Qs as CheckboxInterface,
-  vn as CheckboxInterfaceComponent,
-  Mt as Code,
-  un as CodeGraphEditor,
-  Me as CodeNode,
-  re as CodeNodeInputInterface,
-  R as CodeNodeInterface,
-  Nt as CodeNodeOutputInterface,
-  W as DEFAULT_SETTINGS,
-  It as DynamicCodeNode,
-  Ks as IntegerInterface,
-  mn as IntegerInterfaceComponent,
-  Zs as NumberInterface,
-  fn as NumberInterfaceComponent,
-  en as SelectInterface,
-  gn as SelectInterfaceComponent,
-  tn as SliderInterface,
-  bn as SliderInterfaceComponent,
-  sn as TextInputInterface,
-  yn as TextInputInterfaceComponent,
-  nn as TextareaInputInterface,
-  _n as TextareaInputInterfaceComponent,
-  Js as addDefaultInterfaceTypes,
-  Ds as addToolbarCommands,
-  $e as booleanType,
-  on as defineCodeNode,
-  an as defineDynamicCodeNode,
-  Ct as dictType,
-  Ys as formatInputs,
-  Z as getCodeNodes,
-  rn as getPositionAtColumn,
-  dn as getPositionBeforeNode,
-  kt as listType,
+  kt as AbstractCodeNode,
+  rn as CheckboxInterface,
+  In as CheckboxInterfaceComponent,
+  Ot as Code,
+  wn as CodeGraphEditor,
+  $e as CodeNode,
+  W as CodeNodeInputInterface,
+  D as CodeNodeInterface,
+  Mt as CodeNodeOutputInterface,
+  X as DEFAULT_SETTINGS,
+  $t as DynamicCodeNode,
+  ln as IntegerInterface,
+  dn as ListInputInterface,
+  un as NumberInterface,
+  Nn as NumberInterfaceComponent,
+  cn as SelectInterface,
+  pn as SliderInterface,
+  hn as TextInputInterface,
+  vn as TextareaInputInterface,
+  mn as TupleInputInterface,
+  an as addDefaultInterfaceTypes,
+  Qs as addToolbarCommands,
+  Te as booleanType,
+  fn as defineCodeNode,
+  gn as defineDynamicCodeNode,
+  Nt as dictType,
+  xt as formatInputs,
+  te as getCodeNodes,
+  bn as getPositionAtColumn,
+  yn as getPositionBeforeNode,
+  Ee as listType,
   Oe as loadNodeState,
   A as nodeType,
   de as numberType,
-  wt as saveNodeState,
-  qs as setOptional,
-  le as stringType,
-  ln as transferCodeScript,
-  cn as useCodeGraph
+  Ct as saveNodeState,
+  on as setOptional,
+  ue as stringType,
+  _n as transferCodeScript,
+  Se as tupleType,
+  kn as useCodeGraph
 };