@babsey/code-graph 0.1.3 → 0.1.5

package/dist/code-graph.js

@@ -1,11 +1,11 @@
-import { AbstractNode as We, sortTopologically as Ne, NodeInterface as Xe, displayInSidebar as Me, NodeInterfaceType as R, BaklavaInterfaceTypes as qe, CheckboxInterfaceComponent as Je, setType as S, IntegerInterfaceComponent as Ye, TextInputInterfaceComponent as $e, NumberInterfaceComponent as Qe, SelectInterfaceComponent as Ke, SliderInterfaceComponent as Ze, TextareaInputInterfaceComponent as et, allowMultipleConnections as K, IntegerInterface as tt, TextInputInterface as st, useViewModel as q, useTemporaryConnection as nt, Components as ke, useGraph as ae, GRAPH_NODE_TYPE_PREFIX as se, useTransform as ot, useNodeCategories as at, BaklavaEditor as it, DEFAULT_TOOLBAR_COMMANDS as rt, useBaklava as lt, DependencyEngine as dt, applyResult as ut } from "baklavajs";
 import Z from "mustache";
-import { reactive as P, defineComponent as U, createElementBlock as r, openBlock as i, toDisplayString as j, markRaw as E, computed as b, createElementVNode as l, withDirectives as ee, vModelText as te, ref as B, onMounted as ie, onUpdated as Oe, normalizeClass as G, createCommentVNode as I, unref as _, renderSlot as W, createStaticVNode as J, onBeforeUnmount as ct, normalizeStyle as re, withModifiers as A, createBlock as O, Fragment as T, createTextVNode as pt, createVNode as z, withKeys as ne, renderList as D, nextTick as ht, toRef as Te, resolveDynamicComponent as Ce, inject as vt, Transition as mt, withCtx as F, onUnmounted as ft, normalizeProps as gt, guardReactiveProps as bt, mergeProps as yt } from "vue";
-import _t from "toposort";
-import { v4 as kt } from "uuid";
-import { usePointer as Ct } from "@vueuse/core";
+import Xe from "toposort";
+import { AbstractNode as qe, sortTopologically as Me, NodeInterface as Je, displayInSidebar as $e, NodeInterfaceType as R, BaklavaInterfaceTypes as Ye, CheckboxInterfaceComponent as Qe, setType as B, IntegerInterfaceComponent as Ke, TextInputInterfaceComponent as Oe, NumberInterfaceComponent as Ze, SelectInterfaceComponent as et, SliderInterfaceComponent as tt, TextareaInputInterfaceComponent as st, allowMultipleConnections as K, IntegerInterface as nt, TextInputInterface as ot, Commands as ke, useViewModel as q, useTemporaryConnection as at, Components as Ce, useGraph as ae, GRAPH_NODE_TYPE_PREFIX as se, useTransform as it, useNodeCategories as rt, BaklavaEditor as dt, useBaklava as lt, DependencyEngine as ut, applyResult as ct, DEFAULT_TOOLBAR_COMMANDS as pt } from "baklavajs";
+import { reactive as D, defineComponent as U, createElementBlock as r, openBlock as i, toDisplayString as j, markRaw as E, computed as b, createElementVNode as d, withDirectives as ee, vModelText as te, ref as V, onMounted as ie, onUpdated as Te, normalizeClass as G, createCommentVNode as I, unref as _, renderSlot as W, createStaticVNode as J, onBeforeUnmount as ht, normalizeStyle as re, withModifiers as A, createBlock as O, Fragment as T, createTextVNode as vt, createVNode as z, withKeys as ne, renderList as H, nextTick as mt, toRef as Ee, resolveDynamicComponent as we, inject as ft, Transition as gt, withCtx as F, onUnmounted as bt, normalizeProps as yt, guardReactiveProps as _t, mergeProps as kt } from "vue";
+import { v4 as Ct } from "uuid";
+import { usePointer as wt } from "@vueuse/core";
 Z.escape = (s) => s;
-class wt extends We {
+class xt extends qe {
   state;
   code;
   isCodeNode = !0;
@@ -14,7 +14,7 @@ class wt extends We {
   inputs = {};
   outputs = {};
   constructor() {
-    super(), this.initializeIo(), this.width = 400, this.twoColumn = !0, this.state = P({
+    super(), this.initializeIo(), this.width = 400, this.twoColumn = !0, this.state = D({
       codeTemplate: "",
       hidden: !1,
       integrated: !1,
@@ -24,7 +24,7 @@ class wt extends We {
       script: "",
       variableName: ""
     }), this.codeTemplate = function() {
-      return `${this.name}(${xt(this.codeNodeInputs).join(", ")})`;
+      return `${this.name}(${It(this.codeNodeInputs).join(", ")})`;
     };
   }
   get codeNodeInputs() {
@@ -151,14 +151,14 @@ class wt extends We {
    * Reset script of input interfaces.
    */
   resetInputInterfaceScript() {
-    Object.values(this.inputs).forEach((e) => e.state.script = "");
+    Object.values(this.codeNodeInputs).forEach((e) => e.resetScript());
   }
   updateCodeTemplate() {
     this.state.codeTemplate = this.codeTemplate.call(this);
   }
   updateConnectedInputInterfaces() {
     if (!this.graph) return;
-    const { connectionsFromNode: e } = Ne(this.graph);
+    const { connectionsFromNode: e } = Me(this.graph);
     if (!e.has(this)) return;
     const t = e.get(this);
     t && t.forEach((n) => {
@@ -176,7 +176,7 @@ class wt extends We {
     this.state.props = e;
   }
 }
-class Ee extends wt {
+class Se extends xt {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -190,7 +190,7 @@ class Ee extends wt {
   }
   save() {
     const e = super.save();
-    return It(this.graph, e), e;
+    return Nt(this.graph, e), e;
   }
   updateModules(e) {
     if (e)
@@ -201,12 +201,12 @@ class Ee extends wt {
     }
   }
 }
-const xt = (s, e = !0) => {
+const It = (s, e = !0) => {
   const t = [], n = Object.keys(s);
   return n.forEach((o) => {
     if (s[o]?.hidden) return;
-    const d = e && t.length < n.indexOf(o) ? `${o}=` : "";
-    t.push(`${d}{{ inputs.${o} }}`);
+    const l = e && t.length < n.indexOf(o) ? `${o}=` : "";
+    t.push(`${l}{{ inputs.${o} }}`);
   }), t;
 }, Ve = (s, e) => {
   if (!s) return;
@@ -218,7 +218,7 @@ const xt = (s, e = !0) => {
   }), Object.entries(e.outputs).forEach(([o, a]) => {
     o !== "_node" && n.outputs[o] && (n.outputs[o].hidden = a.hidden);
   });
-}, It = (s, e) => {
+}, Nt = (s, e) => {
   if (!s) return;
   const t = s.findNodeById(e.id);
   if (!t || t.subgraph) return;
@@ -228,7 +228,7 @@ const xt = (s, e = !0) => {
   }), Object.entries(e.outputs).forEach(([o, a]) => {
     o !== "_node" && n.outputs[o] && (a.hidden = n.outputs[o].hidden);
   });
-}, Nt = ["title"], le = /* @__PURE__ */ U({
+}, Mt = ["title"], de = /* @__PURE__ */ U({
   __name: "CodeNodeInterface",
   props: {
     intf: {}
@@ -236,16 +236,16 @@ const xt = (s, e = !0) => {
   setup(s) {
     return (e, t) => (i(), r("div", {
       title: s.intf.state?.script
-    }, j(s.intf.name), 9, Nt));
+    }, j(s.intf.name), 9, Mt));
   }
 });
-class H extends Xe {
+class P extends Je {
   isCodeNode = !0;
   code;
   state;
   type = null;
   constructor(e, t) {
-    super(e, t), this.setComponent(E(le)), this.state = P({
+    super(e, t), this.setComponent(E(de)), this.state = D({
       optional: !1,
       script: ""
     });
@@ -263,13 +263,14 @@ class H extends Xe {
     return this.id.slice(0, 6);
   }
   getValue = () => `${this.value ?? "None"}`;
+  resetScript = () => this.state.script = "";
 }
-const yn = (s, e) => {
+const _n = (s, e) => {
   s.state.optional = e, s.setHidden(e);
 };
-class Y extends H {
+class Y extends P {
   constructor(e = "", t) {
-    super(e, t), this.setComponent(E(le)), this.use(Me, !0);
+    super(e, t), this.setComponent(E(de)), this.use($e, !0);
   }
   set script(e) {
     if (this.state.script && this.allowMultipleConnections) {
@@ -285,19 +286,19 @@ class Y extends H {
     super.value = e, this.name !== "_node" && this.setHidden(!1);
   }
 }
-const Be = new R("boolean"), Mt = new R("dict"), Se = new R("list"), X = new R("node"), de = new R("number"), ue = new R("string"), ze = new R("tuple"), _n = (s) => {
-  new qe(s.editor, { viewPlugin: s }).addTypes(Be, Mt, Se, X, de, ue, ze);
+const Be = new R("boolean"), $t = new R("dict"), ze = new R("list"), X = new R("node"), le = new R("number"), ue = new R("string"), je = new R("tuple"), kn = (s) => {
+  new Ye(s.editor, { viewPlugin: s }).addTypes(Be, $t, ze, X, le, ue, je);
 };
-class kn extends Y {
+class Cn extends Y {
   constructor(e, t) {
-    super(e, t), this.setComponent(E(Je)), this.use(S, Be);
+    super(e, t), this.setComponent(E(Qe)), this.use(B, Be);
   }
   getValue = () => this.value ? "True" : "False";
 }
-class $t extends H {
+class Ot extends P {
   isCodeNodeOutput = !0;
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(E(le));
+    super(e, t), this.setComponent(E(de));
   }
   get script() {
     return this.name ? this.name : this.state.script;
@@ -307,42 +308,42 @@ class ce extends Y {
   min;
   max;
   constructor(e, t, n, o) {
-    super(e, t), this.min = n, this.max = o, this.use(S, de);
+    super(e, t), this.min = n, this.max = o, this.use(B, le);
   }
   validate(e) {
     return (this.min === void 0 || e >= this.min) && (this.max === void 0 || e <= this.max);
   }
 }
-class Cn extends ce {
-  component = E(Ye);
+class wn extends ce {
+  component = E(Ke);
   validate(e) {
     return Number.isInteger(e) && super.validate(e);
   }
 }
-class wn extends Y {
+class xn extends Y {
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(E($e)), this.use(S, Se);
+    super(e, t), this.setComponent(E(Oe)), this.use(B, ze);
   }
   getValue = () => `[${this.value}]`;
 }
-class xn extends ce {
-  component = E(Qe);
+class In extends ce {
+  component = E(Ze);
 }
 class pe extends Y {
   constructor(e, t) {
-    super(e, t), this.use(S, ue);
+    super(e, t), this.use(B, ue);
   }
   getValue = () => `"${this.value}"`;
 }
-class In extends pe {
-  component = E(Ke);
+class Nn extends pe {
+  component = E(et);
   items;
   constructor(e, t, n) {
     super(e, t), this.items = n;
   }
 }
-class Nn extends ce {
-  component = E(Ze);
+class Mn extends ce {
+  component = E(tt);
   min;
   max;
   constructor(e, t, n, o) {
@@ -350,7 +351,7 @@ class Nn extends ce {
   }
   getValue = () => `${Math.round(this.value * 1e3) / 1e3}`;
 }
-const Ot = U({
+const Tt = U({
   props: {
     intf: {
       type: Object,
@@ -375,12 +376,12 @@ const Ot = U({
   for (const [n, o] of e)
     t[n] = o;
   return t;
-}, Tt = { style: { position: "relative" } }, Et = { style: { "font-size": "12px", padding: "0 6px", position: "absolute", top: "-8px", "background-color": "var(--baklava-node-color-background)" } }, Vt = ["placeholder", "title"];
+}, Et = { style: { position: "relative" } }, St = { style: { "font-size": "12px", padding: "0 6px", position: "absolute", top: "-8px", "background-color": "var(--baklava-node-color-background)" } }, Vt = ["placeholder", "title"];
 function Bt(s, e, t, n, o, a) {
-  return i(), r("div", Tt, [
-    l("label", Et, j(s.intf.name), 1),
-    ee(l("input", {
-      "onUpdate:modelValue": e[0] || (e[0] = (d) => s.v = d),
+  return i(), r("div", Et, [
+    d("label", St, j(s.intf.name), 1),
+    ee(d("input", {
+      "onUpdate:modelValue": e[0] || (e[0] = (l) => s.v = l),
       type: "text",
       class: "baklava-input",
       placeholder: s.intf.name,
@@ -390,31 +391,31 @@ function Bt(s, e, t, n, o, a) {
     ])
   ]);
 }
-const St = /* @__PURE__ */ $(Ot, [["render", Bt]]);
-class Mn extends pe {
-  component = E(St);
-}
+const zt = /* @__PURE__ */ $(Tt, [["render", Bt]]);
 class $n extends pe {
-  component = E(et);
+  component = E(zt);
 }
-class On extends Y {
+class On extends pe {
+  component = E(st);
+}
+class Tn extends Y {
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(E($e)), this.use(S, ze);
+    super(e, t), this.setComponent(E(Oe)), this.use(B, je);
   }
   getValue = () => `(${this.value})`;
 }
-function Tn(s) {
-  return class extends Ee {
+function En(s) {
+  return class extends Se {
     type = s.type;
     inputs = {};
     outputs = {};
     constructor() {
       super(), this._title = s.title ?? s.type, this.name = s.name ?? s.type, this.updateModules(s.modules), s.variableName && (this.state.variableName = s.variableName), s.codeTemplate && (this.codeTemplate = s.codeTemplate), this.addInput(
         "_node",
-        new H("", []).use(S, X).use(K).setHidden(!0)
+        new P("", []).use(B, X).use(K).setHidden(!0)
       ), this.addOutput(
         "_node",
-        new H("", []).use(S, X).use(K).setHidden(!0)
+        new P("", []).use(B, X).use(K).setHidden(!0)
       ), this.executeFactory("input", s.inputs), this.executeFactory("output", s.outputs), s.onCreate?.call(this);
     }
     // public calculate = definition.calculate
@@ -446,7 +447,7 @@ function Tn(s) {
     }
   };
 }
-class zt extends Ee {
+class jt extends Se {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -456,8 +457,8 @@ class zt extends Ee {
    */
   calculate;
 }
-function En(s) {
-  return class extends zt {
+function Sn(s) {
+  return class extends jt {
     type = s.type;
     inputs = {};
     outputs = {};
@@ -468,10 +469,10 @@ function En(s) {
     constructor() {
       super(), this._title = s.title ?? s.type, this.name = s.name ?? s.type, this.updateModules(s.modules), s.codeTemplate && (this.codeTemplate = s.codeTemplate), s.variableName && (this.state.variableName = s.variableName), this.addInput(
         "_node",
-        new H("", []).use(S, X).use(K).setHidden(!0)
+        new P("", []).use(B, X).use(K).setHidden(!0)
       ), this.addOutput(
         "_node",
-        new H("", []).use(S, X).use(K).setHidden(!0)
+        new P("", []).use(B, X).use(K).setHidden(!0)
       ), this.staticInputKeys.push("_node"), this.staticOutputKeys.push("_node"), this.executeFactory("input", s.inputs), this.executeFactory("output", s.outputs), s.onCreate?.call(this);
     }
     onPlaced() {
@@ -503,14 +504,14 @@ function En(s) {
           if (!this.inputs[t]) {
             const n = e.inputs[t].value;
             let o;
-            typeof n == "number" ? o = new tt(t, n).use(S, de) : o = new st(t, JSON.stringify(n)).use(S, ue), o.use(Me, !0), this.addInput(t, o);
+            typeof n == "number" ? o = new nt(t, n).use(B, le) : o = new ot(t, JSON.stringify(n)).use(B, ue), o.use($e, !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 $t(t);
+            const n = new Ot(t);
             this.addOutput(t, n);
           }
           this.outputs[t] && (this.outputs[t].load(e.outputs[t]), this.outputs[t].nodeId = this.id);
@@ -531,12 +532,12 @@ function En(s) {
     }
     updateInterfaces(e, t, n) {
       const o = e === "input" ? this.staticInputKeys : this.staticOutputKeys, a = e === "input" ? this.inputs : this.outputs;
-      for (const d of Object.keys(a))
-        o.includes(d) || t[d] && !n.includes(d) || (e === "input" ? this.removeInput(d) : this.removeOutput(d));
-      for (const d of Object.keys(t)) {
-        if (a[d]) continue;
-        const u = t[d]();
-        e === "input" ? this.addInput(d, u) : this.addOutput(d, u);
+      for (const l of Object.keys(a))
+        o.includes(l) || t[l] && !n.includes(l) || (e === "input" ? this.removeInput(l) : this.removeOutput(l));
+      for (const l of Object.keys(t)) {
+        if (a[l]) continue;
+        const u = t[l]();
+        e === "input" ? this.addInput(l, u) : this.addOutput(l, u);
       }
     }
     updateProps(e) {
@@ -551,12 +552,12 @@ function En(s) {
   };
 }
 Z.escape = (s) => s;
-class jt {
+class Lt {
   _id;
   _viewModel;
   _state;
   constructor(e) {
-    this._id = kt(), this._viewModel = e, this._state = P({
+    this._id = Ct(), this._viewModel = e, this._state = D({
       autosort: !1,
       lockCode: !1,
       modules: {},
@@ -652,7 +653,7 @@ class jt {
    * Clear code graph.
    */
   clear() {
-    this.state.modules = {}, this.nodes = [], this.connections = [], this.state.script = "";
+    this.state.modules = {}, this.nodes = [], this.connections = [], this.state.script = "", this.viewModel.commandHandler.executeCommand(ke.CLEAR_CLIPBOARD_COMMAND), this.viewModel.commandHandler.executeCommand(ke.CLEAR_HISTORY_COMMAND), this.viewModel.engine && this.viewModel.engine.runOnce(null);
   }
   findNodeById(e) {
     return this.graph.findNodeById(e);
@@ -735,10 +736,10 @@ class jt {
   saveNodeStates(e) {
     e.forEach((t, n) => {
       const o = this.nodes[n];
-      Object.entries(t.inputs).forEach(([a, d]) => {
-        t.inputs && o.inputs[a] && (d.hidden = o.inputs[a].hidden);
-      }), Object.entries(t.outputs).forEach(([a, d]) => {
-        t.outputs && o.outputs[a] && (d.hidden = o.outputs[a].hidden);
+      Object.entries(t.inputs).forEach(([a, l]) => {
+        t.inputs && o.inputs[a] && (l.hidden = o.inputs[a].hidden);
+      }), Object.entries(t.outputs).forEach(([a, l]) => {
+        t.outputs && o.outputs[a] && (l.hidden = o.outputs[a].hidden);
       });
     });
   }
@@ -753,7 +754,7 @@ class jt {
           a.from.nodeId
         ]);
         let t = [...this.nodeIds];
-        t.reverse(), t = _t.array(t, e), t.reverse();
+        t.reverse(), t = Xe.array(t, e), t.reverse();
         const n = this.graph.nodes.map((a) => a.id).filter((a) => !t.includes(a));
         t = t.concat(n);
         const o = t.map((a) => this.findNodeById(a));
@@ -786,8 +787,8 @@ const oe = (s) => {
 }), Bn = (s) => {
   const e = { ...s.position };
   return e.x -= 440, e.y += 50, e;
-}, Sn = (s) => {
-  const { calculationOrder: e, connectionsFromNode: t } = Ne(s);
+}, zn = (s) => {
+  const { calculationOrder: e, connectionsFromNode: t } = Me(s);
   e.forEach((n) => {
     if (!n.isCodeNode) return;
     const o = n;
@@ -795,15 +796,15 @@ const oe = (s) => {
       a.to.state && a.from.script && (a.to.state.script = a.from.script);
     });
   });
-}, Lt = ["id"], Ut = { class: "align-middle" }, we = /* @__PURE__ */ U({
+}, Ut = ["id"], Gt = { class: "align-middle" }, xe = /* @__PURE__ */ U({
   __name: "CodeGraphNodeInterface",
   props: {
     node: {},
     intf: {}
   },
   setup(s) {
-    const e = s, { viewModel: t } = q(), { hoveredOver: n, temporaryConnection: o } = nt(), a = B(null), d = b(() => e.intf.connectionCount > 0), u = b(() => ({
-      "--connected": d.value
+    const e = s, { viewModel: t } = q(), { hoveredOver: n, temporaryConnection: o } = at(), a = V(null), l = b(() => e.intf.connectionCount > 0), u = b(() => ({
+      "--connected": l.value
     })), v = () => {
       n(e.intf);
     }, k = () => {
@@ -811,7 +812,7 @@ const oe = (s) => {
     }, w = () => {
       a.value && t.value.hooks.renderInterface.execute({ intf: e.intf, el: a.value });
     };
-    return ie(w), Oe(w), (V, L) => (i(), r("div", {
+    return ie(w), Te(w), (S, L) => (i(), r("div", {
       id: s.intf.id,
       ref_key: "el",
       ref: a,
@@ -823,12 +824,12 @@ const oe = (s) => {
         onPointerover: v,
         onPointerout: k
       }, null, 34)) : I("", !0),
-      l("span", Ut, [
-        W(V.$slots, "default")
+      d("span", Gt, [
+        W(S.$slots, "default")
       ])
-    ], 10, Lt));
+    ], 10, Ut));
   }
-}), Gt = {}, Rt = {
+}), Rt = {}, Dt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -840,17 +841,17 @@ const oe = (s) => {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-code-variable"
 };
-function Pt(s, e) {
-  return i(), r("svg", Rt, [...e[0] || (e[0] = [
-    l("path", {
+function Ht(s, e) {
+  return i(), r("svg", Dt, [...e[0] || (e[0] = [
+    d("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)
+    d("path", { d: "M4 8m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" }, null, -1)
   ])]);
 }
-const Dt = /* @__PURE__ */ $(Gt, [["render", Pt]]), Ht = {}, At = {
+const Pt = /* @__PURE__ */ $(Rt, [["render", Ht]]), At = {}, Ft = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -862,19 +863,19 @@ const Dt = /* @__PURE__ */ $(Gt, [["render", Pt]]), Ht = {}, At = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"
 };
-function Ft(s, e) {
-  return i(), r("svg", At, [...e[0] || (e[0] = [
-    l("path", {
+function Wt(s, e) {
+  return i(), r("svg", Ft, [...e[0] || (e[0] = [
+    d("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)
+    d("path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+    d("path", { d: "M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1),
+    d("path", { d: "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
   ])]);
 }
-const Wt = /* @__PURE__ */ $(Ht, [["render", Ft]]), Xt = {}, qt = {
+const Xt = /* @__PURE__ */ $(At, [["render", Wt]]), qt = {}, Jt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -882,17 +883,17 @@ const Wt = /* @__PURE__ */ $(Ht, [["render", Ft]]), Xt = {}, qt = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"
 };
-function Jt(s, e) {
-  return i(), r("svg", qt, [...e[0] || (e[0] = [
-    l("path", {
+function Yt(s, e) {
+  return i(), r("svg", Jt, [...e[0] || (e[0] = [
+    d("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)
+    d("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-2.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
   ])]);
 }
-const Yt = /* @__PURE__ */ $(Xt, [["render", Jt]]), Qt = {}, Kt = {
+const Qt = /* @__PURE__ */ $(qt, [["render", Yt]]), Kt = {}, Zt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -900,17 +901,17 @@ const Yt = /* @__PURE__ */ $(Xt, [["render", Jt]]), Qt = {}, Kt = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-expand"
 };
-function Zt(s, e) {
-  return i(), r("svg", Kt, [...e[0] || (e[0] = [
-    l("path", {
+function es(s, e) {
+  return i(), r("svg", Zt, [...e[0] || (e[0] = [
+    d("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)
+    d("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-4.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
   ])]);
 }
-const es = /* @__PURE__ */ $(Qt, [["render", Zt]]), ts = {}, ss = {
+const ts = /* @__PURE__ */ $(Kt, [["render", es]]), ss = {}, ns = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -918,17 +919,17 @@ const es = /* @__PURE__ */ $(Qt, [["render", Zt]]), ts = {}, ss = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right"
 };
-function ns(s, e) {
-  return i(), r("svg", ss, [...e[0] || (e[0] = [
-    l("path", {
+function os(s, e) {
+  return i(), r("svg", ns, [...e[0] || (e[0] = [
+    d("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)
+    d("path", { d: "M6 21a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3zm8 -16h-8a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h8z" }, null, -1)
   ])]);
 }
-const os = /* @__PURE__ */ $(ts, [["render", ns]]), as = {}, is = {
+const as = /* @__PURE__ */ $(ss, [["render", os]]), is = {}, rs = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -936,17 +937,17 @@ const os = /* @__PURE__ */ $(ts, [["render", ns]]), as = {}, is = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-collapse"
 };
-function rs(s, e) {
-  return i(), r("svg", is, [...e[0] || (e[0] = [
-    l("path", {
+function ds(s, e) {
+  return i(), r("svg", rs, [...e[0] || (e[0] = [
+    d("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)
+    d("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-5.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
   ])]);
 }
-const ls = /* @__PURE__ */ $(as, [["render", rs]]), ds = {}, us = {
+const ls = /* @__PURE__ */ $(is, [["render", ds]]), us = {}, cs = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -954,17 +955,17 @@ const ls = /* @__PURE__ */ $(as, [["render", rs]]), ds = {}, us = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-expand"
 };
-function cs(s, e) {
-  return i(), r("svg", us, [...e[0] || (e[0] = [
-    l("path", {
+function ps(s, e) {
+  return i(), r("svg", cs, [...e[0] || (e[0] = [
+    d("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)
+    d("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-3.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
   ])]);
 }
-const ps = /* @__PURE__ */ $(ds, [["render", cs]]), hs = {}, vs = {
+const hs = /* @__PURE__ */ $(us, [["render", ps]]), vs = {}, ms = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -976,12 +977,12 @@ const ps = /* @__PURE__ */ $(ds, [["render", cs]]), hs = {}, vs = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-lock-code"
 };
-function ms(s, e) {
-  return i(), r("svg", vs, [...e[0] || (e[0] = [
+function fs(s, e) {
+  return i(), r("svg", ms, [...e[0] || (e[0] = [
     J('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2"></path><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M8 11v-4a4 4 0 1 1 8 0v4"></path><path d="M20 21l2 -2l-2 -2"></path><path d="M17 17l-2 2l2 2"></path>', 6)
   ])]);
 }
-const fs = /* @__PURE__ */ $(hs, [["render", ms]]), gs = {}, bs = {
+const gs = /* @__PURE__ */ $(vs, [["render", fs]]), bs = {}, ys = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -993,12 +994,12 @@ const fs = /* @__PURE__ */ $(hs, [["render", ms]]), gs = {}, bs = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema"
 };
-function ys(s, e) {
-  return i(), r("svg", bs, [...e[0] || (e[0] = [
+function _s(s, e) {
+  return i(), r("svg", ys, [...e[0] || (e[0] = [
     J('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 2h5v4h-5z"></path><path d="M15 10h5v4h-5z"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h5"></path><path d="M7.5 6v4"></path><path d="M7.5 14v4"></path>', 8)
   ])]);
 }
-const _s = /* @__PURE__ */ $(gs, [["render", ys]]), ks = {}, Cs = {
+const ks = /* @__PURE__ */ $(bs, [["render", _s]]), Cs = {}, ws = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1010,12 +1011,12 @@ const _s = /* @__PURE__ */ $(gs, [["render", ys]]), ks = {}, Cs = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema-off"
 };
-function ws(s, e) {
-  return i(), r("svg", Cs, [...e[0] || (e[0] = [
+function xs(s, e) {
+  return i(), r("svg", ws, [...e[0] || (e[0] = [
     J('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 2h4v4m-4 0h-1v-1"></path><path d="M15 11v-1h5v4h-2"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h2"></path><path d="M7.5 7.5v2.5"></path><path d="M7.5 14v4"></path><path d="M3 3l18 18"></path>', 9)
   ])]);
 }
-const xs = /* @__PURE__ */ $(ks, [["render", ws]]), Is = {}, Ns = {
+const Is = /* @__PURE__ */ $(Cs, [["render", xs]]), Ns = {}, Ms = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1027,12 +1028,12 @@ const xs = /* @__PURE__ */ $(ks, [["render", ws]]), Is = {}, Ns = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-transition-bottom"
 };
-function Ms(s, e) {
-  return i(), r("svg", Ns, [...e[0] || (e[0] = [
+function $s(s, e) {
+  return i(), r("svg", Ms, [...e[0] || (e[0] = [
     J('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M21 18a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3"></path><path d="M3 3m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v0a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path><path d="M12 9v8"></path><path d="M9 14l3 3l3 -3"></path>', 5)
   ])]);
 }
-const $s = /* @__PURE__ */ $(Is, [["render", Ms]]), Os = {}, Ts = {
+const Os = /* @__PURE__ */ $(Ns, [["render", $s]]), Ts = {}, Es = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1044,18 +1045,18 @@ const $s = /* @__PURE__ */ $(Is, [["render", Ms]]), Os = {}, Ts = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-trash-off"
 };
-function Es(s, e) {
-  return i(), r("svg", Ts, [...e[0] || (e[0] = [
+function Ss(s, e) {
+  return i(), r("svg", Es, [...e[0] || (e[0] = [
     J('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 3l18 18"></path><path d="M4 7h3m4 0h9"></path><path d="M10 11l0 6"></path><path d="M14 14l0 3"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l.077 -.923"></path><path d="M18.384 14.373l.616 -7.373"></path><path d="M9 5v-1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>', 8)
   ])]);
 }
-const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"], Ss = {
+const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"], zs = {
   class: "__title-label",
   style: { "flex-grow": "1" }
-}, zs = { key: 0 }, js = {
+}, js = { key: 0 }, Ls = {
   class: "__menu",
   style: { display: "flex" }
-}, Ls = { class: "__outputs" }, Us = { key: 0 }, Gs = ["id", "title"], Rs = { class: "__inputs" }, Ps = { key: 0 }, Ds = ["id", "title"], Hs = /* @__PURE__ */ U({
+}, Us = { class: "__outputs" }, Gs = { key: 0 }, Rs = ["id", "title"], Ds = { class: "__inputs" }, Hs = { key: 0 }, Ps = ["id", "title"], As = /* @__PURE__ */ U({
   __name: "CodeGraphNode",
   props: {
     node: {},
@@ -1064,9 +1065,9 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
   },
   emits: ["select", "start-drag", "update"],
   setup(s, { emit: e }) {
-    const t = ke.ContextMenu, n = ke.NodeInterface, o = s, a = b(() => o.node), d = e, { viewModel: u } = q(), { graph: v, switchGraph: k } = ae(), w = B(null), V = B(!1), L = B(""), N = B(null), m = B(!1);
+    const t = Ce.ContextMenu, n = Ce.NodeInterface, o = s, a = b(() => o.node), l = e, { viewModel: u } = q(), { graph: v, switchGraph: k } = ae(), w = V(null), S = V(!1), L = V(""), N = V(null), m = V(!1);
     let y = 0, x = 0;
-    const f = B(!1), C = b(() => {
+    const f = V(!1), C = b(() => {
       const c = [
         { value: "edit", label: "Edit" },
         { value: "rename", label: "Rename" },
@@ -1080,26 +1081,26 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
       "--hidden": a.value.state?.hidden
     })), M = b(() => ({
       "--reverse-y": o.node.reverseY ?? u.value.settings.nodes.reverseY
-    })), je = b(() => ({
+    })), Le = b(() => ({
       top: `${o.node.position?.y ?? 0}px`,
       left: `${o.node.position?.x ?? 0}px`,
       "--width": `${o.node.width ?? u.value.settings.nodes.defaultWidth}px`
-    })), Le = b(() => Object.values(o.node.inputs).filter((c) => !c.hidden)), Ue = b(() => Object.values(o.node.outputs).filter((c) => !c.hidden)), he = () => {
-      d("select");
-    }, Ge = (c) => {
-      o.selected || he(), d("start-drag", c);
+    })), Ue = b(() => Object.values(o.node.inputs).filter((c) => !c.hidden)), Ge = b(() => Object.values(o.node.outputs).filter((c) => !c.hidden)), he = () => {
+      l("select");
+    }, Re = (c) => {
+      o.selected || he(), l("start-drag", c);
     }, ve = () => {
       f.value = !0;
-    }, Re = () => {
+    }, De = () => {
       const c = u.value.displayedGraph.sidebar;
       c.nodeId = "", c.visible = !1;
     }, me = () => {
       const c = u.value.displayedGraph.sidebar;
       c.nodeId = o.node.id, c.visible = !0;
-    }, Pe = () => {
+    }, He = () => {
       const c = u.value.displayedGraph.sidebar;
       c.nodeId = o.node.id;
-    }, De = async (c) => {
+    }, Pe = async (c) => {
       switch (c) {
         case "edit":
           me();
@@ -1108,30 +1109,30 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
           v.value.removeNode(o.node);
           break;
         case "rename":
-          L.value = o.node.title, V.value = !0, await ht(), N.value?.focus();
+          L.value = o.node.title, S.value = !0, await mt(), N.value?.focus();
           break;
         case "editSubgraph":
           k(o.node.template);
           break;
       }
     }, fe = () => {
-      a.value.title = L.value, V.value = !1;
+      a.value.title = L.value, S.value = !1;
     }, ge = () => {
       w.value && u.value.hooks.renderNode.execute({ node: o.node, el: w.value });
-    }, He = (c) => {
+    }, Ae = (c) => {
       m.value = !0, y = o.node.width, x = c.clientX, c.preventDefault();
     }, be = (c) => {
-      a.value.state && (a.value.state.integrated = c, d("update"));
+      a.value.state && (a.value.state.integrated = c, l("update"));
     }, ye = (c) => {
       if (!m.value) return;
-      const g = c.clientX - x, h = y + g / v.value.scaling, Ae = u.value.settings.nodes.minWidth, Fe = u.value.settings.nodes.maxWidth;
-      a.value.width = Math.max(Ae, Math.min(Fe, h));
+      const g = c.clientX - x, h = y + g / v.value.scaling, Fe = u.value.settings.nodes.minWidth, We = u.value.settings.nodes.maxWidth;
+      a.value.width = Math.max(Fe, Math.min(We, h));
     }, _e = () => {
       m.value = !1;
     };
     return ie(() => {
       ge(), window.addEventListener("mousemove", ye), window.addEventListener("mouseup", _e);
-    }), Oe(ge), ct(() => {
+    }), Te(ge), ht(() => {
       window.removeEventListener("mousemove", ye), window.removeEventListener("mouseup", _e);
     }), (c, g) => (i(), r("div", {
       id: a.value.id,
@@ -1139,20 +1140,20 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
       ref: w,
       class: G([p.value, "baklava-node"]),
       "data-node-type": a.value.type,
-      style: re(je.value),
+      style: re(Le.value),
       onPointerdown: he
     }, [
       _(u).settings.nodes.resizable ? (i(), r("div", {
         key: 0,
         class: "__resize-handle",
-        onMousedown: He
+        onMousedown: Ae
       }, null, 32)) : I("", !0),
-      l("div", {
+      d("div", {
         class: "__title",
-        onPointerdown: A(Ge, ["self", "stop"]),
+        onPointerdown: A(Re, ["self", "stop"]),
         onContextmenu: A(ve, ["prevent"])
       }, [
-        a.value.inputs._node ? (i(), O(we, {
+        a.value.inputs._node ? (i(), O(xe, {
           key: 0,
           node: a.value,
           intf: a.value.inputs._node,
@@ -1160,7 +1161,7 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
           "data-interface-type": "node",
           style: { "flex-grow": "0" }
         }, null, 8, ["node", "intf"])) : I("", !0),
-        V.value ? ee((i(), r("input", {
+        S.value ? ee((i(), r("input", {
           key: 2,
           ref_key: "renameInputEl",
           ref: N,
@@ -1174,41 +1175,41 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
         }, null, 544)), [
           [te, L.value]
         ]) : (i(), r(T, { key: 1 }, [
-          l("div", Ss, [
-            a.value.idx > -1 ? (i(), r("span", zs, j(a.value.idx + 1) + " - ", 1)) : I("", !0),
-            pt(j(a.value.title), 1)
+          d("div", zs, [
+            a.value.idx > -1 ? (i(), r("span", js, j(a.value.idx + 1) + " - ", 1)) : I("", !0),
+            vt(j(a.value.title), 1)
           ]),
-          l("div", js, [
+          d("div", Ls, [
             a.value.subgraph ? I("", !0) : (i(), r(T, { key: 0 }, [
-              a.value.state.lockCode ? (i(), O(_(fs), {
+              a.value.state.lockCode ? (i(), O(_(gs), {
                 key: 0,
                 class: "--clickable mx-1",
                 onClick: g[0] || (g[0] = (h) => a.value.lockCode = !1)
               })) : I("", !0),
-              a.value.state.integrated ? (i(), O(_(Dt), {
+              a.value.state.integrated ? (i(), O(_(Pt), {
                 key: 1,
                 class: "--clickable mx-1",
                 onClick: g[1] || (g[1] = (h) => be(!1))
-              })) : (i(), O(_($s), {
+              })) : (i(), O(_(Os), {
                 key: 2,
                 class: "--clickable mx-1",
                 onClick: g[2] || (g[2] = (h) => be(!0))
               })),
-              !_(u).displayedGraph.sidebar.visible && _(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), O(_(ps), {
+              !_(u).displayedGraph.sidebar.visible && _(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), O(_(hs), {
                 key: 3,
                 class: "--clickable mx-1",
                 onClick: me
-              })) : _(u).displayedGraph.sidebar.visible && _(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), O(_(os), {
+              })) : _(u).displayedGraph.sidebar.visible && _(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), O(_(as), {
                 key: 4,
                 class: "--clickable mx-1",
-                onClick: Pe
+                onClick: He
               })) : (i(), O(_(ls), {
                 key: 5,
                 class: "--clickable mx-1",
-                onClick: Re
+                onClick: De
               }))
             ], 64)),
-            z(_(Wt), {
+            z(_(Xt), {
               class: "--clickable mx-1",
               onClick: ve
             }),
@@ -1218,11 +1219,11 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
               x: 0,
               y: 0,
               items: C.value,
-              onClick: De
+              onClick: Pe
             }, null, 8, ["modelValue", "items"])
           ])
         ], 64)),
-        a.value.outputs._node ? (i(), O(we, {
+        a.value.outputs._node ? (i(), O(xe, {
           key: 3,
           node: a.value,
           intf: a.value.outputs._node,
@@ -1230,26 +1231,26 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
           "data-interface-type": "node"
         }, null, 8, ["node", "intf"])) : I("", !0)
       ], 32),
-      l("div", {
+      d("div", {
         class: G(["__content", M.value]),
         onKeydown: g[5] || (g[5] = ne(A(() => {
         }, ["stop"]), ["delete"])),
         onContextmenu: g[6] || (g[6] = A(() => {
         }, ["prevent"]))
       }, [
-        l("div", Ls, [
-          (i(!0), r(T, null, D(Ue.value, (h) => (i(), r(T, {
+        d("div", Us, [
+          (i(!0), r(T, null, H(Ge.value, (h) => (i(), r(T, {
             key: h.id
           }, [
-            a.value.state?.hidden ? (i(), r("div", Us, [
+            a.value.state?.hidden ? (i(), r("div", Gs, [
               h.port ? (i(), r("div", {
                 key: 0,
                 id: h.id,
                 title: h.name,
                 class: "baklava-node-interface --output --connected"
               }, [...g[7] || (g[7] = [
-                l("div", { class: "__port" }, null, -1)
-              ])], 8, Gs)) : I("", !0)
+                d("div", { class: "__port" }, null, -1)
+              ])], 8, Rs)) : I("", !0)
             ])) : W(c.$slots, "nodeInterface", {
               key: 1,
               type: "output",
@@ -1264,19 +1265,19 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
             ])
           ], 64))), 128))
         ]),
-        l("div", Rs, [
-          (i(!0), r(T, null, D(Le.value, (h) => (i(), r(T, {
+        d("div", Ds, [
+          (i(!0), r(T, null, H(Ue.value, (h) => (i(), r(T, {
             key: h.id
           }, [
-            a.value.state?.hidden ? (i(), r("div", Ps, [
+            a.value.state?.hidden ? (i(), r("div", Hs, [
               h.port ? (i(), r("div", {
                 key: 0,
                 id: h.id,
                 title: h.name,
                 class: "baklava-node-interface --input --connected"
               }, [...g[8] || (g[8] = [
-                l("div", { class: "__port" }, null, -1)
-              ])], 8, Ds)) : I("", !0)
+                d("div", { class: "__port" }, null, -1)
+              ])], 8, Ps)) : I("", !0)
             ])) : W(c.$slots, "nodeInterface", {
               key: 1,
               node: a.value,
@@ -1294,10 +1295,10 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
       ], 34)
     ], 46, Bs));
   }
-}), As = ["title"], Fs = {
+}), Fs = ["title"], Ws = {
   key: 0,
   class: "__label"
-}, xe = /* @__PURE__ */ U({
+}, Ie = /* @__PURE__ */ U({
   __name: "Checkbox",
   props: {
     disabled: { type: Boolean },
@@ -1313,42 +1314,42 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
       title: s.name,
       onClick: o[0] || (o[0] = (a) => t("update:modelValue", !s.modelValue))
     }, [
-      o[1] || (o[1] = l("div", { class: "__checkmark-container" }, [
-        l("svg", {
+      o[1] || (o[1] = d("div", { class: "__checkmark-container" }, [
+        d("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           width: "18",
           height: "18",
           viewBox: "0 0 18 18"
         }, [
-          l("path", {
+          d("path", {
             class: "__checkmark",
             d: "M 6 5 L 6 10 L 16 10",
             transform: "rotate(-45 10 10)"
           })
         ])
       ], -1)),
-      s.name ? (i(), r("div", Fs, j(s.name), 1)) : I("", !0)
-    ], 10, As));
+      s.name ? (i(), r("div", Ws, j(s.name), 1)) : I("", !0)
+    ], 10, Fs));
   }
-}), Ws = { class: "__header" }, Xs = { class: "__node-name" }, qs = { class: "__interfaces" }, Js = { class: "__inputs" }, Ys = { style: { display: "flex" } }, Qs = { class: "__outputs" }, Ks = {
+}), Xs = { class: "__header" }, qs = { class: "__node-name" }, Js = { class: "__interfaces" }, Ys = { class: "__inputs" }, Qs = { style: { display: "flex" } }, Ks = { class: "__outputs" }, Zs = {
   key: 0,
   class: "__interface"
-}, Zs = { style: { display: "flex" } }, en = /* @__PURE__ */ U({
+}, en = { style: { display: "flex" } }, tn = /* @__PURE__ */ U({
   __name: "CodeGraphSidebar",
   setup(s) {
-    const { viewModel: e } = q(), { graph: t } = ae(), n = B(null), o = Te(e.value.settings.sidebar, "width"), a = b(() => e.value.settings.sidebar.resizable);
-    let d = 0, u = 0;
+    const { viewModel: e } = q(), { graph: t } = ae(), n = V(null), o = Ee(e.value.settings.sidebar, "width"), a = b(() => e.value.settings.sidebar.resizable);
+    let l = 0, u = 0;
     const v = b(() => {
       const f = t.value.sidebar.nodeId;
       return t.value.nodes.find((C) => C.id === f);
     }), k = b(() => v.value), w = b(() => ({
       width: `${o.value}px`
-    })), V = b(() => k.value ? Object.values(k.value.inputs).filter((f) => f.displayInSidebar && f.component) : []), L = b(() => k.value ? Object.values(k.value.outputs).filter((f) => f.displayInSidebar && f.component) : []), N = () => {
+    })), S = b(() => k.value ? Object.values(k.value.inputs).filter((f) => f.displayInSidebar && f.component) : []), L = b(() => k.value ? Object.values(k.value.outputs).filter((f) => f.displayInSidebar && f.component) : []), N = () => {
       t.value.sidebar.visible = !1;
     }, m = () => {
       v.value?.events.update.emit(null);
     }, y = (f) => {
-      d = o.value, u = f.clientX, window.addEventListener("mousemove", x), window.addEventListener(
+      l = o.value, u = f.clientX, window.addEventListener("mousemove", x), window.addEventListener(
         "mouseup",
         () => {
           window.removeEventListener("mousemove", x);
@@ -1357,7 +1358,7 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
       );
     }, x = (f) => {
       const C = n.value?.parentElement?.getBoundingClientRect().width ?? 500, p = f.clientX - u;
-      let M = d - p;
+      let M = l - p;
       M < 300 ? M = 300 : M > 0.9 * C && (M = 0.9 * C), o.value = M;
     };
     return (f, C) => (i(), r("div", {
@@ -1372,24 +1373,24 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
         onMousedown: y
       }, null, 32)) : I("", !0),
       v.value ? (i(), r(T, { key: 1 }, [
-        l("div", Ws, [
-          l("button", {
+        d("div", Xs, [
+          d("button", {
             tabindex: "-1",
             class: "__close",
             onClick: N
           }, "×"),
-          l("div", Xs, [
-            l("b", null, j(v.value.title), 1)
+          d("div", qs, [
+            d("b", null, j(v.value.title), 1)
           ])
         ]),
-        l("div", qs, [
-          l("div", Js, [
-            (i(!0), r(T, null, D(V.value, (p) => (i(), r("div", {
+        d("div", Js, [
+          d("div", Ys, [
+            (i(!0), r(T, null, H(S.value, (p) => (i(), r("div", {
               key: p.id,
               class: "__interface"
             }, [
-              l("div", Ys, [
-                z(xe, {
+              d("div", Qs, [
+                z(Ie, {
                   modelValue: p.hidden,
                   "onUpdate:modelValue": [
                     (M) => p.hidden = M,
@@ -1399,7 +1400,7 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
                   inversed: "",
                   style: { "padding-right": "8px" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
-                (i(), O(Ce(p.component), {
+                (i(), O(we(p.component), {
                   modelValue: p.value,
                   "onUpdate:modelValue": (M) => p.value = M,
                   node: v.value,
@@ -1409,10 +1410,10 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
               ])
             ]))), 128))
           ]),
-          l("div", Qs, [
-            k.value && k.value.state ? (i(), r("div", Ks, [
-              C[3] || (C[3] = l("label", null, "Variable name", -1)),
-              ee(l("input", {
+          d("div", Ks, [
+            k.value && k.value.state ? (i(), r("div", Zs, [
+              C[3] || (C[3] = d("label", null, "Variable name", -1)),
+              ee(d("input", {
                 "onUpdate:modelValue": C[1] || (C[1] = (p) => k.value.state.variableName = p),
                 type: "text",
                 class: "baklava-input",
@@ -1423,12 +1424,12 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
                 [te, k.value.state.variableName]
               ])
             ])) : I("", !0),
-            (i(!0), r(T, null, D(L.value, (p) => (i(), r("div", {
+            (i(!0), r(T, null, H(L.value, (p) => (i(), r("div", {
               key: p.id,
               class: "__interface"
             }, [
-              l("div", Zs, [
-                z(xe, {
+              d("div", en, [
+                z(Ie, {
                   modelValue: p.hidden,
                   "onUpdate:modelValue": [
                     (M) => p.hidden = M,
@@ -1438,7 +1439,7 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
                   inversed: "",
                   style: { "padding-right": "8px" }
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
-                (i(), O(Ce(p.component), {
+                (i(), O(we(p.component), {
                   modelValue: p.value,
                   "onUpdate:modelValue": (M) => p.value = M,
                   node: v.value,
@@ -1453,7 +1454,7 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
       ], 64)) : I("", !0)
     ], 6));
   }
-}), tn = U({
+}), sn = U({
   props: {
     type: {
       type: String,
@@ -1465,14 +1466,14 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
     }
   },
   setup(s) {
-    const { viewModel: e } = q(), { switchGraph: t } = ae(), n = B(!1), o = b(() => s.type.startsWith(se));
+    const { viewModel: e } = q(), { switchGraph: t } = ae(), n = V(!1), o = b(() => s.type.startsWith(se));
     return { showContextMenu: n, hasContextMenu: o, contextMenuItems: [
       { label: "Edit Subgraph", value: "editSubgraph" },
       { label: "Delete Subgraph", value: "deleteSubgraph" }
     ], openContextMenu: () => {
       n.value = !0;
     }, onContextMenuClick: (v) => {
-      const k = s.type.substring(se.length), w = e.value.editor.graphTemplates.find((V) => V.id === k);
+      const k = s.type.substring(se.length), w = e.value.editor.graphTemplates.find((S) => S.id === k);
       if (w)
         switch (v) {
           case "editSubgraph":
@@ -1484,38 +1485,38 @@ const Vs = /* @__PURE__ */ $(Os, [["render", Es]]), Bs = ["id", "data-node-type"
         }
     } };
   }
-}), sn = ["data-node-type"], nn = { class: "__title" }, on = { class: "__title-label" };
-function an(s, e, t, n, o, a) {
+}), nn = ["data-node-type"], on = { class: "__title" }, an = { class: "__title-label" };
+function rn(s, e, t, n, o, a) {
   return i(), r("div", {
     class: "baklava-node --palette",
     "data-node-type": s.type
   }, [
-    l("div", nn, [
-      l("div", on, j(s.title), 1)
+    d("div", on, [
+      d("div", an, j(s.title), 1)
     ])
-  ], 8, sn);
+  ], 8, nn);
 }
-const Ie = /* @__PURE__ */ $(tn, [["render", an]]), rn = {
+const Ne = /* @__PURE__ */ $(sn, [["render", rn]]), dn = {
   class: "baklava-node --palette",
   style: { "margin-top": "-20px", "margin-bottom": "20px" }
 }, ln = {
   key: 0,
   style: { display: "flex", "justify-content": "space-between" }
-}, dn = ["onClick"], un = {
+}, un = ["onClick"], cn = {
   key: 0,
   style: { margin: "auto 0", "font-size": "12px" }
-}, cn = /* @__PURE__ */ U({
+}, pn = /* @__PURE__ */ U({
   __name: "CodeNodePalette",
   setup(s) {
-    const { viewModel: e } = q(), { x: t, y: n } = Ct(), { transform: o } = ot(), a = at(e), d = vt("editorEl"), u = B(""), v = B(null), k = () => u.value ? a.value.filter(
+    const { viewModel: e } = q(), { x: t, y: n } = wt(), { transform: o } = it(), a = rt(e), l = ft("editorEl"), u = V(""), v = V(null), k = () => u.value ? a.value.filter(
       (N) => N.name.toLowerCase().includes(u.value.toLowerCase()) || Object.values(N.nodeTypes).some(
         (m) => m.title.toLowerCase().includes(u.value.toLowerCase())
       )
     ) : a.value, w = (N) => u.value ? Object.values(N).filter(
       (m) => m.category.toLowerCase().includes(u.value.toLowerCase()) || m.title.toLowerCase().includes(u.value.toLowerCase())
-    ) : Object.values(N), V = b(() => {
-      if (!v.value || !d?.value) return {};
-      const { left: N, top: m } = d.value.getBoundingClientRect();
+    ) : Object.values(N), S = b(() => {
+      if (!v.value || !l?.value) return {};
+      const { left: N, top: m } = l.value.getBoundingClientRect();
       return {
         top: `${n.value - m}px`,
         left: `${t.value - N}px`
@@ -1526,21 +1527,21 @@ const Ie = /* @__PURE__ */ $(tn, [["render", an]]), rn = {
         nodeInformation: m
       };
       const y = () => {
-        const x = P(new m.type());
+        const x = D(new m.type());
         e.value.displayedGraph.addNode(x);
-        const f = d.value.getBoundingClientRect(), [C, p] = o(t.value - f.left, n.value - f.top);
+        const f = l.value.getBoundingClientRect(), [C, p] = o(t.value - f.left, n.value - f.top);
         x.position.x = C, x.position.y = p, v.value = null, document.removeEventListener("pointerup", y);
       };
       document.addEventListener("pointerup", y);
     };
     return (N, m) => (i(), r(T, null, [
-      l("div", {
+      d("div", {
         class: G([{ "--open": _(e).settings.palette.enabled }, "baklava-node-palette"]),
         onContextmenu: m[1] || (m[1] = A(() => {
         }, ["stop", "prevent"]))
       }, [
-        l("div", rn, [
-          ee(l("input", {
+        d("div", dn, [
+          ee(d("input", {
             "onUpdate:modelValue": m[0] || (m[0] = (y) => u.value = y),
             type: "text",
             class: "baklava-input",
@@ -1550,17 +1551,17 @@ const Ie = /* @__PURE__ */ $(tn, [["render", an]]), rn = {
             [te, u.value]
           ])
         ]),
-        (i(!0), r(T, null, D(k(), (y) => (i(), r("section", {
+        (i(!0), r(T, null, H(k(), (y) => (i(), r("section", {
           key: y.name
         }, [
           y.name !== "default" ? (i(), r("h3", ln, [
-            l("div", {
+            d("div", {
               onClick: (x) => u.value = y.name,
               style: { cursor: "pointer" }
-            }, j(y.name), 9, dn),
-            w(y.nodeTypes).length < Object.values(y.nodeTypes).length ? (i(), r("div", un, " ( " + j(w(y.nodeTypes).length) + " / " + j(Object.values(y.nodeTypes).length) + " ) ", 1)) : I("", !0)
+            }, j(y.name), 9, un),
+            w(y.nodeTypes).length < Object.values(y.nodeTypes).length ? (i(), r("div", cn, " ( " + j(w(y.nodeTypes).length) + " / " + j(Object.values(y.nodeTypes).length) + " ) ", 1)) : I("", !0)
           ])) : I("", !0),
-          (i(!0), r(T, null, D(w(y.nodeTypes), (x) => (i(), O(Ie, {
+          (i(!0), r(T, null, H(w(y.nodeTypes), (x) => (i(), O(Ne, {
             key: x.type,
             type: x.type,
             title: x.title,
@@ -1568,14 +1569,14 @@ const Ie = /* @__PURE__ */ $(tn, [["render", an]]), rn = {
           }, null, 8, ["type", "title", "onPointerdown"]))), 128))
         ]))), 128))
       ], 34),
-      z(mt, { name: "fade" }, {
+      z(gt, { name: "fade" }, {
         default: F(() => [
           v.value ? (i(), r("div", {
             key: 0,
             class: "baklava-dragged-node",
-            style: re(V.value)
+            style: re(S.value)
           }, [
-            z(Ie, {
+            z(Ne, {
               type: v.value.type,
               title: v.value.nodeInformation.title
             }, null, 8, ["type", "title"])
@@ -1585,28 +1586,28 @@ const Ie = /* @__PURE__ */ $(tn, [["render", an]]), rn = {
       })
     ], 64));
   }
-}), zn = /* @__PURE__ */ U({
+}), jn = /* @__PURE__ */ U({
   __name: "CodeGraphEditor",
   props: {
     viewModel: {}
   },
   setup(s) {
-    const t = Te(s, "viewModel"), n = (o) => o.events.update.emit(null);
+    const t = Ee(s, "viewModel"), n = (o) => o.events.update.emit(null);
     return ie(() => {
       t.value.subscribe(), t.value.engine.start();
-    }), ft(() => {
+    }), bt(() => {
       t.value.unsubscribe(), t.value.engine.stop();
-    }), (o, a) => (i(), O(_(it), { "view-model": t.value }, {
+    }), (o, a) => (i(), O(_(dt), { "view-model": t.value }, {
       palette: F(() => [
-        z(cn)
+        z(pn)
       ]),
-      node: F((d) => [
-        z(Hs, yt(d, {
-          onUpdate: (u) => n(d.node)
+      node: F((l) => [
+        z(As, kt(l, {
+          onUpdate: (u) => n(l.node)
         }), null, 16, ["onUpdate"])
       ]),
-      sidebar: F((d) => [
-        z(en, gt(bt(d)), {
+      sidebar: F((l) => [
+        z(tn, yt(_t(l)), {
           codeEditor: F(({ node: u }) => [
             W(o.$slots, "sidebarCodeEditor", { node: u })
           ]),
@@ -1616,7 +1617,43 @@ const Ie = /* @__PURE__ */ $(tn, [["render", an]]), rn = {
       _: 3
     }, 8, ["view-model"]));
   }
-}), pn = (s) => {
+});
+function Ln(s) {
+  const e = lt(s?.existingEditor);
+  e.code = s?.code ? new s.code(e) : new Lt(e), hn(e);
+  const t = {};
+  return Object.keys(Q).forEach((n) => {
+    t[n] = typeof Q[n] == "object" ? { ...e.settings[n], ...Q[n] } : Q[n];
+  }), e.settings = D({ ...e.settings, ...t }), e.settings.nodes.defaultWidth = 350, e.state = D({
+    modules: {},
+    token: null
+  }), e.init = () => {
+    e.unsubscribe(), e.engine = new ut(e.editor);
+  }, e.subscribe = () => {
+    e.state.token && e.unsubscribe();
+    const n = Symbol(), o = e.displayedGraph;
+    o.events.addNode.subscribe(n, (a) => {
+      a.code = e.code;
+    }), o.events.addConnection.subscribe(n, (a) => {
+      e.code.findNodeById(a.to.nodeId)?.onConnected(), e.code.findNodeById(a.from.nodeId)?.onConnected();
+    }), o.events.removeConnection.subscribe(n, (a) => {
+      e.code.findNodeById(a.to.nodeId)?.onUnconnected(), e.code.findNodeById(a.from.nodeId)?.onUnconnected();
+    }), e.engine.events.beforeRun.subscribe(n, () => {
+      e.engine.pause(), e.code && (e.code.updateCodeNodes(), e.code.sortNodes(), e.code.updateCodeTemplates(), e.code.resetInputInterfaceScript()), e.engine.resume();
+    }), e.engine.events.beforeNodeCalculation.subscribe(n, (a) => {
+      e.engine.pause();
+      const l = a.node;
+      l.isCodeNode && (l.updateOutputNames(), l.updateConnectedInputInterfaces()), e.engine.resume();
+    }), e.engine.events.afterRun.subscribe(n, (a) => {
+      e.engine.pause(), ct(a, e.editor), e.code && (e.code.renderNodeCodes(), e.code.renderCode()), e.engine.resume();
+    }), e.state.token = n;
+  }, e.unsubscribe = () => {
+    if (!e.state.token) return;
+    const n = e.state.token;
+    e.displayedGraph.events.addNode.unsubscribe(n), e.displayedGraph.events.addConnection.unsubscribe(n), e.engine.events.beforeRun.unsubscribe(n), e.engine.events.afterRun.unsubscribe(n), e.state.token = null;
+  }, e;
+}
+const hn = (s) => {
   const e = "TOGGLE_PALETTE";
   s.commandHandler.registerCommand(e, {
     execute: () => s.settings.palette.enabled = !s.settings.palette.enabled,
@@ -1636,9 +1673,9 @@ const Ie = /* @__PURE__ */ $(tn, [["render", an]]), rn = {
       command: e,
       title: "Toggle palette",
       // Tooltip text
-      icon: b(() => s.settings.palette.enabled ? Yt : es)
+      icon: b(() => s.settings.palette.enabled ? Qt : ts)
     },
-    ...rt,
+    ...pt,
     {
       command: t,
       title: "Clear all",
@@ -1649,7 +1686,7 @@ const Ie = /* @__PURE__ */ $(tn, [["render", an]]), rn = {
       command: n,
       title: "Toggle minimap",
       // Tooltip text
-      icon: b(() => s.settings.enableMinimap ? xs : _s)
+      icon: b(() => s.settings.enableMinimap ? Is : ks)
     }
   ];
 }, Q = {
@@ -1667,92 +1704,57 @@ const Ie = /* @__PURE__ */ $(tn, [["render", an]]), rn = {
   },
   displayValueOnHover: !1
 };
-function jn(s) {
-  const e = lt(s?.existingEditor);
-  e.code = s?.code ? new s.code(e) : new jt(e), pn(e);
-  const t = {};
-  return Object.keys(Q).forEach((n) => {
-    t[n] = typeof Q[n] == "object" ? { ...e.settings[n], ...Q[n] } : Q[n];
-  }), e.settings = P({ ...e.settings, ...t }), e.settings.nodes.defaultWidth = 350, e.state = P({
-    modules: {},
-    token: null
-  }), e.init = () => {
-    e.unsubscribe(), e.engine = new dt(e.editor);
-  }, e.subscribe = () => {
-    e.state.token && e.unsubscribe();
-    const n = Symbol(), o = e.displayedGraph;
-    o.events.addNode.subscribe(n, (a) => {
-      a.code = e.code;
-    }), o.events.addConnection.subscribe(n, (a) => {
-      e.code.findNodeById(a.to.nodeId)?.onConnected(), e.code.findNodeById(a.from.nodeId)?.onConnected();
-    }), o.events.removeConnection.subscribe(n, (a) => {
-      e.code.findNodeById(a.to.nodeId)?.onUnconnected(), e.code.findNodeById(a.from.nodeId)?.onUnconnected();
-    }), e.engine.events.beforeRun.subscribe(n, () => {
-      e.engine.pause(), e.code && (e.code.updateCodeNodes(), e.code.sortNodes(), e.code.updateCodeTemplates(), e.code.resetInputInterfaceScript()), e.engine.resume();
-    }), e.engine.events.beforeNodeCalculation.subscribe(n, (a) => {
-      e.engine.pause();
-      const d = a.node;
-      d.isCodeNode && (d.updateOutputNames(), d.updateConnectedInputInterfaces()), e.engine.resume();
-    }), e.engine.events.afterRun.subscribe(n, (a) => {
-      e.engine.pause(), ut(a, e.editor), e.code && (e.code.renderNodeCodes(), e.code.renderCode()), e.engine.resume();
-    }), e.state.token = n;
-  }, e.unsubscribe = () => {
-    if (!e.state.token) return;
-    const n = e.state.token;
-    e.displayedGraph.events.addNode.unsubscribe(n), e.displayedGraph.events.addConnection.unsubscribe(n), e.engine.events.beforeRun.unsubscribe(n), e.engine.events.afterRun.unsubscribe(n), e.state.token = null;
-  }, e;
-}
 export {
-  wt as AbstractCodeNode,
-  kn as CheckboxInterface,
-  jt as Code,
-  zn as CodeGraphEditor,
-  Ee as CodeNode,
+  xt as AbstractCodeNode,
+  Cn as CheckboxInterface,
+  Lt as Code,
+  jn as CodeGraphEditor,
+  Se as CodeNode,
   Y as CodeNodeInputInterface,
-  H as CodeNodeInterface,
-  le as CodeNodeInterfaceComponent,
-  $t as CodeNodeOutputInterface,
-  Dt as CodeVariable,
+  P as CodeNodeInterface,
+  de as CodeNodeInterfaceComponent,
+  Ot as CodeNodeOutputInterface,
+  Pt as CodeVariable,
   Q as DEFAULT_SETTINGS,
-  Wt as DotsVertical,
-  zt as DynamicCodeNode,
-  Cn as IntegerInterface,
-  Yt as LayoutSidebarLeftCollapse,
-  es as LayoutSidebarLeftExpand,
-  os as LayoutSidebarRight,
+  Xt as DotsVertical,
+  jt as DynamicCodeNode,
+  wn as IntegerInterface,
+  Qt as LayoutSidebarLeftCollapse,
+  ts as LayoutSidebarLeftExpand,
+  as as LayoutSidebarRight,
   ls as LayoutSidebarRightCollapse,
-  ps as LayoutSidebarRightExpand,
-  wn as ListInputInterface,
-  fs as LockCode,
-  xn as NumberInterface,
-  _s as Schema,
-  xs as SchemaOff,
-  In as SelectInterface,
-  Nn as SliderInterface,
-  Mn as TextInputInterface,
-  St as TextInputInterfaceComponent,
-  $n as TextareaInputInterface,
-  $s as TransitionBottom,
+  hs as LayoutSidebarRightExpand,
+  xn as ListInputInterface,
+  gs as LockCode,
+  In as NumberInterface,
+  ks as Schema,
+  Is as SchemaOff,
+  Nn as SelectInterface,
+  Mn as SliderInterface,
+  $n as TextInputInterface,
+  zt as TextInputInterfaceComponent,
+  On as TextareaInputInterface,
+  Os as TransitionBottom,
   Vs as TrashOff,
-  On as TupleInputInterface,
-  _n as addDefaultInterfaceTypes,
-  pn as addToolbarCommands,
+  Tn as TupleInputInterface,
+  kn as addDefaultInterfaceTypes,
+  hn as addToolbarCommands,
   Be as booleanType,
-  Tn as defineCodeNode,
-  En as defineDynamicCodeNode,
-  Mt as dictType,
-  xt as formatInputs,
+  En as defineCodeNode,
+  Sn as defineDynamicCodeNode,
+  $t as dictType,
+  It as formatInputs,
   oe as getCodeNodes,
   Vn as getPositionAtColumn,
   Bn as getPositionBeforeNode,
-  Se as listType,
+  ze as listType,
   Ve as loadNodeState,
   X as nodeType,
-  de as numberType,
-  It as saveNodeState,
-  yn as setOptional,
+  le as numberType,
+  Nt as saveNodeState,
+  _n as setOptional,
   ue as stringType,
-  Sn as transferCodeScript,
-  ze as tupleType,
-  jn as useCodeGraph
+  zn as transferCodeScript,
+  je as tupleType,
+  Ln as useCodeGraph
 };