@babsey/code-graph 0.1.5 → 0.1.6

package/dist/code-graph.js

@@ -1,10 +1,10 @@
-import Z from "mustache";
-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 ee from "mustache";
+import Ye from "toposort";
+import { AbstractNode as qe, sortTopologically as Me, NodeInterface as Je, displayInSidebar as $e, NodeInterfaceType as G, BaklavaInterfaceTypes as Qe, CheckboxInterfaceComponent as Ke, setType as V, IntegerInterfaceComponent as Ze, TextInputInterfaceComponent as Oe, NumberInterfaceComponent as et, SelectInterfaceComponent as tt, SliderInterfaceComponent as st, TextareaInputInterfaceComponent as nt, allowMultipleConnections as K, IntegerInterface as ot, TextInputInterface as at, Commands as Z, useViewModel as Y, useTemporaryConnection as it, Components as ke, useGraph as ie, GRAPH_NODE_TYPE_PREFIX as ne, useTransform as rt, useNodeCategories as dt, BaklavaEditor as lt, useBaklava as ut, DependencyEngine as ct, applyResult as pt, DEFAULT_TOOLBAR_COMMANDS as ht } from "baklavajs";
+import { reactive as A, defineComponent as U, createElementBlock as r, openBlock as i, toDisplayString as j, markRaw as T, computed as b, createElementVNode as d, withDirectives as te, vModelText as se, ref as B, onMounted as re, onUpdated as Ee, normalizeClass as R, createCommentVNode as I, unref as _, renderSlot as W, createStaticVNode as q, onBeforeUnmount as vt, normalizeStyle as de, withModifiers as P, createBlock as O, Fragment as E, createTextVNode as mt, createVNode as z, withKeys as oe, renderList as D, nextTick as ft, toRef as Te, resolveDynamicComponent as we, inject as gt, Transition as bt, withCtx as F, onUnmounted as yt, normalizeProps as _t, guardReactiveProps as Ct, mergeProps as kt } from "vue";
+import { v4 as Se } from "uuid";
 import { usePointer as wt } from "@vueuse/core";
-Z.escape = (s) => s;
+ee.escape = (s) => s;
 class xt extends qe {
   state;
   code;
@@ -14,7 +14,7 @@ class xt extends qe {
   inputs = {};
   outputs = {};
   constructor() {
-    super(), this.initializeIo(), this.width = 400, this.twoColumn = !0, this.state = D({
+    super(), this.initializeIo(), this.width = 400, this.twoColumn = !0, this.state = A({
       codeTemplate: "",
       hidden: !1,
       integrated: !1,
@@ -143,7 +143,7 @@ class xt extends qe {
         if (n === "_node") return;
         const o = this.outputs[n];
         o && o.state && (t[n] = o.getValue());
-      }), this.state.script = Z.render(this.state.codeTemplate, { inputs: e, outputs: t });
+      }), this.state.script = ee.render(this.state.codeTemplate, { inputs: e, outputs: t });
     }
     this.outputs.out && (this.outputs.out.state.script = this.script);
   }
@@ -176,7 +176,7 @@ class xt extends qe {
     this.state.props = e;
   }
 }
-class Se extends xt {
+class Be extends xt {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -228,7 +228,7 @@ const It = (s, e = !0) => {
   }), Object.entries(e.outputs).forEach(([o, a]) => {
     o !== "_node" && n.outputs[o] && (a.hidden = n.outputs[o].hidden);
   });
-}, Mt = ["title"], de = /* @__PURE__ */ U({
+}, Mt = ["title"], le = /* @__PURE__ */ U({
   __name: "CodeNodeInterface",
   props: {
     intf: {}
@@ -239,13 +239,13 @@ const It = (s, e = !0) => {
     }, j(s.intf.name), 9, Mt));
   }
 });
-class P extends Je {
+class H extends Je {
   isCodeNode = !0;
   code;
   state;
   type = null;
   constructor(e, t) {
-    super(e, t), this.setComponent(E(de)), this.state = D({
+    super(e, t), this.setComponent(T(le)), this.state = A({
       optional: !1,
       script: ""
     });
@@ -268,9 +268,9 @@ class P extends Je {
 const _n = (s, e) => {
   s.state.optional = e, s.setHidden(e);
 };
-class Y extends P {
+class J extends H {
   constructor(e = "", t) {
-    super(e, t), this.setComponent(E(de)), this.use($e, !0);
+    super(e, t), this.setComponent(T(le)), this.use($e, !0);
   }
   set script(e) {
     if (this.state.script && this.allowMultipleConnections) {
@@ -286,64 +286,64 @@ class Y extends P {
     super.value = e, this.name !== "_node" && this.setHidden(!1);
   }
 }
-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);
+const ze = new G("boolean"), $t = new G("dict"), je = new G("list"), X = new G("node"), ue = new G("number"), ce = new G("string"), Le = new G("tuple"), Cn = (s) => {
+  new Qe(s.editor, { viewPlugin: s }).addTypes(ze, $t, je, X, ue, ce, Le);
 };
-class Cn extends Y {
+class kn extends J {
   constructor(e, t) {
-    super(e, t), this.setComponent(E(Qe)), this.use(B, Be);
+    super(e, t), this.setComponent(T(Ke)), this.use(V, ze);
   }
   getValue = () => this.value ? "True" : "False";
 }
-class Ot extends P {
+class Ot extends H {
   isCodeNodeOutput = !0;
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(E(de));
+    super(e, t), this.setComponent(T(le));
   }
   get script() {
     return this.name ? this.name : this.state.script;
   }
 }
-class ce extends Y {
+class pe extends J {
   min;
   max;
   constructor(e, t, n, o) {
-    super(e, t), this.min = n, this.max = o, this.use(B, le);
+    super(e, t), this.min = n, this.max = o, this.use(V, ue);
   }
   validate(e) {
     return (this.min === void 0 || e >= this.min) && (this.max === void 0 || e <= this.max);
   }
 }
-class wn extends ce {
-  component = E(Ke);
+class wn extends pe {
+  component = T(Ze);
   validate(e) {
     return Number.isInteger(e) && super.validate(e);
   }
 }
-class xn extends Y {
+class xn extends J {
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(E(Oe)), this.use(B, ze);
+    super(e, t), this.setComponent(T(Oe)), this.use(V, je);
   }
   getValue = () => `[${this.value}]`;
 }
-class In extends ce {
-  component = E(Ze);
+class In extends pe {
+  component = T(et);
 }
-class pe extends Y {
+class he extends J {
   constructor(e, t) {
-    super(e, t), this.use(B, ue);
+    super(e, t), this.use(V, ce);
   }
   getValue = () => `"${this.value}"`;
 }
-class Nn extends pe {
-  component = E(et);
+class Nn extends he {
+  component = T(tt);
   items;
   constructor(e, t, n) {
     super(e, t), this.items = n;
   }
 }
-class Mn extends ce {
-  component = E(tt);
+class Mn extends pe {
+  component = T(st);
   min;
   max;
   constructor(e, t, n, o) {
@@ -351,7 +351,7 @@ class Mn extends ce {
   }
   getValue = () => `${Math.round(this.value * 1e3) / 1e3}`;
 }
-const Tt = U({
+const Et = U({
   props: {
     intf: {
       type: Object,
@@ -376,46 +376,46 @@ const Tt = U({
   for (const [n, o] of e)
     t[n] = o;
   return t;
-}, 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", Et, [
+}, Tt = { style: { position: "relative" } }, St = { style: { "font-size": "12px", padding: "0 6px", position: "absolute", top: "-8px", "background-color": "var(--baklava-node-color-background)" } }, Bt = ["placeholder", "title"];
+function Vt(s, e, t, n, o, a) {
+  return i(), r("div", Tt, [
     d("label", St, j(s.intf.name), 1),
-    ee(d("input", {
+    te(d("input", {
       "onUpdate:modelValue": e[0] || (e[0] = (l) => s.v = l),
       type: "text",
       class: "baklava-input",
       placeholder: s.intf.name,
       title: s.intf.name
-    }, null, 8, Vt), [
-      [te, s.v]
+    }, null, 8, Bt), [
+      [se, s.v]
     ])
   ]);
 }
-const zt = /* @__PURE__ */ $(Tt, [["render", Bt]]);
-class $n extends pe {
-  component = E(zt);
+const zt = /* @__PURE__ */ $(Et, [["render", Vt]]);
+class $n extends he {
+  component = T(zt);
 }
-class On extends pe {
-  component = E(st);
+class On extends he {
+  component = T(nt);
 }
-class Tn extends Y {
+class En extends J {
   constructor(e = "", t = "") {
-    super(e, t), this.setComponent(E(Oe)), this.use(B, je);
+    super(e, t), this.setComponent(T(Oe)), this.use(V, Le);
   }
   getValue = () => `(${this.value})`;
 }
-function En(s) {
-  return class extends Se {
+function Tn(s) {
+  return class extends Be {
     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 P("", []).use(B, X).use(K).setHidden(!0)
+        new H("", []).use(V, X).use(K).setHidden(!0)
       ), this.addOutput(
         "_node",
-        new P("", []).use(B, X).use(K).setHidden(!0)
+        new H("", []).use(V, X).use(K).setHidden(!0)
       ), this.executeFactory("input", s.inputs), this.executeFactory("output", s.outputs), s.onCreate?.call(this);
     }
     // public calculate = definition.calculate
@@ -447,7 +447,7 @@ function En(s) {
     }
   };
 }
-class jt extends Se {
+class jt extends Be {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -469,10 +469,10 @@ function Sn(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 P("", []).use(B, X).use(K).setHidden(!0)
+        new H("", []).use(V, X).use(K).setHidden(!0)
       ), this.addOutput(
         "_node",
-        new P("", []).use(B, X).use(K).setHidden(!0)
+        new H("", []).use(V, X).use(K).setHidden(!0)
       ), this.staticInputKeys.push("_node"), this.staticOutputKeys.push("_node"), this.executeFactory("input", s.inputs), this.executeFactory("output", s.outputs), s.onCreate?.call(this);
     }
     onPlaced() {
@@ -504,7 +504,7 @@ function Sn(s) {
           if (!this.inputs[t]) {
             const n = e.inputs[t].value;
             let 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);
+            typeof n == "number" ? o = new ot(t, n).use(V, ue) : o = new at(t, JSON.stringify(n)).use(V, ce), o.use($e, !0), this.addInput(t, o);
           }
           this.inputs[t] && (this.inputs[t].load(e.inputs[t]), this.inputs[t].nodeId = this.id);
         }
@@ -551,13 +551,13 @@ function Sn(s) {
     }
   };
 }
-Z.escape = (s) => s;
+ee.escape = (s) => s;
 class Lt {
   _id;
   _viewModel;
   _state;
   constructor(e) {
-    this._id = Ct(), this._viewModel = e, this._state = D({
+    this._id = Se(), this._viewModel = e, this._state = A({
       autosort: !1,
       lockCode: !1,
       modules: {},
@@ -567,7 +567,7 @@ class Lt {
     });
   }
   get codeNodes() {
-    return oe(this.graph);
+    return ae(this.graph);
   }
   get connections() {
     return this.graph.connections;
@@ -609,7 +609,7 @@ class Lt {
     this.state.script = e, this.viewModel.engine.runOnce(null);
   }
   get scriptedCodeNodes() {
-    return oe(this.graph).filter(
+    return ae(this.graph).filter(
       (e) => !e.state?.integrated
     );
   }
@@ -653,7 +653,7 @@ class Lt {
    * Clear code graph.
    */
   clear() {
-    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);
+    this.state.modules = {}, this.nodes = [], this.connections = [], this.state.script = "", this.viewModel.commandHandler.executeCommand(Z.CLEAR_CLIPBOARD_COMMAND), this.viewModel.commandHandler.executeCommand(Z.CLEAR_HISTORY_COMMAND), this.viewModel.engine && this.viewModel.engine.runOnce(null);
   }
   findNodeById(e) {
     return this.graph.findNodeById(e);
@@ -712,7 +712,7 @@ class Lt {
    * Render code.
    */
   renderCode() {
-    this.state.lockCode || (this.state.script = Z.render(this.state.template || "", this));
+    this.state.lockCode || (this.state.script = ee.render(this.state.template || "", this));
   }
   /**
    * Reset scripts of intput interfaces.
@@ -754,7 +754,7 @@ class Lt {
           a.from.nodeId
         ]);
         let t = [...this.nodeIds];
-        t.reverse(), t = Xe.array(t, e), t.reverse();
+        t.reverse(), t = Ye.array(t, e), t.reverse();
         const n = this.graph.nodes.map((a) => a.id).filter((a) => !t.includes(a));
         t = t.concat(n);
         const o = t.map((a) => this.findNodeById(a));
@@ -776,15 +776,15 @@ class Lt {
     this.codeNodes.forEach((e) => e.updateCodeTemplate());
   }
 }
-const oe = (s) => {
+const ae = (s) => {
   let e = [];
   return s.nodes.forEach((t) => {
-    t.subgraph ? e = e.concat(oe(t.subgraph)) : t.isCodeNode && e.push(t);
+    t.subgraph ? e = e.concat(ae(t.subgraph)) : t.isCodeNode && e.push(t);
   }), e;
-}, Vn = (s = 0, e = 100) => ({
+}, Bn = (s = 0, e = 100) => ({
   x: s * 420,
   y: e
-}), Bn = (s) => {
+}), Vn = (s) => {
   const e = { ...s.position };
   return e.x -= 440, e.y += 50, e;
 }, zn = (s) => {
@@ -796,40 +796,40 @@ const oe = (s) => {
       a.to.state && a.from.script && (a.to.state.script = a.from.script);
     });
   });
-}, Ut = ["id"], Gt = { class: "align-middle" }, xe = /* @__PURE__ */ U({
+}, Ut = ["id"], Rt = { class: "align-middle" }, xe = /* @__PURE__ */ U({
   __name: "CodeGraphNodeInterface",
   props: {
     node: {},
     intf: {}
   },
   setup(s) {
-    const e = s, { viewModel: t } = q(), { hoveredOver: n, temporaryConnection: o } = at(), a = V(null), l = b(() => e.intf.connectionCount > 0), u = b(() => ({
+    const e = s, { viewModel: t } = Y(), { hoveredOver: n, temporaryConnection: o } = it(), a = B(null), l = b(() => e.intf.connectionCount > 0), u = b(() => ({
       "--connected": l.value
     })), v = () => {
       n(e.intf);
-    }, k = () => {
+    }, C = () => {
       n(void 0);
     }, w = () => {
       a.value && t.value.hooks.renderInterface.execute({ intf: e.intf, el: a.value });
     };
-    return ie(w), Te(w), (S, L) => (i(), r("div", {
+    return re(w), Ee(w), (S, L) => (i(), r("div", {
       id: s.intf.id,
       ref_key: "el",
       ref: a,
-      class: G(["baklava-node-interface", u.value])
+      class: R(["baklava-node-interface", u.value])
     }, [
       s.intf.port ? (i(), r("div", {
         key: 0,
-        class: G(["__port", { "--selected": _(o)?.from === s.intf }]),
+        class: R(["__port", { "--selected": _(o)?.from === s.intf }]),
         onPointerover: v,
-        onPointerout: k
+        onPointerout: C
       }, null, 34)) : I("", !0),
-      d("span", Gt, [
+      d("span", Rt, [
         W(S.$slots, "default")
       ])
     ], 10, Ut));
   }
-}), Rt = {}, Dt = {
+}), Gt = {}, At = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -841,8 +841,8 @@ const oe = (s) => {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-code-variable"
 };
-function Ht(s, e) {
-  return i(), r("svg", Dt, [...e[0] || (e[0] = [
+function Dt(s, e) {
+  return i(), r("svg", At, [...e[0] || (e[0] = [
     d("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -851,7 +851,7 @@ function Ht(s, e) {
     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 Pt = /* @__PURE__ */ $(Rt, [["render", Ht]]), At = {}, Ft = {
+const Ht = /* @__PURE__ */ $(Gt, [["render", Dt]]), Pt = {}, Ft = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -875,7 +875,7 @@ function Wt(s, e) {
     d("path", { d: "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
   ])]);
 }
-const Xt = /* @__PURE__ */ $(At, [["render", Wt]]), qt = {}, Jt = {
+const Xt = /* @__PURE__ */ $(Pt, [["render", Wt]]), Yt = {}, qt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -883,8 +883,8 @@ const Xt = /* @__PURE__ */ $(At, [["render", Wt]]), qt = {}, Jt = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"
 };
-function Yt(s, e) {
-  return i(), r("svg", Jt, [...e[0] || (e[0] = [
+function Jt(s, e) {
+  return i(), r("svg", qt, [...e[0] || (e[0] = [
     d("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -893,7 +893,7 @@ function Yt(s, e) {
     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 Qt = /* @__PURE__ */ $(qt, [["render", Yt]]), Kt = {}, Zt = {
+const Qt = /* @__PURE__ */ $(Yt, [["render", Jt]]), Kt = {}, Zt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -979,7 +979,7 @@ const hs = /* @__PURE__ */ $(us, [["render", ps]]), vs = {}, ms = {
 };
 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)
+    q('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2"></path><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M8 11v-4a4 4 0 1 1 8 0v4"></path><path d="M20 21l2 -2l-2 -2"></path><path d="M17 17l-2 2l2 2"></path>', 6)
   ])]);
 }
 const gs = /* @__PURE__ */ $(vs, [["render", fs]]), bs = {}, ys = {
@@ -996,10 +996,10 @@ const gs = /* @__PURE__ */ $(vs, [["render", fs]]), bs = {}, ys = {
 };
 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)
+    q('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 2h5v4h-5z"></path><path d="M15 10h5v4h-5z"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h5"></path><path d="M7.5 6v4"></path><path d="M7.5 14v4"></path>', 8)
   ])]);
 }
-const ks = /* @__PURE__ */ $(bs, [["render", _s]]), Cs = {}, ws = {
+const Cs = /* @__PURE__ */ $(bs, [["render", _s]]), ks = {}, ws = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1013,10 +1013,10 @@ const ks = /* @__PURE__ */ $(bs, [["render", _s]]), Cs = {}, ws = {
 };
 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)
+    q('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 2h4v4m-4 0h-1v-1"></path><path d="M15 11v-1h5v4h-2"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h2"></path><path d="M7.5 7.5v2.5"></path><path d="M7.5 14v4"></path><path d="M3 3l18 18"></path>', 9)
   ])]);
 }
-const Is = /* @__PURE__ */ $(Cs, [["render", xs]]), Ns = {}, Ms = {
+const Is = /* @__PURE__ */ $(ks, [["render", xs]]), Ns = {}, Ms = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1030,10 +1030,10 @@ const Is = /* @__PURE__ */ $(Cs, [["render", xs]]), Ns = {}, Ms = {
 };
 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)
+    q('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M21 18a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3"></path><path d="M3 3m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v0a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path><path d="M12 9v8"></path><path d="M9 14l3 3l3 -3"></path>', 5)
   ])]);
 }
-const Os = /* @__PURE__ */ $(Ns, [["render", $s]]), Ts = {}, Es = {
+const Os = /* @__PURE__ */ $(Ns, [["render", $s]]), Es = {}, Ts = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1046,17 +1046,17 @@ const Os = /* @__PURE__ */ $(Ns, [["render", $s]]), Ts = {}, Es = {
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-trash-off"
 };
 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)
+  return i(), r("svg", Ts, [...e[0] || (e[0] = [
+    q('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 3l18 18"></path><path d="M4 7h3m4 0h9"></path><path d="M10 11l0 6"></path><path d="M14 14l0 3"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l.077 -.923"></path><path d="M18.384 14.373l.616 -7.373"></path><path d="M9 5v-1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>', 8)
   ])]);
 }
-const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"], zs = {
+const Bs = /* @__PURE__ */ $(Es, [["render", Ss]]), Vs = ["id", "data-node-type"], zs = {
   class: "__title-label",
   style: { "flex-grow": "1" }
 }, js = { key: 0 }, Ls = {
   class: "__menu",
   style: { display: "flex" }
-}, Us = { class: "__outputs" }, Gs = { key: 0 }, Rs = ["id", "title"], Ds = { class: "__inputs" }, Hs = { key: 0 }, Ps = ["id", "title"], As = /* @__PURE__ */ U({
+}, Us = { class: "__outputs" }, Rs = { key: 0 }, Gs = ["id", "title"], As = { class: "__inputs" }, Ds = { key: 0 }, Hs = ["id", "title"], Ps = /* @__PURE__ */ U({
   __name: "CodeGraphNode",
   props: {
     node: {},
@@ -1065,15 +1065,15 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
   },
   emits: ["select", "start-drag", "update"],
   setup(s, { emit: e }) {
-    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);
+    const t = ke.ContextMenu, n = ke.NodeInterface, o = s, a = b(() => o.node), l = e, { viewModel: u } = Y(), { graph: v, switchGraph: C } = ie(), w = B(null), S = B(!1), L = B(""), N = B(null), m = B(!1);
     let y = 0, x = 0;
-    const f = V(!1), C = b(() => {
+    const f = B(!1), k = 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;
+      return o.node.type.startsWith(ne) && c.push({ value: "editSubgraph", label: "Edit Subgraph" }), c;
     }), p = b(() => ({
       "--selected": o.selected,
       "--dragging": o.dragging,
@@ -1081,20 +1081,20 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
       "--hidden": a.value.state?.hidden
     })), M = b(() => ({
       "--reverse-y": o.node.reverseY ?? u.value.settings.nodes.reverseY
-    })), Le = b(() => ({
+    })), Ue = 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`
-    })), Ue = b(() => Object.values(o.node.inputs).filter((c) => !c.hidden)), Ge = b(() => Object.values(o.node.outputs).filter((c) => !c.hidden)), he = () => {
+    })), Re = b(() => Object.values(o.node.inputs).filter((c) => !c.hidden)), Ge = b(() => Object.values(o.node.outputs).filter((c) => !c.hidden)), ve = () => {
       l("select");
-    }, Re = (c) => {
-      o.selected || he(), l("start-drag", c);
-    }, ve = () => {
+    }, Ae = (c) => {
+      o.selected || ve(), l("start-drag", c);
+    }, me = () => {
       f.value = !0;
     }, De = () => {
       const c = u.value.displayedGraph.sidebar;
       c.nodeId = "", c.visible = !1;
-    }, me = () => {
+    }, fe = () => {
       const c = u.value.displayedGraph.sidebar;
       c.nodeId = o.node.id, c.visible = !0;
     }, He = () => {
@@ -1103,55 +1103,55 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
     }, Pe = async (c) => {
       switch (c) {
         case "edit":
-          me();
+          fe();
           break;
         case "delete":
           v.value.removeNode(o.node);
           break;
         case "rename":
-          L.value = o.node.title, S.value = !0, await mt(), N.value?.focus();
+          L.value = o.node.title, S.value = !0, await ft(), N.value?.focus();
           break;
         case "editSubgraph":
-          k(o.node.template);
+          C(o.node.template);
           break;
       }
-    }, fe = () => {
-      a.value.title = L.value, S.value = !1;
     }, ge = () => {
+      a.value.title = L.value, S.value = !1;
+    }, be = () => {
       w.value && u.value.hooks.renderNode.execute({ node: o.node, el: w.value });
-    }, Ae = (c) => {
+    }, Fe = (c) => {
       m.value = !0, y = o.node.width, x = c.clientX, c.preventDefault();
-    }, be = (c) => {
-      a.value.state && (a.value.state.integrated = c, l("update"));
     }, ye = (c) => {
+      a.value.state && (a.value.state.integrated = c, l("update"));
+    }, _e = (c) => {
       if (!m.value) return;
-      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 = () => {
+      const g = c.clientX - x, h = y + g / v.value.scaling, We = u.value.settings.nodes.minWidth, Xe = u.value.settings.nodes.maxWidth;
+      a.value.width = Math.max(We, Math.min(Xe, h));
+    }, Ce = () => {
       m.value = !1;
     };
-    return ie(() => {
-      ge(), window.addEventListener("mousemove", ye), window.addEventListener("mouseup", _e);
-    }), Te(ge), ht(() => {
-      window.removeEventListener("mousemove", ye), window.removeEventListener("mouseup", _e);
+    return re(() => {
+      be(), window.addEventListener("mousemove", _e), window.addEventListener("mouseup", Ce);
+    }), Ee(be), vt(() => {
+      window.removeEventListener("mousemove", _e), window.removeEventListener("mouseup", Ce);
     }), (c, g) => (i(), r("div", {
       id: a.value.id,
       ref_key: "el",
       ref: w,
-      class: G([p.value, "baklava-node"]),
+      class: R([p.value, "baklava-node"]),
       "data-node-type": a.value.type,
-      style: re(Le.value),
-      onPointerdown: he
+      style: de(Ue.value),
+      onPointerdown: ve
     }, [
       _(u).settings.nodes.resizable ? (i(), r("div", {
         key: 0,
         class: "__resize-handle",
-        onMousedown: Ae
+        onMousedown: Fe
       }, null, 32)) : I("", !0),
       d("div", {
         class: "__title",
-        onPointerdown: A(Re, ["self", "stop"]),
-        onContextmenu: A(ve, ["prevent"])
+        onPointerdown: P(Ae, ["self", "stop"]),
+        onContextmenu: P(me, ["prevent"])
       }, [
         a.value.inputs._node ? (i(), O(xe, {
           key: 0,
@@ -1161,7 +1161,7 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
           "data-interface-type": "node",
           style: { "flex-grow": "0" }
         }, null, 8, ["node", "intf"])) : I("", !0),
-        S.value ? ee((i(), r("input", {
+        S.value ? te((i(), r("input", {
           key: 2,
           ref_key: "renameInputEl",
           ref: N,
@@ -1170,35 +1170,35 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
           placeholder: "Node Name",
           style: { "flex-grow": "1" },
           type: "text",
-          onBlur: fe,
-          onKeydown: ne(fe, ["enter"])
+          onBlur: ge,
+          onKeydown: oe(ge, ["enter"])
         }, null, 544)), [
-          [te, L.value]
-        ]) : (i(), r(T, { key: 1 }, [
+          [se, L.value]
+        ]) : (i(), r(E, { key: 1 }, [
           d("div", zs, [
             a.value.idx > -1 ? (i(), r("span", js, j(a.value.idx + 1) + " - ", 1)) : I("", !0),
-            vt(j(a.value.title), 1)
+            mt(j(a.value.title), 1)
           ]),
           d("div", Ls, [
-            a.value.subgraph ? I("", !0) : (i(), r(T, { key: 0 }, [
+            a.value.subgraph ? I("", !0) : (i(), r(E, { key: 0 }, [
               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(_(Pt), {
+              a.value.state.integrated ? (i(), O(_(Ht), {
                 key: 1,
                 class: "--clickable mx-1",
-                onClick: g[1] || (g[1] = (h) => be(!1))
+                onClick: g[1] || (g[1] = (h) => ye(!1))
               })) : (i(), O(_(Os), {
                 key: 2,
                 class: "--clickable mx-1",
-                onClick: g[2] || (g[2] = (h) => be(!0))
+                onClick: g[2] || (g[2] = (h) => ye(!0))
               })),
               !_(u).displayedGraph.sidebar.visible && _(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), O(_(hs), {
                 key: 3,
                 class: "--clickable mx-1",
-                onClick: me
+                onClick: fe
               })) : _(u).displayedGraph.sidebar.visible && _(u).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), O(_(as), {
                 key: 4,
                 class: "--clickable mx-1",
@@ -1211,14 +1211,14 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
             ], 64)),
             z(_(Xt), {
               class: "--clickable mx-1",
-              onClick: ve
+              onClick: me
             }),
             z(_(t), {
               modelValue: f.value,
               "onUpdate:modelValue": g[3] || (g[3] = (h) => f.value = h),
               x: 0,
               y: 0,
-              items: C.value,
+              items: k.value,
               onClick: Pe
             }, null, 8, ["modelValue", "items"])
           ])
@@ -1232,17 +1232,17 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
         }, null, 8, ["node", "intf"])) : I("", !0)
       ], 32),
       d("div", {
-        class: G(["__content", M.value]),
-        onKeydown: g[5] || (g[5] = ne(A(() => {
+        class: R(["__content", M.value]),
+        onKeydown: g[5] || (g[5] = oe(P(() => {
         }, ["stop"]), ["delete"])),
-        onContextmenu: g[6] || (g[6] = A(() => {
+        onContextmenu: g[6] || (g[6] = P(() => {
         }, ["prevent"]))
       }, [
         d("div", Us, [
-          (i(!0), r(T, null, H(Ge.value, (h) => (i(), r(T, {
+          (i(!0), r(E, null, D(Ge.value, (h) => (i(), r(E, {
             key: h.id
           }, [
-            a.value.state?.hidden ? (i(), r("div", Gs, [
+            a.value.state?.hidden ? (i(), r("div", Rs, [
               h.port ? (i(), r("div", {
                 key: 0,
                 id: h.id,
@@ -1250,7 +1250,7 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
                 class: "baklava-node-interface --output --connected"
               }, [...g[7] || (g[7] = [
                 d("div", { class: "__port" }, null, -1)
-              ])], 8, Rs)) : I("", !0)
+              ])], 8, Gs)) : I("", !0)
             ])) : W(c.$slots, "nodeInterface", {
               key: 1,
               type: "output",
@@ -1265,11 +1265,11 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
             ])
           ], 64))), 128))
         ]),
-        d("div", Ds, [
-          (i(!0), r(T, null, H(Ue.value, (h) => (i(), r(T, {
+        d("div", As, [
+          (i(!0), r(E, null, D(Re.value, (h) => (i(), r(E, {
             key: h.id
           }, [
-            a.value.state?.hidden ? (i(), r("div", Hs, [
+            a.value.state?.hidden ? (i(), r("div", Ds, [
               h.port ? (i(), r("div", {
                 key: 0,
                 id: h.id,
@@ -1277,7 +1277,7 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
                 class: "baklava-node-interface --input --connected"
               }, [...g[8] || (g[8] = [
                 d("div", { class: "__port" }, null, -1)
-              ])], 8, Ps)) : I("", !0)
+              ])], 8, Hs)) : I("", !0)
             ])) : W(c.$slots, "nodeInterface", {
               key: 1,
               node: a.value,
@@ -1293,7 +1293,7 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
           ], 64))), 128))
         ])
       ], 34)
-    ], 46, Bs));
+    ], 46, Vs));
   }
 }), Fs = ["title"], Ws = {
   key: 0,
@@ -1310,7 +1310,7 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
   setup(s, { emit: e }) {
     const t = e;
     return (n, o) => (i(), r("div", {
-      class: G(["baklava-checkbox", { "--checked": s.inversed ? !s.modelValue : s.modelValue, "--disabled": s.disabled }]),
+      class: R(["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))
     }, [
@@ -1331,20 +1331,20 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
       s.name ? (i(), r("div", Ws, j(s.name), 1)) : I("", !0)
     ], 10, Fs));
   }
-}), Xs = { class: "__header" }, qs = { class: "__node-name" }, Js = { class: "__interfaces" }, Ys = { class: "__inputs" }, Qs = { style: { display: "flex" } }, Ks = { class: "__outputs" }, Zs = {
+}), Xs = { class: "__header" }, Ys = { class: "__node-name" }, qs = { class: "__interfaces" }, Js = { class: "__inputs" }, Qs = { style: { display: "flex" } }, Ks = { class: "__outputs" }, Zs = {
   key: 0,
   class: "__interface"
 }, en = { style: { display: "flex" } }, tn = /* @__PURE__ */ U({
   __name: "CodeGraphSidebar",
   setup(s) {
-    const { viewModel: e } = q(), { graph: t } = ae(), n = V(null), o = Ee(e.value.settings.sidebar, "width"), a = b(() => e.value.settings.sidebar.resizable);
+    const { viewModel: e } = Y(), { graph: t } = ie(), n = B(null), o = Te(e.value.settings.sidebar, "width"), a = b(() => e.value.settings.sidebar.resizable);
     let l = 0, u = 0;
     const v = b(() => {
       const f = t.value.sidebar.nodeId;
-      return t.value.nodes.find((C) => C.id === f);
-    }), k = b(() => v.value), w = b(() => ({
+      return t.value.nodes.find((k) => k.id === f);
+    }), C = b(() => v.value), w = b(() => ({
       width: `${o.value}px`
-    })), 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 = () => {
+    })), S = b(() => C.value ? Object.values(C.value.inputs).filter((f) => f.displayInSidebar && f.component) : []), L = b(() => C.value ? Object.values(C.value.outputs).filter((f) => f.displayInSidebar && f.component) : []), N = () => {
       t.value.sidebar.visible = !1;
     }, m = () => {
       v.value?.events.update.emit(null);
@@ -1357,13 +1357,13 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
         { once: !0 }
       );
     }, x = (f) => {
-      const C = n.value?.parentElement?.getBoundingClientRect().width ?? 500, p = f.clientX - u;
+      const k = n.value?.parentElement?.getBoundingClientRect().width ?? 500, p = f.clientX - u;
       let M = l - p;
-      M < 300 ? M = 300 : M > 0.9 * C && (M = 0.9 * C), o.value = M;
+      M < 300 ? M = 300 : M > 0.9 * k && (M = 0.9 * k), o.value = M;
     };
-    return (f, C) => (i(), r("div", {
-      class: G([{ "--open": _(t).sidebar.visible }, "baklava-sidebar"]),
-      style: re(w.value),
+    return (f, k) => (i(), r("div", {
+      class: R([{ "--open": _(t).sidebar.visible }, "baklava-sidebar"]),
+      style: de(w.value),
       ref_key: "el",
       ref: n
     }, [
@@ -1372,20 +1372,20 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
         class: "__resizer",
         onMousedown: y
       }, null, 32)) : I("", !0),
-      v.value ? (i(), r(T, { key: 1 }, [
+      v.value ? (i(), r(E, { key: 1 }, [
         d("div", Xs, [
           d("button", {
             tabindex: "-1",
             class: "__close",
             onClick: N
           }, "×"),
-          d("div", qs, [
+          d("div", Ys, [
             d("b", null, j(v.value.title), 1)
           ])
         ]),
-        d("div", Js, [
-          d("div", Ys, [
-            (i(!0), r(T, null, H(S.value, (p) => (i(), r("div", {
+        d("div", qs, [
+          d("div", Js, [
+            (i(!0), r(E, null, D(S.value, (p) => (i(), r("div", {
               key: p.id,
               class: "__interface"
             }, [
@@ -1394,7 +1394,7 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
                   modelValue: p.hidden,
                   "onUpdate:modelValue": [
                     (M) => p.hidden = M,
-                    C[0] || (C[0] = () => v.value?.events.update.emit(null))
+                    k[0] || (k[0] = () => v.value?.events.update.emit(null))
                   ],
                   disabled: !p.optional,
                   inversed: "",
@@ -1411,20 +1411,20 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
             ]))), 128))
           ]),
           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),
+            C.value && C.value.state ? (i(), r("div", Zs, [
+              k[3] || (k[3] = d("label", null, "Variable name", -1)),
+              te(d("input", {
+                "onUpdate:modelValue": k[1] || (k[1] = (p) => C.value.state.variableName = p),
                 type: "text",
                 class: "baklava-input",
                 title: "Variable name",
                 onBlur: m,
-                onKeydown: ne(m, ["enter"])
+                onKeydown: oe(m, ["enter"])
               }, null, 544), [
-                [te, k.value.state.variableName]
+                [se, C.value.state.variableName]
               ])
             ])) : I("", !0),
-            (i(!0), r(T, null, H(L.value, (p) => (i(), r("div", {
+            (i(!0), r(E, null, D(L.value, (p) => (i(), r("div", {
               key: p.id,
               class: "__interface"
             }, [
@@ -1433,7 +1433,7 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
                   modelValue: p.hidden,
                   "onUpdate:modelValue": [
                     (M) => p.hidden = M,
-                    C[2] || (C[2] = () => v.value?.events.update.emit(null))
+                    k[2] || (k[2] = () => v.value?.events.update.emit(null))
                   ],
                   disabled: !p.optional,
                   inversed: "",
@@ -1466,14 +1466,14 @@ const Vs = /* @__PURE__ */ $(Ts, [["render", Ss]]), Bs = ["id", "data-node-type"
     }
   },
   setup(s) {
-    const { viewModel: e } = q(), { switchGraph: t } = ae(), n = V(!1), o = b(() => s.type.startsWith(se));
+    const { viewModel: e } = Y(), { switchGraph: t } = ie(), n = B(!1), o = b(() => s.type.startsWith(ne));
     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((S) => S.id === k);
+      const C = s.type.substring(ne.length), w = e.value.editor.graphTemplates.find((S) => S.id === C);
       if (w)
         switch (v) {
           case "editSubgraph":
@@ -1508,7 +1508,7 @@ const Ne = /* @__PURE__ */ $(sn, [["render", rn]]), dn = {
 }, pn = /* @__PURE__ */ U({
   __name: "CodeNodePalette",
   setup(s) {
-    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(
+    const { viewModel: e } = Y(), { x: t, y: n } = wt(), { transform: o } = rt(), a = dt(e), l = gt("editorEl"), u = B(""), v = B(null), C = () => u.value ? a.value.filter(
       (N) => N.name.toLowerCase().includes(u.value.toLowerCase()) || Object.values(N.nodeTypes).some(
         (m) => m.title.toLowerCase().includes(u.value.toLowerCase())
       )
@@ -1527,31 +1527,31 @@ const Ne = /* @__PURE__ */ $(sn, [["render", rn]]), dn = {
         nodeInformation: m
       };
       const y = () => {
-        const x = D(new m.type());
+        const x = A(new m.type());
         e.value.displayedGraph.addNode(x);
-        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);
+        const f = l.value.getBoundingClientRect(), [k, p] = o(t.value - f.left, n.value - f.top);
+        x.position.x = k, x.position.y = p, v.value = null, document.removeEventListener("pointerup", y);
       };
       document.addEventListener("pointerup", y);
     };
-    return (N, m) => (i(), r(T, null, [
+    return (N, m) => (i(), r(E, null, [
       d("div", {
-        class: G([{ "--open": _(e).settings.palette.enabled }, "baklava-node-palette"]),
-        onContextmenu: m[1] || (m[1] = A(() => {
+        class: R([{ "--open": _(e).settings.palette.enabled }, "baklava-node-palette"]),
+        onContextmenu: m[1] || (m[1] = P(() => {
         }, ["stop", "prevent"]))
       }, [
         d("div", dn, [
-          ee(d("input", {
+          te(d("input", {
             "onUpdate:modelValue": m[0] || (m[0] = (y) => u.value = y),
             type: "text",
             class: "baklava-input",
             title: "Filter nodes",
-            onKeyup: k
+            onKeyup: C
           }, null, 544), [
-            [te, u.value]
+            [se, u.value]
           ])
         ]),
-        (i(!0), r(T, null, H(k(), (y) => (i(), r("section", {
+        (i(!0), r(E, null, D(C(), (y) => (i(), r("section", {
           key: y.name
         }, [
           y.name !== "default" ? (i(), r("h3", ln, [
@@ -1561,7 +1561,7 @@ const Ne = /* @__PURE__ */ $(sn, [["render", rn]]), dn = {
             }, 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, H(w(y.nodeTypes), (x) => (i(), O(Ne, {
+          (i(!0), r(E, null, D(w(y.nodeTypes), (x) => (i(), O(Ne, {
             key: x.type,
             type: x.type,
             title: x.title,
@@ -1569,12 +1569,12 @@ const Ne = /* @__PURE__ */ $(sn, [["render", rn]]), dn = {
           }, null, 8, ["type", "title", "onPointerdown"]))), 128))
         ]))), 128))
       ], 34),
-      z(gt, { name: "fade" }, {
+      z(bt, { name: "fade" }, {
         default: F(() => [
           v.value ? (i(), r("div", {
             key: 0,
             class: "baklava-dragged-node",
-            style: re(S.value)
+            style: de(S.value)
           }, [
             z(Ne, {
               type: v.value.type,
@@ -1592,22 +1592,22 @@ const Ne = /* @__PURE__ */ $(sn, [["render", rn]]), dn = {
     viewModel: {}
   },
   setup(s) {
-    const t = Ee(s, "viewModel"), n = (o) => o.events.update.emit(null);
-    return ie(() => {
+    const t = Te(s, "viewModel"), n = (o) => o.events.update.emit(null);
+    return re(() => {
       t.value.subscribe(), t.value.engine.start();
-    }), bt(() => {
+    }), yt(() => {
       t.value.unsubscribe(), t.value.engine.stop();
-    }), (o, a) => (i(), O(_(dt), { "view-model": t.value }, {
+    }), (o, a) => (i(), O(_(lt), { "view-model": t.value }, {
       palette: F(() => [
         z(pn)
       ]),
       node: F((l) => [
-        z(As, kt(l, {
+        z(Ps, kt(l, {
           onUpdate: (u) => n(l.node)
         }), null, 16, ["onUpdate"])
       ]),
       sidebar: F((l) => [
-        z(tn, yt(_t(l)), {
+        z(tn, _t(Ct(l)), {
           codeEditor: F(({ node: u }) => [
             W(o.$slots, "sidebarCodeEditor", { node: u })
           ]),
@@ -1619,16 +1619,20 @@ const Ne = /* @__PURE__ */ $(sn, [["render", rn]]), dn = {
   }
 });
 function Ln(s) {
-  const e = lt(s?.existingEditor);
+  const e = ut(s?.existingEditor);
   e.code = s?.code ? new s.code(e) : new Lt(e), hn(e);
   const t = {};
   return Object.keys(Q).forEach((n) => {
     t[n] = typeof Q[n] == "object" ? { ...e.settings[n], ...Q[n] } : Q[n];
-  }), e.settings = D({ ...e.settings, ...t }), e.settings.nodes.defaultWidth = 350, e.state = D({
+  }), e.settings = A({ ...e.settings, ...t }), e.settings.nodes.defaultWidth = 350, e.state = A({
     modules: {},
     token: null
   }), e.init = () => {
-    e.unsubscribe(), e.engine = new ut(e.editor);
+    e.unsubscribe(), e.engine = new ct(e.editor);
+  }, e.loadEditor = (n) => {
+    e.engine?.pause(), e.code.clear(), e.editor.load(n), e.commandHandler.executeCommand(Z.CLEAR_CLIPBOARD_COMMAND), e.commandHandler.executeCommand(Z.CLEAR_HISTORY_COMMAND), e.engine?.resume(), e.engine?.runOnce(null);
+  }, e.newGraph = () => {
+    e.engine?.pause(), e.code.clear(), e.editor.graph.id = Se(), e.engine?.resume(), e.engine?.runOnce(null);
   }, e.subscribe = () => {
     e.state.token && e.unsubscribe();
     const n = Symbol(), o = e.displayedGraph;
@@ -1645,7 +1649,7 @@ function Ln(s) {
       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.engine.pause(), pt(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;
@@ -1675,18 +1679,18 @@ const hn = (s) => {
       // Tooltip text
       icon: b(() => s.settings.palette.enabled ? Qt : ts)
     },
-    ...pt,
+    ...ht,
     {
       command: t,
       title: "Clear all",
       // Tooltip text
-      icon: Vs
+      icon: Bs
     },
     {
       command: n,
       title: "Toggle minimap",
       // Tooltip text
-      icon: b(() => s.settings.enableMinimap ? Is : ks)
+      icon: b(() => s.settings.enableMinimap ? Is : Cs)
     }
   ];
 }, Q = {
@@ -1706,15 +1710,15 @@ const hn = (s) => {
 };
 export {
   xt as AbstractCodeNode,
-  Cn as CheckboxInterface,
+  kn as CheckboxInterface,
   Lt as Code,
   jn as CodeGraphEditor,
-  Se as CodeNode,
-  Y as CodeNodeInputInterface,
-  P as CodeNodeInterface,
-  de as CodeNodeInterfaceComponent,
+  Be as CodeNode,
+  J as CodeNodeInputInterface,
+  H as CodeNodeInterface,
+  le as CodeNodeInterfaceComponent,
   Ot as CodeNodeOutputInterface,
-  Pt as CodeVariable,
+  Ht as CodeVariable,
   Q as DEFAULT_SETTINGS,
   Xt as DotsVertical,
   jt as DynamicCodeNode,
@@ -1727,7 +1731,7 @@ export {
   xn as ListInputInterface,
   gs as LockCode,
   In as NumberInterface,
-  ks as Schema,
+  Cs as Schema,
   Is as SchemaOff,
   Nn as SelectInterface,
   Mn as SliderInterface,
@@ -1735,26 +1739,26 @@ export {
   zt as TextInputInterfaceComponent,
   On as TextareaInputInterface,
   Os as TransitionBottom,
-  Vs as TrashOff,
-  Tn as TupleInputInterface,
-  kn as addDefaultInterfaceTypes,
+  Bs as TrashOff,
+  En as TupleInputInterface,
+  Cn as addDefaultInterfaceTypes,
   hn as addToolbarCommands,
-  Be as booleanType,
-  En as defineCodeNode,
+  ze as booleanType,
+  Tn as defineCodeNode,
   Sn as defineDynamicCodeNode,
   $t as dictType,
   It as formatInputs,
-  oe as getCodeNodes,
-  Vn as getPositionAtColumn,
-  Bn as getPositionBeforeNode,
-  ze as listType,
+  ae as getCodeNodes,
+  Bn as getPositionAtColumn,
+  Vn as getPositionBeforeNode,
+  je as listType,
   Ve as loadNodeState,
   X as nodeType,
-  le as numberType,
+  ue as numberType,
   Nt as saveNodeState,
   _n as setOptional,
-  ue as stringType,
+  ce as stringType,
   zn as transferCodeScript,
-  je as tupleType,
+  Le as tupleType,
   Ln as useCodeGraph
 };