@babsey/code-graph 0.3.2 → 0.4.1

package/dist/code-graph.js

@@ -1,23 +1,24 @@
-import Z from "mustache";
-import { reactive as D, defineComponent as F, createElementBlock as p, openBlock as d, toDisplayString as G, markRaw as z, computed as O, createElementVNode as u, withDirectives as de, vModelText as le, createStaticVNode as se, toRef as Be, onMounted as fe, onBeforeUnmount as ze, watch as He, createBlock as j, unref as w, withCtx as ee, createVNode as L, normalizeProps as pt, guardReactiveProps as ht, renderSlot as ne, mergeProps as mt, ref as V, onUpdated as Le, normalizeStyle as ve, normalizeClass as Y, createCommentVNode as M, withModifiers as te, Fragment as B, createTextVNode as ft, withKeys as he, renderList as J, nextTick as vt, inject as gt, Transition as bt, resolveDynamicComponent as Me, shallowReadonly as _t } from "vue";
-import { v4 as K } from "uuid";
-import { AbstractNode as yt, NodeInterface as A, getGraphNodeTypeString as Ue, Graph as Ct, GraphTemplate as It, GRAPH_NODE_TYPE_PREFIX as wt, GRAPH_INPUT_NODE_TYPE as kt, GRAPH_OUTPUT_NODE_TYPE as Nt, Editor as xt } from "@baklavajs/core";
-import { NodeInterfaceType as X, BaklavaInterfaceTypes as Ot, setType as $ } from "@baklavajs/interface-types";
-import { allowMultipleConnections as Q, applyResult as Ae, BaseEngine as Tt, sortTopologically as Et } from "@baklavajs/engine";
-import { displayInSidebar as De, CheckboxInterfaceComponent as $t, useGraph as ge, IntegerInterfaceComponent as Mt, TextInputInterfaceComponent as Fe, NumberInterfaceComponent as Gt, SelectInterfaceComponent as St, SliderInterfaceComponent as Pt, TextareaInputInterfaceComponent as Vt, IntegerInterface as Rt, TextInputInterface as be, DEFAULT_TOOLBAR_COMMANDS as jt, Commands as q, BaklavaEditor as Bt, Components as me, useViewModel as oe, useTemporaryConnection as zt, useTransform as Ht, useNodeCategories as Lt, DEFAULT_SETTINGS as Ut, useCommandHandler as At, useHistory as Dt, useClipboard as Ft, registerDeleteNodesCommand as Wt, registerSaveSubgraphCommand as Yt, registerSwitchToMainGraphCommand as Kt, registerSidebarCommands as Xt, registerZoomToFitCommands as qt, setViewNodeProperties as Jt } from "@baklavajs/renderer-vue";
-import Qt from "toposort";
-import { SequentialHook as Ge } from "@baklavajs/events";
-import { usePointer as Zt } from "@vueuse/core";
-Z.escape = (n) => n;
-class We extends yt {
-  state;
+import ce from "mustache";
+import { reactive as te, defineComponent as F, createElementBlock as b, openBlock as p, toDisplayString as L, markRaw as W, computed as P, createElementVNode as m, withDirectives as ke, vModelText as xe, createStaticVNode as fe, toRef as Me, ref as H, createVNode as G, unref as O, mergeModels as Ue, useModel as xt, resolveComponent as Ze, createCommentVNode as j, onMounted as Se, onBeforeUnmount as et, watch as tt, createBlock as B, withCtx as ee, normalizeProps as It, guardReactiveProps as Nt, renderSlot as q, mergeProps as Et, onUpdated as nt, normalizeStyle as Pe, normalizeClass as ne, withModifiers as le, Fragment as U, createTextVNode as ot, withKeys as Oe, renderList as se, nextTick as Tt, resolveDynamicComponent as De, inject as Ot, Transition as $t, shallowReadonly as Mt } from "vue";
+import { v4 as re } from "uuid";
+import { AbstractNode as St, NodeInterface as J, Graph as Pt, getGraphNodeTypeString as st, GraphTemplate as Gt, GRAPH_NODE_TYPE_PREFIX as At, GRAPH_INPUT_NODE_TYPE as Rt, GRAPH_OUTPUT_NODE_TYPE as jt, Editor as Lt } from "@baklavajs/core";
+import { NodeInterfaceType as ae, BaklavaInterfaceTypes as Vt, setType as V } from "@baklavajs/interface-types";
+import { allowMultipleConnections as de, BaseEngine as Bt, sortTopologically as Ht, applyResult as rt } from "@baklavajs/engine";
+import { displayInSidebar as at, CheckboxInterfaceComponent as zt, useGraph as Ge, IntegerInterfaceComponent as Ut, TextInputInterfaceComponent as it, NumberInterfaceComponent as Dt, SelectInterfaceComponent as Ft, SliderInterfaceComponent as Wt, TextareaInputInterfaceComponent as Yt, IntegerInterface as Xt, TextInputInterface as Ae, DEFAULT_TOOLBAR_COMMANDS as Kt, Commands as ue, BaklavaEditor as qt, Components as $e, useViewModel as me, useTemporaryConnection as Jt, useTransform as Qt, useNodeCategories as Zt, DEFAULT_SETTINGS as en, useCommandHandler as tn, useHistory as nn, useClipboard as on, registerDeleteNodesCommand as sn, registerSaveSubgraphCommand as rn, registerSwitchToMainGraphCommand as an, registerSidebarCommands as ln, registerZoomToFitCommands as un, setViewNodeProperties as dn } from "@baklavajs/renderer-vue";
+import cn from "toposort";
+import { SequentialHook as Fe } from "@baklavajs/events";
+import { usePointer as pn } from "@vueuse/core";
+ce.escape = (n) => n;
+class lt extends St {
+  codeTemplate;
   isCodeNode = !0;
+  mask = null;
   name = "";
-  codeTemplate;
+  state;
   inputs = {};
   outputs = {};
   constructor() {
-    super(), this.initializeIo(), this.twoColumn = !0, this.state = D({
+    super(), this.initializeIo(), this.twoColumn = !0, this.state = te({
       codeTemplate: "",
       hidden: !1,
       integrated: !1,
@@ -27,7 +28,7 @@ class We extends yt {
       script: "",
       variableName: "a"
     }), this.codeTemplate = function() {
-      return `${this.name}(${en(this.codeNodeInputs).join(", ")})`;
+      return `${this.name}(${hn(this.codeNodeInputs).join(", ")})`;
     };
   }
   get code() {
@@ -121,30 +122,23 @@ class We extends yt {
     let s = [];
     if (t !== "outputs" && this.inputs[e]) {
       const o = this.graph.connections.filter(
-        (a) => a.to.id === this.inputs[e]?.id || a.from.id === this.inputs[e]?.id
-      ).map((a) => a.from.nodeId);
+        (r) => r.to.id === this.inputs[e]?.id || r.from.id === this.inputs[e]?.id
+      ).map((r) => r.from.nodeId);
       o && (s = s.concat(o));
     }
     if (t !== "inputs" && this.outputs[e]) {
       const o = this.graph.connections.filter(
-        (a) => a.from.id === this.outputs[e]?.id || a.from.id === this.outputs[e]?.id
-      ).map((a) => a.to.nodeId);
+        (r) => r.from.id === this.outputs[e]?.id || r.from.id === this.outputs[e]?.id
+      ).map((r) => r.to.nodeId);
       o && (s = s.concat(o));
     }
     return !s || s.length == 0 ? [] : s.map((o) => this.graph.findNodeById(o));
   }
-  /**
-   * Register code
-   * @param code
-   */
-  registerCode(e) {
-    this.code = e;
-  }
   /**
    * Render code of this node.
    */
   renderCode(e) {
-    return Z.render(this.state.codeTemplate, e);
+    return ce.render(this.state.codeTemplate, e);
   }
   /**
    * Update code templates.
@@ -189,7 +183,7 @@ class We extends yt {
     this.state.props = e;
   }
 }
-class _e extends We {
+class Re extends lt {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -202,58 +196,58 @@ class _e extends We {
     return this.lockCode || (s._code = this.renderCode({ inputs: e, ...t })), this.updateOutputValues(s), s;
   };
   load(e) {
-    super.load(e), Ye(this.graph, e);
+    super.load(e), ut(this.graph, e);
   }
   save() {
     const e = super.save();
-    return tn(this.graph, e), e;
+    return fn(this.graph, e), e;
   }
 }
-const en = (n, e = !0) => {
+const hn = (n, e = !0) => {
   const t = [], s = Object.keys(n);
   return s.forEach((o) => {
     if (n[o]?.hidden) return;
     const i = e && t.length < s.indexOf(o) ? `${o}=` : "";
     t.push(`${i}{{ inputs.${o} }}`);
   }), t;
-}, Ye = (n, e) => {
+}, ut = (n, e) => {
   if (!n) return;
   const t = n.findNodeById(e.id);
   if (!t || t.subgraph) return;
   const s = t;
-  s.state && (s.state.integrated = e.integrated, s.state.modules = e.modules, s.state.props = e.props), Object.entries(e.inputs).forEach(([o, a]) => {
-    o !== "_code" && s.inputs[o] && (s.inputs[o].hidden = a.hidden);
-  }), Object.entries(e.outputs).forEach(([o, a]) => {
-    o !== "_code" && s.outputs[o] && (s.outputs[o].hidden = a.hidden);
+  s.state && (s.state.integrated = e.integrated, s.state.modules = e.modules, s.state.props = e.props), Object.entries(e.inputs).forEach(([o, r]) => {
+    o !== "_code" && s.inputs[o] && (s.inputs[o].hidden = r.hidden);
+  }), Object.entries(e.outputs).forEach(([o, r]) => {
+    o !== "_code" && s.outputs[o] && (s.outputs[o].hidden = r.hidden);
   });
-}, tn = (n, e) => {
+}, fn = (n, e) => {
   if (!n) return;
   const t = n.findNodeById(e.id);
   if (!t || t.subgraph) return;
   const s = t;
-  s.state && (e.integrated = s.state.integrated, e.modules = s.state.modules), Object.entries(e.inputs).forEach(([o, a]) => {
-    o !== "_code" && s.inputs[o] && (a.hidden = s.inputs[o].hidden);
-  }), Object.entries(e.outputs).forEach(([o, a]) => {
-    o !== "_code" && s.outputs[o] && (a.hidden = s.outputs[o].hidden);
+  s.state && (e.integrated = s.state.integrated, e.modules = s.state.modules), Object.entries(e.inputs).forEach(([o, r]) => {
+    o !== "_code" && s.inputs[o] && (r.hidden = s.inputs[o].hidden);
+  }), Object.entries(e.outputs).forEach(([o, r]) => {
+    o !== "_code" && s.outputs[o] && (r.hidden = s.outputs[o].hidden);
   });
-}, nn = ["title"], ye = /* @__PURE__ */ F({
+}, mn = ["title"], je = /* @__PURE__ */ F({
   __name: "CodeNodeInterface",
   props: {
     intf: {}
   },
   setup(n) {
-    return (e, t) => (d(), p("div", {
+    return (e, t) => (p(), b("div", {
       title: n.intf.value
-    }, G(n.intf.name), 9, nn));
+    }, L(n.intf.name), 9, mn));
   }
 });
-class R extends A {
+class D extends J {
   isCodeNode = !0;
   code;
   state;
   type = null;
   constructor(e, t) {
-    super(e, t), this.setComponent(z(ye)), this.state = D({
+    super(e, t), this.setComponent(W(je)), this.state = te({
       optional: !1
     });
   }
@@ -268,9 +262,9 @@ class R extends A {
     return this.state.optional = e, this.setHidden(e), this;
   }
 }
-class ae extends R {
+class ve extends D {
   constructor(e = "", t) {
-    super(e, t), this.setComponent(z(ye)), this.use(De, !0);
+    super(e, t), this.setComponent(W(je)), this.use(at, !0);
   }
   get value() {
     return super.value;
@@ -279,69 +273,69 @@ class ae extends R {
     super.value = e, this.name !== "_code" && this.setHidden(!1);
   }
 }
-const Ke = new X("boolean"), sn = new X("dict"), Xe = new X("list"), U = new X("node"), Ce = new X("number"), Ie = new X("string"), qe = new X("tuple"), mo = (n) => {
-  new Ot(n.editor, { viewPlugin: n }).addTypes(Ke, sn, Xe, U, Ce, Ie, qe);
+const dt = new ae("boolean"), vn = new ae("dict"), ct = new ae("list"), X = new ae("node"), Le = new ae("number"), Ve = new ae("string"), pt = new ae("tuple"), or = (n) => {
+  new Vt(n.editor, { viewPlugin: n }).addTypes(dt, vn, ct, X, Le, Ve, pt);
 };
-class fo extends ae {
+class sr extends ve {
   constructor(e, t) {
-    super(e, t), this.setComponent(z($t)), this.use($, Ke);
+    super(e, t), this.setComponent(W(zt)), this.use(V, dt);
   }
   getValue = () => this.value ? "True" : "False";
 }
-class on extends R {
+class gn extends D {
   isCodeNodeOutput = !0;
   suffix = "";
   constructor(e = "", t = "") {
-    super(e, ""), this.suffix = t, this.setComponent(z(ye));
+    super(e, ""), this.suffix = t, this.setComponent(W(je));
   }
   get codeValue() {
     return this.node?.outputs._code.value ?? "";
   }
   get node() {
-    const { graph: e } = ge();
+    const { graph: e } = Ge();
     return e.value.findNodeById(this.nodeId);
   }
 }
-class we extends ae {
+class Be extends ve {
   min;
   max;
   constructor(e, t, s, o) {
-    super(e, t), this.min = s, this.max = o, this.use($, Ce);
+    super(e, t), this.min = s, this.max = o, this.use(V, Le);
   }
   validate(e) {
     return (this.min === void 0 || e >= this.min) && (this.max === void 0 || e <= this.max);
   }
 }
-class vo extends we {
-  component = z(Mt);
+class rr extends Be {
+  component = W(Ut);
   validate(e) {
     return Number.isInteger(e) && super.validate(e);
   }
 }
-class go extends ae {
+class ar extends ve {
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(z(Fe)), this.use($, Xe);
+    super(e, t), this.setComponent(W(it)), this.use(V, ct);
   }
   getValue = () => `[${this.value}]`;
 }
-class bo extends we {
-  component = z(Gt);
+class ir extends Be {
+  component = W(Dt);
 }
-class ke extends ae {
+class He extends ve {
   constructor(e, t) {
-    super(e, t), this.use($, Ie);
+    super(e, t), this.use(V, Ve);
   }
   getValue = () => `"${this.value}"`;
 }
-class _o extends ke {
-  component = z(St);
+class lr extends He {
+  component = W(Ft);
   items;
   constructor(e, t, s) {
     super(e, t), this.items = s;
   }
 }
-class yo extends we {
-  component = z(Pt);
+class ur extends Be {
+  component = W(Wt);
   min;
   max;
   constructor(e, t, s, o) {
@@ -349,7 +343,7 @@ class yo extends we {
   }
   getValue = () => `${Math.round(this.value * 1e3) / 1e3}`;
 }
-const an = F({
+const bn = F({
   props: {
     intf: {
       type: Object,
@@ -362,58 +356,58 @@ const an = F({
   },
   emits: ["update:modelValue"],
   setup(n, { emit: e }) {
-    return { v: O({
+    return { v: P({
       get: () => n.modelValue,
       set: (s) => {
         e("update:modelValue", s);
       }
     }) };
   }
-}), P = (n, e) => {
+}), A = (n, e) => {
   const t = n.__vccOpts || n;
   for (const [s, o] of e)
     t[s] = o;
   return t;
-}, rn = { style: { position: "relative" } }, dn = { style: { "font-size": "12px", padding: "0 6px", position: "absolute", top: "-8px", "background-color": "var(--baklava-node-color-background)" } }, ln = ["placeholder", "title"];
-function un(n, e, t, s, o, a) {
-  return d(), p("div", rn, [
-    u("label", dn, G(n.intf.name), 1),
-    de(u("input", {
+}, yn = { style: { position: "relative" } }, _n = { style: { "font-size": "12px", padding: "0 6px", position: "absolute", top: "-8px", "background-color": "var(--baklava-node-color-background)" } }, Cn = ["placeholder", "title"];
+function wn(n, e, t, s, o, r) {
+  return p(), b("div", yn, [
+    m("label", _n, L(n.intf.name), 1),
+    ke(m("input", {
       "onUpdate:modelValue": e[0] || (e[0] = (i) => n.v = i),
       type: "text",
       class: "baklava-input",
       placeholder: n.intf.name,
       title: n.intf.name
-    }, null, 8, ln), [
-      [le, n.v]
+    }, null, 8, Cn), [
+      [xe, n.v]
     ])
   ]);
 }
-const cn = /* @__PURE__ */ P(an, [["render", un]]);
-class Co extends ke {
-  component = z(cn);
+const kn = /* @__PURE__ */ A(bn, [["render", wn]]);
+class dr extends He {
+  component = W(kn);
 }
-class Io extends ke {
-  component = z(Vt);
+class cr extends He {
+  component = W(Yt);
 }
-class wo extends ae {
+class pr extends ve {
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(z(Fe)), this.use($, qe);
+    super(e, t), this.setComponent(W(it)), this.use(V, pt);
   }
   getValue = () => `(${this.value})`;
 }
-function ko(n) {
-  return class extends _e {
+function hr(n) {
+  return class extends Re {
     type = n.type;
     inputs = {};
     outputs = {};
     constructor() {
       super(), this._title = n.title ?? n.type, this.executeFactory("input", n.inputs), this.executeFactory("output", n.outputs), n.calculate && (this.calculate = (e, t) => n.calculate.call(this, { inputs: e, ...t })), n.onCreate?.call(this), this.name = n.name ?? n.type, this.updateModules(n.modules), n.variableName != null && (this.state.variableName = n.variableName), n.codeTemplate && (this.codeTemplate = n.codeTemplate), this.addInput(
         "_code",
-        new R("", []).use($, U).use(Q).setHidden(!0)
+        new D("", []).use(V, X).use(de).setHidden(!0)
       ), this.addOutput(
         "_code",
-        new R("", []).use($, U).use(Q).setHidden(!0)
+        new D("", []).use(V, X).use(de).setHidden(!0)
       );
     }
     onPlaced() {
@@ -439,10 +433,10 @@ function ko(n) {
     }
   };
 }
-class pn extends _e {
+class xn extends Re {
 }
-function No(n) {
-  return class extends pn {
+function fr(n) {
+  return class extends xn {
     type = n.type;
     inputs = {};
     outputs = {};
@@ -452,10 +446,10 @@ function No(n) {
     constructor() {
       super(), this._title = n.title ?? n.type, this.executeFactory("input", n.inputs), this.executeFactory("output", n.outputs), n.calculate && (this.calculate = (e, t) => n.calculate?.call(this, e, t)), n.onCreate?.call(this), this.name = n.name ?? n.type, this.updateModules(n.modules), n.codeTemplate && (this.codeTemplate = n.codeTemplate), n.variableName && (this.state.variableName = n.variableName), this.addInput(
         "_code",
-        new R("", []).use($, U).use(Q).setHidden(!0)
+        new D("", []).use(V, X).use(de).setHidden(!0)
       ), this.addOutput(
         "_code",
-        new R("", []).use($, U).use(Q).setHidden(!0)
+        new D("", []).use(V, X).use(de).setHidden(!0)
       ), this.staticInputKeys.push("_code"), this.staticOutputKeys.push("_code");
     }
     onPlaced() {
@@ -487,19 +481,19 @@ function No(n) {
           if (!this.inputs[t]) {
             const s = e.inputs[t].value;
             let o;
-            typeof s == "number" ? o = new Rt(t, s).use($, Ce) : o = new be(t, JSON.stringify(s)).use($, Ie), o.use(De, !0), this.addInput(t, o);
+            typeof s == "number" ? o = new Xt(t, s).use(V, Le) : o = new Ae(t, JSON.stringify(s)).use(V, Ve), o.use(at, !0), this.addInput(t, o);
           }
           this.inputs[t] && (this.inputs[t].load(e.inputs[t]), this.inputs[t].nodeId = this.id);
         }
       for (const t of Object.keys(e.outputs))
         if (!this.staticOutputKeys.includes(t)) {
           if (!this.outputs[t]) {
-            const s = new on(t);
+            const s = new gn(t);
             this.addOutput(t, s);
           }
           this.outputs[t] && (this.outputs[t].load(e.outputs[t]), this.outputs[t].nodeId = this.id);
         }
-      Ye(this.graph, e), this.preventUpdate = !1, this.events.loaded.emit(this);
+      ut(this.graph, e), this.preventUpdate = !1, this.events.loaded.emit(this);
     }
     onUpdate() {
       if (this.preventUpdate) return;
@@ -514,13 +508,13 @@ function No(n) {
       return s;
     }
     updateInterfaces(e, t, s) {
-      const o = e === "input" ? this.staticInputKeys : this.staticOutputKeys, a = e === "input" ? this.inputs : this.outputs;
-      for (const i of Object.keys(a))
+      const o = e === "input" ? this.staticInputKeys : this.staticOutputKeys, r = e === "input" ? this.inputs : this.outputs;
+      for (const i of Object.keys(r))
         o.includes(i) || t[i] && !s.includes(i) || (e === "input" ? this.removeInput(i) : this.removeOutput(i));
       for (const i of Object.keys(t)) {
-        if (a[i]) continue;
-        const r = t[i]();
-        e === "input" ? this.addInput(i, r) : this.addOutput(i, r);
+        if (r[i]) continue;
+        const a = t[i]();
+        e === "input" ? this.addInput(i, a) : this.addOutput(i, a);
       }
     }
     updateProps(e) {
@@ -534,186 +528,13 @@ function No(n) {
     }
   };
 }
-const Se = "__baklava_SubgraphInputNode", Pe = "__baklava_SubgraphOutputNode";
-class Je extends _e {
-  graphInterfaceId;
-  constructor() {
-    super(), this.graphInterfaceId = K();
-  }
-  onPlaced() {
-    super.onPlaced(), this.initializeIo();
-  }
-  load(e) {
-    super.load(e), this.graphInterfaceId = e.graphInterfaceId;
-  }
-  save() {
-    return {
-      ...super.save(),
-      graphInterfaceId: this.graphInterfaceId
-    };
-  }
-  update() {
-  }
-}
-class Qe extends Je {
-  static isGraphInputNode(e) {
-    return e.type === Se;
-  }
-  type = Se;
-  inputs = {
-    name: new A("Name", "Input")
-  };
-  outputs = {
-    placeholder: new A("Value", void 0)
-  };
-}
-class Ze extends Je {
-  static isGraphOutputNode(e) {
-    return e.type === Pe;
-  }
-  type = Pe;
-  inputs = {
-    name: new A("Name", "Output"),
-    placeholder: new A("Value", void 0)
-  };
-  outputs = {
-    output: new A("Output", void 0).setHidden(!0)
-  };
-  calculate = ({ placeholder: e }) => ({
-    output: e
-  });
-}
-const hn = [
-  "component",
-  "connectionCount",
-  "events",
-  "hidden",
-  "hooks",
-  "id",
-  "isCodeNode",
-  "isInput",
-  "name",
-  "nodeId",
-  "port",
-  "templateId",
-  "value"
-];
-function mn(n) {
-  return class extends We {
-    type = Ue(n);
-    get title() {
-      return this._title;
-    }
-    set title(t) {
-      this.template.name = t;
-    }
-    inputs = {};
-    outputs = {};
-    template = n;
-    subgraph;
-    update() {
-    }
-    onConnected() {
-    }
-    onUnconnected() {
-    }
-    calculate = async (t, s) => {
-      if (!this.subgraph) throw new Error(`GraphNode ${this.id}: calculate called without subgraph being initialized`);
-      if (!s.engine || typeof s.engine != "object")
-        throw new Error(`GraphNode ${this.id}: calculate called but no engine provided in context`);
-      const o = s.engine.getInputValues(this.subgraph);
-      for (const r of this.subgraph.inputs)
-        o.set(r.nodeInterfaceId, t[r.id]);
-      const a = await s.engine.runGraph(
-        this.subgraph,
-        o,
-        s.globalValues
-      );
-      s.engine.pause(), Ae(a, s.engine.editor), s.engine.resume();
-      const i = {};
-      for (const r of this.subgraph.outputs)
-        i[r.id] = a.get(r.nodeId)?.get("output");
-      return i._calculationResults = a, this.lockCode || (i._code = this.renderCode({ inputs: t, ...s.globalValues })), this.updateOutputValues(i), i;
-    };
-    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();
-    }
-    onDestroy() {
-      this.template.events.updated.unsubscribe(this), this.template.events.nameChanged.unsubscribe(this), this.subgraph?.destroy();
-    }
-    initialize() {
-      this.subgraph && this.subgraph.destroy(), this.subgraph = this.template.createGraph(), this._title = this.template.name, this.updateInterfaces(), this.state.codeTemplate = `{{ #nodes }}{{ script }}
-{{ /nodes }}`, this.events.update.emit(null);
-    }
-    /**
-     * Render code of this node.
-     */
-    renderCode(t) {
-      return this.subgraph ? this.subgraph.renderCode({ nodes: this.subgraph.scriptedCodeNodes }) : Z.render(this.state.codeTemplate, t);
-    }
-    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((s) => s.id === t) || this.removeInput(t);
-      for (const t of this.subgraph.outputs)
-        t.id in this.outputs ? this.outputs[t.id].name = t.name : this.addOutput(t.id, this.createProxyInterface(t, !1));
-      for (const t of Object.keys(this.outputs))
-        this.subgraph.outputs.some((s) => s.id === t) || this.removeOutput(t);
-      this.addInput(
-        "_code",
-        new R("", []).use($, U).use(Q).setHidden(!0)
-      ), this.addOutput(
-        "_code",
-        new R("", []).use($, U).use(Q).setHidden(!0)
-      ), this.addOutput("_calculationResults", new A("_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, s) {
-      const o = new R(t.name, void 0);
-      return new Proxy(o, {
-        get: (a, i) => {
-          if (hn.includes(i) || i in a || typeof i == "string" && i.startsWith("__v_"))
-            return Reflect.get(a, i);
-          let r;
-          s ? r = this.subgraph?.nodes.find(
-            (_) => Qe.isGraphInputNode(_) && _.graphInterfaceId === t.id
-          )?.outputs.placeholder.id : r = this.subgraph?.nodes.find(
-            (_) => Ze.isGraphOutputNode(_) && _.graphInterfaceId === t.id
-          )?.inputs.placeholder.id;
-          const c = this.subgraph?.connections.find((g) => r === (s ? g.from : g.to)?.id), h = s ? c?.to : c?.from;
-          if (h) return Reflect.get(h, i);
-        }
-      });
-    }
-  };
-}
-Z.escape = (n) => n;
-class fn {
+ce.escape = (n) => n;
+class ze {
   _id;
   _state;
   viewModel;
   constructor() {
-    this._id = K(), this._state = D({
+    this._id = re(), this._state = te({
       lockCode: !1,
       modules: {},
       script: "",
@@ -777,13 +598,23 @@ class fn {
    * Render code script.
    */
   renderCode(e) {
-    this.state.script = Z.render(this.state.template || "", e);
+    this.state.script = ce.render(this.state.template || "", e);
+  }
+}
+class mr extends ze {
+  constructor() {
+    super(), this.loadTemplate(import("./python-CKuCd7tg.js"));
+  }
+}
+class vr extends ze {
+  constructor() {
+    super(), this.loadTemplate(import("./javascript-DK1c6Ap1.js"));
   }
 }
-const Oo = (n) => {
+const gr = (n) => {
   n.allowMultipleConnections = !0;
 };
-class vn extends Tt {
+class In extends Bt {
   order = /* @__PURE__ */ new Map();
   constructor(e) {
     super(e);
@@ -792,34 +623,32 @@ class vn extends Tt {
     super.start(), this.recalculateOrder = !0, this.calculateWithoutData();
   }
   async runGraph(e, t, s) {
-    this.order.has(e.id) || this.order.set(e.id, Et(e));
-    const { calculationOrder: o, connectionsFromNode: a } = this.order.get(e.id), i = /* @__PURE__ */ new Map();
-    for (const r of o) {
-      const c = {};
-      Object.entries(r.inputs).forEach(([g, _]) => {
-        c[g] = this.getInterfaceValue(t, _.id);
-      }), r.isCodeNode && (r.updateCodeTemplate(), r.updateOutputNames()), this.events.beforeNodeCalculation.emit({ inputValues: c, node: r });
-      let h;
-      if (r.calculate) {
-        if (h = await r.calculate(c, { globalValues: s, engine: this }), a.has(r))
-          for (const [g, _] of Object.entries(h))
-            this.hooks.transferData.execute(h[g], _), a.get(r).forEach((m) => {
-              t.set(m.to.id, _);
-            });
+    this.order.has(e.id) || this.order.set(e.id, Ht(e));
+    const { calculationOrder: o, connectionsFromNode: r } = this.order.get(e.id), i = /* @__PURE__ */ new Map();
+    for (const a of o) {
+      const l = {};
+      Object.entries(a.inputs).forEach(([f, C]) => {
+        l[f] = this.getInterfaceValue(t, C.id);
+      }), a.isCodeNode && (a.updateCodeTemplate(), a.updateOutputNames()), this.events.beforeNodeCalculation.emit({ inputValues: l, node: a });
+      let d;
+      if (a.calculate) {
+        if (d = await a.calculate(l, { globalValues: s, engine: this }), r.has(a))
+          for (const [f, C] of Object.entries(d))
+            this.hooks.transferData.execute(d[f], C), r.get(a).forEach((h) => t.set(h.to.id, C));
       } else {
-        h = {};
-        for (const [g, _] of Object.entries(r.outputs))
-          h[g] = this.getInterfaceValue(t, _.id);
+        d = {};
+        for (const [f, C] of Object.entries(a.outputs))
+          d[f] = this.getInterfaceValue(t, C.id);
       }
-      this.events.afterNodeCalculation.emit({ outputValues: h, node: r }), i.set(r.id, new Map(Object.entries(h))), a.has(r) && a.get(r).forEach((g) => {
-        const _ = Object.entries(r.outputs).find(([, k]) => k.id === g.from.id)?.[0];
-        if (!_)
+      this.events.afterNodeCalculation.emit({ outputValues: d, node: a }), i.set(a.id, new Map(Object.entries(d))), r.has(a) && r.get(a).forEach((f) => {
+        const C = Object.entries(a.outputs).find(([, N]) => N.id === f.from.id)?.[0];
+        if (!C)
           throw new Error(
-            `Could not find key for interface ${g.from.id}
+            `Could not find key for interface ${f.from.id}
 This is likely an internal issue. Please report it on GitHub.`
           );
-        const m = this.hooks.transferData.execute(h[_], g);
-        g.to.allowMultipleConnections ? t.has(g.to.id) ? t.get(g.to.id).push(m) : t.set(g.to.id, [m]) : t.set(g.to.id, m);
+        const h = this.hooks.transferData.execute(d[C], f);
+        f.to.allowMultipleConnections ? t.has(f.to.id) ? t.get(f.to.id).push(h) : t.set(f.to.id, [h]) : t.set(f.to.id, h);
       });
     }
     return i;
@@ -851,7 +680,29 @@ This is likely an internal issue. Please report it on GitHub.`
     return e.get(t);
   }
 }
-const gn = {}, bn = {
+const Nn = {}, En = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-check"
+};
+function Tn(n, e) {
+  return p(), b("svg", En, [...e[0] || (e[0] = [
+    m("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    m("path", { d: "M5 12l5 5l10 -10" }, null, -1)
+  ])]);
+}
+const On = /* @__PURE__ */ A(Nn, [["render", Tn]]), $n = {}, Mn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -863,17 +714,40 @@ const gn = {}, bn = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-code-variable"
 };
-function _n(n, e) {
-  return d(), p("svg", bn, [...e[0] || (e[0] = [
-    u("path", {
+function Sn(n, e) {
+  return p(), b("svg", Mn, [...e[0] || (e[0] = [
+    m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    u("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)
+    m("path", { d: "M4 8m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" }, null, -1)
   ])]);
 }
-const yn = /* @__PURE__ */ P(gn, [["render", _n]]), Cn = {}, In = {
+const Pn = /* @__PURE__ */ A($n, [["render", Sn]]), Gn = {}, An = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-copy"
+};
+function Rn(n, e) {
+  return p(), b("svg", An, [...e[0] || (e[0] = [
+    m("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    m("path", { d: "M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" }, null, -1),
+    m("path", { d: "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" }, null, -1)
+  ])]);
+}
+const jn = /* @__PURE__ */ A(Gn, [["render", Rn]]), Ln = {}, Vn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -885,19 +759,19 @@ const yn = /* @__PURE__ */ P(gn, [["render", _n]]), Cn = {}, In = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"
 };
-function wn(n, e) {
-  return d(), p("svg", In, [...e[0] || (e[0] = [
-    u("path", {
+function Bn(n, e) {
+  return p(), b("svg", Vn, [...e[0] || (e[0] = [
+    m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    u("path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
-    u("path", { d: "M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
-    u("path", { d: "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
+    m("path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+    m("path", { d: "M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+    m("path", { d: "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
   ])]);
 }
-const kn = /* @__PURE__ */ P(Cn, [["render", wn]]), Nn = {}, xn = {
+const Hn = /* @__PURE__ */ A(Ln, [["render", Bn]]), zn = {}, Un = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -905,17 +779,17 @@ const kn = /* @__PURE__ */ P(Cn, [["render", wn]]), Nn = {}, xn = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"
 };
-function On(n, e) {
-  return d(), p("svg", xn, [...e[0] || (e[0] = [
-    u("path", {
+function Dn(n, e) {
+  return p(), b("svg", Un, [...e[0] || (e[0] = [
+    m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    u("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)
+    m("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-2.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
   ])]);
 }
-const Tn = /* @__PURE__ */ P(Nn, [["render", On]]), En = {}, $n = {
+const Fn = /* @__PURE__ */ A(zn, [["render", Dn]]), Wn = {}, Yn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -923,17 +797,17 @@ const Tn = /* @__PURE__ */ P(Nn, [["render", On]]), En = {}, $n = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-expand"
 };
-function Mn(n, e) {
-  return d(), p("svg", $n, [...e[0] || (e[0] = [
-    u("path", {
+function Xn(n, e) {
+  return p(), b("svg", Yn, [...e[0] || (e[0] = [
+    m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    u("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)
+    m("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-4.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
   ])]);
 }
-const Gn = /* @__PURE__ */ P(En, [["render", Mn]]), Sn = {}, Pn = {
+const Kn = /* @__PURE__ */ A(Wn, [["render", Xn]]), qn = {}, Jn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -941,17 +815,17 @@ const Gn = /* @__PURE__ */ P(En, [["render", Mn]]), Sn = {}, Pn = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right"
 };
-function Vn(n, e) {
-  return d(), p("svg", Pn, [...e[0] || (e[0] = [
-    u("path", {
+function Qn(n, e) {
+  return p(), b("svg", Jn, [...e[0] || (e[0] = [
+    m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    u("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)
+    m("path", { d: "M6 21a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3zm8 -16h-8a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h8z" }, null, -1)
   ])]);
 }
-const Rn = /* @__PURE__ */ P(Sn, [["render", Vn]]), jn = {}, Bn = {
+const Zn = /* @__PURE__ */ A(qn, [["render", Qn]]), eo = {}, to = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -959,17 +833,17 @@ const Rn = /* @__PURE__ */ P(Sn, [["render", Vn]]), jn = {}, Bn = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-collapse"
 };
-function zn(n, e) {
-  return d(), p("svg", Bn, [...e[0] || (e[0] = [
-    u("path", {
+function no(n, e) {
+  return p(), b("svg", to, [...e[0] || (e[0] = [
+    m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    u("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)
+    m("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-5.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
   ])]);
 }
-const Hn = /* @__PURE__ */ P(jn, [["render", zn]]), Ln = {}, Un = {
+const oo = /* @__PURE__ */ A(eo, [["render", no]]), so = {}, ro = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -977,17 +851,17 @@ const Hn = /* @__PURE__ */ P(jn, [["render", zn]]), Ln = {}, Un = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-expand"
 };
-function An(n, e) {
-  return d(), p("svg", Un, [...e[0] || (e[0] = [
-    u("path", {
+function ao(n, e) {
+  return p(), b("svg", ro, [...e[0] || (e[0] = [
+    m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    u("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)
+    m("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-3.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
   ])]);
 }
-const Dn = /* @__PURE__ */ P(Ln, [["render", An]]), Fn = {}, Wn = {
+const io = /* @__PURE__ */ A(so, [["render", ao]]), lo = {}, uo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -999,12 +873,12 @@ const Dn = /* @__PURE__ */ P(Ln, [["render", An]]), Fn = {}, Wn = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-lock-code"
 };
-function Yn(n, e) {
-  return d(), p("svg", Wn, [...e[0] || (e[0] = [
-    se('<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 co(n, e) {
+  return p(), b("svg", uo, [...e[0] || (e[0] = [
+    fe('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2"></path><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M8 11v-4a4 4 0 1 1 8 0v4"></path><path d="M20 21l2 -2l-2 -2"></path><path d="M17 17l-2 2l2 2"></path>', 6)
   ])]);
 }
-const Kn = /* @__PURE__ */ P(Fn, [["render", Yn]]), Xn = {}, qn = {
+const ht = /* @__PURE__ */ A(lo, [["render", co]]), po = {}, ho = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1016,17 +890,40 @@ const Kn = /* @__PURE__ */ P(Fn, [["render", Yn]]), Xn = {}, qn = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-player-play"
 };
-function Jn(n, e) {
-  return d(), p("svg", qn, [...e[0] || (e[0] = [
-    u("path", {
+function fo(n, e) {
+  return p(), b("svg", ho, [...e[0] || (e[0] = [
+    m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    u("path", { d: "M7 4v16l13 -8z" }, null, -1)
+    m("path", { d: "M7 4v16l13 -8z" }, null, -1)
   ])]);
 }
-const Qn = /* @__PURE__ */ P(Xn, [["render", Jn]]), Zn = {}, es = {
+const mo = /* @__PURE__ */ A(po, [["render", fo]]), vo = {}, go = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-plus"
+};
+function bo(n, e) {
+  return p(), b("svg", go, [...e[0] || (e[0] = [
+    m("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    m("path", { d: "M12 5l0 14" }, null, -1),
+    m("path", { d: "M5 12l14 0" }, null, -1)
+  ])]);
+}
+const yo = /* @__PURE__ */ A(vo, [["render", bo]]), _o = {}, Co = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1038,12 +935,12 @@ const Qn = /* @__PURE__ */ P(Xn, [["render", Jn]]), Zn = {}, es = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema"
 };
-function ts(n, e) {
-  return d(), p("svg", es, [...e[0] || (e[0] = [
-    se('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 2h5v4h-5z"></path><path d="M15 10h5v4h-5z"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h5"></path><path d="M7.5 6v4"></path><path d="M7.5 14v4"></path>', 8)
+function wo(n, e) {
+  return p(), b("svg", Co, [...e[0] || (e[0] = [
+    fe('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 2h5v4h-5z"></path><path d="M15 10h5v4h-5z"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h5"></path><path d="M7.5 6v4"></path><path d="M7.5 14v4"></path>', 8)
   ])]);
 }
-const ns = /* @__PURE__ */ P(Zn, [["render", ts]]), ss = {}, os = {
+const ko = /* @__PURE__ */ A(_o, [["render", wo]]), xo = {}, Io = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1055,12 +952,12 @@ const ns = /* @__PURE__ */ P(Zn, [["render", ts]]), ss = {}, os = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema-off"
 };
-function as(n, e) {
-  return d(), p("svg", os, [...e[0] || (e[0] = [
-    se('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 2h4v4m-4 0h-1v-1"></path><path d="M15 11v-1h5v4h-2"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h2"></path><path d="M7.5 7.5v2.5"></path><path d="M7.5 14v4"></path><path d="M3 3l18 18"></path>', 9)
+function No(n, e) {
+  return p(), b("svg", Io, [...e[0] || (e[0] = [
+    fe('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 2h4v4m-4 0h-1v-1"></path><path d="M15 11v-1h5v4h-2"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h2"></path><path d="M7.5 7.5v2.5"></path><path d="M7.5 14v4"></path><path d="M3 3l18 18"></path>', 9)
   ])]);
 }
-const is = /* @__PURE__ */ P(ss, [["render", as]]), rs = {}, ds = {
+const Eo = /* @__PURE__ */ A(xo, [["render", No]]), To = {}, Oo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1072,12 +969,12 @@ const is = /* @__PURE__ */ P(ss, [["render", as]]), rs = {}, ds = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-transition-bottom"
 };
-function ls(n, e) {
-  return d(), p("svg", ds, [...e[0] || (e[0] = [
-    se('<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 $o(n, e) {
+  return p(), b("svg", Oo, [...e[0] || (e[0] = [
+    fe('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M21 18a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3"></path><path d="M3 3m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v0a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path><path d="M12 9v8"></path><path d="M9 14l3 3l3 -3"></path>', 5)
   ])]);
 }
-const us = /* @__PURE__ */ P(rs, [["render", ls]]), cs = {}, ps = {
+const Mo = /* @__PURE__ */ A(To, [["render", $o]]), So = {}, Po = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1089,60 +986,83 @@ const us = /* @__PURE__ */ P(rs, [["render", ls]]), cs = {}, ps = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-trash-off"
 };
-function hs(n, e) {
-  return d(), p("svg", ps, [...e[0] || (e[0] = [
-    se('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 3l18 18"></path><path d="M4 7h3m4 0h9"></path><path d="M10 11l0 6"></path><path d="M14 14l0 3"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l.077 -.923"></path><path d="M18.384 14.373l.616 -7.373"></path><path d="M9 5v-1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>', 8)
+function Go(n, e) {
+  return p(), b("svg", Po, [...e[0] || (e[0] = [
+    fe('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 3l18 18"></path><path d="M4 7h3m4 0h9"></path><path d="M10 11l0 6"></path><path d="M14 14l0 3"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l.077 -.923"></path><path d="M18.384 14.373l.616 -7.373"></path><path d="M9 5v-1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>', 8)
   ])]);
 }
-const ms = /* @__PURE__ */ P(cs, [["render", hs]]), et = "CLEAR_ALL", tt = "RUN_ENGINE", nt = "TOGGLE_MINIMAP", st = "TOGGLE_PALETTE", fs = (n, e, t) => {
+const Ao = /* @__PURE__ */ A(So, [["render", Go]]), Ro = {}, jo = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-x"
+};
+function Lo(n, e) {
+  return p(), b("svg", jo, [...e[0] || (e[0] = [
+    m("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    m("path", { d: "M18 6l-12 12" }, null, -1),
+    m("path", { d: "M6 6l12 12" }, null, -1)
+  ])]);
+}
+const Vo = /* @__PURE__ */ A(Ro, [["render", Lo]]), ft = "CLEAR_ALL", mt = "RUN_ENGINE", vt = "TOGGLE_MINIMAP", gt = "TOGGLE_PALETTE", Bo = (n, e, t) => {
   const s = t.zoomToFit.paddingLeft;
-  e.registerCommand(st, {
+  e.registerCommand(gt, {
     execute: () => {
       t.palette.enabled = !t.palette.enabled, t.zoomToFit.paddingLeft = t.palette.enabled ? s : 50;
     },
     canExecute: () => !0
-  }), e.registerCommand(et, {
+  }), e.registerCommand(ft, {
     execute: () => n.value.clear(),
     canExecute: () => n.value.nodes.length > 0
-  }), e.registerCommand(nt, {
+  }), e.registerCommand(vt, {
     execute: () => t.enableMinimap = !t.enableMinimap,
     canExecute: () => n.value.nodes.length > 1
   });
-}, vs = (n) => {
+}, Ho = (n) => {
   const e = {
-    command: tt,
+    command: mt,
     title: "Run",
     // Tooltip text
-    icon: O(() => Qn)
+    icon: P(() => mo)
   }, t = {
-    command: st,
+    command: gt,
     title: "Toggle palette",
     // Tooltip text
-    icon: O(() => n.palette.enabled ? Tn : Gn)
+    icon: P(() => n.palette.enabled ? Fn : Kn)
   }, s = {
-    command: et,
+    command: ft,
     title: "Clear all",
     // Tooltip text
-    icon: O(() => ms)
+    icon: P(() => Ao)
   }, o = {
-    command: nt,
+    command: vt,
     title: "Toggle minimap",
     // Tooltip text
-    icon: O(() => n.enableMinimap ? is : ns)
+    icon: P(() => n.enableMinimap ? Eo : ko)
   };
-  n.toolbar.commands = [t, e, ...jt, s, o];
-}, gs = (n, e) => {
-  e.registerCommand(tt, {
+  n.toolbar.commands = [t, e, ...Kt, s, o];
+}, zo = (n, e) => {
+  e.registerCommand(mt, {
     execute: () => n.runOnce(null),
     canExecute: () => !0
   });
 };
-function bs(n) {
+function Uo(n) {
   const e = Symbol("CodeEngineToken");
-  n.engine = new vn(n.editor), gs(n.engine, n.commandHandler), n.loadEditor = (t) => {
-    n.engine?.pause(), n.displayedGraph.clear(), n.editor.load(t), n.commandHandler.executeCommand(q.CLEAR_CLIPBOARD_COMMAND), n.commandHandler.executeCommand(q.CLEAR_HISTORY_COMMAND), n.engine?.resume(), n.engine?.runOnce(null);
+  n.engine = new In(n.editor), zo(n.engine, n.commandHandler), n.loadEditor = (t) => {
+    n.engine?.pause(), n.displayedGraph.clear(), n.editor.load(t), n.commandHandler.executeCommand(ue.CLEAR_CLIPBOARD_COMMAND), n.commandHandler.executeCommand(ue.CLEAR_HISTORY_COMMAND), n.engine?.resume(), n.engine?.runOnce(null);
   }, n.newGraph = () => {
-    n.engine?.pause(), n.displayedGraph.clear(), n.commandHandler.executeCommand(q.CLEAR_CLIPBOARD_COMMAND), n.commandHandler.executeCommand(q.CLEAR_HISTORY_COMMAND), n.displayedGraph.id = K(), n.engine?.resume(), n.engine?.runOnce(null);
+    n.engine?.pause(), n.displayedGraph.clear(), n.commandHandler.executeCommand(ue.CLEAR_CLIPBOARD_COMMAND), n.commandHandler.executeCommand(ue.CLEAR_HISTORY_COMMAND), n.displayedGraph.id = re(), n.engine?.resume(), n.engine?.runOnce(null);
   }, n.subscribe = () => {
     n.displayedGraph.events.addConnection.subscribe(e, (t) => {
       const s = n.displayedGraph.findNodeById(t.to.nodeId);
@@ -1157,7 +1077,7 @@ function bs(n) {
     }), n.engine?.events.beforeRun.subscribe(e, () => {
       n.engine?.pause(), n.displayedGraph.sortNodes(), n.engine?.resume();
     }), n.engine?.events.afterRun.subscribe(e, (t) => {
-      n.engine?.pause(), Ae(t, n.editor), n.code.state.lockCode || n.code.renderCode({
+      n.engine?.pause(), rt(t, n.editor), n.code.state.lockCode || n.code.renderCode({
         nodes: n.editor.graph.scriptedCodeNodes,
         modules: n.editor.code.modules
       }), n.engine?.resume();
@@ -1166,10 +1086,10 @@ function bs(n) {
     n.displayedGraph.events.addConnection.unsubscribe(e), n.displayedGraph.events.removeConnection.unsubscribe(e), n.engine?.events.beforeRun.unsubscribe(e), n.engine?.events.afterRun.unsubscribe(e);
   };
 }
-class ue extends Ct {
+class Ie extends Pt {
   code = null;
   editor;
-  _state = D({
+  _state = te({
     codeTemplate: "{{ #nodes }}{{ script }}{{ /nodes }}",
     lockCode: !1
   });
@@ -1177,7 +1097,7 @@ class ue extends Ct {
     super(e, t), this.editor = e, this.template = t, e.code && (this.code = e.code);
   }
   get codeNodes() {
-    return ot(this);
+    return bt(this);
   }
   get connections() {
     return super.connections;
@@ -1206,15 +1126,14 @@ class ue extends Ct {
   get visibleNodes() {
     return this.nodes.filter((e) => !e.state?.hidden);
   }
-  // /**
-  //  * Add code node to graph.
-  //  * @param node code node
-  //  * @param props optional
-  //  */
-  // public override addNode(node: AbstractCodeNode, props?: unknown): AbstractCodeNode | undefined {
-  //   if (node.state && props) node.state.props = props;
-  //   return super.addNode(node as AbstractNode) as AbstractCodeNode;
-  // }
+  /**
+   * Add code node to graph.
+   * @param node code node
+   * @param props optional
+   */
+  addNode(e, t) {
+    return e.state && t && (e.state.props = t), super.addNode(e);
+  }
   /**
    * Add code node at coordinates.
    * @param node code node
@@ -1278,7 +1197,7 @@ class ue extends Ct {
    * Render code script.
    */
   renderCode(e) {
-    return Z.render(this.state?.codeTemplate || "", e);
+    return ce.render(this.state?.codeTemplate || "", e);
   }
   /**
    * Sort code nodes.
@@ -1288,40 +1207,212 @@ class ue extends Ct {
       try {
         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 = Qt.array(e, t), e.reverse();
-        const s = this.nodes.map((a) => a.id).filter((a) => !e.includes(a));
+          (r) => e.includes(r.to.nodeId) && e.includes(r.from.nodeId)
+        ).map((r) => [r.to.nodeId, r.from.nodeId]);
+        e.reverse(), e = cn.array(e, t), e.reverse();
+        const s = this.nodes.map((r) => r.id).filter((r) => !e.includes(r));
         e = [...e, ...s];
-        const o = e.map((a) => this.findNodeById(a));
+        const o = e.map((r) => this.findNodeById(r));
         o && (this.nodes = o);
       } catch {
         console.warn("Failed to sort nodes.");
       }
   }
 }
-const ot = (n) => {
+const bt = (n) => {
   const e = [];
   return n.nodes.length === 0 || n.nodes.forEach((t) => {
-    t && (t.hasOwnProperty("subgraph") ? e.push(...ot(t.subgraph)) : t.hasOwnProperty("isCodeNode") && e.push(t));
+    t && (t.hasOwnProperty("subgraph") ? e.push(...bt(t.subgraph)) : t.hasOwnProperty("isCodeNode") && e.push(t));
   }), e;
-}, To = (n = 0, e = 100) => ({
+}, br = (n = 0, e = 100) => ({
   x: n * 420,
   y: e
-}), Eo = (n) => {
+}), yr = (n) => {
   const e = { ...n.position };
   return e.x -= 440, e.y += 50, e;
-};
-function _s(n, e) {
+}, We = "__baklava_SubgraphInputNode", Ye = "__baklava_SubgraphOutputNode";
+class yt extends Re {
+  graphInterfaceId;
+  constructor() {
+    super(), this.graphInterfaceId = re();
+  }
+  onPlaced() {
+    super.onPlaced(), this.initializeIo();
+  }
+  load(e) {
+    super.load(e), this.graphInterfaceId = e.graphInterfaceId;
+  }
+  save() {
+    return {
+      ...super.save(),
+      graphInterfaceId: this.graphInterfaceId
+    };
+  }
+  update() {
+  }
+}
+class _t extends yt {
+  static isGraphInputNode(e) {
+    return e.type === We;
+  }
+  type = We;
+  inputs = {
+    name: new J("Name", "Input")
+  };
+  outputs = {
+    placeholder: new J("Value", void 0)
+  };
+}
+class Ct extends yt {
+  static isGraphOutputNode(e) {
+    return e.type === Ye;
+  }
+  type = Ye;
+  inputs = {
+    name: new J("Name", "Output"),
+    placeholder: new J("Value", void 0)
+  };
+  outputs = {
+    output: new J("Output", void 0).setHidden(!0)
+  };
+  calculate = ({ placeholder: e }) => ({
+    output: e
+  });
+}
+const Do = [
+  "component",
+  "connectionCount",
+  "events",
+  "hidden",
+  "hooks",
+  "id",
+  "isCodeNode",
+  "isInput",
+  "name",
+  "nodeId",
+  "port",
+  "templateId",
+  "value"
+];
+function Fo(n) {
+  return class extends lt {
+    type = st(n);
+    get title() {
+      return this._title;
+    }
+    set title(t) {
+      this.template.name = t;
+    }
+    inputs = {};
+    outputs = {};
+    template = n;
+    subgraph;
+    update() {
+    }
+    onConnected() {
+    }
+    onUnconnected() {
+    }
+    calculate = async (t, s) => {
+      if (!this.subgraph) throw new Error(`GraphNode ${this.id}: calculate called without subgraph being initialized`);
+      if (!s.engine || typeof s.engine != "object")
+        throw new Error(`GraphNode ${this.id}: calculate called but no engine provided in context`);
+      const o = s.engine.getInputValues(this.subgraph);
+      for (const a of this.subgraph.inputs)
+        o.set(a.nodeInterfaceId, t[a.id]);
+      const r = await s.engine.runGraph(
+        this.subgraph,
+        o,
+        s.globalValues
+      );
+      s.engine.pause(), rt(r, s.engine.editor), s.engine.resume();
+      const i = {};
+      for (const a of this.subgraph.outputs)
+        i[a.id] = r.get(a.nodeId)?.get("output");
+      return i._calculationResults = r, this.lockCode || (i._code = this.renderCode({ inputs: t, ...s.globalValues })), this.updateOutputValues(i), i;
+    };
+    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();
+    }
+    onDestroy() {
+      this.template.events.updated.unsubscribe(this), this.template.events.nameChanged.unsubscribe(this), this.subgraph?.destroy();
+    }
+    initialize() {
+      this.subgraph && this.subgraph.destroy(), this.subgraph = this.template.createGraph(), this._title = this.template.name, this.updateInterfaces(), this.state.codeTemplate = `{{ #nodes }}{{ script }}
+{{ /nodes }}`, this.events.update.emit(null);
+    }
+    /**
+     * Render code of this node.
+     */
+    renderCode(t) {
+      return this.subgraph ? this.subgraph.renderCode({ nodes: this.subgraph.scriptedCodeNodes }) : ce.render(this.state.codeTemplate, t);
+    }
+    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((s) => s.id === t) || this.removeInput(t);
+      for (const t of this.subgraph.outputs)
+        t.id in this.outputs ? this.outputs[t.id].name = t.name : this.addOutput(t.id, this.createProxyInterface(t, !1));
+      for (const t of Object.keys(this.outputs))
+        this.subgraph.outputs.some((s) => s.id === t) || this.removeOutput(t);
+      this.addInput(
+        "_code",
+        new D("", []).use(V, X).use(de).setHidden(!0)
+      ), this.addOutput(
+        "_code",
+        new D("", []).use(V, X).use(de).setHidden(!0)
+      ), this.addOutput("_calculationResults", new J("_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, s) {
+      const o = new D(t.name, void 0);
+      return new Proxy(o, {
+        get: (r, i) => {
+          if (Do.includes(i) || i in r || typeof i == "string" && i.startsWith("__v_"))
+            return Reflect.get(r, i);
+          let a;
+          s ? a = this.subgraph?.nodes.find(
+            (C) => _t.isGraphInputNode(C) && C.graphInterfaceId === t.id
+          )?.outputs.placeholder.id : a = this.subgraph?.nodes.find(
+            (C) => Ct.isGraphOutputNode(C) && C.graphInterfaceId === t.id
+          )?.inputs.placeholder.id;
+          const l = this.subgraph?.connections.find((f) => a === (s ? f.from : f.to)?.id), d = s ? l?.to : l?.from;
+          if (d) return Reflect.get(d, i);
+        }
+      });
+    }
+  };
+}
+function Wo(n, e) {
   return Object.fromEntries(Object.entries(n).filter(e));
 }
-function ys(n, e) {
+function Yo(n, e) {
   return Object.fromEntries(Object.entries(n).map(([t, s]) => [t, e(s)]));
 }
-class ce extends It {
+class Ne extends Gt {
   /** Create a new GraphTemplate from the nodes and connections inside the graph instance */
   static fromGraph(e, t) {
-    return new ce(e.save(), t);
+    return new Ne(e.save(), t);
   }
   constructor(e, t) {
     super(e, t);
@@ -1334,52 +1425,52 @@ class ce extends It {
    * or load the state into the provided graph instance.
    */
   createGraph(e) {
-    const t = /* @__PURE__ */ new Map(), s = (m) => {
-      const k = K();
-      return t.set(m, k), k;
-    }, o = (m) => {
-      const k = t.get(m);
-      if (!k) throw new Error(`Unable to create graph from template: Could not map old id ${m} to new id`);
-      return k;
-    }, a = (m) => ys(m, (k) => ({
-      id: s(k.id),
-      templateId: k.id,
-      value: k.value
-    })), i = this.nodes.map((m) => ({
-      ...m,
-      id: s(m.id),
-      inputs: a(m.inputs),
-      outputs: a(m.outputs)
-    })), r = this.connections.map((m) => ({
-      id: s(m.id),
-      from: o(m.from),
-      to: o(m.to)
-    })), c = this.inputs.map((m) => ({
-      id: m.id,
-      name: m.name,
-      nodeId: o(m.nodeId),
-      nodeInterfaceId: o(m.nodeInterfaceId)
-    })), h = this.outputs.map((m) => ({
-      id: m.id,
-      name: m.name,
-      nodeId: o(m.nodeId),
-      nodeInterfaceId: o(m.nodeInterfaceId)
-    })), g = {
-      id: K(),
+    const t = /* @__PURE__ */ new Map(), s = (h) => {
+      const N = re();
+      return t.set(h, N), N;
+    }, o = (h) => {
+      const N = t.get(h);
+      if (!N) throw new Error(`Unable to create graph from template: Could not map old id ${h} to new id`);
+      return N;
+    }, r = (h) => Yo(h, (N) => ({
+      id: s(N.id),
+      templateId: N.id,
+      value: N.value
+    })), i = this.nodes.map((h) => ({
+      ...h,
+      id: s(h.id),
+      inputs: r(h.inputs),
+      outputs: r(h.outputs)
+    })), a = this.connections.map((h) => ({
+      id: s(h.id),
+      from: o(h.from),
+      to: o(h.to)
+    })), l = this.inputs.map((h) => ({
+      id: h.id,
+      name: h.name,
+      nodeId: o(h.nodeId),
+      nodeInterfaceId: o(h.nodeInterfaceId)
+    })), d = this.outputs.map((h) => ({
+      id: h.id,
+      name: h.name,
+      nodeId: o(h.nodeId),
+      nodeInterfaceId: o(h.nodeInterfaceId)
+    })), f = {
+      id: re(),
       nodes: i,
-      connections: r,
-      inputs: c,
-      outputs: h
+      connections: a,
+      inputs: l,
+      outputs: d
     };
-    return e || (e = new ue(this.editor)), e.load(g).forEach((m) => console.warn(m)), e.template = this, e;
+    return e || (e = new Ie(this.editor)), e.load(f).forEach((h) => console.warn(h)), e.template = this, e;
   }
 }
-const Cs = (n) => !(n instanceof ue);
-function Is(n, e) {
+const Xo = (n) => !(n instanceof Ie);
+function Ko(n, e) {
   return { switchGraph: (s) => {
     let o;
-    if (Cs(s))
-      o = new ue(n.value), s.createGraph(o);
+    if (Xo(s))
+      o = new Ie(n.value), s.createGraph(o);
     else {
       if (s !== n.value.graph)
         throw new Error(
@@ -1390,32 +1481,601 @@ function Is(n, e) {
     e.value && e.value !== n.value.graph && e.value.destroy(), o.panning = o.panning ?? s.panning ?? { x: 0, y: 0 }, o.scaling = o.scaling ?? s.scaling ?? 1, o.selectedNodes = o.selectedNodes ?? [], o.sidebar = o.sidebar ?? { visible: !1, nodeId: "", optionName: "" }, e.value = o, o.code?.engine?.runOnce(null);
   } };
 }
-const $o = /* @__PURE__ */ F({
+function qo(n) {
+  return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n;
+}
+var we = { exports: {} };
+var Jo = we.exports, Xe;
+function Qo() {
+  return Xe || (Xe = 1, (function(n, e) {
+    (function(s, o) {
+      n.exports = o();
+    })(Jo, function() {
+      return (
+        /******/
+        (function() {
+          var t = {
+            /***/
+            686: (
+              /***/
+              (function(r, i, a) {
+                a.d(i, {
+                  default: function() {
+                    return (
+                      /* binding */
+                      $
+                    );
+                  }
+                });
+                var l = a(279), d = /* @__PURE__ */ a.n(l), f = a(370), C = /* @__PURE__ */ a.n(f), h = a(817), N = /* @__PURE__ */ a.n(h);
+                function v(g) {
+                  try {
+                    return document.execCommand(g);
+                  } catch {
+                    return !1;
+                  }
+                }
+                var w = function(c) {
+                  var _ = N()(c);
+                  return v("cut"), _;
+                }, u = w;
+                function y(g) {
+                  var c = document.documentElement.getAttribute("dir") === "rtl", _ = document.createElement("textarea");
+                  _.style.fontSize = "12pt", _.style.border = "0", _.style.padding = "0", _.style.margin = "0", _.style.position = "absolute", _.style[c ? "right" : "left"] = "-9999px";
+                  var x = window.pageYOffset || document.documentElement.scrollTop;
+                  return _.style.top = "".concat(x, "px"), _.setAttribute("readonly", ""), _.value = g, _;
+                }
+                var M = function(c, _) {
+                  var x = y(c);
+                  _.container.appendChild(x);
+                  var I = N()(x);
+                  return v("copy"), x.remove(), I;
+                }, T = function(c) {
+                  var _ = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+                    container: document.body
+                  }, x = "";
+                  return typeof c == "string" ? x = M(c, _) : c instanceof HTMLInputElement && !["text", "search", "url", "tel", "password"].includes(c?.type) ? x = M(c.value, _) : (x = N()(c), v("copy")), x;
+                }, S = T;
+                function Q(g) {
+                  "@babel/helpers - typeof";
+                  return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? Q = function(_) {
+                    return typeof _;
+                  } : Q = function(_) {
+                    return _ && typeof Symbol == "function" && _.constructor === Symbol && _ !== Symbol.prototype ? "symbol" : typeof _;
+                  }, Q(g);
+                }
+                var Z = function() {
+                  var c = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ = c.action, x = _ === void 0 ? "copy" : _, I = c.container, E = c.target, Y = c.text;
+                  if (x !== "copy" && x !== "cut")
+                    throw new Error('Invalid "action" value, use either "copy" or "cut"');
+                  if (E !== void 0)
+                    if (E && Q(E) === "object" && E.nodeType === 1) {
+                      if (x === "copy" && E.hasAttribute("disabled"))
+                        throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
+                      if (x === "cut" && (E.hasAttribute("readonly") || E.hasAttribute("disabled")))
+                        throw new Error(`Invalid "target" attribute. You can't cut text from elements with "readonly" or "disabled" attributes`);
+                    } else
+                      throw new Error('Invalid "target" value, use a valid Element');
+                  if (Y)
+                    return S(Y, {
+                      container: I
+                    });
+                  if (E)
+                    return x === "cut" ? u(E) : S(E, {
+                      container: I
+                    });
+                }, pe = Z;
+                function K(g) {
+                  "@babel/helpers - typeof";
+                  return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? K = function(_) {
+                    return typeof _;
+                  } : K = function(_) {
+                    return _ && typeof Symbol == "function" && _.constructor === Symbol && _ !== Symbol.prototype ? "symbol" : typeof _;
+                  }, K(g);
+                }
+                function k(g, c) {
+                  if (!(g instanceof c))
+                    throw new TypeError("Cannot call a class as a function");
+                }
+                function R(g, c) {
+                  for (var _ = 0; _ < c.length; _++) {
+                    var x = c[_];
+                    x.enumerable = x.enumerable || !1, x.configurable = !0, "value" in x && (x.writable = !0), Object.defineProperty(g, x.key, x);
+                  }
+                }
+                function z(g, c, _) {
+                  return c && R(g.prototype, c), _ && R(g, _), g;
+                }
+                function ge(g, c) {
+                  if (typeof c != "function" && c !== null)
+                    throw new TypeError("Super expression must either be null or a function");
+                  g.prototype = Object.create(c && c.prototype, { constructor: { value: g, writable: !0, configurable: !0 } }), c && he(g, c);
+                }
+                function he(g, c) {
+                  return he = Object.setPrototypeOf || function(x, I) {
+                    return x.__proto__ = I, x;
+                  }, he(g, c);
+                }
+                function Ee(g) {
+                  var c = Te();
+                  return function() {
+                    var x = oe(g), I;
+                    if (c) {
+                      var E = oe(this).constructor;
+                      I = Reflect.construct(x, arguments, E);
+                    } else
+                      I = x.apply(this, arguments);
+                    return be(this, I);
+                  };
+                }
+                function be(g, c) {
+                  return c && (K(c) === "object" || typeof c == "function") ? c : ye(g);
+                }
+                function ye(g) {
+                  if (g === void 0)
+                    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+                  return g;
+                }
+                function Te() {
+                  if (typeof Reflect > "u" || !Reflect.construct || Reflect.construct.sham) return !1;
+                  if (typeof Proxy == "function") return !0;
+                  try {
+                    return Date.prototype.toString.call(Reflect.construct(Date, [], function() {
+                    })), !0;
+                  } catch {
+                    return !1;
+                  }
+                }
+                function oe(g) {
+                  return oe = Object.setPrototypeOf ? Object.getPrototypeOf : function(_) {
+                    return _.__proto__ || Object.getPrototypeOf(_);
+                  }, oe(g);
+                }
+                function ie(g, c) {
+                  var _ = "data-clipboard-".concat(g);
+                  if (c.hasAttribute(_))
+                    return c.getAttribute(_);
+                }
+                var _e = /* @__PURE__ */ (function(g) {
+                  ge(_, g);
+                  var c = Ee(_);
+                  function _(x, I) {
+                    var E;
+                    return k(this, _), E = c.call(this), E.resolveOptions(I), E.listenClick(x), E;
+                  }
+                  return z(_, [{
+                    key: "resolveOptions",
+                    value: function() {
+                      var I = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+                      this.action = typeof I.action == "function" ? I.action : this.defaultAction, this.target = typeof I.target == "function" ? I.target : this.defaultTarget, this.text = typeof I.text == "function" ? I.text : this.defaultText, this.container = K(I.container) === "object" ? I.container : document.body;
+                    }
+                    /**
+                     * Adds a click event listener to the passed trigger.
+                     * @param {String|HTMLElement|HTMLCollection|NodeList} trigger
+                     */
+                  }, {
+                    key: "listenClick",
+                    value: function(I) {
+                      var E = this;
+                      this.listener = C()(I, "click", function(Y) {
+                        return E.onClick(Y);
+                      });
+                    }
+                    /**
+                     * Defines a new `ClipboardAction` on each click event.
+                     * @param {Event} e
+                     */
+                  }, {
+                    key: "onClick",
+                    value: function(I) {
+                      var E = I.delegateTarget || I.currentTarget, Y = this.action(E) || "copy", Ce = pe({
+                        action: Y,
+                        container: this.container,
+                        target: this.target(E),
+                        text: this.text(E)
+                      });
+                      this.emit(Ce ? "success" : "error", {
+                        action: Y,
+                        text: Ce,
+                        trigger: E,
+                        clearSelection: function() {
+                          E && E.focus(), window.getSelection().removeAllRanges();
+                        }
+                      });
+                    }
+                    /**
+                     * Default `action` lookup function.
+                     * @param {Element} trigger
+                     */
+                  }, {
+                    key: "defaultAction",
+                    value: function(I) {
+                      return ie("action", I);
+                    }
+                    /**
+                     * Default `target` lookup function.
+                     * @param {Element} trigger
+                     */
+                  }, {
+                    key: "defaultTarget",
+                    value: function(I) {
+                      var E = ie("target", I);
+                      if (E)
+                        return document.querySelector(E);
+                    }
+                    /**
+                     * Allow fire programmatically a copy action
+                     * @param {String|HTMLElement} target
+                     * @param {Object} options
+                     * @returns Text copied.
+                     */
+                  }, {
+                    key: "defaultText",
+                    /**
+                     * Default `text` lookup function.
+                     * @param {Element} trigger
+                     */
+                    value: function(I) {
+                      return ie("text", I);
+                    }
+                    /**
+                     * Destroy lifecycle.
+                     */
+                  }, {
+                    key: "destroy",
+                    value: function() {
+                      this.listener.destroy();
+                    }
+                  }], [{
+                    key: "copy",
+                    value: function(I) {
+                      var E = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+                        container: document.body
+                      };
+                      return S(I, E);
+                    }
+                    /**
+                     * Allow fire programmatically a cut action
+                     * @param {String|HTMLElement} target
+                     * @returns Text cutted.
+                     */
+                  }, {
+                    key: "cut",
+                    value: function(I) {
+                      return u(I);
+                    }
+                    /**
+                     * Returns the support of the given action, or all actions if no action is
+                     * given.
+                     * @param {String} [action]
+                     */
+                  }, {
+                    key: "isSupported",
+                    value: function() {
+                      var I = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : ["copy", "cut"], E = typeof I == "string" ? [I] : I, Y = !!document.queryCommandSupported;
+                      return E.forEach(function(Ce) {
+                        Y = Y && !!document.queryCommandSupported(Ce);
+                      }), Y;
+                    }
+                  }]), _;
+                })(d()), $ = _e;
+              })
+            ),
+            /***/
+            828: (
+              /***/
+              (function(r) {
+                var i = 9;
+                if (typeof Element < "u" && !Element.prototype.matches) {
+                  var a = Element.prototype;
+                  a.matches = a.matchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector || a.webkitMatchesSelector;
+                }
+                function l(d, f) {
+                  for (; d && d.nodeType !== i; ) {
+                    if (typeof d.matches == "function" && d.matches(f))
+                      return d;
+                    d = d.parentNode;
+                  }
+                }
+                r.exports = l;
+              })
+            ),
+            /***/
+            438: (
+              /***/
+              (function(r, i, a) {
+                var l = a(828);
+                function d(h, N, v, w, u) {
+                  var y = C.apply(this, arguments);
+                  return h.addEventListener(v, y, u), {
+                    destroy: function() {
+                      h.removeEventListener(v, y, u);
+                    }
+                  };
+                }
+                function f(h, N, v, w, u) {
+                  return typeof h.addEventListener == "function" ? d.apply(null, arguments) : typeof v == "function" ? d.bind(null, document).apply(null, arguments) : (typeof h == "string" && (h = document.querySelectorAll(h)), Array.prototype.map.call(h, function(y) {
+                    return d(y, N, v, w, u);
+                  }));
+                }
+                function C(h, N, v, w) {
+                  return function(u) {
+                    u.delegateTarget = l(u.target, N), u.delegateTarget && w.call(h, u);
+                  };
+                }
+                r.exports = f;
+              })
+            ),
+            /***/
+            879: (
+              /***/
+              (function(r, i) {
+                i.node = function(a) {
+                  return a !== void 0 && a instanceof HTMLElement && a.nodeType === 1;
+                }, i.nodeList = function(a) {
+                  var l = Object.prototype.toString.call(a);
+                  return a !== void 0 && (l === "[object NodeList]" || l === "[object HTMLCollection]") && "length" in a && (a.length === 0 || i.node(a[0]));
+                }, i.string = function(a) {
+                  return typeof a == "string" || a instanceof String;
+                }, i.fn = function(a) {
+                  var l = Object.prototype.toString.call(a);
+                  return l === "[object Function]";
+                };
+              })
+            ),
+            /***/
+            370: (
+              /***/
+              (function(r, i, a) {
+                var l = a(879), d = a(438);
+                function f(v, w, u) {
+                  if (!v && !w && !u)
+                    throw new Error("Missing required arguments");
+                  if (!l.string(w))
+                    throw new TypeError("Second argument must be a String");
+                  if (!l.fn(u))
+                    throw new TypeError("Third argument must be a Function");
+                  if (l.node(v))
+                    return C(v, w, u);
+                  if (l.nodeList(v))
+                    return h(v, w, u);
+                  if (l.string(v))
+                    return N(v, w, u);
+                  throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList");
+                }
+                function C(v, w, u) {
+                  return v.addEventListener(w, u), {
+                    destroy: function() {
+                      v.removeEventListener(w, u);
+                    }
+                  };
+                }
+                function h(v, w, u) {
+                  return Array.prototype.forEach.call(v, function(y) {
+                    y.addEventListener(w, u);
+                  }), {
+                    destroy: function() {
+                      Array.prototype.forEach.call(v, function(y) {
+                        y.removeEventListener(w, u);
+                      });
+                    }
+                  };
+                }
+                function N(v, w, u) {
+                  return d(document.body, v, w, u);
+                }
+                r.exports = f;
+              })
+            ),
+            /***/
+            817: (
+              /***/
+              (function(r) {
+                function i(a) {
+                  var l;
+                  if (a.nodeName === "SELECT")
+                    a.focus(), l = a.value;
+                  else if (a.nodeName === "INPUT" || a.nodeName === "TEXTAREA") {
+                    var d = a.hasAttribute("readonly");
+                    d || a.setAttribute("readonly", ""), a.select(), a.setSelectionRange(0, a.value.length), d || a.removeAttribute("readonly"), l = a.value;
+                  } else {
+                    a.hasAttribute("contenteditable") && a.focus();
+                    var f = window.getSelection(), C = document.createRange();
+                    C.selectNodeContents(a), f.removeAllRanges(), f.addRange(C), l = f.toString();
+                  }
+                  return l;
+                }
+                r.exports = i;
+              })
+            ),
+            /***/
+            279: (
+              /***/
+              (function(r) {
+                function i() {
+                }
+                i.prototype = {
+                  on: function(a, l, d) {
+                    var f = this.e || (this.e = {});
+                    return (f[a] || (f[a] = [])).push({
+                      fn: l,
+                      ctx: d
+                    }), this;
+                  },
+                  once: function(a, l, d) {
+                    var f = this;
+                    function C() {
+                      f.off(a, C), l.apply(d, arguments);
+                    }
+                    return C._ = l, this.on(a, C, d);
+                  },
+                  emit: function(a) {
+                    var l = [].slice.call(arguments, 1), d = ((this.e || (this.e = {}))[a] || []).slice(), f = 0, C = d.length;
+                    for (f; f < C; f++)
+                      d[f].fn.apply(d[f].ctx, l);
+                    return this;
+                  },
+                  off: function(a, l) {
+                    var d = this.e || (this.e = {}), f = d[a], C = [];
+                    if (f && l)
+                      for (var h = 0, N = f.length; h < N; h++)
+                        f[h].fn !== l && f[h].fn._ !== l && C.push(f[h]);
+                    return C.length ? d[a] = C : delete d[a], this;
+                  }
+                }, r.exports = i, r.exports.TinyEmitter = i;
+              })
+            )
+            /******/
+          }, s = {};
+          function o(r) {
+            if (s[r])
+              return s[r].exports;
+            var i = s[r] = {
+              /******/
+              // no module.id needed
+              /******/
+              // no module.loaded needed
+              /******/
+              exports: {}
+              /******/
+            };
+            return t[r](i, i.exports, o), i.exports;
+          }
+          return (function() {
+            o.n = function(r) {
+              var i = r && r.__esModule ? (
+                /******/
+                function() {
+                  return r.default;
+                }
+              ) : (
+                /******/
+                function() {
+                  return r;
+                }
+              );
+              return o.d(i, { a: i }), i;
+            };
+          })(), (function() {
+            o.d = function(r, i) {
+              for (var a in i)
+                o.o(i, a) && !o.o(r, a) && Object.defineProperty(r, a, { enumerable: !0, get: i[a] });
+            };
+          })(), (function() {
+            o.o = function(r, i) {
+              return Object.prototype.hasOwnProperty.call(r, i);
+            };
+          })(), o(686);
+        })().default
+      );
+    });
+  })(we)), we.exports;
+}
+var Zo = Qo();
+const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
+  toClipboard(e, t) {
+    return new Promise((s, o) => {
+      const r = document.createElement("button"), i = new es(r, {
+        text: () => e,
+        action: () => "copy",
+        container: t !== void 0 ? t : document.body
+      });
+      i.on("success", (a) => {
+        i.destroy(), s(a);
+      }), i.on("error", (a) => {
+        i.destroy(), o(a);
+      }), document.body.appendChild(r), r.click(), document.body.removeChild(r);
+    });
+  }
+}), ns = {
+  key: 0,
+  class: "baklava-button"
+}, os = /* @__PURE__ */ F({
+  __name: "CopyToClipboard",
+  props: { text: String },
+  setup(n) {
+    const { toClipboard: e } = ts(), s = Me(n, "text"), o = H(!1), r = async () => {
+      try {
+        await e(s.value), o.value = !0, setTimeout(() => o.value = !1, 1500), console.log("Copied to clipboard");
+      } catch (i) {
+        console.error(i);
+      }
+    };
+    return (i, a) => (p(), b("div", null, [
+      o.value ? (p(), b("button", ns, [
+        G(O(On))
+      ])) : (p(), b("button", {
+        key: 1,
+        onClick: r,
+        class: "baklava-button"
+      }, [
+        G(O(jn))
+      ]))
+    ]));
+  }
+}), ss = { class: "code-editor" }, rs = { class: "code-buttons" }, Cr = /* @__PURE__ */ F({
+  __name: "CodeEditor",
+  props: /* @__PURE__ */ Ue({
+    locked: { type: Boolean },
+    extensions: {}
+  }, {
+    modelValue: { required: !0, type: String },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Ue(["update:locked"], ["update:modelValue"]),
+  setup(n, { emit: e }) {
+    const t = xt(n, "modelValue"), s = e, o = (r) => s("update:locked", r);
+    return (r, i) => {
+      const a = Ze("codemirror");
+      return p(), b("div", ss, [
+        m("div", rs, [
+          n.locked ? (p(), b("button", {
+            key: 0,
+            class: "baklava-button",
+            title: "The code is locked.",
+            onClick: i[0] || (i[0] = (l) => o(!1))
+          }, [
+            G(O(ht))
+          ])) : j("", !0),
+          G(os, { text: n.modelValue }, null, 8, ["text"])
+        ]),
+        G(a, {
+          modelValue: t.value,
+          "onUpdate:modelValue": i[1] || (i[1] = (l) => t.value = l),
+          extensions: n.extensions,
+          class: "codemirror",
+          style: { height: "100%" },
+          onKeydown: i[2] || (i[2] = (l) => o(!0))
+        }, null, 8, ["modelValue", "extensions"])
+      ]);
+    };
+  }
+}), wr = /* @__PURE__ */ F({
   __name: "CodeGraphEditor",
   props: {
     viewModel: {}
   },
   setup(n) {
-    const t = Be(n, "viewModel"), s = (o) => o.events.update.emit(null);
-    return fe(() => {
+    const t = Me(n, "viewModel"), s = (o) => o.events.update.emit(null);
+    return Se(() => {
       t.value.subscribe && t.value.subscribe(), t.value.engine?.start();
-    }), ze(() => {
+    }), et(() => {
       t.value.unsubscribe && t.value.unsubscribe(), t.value.engine?.stop();
-    }), He(t, (o, a) => {
-      a && a.unsubscribe(), o && o.subscribe();
-    }), (o, a) => (d(), j(w(Bt), { viewModel: t.value }, {
+    }), tt(t, (o, r) => {
+      r && r.unsubscribe(), o && o.subscribe();
+    }), (o, r) => (p(), B(O(qt), { viewModel: t.value }, {
       palette: ee(() => [
-        L(w(Ls))
+        G(O(As))
       ]),
       node: ee((i) => [
-        L(w(Ps), mt(i, {
-          onUpdate: (r) => s(i.node)
+        G(O(gs), Et(i, {
+          onUpdate: (a) => s(i.node)
         }), null, 16, ["onUpdate"])
       ]),
       sidebar: ee((i) => [
-        L(w(Qs), pt(ht(i)), {
-          codeEditor: ee(({ node: r }) => [
-            ne(o.$slots, "sidebarCodeEditor", { node: r })
+        G(O($s), It(Nt(i)), {
+          codeEditor: ee(({ node: a }) => [
+            q(o.$slots, "sidebarCodeEditor", { node: a })
           ]),
           _: 3
         }, 16)
@@ -1423,27 +2083,27 @@ const $o = /* @__PURE__ */ F({
       _: 3
     }, 8, ["viewModel"]));
   }
-}), ws = { class: "code-graph-info" }, Mo = /* @__PURE__ */ F({
+}), as = { class: "code-graph-info" }, kr = /* @__PURE__ */ F({
   __name: "CodeGraphInfo",
   props: {
     viewModel: {}
   },
   setup(n) {
-    return (e, t) => (d(), p("div", ws, [
-      u("div", null, "Editor graph: " + G(n.viewModel.editor.graph.shortId), 1),
-      u("div", null, "Displayed graph: " + G(n.viewModel.displayedGraph.shortId), 1),
-      u("div", null, "Graphs: " + G(n.viewModel.editor.graphIds), 1),
-      u("div", null, "Graph templates: " + G(n.viewModel.editor.graphTemplateIds), 1),
-      u("div", null, "Engine status: " + G(n.viewModel.engine?.status), 1)
+    return (e, t) => (p(), b("div", as, [
+      m("div", null, "Editor graph: " + L(n.viewModel.editor.graph.shortId), 1),
+      m("div", null, "Displayed graph: " + L(n.viewModel.displayedGraph.shortId), 1),
+      m("div", null, "Graphs: " + L(n.viewModel.editor.graphIds), 1),
+      m("div", null, "Graph templates: " + L(n.viewModel.editor.graphTemplateIds), 1),
+      m("div", null, "Engine status: " + L(n.viewModel.engine?.status), 1)
     ]));
   }
-}), ks = ["id", "data-node-type"], Ns = {
+}), is = ["id", "data-node-type"], ls = {
   class: "__title-label",
   style: { "flex-grow": "1" }
-}, xs = { key: 0 }, Os = {
+}, us = { key: 0 }, ds = {
   class: "__menu",
   style: { display: "flex" }
-}, Ts = { class: "__outputs" }, Es = { key: 0 }, $s = ["id", "title"], Ms = { class: "__inputs" }, Gs = { key: 0 }, Ss = ["id", "title"], Ps = /* @__PURE__ */ F({
+}, cs = { class: "__outputs" }, ps = { key: 0 }, hs = ["id", "title"], fs = { class: "__inputs" }, ms = { key: 0 }, vs = ["id", "title"], gs = /* @__PURE__ */ F({
   __name: "CodeGraphNode",
   props: {
     node: {},
@@ -1452,366 +2112,275 @@ const $o = /* @__PURE__ */ F({
   },
   emits: ["select", "start-drag", "update"],
   setup(n, { emit: e }) {
-    const t = me.ContextMenu, s = me.NodeInterface, o = n, a = O(() => o.node), i = e, { viewModel: r } = oe(), { graph: c, switchGraph: h } = ge(), g = V(null), _ = V(!1), m = V(""), k = V(null), b = V(!1);
-    let I = 0, l = 0;
-    const f = V(!1), N = O(() => {
-      const C = [
+    const t = $e.ContextMenu, s = $e.NodeInterface, o = n, r = P(() => o.node), i = e, { viewModel: a } = me(), { graph: l, switchGraph: d } = Ge(), f = H(null), C = H(!1), h = H(""), N = H(null), v = H(!1);
+    let w = 0, u = 0;
+    const y = H(!1), M = P(() => {
+      const $ = [
         { value: "edit", label: "Edit" },
         { value: "rename", label: "Rename" },
         { value: "delete", label: "Delete" }
       ];
-      return o.node.type.startsWith(wt) && C.push({ value: "editSubgraph", label: "Edit Subgraph" }), C;
-    }), y = O(() => ({
+      return o.node.type.startsWith(At) && $.push({ value: "editSubgraph", label: "Edit Subgraph" }), $;
+    }), T = P(() => ({
       "--selected": o.selected,
       "--dragging": o.dragging,
       "--two-column": !!o.node.twoColumn,
-      "--hidden": a.value.state?.hidden
-    })), T = O(() => ({
-      "--reverse-y": o.node.reverseY ?? r.value.settings.nodes.reverseY
-    })), ie = O(() => ({
+      "--hidden": r.value.state?.hidden
+    })), S = P(() => ({
+      "--reverse-y": o.node.reverseY ?? a.value.settings.nodes.reverseY
+    })), Q = P(() => ({
       top: `${o.node.position?.y ?? 0}px`,
       left: `${o.node.position?.x ?? 0}px`,
-      "--width": `${o.node.width ?? r.value.settings.nodes.defaultWidth}px`
-    })), W = O(() => Object.values(o.node.inputs).filter((C) => !C.hidden)), pe = O(() => Object.values(o.node.outputs).filter((C) => !C.hidden)), re = () => {
+      "--width": `${o.node.width ?? a.value.settings.nodes.defaultWidth}px`
+    })), Z = P(() => Object.values(o.node.inputs).filter(($) => !$.hidden)), pe = P(() => Object.values(o.node.outputs).filter(($) => !$.hidden)), K = () => {
       i("select");
-    }, v = (C) => {
-      o.selected || re(), i("start-drag", C);
-    }, S = () => {
-      f.value = !0;
-    }, H = () => {
-      const C = r.value.displayedGraph.sidebar;
-      C.nodeId = "", C.visible = !1;
-    }, Ne = () => {
-      const C = r.value.displayedGraph.sidebar;
-      C.nodeId = o.node.id, C.visible = !0;
-    }, rt = () => {
-      const C = r.value.displayedGraph.sidebar;
-      C.nodeId = o.node.id;
-    }, dt = async (C) => {
-      switch (C) {
+    }, k = ($) => {
+      o.selected || K(), i("start-drag", $);
+    }, R = () => {
+      y.value = !0;
+    }, z = () => {
+      const $ = a.value.displayedGraph.sidebar;
+      $.nodeId = "", $.visible = !1;
+    }, ge = () => {
+      const $ = a.value.displayedGraph.sidebar;
+      $.nodeId = o.node.id, $.visible = !0;
+    }, he = () => {
+      const $ = a.value.displayedGraph.sidebar;
+      $.nodeId = o.node.id;
+    }, Ee = async ($) => {
+      switch ($) {
         case "edit":
-          Ne();
+          ge();
           break;
         case "delete":
-          c.value.removeNode(o.node);
+          l.value.removeNode(o.node);
           break;
         case "rename":
-          m.value = o.node.title, _.value = !0, await vt(), k.value?.focus();
+          h.value = o.node.title, C.value = !0, await Tt(), N.value?.focus();
           break;
         case "editSubgraph":
-          h(o.node.template);
+          d(o.node.template);
           break;
       }
-    }, xe = () => {
-      a.value.title = m.value, _.value = !1;
-    }, Oe = () => {
-      g.value && r.value.hooks.renderNode.execute({ node: o.node, el: g.value });
-    }, lt = (C) => {
-      b.value = !0, I = o.node.width, l = C.clientX, C.preventDefault();
-    }, Te = (C) => {
-      a.value.state && (a.value.state.integrated = C, i("update"));
-    }, Ee = (C) => {
-      if (!b.value) return;
-      const E = C.clientX - l, x = I + E / c.value.scaling, ut = r.value.settings.nodes.minWidth, ct = r.value.settings.nodes.maxWidth;
-      a.value.width = Math.max(ut, Math.min(ct, x));
-    }, $e = () => {
-      b.value = !1;
+    }, be = () => {
+      r.value.title = h.value, C.value = !1;
+    }, ye = () => {
+      f.value && a.value.hooks.renderNode.execute({ node: o.node, el: f.value });
+    }, Te = ($) => {
+      v.value = !0, w = o.node.width, u = $.clientX, $.preventDefault();
+    }, oe = ($) => {
+      r.value.state && (r.value.state.integrated = $, i("update"));
+    }, ie = ($) => {
+      if (!v.value) return;
+      const g = $.clientX - u, c = w + g / l.value.scaling, _ = a.value.settings.nodes.minWidth, x = a.value.settings.nodes.maxWidth;
+      r.value.width = Math.max(_, Math.min(x, c));
+    }, _e = () => {
+      v.value = !1;
     };
-    return fe(() => {
-      Oe(), window.addEventListener("mousemove", Ee), window.addEventListener("mouseup", $e);
-    }), Le(Oe), ze(() => {
-      window.removeEventListener("mousemove", Ee), window.removeEventListener("mouseup", $e);
-    }), (C, E) => (d(), p("div", {
-      id: a.value.id,
+    return Se(() => {
+      ye(), window.addEventListener("mousemove", ie), window.addEventListener("mouseup", _e);
+    }), nt(ye), et(() => {
+      window.removeEventListener("mousemove", ie), window.removeEventListener("mouseup", _e);
+    }), ($, g) => (p(), b("div", {
+      id: r.value.id,
       ref_key: "el",
-      ref: g,
-      class: Y([y.value, "baklava-node"]),
-      "data-node-type": a.value.type,
-      style: ve(ie.value),
-      onPointerdown: re
+      ref: f,
+      class: ne([T.value, "baklava-node"]),
+      "data-node-type": r.value.type,
+      style: Pe(Q.value),
+      onPointerdown: K
     }, [
-      w(r).settings.nodes.resizable ? (d(), p("div", {
+      O(a).settings.nodes.resizable ? (p(), b("div", {
         key: 0,
         class: "__resize-handle",
-        onMousedown: lt
-      }, null, 32)) : M("", !0),
-      u("div", {
+        onMousedown: Te
+      }, null, 32)) : j("", !0),
+      m("div", {
         class: "__title",
-        onPointerdown: te(v, ["self", "stop"]),
-        onContextmenu: te(S, ["prevent"])
+        onPointerdown: le(k, ["self", "stop"]),
+        onContextmenu: le(R, ["prevent"])
       }, [
-        a.value.inputs._code ? (d(), j(w(Ve), {
+        r.value.inputs._code ? (p(), B(O(Ke), {
           key: 0,
-          node: a.value,
-          intf: a.value.inputs._code,
-          title: a.value.inputs._code.value,
+          node: r.value,
+          intf: r.value.inputs._code,
+          title: r.value.inputs._code.value,
           class: "--input",
           "data-interface-type": "node",
           style: { "flex-grow": "0" }
-        }, null, 8, ["node", "intf", "title"])) : M("", !0),
-        _.value ? de((d(), p("input", {
+        }, null, 8, ["node", "intf", "title"])) : j("", !0),
+        C.value ? ke((p(), b("input", {
           key: 2,
           ref_key: "renameInputEl",
-          ref: k,
-          "onUpdate:modelValue": E[4] || (E[4] = (x) => m.value = x),
+          ref: N,
+          "onUpdate:modelValue": g[4] || (g[4] = (c) => h.value = c),
           class: "baklava-input",
           placeholder: "Node Name",
           style: { "flex-grow": "1" },
           type: "text",
-          onBlur: xe,
-          onKeydown: he(xe, ["enter"])
+          onBlur: be,
+          onKeydown: Oe(be, ["enter"])
         }, null, 544)), [
-          [le, m.value]
-        ]) : (d(), p(B, { key: 1 }, [
-          u("div", Ns, [
-            a.value.idx > -1 ? (d(), p("span", xs, G(a.value.idx + 1) + " - ", 1)) : M("", !0),
-            ft(G(a.value.title) + " " + G(a.value.graph.shortId) + " " + G(a.value.shortId), 1)
+          [xe, h.value]
+        ]) : (p(), b(U, { key: 1 }, [
+          m("div", ls, [
+            r.value.idx > -1 ? (p(), b("span", us, L(r.value.idx + 1) + " - ", 1)) : j("", !0),
+            ot(L(r.value.title) + " " + L(r.value.graph.shortId) + " " + L(r.value.shortId), 1)
           ]),
-          u("div", Os, [
-            a.value.isCodeNode ? (d(), p(B, { key: 0 }, [
-              a.value.state.lockCode ? (d(), j(w(Kn), {
+          m("div", ds, [
+            r.value.isCodeNode ? (p(), b(U, { key: 0 }, [
+              r.value.state.lockCode ? (p(), B(O(ht), {
                 key: 0,
                 class: "--clickable mx-1",
-                onClick: E[0] || (E[0] = (x) => a.value.lockCode = !1)
-              })) : M("", !0),
-              a.value.state.integrated ? (d(), j(w(yn), {
+                onClick: g[0] || (g[0] = (c) => r.value.lockCode = !1)
+              })) : j("", !0),
+              r.value.state.integrated ? (p(), B(O(Pn), {
                 key: 1,
                 class: "--clickable mx-1",
-                onClick: E[1] || (E[1] = (x) => Te(!1))
-              })) : (d(), j(w(us), {
+                onClick: g[1] || (g[1] = (c) => oe(!1))
+              })) : (p(), B(O(Mo), {
                 key: 2,
                 class: "--clickable mx-1",
-                onClick: E[2] || (E[2] = (x) => Te(!0))
+                onClick: g[2] || (g[2] = (c) => oe(!0))
               })),
-              !w(r).displayedGraph.sidebar.visible && w(r).displayedGraph.sidebar.nodeId !== a.value.id ? (d(), j(w(Dn), {
+              !O(a).displayedGraph.sidebar.visible && O(a).displayedGraph.sidebar.nodeId !== r.value.id ? (p(), B(O(io), {
                 key: 3,
                 class: "--clickable mx-1",
-                onClick: Ne
-              })) : w(r).displayedGraph.sidebar.visible && w(r).displayedGraph.sidebar.nodeId !== a.value.id ? (d(), j(w(Rn), {
+                onClick: ge
+              })) : O(a).displayedGraph.sidebar.visible && O(a).displayedGraph.sidebar.nodeId !== r.value.id ? (p(), B(O(Zn), {
                 key: 4,
                 class: "--clickable mx-1",
-                onClick: rt
-              })) : (d(), j(w(Hn), {
+                onClick: he
+              })) : (p(), B(O(oo), {
                 key: 5,
                 class: "--clickable mx-1",
-                onClick: H
+                onClick: z
               }))
-            ], 64)) : M("", !0),
-            L(w(kn), {
+            ], 64)) : j("", !0),
+            G(O(Hn), {
               class: "--clickable mx-1",
-              onClick: S
+              onClick: R
             }),
-            L(w(t), {
-              modelValue: f.value,
-              "onUpdate:modelValue": E[3] || (E[3] = (x) => f.value = x),
+            G(O(t), {
+              modelValue: y.value,
+              "onUpdate:modelValue": g[3] || (g[3] = (c) => y.value = c),
               x: 0,
               y: 0,
-              items: N.value,
-              onClick: dt
+              items: M.value,
+              onClick: Ee
             }, null, 8, ["modelValue", "items"])
           ])
         ], 64)),
-        a.value.outputs._code ? (d(), j(w(Ve), {
+        r.value.outputs._code ? (p(), B(O(Ke), {
           key: 3,
-          node: a.value,
-          intf: a.value.outputs._code,
+          node: r.value,
+          intf: r.value.outputs._code,
           class: "--output",
-          title: a.value.outputs._code.value,
+          title: r.value.outputs._code.value,
           "data-interface-type": "node"
-        }, null, 8, ["node", "intf", "title"])) : M("", !0)
+        }, null, 8, ["node", "intf", "title"])) : j("", !0)
       ], 32),
-      u("div", {
-        class: Y(["__content", T.value]),
-        onKeydown: E[5] || (E[5] = he(te(() => {
+      m("div", {
+        class: ne(["__content", S.value]),
+        onKeydown: g[5] || (g[5] = Oe(le(() => {
         }, ["stop"]), ["delete"])),
-        onContextmenu: E[6] || (E[6] = te(() => {
+        onContextmenu: g[6] || (g[6] = le(() => {
         }, ["prevent"]))
       }, [
-        u("div", Ts, [
-          (d(!0), p(B, null, J(pe.value, (x) => (d(), p(B, {
-            key: x.id
+        m("div", cs, [
+          (p(!0), b(U, null, se(pe.value, (c) => (p(), b(U, {
+            key: c.id
           }, [
-            a.value.state?.hidden ? (d(), p("div", Es, [
-              x.port ? (d(), p("div", {
+            r.value.state?.hidden ? (p(), b("div", ps, [
+              c.port ? (p(), b("div", {
                 key: 0,
-                id: x.id,
-                title: x.name,
+                id: c.id,
+                title: c.name,
                 class: "baklava-node-interface --output --connected"
-              }, [...E[7] || (E[7] = [
-                u("div", { class: "__port" }, null, -1)
-              ])], 8, $s)) : M("", !0)
-            ])) : ne(C.$slots, "nodeInterface", {
+              }, [...g[7] || (g[7] = [
+                m("div", { class: "__port" }, null, -1)
+              ])], 8, hs)) : j("", !0)
+            ])) : q($.$slots, "nodeInterface", {
               key: 1,
               type: "output",
-              node: a.value,
-              intf: x
+              node: r.value,
+              intf: c
             }, () => [
-              L(w(s), {
-                node: a.value,
-                intf: x,
-                title: x.value
+              G(O(s), {
+                node: r.value,
+                intf: c,
+                title: c.value
               }, null, 8, ["node", "intf", "title"])
             ])
           ], 64))), 128))
         ]),
-        u("div", Ms, [
-          (d(!0), p(B, null, J(W.value, (x) => (d(), p(B, {
-            key: x.id
+        m("div", fs, [
+          (p(!0), b(U, null, se(Z.value, (c) => (p(), b(U, {
+            key: c.id
           }, [
-            a.value.state?.hidden ? (d(), p("div", Gs, [
-              x.port ? (d(), p("div", {
+            r.value.state?.hidden ? (p(), b("div", ms, [
+              c.port ? (p(), b("div", {
                 key: 0,
-                id: x.id,
-                title: x.name,
+                id: c.id,
+                title: c.name,
                 class: "baklava-node-interface --input --connected"
-              }, [...E[8] || (E[8] = [
-                u("div", { class: "__port" }, null, -1)
-              ])], 8, Ss)) : M("", !0)
-            ])) : ne(C.$slots, "nodeInterface", {
+              }, [...g[8] || (g[8] = [
+                m("div", { class: "__port" }, null, -1)
+              ])], 8, vs)) : j("", !0)
+            ])) : q($.$slots, "nodeInterface", {
               key: 1,
-              node: a.value,
-              intf: x,
+              node: r.value,
+              intf: c,
               type: "input"
             }, () => [
-              L(w(s), {
-                node: a.value,
-                intf: x,
-                title: x.value
+              G(O(s), {
+                node: r.value,
+                intf: c,
+                title: c.value
               }, null, 8, ["node", "intf", "title"])
             ])
           ], 64))), 128))
         ])
       ], 34)
-    ], 46, ks));
+    ], 46, is));
   }
-}), Vs = ["id"], Rs = { class: "align-middle" }, Ve = /* @__PURE__ */ F({
+}), bs = ["id"], ys = { class: "align-middle" }, Ke = /* @__PURE__ */ F({
   __name: "CodeGraphNodeInterface",
   props: {
     node: {},
     intf: {}
   },
   setup(n) {
-    const e = n, { viewModel: t } = oe(), { hoveredOver: s, temporaryConnection: o } = zt(), a = V(null), i = O(() => e.intf.connectionCount > 0), r = O(() => ({
+    const e = n, { viewModel: t } = me(), { hoveredOver: s, temporaryConnection: o } = Jt(), r = H(null), i = P(() => e.intf.connectionCount > 0), a = P(() => ({
       "--connected": i.value
-    })), c = () => {
+    })), l = () => {
       s(e.intf);
-    }, h = () => {
+    }, d = () => {
       s(void 0);
-    }, g = () => {
-      a.value && t.value.hooks.renderInterface.execute({ intf: e.intf, el: a.value });
+    }, f = () => {
+      r.value && t.value.hooks.renderInterface.execute({ intf: e.intf, el: r.value });
     };
-    return fe(g), Le(g), (_, m) => (d(), p("div", {
+    return Se(f), nt(f), (C, h) => (p(), b("div", {
       id: n.intf.id,
       ref_key: "el",
-      ref: a,
-      class: Y(["baklava-node-interface", r.value])
+      ref: r,
+      class: ne(["baklava-node-interface", a.value])
     }, [
-      n.intf.port ? (d(), p("div", {
+      n.intf.port ? (p(), b("div", {
         key: 0,
-        class: Y(["__port", { "--selected": w(o)?.from === n.intf }]),
-        onPointerover: c,
-        onPointerout: h
-      }, null, 34)) : M("", !0),
-      u("span", Rs, [
-        ne(_.$slots, "default")
+        class: ne(["__port", { "--selected": O(o)?.from === n.intf }]),
+        onPointerover: l,
+        onPointerout: d
+      }, null, 34)) : j("", !0),
+      m("span", ys, [
+        q(C.$slots, "default")
       ])
-    ], 10, Vs));
+    ], 10, bs));
   }
-}), js = {
-  class: "baklava-node --palette",
-  style: { "margin-top": "-20px", "margin-bottom": "20px" }
-}, Bs = {
-  key: 0,
-  style: { display: "flex", "justify-content": "space-between" }
-}, zs = ["onClick"], Hs = {
-  key: 0,
-  style: { margin: "auto 0", "font-size": "12px" }
-}, Ls = /* @__PURE__ */ F({
-  __name: "CodeNodePalette",
-  setup(n) {
-    const e = me.PaletteEntry, { viewModel: t } = oe(), { x: s, y: o } = Zt(), { transform: a } = Ht(), i = Lt(t), r = gt("editorEl"), c = V(""), h = V(null), g = () => c.value ? i.value.filter(
-      (b) => b.name.toLowerCase().includes(c.value.toLowerCase()) || Object.values(b.nodeTypes).some(
-        (I) => I.title.toLowerCase().includes(c.value.toLowerCase())
-      )
-    ) : i.value, _ = (b) => c.value ? _s(b, (I) => {
-      const l = I[1];
-      return l.category.includes(c.value.toLowerCase()) || l.title?.toLowerCase().includes(c.value.toLowerCase());
-    }) : b, m = O(() => {
-      if (!h.value || !r?.value) return {};
-      const { left: b, top: I } = r.value.getBoundingClientRect();
-      return {
-        top: `${o.value - I}px`,
-        left: `${s.value - b}px`
-      };
-    }), k = (b, I) => {
-      h.value = {
-        type: b,
-        nodeInformation: I
-      };
-      const l = () => {
-        const f = D(new I.type());
-        t.value.displayedGraph.addNode(f);
-        const N = r.value.getBoundingClientRect(), [y, T] = a(s.value - N.left, o.value - N.top);
-        f.position.x = y, f.position.y = T, h.value = null, document.removeEventListener("pointerup", l);
-      };
-      document.addEventListener("pointerup", l);
-    };
-    return (b, I) => (d(), p(B, null, [
-      u("div", {
-        class: Y([{ "--open": w(t).settings.palette.enabled }, "baklava-node-palette"]),
-        onContextmenu: I[1] || (I[1] = te(() => {
-        }, ["stop", "prevent"]))
-      }, [
-        u("div", js, [
-          de(u("input", {
-            "onUpdate:modelValue": I[0] || (I[0] = (l) => c.value = l),
-            type: "text",
-            class: "baklava-input",
-            title: "Filter nodes",
-            onKeyup: g
-          }, null, 544), [
-            [le, c.value]
-          ])
-        ]),
-        (d(!0), p(B, null, J(g(), (l) => (d(), p("section", {
-          key: l.name
-        }, [
-          l.name !== "default" ? (d(), p("h3", Bs, [
-            u("div", {
-              onClick: (f) => c.value = l.name,
-              style: { cursor: "pointer" }
-            }, G(l.name), 9, zs),
-            Object.keys(_(l.nodeTypes)).length < Object.values(l.nodeTypes).length ? (d(), p("div", Hs, " ( " + G(Object.keys(_(l.nodeTypes)).length) + " / " + G(Object.values(l.nodeTypes).length) + " ) ", 1)) : M("", !0)
-          ])) : M("", !0),
-          (d(!0), p(B, null, J(_(l.nodeTypes), (f, N) => (d(), j(w(e), {
-            key: N,
-            type: N,
-            title: f.title,
-            onPointerdown: (y) => k(N, f)
-          }, null, 8, ["type", "title", "onPointerdown"]))), 128))
-        ]))), 128))
-      ], 34),
-      L(bt, { name: "fade" }, {
-        default: ee(() => [
-          h.value ? (d(), p("div", {
-            key: 0,
-            class: "baklava-dragged-node",
-            style: ve(m.value)
-          }, [
-            L(w(e), {
-              type: h.value.type,
-              title: h.value.nodeInformation.title
-            }, null, 8, ["type", "title"])
-          ], 4)) : M("", !0)
-        ]),
-        _: 1
-      })
-    ], 64));
-  }
-}), Us = ["title"], As = {
+}), _s = ["title"], Cs = {
   key: 0,
   class: "__label"
-}, Re = /* @__PURE__ */ F({
+}, qe = /* @__PURE__ */ F({
   __name: "SidebarCheckbox",
   props: {
     disabled: { type: Boolean },
@@ -1822,257 +2391,409 @@ const $o = /* @__PURE__ */ F({
   emits: ["update:modelValue"],
   setup(n, { emit: e }) {
     const t = e;
-    return (s, o) => (d(), p("div", {
-      class: Y(["baklava-checkbox", { "--checked": n.inversed ? !n.modelValue : n.modelValue, "--disabled": n.disabled }]),
+    return (s, o) => (p(), b("div", {
+      class: ne(["baklava-checkbox", { "--checked": n.inversed ? !n.modelValue : n.modelValue, "--disabled": n.disabled }]),
       title: n.name,
-      onClick: o[0] || (o[0] = (a) => t("update:modelValue", !n.modelValue))
+      onClick: o[0] || (o[0] = (r) => t("update:modelValue", !n.modelValue))
     }, [
-      o[1] || (o[1] = u("div", { class: "__checkmark-container" }, [
-        u("svg", {
+      o[1] || (o[1] = m("div", { class: "__checkmark-container" }, [
+        m("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           width: "18",
           height: "18",
           viewBox: "0 0 18 18"
         }, [
-          u("path", {
+          m("path", {
             class: "__checkmark",
             d: "M 6 5 L 6 10 L 16 10",
             transform: "rotate(-45 10 10)"
           })
         ])
       ], -1)),
-      n.name ? (d(), p("div", As, G(n.name), 1)) : M("", !0)
-    ], 10, Us));
+      n.name ? (p(), b("div", Cs, L(n.name), 1)) : j("", !0)
+    ], 10, _s));
   }
-}), Ds = { class: "__header" }, Fs = { class: "__node-name" }, Ws = { class: "__interfaces" }, Ys = { class: "__inputs" }, Ks = { style: { display: "flex" } }, Xs = { class: "__outputs" }, qs = {
+}), ws = { class: "__header" }, ks = { class: "__node-name" }, xs = { class: "__interfaces" }, Is = { class: "__inputs" }, Ns = { style: { display: "flex" } }, Es = { class: "__outputs" }, Ts = {
   key: 0,
   class: "__interface"
-}, Js = { style: { display: "flex" } }, Qs = /* @__PURE__ */ F({
+}, Os = { style: { display: "flex" } }, $s = /* @__PURE__ */ F({
   __name: "CodeGraphSidebar",
   setup(n) {
-    const { viewModel: e } = oe(), { graph: t } = ge(), s = V(null), o = Be(e.value.settings.sidebar, "width"), a = O(() => e.value.settings.sidebar.resizable);
-    let i = 0, r = 0;
-    const c = O(() => {
-      const f = t.value.sidebar.nodeId;
-      return t.value.nodes.find((N) => N.id === f);
-    }), h = O(() => c.value), g = O(() => ({
+    const { viewModel: e } = me(), { graph: t } = Ge(), s = H(null), o = Me(e.value.settings.sidebar, "width"), r = P(() => e.value.settings.sidebar.resizable);
+    let i = 0, a = 0;
+    const l = P(() => {
+      const y = t.value.sidebar.nodeId;
+      return t.value.nodes.find((M) => M.id === y);
+    }), d = P(() => l.value), f = P(() => ({
       width: `${o.value}px`
-    })), _ = O(() => h.value ? Object.values(h.value.inputs).filter((f) => f.displayInSidebar && f.component) : []), m = O(() => h.value ? Object.values(h.value.outputs).filter((f) => f.displayInSidebar && f.component) : []), k = () => {
+    })), C = P(() => d.value ? Object.values(d.value.inputs).filter((y) => y.displayInSidebar && y.component) : []), h = P(() => d.value ? Object.values(d.value.outputs).filter((y) => y.displayInSidebar && y.component) : []), N = () => {
       t.value.sidebar.visible = !1;
-    }, b = () => {
-      c.value?.events.update.emit(null);
-    }, I = (f) => {
-      i = o.value, r = f.clientX, window.addEventListener("mousemove", l), window.addEventListener(
+    }, v = () => {
+      l.value?.events.update.emit(null);
+    }, w = (y) => {
+      i = o.value, a = y.clientX, window.addEventListener("mousemove", u), window.addEventListener(
         "mouseup",
         () => {
-          window.removeEventListener("mousemove", l);
+          window.removeEventListener("mousemove", u);
         },
         { once: !0 }
       );
-    }, l = (f) => {
-      const N = s.value?.parentElement?.getBoundingClientRect().width ?? 500, y = f.clientX - r;
-      let T = i - y;
-      T < 300 ? T = 300 : T > 0.9 * N && (T = 0.9 * N), o.value = T;
+    }, u = (y) => {
+      const M = s.value?.parentElement?.getBoundingClientRect().width ?? 500, T = y.clientX - a;
+      let S = i - T;
+      S < 300 ? S = 300 : S > 0.9 * M && (S = 0.9 * M), o.value = S;
     };
-    return (f, N) => (d(), p("div", {
-      class: Y([{ "--open": w(t).sidebar.visible }, "baklava-sidebar"]),
-      style: ve(g.value),
+    return (y, M) => (p(), b("div", {
+      class: ne([{ "--open": O(t).sidebar.visible }, "baklava-sidebar"]),
+      style: Pe(f.value),
       ref_key: "el",
       ref: s
     }, [
-      a.value ? (d(), p("div", {
+      r.value ? (p(), b("div", {
         key: 0,
         class: "__resizer",
-        onMousedown: I
-      }, null, 32)) : M("", !0),
-      c.value ? (d(), p(B, { key: 1 }, [
-        u("div", Ds, [
-          u("button", {
+        onMousedown: w
+      }, null, 32)) : j("", !0),
+      l.value ? (p(), b(U, { key: 1 }, [
+        m("div", ws, [
+          m("button", {
             tabindex: "-1",
             class: "__close",
-            onClick: k
+            onClick: N
           }, "×"),
-          u("div", Fs, [
-            u("b", null, G(c.value.title), 1)
+          m("div", ks, [
+            m("b", null, L(l.value.title), 1)
           ])
         ]),
-        u("div", Ws, [
-          u("div", Ys, [
-            (d(!0), p(B, null, J(_.value, (y) => (d(), p("div", {
-              key: y.id,
+        m("div", xs, [
+          m("div", Is, [
+            (p(!0), b(U, null, se(C.value, (T) => (p(), b("div", {
+              key: T.id,
               class: "__interface"
             }, [
-              u("div", Ks, [
-                L(Re, {
-                  modelValue: y.hidden,
+              m("div", Ns, [
+                G(qe, {
+                  modelValue: T.hidden,
                   "onUpdate:modelValue": [
-                    (T) => y.hidden = T,
-                    N[0] || (N[0] = () => c.value?.events.update.emit(null))
+                    (S) => T.hidden = S,
+                    M[0] || (M[0] = () => l.value?.events.update.emit(null))
                   ],
-                  disabled: !y.optional,
+                  disabled: !T.optional,
                   inversed: "",
                   style: { "padding-right": "8px" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
-                (d(), j(Me(y.component), {
-                  modelValue: y.value,
-                  "onUpdate:modelValue": (T) => y.value = T,
-                  node: c.value,
-                  intf: y,
+                (p(), B(De(T.component), {
+                  modelValue: T.value,
+                  "onUpdate:modelValue": (S) => T.value = S,
+                  node: l.value,
+                  intf: T,
                   style: { width: "100%" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "node", "intf"]))
               ])
             ]))), 128))
           ]),
-          u("div", Xs, [
-            h.value && h.value.state ? (d(), p("div", qs, [
-              N[3] || (N[3] = u("label", null, "Variable name", -1)),
-              de(u("input", {
-                "onUpdate:modelValue": N[1] || (N[1] = (y) => h.value.state.variableName = y),
+          m("div", Es, [
+            d.value && d.value.state ? (p(), b("div", Ts, [
+              M[3] || (M[3] = m("label", null, "Variable name", -1)),
+              ke(m("input", {
+                "onUpdate:modelValue": M[1] || (M[1] = (T) => d.value.state.variableName = T),
                 type: "text",
                 class: "baklava-input",
                 title: "Variable name",
-                onBlur: b,
-                onKeydown: he(b, ["enter"])
+                onBlur: v,
+                onKeydown: Oe(v, ["enter"])
               }, null, 544), [
-                [le, h.value.state.variableName]
+                [xe, d.value.state.variableName]
               ])
-            ])) : M("", !0),
-            (d(!0), p(B, null, J(m.value, (y) => (d(), p("div", {
-              key: y.id,
+            ])) : j("", !0),
+            (p(!0), b(U, null, se(h.value, (T) => (p(), b("div", {
+              key: T.id,
               class: "__interface"
             }, [
-              u("div", Js, [
-                L(Re, {
-                  modelValue: y.hidden,
+              m("div", Os, [
+                G(qe, {
+                  modelValue: T.hidden,
                   "onUpdate:modelValue": [
-                    (T) => y.hidden = T,
-                    N[2] || (N[2] = () => c.value?.events.update.emit(null))
+                    (S) => T.hidden = S,
+                    M[2] || (M[2] = () => l.value?.events.update.emit(null))
                   ],
-                  disabled: !y.optional,
+                  disabled: !T.optional,
                   inversed: "",
                   style: { "padding-right": "8px" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
-                (d(), j(Me(y.component), {
-                  modelValue: y.value,
-                  "onUpdate:modelValue": (T) => y.value = T,
-                  node: c.value,
-                  intf: y,
+                (p(), B(De(T.component), {
+                  modelValue: T.value,
+                  "onUpdate:modelValue": (S) => T.value = S,
+                  node: l.value,
+                  intf: T,
                   style: { width: "100%" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "node", "intf"]))
               ])
             ]))), 128))
           ])
         ]),
-        ne(f.$slots, "codeEditor", { node: c.value })
-      ], 64)) : M("", !0)
+        q(y.$slots, "codeEditor", { node: l.value })
+      ], 64)) : j("", !0)
     ], 6));
   }
+}), Ms = {
+  class: "baklava-node --palette",
+  style: { "margin-top": "-20px", "margin-bottom": "20px" }
+}, Ss = {
+  key: 0,
+  style: { display: "flex", "justify-content": "space-between" }
+}, Ps = ["onClick"], Gs = {
+  key: 0,
+  style: { margin: "auto 0", "font-size": "12px" }
+}, As = /* @__PURE__ */ F({
+  __name: "CodeNodePalette",
+  setup(n) {
+    const e = $e.PaletteEntry, { viewModel: t } = me(), { x: s, y: o } = pn(), { transform: r } = Qt(), i = Zt(t), a = Ot("editorEl"), l = H(""), d = H(null), f = () => l.value ? i.value.filter(
+      (v) => v.name.toLowerCase().includes(l.value.toLowerCase()) || Object.values(v.nodeTypes).some(
+        (w) => w.title.toLowerCase().includes(l.value.toLowerCase())
+      )
+    ) : i.value, C = (v) => l.value ? Wo(v, (w) => {
+      const u = w[1];
+      return u.category.includes(l.value.toLowerCase()) || u.title?.toLowerCase().includes(l.value.toLowerCase());
+    }) : v, h = P(() => {
+      if (!d.value || !a?.value) return {};
+      const { left: v, top: w } = a.value.getBoundingClientRect();
+      return {
+        top: `${o.value - w}px`,
+        left: `${s.value - v}px`
+      };
+    }), N = (v, w) => {
+      d.value = {
+        type: v,
+        nodeInformation: w
+      };
+      const u = () => {
+        const y = te(new w.type());
+        t.value.displayedGraph.addNode(y);
+        const M = a.value.getBoundingClientRect(), [T, S] = r(s.value - M.left, o.value - M.top);
+        y.position.x = T, y.position.y = S, d.value = null, document.removeEventListener("pointerup", u);
+      };
+      document.addEventListener("pointerup", u);
+    };
+    return (v, w) => (p(), b(U, null, [
+      m("div", {
+        class: ne([{ "--open": O(t).settings.palette.enabled }, "baklava-node-palette"]),
+        onContextmenu: w[1] || (w[1] = le(() => {
+        }, ["stop", "prevent"]))
+      }, [
+        m("div", Ms, [
+          ke(m("input", {
+            "onUpdate:modelValue": w[0] || (w[0] = (u) => l.value = u),
+            type: "text",
+            class: "baklava-input",
+            title: "Filter nodes",
+            onKeyup: f
+          }, null, 544), [
+            [xe, l.value]
+          ])
+        ]),
+        (p(!0), b(U, null, se(f(), (u) => (p(), b("section", {
+          key: u.name
+        }, [
+          u.name !== "default" ? (p(), b("h3", Ss, [
+            m("div", {
+              onClick: (y) => l.value = u.name,
+              style: { cursor: "pointer" }
+            }, L(u.name), 9, Ps),
+            Object.keys(C(u.nodeTypes)).length < Object.values(u.nodeTypes).length ? (p(), b("div", Gs, " ( " + L(Object.keys(C(u.nodeTypes)).length) + " / " + L(Object.values(u.nodeTypes).length) + " ) ", 1)) : j("", !0)
+          ])) : j("", !0),
+          (p(!0), b(U, null, se(C(u.nodeTypes), (y, M) => (p(), B(O(e), {
+            key: M,
+            type: M,
+            title: y.title,
+            onPointerdown: (T) => N(M, y)
+          }, null, 8, ["type", "title", "onPointerdown"]))), 128))
+        ]))), 128))
+      ], 34),
+      G($t, { name: "fade" }, {
+        default: ee(() => [
+          d.value ? (p(), b("div", {
+            key: 0,
+            class: "baklava-dragged-node",
+            style: Pe(h.value)
+          }, [
+            G(O(e), {
+              type: d.value.type,
+              title: d.value.nodeInformation.title
+            }, null, 8, ["type", "title"])
+          ], 4)) : j("", !0)
+        ]),
+        _: 1
+      })
+    ], 64));
+  }
+}), Rs = {}, js = { class: "prependIcon" }, Ls = { class: "appendIcon" };
+function Vs(n, e) {
+  const t = Ze("router-link");
+  return p(), B(t, { class: "navItem" }, {
+    default: ee(() => [
+      m("span", js, [
+        q(n.$slots, "prependIcon")
+      ]),
+      q(n.$slots, "default"),
+      m("span", Ls, [
+        q(n.$slots, "appendIcon")
+      ])
+    ]),
+    _: 3
+  });
+}
+const Je = /* @__PURE__ */ A(Rs, [["render", Vs]]), Bs = { class: "navbar" }, Hs = ["onClick"], xr = /* @__PURE__ */ F({
+  __name: "NavBar",
+  props: {
+    viewModel: {},
+    editorStates: {},
+    routes: {}
+  },
+  emits: ["click:remove"],
+  setup(n, { emit: e }) {
+    const t = e, s = (o) => {
+      t("click:remove", o);
+    };
+    return (o, r) => (p(), b("nav", Bs, [
+      q(o.$slots, "prepend"),
+      (p(!0), b(U, null, se(n.editorStates, (i) => (p(), B(Je, {
+        key: i.graph.id,
+        class: ne({ active: i.graph.id === n.viewModel.displayedGraph.id }),
+        to: { name: n.routes?.edit ?? "edit", params: { editorId: i.graph.id } }
+      }, {
+        appendIcon: ee(() => [
+          m("button", {
+            class: "remove",
+            onClick: le((a) => s(i.graph.id), ["prevent"])
+          }, [
+            G(O(Vo))
+          ], 8, Hs)
+        ]),
+        default: ee(() => [
+          ot(L(i.graph.id.slice(0, 6)) + " ", 1)
+        ]),
+        _: 2
+      }, 1032, ["class", "to"]))), 128)),
+      q(o.$slots, "append", {}, () => [
+        G(Je, {
+          to: { name: n.routes?.new ?? "new" },
+          class: "navItem"
+        }, {
+          default: ee(() => [
+            G(O(yo), { class: "plus" })
+          ]),
+          _: 1
+        }, 8, ["to"])
+      ])
+    ]));
+  }
 });
-class at extends Qe {
+class wt extends _t {
   _title = "Subgraph Input";
   inputs = {
-    _code: new R("", "").use($, U).setHidden(!0),
-    name: new be("Name", "Input").setPort(!1)
+    _code: new D("", "").use(V, X).setHidden(!0),
+    name: new Ae("Name", "Input").setPort(!1)
   };
   outputs = {
-    _code: new R("", "").use($, U).setHidden(!0),
-    placeholder: new A("Connection", void 0)
+    _code: new D("", "").use(V, X).setHidden(!0),
+    placeholder: new J("Connection", void 0)
   };
 }
-class it extends Ze {
+class kt extends Ct {
   _title = "Subgraph Output";
   inputs = {
-    _code: new R("", "").use($, U).setHidden(!0),
-    name: new be("Name", "Output").setPort(!1),
-    placeholder: new A("Connection", void 0)
+    _code: new D("", "").use(V, X).setHidden(!0),
+    name: new Ae("Name", "Output").setPort(!1),
+    placeholder: new J("Connection", void 0)
   };
   outputs = {
-    _code: new R("", "").use($, U).setHidden(!0),
-    output: new A("Output", void 0).setHidden(!0)
+    _code: new D("", "").use(V, X).setHidden(!0),
+    output: new J("Output", void 0).setHidden(!0)
   };
 }
-const Zs = "CREATE_SUBGRAPH", je = [kt, Nt];
-function eo(n, e, t) {
-  const s = () => n.value.selectedNodes.filter((a) => !je.includes(a.type)).length > 0, o = () => {
-    const { viewModel: a } = oe(), i = n.value, r = n.value.editor;
+const zs = "CREATE_SUBGRAPH", Qe = [Rt, jt];
+function Us(n, e, t) {
+  const s = () => n.value.selectedNodes.filter((r) => !Qe.includes(r.type)).length > 0, o = () => {
+    const { viewModel: r } = me(), i = n.value, a = n.value.editor;
     if (i.selectedNodes.length === 0) return;
-    const c = i.selectedNodes.filter((v) => !je.includes(v.type)), h = c.flatMap((v) => Object.values(v.inputs)), g = c.flatMap((v) => Object.values(v.outputs)), _ = i.connections.filter(
-      (v) => !g.includes(v.from) && h.includes(v.to)
-    ), m = i.connections.filter(
-      (v) => g.includes(v.from) && !h.includes(v.to)
-    ), k = i.connections.filter(
-      (v) => g.includes(v.from) && h.includes(v.to)
-    ), b = c.map((v) => v.save()), I = k.map((v) => ({
-      id: v.id,
-      from: v.from.id,
-      to: v.to.id
-    })), l = /* @__PURE__ */ new Map(), { xLeft: f, xRight: N, yTop: y } = to(c);
-    for (const [v, S] of _.entries()) {
-      const H = new at();
-      H.inputs.name.value = S.to.name, b.push({
-        ...H.save(),
-        position: { x: N - a.value.settings.nodes.defaultWidth - 100, y: y + v * 200 }
-      }), I.push({ id: K(), from: H.outputs.placeholder.id, to: S.to.id }), l.set(S.to.id, H.graphInterfaceId);
+    const l = i.selectedNodes.filter((k) => !Qe.includes(k.type)), d = l.flatMap((k) => Object.values(k.inputs)), f = l.flatMap((k) => Object.values(k.outputs)), C = i.connections.filter(
+      (k) => !f.includes(k.from) && d.includes(k.to)
+    ), h = i.connections.filter(
+      (k) => f.includes(k.from) && !d.includes(k.to)
+    ), N = i.connections.filter(
+      (k) => f.includes(k.from) && d.includes(k.to)
+    ), v = l.map((k) => k.save()), w = N.map((k) => ({
+      id: k.id,
+      from: k.from.id,
+      to: k.to.id
+    })), u = /* @__PURE__ */ new Map(), { xLeft: y, xRight: M, yTop: T } = Ds(l);
+    for (const [k, R] of C.entries()) {
+      const z = new wt();
+      z.inputs.name.value = R.to.name, v.push({
+        ...z.save(),
+        position: { x: M - r.value.settings.nodes.defaultWidth - 100, y: T + k * 200 }
+      }), w.push({ id: re(), from: z.outputs.placeholder.id, to: R.to.id }), u.set(R.to.id, z.graphInterfaceId);
     }
-    for (const [v, S] of m.entries()) {
-      const H = new it();
-      H.inputs.name.value = S.from.name, b.push({
-        ...H.save(),
-        position: { x: f + 100, y: y + v * 200 }
-      }), I.push({ id: K(), from: S.from.id, to: H.inputs.placeholder.id }), l.set(S.from.id, H.graphInterfaceId);
+    for (const [k, R] of h.entries()) {
+      const z = new kt();
+      z.inputs.name.value = R.from.name, v.push({
+        ...z.save(),
+        position: { x: y + 100, y: T + k * 200 }
+      }), w.push({ id: re(), from: R.from.id, to: z.inputs.placeholder.id }), u.set(R.from.id, z.graphInterfaceId);
     }
-    const T = D(
-      new ce(
+    const S = te(
+      new Ne(
         {
-          connections: I,
-          nodes: b,
+          connections: w,
+          nodes: v,
           // ignored, but still providing to make TS happy
           inputs: [],
           outputs: []
         },
-        r
+        a
       )
     );
-    r.addGraphTemplate(T);
-    const ie = r.nodeTypes.get(Ue(T));
-    if (!ie) throw new Error("Unable to create subgraph: Could not find corresponding graph node type");
+    a.addGraphTemplate(S);
+    const Q = a.nodeTypes.get(st(S));
+    if (!Q) throw new Error("Unable to create subgraph: Could not find corresponding graph node type");
     i.activeTransactions++;
-    const W = D(new ie.type());
-    i.addNode(W);
+    const Z = te(new Q.type());
+    i.addNode(Z);
     const pe = Math.round(
-      c.map((v) => v.position.x).reduce((v, S) => v + S, 0) / c.length
-    ), re = Math.round(
-      c.map((v) => v.position.y).reduce((v, S) => v + S, 0) / c.length
+      l.map((k) => k.position.x).reduce((k, R) => k + R, 0) / l.length
+    ), K = Math.round(
+      l.map((k) => k.position.y).reduce((k, R) => k + R, 0) / l.length
     );
-    W.position.x = pe, W.position.y = re, _.forEach((v) => {
-      i.removeConnection(v), i.addConnection(v.from, W.inputs[l.get(v.to.id)]);
-    }), m.forEach((v) => {
-      i.removeConnection(v), i.addConnection(W.outputs[l.get(v.from.id)], v.to);
-    }), c.forEach((v) => i.removeNode(v)), i.activeTransactions--, e.canExecuteCommand(q.SAVE_SUBGRAPH_COMMAND) && e.executeCommand(q.SAVE_SUBGRAPH_COMMAND), t(T), n.value.panning = { ...i.panning }, n.value.scaling = i.scaling;
+    Z.position.x = pe, Z.position.y = K, C.forEach((k) => {
+      i.removeConnection(k), i.addConnection(k.from, Z.inputs[u.get(k.to.id)]);
+    }), h.forEach((k) => {
+      i.removeConnection(k), i.addConnection(Z.outputs[u.get(k.from.id)], k.to);
+    }), l.forEach((k) => i.removeNode(k)), i.activeTransactions--, e.canExecuteCommand(ue.SAVE_SUBGRAPH_COMMAND) && e.executeCommand(ue.SAVE_SUBGRAPH_COMMAND), t(S), n.value.panning = { ...i.panning }, n.value.scaling = i.scaling;
   };
-  e.registerCommand(Zs, {
+  e.registerCommand(zs, {
     canExecute: s,
     execute: o
   });
 }
-function to(n) {
-  const e = n.reduce((o, a) => {
-    const i = a.position.x;
+function Ds(n) {
+  const e = n.reduce((o, r) => {
+    const i = r.position.x;
     return i < o ? i : o;
-  }, 1 / 0), t = n.reduce((o, a) => {
-    const i = a.position.y;
+  }, 1 / 0), t = n.reduce((o, r) => {
+    const i = r.position.y;
     return i < o ? i : o;
   }, 1 / 0);
-  return { xLeft: n.reduce((o, a) => {
-    const i = a.position.x + a.width;
+  return { xLeft: n.reduce((o, r) => {
+    const i = r.position.x + r.width;
     return i > o ? i : o;
   }, -1 / 0), xRight: e, yTop: t };
 }
-class no extends xt {
+class Fs extends Lt {
   code;
   graph;
   constructor(e) {
-    super(), this.code = e, this.graph = new ue(this);
+    super(), this.code = e, this.graph = new Ie(this);
   }
   get graphIds() {
     const e = [];
@@ -2089,7 +2810,7 @@ class no extends xt {
   addGraphTemplate(e) {
     if (this.events.beforeAddGraphTemplate.emit(e).prevented) return;
     this._graphTemplates.push(e), this.graphTemplateEvents.addTarget(e.events), this.graphTemplateHooks.addTarget(e.hooks);
-    const t = mn(e);
+    const t = Fo(e);
     this.registerNodeType(t, { category: "Subgraphs", title: e.name }), this.events.addGraphTemplate.emit(e);
   }
   /**
@@ -2102,7 +2823,7 @@ class no extends xt {
       for (super._loading = !0, e = this.hooks.load.execute(e); this.graphTemplates.length > 0; )
         this.removeGraphTemplate(this.graphTemplates[0]);
       e.graphTemplates.forEach((s) => {
-        const o = new ce(s, this);
+        const o = new Ne(s, this);
         this.addGraphTemplate(o);
       });
       const t = this.graph.load(e.graph);
@@ -2120,113 +2841,123 @@ class no extends xt {
     this.code.state.modules[e] = t;
   }
 }
-function Go(n) {
-  const e = V(n?.code ?? new fn()), t = V(n?.existingEditor ?? new no(e.value)), s = Symbol("ViewModelToken"), o = V(null), a = _t(o), { switchGraph: i } = Is(t, o), r = O(() => a.value && a.value !== t.value.graph), c = D(Ut());
-  c.nodes.defaultWidth = 400;
-  const h = At(), g = Dt(a, h), _ = Ft(a, t, h), m = {
+function Ir(n) {
+  const e = H(n?.code ?? new ze()), t = H(n?.existingEditor ?? new Fs(e.value)), s = Symbol("ViewModelToken"), o = H(null), r = Mt(o), { switchGraph: i } = Ko(t, o), a = P(() => r.value && r.value !== t.value.graph), l = te(en());
+  l.nodes.defaultWidth = 400;
+  const d = tn(), f = nn(r, d), C = on(r, t, d), h = {
     /** Called whenever a node is rendered */
-    renderNode: new Ge(null),
+    renderNode: new Fe(null),
     /** Called whenever an interface is rendered */
-    renderInterface: new Ge(null)
-  }, k = D({
-    clipboard: _,
+    renderInterface: new Fe(null)
+  }, N = te({
+    clipboard: C,
     code: e,
-    commandHandler: h,
-    displayedGraph: a,
+    commandHandler: d,
+    displayedGraph: r,
     editor: t,
-    history: g,
-    hooks: m,
-    isSubgraph: r,
-    settings: c,
+    history: f,
+    hooks: h,
+    isSubgraph: a,
+    settings: l,
     switchGraph: i
   });
-  return e.value.registerViewModel(k), bs(k), Wt(a, h), eo(a, h, i), Yt(a, h), Kt(a, h, i), Xt(a, h), qt(a, h, c), fs(a, h, c), vs(c), He(
+  return e.value.registerViewModel(N), Uo(N), sn(r, d), Us(r, d, i), rn(r, d), an(r, d, i), ln(r, d), un(r, d, l), Bo(r, d, l), Ho(l), tt(
     t,
-    (b, I) => {
-      I && (I.events.registerGraph.unsubscribe(s), I.graphEvents.beforeAddNode.unsubscribe(s), b.nodeHooks.beforeLoad.unsubscribe(s), b.nodeHooks.afterSave.unsubscribe(s), b.graphTemplateHooks.beforeLoad.unsubscribe(s), b.graphTemplateHooks.afterSave.unsubscribe(s), b.graph.hooks.load.unsubscribe(s), b.graph.hooks.save.unsubscribe(s)), b && (b.nodeHooks.beforeLoad.subscribe(s, (l, f) => (f.position = l.position ?? { x: 0, y: 0 }, f.width = l.width ?? c.nodes.defaultWidth, f.twoColumn = l.twoColumn ?? !1, l)), b.nodeHooks.afterSave.subscribe(s, (l, f) => (l.position = f.position, l.width = f.width, l.twoColumn = f.twoColumn, l)), b.graphTemplateHooks.beforeLoad.subscribe(s, (l, f) => (f.panning = l.panning, f.scaling = l.scaling, l)), b.graphTemplateHooks.afterSave.subscribe(s, (l, f) => (l.panning = f.panning, l.scaling = f.scaling, l)), b.graph.hooks.load.subscribe(s, (l, f) => (f.panning = l.panning, f.scaling = l.scaling, l)), b.graph.hooks.save.subscribe(s, (l, f) => (l.panning = f.panning, l.scaling = f.scaling, l)), b.graphEvents.beforeAddNode.subscribe(
+    (v, w) => {
+      w && (w.events.registerGraph.unsubscribe(s), w.graphEvents.beforeAddNode.unsubscribe(s), v.nodeHooks.beforeLoad.unsubscribe(s), v.nodeHooks.afterSave.unsubscribe(s), v.graphTemplateHooks.beforeLoad.unsubscribe(s), v.graphTemplateHooks.afterSave.unsubscribe(s), v.graph.hooks.load.unsubscribe(s), v.graph.hooks.save.unsubscribe(s)), v && (v.nodeHooks.beforeLoad.subscribe(s, (u, y) => (y.position = u.position ?? { x: 0, y: 0 }, y.width = u.width ?? l.nodes.defaultWidth, y.twoColumn = u.twoColumn ?? !1, u)), v.nodeHooks.afterSave.subscribe(s, (u, y) => (u.position = y.position, u.width = y.width, u.twoColumn = y.twoColumn, u)), v.graphTemplateHooks.beforeLoad.subscribe(s, (u, y) => (y.panning = u.panning, y.scaling = u.scaling, u)), v.graphTemplateHooks.afterSave.subscribe(s, (u, y) => (u.panning = y.panning, u.scaling = y.scaling, u)), v.graph.hooks.load.subscribe(s, (u, y) => (y.panning = u.panning, y.scaling = u.scaling, u)), v.graph.hooks.save.subscribe(s, (u, y) => (u.panning = y.panning, u.scaling = y.scaling, u)), v.graphEvents.beforeAddNode.subscribe(
         s,
-        (l) => Jt(l, { defaultWidth: c.nodes.defaultWidth })
-      ), t.value.registerNodeType(at, { category: "Subgraphs" }), t.value.registerNodeType(it, { category: "Subgraphs" }), i(b.graph));
+        (u) => dn(u, { defaultWidth: l.nodes.defaultWidth })
+      ), t.value.registerNodeType(wt, { category: "Subgraphs" }), t.value.registerNodeType(kt, { category: "Subgraphs" }), i(v.graph));
     },
     { immediate: !0 }
-  ), k;
+  ), N;
 }
 export {
-  We as AbstractCodeNode,
-  et as CLEAR_ALL_COMMAND,
-  Zs as CREATE_SUBGRAPH_COMMAND,
-  fo as CheckboxInterface,
-  fn as Code,
-  vn as CodeEngine,
-  ue as CodeGraph,
-  $o as CodeGraphEditor,
-  Mo as CodeGraphInfo,
-  Qe as CodeGraphInputNode,
-  Ps as CodeGraphNode,
-  Ve as CodeGraphNodeInterface,
-  Ze as CodeGraphOutputNode,
-  Qs as CodeGraphSidebar,
-  ce as CodeGraphTemplate,
-  _e as CodeNode,
-  ae as CodeNodeInputInterface,
-  R as CodeNodeInterface,
-  ye as CodeNodeInterfaceComponent,
-  on as CodeNodeOutputInterface,
-  Ls as CodeNodePalette,
-  yn as CodeVariable,
-  kn as DotsVertical,
-  pn as DynamicCodeNode,
-  Se as GRAPH_INPUT_NODE_TYPE,
-  Pe as GRAPH_OUTPUT_NODE_TYPE,
-  vo as IntegerInterface,
-  Tn as LayoutSidebarLeftCollapse,
-  Gn as LayoutSidebarLeftExpand,
-  Rn as LayoutSidebarRight,
-  Hn as LayoutSidebarRightCollapse,
-  Dn as LayoutSidebarRightExpand,
-  go as ListInputInterface,
-  Kn as LockCode,
-  bo as NumberInterface,
-  Qn as PlayerPlay,
-  tt as RUN_ENGINE_COMMAND,
-  ns as Schema,
-  is as SchemaOff,
-  _o as SelectInterface,
-  Re as SidebarCheckbox,
-  yo as SliderInterface,
-  at as SubgraphInputNode,
-  it as SubgraphOutputNode,
-  nt as TOGGLE_MINIMAP_COMMAND,
-  st as TOGGLE_PALETTE_COMMAND,
-  Co as TextInputInterface,
-  cn as TextInputInterfaceComponent,
-  Io as TextareaInputInterface,
-  us as TransitionBottom,
-  ms as TrashOff,
-  wo as TupleInputInterface,
-  mo as addDefaultInterfaceTypes,
-  Oo as allowMultipleConnections,
-  Ke as booleanType,
-  mn as createCodeGraphNodeType,
-  ko as defineCodeNode,
-  No as defineDynamicCodeNode,
-  sn as dictType,
-  en as formatInputs,
-  ot as getCodeNodes,
-  To as getPositionAtColumn,
-  Eo as getPositionBeforeNode,
-  Xe as listType,
-  Ye as loadNodeState,
-  U as nodeType,
-  Ce as numberType,
-  bs as registerCodeEngine,
-  eo as registerCreateSubgraphCommand,
-  fs as registerCustomCommands,
-  gs as registerRunEngineCommands,
-  tn as saveNodeState,
-  Ie as stringType,
-  qe as tupleType,
-  vs as updateToolbarItems,
-  Go as useCodeGraph,
-  Is as useSwitchCodeGraph
+  lt as AbstractCodeNode,
+  ft as CLEAR_ALL_COMMAND,
+  zs as CREATE_SUBGRAPH_COMMAND,
+  On as Check,
+  sr as CheckboxInterface,
+  ze as Code,
+  Cr as CodeEditor,
+  In as CodeEngine,
+  Ie as CodeGraph,
+  wr as CodeGraphEditor,
+  kr as CodeGraphInfo,
+  _t as CodeGraphInputNode,
+  gs as CodeGraphNode,
+  Ke as CodeGraphNodeInterface,
+  Ct as CodeGraphOutputNode,
+  $s as CodeGraphSidebar,
+  Ne as CodeGraphTemplate,
+  Re as CodeNode,
+  ve as CodeNodeInputInterface,
+  D as CodeNodeInterface,
+  je as CodeNodeInterfaceComponent,
+  gn as CodeNodeOutputInterface,
+  As as CodeNodePalette,
+  Pn as CodeVariable,
+  jn as Copy,
+  os as CopyToClipboard,
+  Hn as DotsVertical,
+  xn as DynamicCodeNode,
+  We as GRAPH_INPUT_NODE_TYPE,
+  Ye as GRAPH_OUTPUT_NODE_TYPE,
+  rr as IntegerInterface,
+  vr as JavascriptCode,
+  Fn as LayoutSidebarLeftCollapse,
+  Kn as LayoutSidebarLeftExpand,
+  Zn as LayoutSidebarRight,
+  oo as LayoutSidebarRightCollapse,
+  io as LayoutSidebarRightExpand,
+  ar as ListInputInterface,
+  ht as LockCode,
+  xr as NavBar,
+  Je as NavItem,
+  ir as NumberInterface,
+  mo as PlayerPlay,
+  yo as Plus,
+  mr as PythonCode,
+  mt as RUN_ENGINE_COMMAND,
+  ko as Schema,
+  Eo as SchemaOff,
+  lr as SelectInterface,
+  qe as SidebarCheckbox,
+  ur as SliderInterface,
+  wt as SubgraphInputNode,
+  kt as SubgraphOutputNode,
+  vt as TOGGLE_MINIMAP_COMMAND,
+  gt as TOGGLE_PALETTE_COMMAND,
+  dr as TextInputInterface,
+  kn as TextInputInterfaceComponent,
+  cr as TextareaInputInterface,
+  Mo as TransitionBottom,
+  Ao as TrashOff,
+  pr as TupleInputInterface,
+  Vo as X,
+  or as addDefaultInterfaceTypes,
+  gr as allowMultipleConnections,
+  dt as booleanType,
+  Fo as createCodeGraphNodeType,
+  hr as defineCodeNode,
+  fr as defineDynamicCodeNode,
+  vn as dictType,
+  hn as formatInputs,
+  bt as getCodeNodes,
+  br as getPositionAtColumn,
+  yr as getPositionBeforeNode,
+  ct as listType,
+  ut as loadNodeState,
+  X as nodeType,
+  Le as numberType,
+  Uo as registerCodeEngine,
+  Us as registerCreateSubgraphCommand,
+  Bo as registerCustomCommands,
+  zo as registerRunEngineCommands,
+  fn as saveNodeState,
+  Ve as stringType,
+  pt as tupleType,
+  Ho as updateToolbarItems,
+  Ir as useCodeGraph,
+  Ko as useSwitchCodeGraph
 };