@babsey/code-graph 0.4.0 → 0.4.1

package/dist/code-graph.js

@@ -1,19 +1,20 @@
 import ce from "mustache";
 import { reactive as te, defineComponent as F, createElementBlock as b, openBlock as p, toDisplayString as L, markRaw as W, computed as P, createElementVNode as m, withDirectives as ke, vModelText as xe, createStaticVNode as fe, toRef as Me, ref as H, createVNode as G, unref as O, mergeModels as Ue, useModel as xt, resolveComponent as Ze, createCommentVNode as j, onMounted as Se, onBeforeUnmount as et, watch as tt, createBlock as B, withCtx as ee, normalizeProps as It, guardReactiveProps as Nt, renderSlot as q, mergeProps as Et, onUpdated as nt, normalizeStyle as Pe, normalizeClass as ne, withModifiers as le, Fragment as U, createTextVNode as ot, withKeys as Oe, renderList as se, nextTick as Tt, resolveDynamicComponent as De, inject as Ot, Transition as $t, shallowReadonly as Mt } from "vue";
 import { v4 as re } from "uuid";
-import { AbstractNode as St, NodeInterface as J, getGraphNodeTypeString as st, Graph as Pt, GraphTemplate as Gt, GRAPH_NODE_TYPE_PREFIX as At, GRAPH_INPUT_NODE_TYPE as Rt, GRAPH_OUTPUT_NODE_TYPE as jt, Editor as Lt } from "@baklavajs/core";
+import { AbstractNode as St, NodeInterface as J, Graph as Pt, getGraphNodeTypeString as st, GraphTemplate as Gt, GRAPH_NODE_TYPE_PREFIX as At, GRAPH_INPUT_NODE_TYPE as Rt, GRAPH_OUTPUT_NODE_TYPE as jt, Editor as Lt } from "@baklavajs/core";
 import { NodeInterfaceType as ae, BaklavaInterfaceTypes as Vt, setType as V } from "@baklavajs/interface-types";
-import { allowMultipleConnections as de, applyResult as rt, BaseEngine as Bt, sortTopologically as Ht } from "@baklavajs/engine";
+import { allowMultipleConnections as de, BaseEngine as Bt, sortTopologically as Ht, applyResult as rt } from "@baklavajs/engine";
 import { displayInSidebar as at, CheckboxInterfaceComponent as zt, useGraph as Ge, IntegerInterfaceComponent as Ut, TextInputInterfaceComponent as it, NumberInterfaceComponent as Dt, SelectInterfaceComponent as Ft, SliderInterfaceComponent as Wt, TextareaInputInterfaceComponent as Yt, IntegerInterface as Xt, TextInputInterface as Ae, DEFAULT_TOOLBAR_COMMANDS as Kt, Commands as ue, BaklavaEditor as qt, Components as $e, useViewModel as me, useTemporaryConnection as Jt, useTransform as Qt, useNodeCategories as Zt, DEFAULT_SETTINGS as en, useCommandHandler as tn, useHistory as nn, useClipboard as on, registerDeleteNodesCommand as sn, registerSaveSubgraphCommand as rn, registerSwitchToMainGraphCommand as an, registerSidebarCommands as ln, registerZoomToFitCommands as un, setViewNodeProperties as dn } from "@baklavajs/renderer-vue";
 import cn from "toposort";
 import { SequentialHook as Fe } from "@baklavajs/events";
 import { usePointer as pn } from "@vueuse/core";
 ce.escape = (n) => n;
 class lt extends St {
-  state;
+  codeTemplate;
   isCodeNode = !0;
+  mask = null;
   name = "";
-  codeTemplate;
+  state;
   inputs = {};
   outputs = {};
   constructor() {
@@ -133,13 +134,6 @@ class lt extends St {
     }
     return !s || s.length == 0 ? [] : s.map((o) => this.graph.findNodeById(o));
   }
-  /**
-   * Register code
-   * @param code
-   */
-  registerCode(e) {
-    this.code = e;
-  }
   /**
    * Render code of this node.
    */
@@ -534,179 +528,6 @@ function fr(n) {
     }
   };
 }
-const We = "__baklava_SubgraphInputNode", Ye = "__baklava_SubgraphOutputNode";
-class ht extends Re {
-  graphInterfaceId;
-  constructor() {
-    super(), this.graphInterfaceId = re();
-  }
-  onPlaced() {
-    super.onPlaced(), this.initializeIo();
-  }
-  load(e) {
-    super.load(e), this.graphInterfaceId = e.graphInterfaceId;
-  }
-  save() {
-    return {
-      ...super.save(),
-      graphInterfaceId: this.graphInterfaceId
-    };
-  }
-  update() {
-  }
-}
-class ft extends ht {
-  static isGraphInputNode(e) {
-    return e.type === We;
-  }
-  type = We;
-  inputs = {
-    name: new J("Name", "Input")
-  };
-  outputs = {
-    placeholder: new J("Value", void 0)
-  };
-}
-class mt extends ht {
-  static isGraphOutputNode(e) {
-    return e.type === Ye;
-  }
-  type = Ye;
-  inputs = {
-    name: new J("Name", "Output"),
-    placeholder: new J("Value", void 0)
-  };
-  outputs = {
-    output: new J("Output", void 0).setHidden(!0)
-  };
-  calculate = ({ placeholder: e }) => ({
-    output: e
-  });
-}
-const In = [
-  "component",
-  "connectionCount",
-  "events",
-  "hidden",
-  "hooks",
-  "id",
-  "isCodeNode",
-  "isInput",
-  "name",
-  "nodeId",
-  "port",
-  "templateId",
-  "value"
-];
-function Nn(n) {
-  return class extends lt {
-    type = st(n);
-    get title() {
-      return this._title;
-    }
-    set title(t) {
-      this.template.name = t;
-    }
-    inputs = {};
-    outputs = {};
-    template = n;
-    subgraph;
-    update() {
-    }
-    onConnected() {
-    }
-    onUnconnected() {
-    }
-    calculate = async (t, s) => {
-      if (!this.subgraph) throw new Error(`GraphNode ${this.id}: calculate called without subgraph being initialized`);
-      if (!s.engine || typeof s.engine != "object")
-        throw new Error(`GraphNode ${this.id}: calculate called but no engine provided in context`);
-      const o = s.engine.getInputValues(this.subgraph);
-      for (const a of this.subgraph.inputs)
-        o.set(a.nodeInterfaceId, t[a.id]);
-      const r = await s.engine.runGraph(
-        this.subgraph,
-        o,
-        s.globalValues
-      );
-      s.engine.pause(), rt(r, s.engine.editor), s.engine.resume();
-      const i = {};
-      for (const a of this.subgraph.outputs)
-        i[a.id] = r.get(a.nodeId)?.get("output");
-      return i._calculationResults = r, this.lockCode || (i._code = this.renderCode({ inputs: t, ...s.globalValues })), this.updateOutputValues(i), i;
-    };
-    load(t) {
-      if (!this.subgraph) throw new Error("Cannot load a graph node without a graph");
-      if (!this.template) throw new Error("Unable to load graph node without graph template");
-      this.subgraph.load(t.graphState), super.load(t);
-    }
-    save() {
-      if (!this.subgraph) throw new Error("Cannot save a graph node without a graph");
-      return {
-        ...super.save(),
-        graphState: this.subgraph.save()
-      };
-    }
-    onPlaced() {
-      this.template.events.updated.subscribe(this, () => this.initialize()), this.template.events.nameChanged.subscribe(this, (t) => {
-        this._title = t;
-      }), this.initialize();
-    }
-    onDestroy() {
-      this.template.events.updated.unsubscribe(this), this.template.events.nameChanged.unsubscribe(this), this.subgraph?.destroy();
-    }
-    initialize() {
-      this.subgraph && this.subgraph.destroy(), this.subgraph = this.template.createGraph(), this._title = this.template.name, this.updateInterfaces(), this.state.codeTemplate = `{{ #nodes }}{{ script }}
-{{ /nodes }}`, this.events.update.emit(null);
-    }
-    /**
-     * Render code of this node.
-     */
-    renderCode(t) {
-      return this.subgraph ? this.subgraph.renderCode({ nodes: this.subgraph.scriptedCodeNodes }) : ce.render(this.state.codeTemplate, t);
-    }
-    updateInterfaces() {
-      if (!this.subgraph) throw new Error("Trying to update interfaces without graph instance");
-      for (const t of this.subgraph.inputs)
-        t.id in this.inputs ? this.inputs[t.id].name = t.name : this.addInput(t.id, this.createProxyInterface(t, !0));
-      for (const t of Object.keys(this.inputs))
-        this.subgraph.inputs.some((s) => s.id === t) || this.removeInput(t);
-      for (const t of this.subgraph.outputs)
-        t.id in this.outputs ? this.outputs[t.id].name = t.name : this.addOutput(t.id, this.createProxyInterface(t, !1));
-      for (const t of Object.keys(this.outputs))
-        this.subgraph.outputs.some((s) => s.id === t) || this.removeOutput(t);
-      this.addInput(
-        "_code",
-        new D("", []).use(V, X).use(de).setHidden(!0)
-      ), this.addOutput(
-        "_code",
-        new D("", []).use(V, X).use(de).setHidden(!0)
-      ), this.addOutput("_calculationResults", new J("_calculationResults", void 0).setHidden(!0));
-    }
-    /**
-     * When we create a interface in the graph node, we hide certain properties of the interface in the subgraph.
-     * For example, the `type` property or the `allowMultipleConnections` property.
-     * These properties should be proxied to the subgraph interface, so they behave the same as the original interface.
-     */
-    createProxyInterface(t, s) {
-      const o = new D(t.name, void 0);
-      return new Proxy(o, {
-        get: (r, i) => {
-          if (In.includes(i) || i in r || typeof i == "string" && i.startsWith("__v_"))
-            return Reflect.get(r, i);
-          let a;
-          s ? a = this.subgraph?.nodes.find(
-            (C) => ft.isGraphInputNode(C) && C.graphInterfaceId === t.id
-          )?.outputs.placeholder.id : a = this.subgraph?.nodes.find(
-            (C) => mt.isGraphOutputNode(C) && C.graphInterfaceId === t.id
-          )?.inputs.placeholder.id;
-          const l = this.subgraph?.connections.find((f) => a === (s ? f.from : f.to)?.id), d = s ? l?.to : l?.from;
-          if (d) return Reflect.get(d, i);
-        }
-      });
-    }
-  };
-}
 ce.escape = (n) => n;
 class ze {
   _id;
@@ -780,20 +601,20 @@ class ze {
     this.state.script = ce.render(this.state.template || "", e);
   }
 }
-class vr extends ze {
+class mr extends ze {
   constructor() {
     super(), this.loadTemplate(import("./python-CKuCd7tg.js"));
   }
 }
-class gr extends ze {
+class vr extends ze {
   constructor() {
     super(), this.loadTemplate(import("./javascript-DK1c6Ap1.js"));
   }
 }
-const br = (n) => {
+const gr = (n) => {
   n.allowMultipleConnections = !0;
 };
-class En extends Bt {
+class In extends Bt {
   order = /* @__PURE__ */ new Map();
   constructor(e) {
     super(e);
@@ -859,7 +680,7 @@ This is likely an internal issue. Please report it on GitHub.`
     return e.get(t);
   }
 }
-const Tn = {}, On = {
+const Nn = {}, En = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -871,8 +692,8 @@ const Tn = {}, On = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-check"
 };
-function $n(n, e) {
-  return p(), b("svg", On, [...e[0] || (e[0] = [
+function Tn(n, e) {
+  return p(), b("svg", En, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -881,7 +702,7 @@ function $n(n, e) {
     m("path", { d: "M5 12l5 5l10 -10" }, null, -1)
   ])]);
 }
-const Mn = /* @__PURE__ */ A(Tn, [["render", $n]]), Sn = {}, Pn = {
+const On = /* @__PURE__ */ A(Nn, [["render", Tn]]), $n = {}, Mn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -893,8 +714,8 @@ const Mn = /* @__PURE__ */ A(Tn, [["render", $n]]), Sn = {}, Pn = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-code-variable"
 };
-function Gn(n, e) {
-  return p(), b("svg", Pn, [...e[0] || (e[0] = [
+function Sn(n, e) {
+  return p(), b("svg", Mn, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -903,7 +724,7 @@ function Gn(n, e) {
     m("path", { d: "M4 8m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" }, null, -1)
   ])]);
 }
-const An = /* @__PURE__ */ A(Sn, [["render", Gn]]), Rn = {}, jn = {
+const Pn = /* @__PURE__ */ A($n, [["render", Sn]]), Gn = {}, An = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -915,8 +736,8 @@ const An = /* @__PURE__ */ A(Sn, [["render", Gn]]), Rn = {}, jn = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-copy"
 };
-function Ln(n, e) {
-  return p(), b("svg", jn, [...e[0] || (e[0] = [
+function Rn(n, e) {
+  return p(), b("svg", An, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -926,7 +747,7 @@ function Ln(n, e) {
     m("path", { d: "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" }, null, -1)
   ])]);
 }
-const Vn = /* @__PURE__ */ A(Rn, [["render", Ln]]), Bn = {}, Hn = {
+const jn = /* @__PURE__ */ A(Gn, [["render", Rn]]), Ln = {}, Vn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -938,8 +759,8 @@ const Vn = /* @__PURE__ */ A(Rn, [["render", Ln]]), Bn = {}, Hn = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"
 };
-function zn(n, e) {
-  return p(), b("svg", Hn, [...e[0] || (e[0] = [
+function Bn(n, e) {
+  return p(), b("svg", Vn, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -950,7 +771,7 @@ function zn(n, e) {
     m("path", { d: "M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }, null, -1)
   ])]);
 }
-const Un = /* @__PURE__ */ A(Bn, [["render", zn]]), Dn = {}, Fn = {
+const Hn = /* @__PURE__ */ A(Ln, [["render", Bn]]), zn = {}, Un = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -958,8 +779,8 @@ const Un = /* @__PURE__ */ A(Bn, [["render", zn]]), Dn = {}, Fn = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"
 };
-function Wn(n, e) {
-  return p(), b("svg", Fn, [...e[0] || (e[0] = [
+function Dn(n, e) {
+  return p(), b("svg", Un, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -968,7 +789,7 @@ function Wn(n, e) {
     m("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-2.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
   ])]);
 }
-const Yn = /* @__PURE__ */ A(Dn, [["render", Wn]]), Xn = {}, Kn = {
+const Fn = /* @__PURE__ */ A(zn, [["render", Dn]]), Wn = {}, Yn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -976,8 +797,8 @@ const Yn = /* @__PURE__ */ A(Dn, [["render", Wn]]), Xn = {}, Kn = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-expand"
 };
-function qn(n, e) {
-  return p(), b("svg", Kn, [...e[0] || (e[0] = [
+function Xn(n, e) {
+  return p(), b("svg", Yn, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -986,7 +807,7 @@ function qn(n, e) {
     m("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-4.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
   ])]);
 }
-const Jn = /* @__PURE__ */ A(Xn, [["render", qn]]), Qn = {}, Zn = {
+const Kn = /* @__PURE__ */ A(Wn, [["render", Xn]]), qn = {}, Jn = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -994,8 +815,8 @@ const Jn = /* @__PURE__ */ A(Xn, [["render", qn]]), Qn = {}, Zn = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right"
 };
-function eo(n, e) {
-  return p(), b("svg", Zn, [...e[0] || (e[0] = [
+function Qn(n, e) {
+  return p(), b("svg", Jn, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -1004,7 +825,7 @@ function eo(n, e) {
     m("path", { d: "M6 21a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3zm8 -16h-8a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h8z" }, null, -1)
   ])]);
 }
-const to = /* @__PURE__ */ A(Qn, [["render", eo]]), no = {}, oo = {
+const Zn = /* @__PURE__ */ A(qn, [["render", Qn]]), eo = {}, to = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1012,8 +833,8 @@ const to = /* @__PURE__ */ A(Qn, [["render", eo]]), no = {}, oo = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-collapse"
 };
-function so(n, e) {
-  return p(), b("svg", oo, [...e[0] || (e[0] = [
+function no(n, e) {
+  return p(), b("svg", to, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -1022,7 +843,7 @@ function so(n, e) {
     m("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-5.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
   ])]);
 }
-const ro = /* @__PURE__ */ A(no, [["render", so]]), ao = {}, io = {
+const oo = /* @__PURE__ */ A(eo, [["render", no]]), so = {}, ro = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1030,8 +851,8 @@ const ro = /* @__PURE__ */ A(no, [["render", so]]), ao = {}, io = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-expand"
 };
-function lo(n, e) {
-  return p(), b("svg", io, [...e[0] || (e[0] = [
+function ao(n, e) {
+  return p(), b("svg", ro, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -1040,7 +861,7 @@ function lo(n, e) {
     m("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-3.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
   ])]);
 }
-const uo = /* @__PURE__ */ A(ao, [["render", lo]]), co = {}, po = {
+const io = /* @__PURE__ */ A(so, [["render", ao]]), lo = {}, uo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1052,12 +873,12 @@ const uo = /* @__PURE__ */ A(ao, [["render", lo]]), co = {}, po = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-lock-code"
 };
-function ho(n, e) {
-  return p(), b("svg", po, [...e[0] || (e[0] = [
+function co(n, e) {
+  return p(), b("svg", uo, [...e[0] || (e[0] = [
     fe('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2"></path><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M8 11v-4a4 4 0 1 1 8 0v4"></path><path d="M20 21l2 -2l-2 -2"></path><path d="M17 17l-2 2l2 2"></path>', 6)
   ])]);
 }
-const vt = /* @__PURE__ */ A(co, [["render", ho]]), fo = {}, mo = {
+const ht = /* @__PURE__ */ A(lo, [["render", co]]), po = {}, ho = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1069,8 +890,8 @@ const vt = /* @__PURE__ */ A(co, [["render", ho]]), fo = {}, mo = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-player-play"
 };
-function vo(n, e) {
-  return p(), b("svg", mo, [...e[0] || (e[0] = [
+function fo(n, e) {
+  return p(), b("svg", ho, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -1079,7 +900,7 @@ function vo(n, e) {
     m("path", { d: "M7 4v16l13 -8z" }, null, -1)
   ])]);
 }
-const go = /* @__PURE__ */ A(fo, [["render", vo]]), bo = {}, yo = {
+const mo = /* @__PURE__ */ A(po, [["render", fo]]), vo = {}, go = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1091,8 +912,8 @@ const go = /* @__PURE__ */ A(fo, [["render", vo]]), bo = {}, yo = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-plus"
 };
-function _o(n, e) {
-  return p(), b("svg", yo, [...e[0] || (e[0] = [
+function bo(n, e) {
+  return p(), b("svg", go, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -1102,7 +923,7 @@ function _o(n, e) {
     m("path", { d: "M5 12l14 0" }, null, -1)
   ])]);
 }
-const Co = /* @__PURE__ */ A(bo, [["render", _o]]), wo = {}, ko = {
+const yo = /* @__PURE__ */ A(vo, [["render", bo]]), _o = {}, Co = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1114,12 +935,12 @@ const Co = /* @__PURE__ */ A(bo, [["render", _o]]), wo = {}, ko = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema"
 };
-function xo(n, e) {
-  return p(), b("svg", ko, [...e[0] || (e[0] = [
+function wo(n, e) {
+  return p(), b("svg", Co, [...e[0] || (e[0] = [
     fe('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 2h5v4h-5z"></path><path d="M15 10h5v4h-5z"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h5"></path><path d="M7.5 6v4"></path><path d="M7.5 14v4"></path>', 8)
   ])]);
 }
-const Io = /* @__PURE__ */ A(wo, [["render", xo]]), No = {}, Eo = {
+const ko = /* @__PURE__ */ A(_o, [["render", wo]]), xo = {}, Io = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1131,12 +952,12 @@ const Io = /* @__PURE__ */ A(wo, [["render", xo]]), No = {}, Eo = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-schema-off"
 };
-function To(n, e) {
-  return p(), b("svg", Eo, [...e[0] || (e[0] = [
+function No(n, e) {
+  return p(), b("svg", Io, [...e[0] || (e[0] = [
     fe('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 2h4v4m-4 0h-1v-1"></path><path d="M15 11v-1h5v4h-2"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h2"></path><path d="M7.5 7.5v2.5"></path><path d="M7.5 14v4"></path><path d="M3 3l18 18"></path>', 9)
   ])]);
 }
-const Oo = /* @__PURE__ */ A(No, [["render", To]]), $o = {}, Mo = {
+const Eo = /* @__PURE__ */ A(xo, [["render", No]]), To = {}, Oo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1148,12 +969,12 @@ const Oo = /* @__PURE__ */ A(No, [["render", To]]), $o = {}, Mo = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-transition-bottom"
 };
-function So(n, e) {
-  return p(), b("svg", Mo, [...e[0] || (e[0] = [
+function $o(n, e) {
+  return p(), b("svg", Oo, [...e[0] || (e[0] = [
     fe('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M21 18a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3"></path><path d="M3 3m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v0a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path><path d="M12 9v8"></path><path d="M9 14l3 3l3 -3"></path>', 5)
   ])]);
 }
-const Po = /* @__PURE__ */ A($o, [["render", So]]), Go = {}, Ao = {
+const Mo = /* @__PURE__ */ A(To, [["render", $o]]), So = {}, Po = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1165,12 +986,12 @@ const Po = /* @__PURE__ */ A($o, [["render", So]]), Go = {}, Ao = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-trash-off"
 };
-function Ro(n, e) {
-  return p(), b("svg", Ao, [...e[0] || (e[0] = [
+function Go(n, e) {
+  return p(), b("svg", Po, [...e[0] || (e[0] = [
     fe('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 3l18 18"></path><path d="M4 7h3m4 0h9"></path><path d="M10 11l0 6"></path><path d="M14 14l0 3"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l.077 -.923"></path><path d="M18.384 14.373l.616 -7.373"></path><path d="M9 5v-1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>', 8)
   ])]);
 }
-const jo = /* @__PURE__ */ A(Go, [["render", Ro]]), Lo = {}, Vo = {
+const Ao = /* @__PURE__ */ A(So, [["render", Go]]), Ro = {}, jo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -1182,8 +1003,8 @@ const jo = /* @__PURE__ */ A(Go, [["render", Ro]]), Lo = {}, Vo = {
   "stroke-linejoin": "round",
   class: "baklava-icon icon icon-tabler icons-tabler-outline icon-tabler-x"
 };
-function Bo(n, e) {
-  return p(), b("svg", Vo, [...e[0] || (e[0] = [
+function Lo(n, e) {
+  return p(), b("svg", jo, [...e[0] || (e[0] = [
     m("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
@@ -1193,52 +1014,52 @@ function Bo(n, e) {
     m("path", { d: "M6 6l12 12" }, null, -1)
   ])]);
 }
-const Ho = /* @__PURE__ */ A(Lo, [["render", Bo]]), gt = "CLEAR_ALL", bt = "RUN_ENGINE", yt = "TOGGLE_MINIMAP", _t = "TOGGLE_PALETTE", zo = (n, e, t) => {
+const Vo = /* @__PURE__ */ A(Ro, [["render", Lo]]), ft = "CLEAR_ALL", mt = "RUN_ENGINE", vt = "TOGGLE_MINIMAP", gt = "TOGGLE_PALETTE", Bo = (n, e, t) => {
   const s = t.zoomToFit.paddingLeft;
-  e.registerCommand(_t, {
+  e.registerCommand(gt, {
     execute: () => {
       t.palette.enabled = !t.palette.enabled, t.zoomToFit.paddingLeft = t.palette.enabled ? s : 50;
     },
     canExecute: () => !0
-  }), e.registerCommand(gt, {
+  }), e.registerCommand(ft, {
     execute: () => n.value.clear(),
     canExecute: () => n.value.nodes.length > 0
-  }), e.registerCommand(yt, {
+  }), e.registerCommand(vt, {
     execute: () => t.enableMinimap = !t.enableMinimap,
     canExecute: () => n.value.nodes.length > 1
   });
-}, Uo = (n) => {
+}, Ho = (n) => {
   const e = {
-    command: bt,
+    command: mt,
     title: "Run",
     // Tooltip text
-    icon: P(() => go)
+    icon: P(() => mo)
   }, t = {
-    command: _t,
+    command: gt,
     title: "Toggle palette",
     // Tooltip text
-    icon: P(() => n.palette.enabled ? Yn : Jn)
+    icon: P(() => n.palette.enabled ? Fn : Kn)
   }, s = {
-    command: gt,
+    command: ft,
     title: "Clear all",
     // Tooltip text
-    icon: P(() => jo)
+    icon: P(() => Ao)
   }, o = {
-    command: yt,
+    command: vt,
     title: "Toggle minimap",
     // Tooltip text
-    icon: P(() => n.enableMinimap ? Oo : Io)
+    icon: P(() => n.enableMinimap ? Eo : ko)
   };
   n.toolbar.commands = [t, e, ...Kt, s, o];
-}, Do = (n, e) => {
-  e.registerCommand(bt, {
+}, zo = (n, e) => {
+  e.registerCommand(mt, {
     execute: () => n.runOnce(null),
     canExecute: () => !0
   });
 };
-function Fo(n) {
+function Uo(n) {
   const e = Symbol("CodeEngineToken");
-  n.engine = new En(n.editor), Do(n.engine, n.commandHandler), n.loadEditor = (t) => {
+  n.engine = new In(n.editor), zo(n.engine, n.commandHandler), n.loadEditor = (t) => {
     n.engine?.pause(), n.displayedGraph.clear(), n.editor.load(t), n.commandHandler.executeCommand(ue.CLEAR_CLIPBOARD_COMMAND), n.commandHandler.executeCommand(ue.CLEAR_HISTORY_COMMAND), n.engine?.resume(), n.engine?.runOnce(null);
   }, n.newGraph = () => {
     n.engine?.pause(), n.displayedGraph.clear(), n.commandHandler.executeCommand(ue.CLEAR_CLIPBOARD_COMMAND), n.commandHandler.executeCommand(ue.CLEAR_HISTORY_COMMAND), n.displayedGraph.id = re(), n.engine?.resume(), n.engine?.runOnce(null);
@@ -1276,7 +1097,7 @@ class Ie extends Pt {
     super(e, t), this.editor = e, this.template = t, e.code && (this.code = e.code);
   }
   get codeNodes() {
-    return Ct(this);
+    return bt(this);
   }
   get connections() {
     return super.connections;
@@ -1305,15 +1126,14 @@ class Ie extends Pt {
   get visibleNodes() {
     return this.nodes.filter((e) => !e.state?.hidden);
   }
-  // /**
-  //  * Add code node to graph.
-  //  * @param node code node
-  //  * @param props optional
-  //  */
-  // public override addNode(node: AbstractCodeNode, props?: unknown): AbstractCodeNode | undefined {
-  //   if (node.state && props) node.state.props = props;
-  //   return super.addNode(node as AbstractNode) as AbstractCodeNode;
-  // }
+  /**
+   * Add code node to graph.
+   * @param node code node
+   * @param props optional
+   */
+  addNode(e, t) {
+    return e.state && t && (e.state.props = t), super.addNode(e);
+  }
   /**
    * Add code node at coordinates.
    * @param node code node
@@ -1399,18 +1219,190 @@ class Ie extends Pt {
       }
   }
 }
-const Ct = (n) => {
+const bt = (n) => {
   const e = [];
   return n.nodes.length === 0 || n.nodes.forEach((t) => {
-    t && (t.hasOwnProperty("subgraph") ? e.push(...Ct(t.subgraph)) : t.hasOwnProperty("isCodeNode") && e.push(t));
+    t && (t.hasOwnProperty("subgraph") ? e.push(...bt(t.subgraph)) : t.hasOwnProperty("isCodeNode") && e.push(t));
   }), e;
-}, yr = (n = 0, e = 100) => ({
+}, br = (n = 0, e = 100) => ({
   x: n * 420,
   y: e
-}), _r = (n) => {
+}), yr = (n) => {
   const e = { ...n.position };
   return e.x -= 440, e.y += 50, e;
-};
+}, We = "__baklava_SubgraphInputNode", Ye = "__baklava_SubgraphOutputNode";
+class yt extends Re {
+  graphInterfaceId;
+  constructor() {
+    super(), this.graphInterfaceId = re();
+  }
+  onPlaced() {
+    super.onPlaced(), this.initializeIo();
+  }
+  load(e) {
+    super.load(e), this.graphInterfaceId = e.graphInterfaceId;
+  }
+  save() {
+    return {
+      ...super.save(),
+      graphInterfaceId: this.graphInterfaceId
+    };
+  }
+  update() {
+  }
+}
+class _t extends yt {
+  static isGraphInputNode(e) {
+    return e.type === We;
+  }
+  type = We;
+  inputs = {
+    name: new J("Name", "Input")
+  };
+  outputs = {
+    placeholder: new J("Value", void 0)
+  };
+}
+class Ct extends yt {
+  static isGraphOutputNode(e) {
+    return e.type === Ye;
+  }
+  type = Ye;
+  inputs = {
+    name: new J("Name", "Output"),
+    placeholder: new J("Value", void 0)
+  };
+  outputs = {
+    output: new J("Output", void 0).setHidden(!0)
+  };
+  calculate = ({ placeholder: e }) => ({
+    output: e
+  });
+}
+const Do = [
+  "component",
+  "connectionCount",
+  "events",
+  "hidden",
+  "hooks",
+  "id",
+  "isCodeNode",
+  "isInput",
+  "name",
+  "nodeId",
+  "port",
+  "templateId",
+  "value"
+];
+function Fo(n) {
+  return class extends lt {
+    type = st(n);
+    get title() {
+      return this._title;
+    }
+    set title(t) {
+      this.template.name = t;
+    }
+    inputs = {};
+    outputs = {};
+    template = n;
+    subgraph;
+    update() {
+    }
+    onConnected() {
+    }
+    onUnconnected() {
+    }
+    calculate = async (t, s) => {
+      if (!this.subgraph) throw new Error(`GraphNode ${this.id}: calculate called without subgraph being initialized`);
+      if (!s.engine || typeof s.engine != "object")
+        throw new Error(`GraphNode ${this.id}: calculate called but no engine provided in context`);
+      const o = s.engine.getInputValues(this.subgraph);
+      for (const a of this.subgraph.inputs)
+        o.set(a.nodeInterfaceId, t[a.id]);
+      const r = await s.engine.runGraph(
+        this.subgraph,
+        o,
+        s.globalValues
+      );
+      s.engine.pause(), rt(r, s.engine.editor), s.engine.resume();
+      const i = {};
+      for (const a of this.subgraph.outputs)
+        i[a.id] = r.get(a.nodeId)?.get("output");
+      return i._calculationResults = r, this.lockCode || (i._code = this.renderCode({ inputs: t, ...s.globalValues })), this.updateOutputValues(i), i;
+    };
+    load(t) {
+      if (!this.subgraph) throw new Error("Cannot load a graph node without a graph");
+      if (!this.template) throw new Error("Unable to load graph node without graph template");
+      this.subgraph.load(t.graphState), super.load(t);
+    }
+    save() {
+      if (!this.subgraph) throw new Error("Cannot save a graph node without a graph");
+      return {
+        ...super.save(),
+        graphState: this.subgraph.save()
+      };
+    }
+    onPlaced() {
+      this.template.events.updated.subscribe(this, () => this.initialize()), this.template.events.nameChanged.subscribe(this, (t) => {
+        this._title = t;
+      }), this.initialize();
+    }
+    onDestroy() {
+      this.template.events.updated.unsubscribe(this), this.template.events.nameChanged.unsubscribe(this), this.subgraph?.destroy();
+    }
+    initialize() {
+      this.subgraph && this.subgraph.destroy(), this.subgraph = this.template.createGraph(), this._title = this.template.name, this.updateInterfaces(), this.state.codeTemplate = `{{ #nodes }}{{ script }}
+{{ /nodes }}`, this.events.update.emit(null);
+    }
+    /**
+     * Render code of this node.
+     */
+    renderCode(t) {
+      return this.subgraph ? this.subgraph.renderCode({ nodes: this.subgraph.scriptedCodeNodes }) : ce.render(this.state.codeTemplate, t);
+    }
+    updateInterfaces() {
+      if (!this.subgraph) throw new Error("Trying to update interfaces without graph instance");
+      for (const t of this.subgraph.inputs)
+        t.id in this.inputs ? this.inputs[t.id].name = t.name : this.addInput(t.id, this.createProxyInterface(t, !0));
+      for (const t of Object.keys(this.inputs))
+        this.subgraph.inputs.some((s) => s.id === t) || this.removeInput(t);
+      for (const t of this.subgraph.outputs)
+        t.id in this.outputs ? this.outputs[t.id].name = t.name : this.addOutput(t.id, this.createProxyInterface(t, !1));
+      for (const t of Object.keys(this.outputs))
+        this.subgraph.outputs.some((s) => s.id === t) || this.removeOutput(t);
+      this.addInput(
+        "_code",
+        new D("", []).use(V, X).use(de).setHidden(!0)
+      ), this.addOutput(
+        "_code",
+        new D("", []).use(V, X).use(de).setHidden(!0)
+      ), this.addOutput("_calculationResults", new J("_calculationResults", void 0).setHidden(!0));
+    }
+    /**
+     * When we create a interface in the graph node, we hide certain properties of the interface in the subgraph.
+     * For example, the `type` property or the `allowMultipleConnections` property.
+     * These properties should be proxied to the subgraph interface, so they behave the same as the original interface.
+     */
+    createProxyInterface(t, s) {
+      const o = new D(t.name, void 0);
+      return new Proxy(o, {
+        get: (r, i) => {
+          if (Do.includes(i) || i in r || typeof i == "string" && i.startsWith("__v_"))
+            return Reflect.get(r, i);
+          let a;
+          s ? a = this.subgraph?.nodes.find(
+            (C) => _t.isGraphInputNode(C) && C.graphInterfaceId === t.id
+          )?.outputs.placeholder.id : a = this.subgraph?.nodes.find(
+            (C) => Ct.isGraphOutputNode(C) && C.graphInterfaceId === t.id
+          )?.inputs.placeholder.id;
+          const l = this.subgraph?.connections.find((f) => a === (s ? f.from : f.to)?.id), d = s ? l?.to : l?.from;
+          if (d) return Reflect.get(d, i);
+        }
+      });
+    }
+  };
+}
 function Wo(n, e) {
   return Object.fromEntries(Object.entries(n).filter(e));
 }
@@ -2011,13 +2003,13 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
     };
     return (i, a) => (p(), b("div", null, [
       o.value ? (p(), b("button", ns, [
-        G(O(Mn))
+        G(O(On))
       ])) : (p(), b("button", {
         key: 1,
         onClick: r,
         class: "baklava-button"
       }, [
-        G(O(Vn))
+        G(O(jn))
       ]))
     ]));
   }
@@ -2043,7 +2035,7 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
             title: "The code is locked.",
             onClick: i[0] || (i[0] = (l) => o(!1))
           }, [
-            G(O(vt))
+            G(O(ht))
           ])) : j("", !0),
           G(os, { text: n.modelValue }, null, 8, ["text"])
         ]),
@@ -2237,35 +2229,35 @@ const es = /* @__PURE__ */ qo(Zo), ts = (n) => ({
           ]),
           m("div", ds, [
             r.value.isCodeNode ? (p(), b(U, { key: 0 }, [
-              r.value.state.lockCode ? (p(), B(O(vt), {
+              r.value.state.lockCode ? (p(), B(O(ht), {
                 key: 0,
                 class: "--clickable mx-1",
                 onClick: g[0] || (g[0] = (c) => r.value.lockCode = !1)
               })) : j("", !0),
-              r.value.state.integrated ? (p(), B(O(An), {
+              r.value.state.integrated ? (p(), B(O(Pn), {
                 key: 1,
                 class: "--clickable mx-1",
                 onClick: g[1] || (g[1] = (c) => oe(!1))
-              })) : (p(), B(O(Po), {
+              })) : (p(), B(O(Mo), {
                 key: 2,
                 class: "--clickable mx-1",
                 onClick: g[2] || (g[2] = (c) => oe(!0))
               })),
-              !O(a).displayedGraph.sidebar.visible && O(a).displayedGraph.sidebar.nodeId !== r.value.id ? (p(), B(O(uo), {
+              !O(a).displayedGraph.sidebar.visible && O(a).displayedGraph.sidebar.nodeId !== r.value.id ? (p(), B(O(io), {
                 key: 3,
                 class: "--clickable mx-1",
                 onClick: ge
-              })) : O(a).displayedGraph.sidebar.visible && O(a).displayedGraph.sidebar.nodeId !== r.value.id ? (p(), B(O(to), {
+              })) : O(a).displayedGraph.sidebar.visible && O(a).displayedGraph.sidebar.nodeId !== r.value.id ? (p(), B(O(Zn), {
                 key: 4,
                 class: "--clickable mx-1",
                 onClick: he
-              })) : (p(), B(O(ro), {
+              })) : (p(), B(O(oo), {
                 key: 5,
                 class: "--clickable mx-1",
                 onClick: z
               }))
             ], 64)) : j("", !0),
-            G(O(Un), {
+            G(O(Hn), {
               class: "--clickable mx-1",
               onClick: R
             }),
@@ -2675,7 +2667,7 @@ const Je = /* @__PURE__ */ A(Rs, [["render", Vs]]), Bs = { class: "navbar" }, Hs
             class: "remove",
             onClick: le((a) => s(i.graph.id), ["prevent"])
           }, [
-            G(O(Ho))
+            G(O(Vo))
           ], 8, Hs)
         ]),
         default: ee(() => [
@@ -2689,7 +2681,7 @@ const Je = /* @__PURE__ */ A(Rs, [["render", Vs]]), Bs = { class: "navbar" }, Hs
           class: "navItem"
         }, {
           default: ee(() => [
-            G(O(Co), { class: "plus" })
+            G(O(yo), { class: "plus" })
           ]),
           _: 1
         }, 8, ["to"])
@@ -2697,7 +2689,7 @@ const Je = /* @__PURE__ */ A(Rs, [["render", Vs]]), Bs = { class: "navbar" }, Hs
     ]));
   }
 });
-class wt extends ft {
+class wt extends _t {
   _title = "Subgraph Input";
   inputs = {
     _code: new D("", "").use(V, X).setHidden(!0),
@@ -2708,7 +2700,7 @@ class wt extends ft {
     placeholder: new J("Connection", void 0)
   };
 }
-class kt extends mt {
+class kt extends Ct {
   _title = "Subgraph Output";
   inputs = {
     _code: new D("", "").use(V, X).setHidden(!0),
@@ -2818,7 +2810,7 @@ class Fs extends Lt {
   addGraphTemplate(e) {
     if (this.events.beforeAddGraphTemplate.emit(e).prevented) return;
     this._graphTemplates.push(e), this.graphTemplateEvents.addTarget(e.events), this.graphTemplateHooks.addTarget(e.hooks);
-    const t = Nn(e);
+    const t = Fo(e);
     this.registerNodeType(t, { category: "Subgraphs", title: e.name }), this.events.addGraphTemplate.emit(e);
   }
   /**
@@ -2869,7 +2861,7 @@ function Ir(n) {
     settings: l,
     switchGraph: i
   });
-  return e.value.registerViewModel(N), Fo(N), sn(r, d), Us(r, d, i), rn(r, d), an(r, d, i), ln(r, d), un(r, d, l), zo(r, d, l), Uo(l), tt(
+  return e.value.registerViewModel(N), Uo(N), sn(r, d), Us(r, d, i), rn(r, d), an(r, d, i), ln(r, d), un(r, d, l), Bo(r, d, l), Ho(l), tt(
     t,
     (v, w) => {
       w && (w.events.registerGraph.unsubscribe(s), w.graphEvents.beforeAddNode.unsubscribe(s), v.nodeHooks.beforeLoad.unsubscribe(s), v.nodeHooks.afterSave.unsubscribe(s), v.graphTemplateHooks.beforeLoad.unsubscribe(s), v.graphTemplateHooks.afterSave.unsubscribe(s), v.graph.hooks.load.unsubscribe(s), v.graph.hooks.save.unsubscribe(s)), v && (v.nodeHooks.beforeLoad.subscribe(s, (u, y) => (y.position = u.position ?? { x: 0, y: 0 }, y.width = u.width ?? l.nodes.defaultWidth, y.twoColumn = u.twoColumn ?? !1, u)), v.nodeHooks.afterSave.subscribe(s, (u, y) => (u.position = y.position, u.width = y.width, u.twoColumn = y.twoColumn, u)), v.graphTemplateHooks.beforeLoad.subscribe(s, (u, y) => (y.panning = u.panning, y.scaling = u.scaling, u)), v.graphTemplateHooks.afterSave.subscribe(s, (u, y) => (u.panning = y.panning, u.scaling = y.scaling, u)), v.graph.hooks.load.subscribe(s, (u, y) => (y.panning = u.panning, y.scaling = u.scaling, u)), v.graph.hooks.save.subscribe(s, (u, y) => (u.panning = y.panning, u.scaling = y.scaling, u)), v.graphEvents.beforeAddNode.subscribe(
@@ -2882,20 +2874,20 @@ function Ir(n) {
 }
 export {
   lt as AbstractCodeNode,
-  gt as CLEAR_ALL_COMMAND,
+  ft as CLEAR_ALL_COMMAND,
   zs as CREATE_SUBGRAPH_COMMAND,
-  Mn as Check,
+  On as Check,
   sr as CheckboxInterface,
   ze as Code,
   Cr as CodeEditor,
-  En as CodeEngine,
+  In as CodeEngine,
   Ie as CodeGraph,
   wr as CodeGraphEditor,
   kr as CodeGraphInfo,
-  ft as CodeGraphInputNode,
+  _t as CodeGraphInputNode,
   gs as CodeGraphNode,
   Ke as CodeGraphNodeInterface,
-  mt as CodeGraphOutputNode,
+  Ct as CodeGraphOutputNode,
   $s as CodeGraphSidebar,
   Ne as CodeGraphTemplate,
   Re as CodeNode,
@@ -2904,68 +2896,68 @@ export {
   je as CodeNodeInterfaceComponent,
   gn as CodeNodeOutputInterface,
   As as CodeNodePalette,
-  An as CodeVariable,
-  Vn as Copy,
+  Pn as CodeVariable,
+  jn as Copy,
   os as CopyToClipboard,
-  Un as DotsVertical,
+  Hn as DotsVertical,
   xn as DynamicCodeNode,
   We as GRAPH_INPUT_NODE_TYPE,
   Ye as GRAPH_OUTPUT_NODE_TYPE,
   rr as IntegerInterface,
-  gr as JavascriptCode,
-  Yn as LayoutSidebarLeftCollapse,
-  Jn as LayoutSidebarLeftExpand,
-  to as LayoutSidebarRight,
-  ro as LayoutSidebarRightCollapse,
-  uo as LayoutSidebarRightExpand,
+  vr as JavascriptCode,
+  Fn as LayoutSidebarLeftCollapse,
+  Kn as LayoutSidebarLeftExpand,
+  Zn as LayoutSidebarRight,
+  oo as LayoutSidebarRightCollapse,
+  io as LayoutSidebarRightExpand,
   ar as ListInputInterface,
-  vt as LockCode,
+  ht as LockCode,
   xr as NavBar,
   Je as NavItem,
   ir as NumberInterface,
-  go as PlayerPlay,
-  Co as Plus,
-  vr as PythonCode,
-  bt as RUN_ENGINE_COMMAND,
-  Io as Schema,
-  Oo as SchemaOff,
+  mo as PlayerPlay,
+  yo as Plus,
+  mr as PythonCode,
+  mt as RUN_ENGINE_COMMAND,
+  ko as Schema,
+  Eo as SchemaOff,
   lr as SelectInterface,
   qe as SidebarCheckbox,
   ur as SliderInterface,
   wt as SubgraphInputNode,
   kt as SubgraphOutputNode,
-  yt as TOGGLE_MINIMAP_COMMAND,
-  _t as TOGGLE_PALETTE_COMMAND,
+  vt as TOGGLE_MINIMAP_COMMAND,
+  gt as TOGGLE_PALETTE_COMMAND,
   dr as TextInputInterface,
   kn as TextInputInterfaceComponent,
   cr as TextareaInputInterface,
-  Po as TransitionBottom,
-  jo as TrashOff,
+  Mo as TransitionBottom,
+  Ao as TrashOff,
   pr as TupleInputInterface,
-  Ho as X,
+  Vo as X,
   or as addDefaultInterfaceTypes,
-  br as allowMultipleConnections,
+  gr as allowMultipleConnections,
   dt as booleanType,
-  Nn as createCodeGraphNodeType,
+  Fo as createCodeGraphNodeType,
   hr as defineCodeNode,
   fr as defineDynamicCodeNode,
   vn as dictType,
   hn as formatInputs,
-  Ct as getCodeNodes,
-  yr as getPositionAtColumn,
-  _r as getPositionBeforeNode,
+  bt as getCodeNodes,
+  br as getPositionAtColumn,
+  yr as getPositionBeforeNode,
   ct as listType,
   ut as loadNodeState,
   X as nodeType,
   Le as numberType,
-  Fo as registerCodeEngine,
+  Uo as registerCodeEngine,
   Us as registerCreateSubgraphCommand,
-  zo as registerCustomCommands,
-  Do as registerRunEngineCommands,
+  Bo as registerCustomCommands,
+  zo as registerRunEngineCommands,
   fn as saveNodeState,
   Ve as stringType,
   pt as tupleType,
-  Uo as updateToolbarItems,
+  Ho as updateToolbarItems,
   Ir as useCodeGraph,
   Ko as useSwitchCodeGraph
 };