@babsey/code-graph 0.1.7 → 0.2.1

package/dist/code-graph.js

@@ -1,11 +1,11 @@
-import ee from "mustache";
+import Y from "mustache";
 import Ye from "toposort";
-import { AbstractNode as qe, sortTopologically as Me, NodeInterface as Je, displayInSidebar as $e, NodeInterfaceType as G, BaklavaInterfaceTypes as Qe, CheckboxInterfaceComponent as Ke, setType as V, IntegerInterfaceComponent as Ze, TextInputInterfaceComponent as Oe, NumberInterfaceComponent as et, SelectInterfaceComponent as tt, SliderInterfaceComponent as st, TextareaInputInterfaceComponent as nt, allowMultipleConnections as K, IntegerInterface as ot, TextInputInterface as at, Commands as Z, useViewModel as Y, useTemporaryConnection as it, Components as ke, useGraph as ie, GRAPH_NODE_TYPE_PREFIX as ne, useTransform as rt, useNodeCategories as dt, BaklavaEditor as lt, useBaklava as ut, DependencyEngine as ct, applyResult as pt, DEFAULT_TOOLBAR_COMMANDS as ht } from "baklavajs";
-import { reactive as A, defineComponent as U, createElementBlock as r, openBlock as i, toDisplayString as j, markRaw as T, computed as b, createElementVNode as d, withDirectives as te, vModelText as se, ref as B, onMounted as re, onUpdated as Ee, normalizeClass as R, createCommentVNode as I, unref as _, renderSlot as W, createStaticVNode as q, onBeforeUnmount as vt, normalizeStyle as de, withModifiers as P, createBlock as O, Fragment as E, createTextVNode as mt, createVNode as z, withKeys as oe, renderList as D, nextTick as ft, toRef as Te, resolveDynamicComponent as we, inject as gt, Transition as bt, withCtx as F, onUnmounted as yt, normalizeProps as _t, guardReactiveProps as Ct, mergeProps as kt } from "vue";
-import { v4 as Se } from "uuid";
-import { usePointer as wt } from "@vueuse/core";
-ee.escape = (s) => s;
-class xt extends qe {
+import { AbstractNode as Ke, sortTopologically as qe, NodeInterface as Je, displayInSidebar as Ne, NodeInterfaceType as H, BaklavaInterfaceTypes as Qe, CheckboxInterfaceComponent as Ze, setType as T, IntegerInterfaceComponent as et, TextInputInterfaceComponent as Me, NumberInterfaceComponent as tt, SelectInterfaceComponent as st, SliderInterfaceComponent as nt, TextareaInputInterfaceComponent as ot, allowMultipleConnections as A, IntegerInterface as at, TextInputInterface as it, getGraphNodeTypeString as rt, GraphInputNode as dt, GraphOutputNode as lt, Commands as Z, useViewModel as K, useTemporaryConnection as ut, Components as Ce, useGraph as ae, GRAPH_NODE_TYPE_PREFIX as se, useTransform as ct, useNodeCategories as pt, BaklavaEditor as ht, useBaklava as mt, DependencyEngine as vt } from "baklavajs";
+import { reactive as q, defineComponent as R, createElementBlock as d, openBlock as i, toDisplayString as j, markRaw as B, computed as b, createElementVNode as l, withDirectives as ee, vModelText as te, ref as V, onMounted as ie, onUpdated as $e, normalizeClass as P, createCommentVNode as x, unref as k, renderSlot as X, createStaticVNode as J, onBeforeUnmount as ft, normalizeStyle as re, withModifiers as F, createBlock as E, Fragment as S, createTextVNode as gt, createVNode as z, withKeys as ne, renderList as D, nextTick as bt, toRef as Oe, resolveDynamicComponent as ke, inject as _t, Transition as yt, withCtx as W, onUnmounted as Ct, normalizeProps as kt, guardReactiveProps as wt, mergeProps as It } from "vue";
+import { v4 as Te } from "uuid";
+import { usePointer as xt } from "@vueuse/core";
+Y.escape = (s) => s;
+class Ee extends Ke {
   state;
   code;
   isCodeNode = !0;
@@ -14,7 +14,7 @@ class xt extends qe {
   inputs = {};
   outputs = {};
   constructor() {
-    super(), this.initializeIo(), this.width = 400, this.twoColumn = !0, this.state = A({
+    super(), this.initializeIo(), this.twoColumn = !0, this.state = q({
       codeTemplate: "",
       hidden: !1,
       integrated: !1,
@@ -22,9 +22,9 @@ class xt extends qe {
       modules: [],
       props: null,
       script: "",
-      variableName: ""
+      variableName: "x"
     }), this.codeTemplate = function() {
-      return `${this.name}(${It(this.codeNodeInputs).join(", ")})`;
+      return `${this.name}(${Nt(this.codeNodeInputs).join(", ")})`;
     };
   }
   get codeNodeInputs() {
@@ -90,11 +90,11 @@ class xt extends qe {
   getConnectedNodes(e) {
     let t = [];
     if (e !== "inputs") {
-      const n = this.graph?.connections.filter((o) => o.from.name !== "_node").filter((o) => o.from.nodeId === this.id).map((o) => o.to.nodeId);
+      const n = this.graph?.connections.filter((o) => o.from.name !== "_code").filter((o) => o.from.nodeId === this.id).map((o) => o.to.nodeId);
       n && (t = t.concat(n));
     }
     if (e !== "outputs") {
-      const n = this.graph?.connections.filter((o) => o.from.name !== "_node").filter((o) => o.to.nodeId === this.id).map((o) => o.from.nodeId);
+      const n = this.graph?.connections.filter((o) => o.from.name !== "_code").filter((o) => o.to.nodeId === this.id).map((o) => o.from.nodeId);
       n && (t = t.concat(n));
     }
     return !t || t.length == 0 ? [] : t.map((n) => this.graph?.findNodeById(n));
@@ -134,16 +134,16 @@ class xt extends qe {
     if (!this.lockCode) {
       const e = {};
       Object.keys(this.inputs).forEach((n) => {
-        if (n === "_node") return;
+        if (n === "_code") return;
         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;
+        if (n === "_code") return;
         const o = this.outputs[n];
         o && o.state && (t[n] = o.getValue());
-      }), this.state.script = ee.render(this.state.codeTemplate, { inputs: e, outputs: t });
+      }), this.state.script = Y.render(this.state.codeTemplate, { inputs: e, outputs: t });
     }
     this.outputs.out && (this.outputs.out.state.script = this.script);
   }
@@ -158,7 +158,7 @@ class xt extends qe {
   }
   updateConnectedInputInterfaces() {
     if (!this.graph) return;
-    const { connectionsFromNode: e } = Me(this.graph);
+    const { connectionsFromNode: e } = qe(this.graph);
     if (!e.has(this)) return;
     const t = e.get(this);
     t && t.forEach((n) => {
@@ -176,7 +176,7 @@ class xt extends qe {
     this.state.props = e;
   }
 }
-class Be extends xt {
+class Se extends Ee {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -186,11 +186,11 @@ class Be extends xt {
    */
   calculate;
   load(e) {
-    super.load(e), Ve(this.graph, e);
+    super.load(e), Be(this.graph, e);
   }
   save() {
     const e = super.save();
-    return Nt(this.graph, e), e;
+    return Mt(this.graph, e), e;
   }
   updateModules(e) {
     if (e)
@@ -201,51 +201,51 @@ class Be extends xt {
     }
   }
 }
-const It = (s, e = !0) => {
+const Nt = (s, e = !0) => {
   const t = [], n = Object.keys(s);
   return n.forEach((o) => {
     if (s[o]?.hidden) return;
-    const l = e && t.length < n.indexOf(o) ? `${o}=` : "";
-    t.push(`${l}{{ inputs.${o} }}`);
+    const r = e && t.length < n.indexOf(o) ? `${o}=` : "";
+    t.push(`${r}{{ inputs.${o} }}`);
   }), t;
-}, Ve = (s, e) => {
+}, Be = (s, e) => {
   if (!s) return;
   const t = s.findNodeById(e.id);
   if (!t || t.subgraph) return;
   const n = t;
   n.state && (n.state.integrated = e.integrated, n.state.modules = e.modules, n.state.props = e.props), Object.entries(e.inputs).forEach(([o, a]) => {
-    o !== "_node" && n.inputs[o] && (n.inputs[o].hidden = a.hidden);
+    o !== "_code" && n.inputs[o] && (n.inputs[o].hidden = a.hidden);
   }), Object.entries(e.outputs).forEach(([o, a]) => {
-    o !== "_node" && n.outputs[o] && (n.outputs[o].hidden = a.hidden);
+    o !== "_code" && n.outputs[o] && (n.outputs[o].hidden = a.hidden);
   });
-}, Nt = (s, e) => {
+}, Mt = (s, e) => {
   if (!s) return;
   const t = s.findNodeById(e.id);
   if (!t || t.subgraph) return;
   const n = t;
   n.state && (e.integrated = n.state.integrated, e.modules = n.state.modules), Object.entries(e.inputs).forEach(([o, a]) => {
-    o !== "_node" && n.inputs[o] && (a.hidden = n.inputs[o].hidden);
+    o !== "_code" && n.inputs[o] && (a.hidden = n.inputs[o].hidden);
   }), Object.entries(e.outputs).forEach(([o, a]) => {
-    o !== "_node" && n.outputs[o] && (a.hidden = n.outputs[o].hidden);
+    o !== "_code" && n.outputs[o] && (a.hidden = n.outputs[o].hidden);
   });
-}, Mt = ["title"], le = /* @__PURE__ */ U({
+}, $t = ["title"], de = /* @__PURE__ */ R({
   __name: "CodeNodeInterface",
   props: {
     intf: {}
   },
   setup(s) {
-    return (e, t) => (i(), r("div", {
+    return (e, t) => (i(), d("div", {
       title: s.intf.state?.script
-    }, j(s.intf.name), 9, Mt));
+    }, j(s.intf.name), 9, $t));
   }
 });
-class H extends Je {
+class L extends Je {
   isCodeNode = !0;
   code;
   state;
   type = null;
   constructor(e, t) {
-    super(e, t), this.setComponent(T(le)), this.state = A({
+    super(e, t), this.setComponent(B(de)), this.state = q({
       optional: !1,
       script: ""
     });
@@ -264,13 +264,13 @@ class H extends Je {
   }
   getValue = () => `${this.value ?? "None"}`;
   resetScript = () => this.state.script = "";
+  setOptional(e) {
+    return this.state.optional = e, this.setHidden(e), this;
+  }
 }
-const _n = (s, e) => {
-  s.state.optional = e, s.setHidden(e);
-};
-class J extends H {
+class Q extends L {
   constructor(e = "", t) {
-    super(e, t), this.setComponent(T(le)), this.use($e, !0);
+    super(e, t), this.setComponent(B(de)), this.use(Ne, !0);
   }
   set script(e) {
     if (this.state.script && this.allowMultipleConnections) {
@@ -283,67 +283,67 @@ class J extends H {
     return super.value;
   }
   set value(e) {
-    super.value = e, this.name !== "_node" && this.setHidden(!1);
+    super.value = e, this.name !== "_code" && this.setHidden(!1);
   }
 }
-const ze = new G("boolean"), $t = new G("dict"), je = new G("list"), X = new G("node"), ue = new G("number"), ce = new G("string"), Le = new G("tuple"), Cn = (s) => {
-  new Qe(s.editor, { viewPlugin: s }).addTypes(ze, $t, je, X, ue, ce, Le);
+const Ve = new H("boolean"), Ot = new H("dict"), ze = new H("list"), U = new H("node"), le = new H("number"), ue = new H("string"), je = new H("tuple"), In = (s) => {
+  new Qe(s.editor, { viewPlugin: s }).addTypes(Ve, Ot, ze, U, le, ue, je);
 };
-class kn extends J {
+class xn extends Q {
   constructor(e, t) {
-    super(e, t), this.setComponent(T(Ke)), this.use(V, ze);
+    super(e, t), this.setComponent(B(Ze)), this.use(T, Ve);
   }
   getValue = () => this.value ? "True" : "False";
 }
-class Ot extends H {
+class Ge extends L {
   isCodeNodeOutput = !0;
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(T(le));
+    super(e, t), this.setComponent(B(de));
   }
   get script() {
     return this.name ? this.name : this.state.script;
   }
 }
-class pe extends J {
+class ce extends Q {
   min;
   max;
   constructor(e, t, n, o) {
-    super(e, t), this.min = n, this.max = o, this.use(V, ue);
+    super(e, t), this.min = n, this.max = o, this.use(T, le);
   }
   validate(e) {
     return (this.min === void 0 || e >= this.min) && (this.max === void 0 || e <= this.max);
   }
 }
-class wn extends pe {
-  component = T(Ze);
+class Nn extends ce {
+  component = B(et);
   validate(e) {
     return Number.isInteger(e) && super.validate(e);
   }
 }
-class xn extends J {
+class Mn extends Q {
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(T(Oe)), this.use(V, je);
+    super(e, t), this.setComponent(B(Me)), this.use(T, ze);
   }
   getValue = () => `[${this.value}]`;
 }
-class In extends pe {
-  component = T(et);
+class $n extends ce {
+  component = B(tt);
 }
-class he extends J {
+class pe extends Q {
   constructor(e, t) {
-    super(e, t), this.use(V, ce);
+    super(e, t), this.use(T, ue);
   }
   getValue = () => `"${this.value}"`;
 }
-class Nn extends he {
-  component = T(tt);
+class On extends pe {
+  component = B(st);
   items;
   constructor(e, t, n) {
     super(e, t), this.items = n;
   }
 }
-class Mn extends pe {
-  component = T(st);
+class Tn extends ce {
+  component = B(nt);
   min;
   max;
   constructor(e, t, n, o) {
@@ -351,7 +351,7 @@ class Mn extends pe {
   }
   getValue = () => `${Math.round(this.value * 1e3) / 1e3}`;
 }
-const Et = U({
+const Tt = R({
   props: {
     intf: {
       type: Object,
@@ -376,54 +376,48 @@ const Et = U({
   for (const [n, o] of e)
     t[n] = o;
   return t;
-}, Tt = { style: { position: "relative" } }, St = { style: { "font-size": "12px", padding: "0 6px", position: "absolute", top: "-8px", "background-color": "var(--baklava-node-color-background)" } }, Bt = ["placeholder", "title"];
+}, Et = { style: { position: "relative" } }, St = { style: { "font-size": "12px", padding: "0 6px", position: "absolute", top: "-8px", "background-color": "var(--baklava-node-color-background)" } }, Bt = ["placeholder", "title"];
 function Vt(s, e, t, n, o, a) {
-  return i(), r("div", Tt, [
-    d("label", St, j(s.intf.name), 1),
-    te(d("input", {
-      "onUpdate:modelValue": e[0] || (e[0] = (l) => s.v = l),
+  return i(), d("div", Et, [
+    l("label", St, j(s.intf.name), 1),
+    ee(l("input", {
+      "onUpdate:modelValue": e[0] || (e[0] = (r) => s.v = r),
       type: "text",
       class: "baklava-input",
       placeholder: s.intf.name,
       title: s.intf.name
     }, null, 8, Bt), [
-      [se, s.v]
+      [te, s.v]
     ])
   ]);
 }
-const zt = /* @__PURE__ */ $(Et, [["render", Vt]]);
-class $n extends he {
-  component = T(zt);
+const zt = /* @__PURE__ */ $(Tt, [["render", Vt]]);
+class En extends pe {
+  component = B(zt);
 }
-class On extends he {
-  component = T(nt);
+class Sn extends pe {
+  component = B(ot);
 }
-class En extends J {
+class Bn extends Q {
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(T(Oe)), this.use(V, Le);
+    super(e, t), this.setComponent(B(Me)), this.use(T, je);
   }
   getValue = () => `(${this.value})`;
 }
-function Tn(s) {
-  return class extends Be {
+function Vn(s) {
+  return class extends Se {
     type = s.type;
     inputs = {};
     outputs = {};
     constructor() {
-      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 H("", []).use(V, X).use(K).setHidden(!0)
+      super(), this._title = s.title ?? s.type, this.executeFactory("input", s.inputs), this.executeFactory("output", s.outputs), s.onCreate?.call(this), this.name = s.name ?? s.type, this.updateModules(s.modules), s.variableName != null && (this.state.variableName = s.variableName), s.codeTemplate && (this.codeTemplate = s.codeTemplate), this.addInput(
+        "_code",
+        new L("", []).use(T, U).use(A).setHidden(!0)
       ), this.addOutput(
-        "_node",
-        new H("", []).use(V, X).use(K).setHidden(!0)
-      ), this.executeFactory("input", s.inputs), this.executeFactory("output", s.outputs), s.onCreate?.call(this);
+        "_code",
+        new L("", []).use(T, U).use(A).setHidden(!0)
+      );
     }
-    // public calculate = definition.calculate
-    //   ? (inputs: I, globalValues: CalculationContext) => ({
-    //       ...definition.calculate!.call(this, inputs, globalValues),
-    //       _node: null,
-    //     })
-    //   : undefined
     onPlaced() {
       s.onPlaced?.call(this);
     }
@@ -447,7 +441,7 @@ function Tn(s) {
     }
   };
 }
-class jt extends Be {
+class jt extends Se {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -457,23 +451,22 @@ class jt extends Be {
    */
   calculate;
 }
-function Sn(s) {
+function zn(s) {
   return class extends jt {
     type = s.type;
     inputs = {};
     outputs = {};
-    calculate;
     preventUpdate = !1;
     staticInputKeys = Object.keys(s.inputs ?? {});
     staticOutputKeys = Object.keys(s.outputs ?? {});
     constructor() {
-      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 H("", []).use(V, X).use(K).setHidden(!0)
+      super(), this._title = s.title ?? s.type, this.executeFactory("input", s.inputs), this.executeFactory("output", s.outputs), s.onCreate?.call(this), 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(
+        "_code",
+        new L("", []).use(T, U).use(A).setHidden(!0)
       ), this.addOutput(
-        "_node",
-        new H("", []).use(V, X).use(K).setHidden(!0)
-      ), this.staticInputKeys.push("_node"), this.staticOutputKeys.push("_node"), this.executeFactory("input", s.inputs), this.executeFactory("output", s.outputs), s.onCreate?.call(this);
+        "_code",
+        new L("", []).use(T, U).use(A).setHidden(!0)
+      ), this.staticInputKeys.push("_code"), this.staticOutputKeys.push("_code");
     }
     onPlaced() {
       this.events.update.subscribe(this, (e) => {
@@ -495,28 +488,28 @@ function Sn(s) {
     load(e) {
       this.preventUpdate = !0, this.hooks.beforeLoad.execute(e), this.id = e.id, this.title = e.title;
       for (const t of this.staticInputKeys)
-        this.inputs[t].load(e.inputs[t]), this.inputs[t].nodeId = this.id, t !== "_node" && (this.inputs[t].hidden = e.inputs[t].hidden);
+        this.inputs[t].load(e.inputs[t]), this.inputs[t].nodeId = this.id, t !== "_code" && (this.inputs[t].hidden = e.inputs[t].hidden);
       for (const t of this.staticOutputKeys)
-        this.outputs[t].load(e.outputs[t]), this.outputs[t].nodeId = this.id, t !== "_node" && (this.outputs[t].hidden = e.outputs[t].hidden);
+        this.outputs[t].load(e.outputs[t]), this.outputs[t].nodeId = this.id, t !== "_code" && (this.outputs[t].hidden = e.outputs[t].hidden);
       this.preventUpdate = !1, this.onUpdate(), this.preventUpdate = !0;
       for (const t of Object.keys(e.inputs))
         if (!this.staticInputKeys.includes(t)) {
           if (!this.inputs[t]) {
             const n = e.inputs[t].value;
             let o;
-            typeof n == "number" ? o = new ot(t, n).use(V, ue) : o = new at(t, JSON.stringify(n)).use(V, ce), o.use($e, !0), this.addInput(t, o);
+            typeof n == "number" ? o = new at(t, n).use(T, le) : o = new it(t, JSON.stringify(n)).use(T, ue), o.use(Ne, !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 Ot(t);
+            const n = new Ge(t);
             this.addOutput(t, n);
           }
           this.outputs[t] && (this.outputs[t].load(e.outputs[t]), this.outputs[t].nodeId = this.id);
         }
-      Ve(this.graph, e), this.preventUpdate = !1, this.events.loaded.emit(this);
+      Be(this.graph, e), this.preventUpdate = !1, this.events.loaded.emit(this);
     }
     onUpdate() {
       if (this.preventUpdate) return;
@@ -532,12 +525,12 @@ function Sn(s) {
     }
     updateInterfaces(e, t, n) {
       const o = e === "input" ? this.staticInputKeys : this.staticOutputKeys, a = e === "input" ? this.inputs : this.outputs;
-      for (const l of Object.keys(a))
-        o.includes(l) || t[l] && !n.includes(l) || (e === "input" ? this.removeInput(l) : this.removeOutput(l));
-      for (const l of Object.keys(t)) {
-        if (a[l]) continue;
-        const u = t[l]();
-        e === "input" ? this.addInput(l, u) : this.addOutput(l, u);
+      for (const r of Object.keys(a))
+        o.includes(r) || t[r] && !n.includes(r) || (e === "input" ? this.removeInput(r) : this.removeOutput(r));
+      for (const r of Object.keys(t)) {
+        if (a[r]) continue;
+        const u = t[r]();
+        e === "input" ? this.addInput(r, u) : this.addOutput(r, u);
       }
     }
     updateProps(e) {
@@ -551,13 +544,155 @@ function Sn(s) {
     }
   };
 }
-ee.escape = (s) => s;
-class Lt {
+const jn = "__baklava_GraphNode-", Gt = [
+  "component",
+  "connectionCount",
+  "events",
+  "hidden",
+  "hooks",
+  "id",
+  "isCodeNode",
+  "isInput",
+  "name",
+  "nodeId",
+  "port",
+  "templateId",
+  "value"
+];
+function Lt(s) {
+  return class extends Ee {
+    type = rt(s);
+    get title() {
+      return this._title;
+    }
+    set title(t) {
+      this.template.name = t;
+    }
+    inputs = {};
+    outputs = {};
+    template = s;
+    subgraph;
+    // public override calculate: CalculateFunction<Record<string, unknown>, Record<string, unknown>> = async (
+    //   inputs,
+    //   context,
+    // ) => {
+    //   if (!this.subgraph) {
+    //     throw new Error(`GraphNode ${this.id}: calculate called without subgraph being initialized`)
+    //   }
+    //   if (!context.engine || typeof context.engine !== 'object') {
+    //     throw new Error(`GraphNode ${this.id}: calculate called but no engine provided in context`)
+    //   }
+    //   const graphInputs = context.engine.getInputValues(this.subgraph)
+    //   // fill subgraph input placeholders
+    //   for (const input of this.subgraph.inputs) {
+    //     graphInputs.set(input.nodeInterfaceId, inputs[input.id])
+    //   }
+    //   const result: Map<string, Map<string, unknown>> = await context.engine.runGraph(
+    //     this.subgraph,
+    //     graphInputs,
+    //     context.globalValues,
+    //   )
+    //   const outputs: Record<string, unknown> = {}
+    //   for (const output of this.subgraph.outputs) {
+    //     outputs[output.id] = result.get(output.nodeId)?.get('output')
+    //   }
+    //   outputs._calculationResults = result
+    //   outputs['_code'] = inputs['_code']
+    //   return outputs
+    // }
+    /**
+     * Render code script of code nodes.
+     */
+    renderCodes() {
+      if (!this.subgraph) return;
+      this.subgraph.nodes.filter((n) => n.isCodeNode).forEach((n) => n.renderCode());
+      const t = this.subgraph.nodes;
+      this.state.script = Y.render(this.code.state.template || "", { nodes: t });
+    }
+    load(t) {
+      if (!this.subgraph)
+        throw new Error("Cannot load a graph node without a graph");
+      if (!this.template)
+        throw new Error("Unable to load graph node without graph template");
+      this.subgraph.load(t.graphState), super.load(t);
+    }
+    save() {
+      if (!this.subgraph)
+        throw new Error("Cannot save a graph node without a graph");
+      return {
+        ...super.save(),
+        graphState: this.subgraph.save()
+      };
+    }
+    onPlaced() {
+      this.template.events.updated.subscribe(this, () => this.initialize()), this.template.events.nameChanged.subscribe(this, (t) => {
+        this._title = t;
+      }), this.initialize();
+    }
+    onConnected() {
+    }
+    onDestroy() {
+      this.template.events.updated.unsubscribe(this), this.template.events.nameChanged.unsubscribe(this), this.subgraph?.destroy();
+    }
+    onUnconnected() {
+    }
+    initialize() {
+      this.subgraph && this.subgraph.destroy(), this.subgraph = this.template.createGraph(), this._title = this.template.name, this.updateInterfaces(), this.events.update.emit(null);
+    }
+    updateInterfaces() {
+      if (!this.subgraph)
+        throw new Error("Trying to update interfaces without graph instance");
+      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((n) => n.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((n) => n.id === t) || this.removeOutput(t);
+      this.addInput(
+        "_code",
+        new L("", []).use(T, U).use(A).setHidden(!0)
+      ), this.addOutput(
+        "_code",
+        new L("", []).use(T, U).use(A).setHidden(!0)
+      ), this.addOutput(
+        "_calculationResults",
+        new Ge("_calculationResults", void 0).setHidden(!0)
+      );
+    }
+    /**
+     * When we create a interface in the graph node, we hide certain properties of the interface in the subgraph.
+     * 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, n) {
+      const o = new L(t.name, void 0);
+      return new Proxy(o, {
+        get: (a, r) => {
+          if (Gt.includes(r) || r in a || typeof r == "string" && r.startsWith("__v_"))
+            return Reflect.get(a, r);
+          let u;
+          n ? u = this.subgraph?.nodes.find(
+            (I) => dt.isGraphInputNode(I) && I.graphInterfaceId === t.id
+          )?.outputs.placeholder.id : u = this.subgraph?.nodes.find(
+            (I) => lt.isGraphOutputNode(I) && I.graphInterfaceId === t.id
+          )?.inputs.placeholder.id;
+          const p = this.subgraph?.connections.find((g) => u === (n ? g.from : g.to)?.id), _ = n ? p?.to : p?.from;
+          if (_)
+            return Reflect.get(_, r);
+        }
+      });
+    }
+  };
+}
+Y.escape = (s) => s;
+class Rt {
   _id;
   _viewModel;
   _state;
   constructor(e) {
-    this._id = Se(), this._viewModel = e, this._state = A({
+    this._id = Te(), this._viewModel = e, this._state = q({
       autosort: !1,
       lockCode: !1,
       modules: {},
@@ -567,7 +702,10 @@ class Lt {
     });
   }
   get codeNodes() {
-    return ae(this.graph);
+    return oe(this.graph);
+  }
+  get codeNodeIds() {
+    return this.codeNodes.map((e) => e.id);
   }
   get connections() {
     return this.graph.connections;
@@ -588,13 +726,13 @@ class Lt {
     this.state.lockCode = e, this.viewModel.engine.runOnce(null);
   }
   get modules() {
-    let e = [];
-    return this.codeNodes.filter((t) => t.state.modules?.length > 0).forEach((t) => {
-      e = e.concat(t.state.modules);
-    }), e ? (e.sort(), Array.from(new Set(e.map((t) => this.viewModel.state.modules[t])))) : [];
+    const e = [];
+    return this.codeNodes.filter((t) => t.state.modules?.length > 0).forEach((t) => e.push(...t.state.modules)), e ? (e.sort(), Array.from(
+      new Set(e.map((t) => this.viewModel.state.modules[t]))
+    )) : [];
   }
   get nodeIds() {
-    return this.codeNodes.map((e) => e.id);
+    return this.nodes.map((e) => e.id);
   }
   get nodes() {
     return this.graph.nodes;
@@ -606,10 +744,10 @@ class Lt {
     return this.state.script;
   }
   set script(e) {
-    this.state.script = e, this.viewModel.engine.runOnce(null);
+    this.state.script = e;
   }
   get scriptedCodeNodes() {
-    return ae(this.graph).filter(
+    return oe(this.graph).filter(
       (e) => !e.state?.integrated
     );
   }
@@ -647,23 +785,43 @@ class Lt {
    * @param to code node interface
    */
   addConnection(e, t) {
-    e.name !== "_node" && (e.hidden = !1), t.name !== "_node" && (t.hidden = !1), this.graph.addConnection(e, t);
+    e.name !== "_code" && (e.hidden = !1), t.name !== "_code" && (t.hidden = !1), this.graph.addConnection(e, t);
   }
   /**
    * Clear code graph.
    */
   clear() {
-    this.state.modules = {}, this.nodes = [], this.connections = [], this.state.script = "", this.viewModel.commandHandler.executeCommand(Z.CLEAR_CLIPBOARD_COMMAND), this.viewModel.commandHandler.executeCommand(Z.CLEAR_HISTORY_COMMAND), this.viewModel.engine && this.viewModel.engine.runOnce(void 0);
+    this.viewModel.commandHandler.executeCommand(Z.CLEAR_CLIPBOARD_COMMAND), this.viewModel.commandHandler.executeCommand(Z.CLEAR_HISTORY_COMMAND), this.state.modules = {}, this.nodes = [], this.connections = [], this.state.script = "";
   }
+  /**
+   * Find node by ID.
+   * @param id node ID
+   * @returns node instance
+   */
   findNodeById(e) {
     return this.graph.findNodeById(e);
   }
+  /**
+   * Find node by type.
+   * @param nodeType node type
+   * @returns node instance
+   */
   findNodeByType(e) {
     return this.codeNodes.find((t) => t.type === e);
   }
+  /**
+   * Get nodes of the same type.
+   * @param type node type
+   * @returns a list of node instances
+   */
   getNodesBySameType(e) {
     return this.codeNodes.filter((t) => t.type === e);
   }
+  /**
+   * Get nodes of the same variable name.
+   * @param variableName variable name
+   * @returns a list of node instances
+   */
   getNodesBySameVariableNames(e) {
     return this.codeNodes.filter(
       (t) => t.state.variableName === e
@@ -682,8 +840,9 @@ class Lt {
   }
   /**
    * Load template from the file.
+   * @param resolve: default string in promise resolve (from import)
    */
-  loadTemplate(e) {
+  async loadTemplate(e) {
     e.then((t) => {
       this._state.template = t.default ?? "";
     });
@@ -703,16 +862,18 @@ class Lt {
     this.graph.removeNode(e);
   }
   /**
-   * Render node codes.
+   * Render code script of code nodes.
    */
   renderNodeCodes() {
-    this.state.lockCode || this.codeNodes.length !== 0 && this.codeNodes.forEach((e) => e.renderCode());
+    this.state.lockCode || this.codeNodes.length === 0 || this.codeNodes.forEach((e) => e.renderCode());
   }
   /**
-   * Render code.
+   * Render code script.
    */
   renderCode() {
-    this.state.lockCode || (this.state.script = ee.render(this.state.template || "", this));
+    if (this.state.lockCode) return;
+    const e = this.scriptedCodeNodes, t = this.modules;
+    this.state.script = Y.render(this.state.template || "", { nodes: e, modules: t });
   }
   /**
    * Reset scripts of intput interfaces.
@@ -720,44 +881,20 @@ class Lt {
   resetInputInterfaceScript() {
     this.codeNodes.forEach((e) => e.resetInputInterfaceScript());
   }
-  /**
-   * Save code graph.
-   * @returns graph state
-   */
-  save() {
-    this.state.autosort && this.sortNodes();
-    const e = this.viewModel.editor.save();
-    return e.graph.id = this.id, this.saveNodeStates(e.graph.nodes), JSON.parse(JSON.stringify(e));
-  }
-  /**
-   * Save node states.
-   * @param nodeStates a list of node state.
-   */
-  saveNodeStates(e) {
-    e.forEach((t, n) => {
-      const o = this.nodes[n];
-      Object.entries(t.inputs).forEach(([a, l]) => {
-        t.inputs && o.inputs[a] && (l.hidden = o.inputs[a].hidden);
-      }), Object.entries(t.outputs).forEach(([a, l]) => {
-        t.outputs && o.outputs[a] && (l.hidden = o.outputs[a].hidden);
-      });
-    });
-  }
   /**
    * Sort code nodes.
    */
   sortNodes() {
     if (!(this.nodes.length === 0 || this.connections.length === 0))
       try {
-        const e = this.connections.map((a) => [
-          a.to.nodeId,
-          a.from.nodeId
-        ]);
-        let t = [...this.nodeIds];
-        t.reverse(), t = Ye.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));
+        let e = this.nodeIds;
+        const t = this.connections.filter(
+          (a) => e.includes(a.to.nodeId) && e.includes(a.from.nodeId)
+        ).map((a) => [a.to.nodeId, a.from.nodeId]);
+        e.reverse(), e = Ye.array(e, t), e.reverse();
+        const n = this.graph.nodes.map((a) => a.id).filter((a) => !e.includes(a));
+        e = [...e, ...n];
+        const o = e.map((a) => this.findNodeById(a));
         o && (this.nodes = o);
       } catch {
         console.warn("Failed to sort nodes.");
@@ -776,60 +913,51 @@ class Lt {
     this.codeNodes.forEach((e) => e.updateCodeTemplate());
   }
 }
-const ae = (s) => {
-  let e = [];
-  return s.nodes.forEach((t) => {
-    t.subgraph ? e = e.concat(ae(t.subgraph)) : t.isCodeNode && e.push(t);
+const oe = (s) => {
+  const e = [];
+  return s.nodes.length === 0 || s.nodes.forEach((t) => {
+    t && (t.hasOwnProperty("subgraph") ? e.push(...oe(t.subgraph)) : t.hasOwnProperty("isCodeNode") && e.push(t));
   }), e;
-}, Bn = (s = 0, e = 100) => ({
+}, Ln = (s = 0, e = 100) => ({
   x: s * 420,
   y: e
-}), Vn = (s) => {
+}), Rn = (s) => {
   const e = { ...s.position };
   return e.x -= 440, e.y += 50, e;
-}, zn = (s) => {
-  const { calculationOrder: e, connectionsFromNode: t } = Me(s);
-  e.forEach((n) => {
-    if (!n.isCodeNode) return;
-    const o = n;
-    t.has(o) && t.get(o).forEach((a) => {
-      a.to.state && a.from.script && (a.to.state.script = a.from.script);
-    });
-  });
-}, Ut = ["id"], Rt = { class: "align-middle" }, xe = /* @__PURE__ */ U({
+}, Pt = ["id"], Ut = { class: "align-middle" }, we = /* @__PURE__ */ R({
   __name: "CodeGraphNodeInterface",
   props: {
     node: {},
     intf: {}
   },
   setup(s) {
-    const e = s, { viewModel: t } = Y(), { hoveredOver: n, temporaryConnection: o } = it(), a = B(null), l = b(() => e.intf.connectionCount > 0), u = b(() => ({
-      "--connected": l.value
-    })), v = () => {
+    const e = s, { viewModel: t } = K(), { hoveredOver: n, temporaryConnection: o } = ut(), a = V(null), r = b(() => e.intf.connectionCount > 0), u = b(() => ({
+      "--connected": r.value
+    })), p = () => {
       n(e.intf);
-    }, C = () => {
+    }, _ = () => {
       n(void 0);
-    }, w = () => {
+    }, g = () => {
       a.value && t.value.hooks.renderInterface.execute({ intf: e.intf, el: a.value });
     };
-    return re(w), Ee(w), (S, L) => (i(), r("div", {
+    return ie(g), $e(g), (I, G) => (i(), d("div", {
       id: s.intf.id,
       ref_key: "el",
       ref: a,
-      class: R(["baklava-node-interface", u.value])
+      class: P(["baklava-node-interface", u.value])
     }, [
-      s.intf.port ? (i(), r("div", {
+      s.intf.port ? (i(), d("div", {
         key: 0,
-        class: R(["__port", { "--selected": _(o)?.from === s.intf }]),
-        onPointerover: v,
-        onPointerout: C
-      }, null, 34)) : I("", !0),
-      d("span", Rt, [
-        W(S.$slots, "default")
+        class: P(["__port", { "--selected": k(o)?.from === s.intf }]),
+        onPointerover: p,
+        onPointerout: _
+      }, null, 34)) : x("", !0),
+      l("span", Ut, [
+        X(I.$slots, "default")
       ])
-    ], 10, Ut));
+    ], 10, Pt));
   }
-}), Gt = {}, At = {
+}), Ht = {}, At = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -842,16 +970,16 @@ const ae = (s) => {
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-code-variable"
 };
 function Dt(s, e) {
-  return i(), r("svg", At, [...e[0] || (e[0] = [
-    d("path", {
+  return i(), d("svg", At, [...e[0] || (e[0] = [
+    l("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    d("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)
+    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 Ht = /* @__PURE__ */ $(Gt, [["render", Dt]]), Pt = {}, Ft = {
+const Ft = /* @__PURE__ */ $(Ht, [["render", Dt]]), Wt = {}, Xt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -863,19 +991,19 @@ const Ht = /* @__PURE__ */ $(Gt, [["render", Dt]]), Pt = {}, Ft = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"
 };
-function Wt(s, e) {
-  return i(), r("svg", Ft, [...e[0] || (e[0] = [
-    d("path", {
+function Yt(s, e) {
+  return i(), d("svg", Xt, [...e[0] || (e[0] = [
+    l("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    d("path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
-    d("path", { d: "M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
-    d("path", { d: "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, 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 Xt = /* @__PURE__ */ $(Pt, [["render", Wt]]), Yt = {}, qt = {
+const Kt = /* @__PURE__ */ $(Wt, [["render", Yt]]), qt = {}, Jt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -883,17 +1011,17 @@ const Xt = /* @__PURE__ */ $(Pt, [["render", Wt]]), Yt = {}, qt = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"
 };
-function Jt(s, e) {
-  return i(), r("svg", qt, [...e[0] || (e[0] = [
-    d("path", {
+function Qt(s, e) {
+  return i(), d("svg", Jt, [...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 Qt = /* @__PURE__ */ $(Yt, [["render", Jt]]), Kt = {}, Zt = {
+const Zt = /* @__PURE__ */ $(qt, [["render", Qt]]), es = {}, ts = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -901,17 +1029,17 @@ const Qt = /* @__PURE__ */ $(Yt, [["render", Jt]]), Kt = {}, Zt = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-expand"
 };
-function es(s, e) {
-  return i(), r("svg", Zt, [...e[0] || (e[0] = [
-    d("path", {
+function ss(s, e) {
+  return i(), d("svg", ts, [...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 ts = /* @__PURE__ */ $(Kt, [["render", es]]), ss = {}, ns = {
+const ns = /* @__PURE__ */ $(es, [["render", ss]]), os = {}, as = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -919,17 +1047,17 @@ const ts = /* @__PURE__ */ $(Kt, [["render", es]]), ss = {}, ns = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right"
 };
-function os(s, e) {
-  return i(), r("svg", ns, [...e[0] || (e[0] = [
-    d("path", {
+function is(s, e) {
+  return i(), d("svg", as, [...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 as = /* @__PURE__ */ $(ss, [["render", os]]), is = {}, rs = {
+const rs = /* @__PURE__ */ $(os, [["render", is]]), ds = {}, ls = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -937,17 +1065,17 @@ const as = /* @__PURE__ */ $(ss, [["render", os]]), is = {}, rs = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-collapse"
 };
-function ds(s, e) {
-  return i(), r("svg", rs, [...e[0] || (e[0] = [
-    d("path", {
+function us(s, e) {
+  return i(), d("svg", ls, [...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 ls = /* @__PURE__ */ $(is, [["render", ds]]), us = {}, cs = {
+const cs = /* @__PURE__ */ $(ds, [["render", us]]), ps = {}, hs = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -955,17 +1083,17 @@ const ls = /* @__PURE__ */ $(is, [["render", ds]]), us = {}, cs = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-expand"
 };
-function ps(s, e) {
-  return i(), r("svg", cs, [...e[0] || (e[0] = [
-    d("path", {
+function ms(s, e) {
+  return i(), d("svg", hs, [...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 hs = /* @__PURE__ */ $(us, [["render", ps]]), vs = {}, ms = {
+const vs = /* @__PURE__ */ $(ps, [["render", ms]]), fs = {}, gs = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -977,12 +1105,12 @@ const hs = /* @__PURE__ */ $(us, [["render", ps]]), vs = {}, ms = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-lock-code"
 };
-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="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)
+function bs(s, e) {
+  return i(), d("svg", gs, [...e[0] || (e[0] = [
+    J('<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 gs = /* @__PURE__ */ $(vs, [["render", fs]]), bs = {}, ys = {
+const _s = /* @__PURE__ */ $(fs, [["render", bs]]), ys = {}, Cs = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -994,12 +1122,12 @@ const gs = /* @__PURE__ */ $(vs, [["render", fs]]), bs = {}, ys = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema"
 };
-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="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 ks(s, e) {
+  return i(), d("svg", Cs, [...e[0] || (e[0] = [
+    J('<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 Cs = /* @__PURE__ */ $(bs, [["render", _s]]), ks = {}, ws = {
+const ws = /* @__PURE__ */ $(ys, [["render", ks]]), Is = {}, xs = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1011,12 +1139,12 @@ const Cs = /* @__PURE__ */ $(bs, [["render", _s]]), ks = {}, ws = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema-off"
 };
-function xs(s, e) {
-  return i(), r("svg", ws, [...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)
+function Ns(s, e) {
+  return i(), d("svg", xs, [...e[0] || (e[0] = [
+    J('<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 Is = /* @__PURE__ */ $(ks, [["render", xs]]), Ns = {}, Ms = {
+const Ms = /* @__PURE__ */ $(Is, [["render", Ns]]), $s = {}, Os = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1028,12 +1156,12 @@ const Is = /* @__PURE__ */ $(ks, [["render", xs]]), Ns = {}, Ms = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-transition-bottom"
 };
-function $s(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)
+function Ts(s, e) {
+  return i(), d("svg", Os, [...e[0] || (e[0] = [
+    J('<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 Os = /* @__PURE__ */ $(Ns, [["render", $s]]), Es = {}, Ts = {
+const Es = /* @__PURE__ */ $($s, [["render", Ts]]), Ss = {}, Bs = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1045,18 +1173,18 @@ const Os = /* @__PURE__ */ $(Ns, [["render", $s]]), Es = {}, Ts = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-trash-off"
 };
-function Ss(s, e) {
-  return i(), r("svg", Ts, [...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)
+function Vs(s, e) {
+  return i(), d("svg", Bs, [...e[0] || (e[0] = [
+    J('<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 Bs = /* @__PURE__ */ $(Es, [["render", Ss]]), Vs = ["id", "data-node-type"], zs = {
+const zs = /* @__PURE__ */ $(Ss, [["render", Vs]]), js = ["id", "data-node-type"], Gs = {
   class: "__title-label",
   style: { "flex-grow": "1" }
-}, js = { key: 0 }, Ls = {
+}, Ls = { key: 0 }, Rs = {
   class: "__menu",
   style: { display: "flex" }
-}, Us = { class: "__outputs" }, Rs = { key: 0 }, Gs = ["id", "title"], As = { class: "__inputs" }, Ds = { key: 0 }, Hs = ["id", "title"], Ps = /* @__PURE__ */ U({
+}, Ps = { class: "__outputs" }, Us = { key: 0 }, Hs = ["id", "title"], As = { class: "__inputs" }, Ds = { key: 0 }, Fs = ["id", "title"], Ws = /* @__PURE__ */ R({
   __name: "CodeGraphNode",
   props: {
     node: {},
@@ -1065,240 +1193,242 @@ const Bs = /* @__PURE__ */ $(Es, [["render", Ss]]), Vs = ["id", "data-node-type"
   },
   emits: ["select", "start-drag", "update"],
   setup(s, { emit: e }) {
-    const t = ke.ContextMenu, n = ke.NodeInterface, o = s, a = b(() => o.node), l = e, { viewModel: u } = Y(), { graph: v, switchGraph: C } = ie(), w = B(null), S = B(!1), L = B(""), N = B(null), m = B(!1);
-    let y = 0, x = 0;
-    const f = B(!1), k = b(() => {
+    const t = Ce.ContextMenu, n = Ce.NodeInterface, o = s, a = b(() => o.node), r = e, { viewModel: u } = K(), { graph: p, switchGraph: _ } = ae(), g = V(null), I = V(!1), G = V(""), N = V(null), y = V(!1);
+    let f = 0, O = 0;
+    const m = V(!1), w = b(() => {
       const c = [
         { value: "edit", label: "Edit" },
         { value: "rename", label: "Rename" },
         { value: "delete", label: "Delete" }
       ];
-      return o.node.type.startsWith(ne) && c.push({ value: "editSubgraph", label: "Edit Subgraph" }), c;
-    }), p = b(() => ({
+      return o.node.type.startsWith(se) && c.push({ value: "editSubgraph", label: "Edit Subgraph" }), c;
+    }), h = b(() => ({
       "--selected": o.selected,
       "--dragging": o.dragging,
       "--two-column": !!o.node.twoColumn,
       "--hidden": a.value.state?.hidden
     })), M = b(() => ({
       "--reverse-y": o.node.reverseY ?? u.value.settings.nodes.reverseY
-    })), Ue = b(() => ({
+    })), Le = b(() => ({
       top: `${o.node.position?.y ?? 0}px`,
       left: `${o.node.position?.x ?? 0}px`,
       "--width": `${o.node.width ?? u.value.settings.nodes.defaultWidth}px`
-    })), Re = b(() => Object.values(o.node.inputs).filter((c) => !c.hidden)), Ge = b(() => Object.values(o.node.outputs).filter((c) => !c.hidden)), ve = () => {
-      l("select");
-    }, Ae = (c) => {
-      o.selected || ve(), l("start-drag", c);
+    })), Re = b(() => Object.values(o.node.inputs).filter((c) => !c.hidden)), Pe = b(() => Object.values(o.node.outputs).filter((c) => !c.hidden)), he = () => {
+      r("select");
+    }, Ue = (c) => {
+      o.selected || he(), r("start-drag", c);
     }, me = () => {
-      f.value = !0;
-    }, De = () => {
+      m.value = !0;
+    }, He = () => {
       const c = u.value.displayedGraph.sidebar;
       c.nodeId = "", c.visible = !1;
-    }, fe = () => {
+    }, ve = () => {
       const c = u.value.displayedGraph.sidebar;
       c.nodeId = o.node.id, c.visible = !0;
-    }, He = () => {
+    }, Ae = () => {
       const c = u.value.displayedGraph.sidebar;
       c.nodeId = o.node.id;
-    }, Pe = async (c) => {
+    }, De = async (c) => {
       switch (c) {
         case "edit":
-          fe();
+          ve();
           break;
         case "delete":
-          v.value.removeNode(o.node);
+          p.value.removeNode(o.node);
           break;
         case "rename":
-          L.value = o.node.title, S.value = !0, await ft(), N.value?.focus();
+          G.value = o.node.title, I.value = !0, await bt(), N.value?.focus();
           break;
         case "editSubgraph":
-          C(o.node.template);
+          _(o.node.template);
           break;
       }
+    }, fe = () => {
+      a.value.title = G.value, I.value = !1;
     }, ge = () => {
-      a.value.title = L.value, S.value = !1;
-    }, be = () => {
-      w.value && u.value.hooks.renderNode.execute({ node: o.node, el: w.value });
+      g.value && u.value.hooks.renderNode.execute({ node: o.node, el: g.value });
     }, Fe = (c) => {
-      m.value = !0, y = o.node.width, x = c.clientX, c.preventDefault();
-    }, ye = (c) => {
-      a.value.state && (a.value.state.integrated = c, l("update"));
+      y.value = !0, f = o.node.width, O = c.clientX, c.preventDefault();
+    }, be = (c) => {
+      a.value.state && (a.value.state.integrated = c, r("update"));
     }, _e = (c) => {
-      if (!m.value) return;
-      const g = c.clientX - x, h = y + g / v.value.scaling, We = u.value.settings.nodes.minWidth, Xe = u.value.settings.nodes.maxWidth;
-      a.value.width = Math.max(We, Math.min(Xe, h));
-    }, Ce = () => {
-      m.value = !1;
+      if (!y.value) return;
+      const C = c.clientX - O, v = f + C / p.value.scaling, We = u.value.settings.nodes.minWidth, Xe = u.value.settings.nodes.maxWidth;
+      a.value.width = Math.max(We, Math.min(Xe, v));
+    }, ye = () => {
+      y.value = !1;
     };
-    return re(() => {
-      be(), window.addEventListener("mousemove", _e), window.addEventListener("mouseup", Ce);
-    }), Ee(be), vt(() => {
-      window.removeEventListener("mousemove", _e), window.removeEventListener("mouseup", Ce);
-    }), (c, g) => (i(), r("div", {
+    return ie(() => {
+      ge(), window.addEventListener("mousemove", _e), window.addEventListener("mouseup", ye);
+    }), $e(ge), ft(() => {
+      window.removeEventListener("mousemove", _e), window.removeEventListener("mouseup", ye);
+    }), (c, C) => (i(), d("div", {
       id: a.value.id,
       ref_key: "el",
-      ref: w,
-      class: R([p.value, "baklava-node"]),
+      ref: g,
+      class: P([h.value, "baklava-node"]),
       "data-node-type": a.value.type,
-      style: de(Ue.value),
-      onPointerdown: ve
+      style: re(Le.value),
+      onPointerdown: he
     }, [
-      _(u).settings.nodes.resizable ? (i(), r("div", {
+      k(u).settings.nodes.resizable ? (i(), d("div", {
         key: 0,
         class: "__resize-handle",
         onMousedown: Fe
-      }, null, 32)) : I("", !0),
-      d("div", {
+      }, null, 32)) : x("", !0),
+      l("div", {
         class: "__title",
-        onPointerdown: P(Ae, ["self", "stop"]),
-        onContextmenu: P(me, ["prevent"])
+        onPointerdown: F(Ue, ["self", "stop"]),
+        onContextmenu: F(me, ["prevent"])
       }, [
-        a.value.inputs._node ? (i(), O(xe, {
+        a.value.inputs._code ? (i(), E(we, {
           key: 0,
           node: a.value,
-          intf: a.value.inputs._node,
+          intf: a.value.inputs._code,
+          title: a.value.inputs._code.value,
           class: "--input",
           "data-interface-type": "node",
           style: { "flex-grow": "0" }
-        }, null, 8, ["node", "intf"])) : I("", !0),
-        S.value ? te((i(), r("input", {
+        }, null, 8, ["node", "intf", "title"])) : x("", !0),
+        I.value ? ee((i(), d("input", {
           key: 2,
           ref_key: "renameInputEl",
           ref: N,
-          "onUpdate:modelValue": g[4] || (g[4] = (h) => L.value = h),
+          "onUpdate:modelValue": C[4] || (C[4] = (v) => G.value = v),
           class: "baklava-input",
           placeholder: "Node Name",
           style: { "flex-grow": "1" },
           type: "text",
-          onBlur: ge,
-          onKeydown: oe(ge, ["enter"])
+          onBlur: fe,
+          onKeydown: ne(fe, ["enter"])
         }, null, 544)), [
-          [se, L.value]
-        ]) : (i(), r(E, { key: 1 }, [
-          d("div", zs, [
-            a.value.idx > -1 ? (i(), r("span", js, j(a.value.idx + 1) + " - ", 1)) : I("", !0),
-            mt(j(a.value.title), 1)
+          [te, G.value]
+        ]) : (i(), d(S, { key: 1 }, [
+          l("div", Gs, [
+            a.value.idx > -1 ? (i(), d("span", Ls, j(a.value.idx + 1) + " - ", 1)) : x("", !0),
+            gt(j(a.value.title), 1)
           ]),
-          d("div", Ls, [
-            a.value.subgraph ? I("", !0) : (i(), r(E, { key: 0 }, [
-              a.value.state.lockCode ? (i(), O(_(gs), {
+          l("div", Rs, [
+            a.value.isCodeNode ? (i(), d(S, { key: 0 }, [
+              a.value.state.lockCode ? (i(), E(k(_s), {
                 key: 0,
                 class: "--clickable mx-1",
-                onClick: g[0] || (g[0] = (h) => a.value.lockCode = !1)
-              })) : I("", !0),
-              a.value.state.integrated ? (i(), O(_(Ht), {
+                onClick: C[0] || (C[0] = (v) => a.value.lockCode = !1)
+              })) : x("", !0),
+              a.value.state.integrated ? (i(), E(k(Ft), {
                 key: 1,
                 class: "--clickable mx-1",
-                onClick: g[1] || (g[1] = (h) => ye(!1))
-              })) : (i(), O(_(Os), {
+                onClick: C[1] || (C[1] = (v) => be(!1))
+              })) : (i(), E(k(Es), {
                 key: 2,
                 class: "--clickable mx-1",
-                onClick: g[2] || (g[2] = (h) => ye(!0))
+                onClick: C[2] || (C[2] = (v) => be(!0))
               })),
-              !_(u).displayedGraph.sidebar.visible && _(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), O(_(hs), {
+              !k(u).displayedGraph.sidebar.visible && k(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), E(k(vs), {
                 key: 3,
                 class: "--clickable mx-1",
-                onClick: fe
-              })) : _(u).displayedGraph.sidebar.visible && _(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), O(_(as), {
+                onClick: ve
+              })) : k(u).displayedGraph.sidebar.visible && k(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), E(k(rs), {
                 key: 4,
                 class: "--clickable mx-1",
-                onClick: He
-              })) : (i(), O(_(ls), {
+                onClick: Ae
+              })) : (i(), E(k(cs), {
                 key: 5,
                 class: "--clickable mx-1",
-                onClick: De
+                onClick: He
               }))
-            ], 64)),
-            z(_(Xt), {
+            ], 64)) : x("", !0),
+            z(k(Kt), {
               class: "--clickable mx-1",
               onClick: me
             }),
-            z(_(t), {
-              modelValue: f.value,
-              "onUpdate:modelValue": g[3] || (g[3] = (h) => f.value = h),
+            z(k(t), {
+              modelValue: m.value,
+              "onUpdate:modelValue": C[3] || (C[3] = (v) => m.value = v),
               x: 0,
               y: 0,
-              items: k.value,
-              onClick: Pe
+              items: w.value,
+              onClick: De
             }, null, 8, ["modelValue", "items"])
           ])
         ], 64)),
-        a.value.outputs._node ? (i(), O(xe, {
+        a.value.outputs._code ? (i(), E(we, {
           key: 3,
           node: a.value,
-          intf: a.value.outputs._node,
+          intf: a.value.outputs._code,
           class: "--output",
+          title: a.value.outputs._code.value,
           "data-interface-type": "node"
-        }, null, 8, ["node", "intf"])) : I("", !0)
+        }, null, 8, ["node", "intf", "title"])) : x("", !0)
       ], 32),
-      d("div", {
-        class: R(["__content", M.value]),
-        onKeydown: g[5] || (g[5] = oe(P(() => {
+      l("div", {
+        class: P(["__content", M.value]),
+        onKeydown: C[5] || (C[5] = ne(F(() => {
         }, ["stop"]), ["delete"])),
-        onContextmenu: g[6] || (g[6] = P(() => {
+        onContextmenu: C[6] || (C[6] = F(() => {
         }, ["prevent"]))
       }, [
-        d("div", Us, [
-          (i(!0), r(E, null, D(Ge.value, (h) => (i(), r(E, {
-            key: h.id
+        l("div", Ps, [
+          (i(!0), d(S, null, D(Pe.value, (v) => (i(), d(S, {
+            key: v.id
           }, [
-            a.value.state?.hidden ? (i(), r("div", Rs, [
-              h.port ? (i(), r("div", {
+            a.value.state?.hidden ? (i(), d("div", Us, [
+              v.port ? (i(), d("div", {
                 key: 0,
-                id: h.id,
-                title: h.name,
+                id: v.id,
+                title: v.name,
                 class: "baklava-node-interface --output --connected"
-              }, [...g[7] || (g[7] = [
-                d("div", { class: "__port" }, null, -1)
-              ])], 8, Gs)) : I("", !0)
-            ])) : W(c.$slots, "nodeInterface", {
+              }, [...C[7] || (C[7] = [
+                l("div", { class: "__port" }, null, -1)
+              ])], 8, Hs)) : x("", !0)
+            ])) : X(c.$slots, "nodeInterface", {
               key: 1,
               type: "output",
               node: a.value,
-              intf: h
+              intf: v
             }, () => [
-              z(_(n), {
+              z(k(n), {
                 node: a.value,
-                intf: h,
-                title: h.type
+                intf: v,
+                title: v.type
               }, null, 8, ["node", "intf", "title"])
             ])
           ], 64))), 128))
         ]),
-        d("div", As, [
-          (i(!0), r(E, null, D(Re.value, (h) => (i(), r(E, {
-            key: h.id
+        l("div", As, [
+          (i(!0), d(S, null, D(Re.value, (v) => (i(), d(S, {
+            key: v.id
           }, [
-            a.value.state?.hidden ? (i(), r("div", Ds, [
-              h.port ? (i(), r("div", {
+            a.value.state?.hidden ? (i(), d("div", Ds, [
+              v.port ? (i(), d("div", {
                 key: 0,
-                id: h.id,
-                title: h.name,
+                id: v.id,
+                title: v.name,
                 class: "baklava-node-interface --input --connected"
-              }, [...g[8] || (g[8] = [
-                d("div", { class: "__port" }, null, -1)
-              ])], 8, Hs)) : I("", !0)
-            ])) : W(c.$slots, "nodeInterface", {
+              }, [...C[8] || (C[8] = [
+                l("div", { class: "__port" }, null, -1)
+              ])], 8, Fs)) : x("", !0)
+            ])) : X(c.$slots, "nodeInterface", {
               key: 1,
               node: a.value,
-              intf: h,
+              intf: v,
               type: "input"
             }, () => [
-              z(_(n), {
+              z(k(n), {
                 node: a.value,
-                intf: h,
-                title: h.type
+                intf: v,
+                title: v.type
               }, null, 8, ["node", "intf", "title"])
             ])
           ], 64))), 128))
         ])
       ], 34)
-    ], 46, Vs));
+    ], 46, js));
   }
-}), Fs = ["title"], Ws = {
+}), Xs = ["title"], Ys = {
   key: 0,
   class: "__label"
-}, Ie = /* @__PURE__ */ U({
+}, Ie = /* @__PURE__ */ R({
   __name: "Checkbox",
   props: {
     disabled: { type: Boolean },
@@ -1309,152 +1439,156 @@ const Bs = /* @__PURE__ */ $(Es, [["render", Ss]]), Vs = ["id", "data-node-type"
   emits: ["update:modelValue"],
   setup(s, { emit: e }) {
     const t = e;
-    return (n, o) => (i(), r("div", {
-      class: R(["baklava-checkbox", { "--checked": s.inversed ? !s.modelValue : s.modelValue, "--disabled": s.disabled }]),
+    return (n, o) => (i(), d("div", {
+      class: P(["baklava-checkbox", { "--checked": s.inversed ? !s.modelValue : s.modelValue, "--disabled": s.disabled }]),
       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", Ws, j(s.name), 1)) : I("", !0)
-    ], 10, Fs));
+      s.name ? (i(), d("div", Ys, j(s.name), 1)) : x("", !0)
+    ], 10, Xs));
   }
-}), Xs = { class: "__header" }, Ys = { class: "__node-name" }, qs = { class: "__interfaces" }, Js = { class: "__inputs" }, Qs = { style: { display: "flex" } }, Ks = { class: "__outputs" }, Zs = {
+}), Ks = { class: "__header" }, qs = { class: "__node-name" }, Js = { class: "__interfaces" }, Qs = { class: "__inputs" }, Zs = { style: { display: "flex" } }, en = { class: "__outputs" }, tn = {
   key: 0,
   class: "__interface"
-}, en = { style: { display: "flex" } }, tn = /* @__PURE__ */ U({
+}, sn = { style: { display: "flex" } }, nn = /* @__PURE__ */ R({
   __name: "CodeGraphSidebar",
   setup(s) {
-    const { viewModel: e } = Y(), { graph: t } = ie(), n = B(null), o = Te(e.value.settings.sidebar, "width"), a = b(() => e.value.settings.sidebar.resizable);
-    let l = 0, u = 0;
-    const v = b(() => {
-      const f = t.value.sidebar.nodeId;
-      return t.value.nodes.find((k) => k.id === f);
-    }), C = b(() => v.value), w = b(() => ({
+    const { viewModel: e } = K(), { graph: t } = ae(), n = V(null), o = Oe(e.value.settings.sidebar, "width"), a = b(() => e.value.settings.sidebar.resizable);
+    let r = 0, u = 0;
+    const p = b(() => {
+      const m = t.value.sidebar.nodeId;
+      return t.value.nodes.find((w) => w.id === m);
+    }), _ = b(() => p.value), g = b(() => ({
       width: `${o.value}px`
-    })), S = b(() => C.value ? Object.values(C.value.inputs).filter((f) => f.displayInSidebar && f.component) : []), L = b(() => C.value ? Object.values(C.value.outputs).filter((f) => f.displayInSidebar && f.component) : []), N = () => {
+    })), I = b(() => _.value ? Object.values(_.value.inputs).filter((m) => m.displayInSidebar && m.component) : []), G = b(() => _.value ? Object.values(_.value.outputs).filter((m) => m.displayInSidebar && m.component) : []), N = () => {
       t.value.sidebar.visible = !1;
-    }, m = () => {
-      v.value?.events.update.emit(null);
-    }, y = (f) => {
-      l = o.value, u = f.clientX, window.addEventListener("mousemove", x), window.addEventListener(
+    }, y = () => {
+      p.value?.events.update.emit(null);
+    }, f = (m) => {
+      r = o.value, u = m.clientX, window.addEventListener("mousemove", O), window.addEventListener(
         "mouseup",
         () => {
-          window.removeEventListener("mousemove", x);
+          window.removeEventListener("mousemove", O);
         },
         { once: !0 }
       );
-    }, x = (f) => {
-      const k = n.value?.parentElement?.getBoundingClientRect().width ?? 500, p = f.clientX - u;
-      let M = l - p;
-      M < 300 ? M = 300 : M > 0.9 * k && (M = 0.9 * k), o.value = M;
+    }, O = (m) => {
+      const w = n.value?.parentElement?.getBoundingClientRect().width ?? 500, h = m.clientX - u;
+      let M = r - h;
+      M < 300 ? M = 300 : M > 0.9 * w && (M = 0.9 * w), o.value = M;
     };
-    return (f, k) => (i(), r("div", {
-      class: R([{ "--open": _(t).sidebar.visible }, "baklava-sidebar"]),
-      style: de(w.value),
+    return (m, w) => (i(), d("div", {
+      class: P([{ "--open": k(t).sidebar.visible }, "baklava-sidebar"]),
+      style: re(g.value),
       ref_key: "el",
       ref: n
     }, [
-      a.value ? (i(), r("div", {
+      a.value ? (i(), d("div", {
         key: 0,
         class: "__resizer",
-        onMousedown: y
-      }, null, 32)) : I("", !0),
-      v.value ? (i(), r(E, { key: 1 }, [
-        d("div", Xs, [
-          d("button", {
+        onMousedown: f
+      }, null, 32)) : x("", !0),
+      p.value ? (i(), d(S, { key: 1 }, [
+        l("div", Ks, [
+          l("button", {
             tabindex: "-1",
             class: "__close",
             onClick: N
           }, "×"),
-          d("div", Ys, [
-            d("b", null, j(v.value.title), 1)
+          l("div", qs, [
+            l("b", null, j(p.value.title), 1)
           ])
         ]),
-        d("div", qs, [
-          d("div", Js, [
-            (i(!0), r(E, null, D(S.value, (p) => (i(), r("div", {
-              key: p.id,
+        l("div", Js, [
+          l("div", Qs, [
+            (i(!0), d(S, null, D(I.value, (h) => (i(), d("div", {
+              key: h.id,
               class: "__interface"
             }, [
-              d("div", Qs, [
+              l("div", Zs, [
                 z(Ie, {
-                  modelValue: p.hidden,
+                  modelValue: h.hidden,
                   "onUpdate:modelValue": [
-                    (M) => p.hidden = M,
-                    k[0] || (k[0] = () => v.value?.events.update.emit(null))
+                    (M) => h.hidden = M,
+                    w[0] || (w[0] = () => p.value?.events.update.emit(null))
                   ],
-                  disabled: !p.optional,
+                  disabled: !h.optional,
                   inversed: "",
                   style: { "padding-right": "8px" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
-                (i(), O(we(p.component), {
-                  modelValue: p.value,
-                  "onUpdate:modelValue": (M) => p.value = M,
-                  node: v.value,
-                  intf: p,
+                (i(), E(ke(h.component), {
+                  modelValue: h.value,
+                  "onUpdate:modelValue": (M) => h.value = M,
+                  node: p.value,
+                  intf: h,
                   style: { width: "100%" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "node", "intf"]))
               ])
             ]))), 128))
           ]),
-          d("div", Ks, [
-            C.value && C.value.state ? (i(), r("div", Zs, [
-              k[3] || (k[3] = d("label", null, "Variable name", -1)),
-              te(d("input", {
-                "onUpdate:modelValue": k[1] || (k[1] = (p) => C.value.state.variableName = p),
+          l("div", en, [
+            _.value && _.value.state ? (i(), d("div", tn, [
+              w[3] || (w[3] = l("label", null, "Variable name", -1)),
+              ee(l("input", {
+                "onUpdate:modelValue": w[1] || (w[1] = (h) => _.value.state.variableName = h),
                 type: "text",
                 class: "baklava-input",
                 title: "Variable name",
-                onBlur: m,
-                onKeydown: oe(m, ["enter"])
+                onBlur: y,
+                onKeydown: ne(y, ["enter"])
               }, null, 544), [
-                [se, C.value.state.variableName]
+                [te, _.value.state.variableName]
               ])
-            ])) : I("", !0),
-            (i(!0), r(E, null, D(L.value, (p) => (i(), r("div", {
-              key: p.id,
+            ])) : x("", !0),
+            (i(!0), d(S, null, D(G.value, (h) => (i(), d("div", {
+              key: h.id,
               class: "__interface"
             }, [
-              d("div", en, [
+              l("div", sn, [
                 z(Ie, {
-                  modelValue: p.hidden,
+                  modelValue: h.hidden,
                   "onUpdate:modelValue": [
-                    (M) => p.hidden = M,
-                    k[2] || (k[2] = () => v.value?.events.update.emit(null))
+                    (M) => h.hidden = M,
+                    w[2] || (w[2] = () => p.value?.events.update.emit(null))
                   ],
-                  disabled: !p.optional,
+                  disabled: !h.optional,
                   inversed: "",
                   style: { "padding-right": "8px" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
-                (i(), O(we(p.component), {
-                  modelValue: p.value,
-                  "onUpdate:modelValue": (M) => p.value = M,
-                  node: v.value,
-                  intf: p,
+                (i(), E(ke(h.component), {
+                  modelValue: h.value,
+                  "onUpdate:modelValue": (M) => h.value = M,
+                  node: p.value,
+                  intf: h,
                   style: { width: "100%" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "node", "intf"]))
               ])
             ]))), 128))
           ])
         ]),
-        W(f.$slots, "codeEditor", { node: v.value })
-      ], 64)) : I("", !0)
+        X(m.$slots, "codeEditor", { node: p.value })
+      ], 64)) : x("", !0)
     ], 6));
   }
-}), sn = U({
+});
+function on(s, e) {
+  return Object.fromEntries(Object.entries(s).filter(e));
+}
+const an = R({
   props: {
     type: {
       type: String,
@@ -1466,150 +1600,151 @@ const Bs = /* @__PURE__ */ $(Es, [["render", Ss]]), Vs = ["id", "data-node-type"
     }
   },
   setup(s) {
-    const { viewModel: e } = Y(), { switchGraph: t } = ie(), n = B(!1), o = b(() => s.type.startsWith(ne));
+    const { viewModel: e } = K(), { switchGraph: t } = ae(), n = V(!1), o = b(() => s.type.startsWith(se));
     return { showContextMenu: n, hasContextMenu: o, contextMenuItems: [
       { label: "Edit Subgraph", value: "editSubgraph" },
       { label: "Delete Subgraph", value: "deleteSubgraph" }
     ], openContextMenu: () => {
       n.value = !0;
-    }, onContextMenuClick: (v) => {
-      const C = s.type.substring(ne.length), w = e.value.editor.graphTemplates.find((S) => S.id === C);
-      if (w)
-        switch (v) {
+    }, onContextMenuClick: (p) => {
+      const _ = s.type.substring(se.length), g = e.value.editor.graphTemplates.find((I) => I.id === _);
+      if (g)
+        switch (p) {
           case "editSubgraph":
-            t(w);
+            t(g);
             break;
           case "deleteSubgraph":
-            e.value.editor.removeGraphTemplate(w);
+            e.value.editor.removeGraphTemplate(g);
             break;
         }
     } };
   }
-}), nn = ["data-node-type"], on = { class: "__title" }, an = { class: "__title-label" };
-function rn(s, e, t, n, o, a) {
-  return i(), r("div", {
+}), rn = ["data-node-type"], dn = { class: "__title" }, ln = { class: "__title-label" };
+function un(s, e, t, n, o, a) {
+  return i(), d("div", {
     class: "baklava-node --palette",
     "data-node-type": s.type
   }, [
-    d("div", on, [
-      d("div", an, j(s.title), 1)
+    l("div", dn, [
+      l("div", ln, j(s.title), 1)
     ])
-  ], 8, nn);
+  ], 8, rn);
 }
-const Ne = /* @__PURE__ */ $(sn, [["render", rn]]), dn = {
+const xe = /* @__PURE__ */ $(an, [["render", un]]), cn = {
   class: "baklava-node --palette",
   style: { "margin-top": "-20px", "margin-bottom": "20px" }
-}, ln = {
+}, pn = {
   key: 0,
   style: { display: "flex", "justify-content": "space-between" }
-}, un = ["onClick"], cn = {
+}, hn = ["onClick"], mn = {
   key: 0,
   style: { margin: "auto 0", "font-size": "12px" }
-}, pn = /* @__PURE__ */ U({
+}, vn = /* @__PURE__ */ R({
   __name: "CodeNodePalette",
   setup(s) {
-    const { viewModel: e } = Y(), { x: t, y: n } = wt(), { transform: o } = rt(), a = dt(e), l = gt("editorEl"), u = B(""), v = B(null), C = () => u.value ? a.value.filter(
+    const { viewModel: e } = K(), { x: t, y: n } = xt(), { transform: o } = ct(), a = pt(e), r = _t("editorEl"), u = V(""), p = V(null), _ = () => u.value ? a.value.filter(
       (N) => N.name.toLowerCase().includes(u.value.toLowerCase()) || Object.values(N.nodeTypes).some(
-        (m) => m.title.toLowerCase().includes(u.value.toLowerCase())
+        (y) => y.title.toLowerCase().includes(u.value.toLowerCase())
       )
-    ) : a.value, w = (N) => u.value ? Object.values(N).filter(
-      (m) => m.category.toLowerCase().includes(u.value.toLowerCase()) || m.title.toLowerCase().includes(u.value.toLowerCase())
-    ) : Object.values(N), S = b(() => {
-      if (!v.value || !l?.value) return {};
-      const { left: N, top: m } = l.value.getBoundingClientRect();
+    ) : a.value, g = (N) => u.value ? on(N, (y) => {
+      const f = y[1];
+      return f.category.includes(u.value.toLowerCase()) || f.title?.toLowerCase().includes(u.value.toLowerCase());
+    }) : N, I = b(() => {
+      if (!p.value || !r?.value) return {};
+      const { left: N, top: y } = r.value.getBoundingClientRect();
       return {
-        top: `${n.value - m}px`,
+        top: `${n.value - y}px`,
         left: `${t.value - N}px`
       };
-    }), L = (N, m) => {
-      v.value = {
+    }), G = (N, y) => {
+      p.value = {
         type: N,
-        nodeInformation: m
+        nodeInformation: y
       };
-      const y = () => {
-        const x = A(new m.type());
-        e.value.displayedGraph.addNode(x);
-        const f = l.value.getBoundingClientRect(), [k, p] = o(t.value - f.left, n.value - f.top);
-        x.position.x = k, x.position.y = p, v.value = null, document.removeEventListener("pointerup", y);
+      const f = () => {
+        const O = q(new y.type());
+        e.value.displayedGraph.addNode(O);
+        const m = r.value.getBoundingClientRect(), [w, h] = o(t.value - m.left, n.value - m.top);
+        O.position.x = w, O.position.y = h, p.value = null, document.removeEventListener("pointerup", f);
       };
-      document.addEventListener("pointerup", y);
+      document.addEventListener("pointerup", f);
     };
-    return (N, m) => (i(), r(E, null, [
-      d("div", {
-        class: R([{ "--open": _(e).settings.palette.enabled }, "baklava-node-palette"]),
-        onContextmenu: m[1] || (m[1] = P(() => {
+    return (N, y) => (i(), d(S, null, [
+      l("div", {
+        class: P([{ "--open": k(e).settings.palette.enabled }, "baklava-node-palette"]),
+        onContextmenu: y[1] || (y[1] = F(() => {
         }, ["stop", "prevent"]))
       }, [
-        d("div", dn, [
-          te(d("input", {
-            "onUpdate:modelValue": m[0] || (m[0] = (y) => u.value = y),
+        l("div", cn, [
+          ee(l("input", {
+            "onUpdate:modelValue": y[0] || (y[0] = (f) => u.value = f),
             type: "text",
             class: "baklava-input",
             title: "Filter nodes",
-            onKeyup: C
+            onKeyup: _
           }, null, 544), [
-            [se, u.value]
+            [te, u.value]
           ])
         ]),
-        (i(!0), r(E, null, D(C(), (y) => (i(), r("section", {
-          key: y.name
+        (i(!0), d(S, null, D(_(), (f) => (i(), d("section", {
+          key: f.name
         }, [
-          y.name !== "default" ? (i(), r("h3", ln, [
-            d("div", {
-              onClick: (x) => u.value = y.name,
+          f.name !== "default" ? (i(), d("h3", pn, [
+            l("div", {
+              onClick: (O) => u.value = f.name,
               style: { cursor: "pointer" }
-            }, j(y.name), 9, un),
-            w(y.nodeTypes).length < Object.values(y.nodeTypes).length ? (i(), r("div", cn, " ( " + j(w(y.nodeTypes).length) + " / " + j(Object.values(y.nodeTypes).length) + " ) ", 1)) : I("", !0)
-          ])) : I("", !0),
-          (i(!0), r(E, null, D(w(y.nodeTypes), (x) => (i(), O(Ne, {
-            key: x.type,
-            type: x.type,
-            title: x.title,
-            onPointerdown: (f) => L(x.type, x)
+            }, j(f.name), 9, hn),
+            Object.keys(g(f.nodeTypes)).length < Object.values(f.nodeTypes).length ? (i(), d("div", mn, " ( " + j(Object.keys(g(f.nodeTypes)).length) + " / " + j(Object.values(f.nodeTypes).length) + " ) ", 1)) : x("", !0)
+          ])) : x("", !0),
+          (i(!0), d(S, null, D(g(f.nodeTypes), (O, m) => (i(), E(xe, {
+            key: m,
+            type: m,
+            title: O.title,
+            onPointerdown: (w) => G(m, O)
           }, null, 8, ["type", "title", "onPointerdown"]))), 128))
         ]))), 128))
       ], 34),
-      z(bt, { name: "fade" }, {
-        default: F(() => [
-          v.value ? (i(), r("div", {
+      z(yt, { name: "fade" }, {
+        default: W(() => [
+          p.value ? (i(), d("div", {
             key: 0,
             class: "baklava-dragged-node",
-            style: de(S.value)
+            style: re(I.value)
           }, [
-            z(Ne, {
-              type: v.value.type,
-              title: v.value.nodeInformation.title
+            z(xe, {
+              type: p.value.type,
+              title: p.value.nodeInformation.title
             }, null, 8, ["type", "title"])
-          ], 4)) : I("", !0)
+          ], 4)) : x("", !0)
         ]),
         _: 1
       })
     ], 64));
   }
-}), jn = /* @__PURE__ */ U({
+}), Pn = /* @__PURE__ */ R({
   __name: "CodeGraphEditor",
   props: {
     viewModel: {}
   },
   setup(s) {
-    const t = Te(s, "viewModel"), n = (o) => o.events.update.emit(null);
-    return re(() => {
+    const t = Oe(s, "viewModel"), n = (o) => o.events.update.emit(null);
+    return ie(() => {
       t.value.subscribe(), t.value.engine.start();
-    }), yt(() => {
+    }), Ct(() => {
       t.value.unsubscribe(), t.value.engine.stop();
-    }), (o, a) => (i(), O(_(lt), { "view-model": t.value }, {
-      palette: F(() => [
-        z(pn)
+    }), (o, a) => (i(), E(k(ht), { "view-model": t.value }, {
+      palette: W(() => [
+        z(vn)
       ]),
-      node: F((l) => [
-        z(Ps, kt(l, {
-          onUpdate: (u) => n(l.node)
+      node: W((r) => [
+        z(Ws, It(r, {
+          onUpdate: (u) => n(r.node)
         }), null, 16, ["onUpdate"])
       ]),
-      sidebar: F((l) => [
-        z(tn, _t(Ct(l)), {
-          codeEditor: F(({ node: u }) => [
-            W(o.$slots, "sidebarCodeEditor", { node: u })
+      sidebar: W((r) => [
+        z(nn, kt(wt(r)), {
+          codeEditor: W(({ node: u }) => [
+            X(o.$slots, "sidebarCodeEditor", { node: u })
           ]),
           _: 3
         }, 16)
@@ -1618,147 +1753,138 @@ const Ne = /* @__PURE__ */ $(sn, [["render", rn]]), dn = {
     }, 8, ["view-model"]));
   }
 });
-function Ln(s) {
-  const e = ut(s?.existingEditor);
-  e.code = s?.code ? new s.code(e) : new Lt(e), hn(e);
-  const t = {};
-  return Object.keys(Q).forEach((n) => {
-    t[n] = typeof Q[n] == "object" ? { ...e.settings[n], ...Q[n] } : Q[n];
-  }), e.settings = A({ ...e.settings, ...t }), e.settings.nodes.defaultWidth = 350, e.state = A({
+function Un(s) {
+  const e = mt(s?.existingEditor);
+  return e.code = s?.code ? new s.code(e) : new Rt(e), e.editor.addGraphTemplate = function(t) {
+    if (this.events.beforeAddGraphTemplate.emit(t).prevented)
+      return;
+    this._graphTemplates.push(t), this.graphTemplateEvents.addTarget(t.events), this.graphTemplateHooks.addTarget(t.hooks);
+    const n = Lt(t);
+    this.registerNodeType(n, { category: "Subgraphs", title: t.name }), this.events.addGraphTemplate.emit(t);
+  }, fn(e), gn(e), e.state = q({
     modules: {},
     token: null
   }), e.init = () => {
-    e.unsubscribe(), e.engine = new ct(e.editor);
-  }, e.loadEditor = (n) => {
-    e.engine?.pause(), e.code.clear(), e.editor.load(n), e.commandHandler.executeCommand(Z.CLEAR_CLIPBOARD_COMMAND), e.commandHandler.executeCommand(Z.CLEAR_HISTORY_COMMAND), e.engine?.resume(), e.engine?.runOnce(void 0);
+    e.unsubscribe(), e.engine = new vt(e.editor);
+  }, e.loadEditor = (t) => {
+    e.engine?.pause(), e.code.clear(), e.editor.load(t), e.commandHandler.executeCommand(Z.CLEAR_CLIPBOARD_COMMAND), e.commandHandler.executeCommand(Z.CLEAR_HISTORY_COMMAND), e.engine?.resume(), e.engine?.runOnce(void 0);
   }, e.newGraph = () => {
-    e.engine?.pause(), e.code.clear(), e.editor.graph.id = Se(), e.engine?.resume(), e.engine?.runOnce(void 0);
+    e.engine?.pause(), e.code.clear(), e.editor.graph.id = Te(), e.engine?.resume(), e.engine?.runOnce(void 0);
   }, e.subscribe = () => {
     e.state.token && e.unsubscribe();
-    const n = Symbol(), o = e.displayedGraph;
-    o.events.addNode.subscribe(n, (a) => {
-      a.code = e.code;
-    }), o.events.addConnection.subscribe(n, (a) => {
-      e.code.findNodeById(a.to.nodeId)?.onConnected(), e.code.findNodeById(a.from.nodeId)?.onConnected();
-    }), o.events.removeConnection.subscribe(n, (a) => {
-      e.code.findNodeById(a.to.nodeId)?.onUnconnected(), e.code.findNodeById(a.from.nodeId)?.onUnconnected();
-    }), e.engine.events.beforeRun.subscribe(n, () => {
+    const t = Symbol(), n = e.displayedGraph;
+    n.events.addNode.subscribe(t, (o) => {
+      !o.subgraph && o.isCodeNode && (o.code = e.code);
+    }), n.events.addConnection.subscribe(t, (o) => {
+      const a = e.code.findNodeById(o.to.nodeId);
+      a && a.isCodeNode && a.onConnected();
+      const r = e.code.findNodeById(o.from.nodeId);
+      r && r.isCodeNode && r.onConnected();
+    }), n.events.removeConnection.subscribe(t, (o) => {
+      const a = e.code.findNodeById(o.to.nodeId);
+      a && a.isCodeNode && a.onUnconnected();
+      const r = e.code.findNodeById(o.from.nodeId);
+      r && r.isCodeNode && r.onUnconnected();
+    }), e.engine.events.beforeRun.subscribe(t, () => {
       e.engine.pause(), e.code && (e.code.updateCodeNodes(), e.code.sortNodes(), e.code.updateCodeTemplates(), e.code.resetInputInterfaceScript()), e.engine.resume();
-    }), e.engine.events.beforeNodeCalculation.subscribe(n, (a) => {
+    }), e.engine.events.beforeNodeCalculation.subscribe(t, (o) => {
       e.engine.pause();
-      const l = a.node;
-      l.isCodeNode && (l.updateOutputNames(), l.updateConnectedInputInterfaces()), e.engine.resume();
-    }), e.engine.events.afterRun.subscribe(n, (a) => {
-      e.engine.pause(), pt(a, e.editor), e.code && (e.code.renderNodeCodes(), e.code.renderCode()), e.engine.resume();
-    }), e.state.token = n;
+      const a = o.node;
+      a.isCodeNode && (a.updateOutputNames(), a.updateConnectedInputInterfaces()), e.engine.resume();
+    }), e.engine.events.afterRun.subscribe(t, () => {
+      e.engine.pause(), e.code && (e.code.renderNodeCodes(), e.code.renderCode()), e.engine.resume();
+    }), e.state.token = t;
   }, e.unsubscribe = () => {
     if (!e.state.token) return;
-    const n = e.state.token;
-    e.displayedGraph.events.addNode.unsubscribe(n), e.displayedGraph.events.addConnection.unsubscribe(n), e.engine.events.beforeRun.unsubscribe(n), e.engine.events.afterRun.unsubscribe(n), e.state.token = null;
+    const t = e.state.token;
+    e.displayedGraph.events.addNode.unsubscribe(t), e.displayedGraph.events.addConnection.unsubscribe(t), e.engine.events.beforeRun.unsubscribe(t), e.engine.events.beforeNodeCalculation.unsubscribe(t), e.engine.events.afterRun.unsubscribe(t), e.state.token = null;
   }, e;
 }
-const hn = (s) => {
+const fn = (s) => {
   const e = "TOGGLE_PALETTE";
   s.commandHandler.registerCommand(e, {
     execute: () => s.settings.palette.enabled = !s.settings.palette.enabled,
     canExecute: () => !0
+  }), s.settings.toolbar.commands.unshift({
+    command: e,
+    title: "Toggle palette",
+    // Tooltip text
+    icon: b(() => s.settings.palette.enabled ? Zt : ns)
   });
   const t = "CLEAR_ALL";
   s.commandHandler.registerCommand(t, {
     execute: () => s.code.clear(),
     canExecute: () => s.displayedGraph.nodes.length > 0
+  }), s.settings.toolbar.commands.push({
+    command: t,
+    title: "Clear all",
+    // Tooltip text
+    icon: b(() => zs)
   });
   const n = "TOGGLE_MINIMAP";
   s.commandHandler.registerCommand(n, {
     execute: () => s.settings.enableMinimap = !s.settings.enableMinimap,
     canExecute: () => s.displayedGraph.nodes.length > 1
-  }), s.settings.toolbar.commands = [
-    {
-      command: e,
-      title: "Toggle palette",
-      // Tooltip text
-      icon: b(() => s.settings.palette.enabled ? Qt : ts)
-    },
-    ...ht,
-    {
-      command: t,
-      title: "Clear all",
-      // Tooltip text
-      icon: Bs
-    },
-    {
-      command: n,
-      title: "Toggle minimap",
-      // Tooltip text
-      icon: b(() => s.settings.enableMinimap ? Is : Cs)
-    }
-  ];
-}, Q = {
-  enableMinimap: !1,
-  toolbar: {
-    enabled: !0
-  },
-  palette: {
-    enabled: !0
-  },
-  sidebar: {
-    enabled: !0,
-    resizable: !0,
-    width: 350
-  },
-  displayValueOnHover: !1
+  }), s.settings.toolbar.commands.push({
+    command: n,
+    title: "Toggle minimap",
+    // Tooltip text
+    icon: b(() => s.settings.enableMinimap ? Ms : ws)
+  });
+}, gn = (s) => {
+  s.settings.nodes.defaultWidth = 400;
 };
 export {
-  xt as AbstractCodeNode,
-  kn as CheckboxInterface,
-  Lt as Code,
-  jn as CodeGraphEditor,
-  Be as CodeNode,
-  J as CodeNodeInputInterface,
-  H as CodeNodeInterface,
-  le as CodeNodeInterfaceComponent,
-  Ot as CodeNodeOutputInterface,
-  Ht as CodeVariable,
-  Q as DEFAULT_SETTINGS,
-  Xt as DotsVertical,
+  Ee as AbstractCodeNode,
+  xn as CheckboxInterface,
+  Rt as Code,
+  Pn as CodeGraphEditor,
+  Se as CodeNode,
+  Q as CodeNodeInputInterface,
+  L as CodeNodeInterface,
+  de as CodeNodeInterfaceComponent,
+  Ge as CodeNodeOutputInterface,
+  Ft as CodeVariable,
+  Kt as DotsVertical,
   jt as DynamicCodeNode,
-  wn as IntegerInterface,
-  Qt as LayoutSidebarLeftCollapse,
-  ts as LayoutSidebarLeftExpand,
-  as as LayoutSidebarRight,
-  ls as LayoutSidebarRightCollapse,
-  hs as LayoutSidebarRightExpand,
-  xn as ListInputInterface,
-  gs as LockCode,
-  In as NumberInterface,
-  Cs as Schema,
-  Is as SchemaOff,
-  Nn as SelectInterface,
-  Mn as SliderInterface,
-  $n as TextInputInterface,
+  jn as GRAPH_NODE_TYPE_PREFIX,
+  Nn as IntegerInterface,
+  Zt as LayoutSidebarLeftCollapse,
+  ns as LayoutSidebarLeftExpand,
+  rs as LayoutSidebarRight,
+  cs as LayoutSidebarRightCollapse,
+  vs as LayoutSidebarRightExpand,
+  Mn as ListInputInterface,
+  _s as LockCode,
+  $n as NumberInterface,
+  ws as Schema,
+  Ms as SchemaOff,
+  On as SelectInterface,
+  Tn as SliderInterface,
+  En as TextInputInterface,
   zt as TextInputInterfaceComponent,
-  On as TextareaInputInterface,
-  Os as TransitionBottom,
-  Bs as TrashOff,
-  En as TupleInputInterface,
-  Cn as addDefaultInterfaceTypes,
-  hn as addToolbarCommands,
-  ze as booleanType,
-  Tn as defineCodeNode,
-  Sn as defineDynamicCodeNode,
-  $t as dictType,
-  It as formatInputs,
-  ae as getCodeNodes,
-  Bn as getPositionAtColumn,
-  Vn as getPositionBeforeNode,
-  je as listType,
-  Ve as loadNodeState,
-  X as nodeType,
-  ue as numberType,
-  Nt as saveNodeState,
-  _n as setOptional,
-  ce as stringType,
-  zn as transferCodeScript,
-  Le as tupleType,
-  Ln as useCodeGraph
+  Sn as TextareaInputInterface,
+  Es as TransitionBottom,
+  zs as TrashOff,
+  Bn as TupleInputInterface,
+  In as addDefaultInterfaceTypes,
+  fn as addToolbarCommands,
+  Ve as booleanType,
+  Lt as createCodeGraphNodeType,
+  Vn as defineCodeNode,
+  zn as defineDynamicCodeNode,
+  Ot as dictType,
+  Nt as formatInputs,
+  oe as getCodeNodes,
+  Ln as getPositionAtColumn,
+  Rn as getPositionBeforeNode,
+  ze as listType,
+  Be as loadNodeState,
+  U as nodeType,
+  le as numberType,
+  Mt as saveNodeState,
+  ue as stringType,
+  je as tupleType,
+  gn as updateSettings,
+  Un as useCodeGraph
 };