@babsey/code-graph 0.2.3 → 0.3.1

package/dist/code-graph.js

@@ -1,20 +1,23 @@
-import Y from "mustache";
-import Ye from "toposort";
-import { AbstractNode as Ke, sortTopologically as qe, NodeInterface as Je, displayInSidebar as xe, NodeInterfaceType as H, BaklavaInterfaceTypes as Qe, CheckboxInterfaceComponent as Ze, setType as T, IntegerInterfaceComponent as et, TextInputInterfaceComponent as Me, NumberInterfaceComponent as tt, SelectInterfaceComponent as st, SliderInterfaceComponent as nt, TextareaInputInterfaceComponent as ot, allowMultipleConnections as A, IntegerInterface as at, TextInputInterface as it, getGraphNodeTypeString as rt, GraphInputNode as dt, GraphOutputNode as lt, Commands as Z, useViewModel as K, useTemporaryConnection as ut, Components as Ce, useGraph as ae, GRAPH_NODE_TYPE_PREFIX as se, useTransform as ct, useNodeCategories as pt, BaklavaEditor as ht, useBaklava as mt, DependencyEngine as vt, DEFAULT_TOOLBAR_COMMANDS as ft } from "baklavajs";
-import { reactive as q, defineComponent as R, createElementBlock as d, openBlock as i, toDisplayString as j, markRaw as B, computed as b, createElementVNode as l, withDirectives as ee, vModelText as te, ref as V, onMounted as ie, onUpdated as Oe, normalizeClass as P, createCommentVNode as N, unref as k, renderSlot as X, createStaticVNode as J, onBeforeUnmount as gt, normalizeStyle as re, withModifiers as F, createBlock as E, Fragment as S, createTextVNode as bt, createVNode as z, withKeys as ne, renderList as D, nextTick as _t, toRef as $e, resolveDynamicComponent as ke, inject as yt, Transition as Ct, withCtx as W, onUnmounted as kt, normalizeProps as wt, guardReactiveProps as It, mergeProps as Nt } from "vue";
-import { v4 as Te } from "uuid";
-import { usePointer as xt } from "@vueuse/core";
-Y.escape = (s) => s;
-class Ee extends Ke {
+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;
-  code;
   isCodeNode = !0;
   name = "";
   codeTemplate;
   inputs = {};
   outputs = {};
   constructor() {
-    super(), this.initializeIo(), this.twoColumn = !0, this.state = q({
+    super(), this.initializeIo(), this.twoColumn = !0, this.state = D({
       codeTemplate: "",
       hidden: !1,
       integrated: !1,
@@ -22,26 +25,36 @@ class Ee extends Ke {
       modules: [],
       props: null,
       script: "",
-      variableName: "x"
+      variableName: "a"
     }), this.codeTemplate = function() {
-      return `${this.name}(${Mt(this.codeNodeInputs).join(", ")})`;
+      return `${this.name}(${en(this.codeNodeInputs).join(", ")})`;
     };
   }
+  get code() {
+    return this.graph.code;
+  }
   get codeNodeInputs() {
     return Object.fromEntries(
-      Object.entries(this.inputs).filter((e) => e[1].type != "node")
+      Object.entries(this.inputs).filter(
+        (e) => e[1].isCodeNode && e[1].type != "node"
+      )
     );
   }
   get codeNodeOutputs() {
     return Object.fromEntries(
-      Object.entries(this.outputs).filter((e) => e[1].type != "node")
+      Object.entries(this.outputs).filter(
+        (e) => e[1].isCodeNode && e[1].type != "node"
+      )
     );
   }
+  get graph() {
+    return super.graph;
+  }
   get idx() {
-    return this.code?.codeNodes.filter((e) => !e.state.integrated).indexOf(this) ?? -1;
+    return this.graph.nodes.filter((e) => !e.state.integrated).indexOf(this) ?? -1;
   }
   get idxByVariableNames() {
-    return this.code?.getNodesBySameVariableNames(this.state.variableName).indexOf(this) ?? -1;
+    return this.graph.getNodesBySameVariableNames(this.state.variableName).filter((e) => !e.state.integrated).indexOf(this) ?? -1;
   }
   get lockCode() {
     return this.state.lockCode;
@@ -60,10 +73,10 @@ class Ee extends Ke {
     );
   }
   get script() {
-    return this.state.script;
+    return this.outputs._code?.value ?? "";
   }
   set script(e) {
-    this.state.script = e, this.events.update.emit(null);
+    this.outputs._code && (this.outputs._code.value = e), this.events.update.emit(null);
   }
   get shortId() {
     return this.id.slice(0, 6);
@@ -79,8 +92,8 @@ class Ee extends Ke {
    * @returns code node instance or null
    */
   getConnectedNodeByInterface(e, t) {
-    const n = this.getConnectedNodesByInterface(e, t);
-    return n.length > 0 ? n[0] : null;
+    const s = this.getConnectedNodesByInterface(e, t);
+    return s.length > 0 ? s[0] : null;
   }
   /**
    * Get connected nodes to the node.
@@ -90,14 +103,14 @@ class Ee extends Ke {
   getConnectedNodes(e) {
     let t = [];
     if (e !== "inputs") {
-      const n = this.graph?.connections.filter((o) => o.from.name !== "_code").filter((o) => o.from.nodeId === this.id).map((o) => o.to.nodeId);
-      n && (t = t.concat(n));
+      const s = this.graph.connections.filter((o) => o.from.name !== "_code").filter((o) => o.from.nodeId === this.id).map((o) => o.to.nodeId);
+      s && (t = t.concat(s));
     }
     if (e !== "outputs") {
-      const n = this.graph?.connections.filter((o) => o.from.name !== "_code").filter((o) => o.to.nodeId === this.id).map((o) => o.from.nodeId);
-      n && (t = t.concat(n));
+      const s = this.graph.connections.filter((o) => o.from.name !== "_code").filter((o) => o.to.nodeId === this.id).map((o) => o.from.nodeId);
+      s && (t = t.concat(s));
     }
-    return !t || t.length == 0 ? [] : t.map((n) => this.graph?.findNodeById(n));
+    return !t || t.length == 0 ? [] : t.map((s) => this.graph.findNodeById(s));
   }
   /**
    * Get connected nodes to the node interface.
@@ -105,20 +118,20 @@ class Ee extends Ke {
    * @returns code node instances
    */
   getConnectedNodesByInterface(e, t) {
-    let n = [];
+    let s = [];
     if (t !== "outputs" && this.inputs[e]) {
-      const o = this.graph?.connections.filter(
+      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);
-      o && (n = n.concat(o));
+      o && (s = s.concat(o));
     }
     if (t !== "inputs" && this.outputs[e]) {
-      const o = this.graph?.connections.filter(
+      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);
-      o && (n = n.concat(o));
+      o && (s = s.concat(o));
     }
-    return !n || n.length == 0 ? [] : n.map((o) => this.graph?.findNodeById(o));
+    return !s || s.length == 0 ? [] : s.map((o) => this.graph.findNodeById(o));
   }
   /**
    * Register code
@@ -130,53 +143,53 @@ class Ee extends Ke {
   /**
    * Render code of this node.
    */
-  renderCode() {
-    if (!this.lockCode) {
-      const e = {};
-      Object.keys(this.inputs).forEach((n) => {
-        if (n === "_code") return;
-        const o = this.inputs[n];
-        o && o.state && (e[n] = o.state.script.length > 0 ? o.state.script : o.getValue());
-      });
-      const t = {};
-      Object.keys(this.outputs).forEach((n) => {
-        if (n === "_code") return;
-        const o = this.outputs[n];
-        o && o.state && (t[n] = o.getValue());
-      }), this.state.script = Y.render(this.state.codeTemplate, { inputs: e, outputs: t });
-    }
-    this.outputs.out && (this.outputs.out.state.script = this.script);
+  renderCode(e) {
+    return Z.render(this.state.codeTemplate, e);
   }
   /**
-   * Reset script of input interfaces.
+   * Update code templates.
    */
-  resetInputInterfaceScript() {
-    Object.values(this.codeNodeInputs).forEach((e) => e.resetScript());
-  }
   updateCodeTemplate() {
     this.state.codeTemplate = this.codeTemplate.call(this);
   }
-  updateConnectedInputInterfaces() {
-    if (!this.graph) return;
-    const { connectionsFromNode: e } = qe(this.graph);
-    if (!e.has(this)) return;
-    const t = e.get(this);
-    t && t.forEach((n) => {
-      if (!n.from.isCodeNode || !n.to.isCodeNode) return;
-      const o = this.graph?.findNodeById(n.from.nodeId);
-      o && (o.renderCode(), n.to.script = n.from.script);
-    });
+  /**
+   * Update modules.
+   * @param modules a list of modules
+   */
+  updateModules(e) {
+    if (e)
+      this.state.modules = e;
+    else if (this.type.includes(".")) {
+      const t = this.type.split(".");
+      this.state.modules.push(t.slice(0, t.length - 1).join("."));
+    }
   }
+  /**
+   * Update output names.
+   */
   updateOutputNames() {
     Object.values(this.codeNodeOutputs).forEach((e) => {
-      e.name = this.state.integrated ? "" : this.variableName + e.value;
+      e.name = this.state.integrated ? "" : this.variableName + e.suffix;
+    });
+  }
+  /**
+   * Update output values.
+   * @param output return data of calculate function
+   */
+  updateOutputValues(e) {
+    Object.keys(this.outputs).forEach((t) => {
+      t !== "_code" && (e[t] = this.state.integrated ? e._code : this.outputs[t].name);
     });
   }
+  /**
+   * Update state props.
+   * @param props
+   */
   updateProps(e) {
     this.state.props = e;
   }
 }
-class Se extends Ee {
+class _e extends We {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -184,100 +197,80 @@ class Se extends Ee {
    * @param globalValues Set of values passed to every node by the engine plugin
    * @return Values for output interfaces
    */
-  calculate;
+  calculate = (e, t) => {
+    const s = {};
+    return this.lockCode || (s._code = this.renderCode({ inputs: e, ...t })), this.updateOutputValues(s), s;
+  };
   load(e) {
-    super.load(e), Be(this.graph, e);
+    super.load(e), Ye(this.graph, e);
   }
   save() {
     const e = super.save();
-    return Ot(this.graph, e), e;
-  }
-  updateModules(e) {
-    if (e)
-      this.state.modules = e;
-    else if (this.type.includes(".")) {
-      const t = this.type.split(".");
-      this.state.modules.push(t.slice(0, t.length - 1).join("."));
-    }
+    return tn(this.graph, e), e;
   }
 }
-const Mt = (s, e = !0) => {
-  const t = [], n = Object.keys(s);
-  return n.forEach((o) => {
-    if (s[o]?.hidden) return;
-    const r = e && t.length < n.indexOf(o) ? `${o}=` : "";
-    t.push(`${r}{{ inputs.${o} }}`);
+const en = (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;
-}, Be = (s, e) => {
-  if (!s) return;
-  const t = s.findNodeById(e.id);
+}, Ye = (n, e) => {
+  if (!n) return;
+  const t = n.findNodeById(e.id);
   if (!t || t.subgraph) return;
-  const n = t;
-  n.state && (n.state.integrated = e.integrated, n.state.modules = e.modules, n.state.props = e.props), Object.entries(e.inputs).forEach(([o, a]) => {
-    o !== "_code" && n.inputs[o] && (n.inputs[o].hidden = a.hidden);
+  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" && n.outputs[o] && (n.outputs[o].hidden = a.hidden);
+    o !== "_code" && s.outputs[o] && (s.outputs[o].hidden = a.hidden);
   });
-}, Ot = (s, e) => {
-  if (!s) return;
-  const t = s.findNodeById(e.id);
+}, tn = (n, e) => {
+  if (!n) return;
+  const t = n.findNodeById(e.id);
   if (!t || t.subgraph) return;
-  const n = t;
-  n.state && (e.integrated = n.state.integrated, e.modules = n.state.modules), Object.entries(e.inputs).forEach(([o, a]) => {
-    o !== "_code" && n.inputs[o] && (a.hidden = n.inputs[o].hidden);
+  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" && n.outputs[o] && (a.hidden = n.outputs[o].hidden);
+    o !== "_code" && s.outputs[o] && (a.hidden = s.outputs[o].hidden);
   });
-}, $t = ["title"], de = /* @__PURE__ */ R({
+}, nn = ["title"], ye = /* @__PURE__ */ F({
   __name: "CodeNodeInterface",
   props: {
     intf: {}
   },
-  setup(s) {
-    return (e, t) => (i(), d("div", {
-      title: s.intf.state?.script
-    }, j(s.intf.name), 9, $t));
+  setup(n) {
+    return (e, t) => (d(), p("div", {
+      title: n.intf.value
+    }, G(n.intf.name), 9, nn));
   }
 });
-class G extends Je {
+class R extends A {
   isCodeNode = !0;
   code;
   state;
   type = null;
   constructor(e, t) {
-    super(e, t), this.setComponent(B(de)), this.state = q({
-      optional: !1,
-      script: ""
+    super(e, t), this.setComponent(z(ye)), this.state = D({
+      optional: !1
     });
   }
   get optional() {
     return this.state.optional;
   }
-  get script() {
-    return this.state.script;
-  }
-  set script(e) {
-    this.state.script = e;
-  }
   get shortId() {
     return this.id.slice(0, 6);
   }
   getValue = () => `${this.value ?? "None"}`;
-  resetScript = () => this.state.script = "";
   setOptional(e) {
     return this.state.optional = e, this.setHidden(e), this;
   }
 }
-class Q extends G {
+class ae extends R {
   constructor(e = "", t) {
-    super(e, t), this.setComponent(B(de)), this.use(xe, !0);
-  }
-  set script(e) {
-    if (this.state.script && this.allowMultipleConnections) {
-      const t = this.state.script;
-      t.startsWith("[") && t.endsWith("]") ? e = JSON.stringify([e, ...JSON.parse(t)]) : e = [e, t].join(", ");
-    }
-    this.state.script = e;
+    super(e, t), this.setComponent(z(ye)), this.use(De, !0);
   }
   get value() {
     return super.value;
@@ -286,72 +279,77 @@ class Q extends G {
     super.value = e, this.name !== "_code" && this.setHidden(!1);
   }
 }
-const Ve = new H("boolean"), Tt = new H("dict"), ze = new H("list"), U = new H("node"), le = new H("number"), ue = new H("string"), je = new H("tuple"), Nn = (s) => {
-  new Qe(s.editor, { viewPlugin: s }).addTypes(Ve, Tt, ze, U, le, ue, je);
+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);
 };
-class xn extends Q {
+class fo extends ae {
   constructor(e, t) {
-    super(e, t), this.setComponent(B(Ze)), this.use(T, Ve);
+    super(e, t), this.setComponent(z($t)), this.use($, Ke);
   }
   getValue = () => this.value ? "True" : "False";
 }
-class Le extends G {
+class on extends R {
   isCodeNodeOutput = !0;
+  suffix = "";
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(B(de));
+    super(e, ""), this.suffix = t, this.setComponent(z(ye));
   }
-  get script() {
-    return this.name ? this.name : this.state.script;
+  get codeValue() {
+    return this.node?.outputs._code.value ?? "";
+  }
+  get node() {
+    const { graph: e } = ge();
+    return e.value.findNodeById(this.nodeId);
   }
 }
-class ce extends Q {
+class we extends ae {
   min;
   max;
-  constructor(e, t, n, o) {
-    super(e, t), this.min = n, this.max = o, this.use(T, le);
+  constructor(e, t, s, o) {
+    super(e, t), this.min = s, this.max = o, this.use($, Ce);
   }
   validate(e) {
     return (this.min === void 0 || e >= this.min) && (this.max === void 0 || e <= this.max);
   }
 }
-class Mn extends ce {
-  component = B(et);
+class vo extends we {
+  component = z(Mt);
   validate(e) {
     return Number.isInteger(e) && super.validate(e);
   }
 }
-class On extends Q {
+class go extends ae {
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(B(Me)), this.use(T, ze);
+    super(e, t), this.setComponent(z(Fe)), this.use($, Xe);
   }
   getValue = () => `[${this.value}]`;
 }
-class $n extends ce {
-  component = B(tt);
+class bo extends we {
+  component = z(Gt);
 }
-class pe extends Q {
+class ke extends ae {
   constructor(e, t) {
-    super(e, t), this.use(T, ue);
+    super(e, t), this.use($, Ie);
   }
   getValue = () => `"${this.value}"`;
 }
-class Tn extends pe {
-  component = B(st);
+class _o extends ke {
+  component = z(St);
   items;
-  constructor(e, t, n) {
-    super(e, t), this.items = n;
+  constructor(e, t, s) {
+    super(e, t), this.items = s;
   }
 }
-class En extends ce {
-  component = B(nt);
+class yo extends we {
+  component = z(Pt);
   min;
   max;
-  constructor(e, t, n, o) {
-    super(e, t, n, o), this.min = n, this.max = o;
+  constructor(e, t, s, o) {
+    super(e, t, s, o), this.min = s, this.max = o;
   }
   getValue = () => `${Math.round(this.value * 1e3) / 1e3}`;
 }
-const Et = R({
+const an = F({
   props: {
     intf: {
       type: Object,
@@ -363,127 +361,119 @@ const Et = R({
     }
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: e }) {
-    return { v: b({
-      get: () => s.modelValue,
-      set: (n) => {
-        e("update:modelValue", n);
+  setup(n, { emit: e }) {
+    return { v: O({
+      get: () => n.modelValue,
+      set: (s) => {
+        e("update:modelValue", s);
       }
     }) };
   }
-}), O = (s, e) => {
-  const t = s.__vccOpts || s;
-  for (const [n, o] of e)
-    t[n] = o;
+}), P = (n, e) => {
+  const t = n.__vccOpts || n;
+  for (const [s, o] of e)
+    t[s] = o;
   return t;
-}, St = { style: { position: "relative" } }, Bt = { style: { "font-size": "12px", padding: "0 6px", position: "absolute", top: "-8px", "background-color": "var(--baklava-node-color-background)" } }, Vt = ["placeholder", "title"];
-function zt(s, e, t, n, o, a) {
-  return i(), d("div", St, [
-    l("label", Bt, j(s.intf.name), 1),
-    ee(l("input", {
-      "onUpdate:modelValue": e[0] || (e[0] = (r) => s.v = r),
+}, 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", {
+      "onUpdate:modelValue": e[0] || (e[0] = (i) => n.v = i),
       type: "text",
       class: "baklava-input",
-      placeholder: s.intf.name,
-      title: s.intf.name
-    }, null, 8, Vt), [
-      [te, s.v]
+      placeholder: n.intf.name,
+      title: n.intf.name
+    }, null, 8, ln), [
+      [le, n.v]
     ])
   ]);
 }
-const jt = /* @__PURE__ */ O(Et, [["render", zt]]);
-class Sn extends pe {
-  component = B(jt);
+const cn = /* @__PURE__ */ P(an, [["render", un]]);
+class Co extends ke {
+  component = z(cn);
 }
-class Bn extends pe {
-  component = B(ot);
+class Io extends ke {
+  component = z(Vt);
 }
-class Vn extends Q {
+class wo extends ae {
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(B(Me)), this.use(T, je);
+    super(e, t), this.setComponent(z(Fe)), this.use($, qe);
   }
   getValue = () => `(${this.value})`;
 }
-function zn(s) {
-  return class extends Se {
-    type = s.type;
+function ko(n) {
+  return class extends _e {
+    type = n.type;
     inputs = {};
     outputs = {};
     constructor() {
-      super(), this._title = s.title ?? s.type, this.executeFactory("input", s.inputs), this.executeFactory("output", s.outputs), s.onCreate?.call(this), this.name = s.name ?? s.type, this.updateModules(s.modules), s.variableName != null && (this.state.variableName = s.variableName), s.codeTemplate && (this.codeTemplate = s.codeTemplate), this.addInput(
+      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 G("", []).use(T, U).use(A).setHidden(!0)
+        new R("", []).use($, U).use(Q).setHidden(!0)
       ), this.addOutput(
         "_code",
-        new G("", []).use(T, U).use(A).setHidden(!0)
+        new R("", []).use($, U).use(Q).setHidden(!0)
       );
     }
     onPlaced() {
-      s.onPlaced?.call(this);
+      n.onPlaced?.call(this);
     }
     onConnected() {
-      s.onConnected?.call(this);
+      n.onConnected?.call(this);
     }
     onDestroy() {
-      s.onDestroy?.call(this);
+      n.onDestroy?.call(this);
     }
     onUnconnected() {
-      s.onUnconnected?.call(this);
+      n.onUnconnected?.call(this);
     }
     update() {
-      s.update?.call(this);
+      n.update?.call(this);
     }
     executeFactory(e, t) {
-      Object.keys(t || {}).forEach((n) => {
-        const o = t[n]();
-        e === "input" ? this.addInput(n, o) : this.addOutput(n, o);
+      Object.keys(t || {}).forEach((s) => {
+        const o = t[s]();
+        e === "input" ? this.addInput(s, o) : this.addOutput(s, o);
       });
     }
   };
 }
-class Lt extends Se {
-  /**
-   * The default implementation does nothing.
-   * Overwrite this method to do calculation.
-   * @param inputs Values of all input interfaces
-   * @param globalValues Set of values passed to every node by the engine plugin
-   * @return Values for output interfaces
-   */
-  calculate;
+class pn extends _e {
 }
-function jn(s) {
-  return class extends Lt {
-    type = s.type;
+function No(n) {
+  return class extends pn {
+    type = n.type;
     inputs = {};
     outputs = {};
     preventUpdate = !1;
-    staticInputKeys = Object.keys(s.inputs ?? {});
-    staticOutputKeys = Object.keys(s.outputs ?? {});
+    staticInputKeys = Object.keys(n.inputs ?? {});
+    staticOutputKeys = Object.keys(n.outputs ?? {});
     constructor() {
-      super(), this._title = s.title ?? s.type, this.executeFactory("input", s.inputs), this.executeFactory("output", s.outputs), s.onCreate?.call(this), this.name = s.name ?? s.type, this.updateModules(s.modules), s.codeTemplate && (this.codeTemplate = s.codeTemplate), s.variableName && (this.state.variableName = s.variableName), this.addInput(
+      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 G("", []).use(T, U).use(A).setHidden(!0)
+        new R("", []).use($, U).use(Q).setHidden(!0)
       ), this.addOutput(
         "_code",
-        new G("", []).use(T, U).use(A).setHidden(!0)
+        new R("", []).use($, U).use(Q).setHidden(!0)
       ), this.staticInputKeys.push("_code"), this.staticOutputKeys.push("_code");
     }
     onPlaced() {
       this.events.update.subscribe(this, (e) => {
         e && (e.type === "input" && this.staticInputKeys.includes(e.name) || e.type === "output" && this.staticOutputKeys.includes(e.name)) && this.onUpdate();
-      }), this.onUpdate(), s.onPlaced?.call(this);
+      }), this.onUpdate(), n.onPlaced?.call(this);
     }
     onConnected() {
-      s.onConnected?.call(this);
+      n.onConnected?.call(this);
     }
     onDestroy() {
-      s.onDestroy?.call(this);
+      n.onDestroy?.call(this);
     }
     onUnconnected() {
-      s.onUnconnected?.call(this);
+      n.onUnconnected?.call(this);
     }
     update() {
-      s.update?.call(this);
+      n.update?.call(this);
     }
     load(e) {
       this.preventUpdate = !0, this.hooks.beforeLoad.execute(e), this.id = e.id, this.title = e.title;
@@ -495,56 +485,105 @@ function jn(s) {
       for (const t of Object.keys(e.inputs))
         if (!this.staticInputKeys.includes(t)) {
           if (!this.inputs[t]) {
-            const n = e.inputs[t].value;
+            const s = e.inputs[t].value;
             let o;
-            typeof n == "number" ? o = new at(t, n).use(T, le) : o = new it(t, JSON.stringify(n)).use(T, ue), o.use(xe, !0), this.addInput(t, 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);
           }
           this.inputs[t] && (this.inputs[t].load(e.inputs[t]), this.inputs[t].nodeId = this.id);
         }
       for (const t of Object.keys(e.outputs))
         if (!this.staticOutputKeys.includes(t)) {
           if (!this.outputs[t]) {
-            const n = new Le(t);
-            this.addOutput(t, n);
+            const s = new on(t);
+            this.addOutput(t, s);
           }
           this.outputs[t] && (this.outputs[t].load(e.outputs[t]), this.outputs[t].nodeId = this.id);
         }
-      Be(this.graph, e), this.preventUpdate = !1, this.events.loaded.emit(this);
+      Ye(this.graph, e), this.preventUpdate = !1, this.events.loaded.emit(this);
     }
     onUpdate() {
       if (this.preventUpdate) return;
       this.graph && this.graph.activeTransactions++;
-      const e = this.getStaticValues(this.staticInputKeys, this.inputs), t = this.getStaticValues(this.staticOutputKeys, this.outputs), n = s.onUpdate.call(this, e, t);
-      this.updateInterfaces("input", n.inputs ?? {}, n.forceUpdateInputs ?? []), this.updateInterfaces("output", n.outputs ?? {}, n.forceUpdateOutputs ?? []), this.graph && this.graph.activeTransactions--;
+      const e = this.getStaticValues(this.staticInputKeys, this.inputs), t = this.getStaticValues(this.staticOutputKeys, this.outputs), s = n.onUpdate.call(this, e, t);
+      this.updateInterfaces("input", s.inputs ?? {}, s.forceUpdateInputs ?? []), this.updateInterfaces("output", s.outputs ?? {}, s.forceUpdateOutputs ?? []), this.graph && this.graph.activeTransactions--;
     }
     getStaticValues(e, t) {
-      const n = {};
+      const s = {};
       for (const o of e)
-        n[o] = t[o].value;
-      return n;
+        s[o] = t[o].value;
+      return s;
     }
-    updateInterfaces(e, t, n) {
+    updateInterfaces(e, t, s) {
       const o = e === "input" ? this.staticInputKeys : this.staticOutputKeys, a = e === "input" ? this.inputs : this.outputs;
-      for (const r of Object.keys(a))
-        o.includes(r) || t[r] && !n.includes(r) || (e === "input" ? this.removeInput(r) : this.removeOutput(r));
-      for (const r of Object.keys(t)) {
-        if (a[r]) continue;
-        const u = t[r]();
-        e === "input" ? this.addInput(r, u) : this.addOutput(r, u);
+      for (const i of Object.keys(a))
+        o.includes(i) || t[i] && !s.includes(i) || (e === "input" ? this.removeInput(i) : this.removeOutput(i));
+      for (const i of Object.keys(t)) {
+        if (a[i]) continue;
+        const r = t[i]();
+        e === "input" ? this.addInput(i, r) : this.addOutput(i, r);
       }
     }
     updateProps(e) {
       this.state.props = e, this.onUpdate();
     }
     executeFactory(e, t) {
-      Object.keys(t || {}).forEach((n) => {
-        const o = t[n]();
-        e === "input" ? this.addInput(n, o) : this.addOutput(n, o);
+      Object.keys(t || {}).forEach((s) => {
+        const o = t[s]();
+        e === "input" ? this.addInput(s, o) : this.addOutput(s, o);
       });
     }
   };
 }
-const Ln = "__baklava_GraphNode-", Gt = [
+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",
@@ -559,9 +598,9 @@ const Ln = "__baklava_GraphNode-", Gt = [
   "templateId",
   "value"
 ];
-function Rt(s) {
-  return class extends Ee {
-    type = rt(s);
+function mn(n) {
+  return class extends We {
+    type = Ue(n);
     get title() {
       return this._title;
     }
@@ -570,55 +609,39 @@ function Rt(s) {
     }
     inputs = {};
     outputs = {};
-    template = s;
+    template = n;
     subgraph;
-    // public override calculate: CalculateFunction<Record<string, unknown>, Record<string, unknown>> = async (
-    //   inputs,
-    //   context,
-    // ) => {
-    //   if (!this.subgraph) {
-    //     throw new Error(`GraphNode ${this.id}: calculate called without subgraph being initialized`)
-    //   }
-    //   if (!context.engine || typeof context.engine !== 'object') {
-    //     throw new Error(`GraphNode ${this.id}: calculate called but no engine provided in context`)
-    //   }
-    //   const graphInputs = context.engine.getInputValues(this.subgraph)
-    //   // fill subgraph input placeholders
-    //   for (const input of this.subgraph.inputs) {
-    //     graphInputs.set(input.nodeInterfaceId, inputs[input.id])
-    //   }
-    //   const result: Map<string, Map<string, unknown>> = await context.engine.runGraph(
-    //     this.subgraph,
-    //     graphInputs,
-    //     context.globalValues,
-    //   )
-    //   const outputs: Record<string, unknown> = {}
-    //   for (const output of this.subgraph.outputs) {
-    //     outputs[output.id] = result.get(output.nodeId)?.get('output')
-    //   }
-    //   outputs._calculationResults = result
-    //   outputs['_code'] = inputs['_code']
-    //   return outputs
-    // }
-    /**
-     * Render code script of code nodes.
-     */
-    renderCodes() {
-      if (!this.subgraph) return;
-      this.subgraph.nodes.filter((n) => n.isCodeNode).forEach((n) => n.renderCode());
-      const t = this.subgraph.nodes;
-      this.state.script = Y.render(this.code.state.template || "", { nodes: t });
+    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");
+      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");
+      if (!this.subgraph) throw new Error("Cannot save a graph node without a graph");
       return {
         ...super.save(),
         graphState: this.subgraph.save()
@@ -629,92 +652,79 @@ function Rt(s) {
         this._title = t;
       }), this.initialize();
     }
-    onConnected() {
-    }
     onDestroy() {
       this.template.events.updated.unsubscribe(this), this.template.events.nameChanged.unsubscribe(this), this.subgraph?.destroy();
     }
-    onUnconnected() {
-    }
     initialize() {
-      this.subgraph && this.subgraph.destroy(), this.subgraph = this.template.createGraph(), this._title = this.template.name, this.updateInterfaces(), this.events.update.emit(null);
+      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");
+      if (!this.subgraph) throw new Error("Trying to update interfaces without graph instance");
       for (const t of this.subgraph.inputs)
         t.id in this.inputs ? this.inputs[t.id].name = t.name : this.addInput(t.id, this.createProxyInterface(t, !0));
       for (const t of Object.keys(this.inputs))
-        this.subgraph.inputs.some((n) => n.id === t) || this.removeInput(t);
+        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((n) => n.id === t) || this.removeOutput(t);
+        this.subgraph.outputs.some((s) => s.id === t) || this.removeOutput(t);
       this.addInput(
         "_code",
-        new G("", []).use(T, U).use(A).setHidden(!0)
+        new R("", []).use($, U).use(Q).setHidden(!0)
       ), this.addOutput(
         "_code",
-        new G("", []).use(T, U).use(A).setHidden(!0)
-      ), this.addOutput(
-        "_calculationResults",
-        new Le("_calculationResults", void 0).setHidden(!0)
-      );
+        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, n) {
-      const o = new G(t.name, void 0);
+    createProxyInterface(t, s) {
+      const o = new R(t.name, void 0);
       return new Proxy(o, {
-        get: (a, r) => {
-          if (Gt.includes(r) || r in a || typeof r == "string" && r.startsWith("__v_"))
-            return Reflect.get(a, r);
-          let u;
-          n ? u = this.subgraph?.nodes.find(
-            (I) => dt.isGraphInputNode(I) && I.graphInterfaceId === t.id
-          )?.outputs.placeholder.id : u = this.subgraph?.nodes.find(
-            (I) => lt.isGraphOutputNode(I) && I.graphInterfaceId === t.id
+        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 p = this.subgraph?.connections.find((g) => u === (n ? g.from : g.to)?.id), _ = n ? p?.to : p?.from;
-          if (_)
-            return Reflect.get(_, r);
+          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);
         }
       });
     }
   };
 }
-Y.escape = (s) => s;
-class Pt {
+Z.escape = (n) => n;
+class fn {
   _id;
-  _viewModel;
   _state;
-  constructor(e) {
-    this._id = Te(), this._viewModel = e, this._state = q({
-      autosort: !1,
+  viewModel;
+  constructor() {
+    this._id = K(), this._state = D({
       lockCode: !1,
       modules: {},
       script: "",
-      template: "",
-      token: null
+      template: ""
     });
   }
-  get codeNodes() {
-    return oe(this.graph);
-  }
-  get codeNodeIds() {
-    return this.codeNodes.map((e) => e.id);
-  }
-  get connections() {
-    return this.graph.connections;
-  }
-  set connections(e) {
-    this.graph._connections = e;
+  get engine() {
+    return this.viewModel?.engine;
   }
   get graph() {
-    return this.viewModel.displayedGraph;
+    return this.viewModel?.editor.graph;
   }
   get id() {
     return this._id;
@@ -723,33 +733,17 @@ class Pt {
     return this.state.lockCode;
   }
   set lockCode(e) {
-    this.state.lockCode = e, this.viewModel.engine.runOnce(null);
+    this.state.lockCode = e, this.engine?.runOnce(null);
   }
   get modules() {
     const e = [];
-    return this.codeNodes.filter((t) => t.state.modules?.length > 0).forEach((t) => e.push(...t.state.modules)), e ? (e.sort(), Array.from(
-      new Set(e.map((t) => this.viewModel.state.modules[t]))
-    )) : [];
-  }
-  get nodeIds() {
-    return this.nodes.map((e) => e.id);
-  }
-  get nodes() {
-    return this.graph.nodes;
-  }
-  set nodes(e) {
-    this.graph._nodes = e;
+    return this.graph?.codeNodes.filter((t) => t.state.modules?.length > 0).forEach((t) => e.push(...t.state.modules)), e ? (e.sort(), Array.from(new Set(e.map((t) => this.state.modules[t])))) : [];
   }
   get script() {
     return this.state.script;
   }
   set script(e) {
-    this.state.script = e;
-  }
-  get scriptedCodeNodes() {
-    return oe(this.graph).filter(
-      (e) => !e.state?.integrated
-    );
+    this.state.script = e, this.engine?.runOnce(null);
   }
   get shortId() {
     return this.id.slice(0, 6);
@@ -757,86 +751,11 @@ class Pt {
   get state() {
     return this._state;
   }
-  get viewModel() {
-    return this._viewModel;
-  }
-  get visibleNodes() {
-    return this.codeNodes.filter((e) => !e.state?.hidden);
-  }
-  /**
-   * Add code node to graph.
-   * @param node code node
-   * @param props optional
-   */
-  addNode(e, t) {
-    return e.code || (e.code = this), t && (e.state.props = t), this.graph.addNode(e);
-  }
-  /**
-   * Add code node at coordinates.
-   * @param node code node
-   * @param position position
-   * @param props optional
-   * @returns code node
-   */
-  addNodeAtCoordinates = (e, t = { x: 0, y: 0 }, n) => (this.addNode(e, n), e.position && (e.position = t), e);
-  /**
-   * Add connection of code nodes
-   * @param from code node interface
-   * @param to code node interface
-   */
-  addConnection(e, t) {
-    e.name !== "_code" && (e.hidden = !1), t.name !== "_code" && (t.hidden = !1), this.graph.addConnection(e, t);
-  }
   /**
-   * Clear code graph.
+   * Clear code.
    */
   clear() {
-    this.viewModel.commandHandler.executeCommand(Z.CLEAR_CLIPBOARD_COMMAND), this.viewModel.commandHandler.executeCommand(Z.CLEAR_HISTORY_COMMAND), this.state.modules = {}, this.nodes = [], this.connections = [], this.state.script = "";
-  }
-  /**
-   * Find node by ID.
-   * @param id node ID
-   * @returns node instance
-   */
-  findNodeById(e) {
-    return this.graph.findNodeById(e);
-  }
-  /**
-   * Find node by type.
-   * @param nodeType node type
-   * @returns node instance
-   */
-  findNodeByType(e) {
-    return this.codeNodes.find((t) => t.type === e);
-  }
-  /**
-   * Get nodes of the same type.
-   * @param type node type
-   * @returns a list of node instances
-   */
-  getNodesBySameType(e) {
-    return this.codeNodes.filter((t) => t.type === e);
-  }
-  /**
-   * Get nodes of the same variable name.
-   * @param variableName variable name
-   * @returns a list of node instances
-   */
-  getNodesBySameVariableNames(e) {
-    return this.codeNodes.filter(
-      (t) => t.state.variableName === e
-    );
-  }
-  /**
-   * Check whether the graph has this connection.
-   * @param from node interface
-   * @param to node interface
-   * @returns boolean
-   */
-  hasConnection(e, t) {
-    return this.connections.some(
-      (n) => n.from.id === e.id && n.to.id === t.id
-    );
+    this.state.script = "";
   }
   /**
    * Load template from the file.
@@ -848,116 +767,91 @@ class Pt {
     });
   }
   /**
-   * Remove connection from the graph
-   * @param connection connection between code nodes
+   * Register code view model instance.
+   * @param viewModel view model
    */
-  removeConnection(e) {
-    this.graph.removeConnection(e);
-  }
-  /**
-   * Remove node from the graph.
-   * @param codeNode code node
-   */
-  removeNode(e) {
-    this.graph.removeNode(e);
-  }
-  /**
-   * Render code script of code nodes.
-   */
-  renderNodeCodes() {
-    this.state.lockCode || this.codeNodes.length === 0 || this.codeNodes.forEach((e) => e.renderCode());
+  registerViewModel(e) {
+    this.viewModel = e;
   }
   /**
    * Render code script.
    */
-  renderCode() {
-    if (this.state.lockCode) return;
-    const e = this.scriptedCodeNodes, t = this.modules;
-    this.state.script = Y.render(this.state.template || "", { nodes: e, modules: t });
-  }
-  /**
-   * Reset scripts of intput interfaces.
-   */
-  resetInputInterfaceScript() {
-    this.codeNodes.forEach((e) => e.resetInputInterfaceScript());
+  renderCode(e) {
+    this.state.script = Z.render(this.state.template || "", e);
   }
-  /**
-   * Sort code nodes.
-   */
-  sortNodes() {
-    if (!(this.nodes.length === 0 || this.connections.length === 0))
-      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 = Ye.array(e, t), e.reverse();
-        const n = this.graph.nodes.map((a) => a.id).filter((a) => !e.includes(a));
-        e = [...e, ...n];
-        const o = e.map((a) => this.findNodeById(a));
-        o && (this.nodes = o);
-      } catch {
-        console.warn("Failed to sort nodes.");
+}
+const Oo = (n) => {
+  n.allowMultipleConnections = !0;
+};
+class vn extends Tt {
+  order = /* @__PURE__ */ new Map();
+  constructor(e) {
+    super(e);
+  }
+  start() {
+    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, _);
+            });
+      } else {
+        h = {};
+        for (const [g, _] of Object.entries(r.outputs))
+          h[g] = this.getInterfaceValue(t, _.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 (!_)
+          throw new Error(
+            `Could not find key for interface ${g.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);
+      });
+    }
+    return i;
+  }
+  async execute(e) {
+    this.recalculateOrder && (this.order.clear(), this.recalculateOrder = !1);
+    const t = this.getInputValues(this.editor.graph);
+    return await this.runGraph(this.editor.graph, t, e);
+  }
+  getInputValues(e) {
+    const t = /* @__PURE__ */ new Map();
+    for (const s of e.nodes)
+      Object.values(s.inputs).forEach((o) => {
+        o.connectionCount === 0 && t.set(o.id, o.getValue ? o.getValue() : o.value);
+      }), s.calculate || Object.values(s.outputs).forEach((o) => {
+        t.set(o.id, o.getValue ? o.getValue() : o.value);
+      });
+    return t;
   }
-  /**
-   * Update code nodes.
-   */
-  updateCodeNodes() {
-    this.codeNodes.forEach((e) => e.update());
+  onChange(e) {
+    this.recalculateOrder = e || this.recalculateOrder, this.calculateWithoutData();
   }
-  /**
-   * Update code templates.
-   */
-  updateCodeTemplates() {
-    this.codeNodes.forEach((e) => e.updateCodeTemplate());
+  getInterfaceValue(e, t) {
+    if (!e.has(t))
+      throw new Error(
+        `Could not find value for interface ${t}
+This is likely an internal issue. Please report it on GitHub.`
+      );
+    return e.get(t);
   }
 }
-const oe = (s) => {
-  const e = [];
-  return s.nodes.length === 0 || s.nodes.forEach((t) => {
-    t && (t.hasOwnProperty("subgraph") ? e.push(...oe(t.subgraph)) : t.hasOwnProperty("isCodeNode") && e.push(t));
-  }), e;
-}, Rn = (s = 0, e = 100) => ({
-  x: s * 420,
-  y: e
-}), Pn = (s) => {
-  const e = { ...s.position };
-  return e.x -= 440, e.y += 50, e;
-}, Ut = ["id"], Ht = { class: "align-middle" }, we = /* @__PURE__ */ R({
-  __name: "CodeGraphNodeInterface",
-  props: {
-    node: {},
-    intf: {}
-  },
-  setup(s) {
-    const e = s, { viewModel: t } = K(), { hoveredOver: n, temporaryConnection: o } = ut(), a = V(null), r = b(() => e.intf.connectionCount > 0), u = b(() => ({
-      "--connected": r.value
-    })), p = () => {
-      n(e.intf);
-    }, _ = () => {
-      n(void 0);
-    }, g = () => {
-      a.value && t.value.hooks.renderInterface.execute({ intf: e.intf, el: a.value });
-    };
-    return ie(g), Oe(g), (I, L) => (i(), d("div", {
-      id: s.intf.id,
-      ref_key: "el",
-      ref: a,
-      class: P(["baklava-node-interface", u.value])
-    }, [
-      s.intf.port ? (i(), d("div", {
-        key: 0,
-        class: P(["__port", { "--selected": k(o)?.from === s.intf }]),
-        onPointerover: p,
-        onPointerout: _
-      }, null, 34)) : N("", !0),
-      l("span", Ht, [
-        X(I.$slots, "default")
-      ])
-    ], 10, Ut));
-  }
-}), At = {}, Dt = {
+const gn = {}, bn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -969,17 +863,17 @@ const oe = (s) => {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-code-variable"
 };
-function Ft(s, e) {
-  return i(), d("svg", Dt, [...e[0] || (e[0] = [
-    l("path", {
+function _n(n, e) {
+  return d(), p("svg", bn, [...e[0] || (e[0] = [
+    u("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    l("path", { d: "M4 8m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" }, null, -1)
+    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)
   ])]);
 }
-const Wt = /* @__PURE__ */ O(At, [["render", Ft]]), Xt = {}, Yt = {
+const yn = /* @__PURE__ */ P(gn, [["render", _n]]), Cn = {}, In = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -991,19 +885,19 @@ const Wt = /* @__PURE__ */ O(At, [["render", Ft]]), Xt = {}, Yt = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"
 };
-function Kt(s, e) {
-  return i(), d("svg", Yt, [...e[0] || (e[0] = [
-    l("path", {
+function wn(n, e) {
+  return d(), p("svg", In, [...e[0] || (e[0] = [
+    u("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    l("path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
-    l("path", { d: "M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
-    l("path", { d: "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
+    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)
   ])]);
 }
-const qt = /* @__PURE__ */ O(Xt, [["render", Kt]]), Jt = {}, Qt = {
+const kn = /* @__PURE__ */ P(Cn, [["render", wn]]), Nn = {}, xn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1011,17 +905,17 @@ const qt = /* @__PURE__ */ O(Xt, [["render", Kt]]), Jt = {}, Qt = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"
 };
-function Zt(s, e) {
-  return i(), d("svg", Qt, [...e[0] || (e[0] = [
-    l("path", {
+function On(n, e) {
+  return d(), p("svg", xn, [...e[0] || (e[0] = [
+    u("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    l("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-2.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
+    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)
   ])]);
 }
-const es = /* @__PURE__ */ O(Jt, [["render", Zt]]), ts = {}, ss = {
+const Tn = /* @__PURE__ */ P(Nn, [["render", On]]), En = {}, $n = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1029,17 +923,17 @@ const es = /* @__PURE__ */ O(Jt, [["render", Zt]]), ts = {}, ss = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-expand"
 };
-function ns(s, e) {
-  return i(), d("svg", ss, [...e[0] || (e[0] = [
-    l("path", {
+function Mn(n, e) {
+  return d(), p("svg", $n, [...e[0] || (e[0] = [
+    u("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    l("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-4.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
+    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)
   ])]);
 }
-const os = /* @__PURE__ */ O(ts, [["render", ns]]), as = {}, is = {
+const Gn = /* @__PURE__ */ P(En, [["render", Mn]]), Sn = {}, Pn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1047,17 +941,17 @@ const os = /* @__PURE__ */ O(ts, [["render", ns]]), as = {}, is = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right"
 };
-function rs(s, e) {
-  return i(), d("svg", is, [...e[0] || (e[0] = [
-    l("path", {
+function Vn(n, e) {
+  return d(), p("svg", Pn, [...e[0] || (e[0] = [
+    u("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    l("path", { d: "M6 21a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3zm8 -16h-8a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h8z" }, null, -1)
+    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)
   ])]);
 }
-const ds = /* @__PURE__ */ O(as, [["render", rs]]), ls = {}, us = {
+const Rn = /* @__PURE__ */ P(Sn, [["render", Vn]]), jn = {}, Bn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1065,17 +959,17 @@ const ds = /* @__PURE__ */ O(as, [["render", rs]]), ls = {}, us = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-collapse"
 };
-function cs(s, e) {
-  return i(), d("svg", us, [...e[0] || (e[0] = [
-    l("path", {
+function zn(n, e) {
+  return d(), p("svg", Bn, [...e[0] || (e[0] = [
+    u("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    l("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-5.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
+    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)
   ])]);
 }
-const ps = /* @__PURE__ */ O(ls, [["render", cs]]), hs = {}, ms = {
+const Hn = /* @__PURE__ */ P(jn, [["render", zn]]), Ln = {}, Un = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1083,17 +977,17 @@ const ps = /* @__PURE__ */ O(ls, [["render", cs]]), hs = {}, ms = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-expand"
 };
-function vs(s, e) {
-  return i(), d("svg", ms, [...e[0] || (e[0] = [
-    l("path", {
+function An(n, e) {
+  return d(), p("svg", Un, [...e[0] || (e[0] = [
+    u("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    l("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-3.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
+    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)
   ])]);
 }
-const fs = /* @__PURE__ */ O(hs, [["render", vs]]), gs = {}, bs = {
+const Dn = /* @__PURE__ */ P(Ln, [["render", An]]), Fn = {}, Wn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1105,12 +999,34 @@ const fs = /* @__PURE__ */ O(hs, [["render", vs]]), gs = {}, bs = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-lock-code"
 };
-function _s(s, e) {
-  return i(), d("svg", bs, [...e[0] || (e[0] = [
-    J('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2"></path><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M8 11v-4a4 4 0 1 1 8 0v4"></path><path d="M20 21l2 -2l-2 -2"></path><path d="M17 17l-2 2l2 2"></path>', 6)
+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)
+  ])]);
+}
+const Kn = /* @__PURE__ */ P(Fn, [["render", Yn]]), Xn = {}, qn = {
+  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-player-play"
+};
+function Jn(n, e) {
+  return d(), p("svg", qn, [...e[0] || (e[0] = [
+    u("path", {
+      stroke: "none",
+      d: "M0 0h24v24H0z",
+      fill: "none"
+    }, null, -1),
+    u("path", { d: "M7 4v16l13 -8z" }, null, -1)
   ])]);
 }
-const ys = /* @__PURE__ */ O(gs, [["render", _s]]), Cs = {}, ks = {
+const Qn = /* @__PURE__ */ P(Xn, [["render", Jn]]), Zn = {}, es = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1122,12 +1038,12 @@ const ys = /* @__PURE__ */ O(gs, [["render", _s]]), Cs = {}, ks = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema"
 };
-function ws(s, e) {
-  return i(), d("svg", ks, [...e[0] || (e[0] = [
-    J('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 2h5v4h-5z"></path><path d="M15 10h5v4h-5z"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h5"></path><path d="M7.5 6v4"></path><path d="M7.5 14v4"></path>', 8)
+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)
   ])]);
 }
-const Is = /* @__PURE__ */ O(Cs, [["render", ws]]), Ns = {}, xs = {
+const ns = /* @__PURE__ */ P(Zn, [["render", ts]]), ss = {}, os = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1139,12 +1055,12 @@ const Is = /* @__PURE__ */ O(Cs, [["render", ws]]), Ns = {}, xs = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema-off"
 };
-function Ms(s, e) {
-  return i(), d("svg", xs, [...e[0] || (e[0] = [
-    J('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 2h4v4m-4 0h-1v-1"></path><path d="M15 11v-1h5v4h-2"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h2"></path><path d="M7.5 7.5v2.5"></path><path d="M7.5 14v4"></path><path d="M3 3l18 18"></path>', 9)
+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)
   ])]);
 }
-const Os = /* @__PURE__ */ O(Ns, [["render", Ms]]), $s = {}, Ts = {
+const is = /* @__PURE__ */ P(ss, [["render", as]]), rs = {}, ds = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1156,12 +1072,12 @@ const Os = /* @__PURE__ */ O(Ns, [["render", Ms]]), $s = {}, Ts = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-transition-bottom"
 };
-function Es(s, e) {
-  return i(), d("svg", Ts, [...e[0] || (e[0] = [
-    J('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M21 18a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3"></path><path d="M3 3m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v0a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path><path d="M12 9v8"></path><path d="M9 14l3 3l3 -3"></path>', 5)
+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)
   ])]);
 }
-const Ss = /* @__PURE__ */ O($s, [["render", Es]]), Bs = {}, Vs = {
+const us = /* @__PURE__ */ P(rs, [["render", ls]]), cs = {}, ps = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1173,115 +1089,458 @@ const Ss = /* @__PURE__ */ O($s, [["render", Es]]), Bs = {}, Vs = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-trash-off"
 };
-function zs(s, e) {
-  return i(), d("svg", Vs, [...e[0] || (e[0] = [
-    J('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 3l18 18"></path><path d="M4 7h3m4 0h9"></path><path d="M10 11l0 6"></path><path d="M14 14l0 3"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l.077 -.923"></path><path d="M18.384 14.373l.616 -7.373"></path><path d="M9 5v-1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>', 8)
+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)
   ])]);
 }
-const js = /* @__PURE__ */ O(Bs, [["render", zs]]), Ls = ["id", "data-node-type"], Gs = {
-  class: "__title-label",
-  style: { "flex-grow": "1" }
-}, Rs = { key: 0 }, Ps = {
-  class: "__menu",
-  style: { display: "flex" }
-}, Us = { class: "__outputs" }, Hs = { key: 0 }, As = ["id", "title"], Ds = { class: "__inputs" }, Fs = { key: 0 }, Ws = ["id", "title"], Xs = /* @__PURE__ */ R({
-  __name: "CodeGraphNode",
-  props: {
-    node: {},
-    selected: { type: Boolean, default: !1 },
-    dragging: { type: Boolean }
-  },
-  emits: ["select", "start-drag", "update"],
-  setup(s, { emit: e }) {
-    const t = Ce.ContextMenu, n = Ce.NodeInterface, o = s, a = b(() => o.node), r = e, { viewModel: u } = K(), { graph: p, switchGraph: _ } = ae(), g = V(null), I = V(!1), L = V(""), x = V(null), y = V(!1);
-    let f = 0, $ = 0;
-    const m = V(!1), w = b(() => {
-      const c = [
-        { value: "edit", label: "Edit" },
-        { value: "rename", label: "Rename" },
-        { value: "delete", label: "Delete" }
-      ];
-      return o.node.type.startsWith(se) && c.push({ value: "editSubgraph", label: "Edit Subgraph" }), c;
-    }), h = b(() => ({
-      "--selected": o.selected,
-      "--dragging": o.dragging,
-      "--two-column": !!o.node.twoColumn,
-      "--hidden": a.value.state?.hidden
-    })), M = b(() => ({
-      "--reverse-y": o.node.reverseY ?? u.value.settings.nodes.reverseY
-    })), Ge = b(() => ({
+const ms = /* @__PURE__ */ P(cs, [["render", hs]]), et = "CLEAR_ALL", tt = "RUN_ENGINE", nt = "TOGGLE_MINIMAP", st = "TOGGLE_PALETTE", fs = (n, e, t) => {
+  const s = t.zoomToFit.paddingLeft;
+  e.registerCommand(st, {
+    execute: () => {
+      t.palette.enabled = !t.palette.enabled, t.zoomToFit.paddingLeft = t.palette.enabled ? s : 50;
+    },
+    canExecute: () => !0
+  }), e.registerCommand(et, {
+    execute: () => n.value.clear(),
+    canExecute: () => n.value.nodes.length > 0
+  }), e.registerCommand(nt, {
+    execute: () => t.enableMinimap = !t.enableMinimap,
+    canExecute: () => n.value.nodes.length > 1
+  });
+}, vs = (n) => {
+  const e = {
+    command: tt,
+    title: "Run",
+    // Tooltip text
+    icon: O(() => Qn)
+  }, t = {
+    command: st,
+    title: "Toggle palette",
+    // Tooltip text
+    icon: O(() => n.palette.enabled ? Tn : Gn)
+  }, s = {
+    command: et,
+    title: "Clear all",
+    // Tooltip text
+    icon: O(() => ms)
+  }, o = {
+    command: nt,
+    title: "Toggle minimap",
+    // Tooltip text
+    icon: O(() => n.enableMinimap ? is : ns)
+  };
+  n.toolbar.commands = [t, e, ...jt, s, o];
+}, gs = (n, e) => {
+  e.registerCommand(tt, {
+    execute: () => n.runOnce(null),
+    canExecute: () => !0
+  });
+};
+function bs(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.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.subscribe = () => {
+    n.displayedGraph.events.addConnection.subscribe(e, (t) => {
+      const s = n.displayedGraph.findNodeById(t.to.nodeId);
+      s && s.isCodeNode && s.onConnected();
+      const o = n.displayedGraph.findNodeById(t.from.nodeId);
+      o && o.isCodeNode && o.onConnected();
+    }), n.displayedGraph.events.removeConnection.subscribe(e, (t) => {
+      const s = n.displayedGraph.findNodeById(t.to.nodeId);
+      s && s.isCodeNode && s.onUnconnected();
+      const o = n.displayedGraph.findNodeById(t.from.nodeId);
+      o && o.isCodeNode && o.onUnconnected();
+    }), 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({
+        nodes: n.editor.graph.scriptedCodeNodes,
+        modules: n.editor.graph.modules
+      }), n.engine?.resume();
+    });
+  }, n.unsubscribe = () => {
+    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 {
+  code = null;
+  editor;
+  _state = D({
+    codeTemplate: "{{ #nodes }}{{ script }}{{ /nodes }}",
+    lockCode: !1
+  });
+  constructor(e, t) {
+    super(e, t), this.editor = e, this.template = t, e.code && (this.code = e.code);
+  }
+  get codeNodes() {
+    return ot(this);
+  }
+  get connections() {
+    return super.connections;
+  }
+  set connections(e) {
+    this._connections = e;
+  }
+  get nodeIds() {
+    return this.nodes.map((e) => e.id);
+  }
+  get nodes() {
+    return super.nodes;
+  }
+  set nodes(e) {
+    this._nodes = e;
+  }
+  get scriptedCodeNodes() {
+    return this.nodes.filter((e) => !e.state?.integrated);
+  }
+  get shortId() {
+    return this.id.slice(0, 6);
+  }
+  get state() {
+    return this._state;
+  }
+  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 at coordinates.
+   * @param node code node
+   * @param position position
+   * @param props optional
+   * @returns code node
+   */
+  addNodeAtCoordinates = (e, t = { x: 0, y: 0 }, s) => (this.addNode(e, s), e.position && (e.position = t), e);
+  /**
+   * Add connection of code nodes
+   * @param from code node interface
+   * @param to code node interface
+   */
+  addConnection(e, t) {
+    e?.name !== "_code" && (e.hidden = !1), t?.name !== "_code" && (t.hidden = !1), super.addConnection(e, t);
+  }
+  /**
+   * Clear code graph.
+   */
+  clear() {
+    this.selectedNodes = [], this._nodes = [], this._connections = [];
+  }
+  /**
+   * Find node by type.
+   * @param nodeType node type
+   * @returns node instance
+   */
+  findNodeByType(e) {
+    return this.nodes.find((t) => t.type === e);
+  }
+  /**
+   * Get nodes of the same type.
+   * @param type node type
+   * @returns a list of node instances
+   */
+  getNodesBySameType(e) {
+    return this.nodes.filter((t) => t.type === e);
+  }
+  /**
+   * Get nodes of the same variable name.
+   * @param variableName variable name
+   * @returns a list of node instances
+   */
+  getNodesBySameVariableNames(e) {
+    return this.nodes.filter(
+      (t) => t.state?.variableName === e
+    );
+  }
+  /**
+   * Check whether the graph has this connection.
+   * @param from node interface
+   * @param to node interface
+   * @returns boolean
+   */
+  hasConnection(e, t) {
+    return this.connections.some(
+      (s) => s.from.id === e.id && s.to.id === t.id
+    );
+  }
+  /**
+   * Render code script.
+   */
+  renderCode(e) {
+    return Z.render(this.state?.codeTemplate || "", e);
+  }
+  /**
+   * Sort code nodes.
+   */
+  sortNodes() {
+    if (!(this.nodes.length === 0 || this.connections.length === 0))
+      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));
+        e = [...e, ...s];
+        const o = e.map((a) => this.findNodeById(a));
+        o && (this.nodes = o);
+      } catch {
+        console.warn("Failed to sort nodes.");
+      }
+  }
+}
+const ot = (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));
+  }), e;
+}, To = (n = 0, e = 100) => ({
+  x: n * 420,
+  y: e
+}), Eo = (n) => {
+  const e = { ...n.position };
+  return e.x -= 440, e.y += 50, e;
+};
+function _s(n, e) {
+  return Object.fromEntries(Object.entries(n).filter(e));
+}
+function ys(n, e) {
+  return Object.fromEntries(Object.entries(n).map(([t, s]) => [t, e(s)]));
+}
+class ce extends It {
+  /** Create a new GraphTemplate from the nodes and connections inside the graph instance */
+  static fromGraph(e, t) {
+    return new ce(e.save(), t);
+  }
+  constructor(e, t) {
+    super(e, t);
+  }
+  get shortId() {
+    return this.id.slice(0, 6);
+  }
+  /**
+   * Create a new graph instance from this template
+   * 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(),
+      nodes: i,
+      connections: r,
+      inputs: c,
+      outputs: h
+    };
+    return e || (e = new ue(this.editor)), e.load(g).forEach((m) => console.warn(m)), e.template = this, e;
+  }
+}
+const Cs = (n) => !(n instanceof ue);
+function Is(n, e) {
+  return { switchGraph: (s) => {
+    let o;
+    if (Cs(s))
+      o = new ue(n.value), s.createGraph(o);
+    else {
+      if (s !== n.value.graph)
+        throw new Error(
+          "Can only switch using 'Graph' instance when it is the root graph. Otherwise a 'GraphTemplate' must be used."
+        );
+      o = s;
+    }
+    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({
+  __name: "CodeGraphEditor",
+  props: {
+    viewModel: {}
+  },
+  setup(n) {
+    const t = Be(n, "viewModel"), s = (o) => o.events.update.emit(null);
+    return fe(() => {
+      t.value.subscribe && t.value.subscribe(), t.value.engine?.start();
+    }), ze(() => {
+      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 }, {
+      palette: ee(() => [
+        L(w(Ls))
+      ]),
+      node: ee((i) => [
+        L(w(Ps), mt(i, {
+          onUpdate: (r) => 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 })
+          ]),
+          _: 3
+        }, 16)
+      ]),
+      _: 3
+    }, 8, ["viewModel"]));
+  }
+}), ws = { class: "code-graph-info" }, Mo = /* @__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)
+    ]));
+  }
+}), ks = ["id", "data-node-type"], Ns = {
+  class: "__title-label",
+  style: { "flex-grow": "1" }
+}, xs = { key: 0 }, Os = {
+  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({
+  __name: "CodeGraphNode",
+  props: {
+    node: {},
+    selected: { type: Boolean, default: !1 },
+    dragging: { type: Boolean }
+  },
+  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 = [
+        { 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(() => ({
+      "--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(() => ({
       top: `${o.node.position?.y ?? 0}px`,
       left: `${o.node.position?.x ?? 0}px`,
-      "--width": `${o.node.width ?? u.value.settings.nodes.defaultWidth}px`
-    })), Re = b(() => Object.values(o.node.inputs).filter((c) => !c.hidden)), Pe = b(() => Object.values(o.node.outputs).filter((c) => !c.hidden)), he = () => {
-      r("select");
-    }, Ue = (c) => {
-      o.selected || he(), r("start-drag", c);
-    }, me = () => {
-      m.value = !0;
-    }, He = () => {
-      const c = u.value.displayedGraph.sidebar;
-      c.nodeId = "", c.visible = !1;
-    }, ve = () => {
-      const c = u.value.displayedGraph.sidebar;
-      c.nodeId = o.node.id, c.visible = !0;
-    }, Ae = () => {
-      const c = u.value.displayedGraph.sidebar;
-      c.nodeId = o.node.id;
-    }, De = async (c) => {
-      switch (c) {
+      "--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 = () => {
+      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) {
         case "edit":
-          ve();
+          Ne();
           break;
         case "delete":
-          p.value.removeNode(o.node);
+          c.value.removeNode(o.node);
           break;
         case "rename":
-          L.value = o.node.title, I.value = !0, await _t(), x.value?.focus();
+          m.value = o.node.title, _.value = !0, await vt(), k.value?.focus();
           break;
         case "editSubgraph":
-          _(o.node.template);
+          h(o.node.template);
           break;
       }
-    }, fe = () => {
-      a.value.title = L.value, I.value = !1;
-    }, ge = () => {
-      g.value && u.value.hooks.renderNode.execute({ node: o.node, el: g.value });
-    }, Fe = (c) => {
-      y.value = !0, f = o.node.width, $ = c.clientX, c.preventDefault();
-    }, be = (c) => {
-      a.value.state && (a.value.state.integrated = c, r("update"));
-    }, _e = (c) => {
-      if (!y.value) return;
-      const C = c.clientX - $, v = f + C / p.value.scaling, We = u.value.settings.nodes.minWidth, Xe = u.value.settings.nodes.maxWidth;
-      a.value.width = Math.max(We, Math.min(Xe, v));
-    }, ye = () => {
-      y.value = !1;
+    }, 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;
     };
-    return ie(() => {
-      ge(), window.addEventListener("mousemove", _e), window.addEventListener("mouseup", ye);
-    }), Oe(ge), gt(() => {
-      window.removeEventListener("mousemove", _e), window.removeEventListener("mouseup", ye);
-    }), (c, C) => (i(), d("div", {
+    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,
       ref_key: "el",
       ref: g,
-      class: P([h.value, "baklava-node"]),
+      class: Y([y.value, "baklava-node"]),
       "data-node-type": a.value.type,
-      style: re(Ge.value),
-      onPointerdown: he
+      style: ve(ie.value),
+      onPointerdown: re
     }, [
-      k(u).settings.nodes.resizable ? (i(), d("div", {
+      w(r).settings.nodes.resizable ? (d(), p("div", {
         key: 0,
         class: "__resize-handle",
-        onMousedown: Fe
-      }, null, 32)) : N("", !0),
-      l("div", {
+        onMousedown: lt
+      }, null, 32)) : M("", !0),
+      u("div", {
         class: "__title",
-        onPointerdown: F(Ue, ["self", "stop"]),
-        onContextmenu: F(me, ["prevent"])
+        onPointerdown: te(v, ["self", "stop"]),
+        onContextmenu: te(S, ["prevent"])
       }, [
-        a.value.inputs._code ? (i(), E(we, {
+        a.value.inputs._code ? (d(), j(w(Ve), {
           key: 0,
           node: a.value,
           intf: a.value.inputs._code,
@@ -1289,147 +1548,271 @@ const js = /* @__PURE__ */ O(Bs, [["render", zs]]), Ls = ["id", "data-node-type"
           class: "--input",
           "data-interface-type": "node",
           style: { "flex-grow": "0" }
-        }, null, 8, ["node", "intf", "title"])) : N("", !0),
-        I.value ? ee((i(), d("input", {
+        }, null, 8, ["node", "intf", "title"])) : M("", !0),
+        _.value ? de((d(), p("input", {
           key: 2,
           ref_key: "renameInputEl",
-          ref: x,
-          "onUpdate:modelValue": C[4] || (C[4] = (v) => L.value = v),
+          ref: k,
+          "onUpdate:modelValue": E[4] || (E[4] = (x) => m.value = x),
           class: "baklava-input",
           placeholder: "Node Name",
           style: { "flex-grow": "1" },
           type: "text",
-          onBlur: fe,
-          onKeydown: ne(fe, ["enter"])
+          onBlur: xe,
+          onKeydown: he(xe, ["enter"])
         }, null, 544)), [
-          [te, L.value]
-        ]) : (i(), d(S, { key: 1 }, [
-          l("div", Gs, [
-            a.value.idx > -1 ? (i(), d("span", Rs, j(a.value.idx + 1) + " - ", 1)) : N("", !0),
-            bt(j(a.value.title), 1)
+          [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)
           ]),
-          l("div", Ps, [
-            a.value.isCodeNode ? (i(), d(S, { key: 0 }, [
-              a.value.state.lockCode ? (i(), E(k(ys), {
+          u("div", Os, [
+            a.value.isCodeNode ? (d(), p(B, { key: 0 }, [
+              a.value.state.lockCode ? (d(), j(w(Kn), {
                 key: 0,
                 class: "--clickable mx-1",
-                onClick: C[0] || (C[0] = (v) => a.value.lockCode = !1)
-              })) : N("", !0),
-              a.value.state.integrated ? (i(), E(k(Wt), {
+                onClick: E[0] || (E[0] = (x) => a.value.lockCode = !1)
+              })) : M("", !0),
+              a.value.state.integrated ? (d(), j(w(yn), {
                 key: 1,
                 class: "--clickable mx-1",
-                onClick: C[1] || (C[1] = (v) => be(!1))
-              })) : (i(), E(k(Ss), {
+                onClick: E[1] || (E[1] = (x) => Te(!1))
+              })) : (d(), j(w(us), {
                 key: 2,
                 class: "--clickable mx-1",
-                onClick: C[2] || (C[2] = (v) => be(!0))
+                onClick: E[2] || (E[2] = (x) => Te(!0))
               })),
-              !k(u).displayedGraph.sidebar.visible && k(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), E(k(fs), {
+              !w(r).displayedGraph.sidebar.visible && w(r).displayedGraph.sidebar.nodeId !== a.value.id ? (d(), j(w(Dn), {
                 key: 3,
                 class: "--clickable mx-1",
-                onClick: ve
-              })) : k(u).displayedGraph.sidebar.visible && k(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), E(k(ds), {
+                onClick: Ne
+              })) : w(r).displayedGraph.sidebar.visible && w(r).displayedGraph.sidebar.nodeId !== a.value.id ? (d(), j(w(Rn), {
                 key: 4,
                 class: "--clickable mx-1",
-                onClick: Ae
-              })) : (i(), E(k(ps), {
+                onClick: rt
+              })) : (d(), j(w(Hn), {
                 key: 5,
                 class: "--clickable mx-1",
-                onClick: He
+                onClick: H
               }))
-            ], 64)) : N("", !0),
-            z(k(qt), {
+            ], 64)) : M("", !0),
+            L(w(kn), {
               class: "--clickable mx-1",
-              onClick: me
+              onClick: S
             }),
-            z(k(t), {
-              modelValue: m.value,
-              "onUpdate:modelValue": C[3] || (C[3] = (v) => m.value = v),
+            L(w(t), {
+              modelValue: f.value,
+              "onUpdate:modelValue": E[3] || (E[3] = (x) => f.value = x),
               x: 0,
               y: 0,
-              items: w.value,
-              onClick: De
+              items: N.value,
+              onClick: dt
             }, null, 8, ["modelValue", "items"])
           ])
         ], 64)),
-        a.value.outputs._code ? (i(), E(we, {
+        a.value.outputs._code ? (d(), j(w(Ve), {
           key: 3,
           node: a.value,
           intf: a.value.outputs._code,
           class: "--output",
           title: a.value.outputs._code.value,
           "data-interface-type": "node"
-        }, null, 8, ["node", "intf", "title"])) : N("", !0)
+        }, null, 8, ["node", "intf", "title"])) : M("", !0)
       ], 32),
-      l("div", {
-        class: P(["__content", M.value]),
-        onKeydown: C[5] || (C[5] = ne(F(() => {
+      u("div", {
+        class: Y(["__content", T.value]),
+        onKeydown: E[5] || (E[5] = he(te(() => {
         }, ["stop"]), ["delete"])),
-        onContextmenu: C[6] || (C[6] = F(() => {
+        onContextmenu: E[6] || (E[6] = te(() => {
         }, ["prevent"]))
       }, [
-        l("div", Us, [
-          (i(!0), d(S, null, D(Pe.value, (v) => (i(), d(S, {
-            key: v.id
+        u("div", Ts, [
+          (d(!0), p(B, null, J(pe.value, (x) => (d(), p(B, {
+            key: x.id
           }, [
-            a.value.state?.hidden ? (i(), d("div", Hs, [
-              v.port ? (i(), d("div", {
+            a.value.state?.hidden ? (d(), p("div", Es, [
+              x.port ? (d(), p("div", {
                 key: 0,
-                id: v.id,
-                title: v.name,
+                id: x.id,
+                title: x.name,
                 class: "baklava-node-interface --output --connected"
-              }, [...C[7] || (C[7] = [
-                l("div", { class: "__port" }, null, -1)
-              ])], 8, As)) : N("", !0)
-            ])) : X(c.$slots, "nodeInterface", {
+              }, [...E[7] || (E[7] = [
+                u("div", { class: "__port" }, null, -1)
+              ])], 8, $s)) : M("", !0)
+            ])) : ne(C.$slots, "nodeInterface", {
               key: 1,
               type: "output",
               node: a.value,
-              intf: v
+              intf: x
             }, () => [
-              z(k(n), {
+              L(w(s), {
                 node: a.value,
-                intf: v,
-                title: v.type
+                intf: x,
+                title: x.value
               }, null, 8, ["node", "intf", "title"])
             ])
           ], 64))), 128))
         ]),
-        l("div", Ds, [
-          (i(!0), d(S, null, D(Re.value, (v) => (i(), d(S, {
-            key: v.id
+        u("div", Ms, [
+          (d(!0), p(B, null, J(W.value, (x) => (d(), p(B, {
+            key: x.id
           }, [
-            a.value.state?.hidden ? (i(), d("div", Fs, [
-              v.port ? (i(), d("div", {
+            a.value.state?.hidden ? (d(), p("div", Gs, [
+              x.port ? (d(), p("div", {
                 key: 0,
-                id: v.id,
-                title: v.name,
+                id: x.id,
+                title: x.name,
                 class: "baklava-node-interface --input --connected"
-              }, [...C[8] || (C[8] = [
-                l("div", { class: "__port" }, null, -1)
-              ])], 8, Ws)) : N("", !0)
-            ])) : X(c.$slots, "nodeInterface", {
+              }, [...E[8] || (E[8] = [
+                u("div", { class: "__port" }, null, -1)
+              ])], 8, Ss)) : M("", !0)
+            ])) : ne(C.$slots, "nodeInterface", {
               key: 1,
               node: a.value,
-              intf: v,
+              intf: x,
               type: "input"
             }, () => [
-              z(k(n), {
+              L(w(s), {
                 node: a.value,
-                intf: v,
-                title: v.type
+                intf: x,
+                title: x.value
               }, null, 8, ["node", "intf", "title"])
             ])
           ], 64))), 128))
         ])
       ], 34)
-    ], 46, Ls));
+    ], 46, ks));
+  }
+}), Vs = ["id"], Rs = { class: "align-middle" }, Ve = /* @__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(() => ({
+      "--connected": i.value
+    })), c = () => {
+      s(e.intf);
+    }, h = () => {
+      s(void 0);
+    }, g = () => {
+      a.value && t.value.hooks.renderInterface.execute({ intf: e.intf, el: a.value });
+    };
+    return fe(g), Le(g), (_, m) => (d(), p("div", {
+      id: n.intf.id,
+      ref_key: "el",
+      ref: a,
+      class: Y(["baklava-node-interface", r.value])
+    }, [
+      n.intf.port ? (d(), p("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")
+      ])
+    ], 10, Vs));
   }
-}), Ys = ["title"], Ks = {
+}), 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 = {
   key: 0,
   class: "__label"
-}, Ie = /* @__PURE__ */ R({
-  __name: "Checkbox",
+}, Re = /* @__PURE__ */ F({
+  __name: "SidebarCheckbox",
   props: {
     disabled: { type: Boolean },
     inversed: { type: Boolean },
@@ -1437,456 +1820,413 @@ const js = /* @__PURE__ */ O(Bs, [["render", zs]]), Ls = ["id", "data-node-type"
     name: {}
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: e }) {
+  setup(n, { emit: e }) {
     const t = e;
-    return (n, o) => (i(), d("div", {
-      class: P(["baklava-checkbox", { "--checked": s.inversed ? !s.modelValue : s.modelValue, "--disabled": s.disabled }]),
-      title: s.name,
-      onClick: o[0] || (o[0] = (a) => t("update:modelValue", !s.modelValue))
+    return (s, o) => (d(), p("div", {
+      class: Y(["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))
     }, [
-      o[1] || (o[1] = l("div", { class: "__checkmark-container" }, [
-        l("svg", {
+      o[1] || (o[1] = u("div", { class: "__checkmark-container" }, [
+        u("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           width: "18",
           height: "18",
           viewBox: "0 0 18 18"
         }, [
-          l("path", {
+          u("path", {
             class: "__checkmark",
             d: "M 6 5 L 6 10 L 16 10",
             transform: "rotate(-45 10 10)"
           })
         ])
       ], -1)),
-      s.name ? (i(), d("div", Ks, j(s.name), 1)) : N("", !0)
-    ], 10, Ys));
+      n.name ? (d(), p("div", As, G(n.name), 1)) : M("", !0)
+    ], 10, Us));
   }
-}), qs = { class: "__header" }, Js = { class: "__node-name" }, Qs = { class: "__interfaces" }, Zs = { class: "__inputs" }, en = { style: { display: "flex" } }, tn = { class: "__outputs" }, sn = {
+}), Ds = { class: "__header" }, Fs = { class: "__node-name" }, Ws = { class: "__interfaces" }, Ys = { class: "__inputs" }, Ks = { style: { display: "flex" } }, Xs = { class: "__outputs" }, qs = {
   key: 0,
   class: "__interface"
-}, nn = { style: { display: "flex" } }, on = /* @__PURE__ */ R({
+}, Js = { style: { display: "flex" } }, Qs = /* @__PURE__ */ F({
   __name: "CodeGraphSidebar",
-  setup(s) {
-    const { viewModel: e } = K(), { graph: t } = ae(), n = V(null), o = $e(e.value.settings.sidebar, "width"), a = b(() => e.value.settings.sidebar.resizable);
-    let r = 0, u = 0;
-    const p = b(() => {
-      const m = t.value.sidebar.nodeId;
-      return t.value.nodes.find((w) => w.id === m);
-    }), _ = b(() => p.value), g = b(() => ({
+  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(() => ({
       width: `${o.value}px`
-    })), I = b(() => _.value ? Object.values(_.value.inputs).filter((m) => m.displayInSidebar && m.component) : []), L = b(() => _.value ? Object.values(_.value.outputs).filter((m) => m.displayInSidebar && m.component) : []), x = () => {
+    })), _ = 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 = () => {
       t.value.sidebar.visible = !1;
-    }, y = () => {
-      p.value?.events.update.emit(null);
-    }, f = (m) => {
-      r = o.value, u = m.clientX, window.addEventListener("mousemove", $), window.addEventListener(
+    }, b = () => {
+      c.value?.events.update.emit(null);
+    }, I = (f) => {
+      i = o.value, r = f.clientX, window.addEventListener("mousemove", l), window.addEventListener(
         "mouseup",
         () => {
-          window.removeEventListener("mousemove", $);
+          window.removeEventListener("mousemove", l);
         },
         { once: !0 }
       );
-    }, $ = (m) => {
-      const w = n.value?.parentElement?.getBoundingClientRect().width ?? 500, h = m.clientX - u;
-      let M = r - h;
-      M < 300 ? M = 300 : M > 0.9 * w && (M = 0.9 * w), o.value = M;
+    }, 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;
     };
-    return (m, w) => (i(), d("div", {
-      class: P([{ "--open": k(t).sidebar.visible }, "baklava-sidebar"]),
-      style: re(g.value),
+    return (f, N) => (d(), p("div", {
+      class: Y([{ "--open": w(t).sidebar.visible }, "baklava-sidebar"]),
+      style: ve(g.value),
       ref_key: "el",
-      ref: n
+      ref: s
     }, [
-      a.value ? (i(), d("div", {
+      a.value ? (d(), p("div", {
         key: 0,
         class: "__resizer",
-        onMousedown: f
-      }, null, 32)) : N("", !0),
-      p.value ? (i(), d(S, { key: 1 }, [
-        l("div", qs, [
-          l("button", {
+        onMousedown: I
+      }, null, 32)) : M("", !0),
+      c.value ? (d(), p(B, { key: 1 }, [
+        u("div", Ds, [
+          u("button", {
             tabindex: "-1",
             class: "__close",
-            onClick: x
+            onClick: k
           }, "×"),
-          l("div", Js, [
-            l("b", null, j(p.value.title), 1)
+          u("div", Fs, [
+            u("b", null, G(c.value.title), 1)
           ])
         ]),
-        l("div", Qs, [
-          l("div", Zs, [
-            (i(!0), d(S, null, D(I.value, (h) => (i(), d("div", {
-              key: h.id,
+        u("div", Ws, [
+          u("div", Ys, [
+            (d(!0), p(B, null, J(_.value, (y) => (d(), p("div", {
+              key: y.id,
               class: "__interface"
             }, [
-              l("div", en, [
-                z(Ie, {
-                  modelValue: h.hidden,
+              u("div", Ks, [
+                L(Re, {
+                  modelValue: y.hidden,
                   "onUpdate:modelValue": [
-                    (M) => h.hidden = M,
-                    w[0] || (w[0] = () => p.value?.events.update.emit(null))
+                    (T) => y.hidden = T,
+                    N[0] || (N[0] = () => c.value?.events.update.emit(null))
                   ],
-                  disabled: !h.optional,
+                  disabled: !y.optional,
                   inversed: "",
                   style: { "padding-right": "8px" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
-                (i(), E(ke(h.component), {
-                  modelValue: h.value,
-                  "onUpdate:modelValue": (M) => h.value = M,
-                  node: p.value,
-                  intf: h,
+                (d(), j(Me(y.component), {
+                  modelValue: y.value,
+                  "onUpdate:modelValue": (T) => y.value = T,
+                  node: c.value,
+                  intf: y,
                   style: { width: "100%" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "node", "intf"]))
               ])
             ]))), 128))
           ]),
-          l("div", tn, [
-            _.value && _.value.state ? (i(), d("div", sn, [
-              w[3] || (w[3] = l("label", null, "Variable name", -1)),
-              ee(l("input", {
-                "onUpdate:modelValue": w[1] || (w[1] = (h) => _.value.state.variableName = h),
+          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),
                 type: "text",
                 class: "baklava-input",
                 title: "Variable name",
-                onBlur: y,
-                onKeydown: ne(y, ["enter"])
+                onBlur: b,
+                onKeydown: he(b, ["enter"])
               }, null, 544), [
-                [te, _.value.state.variableName]
+                [le, h.value.state.variableName]
               ])
-            ])) : N("", !0),
-            (i(!0), d(S, null, D(L.value, (h) => (i(), d("div", {
-              key: h.id,
+            ])) : M("", !0),
+            (d(!0), p(B, null, J(m.value, (y) => (d(), p("div", {
+              key: y.id,
               class: "__interface"
             }, [
-              l("div", nn, [
-                z(Ie, {
-                  modelValue: h.hidden,
+              u("div", Js, [
+                L(Re, {
+                  modelValue: y.hidden,
                   "onUpdate:modelValue": [
-                    (M) => h.hidden = M,
-                    w[2] || (w[2] = () => p.value?.events.update.emit(null))
+                    (T) => y.hidden = T,
+                    N[2] || (N[2] = () => c.value?.events.update.emit(null))
                   ],
-                  disabled: !h.optional,
+                  disabled: !y.optional,
                   inversed: "",
                   style: { "padding-right": "8px" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
-                (i(), E(ke(h.component), {
-                  modelValue: h.value,
-                  "onUpdate:modelValue": (M) => h.value = M,
-                  node: p.value,
-                  intf: h,
+                (d(), j(Me(y.component), {
+                  modelValue: y.value,
+                  "onUpdate:modelValue": (T) => y.value = T,
+                  node: c.value,
+                  intf: y,
                   style: { width: "100%" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "node", "intf"]))
               ])
             ]))), 128))
           ])
         ]),
-        X(m.$slots, "codeEditor", { node: p.value })
-      ], 64)) : N("", !0)
+        ne(f.$slots, "codeEditor", { node: c.value })
+      ], 64)) : M("", !0)
     ], 6));
   }
 });
-function an(s, e) {
-  return Object.fromEntries(Object.entries(s).filter(e));
+class at extends Qe {
+  _title = "Subgraph Input";
+  inputs = {
+    _code: new R("", "").use($, U).setHidden(!0),
+    name: new be("Name", "Input").setPort(!1)
+  };
+  outputs = {
+    _code: new R("", "").use($, U).setHidden(!0),
+    placeholder: new A("Connection", void 0)
+  };
 }
-const rn = R({
-  props: {
-    type: {
-      type: String,
-      required: !0
-    },
-    title: {
-      type: String,
-      required: !0
-    }
-  },
-  setup(s) {
-    const { viewModel: e } = K(), { switchGraph: t } = ae(), n = V(!1), o = b(() => s.type.startsWith(se));
-    return { showContextMenu: n, hasContextMenu: o, contextMenuItems: [
-      { label: "Edit Subgraph", value: "editSubgraph" },
-      { label: "Delete Subgraph", value: "deleteSubgraph" }
-    ], openContextMenu: () => {
-      n.value = !0;
-    }, onContextMenuClick: (p) => {
-      const _ = s.type.substring(se.length), g = e.value.editor.graphTemplates.find((I) => I.id === _);
-      if (g)
-        switch (p) {
-          case "editSubgraph":
-            t(g);
-            break;
-          case "deleteSubgraph":
-            e.value.editor.removeGraphTemplate(g);
-            break;
-        }
-    } };
-  }
-}), dn = ["data-node-type"], ln = { class: "__title" }, un = { class: "__title-label" };
-function cn(s, e, t, n, o, a) {
-  return i(), d("div", {
-    class: "baklava-node --palette",
-    "data-node-type": s.type
-  }, [
-    l("div", ln, [
-      l("div", un, j(s.title), 1)
-    ])
-  ], 8, dn);
+class it extends Ze {
+  _title = "Subgraph Output";
+  inputs = {
+    _code: new R("", "").use($, U).setHidden(!0),
+    name: new be("Name", "Output").setPort(!1),
+    placeholder: new A("Connection", void 0)
+  };
+  outputs = {
+    _code: new R("", "").use($, U).setHidden(!0),
+    output: new A("Output", void 0).setHidden(!0)
+  };
 }
-const Ne = /* @__PURE__ */ O(rn, [["render", cn]]), pn = {
-  class: "baklava-node --palette",
-  style: { "margin-top": "-20px", "margin-bottom": "20px" }
-}, hn = {
-  key: 0,
-  style: { display: "flex", "justify-content": "space-between" }
-}, mn = ["onClick"], vn = {
-  key: 0,
-  style: { margin: "auto 0", "font-size": "12px" }
-}, fn = /* @__PURE__ */ R({
-  __name: "CodeNodePalette",
-  setup(s) {
-    const { viewModel: e } = K(), { x: t, y: n } = xt(), { transform: o } = ct(), a = pt(e), r = yt("editorEl"), u = V(""), p = V(null), _ = () => u.value ? a.value.filter(
-      (x) => x.name.toLowerCase().includes(u.value.toLowerCase()) || Object.values(x.nodeTypes).some(
-        (y) => y.title.toLowerCase().includes(u.value.toLowerCase())
+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;
+    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);
+    }
+    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);
+    }
+    const T = D(
+      new ce(
+        {
+          connections: I,
+          nodes: b,
+          // ignored, but still providing to make TS happy
+          inputs: [],
+          outputs: []
+        },
+        r
       )
-    ) : a.value, g = (x) => u.value ? an(x, (y) => {
-      const f = y[1];
-      return f.category.includes(u.value.toLowerCase()) || f.title?.toLowerCase().includes(u.value.toLowerCase());
-    }) : x, I = b(() => {
-      if (!p.value || !r?.value) return {};
-      const { left: x, top: y } = r.value.getBoundingClientRect();
-      return {
-        top: `${n.value - y}px`,
-        left: `${t.value - x}px`
-      };
-    }), L = (x, y) => {
-      p.value = {
-        type: x,
-        nodeInformation: y
-      };
-      const f = () => {
-        const $ = q(new y.type());
-        e.value.displayedGraph.addNode($);
-        const m = r.value.getBoundingClientRect(), [w, h] = o(t.value - m.left, n.value - m.top);
-        $.position.x = w, $.position.y = h, p.value = null, document.removeEventListener("pointerup", f);
-      };
-      document.addEventListener("pointerup", f);
-    };
-    return (x, y) => (i(), d(S, null, [
-      l("div", {
-        class: P([{ "--open": k(e).settings.palette.enabled }, "baklava-node-palette"]),
-        onContextmenu: y[1] || (y[1] = F(() => {
-        }, ["stop", "prevent"]))
-      }, [
-        l("div", pn, [
-          ee(l("input", {
-            "onUpdate:modelValue": y[0] || (y[0] = (f) => u.value = f),
-            type: "text",
-            class: "baklava-input",
-            title: "Filter nodes",
-            onKeyup: _
-          }, null, 544), [
-            [te, u.value]
-          ])
-        ]),
-        (i(!0), d(S, null, D(_(), (f) => (i(), d("section", {
-          key: f.name
-        }, [
-          f.name !== "default" ? (i(), d("h3", hn, [
-            l("div", {
-              onClick: ($) => u.value = f.name,
-              style: { cursor: "pointer" }
-            }, j(f.name), 9, mn),
-            Object.keys(g(f.nodeTypes)).length < Object.values(f.nodeTypes).length ? (i(), d("div", vn, " ( " + j(Object.keys(g(f.nodeTypes)).length) + " / " + j(Object.values(f.nodeTypes).length) + " ) ", 1)) : N("", !0)
-          ])) : N("", !0),
-          (i(!0), d(S, null, D(g(f.nodeTypes), ($, m) => (i(), E(Ne, {
-            key: m,
-            type: m,
-            title: $.title,
-            onPointerdown: (w) => L(m, $)
-          }, null, 8, ["type", "title", "onPointerdown"]))), 128))
-        ]))), 128))
-      ], 34),
-      z(Ct, { name: "fade" }, {
-        default: W(() => [
-          p.value ? (i(), d("div", {
-            key: 0,
-            class: "baklava-dragged-node",
-            style: re(I.value)
-          }, [
-            z(Ne, {
-              type: p.value.type,
-              title: p.value.nodeInformation.title
-            }, null, 8, ["type", "title"])
-          ], 4)) : N("", !0)
-        ]),
-        _: 1
-      })
-    ], 64));
+    );
+    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");
+    i.activeTransactions++;
+    const W = D(new ie.type());
+    i.addNode(W);
+    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
+    );
+    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;
+  };
+  e.registerCommand(Zs, {
+    canExecute: s,
+    execute: o
+  });
+}
+function to(n) {
+  const e = n.reduce((o, a) => {
+    const i = a.position.x;
+    return i < o ? i : o;
+  }, 1 / 0), t = n.reduce((o, a) => {
+    const i = a.position.y;
+    return i < o ? i : o;
+  }, 1 / 0);
+  return { xLeft: n.reduce((o, a) => {
+    const i = a.position.x + a.width;
+    return i > o ? i : o;
+  }, -1 / 0), xRight: e, yTop: t };
+}
+class no extends xt {
+  code;
+  graph;
+  constructor(e) {
+    super(), this.code = e, this.graph = new ue(this);
   }
-}), Un = /* @__PURE__ */ R({
-  __name: "CodeGraphEditor",
-  props: {
-    viewModel: {}
-  },
-  setup(s) {
-    const t = $e(s, "viewModel"), n = (o) => o.events.update.emit(null);
-    return ie(() => {
-      t.value.subscribe(), t.value.engine.start();
-    }), kt(() => {
-      t.value.unsubscribe(), t.value.engine.stop();
-    }), (o, a) => (i(), E(k(ht), { "view-model": t.value }, {
-      palette: W(() => [
-        z(fn)
-      ]),
-      node: W((r) => [
-        z(Xs, Nt(r, {
-          onUpdate: (u) => n(r.node)
-        }), null, 16, ["onUpdate"])
-      ]),
-      sidebar: W((r) => [
-        z(on, wt(It(r)), {
-          codeEditor: W(({ node: u }) => [
-            X(o.$slots, "sidebarCodeEditor", { node: u })
-          ]),
-          _: 3
-        }, 16)
-      ]),
-      _: 3
-    }, 8, ["view-model"]));
+  get graphIds() {
+    const e = [];
+    return this.graphs.forEach((t) => e.push(t.id)), e.map((t) => t.slice(0, 6)).join(", ");
+  }
+  get graphTemplateIds() {
+    const e = [];
+    return this.graphTemplates.forEach((t) => e.push(t.id)), e.map((t) => t.slice(0, 6)).join(", ");
+  }
+  /**
+   * Add code graph template.
+   * @param template code graph template
+   */
+  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);
+    this.registerNodeType(t, { category: "Subgraphs", title: e.name }), this.events.addGraphTemplate.emit(e);
+  }
+  /**
+   * Load a state
+   * @param state State to load
+   * @returns An array of warnings that occured during loading. If the array is empty, the state was successfully loaded.
+   */
+  load(e) {
+    try {
+      for (super._loading = !0, e = this.hooks.load.execute(e); this.graphTemplates.length > 0; )
+        this.removeGraphTemplate(this.graphTemplates[0]);
+      e.graphTemplates.forEach((s) => {
+        const o = new ce(s, this);
+        this.addGraphTemplate(o);
+      });
+      const t = this.graph.load(e.graph);
+      return this.events.loaded.emit(), t.forEach((s) => console.warn(s)), t;
+    } finally {
+      super._loading = !1;
+    }
+  }
+  /**
+   * Register category module
+   * @param category string
+   * @param module string
+   */
+  registerCategoryModule(e, t) {
+    this.code.state.modules[e] = t;
   }
-});
-function Hn(s) {
-  const e = mt(s?.existingEditor);
-  return e.code = s?.code ? new s.code(e) : new Pt(e), e.editor.addGraphTemplate = function(t) {
-    if (this.events.beforeAddGraphTemplate.emit(t).prevented)
-      return;
-    this._graphTemplates.push(t), this.graphTemplateEvents.addTarget(t.events), this.graphTemplateHooks.addTarget(t.hooks);
-    const n = Rt(t);
-    this.registerNodeType(n, { category: "Subgraphs", title: t.name }), this.events.addGraphTemplate.emit(t);
-  }, gn(e), bn(e), e.state = q({
-    modules: {},
-    token: null
-  }), e.init = () => {
-    e.unsubscribe(), e.engine = new vt(e.editor);
-  }, e.loadEditor = (t) => {
-    e.engine?.pause(), e.code.clear(), e.editor.load(t), e.commandHandler.executeCommand(Z.CLEAR_CLIPBOARD_COMMAND), e.commandHandler.executeCommand(Z.CLEAR_HISTORY_COMMAND), e.engine?.resume(), e.engine?.runOnce(void 0);
-  }, e.newGraph = () => {
-    e.engine?.pause(), e.code.clear(), e.editor.graph.id = Te(), e.engine?.resume(), e.engine?.runOnce(void 0);
-  }, e.subscribe = () => {
-    e.state.token && e.unsubscribe();
-    const t = Symbol(), n = e.displayedGraph;
-    n.events.addNode.subscribe(t, (o) => {
-      !o.subgraph && o.isCodeNode && (o.code = e.code);
-    }), n.events.addConnection.subscribe(t, (o) => {
-      const a = e.code.findNodeById(o.to.nodeId);
-      a && a.isCodeNode && a.onConnected();
-      const r = e.code.findNodeById(o.from.nodeId);
-      r && r.isCodeNode && r.onConnected();
-    }), n.events.removeConnection.subscribe(t, (o) => {
-      const a = e.code.findNodeById(o.to.nodeId);
-      a && a.isCodeNode && a.onUnconnected();
-      const r = e.code.findNodeById(o.from.nodeId);
-      r && r.isCodeNode && r.onUnconnected();
-    }), e.engine.events.beforeRun.subscribe(t, () => {
-      e.engine.pause(), e.code && (e.code.updateCodeNodes(), e.code.sortNodes(), e.code.updateCodeTemplates(), e.code.resetInputInterfaceScript()), e.engine.resume();
-    }), e.engine.events.beforeNodeCalculation.subscribe(t, (o) => {
-      e.engine.pause();
-      const a = o.node;
-      a.isCodeNode && (a.updateOutputNames(), a.updateConnectedInputInterfaces()), e.engine.resume();
-    }), e.engine.events.afterRun.subscribe(t, () => {
-      e.engine.pause(), e.code && (e.code.renderNodeCodes(), e.code.renderCode()), e.engine.resume();
-    }), e.state.token = t;
-  }, e.unsubscribe = () => {
-    if (!e.state.token) return;
-    const t = e.state.token;
-    e.displayedGraph.events.addNode.unsubscribe(t), e.displayedGraph.events.addConnection.unsubscribe(t), e.engine.events.beforeRun.unsubscribe(t), e.engine.events.beforeNodeCalculation.unsubscribe(t), e.engine.events.afterRun.unsubscribe(t), e.state.token = null;
-  }, e;
 }
-const gn = (s) => {
-  const e = "TOGGLE_PALETTE";
-  s.commandHandler.registerCommand(e, {
-    execute: () => s.settings.palette.enabled = !s.settings.palette.enabled,
-    canExecute: () => !0
-  });
-  const t = {
-    command: e,
-    title: "Toggle palette",
-    // Tooltip text
-    icon: b(() => s.settings.palette.enabled ? es : os)
-  }, n = "CLEAR_ALL";
-  s.commandHandler.registerCommand(n, {
-    execute: () => s.code.clear(),
-    canExecute: () => s.displayedGraph.nodes.length > 0
+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 = {
+    /** Called whenever a node is rendered */
+    renderNode: new Ge(null),
+    /** Called whenever an interface is rendered */
+    renderInterface: new Ge(null)
+  }, k = D({
+    clipboard: _,
+    code: e,
+    commandHandler: h,
+    displayedGraph: a,
+    editor: t,
+    history: g,
+    hooks: m,
+    isSubgraph: r,
+    settings: c,
+    switchGraph: i
   });
-  const o = {
-    command: n,
-    title: "Clear all",
-    // Tooltip text
-    icon: b(() => js)
-  }, a = "TOGGLE_MINIMAP";
-  s.commandHandler.registerCommand(a, {
-    execute: () => s.settings.enableMinimap = !s.settings.enableMinimap,
-    canExecute: () => s.displayedGraph.nodes.length > 1
-  });
-  const r = {
-    command: a,
-    title: "Toggle minimap",
-    // Tooltip text
-    icon: b(() => s.settings.enableMinimap ? Os : Is)
-  };
-  s.settings.toolbar.commands = [t, ...ft, o, r];
-}, bn = (s) => {
-  s.settings.nodes.defaultWidth = 400;
-};
+  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(
+    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(
+        s,
+        (l) => Jt(l, { defaultWidth: c.nodes.defaultWidth })
+      ), t.value.registerNodeType(at, { category: "Subgraphs" }), t.value.registerNodeType(it, { category: "Subgraphs" }), i(b.graph));
+    },
+    { immediate: !0 }
+  ), k;
+}
 export {
-  Ee as AbstractCodeNode,
-  xn as CheckboxInterface,
-  Pt as Code,
-  Un as CodeGraphEditor,
-  Se as CodeNode,
-  Q as CodeNodeInputInterface,
-  G as CodeNodeInterface,
-  de as CodeNodeInterfaceComponent,
-  Le as CodeNodeOutputInterface,
-  Wt as CodeVariable,
-  qt as DotsVertical,
-  Lt as DynamicCodeNode,
-  Ln as GRAPH_NODE_TYPE_PREFIX,
-  Mn as IntegerInterface,
-  es as LayoutSidebarLeftCollapse,
-  os as LayoutSidebarLeftExpand,
-  ds as LayoutSidebarRight,
-  ps as LayoutSidebarRightCollapse,
-  fs as LayoutSidebarRightExpand,
-  On as ListInputInterface,
-  ys as LockCode,
-  $n as NumberInterface,
-  Is as Schema,
-  Os as SchemaOff,
-  Tn as SelectInterface,
-  En as SliderInterface,
-  Sn as TextInputInterface,
-  jt as TextInputInterfaceComponent,
-  Bn as TextareaInputInterface,
-  Ss as TransitionBottom,
-  js as TrashOff,
-  Vn as TupleInputInterface,
-  Nn as addDefaultInterfaceTypes,
-  gn as addToolbarCommands,
-  Ve as booleanType,
-  Rt as createCodeGraphNodeType,
-  zn as defineCodeNode,
-  jn as defineDynamicCodeNode,
-  Tt as dictType,
-  Mt as formatInputs,
-  oe as getCodeNodes,
-  Rn as getPositionAtColumn,
-  Pn as getPositionBeforeNode,
-  ze as listType,
-  Be as loadNodeState,
+  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,
-  le as numberType,
-  Ot as saveNodeState,
-  ue as stringType,
-  je as tupleType,
-  bn as updateSettings,
-  Hn as useCodeGraph
+  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
 };