@babsey/code-graph 0.0.8 → 0.0.10

package/dist/code-graph.js

@@ -1,25 +1,21 @@
-import { AbstractNode, NodeInterfaceType, NodeInterface, ButtonInterfaceComponent, CheckboxInterfaceComponent, IntegerInterfaceComponent, NumberInterfaceComponent, SelectInterfaceComponent, SliderInterfaceComponent, TextInputInterfaceComponent, TextareaInputInterfaceComponent, setType, allowMultipleConnections, IntegerInterface as IntegerInterface$1, TextInputInterface as TextInputInterface$1, displayInSidebar, sortTopologically, useViewModel, useTemporaryConnection, Components, useGraph, GRAPH_NODE_TYPE_PREFIX, useTransform, useNodeCategories, BaklavaEditor, DEFAULT_TOOLBAR_COMMANDS, useBaklava, DependencyEngine, applyResult } from "baklavajs";
-import { ButtonInterfaceComponent as ButtonInterfaceComponent2, CheckboxInterfaceComponent as CheckboxInterfaceComponent2, IntegerInterfaceComponent as IntegerInterfaceComponent2, NumberInterfaceComponent as NumberInterfaceComponent2, SelectInterfaceComponent as SelectInterfaceComponent2, SliderInterfaceComponent as SliderInterfaceComponent2, TextInputInterfaceComponent as TextInputInterfaceComponent2, TextareaInputInterfaceComponent as TextareaInputInterfaceComponent2 } from "baklavajs";
-import mustache from "mustache";
-import { reactive, defineComponent, createElementBlock, openBlock, toDisplayString, markRaw, ref, computed, onMounted, onUpdated, normalizeClass, createCommentVNode, createElementVNode, unref, renderSlot, createStaticVNode, onBeforeUnmount, normalizeStyle, withModifiers, createBlock, withDirectives, Fragment, createTextVNode, createVNode, withKeys, vModelText, renderList, nextTick, toRef, resolveDynamicComponent, inject, Transition, withCtx, onUnmounted, normalizeProps, guardReactiveProps, mergeProps } from "vue";
-import toposort from "toposort";
-import { v4 } from "uuid";
-import { usePointer } from "@vueuse/core";
-class AbstractCodeNode extends AbstractNode {
+import { AbstractNode as Le, NodeInterfaceType as P, BaklavaInterfaceTypes as Ge, NodeInterface as Ue, ButtonInterfaceComponent as je, CheckboxInterfaceComponent as Re, IntegerInterfaceComponent as Pe, NumberInterfaceComponent as De, SelectInterfaceComponent as Ae, SliderInterfaceComponent as He, TextInputInterfaceComponent as ge, TextareaInputInterfaceComponent as Fe, setType as j, allowMultipleConnections as Y, IntegerInterface as We, TextInputInterface as Xe, displayInSidebar as Ye, sortTopologically as Je, useViewModel as F, useTemporaryConnection as qe, Components as ve, useGraph as K, GRAPH_NODE_TYPE_PREFIX as J, useTransform as Qe, useNodeCategories as Ze, BaklavaEditor as Ke, DEFAULT_TOOLBAR_COMMANDS as et, useBaklava as tt, DependencyEngine as st, applyResult as nt } from "baklavajs";
+import { ButtonInterfaceComponent as cn, CheckboxInterfaceComponent as pn, IntegerInterfaceComponent as hn, NumberInterfaceComponent as vn, SelectInterfaceComponent as mn, SliderInterfaceComponent as fn, TextInputInterfaceComponent as gn, TextareaInputInterfaceComponent as bn } from "baklavajs";
+import be from "mustache";
+import { reactive as R, defineComponent as G, createElementBlock as r, openBlock as i, toDisplayString as L, markRaw as $, ref as E, computed as f, onMounted as ee, onUpdated as _e, normalizeClass as U, createCommentVNode as N, createElementVNode as l, unref as _, renderSlot as q, createStaticVNode as te, onBeforeUnmount as ot, normalizeStyle as se, withModifiers as D, createBlock as V, withDirectives as ne, Fragment as T, createTextVNode as at, createVNode as S, withKeys as Q, vModelText as oe, renderList as A, nextTick as it, toRef as ye, resolveDynamicComponent as rt, inject as lt, Transition as dt, withCtx as X, onUnmounted as ut, normalizeProps as ct, guardReactiveProps as pt, mergeProps as ht } from "vue";
+import vt from "toposort";
+import { v4 as mt } from "uuid";
+import { usePointer as ft } from "@vueuse/core";
+class gt extends Le {
   state;
   code;
-  isCodeNode = true;
+  isCodeNode = !0;
   inputs = {};
   outputs = {};
   constructor() {
-    super();
-    this.initializeIo();
-    this.width = 400;
-    this.twoColumn = true;
-    this.state = reactive({
+    super(), this.initializeIo(), this.width = 400, this.twoColumn = !0, this.state = R({
       codeTemplate: "{{ &outputs.code }}",
-      hidden: false,
-      integrated: false,
+      hidden: !1,
+      integrated: !1,
       modules: [],
       script: "",
       variableName: ""
@@ -29,7 +25,7 @@ class AbstractCodeNode extends AbstractNode {
     return this.state.codeTemplate;
   }
   get idx() {
-    return this.code?.codeNodes.filter((node) => !node.state.integrated).indexOf(this) ?? -1;
+    return this.code?.codeNodes.filter((e) => !e.state.integrated).indexOf(this) ?? -1;
   }
   get idxByVariableNames() {
     return this.code?.getNodesBySameVariableNames(this.state.variableName).indexOf(this) ?? -1;
@@ -48,48 +44,43 @@ class AbstractCodeNode extends AbstractNode {
    * @param type inputs or outputs
    * @returns code node instances
    */
-  getConnectedNodes(type) {
-    let nodeIds = [];
-    if (type !== "inputs") {
-      const targets = this.graph?.connections.filter((c) => c.from.name !== "_node").filter((c) => c.from.nodeId === this.id).map((c) => c.to.nodeId);
-      if (targets) nodeIds = nodeIds.concat(targets);
+  getConnectedNodes(e) {
+    let t = [];
+    if (e !== "inputs") {
+      const s = this.graph?.connections.filter((n) => n.from.name !== "_node").filter((n) => n.from.nodeId === this.id).map((n) => n.to.nodeId);
+      s && (t = t.concat(s));
     }
-    if (type !== "outputs") {
-      const sources = this.graph?.connections.filter((c) => c.from.name !== "_node").filter((c) => c.to.nodeId === this.id).map((c) => c.from.nodeId);
-      if (sources) nodeIds = nodeIds.concat(sources);
+    if (e !== "outputs") {
+      const s = this.graph?.connections.filter((n) => n.from.name !== "_node").filter((n) => n.to.nodeId === this.id).map((n) => n.from.nodeId);
+      s && (t = t.concat(s));
     }
-    if (!nodeIds || nodeIds.length == 0) return [];
-    return nodeIds.map((nodeId) => this.graph?.findNodeById(nodeId));
+    return !t || t.length == 0 ? [] : t.map((s) => this.graph?.findNodeById(s));
   }
-  registerCode(code) {
-    this.code = code;
+  registerCode(e) {
+    this.code = e;
   }
   /**
    * Render code of this node.
    */
   renderCode() {
-    const inputs = {};
-    Object.keys(this.inputs).forEach((intfKey) => {
-      if (intfKey === "_node") return;
-      const intf = this.inputs[intfKey];
-      const value = intf.isString ? `'${intf.value}'` : intf.value;
-      if (intf && intf.state) inputs[intfKey] = intf.state.script.length > 0 ? intf.state.script : value;
+    const e = {};
+    Object.keys(this.inputs).forEach((s) => {
+      if (s === "_node") return;
+      const n = this.inputs[s], a = n.isString ? `'${n.value}'` : n.value;
+      n && n.state && (e[s] = n.state.script.length > 0 ? n.state.script : a);
     });
-    const outputs = {};
-    Object.keys(this.outputs).forEach((intfKey) => {
-      if (intfKey === "_node") return;
-      const intf = this.outputs[intfKey];
-      const value = intf.isString ? `'${intf.value}'` : intf.value;
-      if (intf && intf.state) outputs[intfKey] = value;
-    });
-    this.state.script = mustache.render(this.state.codeTemplate, { inputs, outputs });
-    if (this.outputs.code) this.outputs.code.state.script = this.state.script;
+    const t = {};
+    Object.keys(this.outputs).forEach((s) => {
+      if (s === "_node") return;
+      const n = this.outputs[s], a = n.isString ? `'${n.value}'` : n.value;
+      n && n.state && (t[s] = a);
+    }), this.state.script = be.render(this.state.codeTemplate, { inputs: e, outputs: t }), this.outputs.code && (this.outputs.code.state.script = this.state.script);
   }
   updateOutputVariableName() {
-    if (this.outputs.code) this.outputs.code.name = this.variableName;
+    this.outputs.code && (this.outputs.code.name = this.variableName);
   }
 }
-class CodeNode extends AbstractCodeNode {
+class we extends gt {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -98,89 +89,61 @@ class CodeNode extends AbstractCodeNode {
    * @return Values for output interfaces
    */
   calculate;
-  load(state) {
-    super.load(state);
-    loadNodeState(this.graph, state);
+  load(e) {
+    super.load(e), xe(this.graph, e);
   }
   save() {
-    const state = super.save();
-    saveNodeState(this.graph, state);
-    return state;
-  }
-  updateModules(modules) {
-    if (modules) {
-      this.state.modules = modules;
-    } else if (this.type.includes(".")) {
-      const modules2 = this.type.split(".");
-      this.state.modules.push(modules2.slice(0, modules2.length - 1).join("."));
+    const e = super.save();
+    return bt(this.graph, e), e;
+  }
+  updateModules(e) {
+    if (e)
+      this.state.modules = e;
+    else if (this.type.includes(".")) {
+      const t = this.type.split(".");
+      this.state.modules.push(t.slice(0, t.length - 1).join("."));
     }
   }
 }
-const loadNodeState = (graph, nodeState) => {
-  if (!graph) return;
-  const node = graph.findNodeById(nodeState.id);
-  if (!node || node.subgraph) return;
-  const codeNode = node;
-  if (codeNode.state) {
-    codeNode.state.integrated = nodeState.integrated;
-    codeNode.state.modules = nodeState.modules;
-    codeNode.state.props = nodeState.props;
-  }
-  Object.entries(nodeState.inputs).forEach(([inputKey, inputItem]) => {
-    if (inputKey === "_node") return;
-    if (codeNode.inputs[inputKey]) codeNode.inputs[inputKey].hidden = inputItem.hidden;
-  });
-  Object.entries(nodeState.outputs).forEach(([outputKey, outputItem]) => {
-    if (outputKey === "_node") return;
-    if (codeNode.outputs[outputKey]) codeNode.outputs[outputKey].hidden = outputItem.hidden;
-  });
-};
-const saveNodeState = (graph, nodeState) => {
-  if (!graph) return;
-  const node = graph.findNodeById(nodeState.id);
-  if (!node || node.subgraph) return;
-  const codeNode = node;
-  if (codeNode.state) {
-    nodeState.integrated = codeNode.state.integrated;
-    nodeState.modules = codeNode.state.modules;
-  }
-  Object.entries(nodeState.inputs).forEach(([inputKey, inputItem]) => {
-    if (inputKey === "_node") return;
-    if (codeNode.inputs[inputKey]) inputItem.hidden = codeNode.inputs[inputKey].hidden;
+const xe = (o, e) => {
+  if (!o) return;
+  const t = o.findNodeById(e.id);
+  if (!t || t.subgraph) return;
+  const s = t;
+  s.state && (s.state.integrated = e.integrated, s.state.modules = e.modules, s.state.props = e.props), Object.entries(e.inputs).forEach(([n, a]) => {
+    n !== "_node" && s.inputs[n] && (s.inputs[n].hidden = a.hidden);
+  }), Object.entries(e.outputs).forEach(([n, a]) => {
+    n !== "_node" && s.outputs[n] && (s.outputs[n].hidden = a.hidden);
   });
-  Object.entries(nodeState.outputs).forEach(([outputKey, outputItem]) => {
-    if (outputKey === "_node") return;
-    if (codeNode.outputs[outputKey]) outputItem.hidden = codeNode.outputs[outputKey].hidden;
+}, bt = (o, e) => {
+  if (!o) return;
+  const t = o.findNodeById(e.id);
+  if (!t || t.subgraph) return;
+  const s = t;
+  s.state && (e.integrated = s.state.integrated, e.modules = s.state.modules), Object.entries(e.inputs).forEach(([n, a]) => {
+    n !== "_node" && s.inputs[n] && (a.hidden = s.inputs[n].hidden);
+  }), Object.entries(e.outputs).forEach(([n, a]) => {
+    n !== "_node" && s.outputs[n] && (a.hidden = s.outputs[n].hidden);
   });
-};
-new NodeInterfaceType("boolean");
-new NodeInterfaceType("dict");
-new NodeInterfaceType("list");
-const nodeType = new NodeInterfaceType("node");
-const numberType = new NodeInterfaceType("number");
-const stringType = new NodeInterfaceType("string");
-const _hoisted_1$f = ["title"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+}, _t = new P("boolean"), yt = new P("dict"), wt = new P("list"), H = new P("node"), ke = new P("number"), Ce = new P("string"), Fs = (o) => {
+  new Ge(o.editor, { viewPlugin: o }).addTypes(Ce, H, ke, _t, yt, wt);
+}, xt = ["title"], ae = /* @__PURE__ */ G({
   __name: "CodeNodeInterface",
   props: {
     intf: {}
   },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        title: _ctx.intf.state?.script
-      }, toDisplayString(_ctx.intf.name), 9, _hoisted_1$f);
-    };
+  setup(o) {
+    return (e, t) => (i(), r("div", {
+      title: e.intf.state?.script
+    }, L(e.intf.name), 9, xt));
   }
 });
-class CodeNodeInterface extends NodeInterface {
-  optional = false;
+class M extends Ue {
+  optional = !1;
   code;
   state;
-  constructor(name, value) {
-    super(name, value);
-    this.setComponent(markRaw(_sfc_main$g));
-    this.state = reactive({
+  constructor(e, t) {
+    super(e, t), this.setComponent($(ae)), this.state = R({
       script: ""
     });
   }
@@ -195,48 +158,42 @@ class CodeNodeInterface extends NodeInterface {
   //   if (this.name !== '_node') this.setHidden(false);
   // }
 }
-class ButtonInterface extends CodeNodeInterface {
-  component = markRaw(ButtonInterfaceComponent);
+class Ws extends M {
+  component = $(je);
   callback;
-  constructor(name, callback) {
-    super(name, void 0);
-    this.callback = callback;
-    this.setPort(false);
+  constructor(e, t) {
+    super(e, void 0), this.callback = t, this.setPort(!1);
   }
 }
-class CheckboxInterface extends CodeNodeInterface {
-  component = markRaw(CheckboxInterfaceComponent);
+class Xs extends M {
+  component = $(Re);
 }
-class BaseNumericInterface extends CodeNodeInterface {
+class ie extends M {
   min;
   max;
-  constructor(name, value, min, max) {
-    super(name, value);
-    this.min = min;
-    this.max = max;
+  constructor(e, t, s, n) {
+    super(e, t), this.min = s, this.max = n;
   }
-  validate(v) {
-    return (this.min === void 0 || v >= this.min) && (this.max === void 0 || v <= this.max);
+  validate(e) {
+    return (this.min === void 0 || e >= this.min) && (this.max === void 0 || e <= this.max);
   }
 }
-class IntegerInterface extends BaseNumericInterface {
-  component = markRaw(IntegerInterfaceComponent);
-  validate(v) {
-    return Number.isInteger(v) && super.validate(v);
+class Ys extends ie {
+  component = $(Pe);
+  validate(e) {
+    return Number.isInteger(e) && super.validate(e);
   }
 }
-class CodeInputInterface extends CodeNodeInterface {
-  isCodeInput = true;
-  constructor(name = "", value) {
-    super(name, value);
-    this.setComponent(markRaw(_sfc_main$g));
+class Js extends M {
+  isCodeInput = !0;
+  constructor(e = "", t) {
+    super(e, t), this.setComponent($(ae));
   }
 }
-class CodeOutputInterface extends CodeNodeInterface {
-  isCodeOutput = true;
-  constructor(name = "", value = "") {
-    super(name, value);
-    this.setComponent(markRaw(_sfc_main$g));
+class kt extends M {
+  isCodeOutput = !0;
+  constructor(e = "", t = "") {
+    super(e, t), this.setComponent($(ae));
   }
   get script() {
     return this.state.script;
@@ -244,95 +201,77 @@ class CodeOutputInterface extends CodeNodeInterface {
   get value() {
     return super.value;
   }
-  set value(value) {
-    super.value = value;
-    this.state.script = this.name.length > 0 ? this.name : this.value;
+  set value(e) {
+    super.value = e, this.state.script = this.name.length > 0 ? this.name : this.value;
   }
 }
-class NumberInterface extends BaseNumericInterface {
-  component = markRaw(NumberInterfaceComponent);
+class qs extends ie {
+  component = $(De);
 }
-class SelectInterface extends CodeNodeInterface {
-  component = markRaw(SelectInterfaceComponent);
+class Qs extends M {
+  component = $(Ae);
   items;
-  constructor(name, value, items) {
-    super(name, value);
-    this.items = items;
+  constructor(e, t, s) {
+    super(e, t), this.items = s;
   }
 }
-class SliderInterface extends BaseNumericInterface {
-  component = markRaw(SliderInterfaceComponent);
+class Zs extends ie {
+  component = $(He);
   min;
   max;
-  constructor(name, value, min, max) {
-    super(name, value, min, max);
-    this.min = min;
-    this.max = max;
+  constructor(e, t, s, n) {
+    super(e, t, s, n), this.min = s, this.max = n;
   }
 }
-class TextInterface extends CodeNodeInterface {
-  component = markRaw(TextInputInterfaceComponent);
-  constructor(name, value) {
-    super(name, value);
-    this.setPort(false);
+class Ks extends M {
+  component = $(ge);
+  constructor(e, t) {
+    super(e, t), this.setPort(!1);
   }
 }
-class TextInputInterface extends CodeNodeInterface {
-  isString = true;
-  component = markRaw(TextInputInterfaceComponent);
+class en extends M {
+  isString = !0;
+  component = $(ge);
 }
-class TextareaInputInterface extends CodeNodeInterface {
-  component = markRaw(TextareaInputInterfaceComponent);
+class tn extends M {
+  component = $(Fe);
 }
-function defineCodeNode(definition) {
-  return class extends CodeNode {
-    type = definition.type;
+function sn(o) {
+  return class extends we {
+    type = o.type;
     inputs = {};
     outputs = {};
     constructor() {
-      super();
-      this._title = definition.title ?? definition.type;
-      this.updateModules(definition.modules);
-      if (definition.codeTemplate) this.state.codeTemplate = definition.codeTemplate(this);
-      if (definition.variableName) this.state.variableName = definition.variableName;
-      this.addInput(
+      super(), this._title = o.title ?? o.type, this.updateModules(o.modules), o.codeTemplate && (this.state.codeTemplate = o.codeTemplate(this)), o.variableName && (this.state.variableName = o.variableName), this.addInput(
         "_node",
-        new CodeNodeInterface("", []).use(setType, nodeType).use(allowMultipleConnections).setHidden(true)
-      );
-      this.addOutput(
+        new M("", []).use(j, H).use(Y).setHidden(!0)
+      ), this.addOutput(
         "_node",
-        new CodeNodeInterface("", []).use(setType, nodeType).use(allowMultipleConnections).setHidden(true)
-      );
-      this.executeFactory("input", definition.inputs);
-      this.executeFactory("output", definition.outputs);
-      definition.onCreate?.call(this);
+        new M("", []).use(j, H).use(Y).setHidden(!0)
+      ), this.executeFactory("input", o.inputs), this.executeFactory("output", o.outputs), o.onCreate?.call(this);
     }
-    calculate = definition.calculate ? (inputs, globalValues) => ({
-      ...definition.calculate.call(this, inputs, globalValues),
+    calculate = o.calculate ? (e, t) => ({
+      ...o.calculate.call(this, e, t),
       _node: null
     }) : void 0;
     onPlaced() {
-      definition.onPlaced?.call(this);
+      o.onPlaced?.call(this);
     }
     onDestroy() {
-      definition.onDestroy?.call(this);
+      o.onDestroy?.call(this);
     }
     onCodeUpdate() {
-      definition.onCodeUpdate?.call(this);
+      o.onCodeUpdate?.call(this);
     }
-    executeFactory(type, factory) {
-      Object.keys(factory || {}).forEach((k) => {
-        const intf = factory[k]();
-        if (type === "input") {
-          this.addInput(k, intf);
-        } else {
-          this.addOutput(k, intf);
-        }
+    executeFactory(e, t) {
+      Object.keys(t || {}).forEach((s) => {
+        const n = t[s]();
+        e === "input" ? this.addInput(s, n) : this.addOutput(s, n);
       });
     }
   };
 }
-class DynamicCodeNode extends CodeNode {
+class Ct extends we {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -342,169 +281,101 @@ class DynamicCodeNode extends CodeNode {
    */
   calculate;
 }
-function defineDynamicCodeNode(definition) {
-  return class extends DynamicCodeNode {
-    type = definition.type;
+function nn(o) {
+  return class extends Ct {
+    type = o.type;
     inputs = {};
     outputs = {};
     calculate;
-    preventUpdate = false;
-    staticInputKeys = Object.keys(definition.inputs ?? {});
-    staticOutputKeys = Object.keys(definition.outputs ?? {});
+    preventUpdate = !1;
+    staticInputKeys = Object.keys(o.inputs ?? {});
+    staticOutputKeys = Object.keys(o.outputs ?? {});
     constructor() {
-      super();
-      this._title = definition.title ?? definition.type;
-      this.updateModules(definition.modules);
-      if (definition.codeTemplate) this.state.codeTemplate = definition.codeTemplate(this);
-      if (definition.variableName) this.state.variableName = definition.variableName;
-      this.addInput(
+      super(), this._title = o.title ?? o.type, this.updateModules(o.modules), o.codeTemplate && (this.state.codeTemplate = o.codeTemplate(this)), o.variableName && (this.state.variableName = o.variableName), this.addInput(
         "_node",
-        new CodeNodeInterface("", []).use(setType, nodeType).use(allowMultipleConnections).setHidden(true)
-      );
-      this.addOutput(
+        new M("", []).use(j, H).use(Y).setHidden(!0)
+      ), this.addOutput(
         "_node",
-        new CodeNodeInterface("", []).use(setType, nodeType).use(allowMultipleConnections).setHidden(true)
-      );
-      this.staticInputKeys.push("_node");
-      this.staticOutputKeys.push("_node");
-      this.executeFactory("input", definition.inputs);
-      this.executeFactory("output", definition.outputs);
-      if (definition.calculate) {
-        this.calculate = (inputs, globalValues) => ({
-          ...definition.calculate?.call(this, inputs, globalValues),
-          _node: null
-        });
-      }
-      definition.onCreate?.call(this);
+        new M("", []).use(j, H).use(Y).setHidden(!0)
+      ), this.staticInputKeys.push("_node"), this.staticOutputKeys.push("_node"), this.executeFactory("input", o.inputs), this.executeFactory("output", o.outputs), o.calculate && (this.calculate = (e, t) => ({
+        ...o.calculate?.call(this, e, t),
+        _node: null
+      })), o.onCreate?.call(this);
     }
     onPlaced() {
-      this.events.update.subscribe(this, (data) => {
-        if (!data) return;
-        if (data.type === "input" && this.staticInputKeys.includes(data.name) || data.type === "output" && this.staticOutputKeys.includes(data.name)) {
-          this.onUpdate();
-        }
-      });
-      this.onUpdate();
-      definition.onPlaced?.call(this);
+      this.events.update.subscribe(this, (e) => {
+        e && (e.type === "input" && this.staticInputKeys.includes(e.name) || e.type === "output" && this.staticOutputKeys.includes(e.name)) && this.onUpdate();
+      }), this.onUpdate(), o.onPlaced?.call(this);
     }
     onDestroy() {
-      definition.onDestroy?.call(this);
+      o.onDestroy?.call(this);
     }
     onCodeUpdate() {
-      definition.onCodeUpdate?.call(this);
+      o.onCodeUpdate?.call(this);
     }
-    load(state) {
-      this.preventUpdate = true;
-      this.hooks.beforeLoad.execute(state);
-      this.id = state.id;
-      this.title = state.title;
-      for (const k of this.staticInputKeys) {
-        this.inputs[k].load(state.inputs[k]);
-        this.inputs[k].nodeId = this.id;
-        if (k === "_node") continue;
-        this.inputs[k].hidden = state.inputs[k].hidden;
-      }
-      for (const k of this.staticOutputKeys) {
-        this.outputs[k].load(state.outputs[k]);
-        this.outputs[k].nodeId = this.id;
-        if (k === "_node") continue;
-        this.outputs[k].hidden = state.outputs[k].hidden;
-      }
-      this.preventUpdate = false;
-      this.onUpdate();
-      this.preventUpdate = true;
-      for (const k of Object.keys(state.inputs)) {
-        if (this.staticInputKeys.includes(k)) continue;
-        if (!this.inputs[k]) {
-          const value = state.inputs[k].value;
-          let inputInterface;
-          if (typeof value == "number") {
-            inputInterface = new IntegerInterface$1(k, value).use(setType, numberType);
-          } else {
-            inputInterface = new TextInputInterface$1(k, JSON.stringify(value)).use(setType, stringType);
+    load(e) {
+      this.preventUpdate = !0, this.hooks.beforeLoad.execute(e), this.id = e.id, this.title = e.title;
+      for (const t of this.staticInputKeys)
+        this.inputs[t].load(e.inputs[t]), this.inputs[t].nodeId = this.id, t !== "_node" && (this.inputs[t].hidden = e.inputs[t].hidden);
+      for (const t of this.staticOutputKeys)
+        this.outputs[t].load(e.outputs[t]), this.outputs[t].nodeId = this.id, t !== "_node" && (this.outputs[t].hidden = e.outputs[t].hidden);
+      this.preventUpdate = !1, this.onUpdate(), this.preventUpdate = !0;
+      for (const t of Object.keys(e.inputs))
+        if (!this.staticInputKeys.includes(t)) {
+          if (!this.inputs[t]) {
+            const s = e.inputs[t].value;
+            let n;
+            typeof s == "number" ? n = new We(t, s).use(j, ke) : n = new Xe(t, JSON.stringify(s)).use(j, Ce), n.use(Ye, !0), this.addInput(t, n);
           }
-          inputInterface.use(displayInSidebar, true);
-          this.addInput(k, inputInterface);
+          this.inputs[t] && (this.inputs[t].load(e.inputs[t]), this.inputs[t].nodeId = this.id);
         }
-        if (this.inputs[k]) {
-          this.inputs[k].load(state.inputs[k]);
-          this.inputs[k].nodeId = this.id;
-        }
-      }
-      for (const k of Object.keys(state.outputs)) {
-        if (this.staticOutputKeys.includes(k)) continue;
-        if (!this.outputs[k]) {
-          const outputInterface = new CodeOutputInterface(k);
-          this.addOutput(k, outputInterface);
-        }
-        if (this.outputs[k]) {
-          this.outputs[k].load(state.outputs[k]);
-          this.outputs[k].nodeId = this.id;
+      for (const t of Object.keys(e.outputs))
+        if (!this.staticOutputKeys.includes(t)) {
+          if (!this.outputs[t]) {
+            const s = new kt(t);
+            this.addOutput(t, s);
+          }
+          this.outputs[t] && (this.outputs[t].load(e.outputs[t]), this.outputs[t].nodeId = this.id);
         }
-      }
-      loadNodeState(this.graph, state);
-      this.preventUpdate = false;
-      this.events.loaded.emit(this);
+      xe(this.graph, e), this.preventUpdate = !1, this.events.loaded.emit(this);
     }
     onUpdate() {
       if (this.preventUpdate) return;
-      if (this.graph) this.graph.activeTransactions++;
-      const inputValues = this.getStaticValues(this.staticInputKeys, this.inputs);
-      const outputValues = this.getStaticValues(this.staticOutputKeys, this.outputs);
-      const result = definition.onUpdate.call(this, inputValues, outputValues);
-      this.updateInterfaces("input", result.inputs ?? {}, result.forceUpdateInputs ?? []);
-      this.updateInterfaces("output", result.outputs ?? {}, result.forceUpdateOutputs ?? []);
-      if (this.graph) this.graph.activeTransactions--;
+      this.graph && this.graph.activeTransactions++;
+      const e = this.getStaticValues(this.staticInputKeys, this.inputs), t = this.getStaticValues(this.staticOutputKeys, this.outputs), s = o.onUpdate.call(this, e, t);
+      this.updateInterfaces("input", s.inputs ?? {}, s.forceUpdateInputs ?? []), this.updateInterfaces("output", s.outputs ?? {}, s.forceUpdateOutputs ?? []), this.graph && this.graph.activeTransactions--;
     }
-    getStaticValues(keys, interfaces) {
-      const values = {};
-      for (const k of keys) {
-        values[k] = interfaces[k].value;
-      }
-      return values;
+    getStaticValues(e, t) {
+      const s = {};
+      for (const n of e)
+        s[n] = t[n].value;
+      return s;
     }
-    updateInterfaces(type, newInterfaces, forceUpdates) {
-      const staticKeys = type === "input" ? this.staticInputKeys : this.staticOutputKeys;
-      const currentInterfaces = type === "input" ? this.inputs : this.outputs;
-      for (const k of Object.keys(currentInterfaces)) {
-        if (staticKeys.includes(k) || newInterfaces[k] && !forceUpdates.includes(k)) continue;
-        if (type === "input") {
-          this.removeInput(k);
-        } else {
-          this.removeOutput(k);
-        }
-      }
-      for (const k of Object.keys(newInterfaces)) {
-        if (currentInterfaces[k]) continue;
-        const intf = newInterfaces[k]();
-        if (type === "input") {
-          this.addInput(k, intf);
-        } else {
-          this.addOutput(k, intf);
-        }
+    updateInterfaces(e, t, s) {
+      const n = e === "input" ? this.staticInputKeys : this.staticOutputKeys, a = e === "input" ? this.inputs : this.outputs;
+      for (const u of Object.keys(a))
+        n.includes(u) || t[u] && !s.includes(u) || (e === "input" ? this.removeInput(u) : this.removeOutput(u));
+      for (const u of Object.keys(t)) {
+        if (a[u]) continue;
+        const d = t[u]();
+        e === "input" ? this.addInput(u, d) : this.addOutput(u, d);
       }
     }
-    executeFactory(type, factory) {
-      Object.keys(factory || {}).forEach((k) => {
-        const intf = factory[k]();
-        if (type === "input") {
-          this.addInput(k, intf);
-        } else {
-          this.addOutput(k, intf);
-        }
+    executeFactory(e, t) {
+      Object.keys(t || {}).forEach((s) => {
+        const n = t[s]();
+        e === "input" ? this.addInput(s, n) : this.addOutput(s, n);
       });
     }
   };
 }
-class Code {
+class It {
   _id;
   _viewModel;
   _state;
-  constructor(viewModel) {
-    this._id = v4();
-    this._viewModel = viewModel;
-    this._state = reactive({
-      autosort: false,
+  constructor(e) {
+    this._id = mt(), this._viewModel = e, this._state = R({
+      autosort: !1,
       modules: {},
       script: "",
       token: null,
@@ -512,13 +383,13 @@ class Code {
     });
   }
   get codeNodes() {
-    return getCodeNodes(this.graph);
+    return Z(this.graph);
   }
   get connections() {
     return this.graph.connections;
   }
-  set connections(values) {
-    this.graph._connections = values;
+  set connections(e) {
+    this.graph._connections = e;
   }
   get graph() {
     return this.viewModel.displayedGraph;
@@ -527,26 +398,23 @@ class Code {
     return this._id;
   }
   get modules() {
-    let categories = [];
-    this.codeNodes.filter((node) => node.state.modules?.length > 0).forEach((node) => {
-      categories = categories.concat(node.state.modules);
-    });
-    if (!categories) return [];
-    categories.sort();
-    return Array.from(new Set(categories.map((category) => this.viewModel.state.modules[category])));
+    let e = [];
+    return this.codeNodes.filter((t) => t.state.modules?.length > 0).forEach((t) => {
+      e = e.concat(t.state.modules);
+    }), e ? (e.sort(), Array.from(new Set(e.map((t) => this.viewModel.state.modules[t])))) : [];
   }
   get nodeIds() {
-    return this.codeNodes.map((node) => node.id);
+    return this.codeNodes.map((e) => e.id);
   }
   get nodes() {
     return this.graph.nodes;
   }
-  set nodes(values) {
-    this.graph._nodes = values;
+  set nodes(e) {
+    this.graph._nodes = e;
   }
   get scriptedCodeNodes() {
-    return getCodeNodes(this.graph).filter(
-      (codeNode) => codeNode.state?.script.length > 0
+    return Z(this.graph).filter(
+      (e) => e.state?.script.length > 0
     );
   }
   get shortId() {
@@ -559,17 +427,15 @@ class Code {
     return this._viewModel;
   }
   get visibleNodes() {
-    return this.codeNodes.filter((node) => !node.state?.hidden);
+    return this.codeNodes.filter((e) => !e.state?.hidden);
   }
   /**
    * Add code node to graph.
    * @param node code node
    * @param props optional
    */
-  addNode(node, props) {
-    if (!node.code) node.code = this;
-    if (props) node.state.props = props;
-    return this.graph.addNode(node);
+  addNode(e, t) {
+    return e.code || (e.code = this), t && (e.state.props = t), this.graph.addNode(e);
   }
   /**
    * Add code node at coordinates.
@@ -578,40 +444,33 @@ class Code {
    * @param props optional
    * @returns code node
    */
-  addNodeAtCoordinates = (node, position = { x: 0, y: 0 }, props) => {
-    this.addNode(node, props);
-    if (node.position) node.position = position;
-    return node;
-  };
+  addNodeAtCoordinates = (e, t = { x: 0, y: 0 }, s) => (this.addNode(e, s), e.position && (e.position = t), e);
   /**
    * Add connection of code nodes
    * @param from code node interface
    * @param to code node interface
    */
-  addConnection(from, to) {
-    if (from.name !== "_node") from.hidden = false;
-    if (to.name !== "_node") to.hidden = false;
-    this.graph.addConnection(from, to);
+  addConnection(e, t) {
+    e.name !== "_node" && (e.hidden = !1), t.name !== "_node" && (t.hidden = !1), this.graph.addConnection(e, t);
   }
   /**
    * Clear code graph.
    */
   clear() {
-    this.nodes = [];
-    this.connections = [];
+    this.nodes = [], this.connections = [];
   }
-  findNodeById(id) {
-    return this.graph.findNodeById(id);
+  findNodeById(e) {
+    return this.graph.findNodeById(e);
   }
-  findNodeByType(nodeType2) {
-    return this.codeNodes.find((codeNode) => codeNode.type === nodeType2);
+  findNodeByType(e) {
+    return this.codeNodes.find((t) => t.type === e);
   }
-  getNodesBySameType(type) {
-    return this.codeNodes.filter((codeNode) => codeNode.type === type);
+  getNodesBySameType(e) {
+    return this.codeNodes.filter((t) => t.type === e);
   }
-  getNodesBySameVariableNames(variableName) {
+  getNodesBySameVariableNames(e) {
     return this.codeNodes.filter(
-      (codeNode) => codeNode.state.variableName === variableName
+      (t) => t.state.variableName === e
     );
   }
   /**
@@ -620,73 +479,68 @@ class Code {
    * @param to node interface
    * @returns boolean
    */
-  hasConnection(from, to) {
+  hasConnection(e, t) {
     return this.connections.some(
-      (connection) => connection.from.id === from.id && connection.to.id === to.id
+      (s) => s.from.id === e.id && s.to.id === t.id
     );
   }
   /**
    * Load template from the file.
    */
-  loadTemplate(resolve) {
-    resolve.then((template) => {
-      this._state.template = template.default ?? "";
+  loadTemplate(e) {
+    e.then((t) => {
+      this._state.template = t.default ?? "";
     });
   }
   onCodeUpdate() {
-    this.codeNodes.forEach((codeNode) => codeNode.onCodeUpdate());
+    this.codeNodes.forEach((e) => e.onCodeUpdate());
   }
   /**
    * Remove connection from the graph
    * @param connection connection between code nodes
    */
-  removeConnection(connection) {
-    this.graph.removeConnection(connection);
+  removeConnection(e) {
+    this.graph.removeConnection(e);
   }
   /**
    * Remove node from the graph.
    * @param codeNode code node
    */
-  removeNode(codeNode) {
-    this.graph.removeNode(codeNode);
+  removeNode(e) {
+    this.graph.removeNode(e);
   }
   /**
    * Render node codes.
    */
   renderNodeCodes() {
-    if (this.codeNodes.length === 0) return;
-    this.codeNodes.forEach((node) => node.renderCode());
+    this.codeNodes.length !== 0 && this.codeNodes.forEach((e) => e.renderCode());
   }
   /**
    * Render code.
    */
   renderCode() {
-    this.state.script = mustache.render(this.state.template || "", this);
+    this.state.script = be.render(this.state.template || "", this);
   }
   /**
    * Save code graph.
    * @returns graph state
    */
   save() {
-    if (this.state.autosort) this.sortNodes();
-    const editorState = this.viewModel.editor.save();
-    editorState.graph.id = this.id;
-    this.saveNodeStates(editorState.graph.nodes);
-    return JSON.parse(JSON.stringify(editorState));
+    this.state.autosort && this.sortNodes();
+    const e = this.viewModel.editor.save();
+    return e.graph.id = this.id, this.saveNodeStates(e.graph.nodes), JSON.parse(JSON.stringify(e));
   }
   /**
    * Save node states.
    * @param nodeStates a list of node state.
    */
-  saveNodeStates(nodeStates) {
-    nodeStates.forEach((nodeState, nodeIdx) => {
-      const node = this.nodes[nodeIdx];
-      Object.entries(nodeState.inputs).forEach(([inputKey]) => {
-        if (nodeState.inputs && node.inputs[inputKey]) nodeState.inputs[inputKey].hidden = node.inputs[inputKey].hidden;
-      });
-      Object.entries(nodeState.outputs).forEach(([outputKey]) => {
-        if (nodeState.outputs && node.outputs[outputKey])
-          nodeState.outputs[outputKey].hidden = node.outputs[outputKey].hidden;
+  saveNodeStates(e) {
+    e.forEach((t, s) => {
+      const n = this.nodes[s];
+      Object.entries(t.inputs).forEach(([a]) => {
+        t.inputs && n.inputs[a] && (t.inputs[a].hidden = n.inputs[a].hidden);
+      }), Object.entries(t.outputs).forEach(([a]) => {
+        t.outputs && n.outputs[a] && (t.outputs[a].hidden = n.outputs[a].hidden);
       });
     });
   }
@@ -694,124 +548,85 @@ class Code {
    * Sort code nodes.
    */
   sortNodes() {
-    if (this.nodes.length === 0 || this.connections.length === 0) return;
-    try {
-      const edges = this.connections.map((connection) => [
-        connection.to.nodeId,
-        connection.from.nodeId
-      ]);
-      let nodeIds = [...this.nodeIds];
-      nodeIds.reverse();
-      nodeIds = toposort.array(nodeIds, edges);
-      nodeIds.reverse();
-      const unconnected = this.graph.nodes.map((node) => node.id).filter((nodeId) => !nodeIds.includes(nodeId));
-      nodeIds = nodeIds.concat(unconnected);
-      const nodes = nodeIds.map((nodeId) => this.findNodeById(nodeId));
-      if (nodes) this.nodes = nodes;
-    } catch {
-      console.warn("Failed to sort nodes.");
-    }
+    if (!(this.nodes.length === 0 || this.connections.length === 0))
+      try {
+        const e = this.connections.map((a) => [
+          a.to.nodeId,
+          a.from.nodeId
+        ]);
+        let t = [...this.nodeIds];
+        t.reverse(), t = vt.array(t, e), t.reverse();
+        const s = this.graph.nodes.map((a) => a.id).filter((a) => !t.includes(a));
+        t = t.concat(s);
+        const n = t.map((a) => this.findNodeById(a));
+        n && (this.nodes = n);
+      } catch {
+        console.warn("Failed to sort nodes.");
+      }
   }
   updateOutputVariableNames() {
-    this.codeNodes.forEach((codeNode) => codeNode.updateOutputVariableName());
+    this.codeNodes.forEach((e) => e.updateOutputVariableName());
   }
 }
-const getCodeNodes = (graph) => {
-  let nodes = [];
-  graph.nodes.forEach((node) => {
-    if (node.subgraph) {
-      nodes = nodes.concat(getCodeNodes(node.subgraph));
-    } else if (node.isCodeNode) {
-      nodes.push(node);
-    }
-  });
-  return nodes;
-};
-const getPositionAtColumn = (col = 0, offset = 100) => {
-  const width = 350;
-  const padding = 70;
-  return {
-    x: col * (width + padding),
-    y: offset
-  };
-};
-const getPositionBeforeNode = (node) => {
-  const position = { ...node.position };
-  position.x -= 400;
-  position.y += 50;
-  return position;
-};
-const transferCodeScript = (graph) => {
-  const { calculationOrder, connectionsFromNode } = sortTopologically(graph);
-  calculationOrder.forEach((node) => {
-    if (!node.isCodeNode) return;
-    const codeNode = node;
-    if (connectionsFromNode.has(codeNode)) {
-      connectionsFromNode.get(codeNode).forEach((c) => {
-        if (c.to.state && c.from.script) c.to.state.script = c.from.script;
-      });
-    }
+const Z = (o) => {
+  let e = [];
+  return o.nodes.forEach((t) => {
+    t.subgraph ? e = e.concat(Z(t.subgraph)) : t.isCodeNode && e.push(t);
+  }), e;
+}, on = (o = 0, e = 100) => ({
+  x: o * 420,
+  y: e
+}), an = (o) => {
+  const e = { ...o.position };
+  return e.x -= 400, e.y += 50, e;
+}, Nt = (o) => {
+  const { calculationOrder: e, connectionsFromNode: t } = Je(o);
+  e.forEach((s) => {
+    if (!s.isCodeNode) return;
+    const n = s;
+    t.has(n) && t.get(n).forEach((a) => {
+      a.to.state && a.from.script && (a.to.state.script = a.from.script);
+    });
   });
-};
-const _hoisted_1$e = ["id"];
-const _hoisted_2$5 = { class: "align-middle" };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+}, Mt = ["id"], Ot = { class: "align-middle" }, me = /* @__PURE__ */ G({
   __name: "CodeGraphNodeInterface",
   props: {
     node: {},
     intf: {}
   },
-  setup(__props) {
-    const props = __props;
-    const { viewModel } = useViewModel();
-    const { hoveredOver, temporaryConnection } = useTemporaryConnection();
-    const el = ref(null);
-    const isConnected = computed(() => props.intf.connectionCount > 0);
-    const classes = computed(() => ({
-      "--connected": isConnected.value
-    }));
-    const startHover = () => {
-      hoveredOver(props.intf);
-    };
-    const endHover = () => {
-      hoveredOver(void 0);
+  setup(o) {
+    const e = o, { viewModel: t } = F(), { hoveredOver: s, temporaryConnection: n } = qe(), a = E(null), u = f(() => e.intf.connectionCount > 0), d = f(() => ({
+      "--connected": u.value
+    })), h = () => {
+      s(e.intf);
+    }, O = () => {
+      s(void 0);
+    }, x = () => {
+      a.value && t.value.hooks.renderInterface.execute({ intf: e.intf, el: a.value });
     };
-    const onRender = () => {
-      if (el.value) {
-        viewModel.value.hooks.renderInterface.execute({ intf: props.intf, el: el.value });
-      }
-    };
-    onMounted(onRender);
-    onUpdated(onRender);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        id: _ctx.intf.id,
-        ref_key: "el",
-        ref: el,
-        class: normalizeClass(["baklava-node-interface", classes.value])
-      }, [
-        _ctx.intf.port ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass(["__port", { "--selected": unref(temporaryConnection)?.from === _ctx.intf }]),
-          onPointerover: startHover,
-          onPointerout: endHover
-        }, null, 34)) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$5, [
-          renderSlot(_ctx.$slots, "default")
-        ])
-      ], 10, _hoisted_1$e);
-    };
-  }
-});
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const _sfc_main$e = {};
-const _hoisted_1$d = {
+    return ee(x), _e(x), (k, B) => (i(), r("div", {
+      id: k.intf.id,
+      ref_key: "el",
+      ref: a,
+      class: U(["baklava-node-interface", d.value])
+    }, [
+      k.intf.port ? (i(), r("div", {
+        key: 0,
+        class: U(["__port", { "--selected": _(n)?.from === k.intf }]),
+        onPointerover: h,
+        onPointerout: O
+      }, null, 34)) : N("", !0),
+      l("span", Ot, [
+        q(k.$slots, "default")
+      ])
+    ], 10, Mt));
+  }
+}), z = (o, e) => {
+  const t = o.__vccOpts || o;
+  for (const [s, n] of e)
+    t[s] = n;
+  return t;
+}, $t = {}, Et = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -819,19 +634,17 @@ const _hoisted_1$d = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"
 };
-function _sfc_render$9(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$d, [..._cache[0] || (_cache[0] = [
-    createElementVNode("path", {
+function Tt(o, e) {
+  return i(), r("svg", Et, [...e[0] || (e[0] = [
+    l("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    createElementVNode("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)
+    l("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-2.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
   ])]);
 }
-const LayoutSidebarLeftCollapse = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$9]]);
-const _sfc_main$d = {};
-const _hoisted_1$c = {
+const St = /* @__PURE__ */ z($t, [["render", Tt]]), zt = {}, Bt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -839,19 +652,17 @@ const _hoisted_1$c = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-expand"
 };
-function _sfc_render$8(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$c, [..._cache[0] || (_cache[0] = [
-    createElementVNode("path", {
+function Vt(o, e) {
+  return i(), r("svg", Bt, [...e[0] || (e[0] = [
+    l("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    createElementVNode("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)
+    l("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm0 2h-9v14h9a1 1 0 0 0 .993 -.883l.007 -.117v-12a1 1 0 0 0 -.883 -.993l-.117 -.007zm-4.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
   ])]);
 }
-const LayoutSidebarLeftExpand = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$8]]);
-const _sfc_main$c = {};
-const _hoisted_1$b = {
+const Lt = /* @__PURE__ */ z(zt, [["render", Vt]]), Gt = {}, Ut = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -859,19 +670,17 @@ const _hoisted_1$b = {
   fill: "currentColor",
   class: "balkava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right"
 };
-function _sfc_render$7(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$b, [..._cache[0] || (_cache[0] = [
-    createElementVNode("path", {
+function jt(o, e) {
+  return i(), r("svg", Ut, [...e[0] || (e[0] = [
+    l("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    createElementVNode("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)
+    l("path", { d: "M6 21a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3zm8 -16h-8a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h8z" }, null, -1)
   ])]);
 }
-const LayoutSidebarRight = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$7]]);
-const _sfc_main$b = {};
-const _hoisted_1$a = {
+const Rt = /* @__PURE__ */ z(Gt, [["render", jt]]), Pt = {}, Dt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -879,19 +688,17 @@ const _hoisted_1$a = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-collapse"
 };
-function _sfc_render$6(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$a, [..._cache[0] || (_cache[0] = [
-    createElementVNode("path", {
+function At(o, e) {
+  return i(), r("svg", Dt, [...e[0] || (e[0] = [
+    l("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    createElementVNode("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)
+    l("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-5.387 4.21l.094 .083l2 2a1 1 0 0 1 .083 1.32l-.083 .094l-2 2a1 1 0 0 1 -1.497 -1.32l.083 -.094l1.292 -1.293l-1.292 -1.293a1 1 0 0 1 -.083 -1.32l.083 -.094a1 1 0 0 1 1.32 -.083z" }, null, -1)
   ])]);
 }
-const LayoutSidebarRightCollapse = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$6]]);
-const _sfc_main$a = {};
-const _hoisted_1$9 = {
+const Ht = /* @__PURE__ */ z(Pt, [["render", At]]), Ft = {}, Wt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -899,19 +706,17 @@ const _hoisted_1$9 = {
   fill: "currentColor",
   class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-expand"
 };
-function _sfc_render$5(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$9, [..._cache[0] || (_cache[0] = [
-    createElementVNode("path", {
+function Xt(o, e) {
+  return i(), r("svg", Wt, [...e[0] || (e[0] = [
+    l("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    createElementVNode("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)
+    l("path", { d: "M18 3a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h12zm-3 2h-9a1 1 0 0 0 -.993 .883l-.007 .117v12a1 1 0 0 0 .883 .993l.117 .007h9v-14zm-3.293 4.293a1 1 0 0 1 .083 1.32l-.083 .094l-1.292 1.293l1.292 1.293a1 1 0 0 1 .083 1.32l-.083 .094a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 -.083 -1.32l.083 -.094l2 -2a1 1 0 0 1 1.414 0z" }, null, -1)
   ])]);
 }
-const LayoutSidebarRightExpand = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$5]]);
-const _sfc_main$9 = {};
-const _hoisted_1$8 = {
+const Yt = /* @__PURE__ */ z(Ft, [["render", Xt]]), Jt = {}, qt = {
   xmlns: "http://www.w3.org/2000/svg",
   class: "baklava-icon",
   width: "24",
@@ -923,14 +728,12 @@ const _hoisted_1$8 = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-function _sfc_render$4(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$8, [..._cache[0] || (_cache[0] = [
-    createStaticVNode('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 2h5v4h-5z"></path><path d="M15 10h5v4h-5z"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h5"></path><path d="M7.5 6v4"></path><path d="M7.5 14v4"></path>', 8)
+function Qt(o, e) {
+  return i(), r("svg", qt, [...e[0] || (e[0] = [
+    te('<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 Schema = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$4]]);
-const _sfc_main$8 = {};
-const _hoisted_1$7 = {
+const Zt = /* @__PURE__ */ z(Jt, [["render", Qt]]), Kt = {}, es = {
   xmlns: "http://www.w3.org/2000/svg",
   class: "baklava-icon",
   width: "24",
@@ -942,14 +745,12 @@ const _hoisted_1$7 = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-function _sfc_render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$7, [..._cache[0] || (_cache[0] = [
-    createStaticVNode('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 2h4v4m-4 0h-1v-1"></path><path d="M15 11v-1h5v4h-2"></path><path d="M5 18h5v4h-5z"></path><path d="M5 10h5v4h-5z"></path><path d="M10 12h2"></path><path d="M7.5 7.5v2.5"></path><path d="M7.5 14v4"></path><path d="M3 3l18 18"></path>', 9)
+function ts(o, e) {
+  return i(), r("svg", es, [...e[0] || (e[0] = [
+    te('<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 SchemaOff = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$3]]);
-const _sfc_main$7 = {};
-const _hoisted_1$6 = {
+const ss = /* @__PURE__ */ z(Kt, [["render", ts]]), ns = {}, os = {
   xmlns: "http://www.w3.org/2000/svg",
   class: "baklava-icon",
   width: "24",
@@ -961,14 +762,12 @@ const _hoisted_1$6 = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$6, [..._cache[0] || (_cache[0] = [
-    createStaticVNode('<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 3l18 18"></path><path d="M4 7h3m4 0h9"></path><path d="M10 11l0 6"></path><path d="M14 14l0 3"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l.077 -.923"></path><path d="M18.384 14.373l.616 -7.373"></path><path d="M9 5v-1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>', 8)
+function as(o, e) {
+  return i(), r("svg", os, [...e[0] || (e[0] = [
+    te('<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 TrashOff = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$2]]);
-const _sfc_main$6 = {};
-const _hoisted_1$5 = {
+const is = /* @__PURE__ */ z(ns, [["render", as]]), rs = {}, ls = {
   xmlns: "http://www.w3.org/2000/svg",
   class: "baklava-icon",
   width: "16",
@@ -980,338 +779,262 @@ const _hoisted_1$5 = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$5, [..._cache[0] || (_cache[0] = [
-    createElementVNode("path", {
+function ds(o, e) {
+  return i(), r("svg", ls, [...e[0] || (e[0] = [
+    l("path", {
       stroke: "none",
       d: "M0 0h24v24H0z",
       fill: "none"
     }, null, -1),
-    createElementVNode("circle", {
+    l("circle", {
       cx: "12",
       cy: "12",
       r: "1"
     }, null, -1),
-    createElementVNode("circle", {
+    l("circle", {
       cx: "12",
       cy: "19",
       r: "1"
     }, null, -1),
-    createElementVNode("circle", {
+    l("circle", {
       cx: "12",
       cy: "5",
       r: "1"
     }, null, -1)
   ])]);
 }
-const VerticalDots = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$1]]);
-const _hoisted_1$4 = ["id", "data-node-type"];
-const _hoisted_2$4 = {
+const us = /* @__PURE__ */ z(rs, [["render", ds]]), cs = ["id", "data-node-type"], ps = {
   class: "__title-label",
   style: { "flex-grow": "1" }
-};
-const _hoisted_3$2 = { key: 0 };
-const _hoisted_4$1 = {
+}, hs = { key: 0 }, vs = {
   class: "__menu",
-  style: { "display": "flex" }
-};
-const _hoisted_5 = { class: "__outputs" };
-const _hoisted_6 = { key: 0 };
-const _hoisted_7 = ["id", "title"];
-const _hoisted_8 = { class: "__inputs" };
-const _hoisted_9 = { key: 0 };
-const _hoisted_10 = ["id", "title"];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  style: { display: "flex" }
+}, ms = { class: "__outputs" }, fs = { key: 0 }, gs = ["id", "title"], bs = { class: "__inputs" }, _s = { key: 0 }, ys = ["id", "title"], ws = /* @__PURE__ */ G({
   __name: "CodeGraphNode",
   props: {
     node: {},
-    selected: { type: Boolean, default: false },
+    selected: { type: Boolean, default: !1 },
     dragging: { type: Boolean }
   },
   emits: ["select", "start-drag", "update"],
-  setup(__props, { emit: __emit }) {
-    const ContextMenu = Components.ContextMenu;
-    const NodeInterface2 = Components.NodeInterface;
-    const props = __props;
-    const node = computed(() => props.node);
-    const emit = __emit;
-    const { viewModel } = useViewModel();
-    const { graph, switchGraph } = useGraph();
-    const el = ref(null);
-    const renaming = ref(false);
-    const tempName = ref("");
-    const renameInputEl = ref(null);
-    const isResizing = ref(false);
-    let resizeStartWidth = 0;
-    let resizeStartMouseX = 0;
-    const showContextMenu = ref(false);
-    const contextMenuItems = computed(() => {
-      const items = [
+  setup(o, { emit: e }) {
+    const t = ve.ContextMenu, s = ve.NodeInterface, n = o, a = f(() => n.node), u = e, { viewModel: d } = F(), { graph: h, switchGraph: O } = K(), x = E(null), k = E(!1), B = E(""), y = E(null), m = E(!1);
+    let g = 0, b = 0;
+    const p = E(!1), w = f(() => {
+      const c = [
         { value: "edit", label: "Edit" },
         { value: "rename", label: "Rename" },
         { value: "delete", label: "Delete" }
       ];
-      if (props.node.type.startsWith(GRAPH_NODE_TYPE_PREFIX)) {
-        items.push({ value: "editSubgraph", label: "Edit Subgraph" });
-      }
-      return items;
-    });
-    const classes = computed(() => ({
-      "--selected": props.selected,
-      "--dragging": props.dragging,
-      "--two-column": !!props.node.twoColumn,
-      "--hidden": node.value.state?.hidden
-    }));
-    const classesContent = computed(() => ({
-      "--reverse-y": props.node.reverseY ?? viewModel.value.settings.nodes.reverseY
-    }));
-    const styles = computed(() => ({
-      "top": `${props.node.position?.y ?? 0}px`,
-      "left": `${props.node.position?.x ?? 0}px`,
-      "--width": `${props.node.width ?? viewModel.value.settings.nodes.defaultWidth}px`
-    }));
-    const displayedInputs = computed(() => Object.values(props.node.inputs).filter((ni) => !ni.hidden));
-    const displayedOutputs = computed(() => Object.values(props.node.outputs).filter((ni) => !ni.hidden));
-    const select = () => {
-      emit("select");
-    };
-    const startDrag = (ev) => {
-      if (!props.selected) {
-        select();
-      }
-      emit("start-drag", ev);
-    };
-    const openContextMenu = () => {
-      showContextMenu.value = true;
-    };
-    const closeSidebar = () => {
-      const sidebar = viewModel.value.displayedGraph.sidebar;
-      sidebar.nodeId = "";
-      sidebar.visible = false;
-    };
-    const openSidebar = () => {
-      const sidebar = viewModel.value.displayedGraph.sidebar;
-      sidebar.nodeId = props.node.id;
-      sidebar.visible = true;
-    };
-    const updateSidebar = () => {
-      const sidebar = viewModel.value.displayedGraph.sidebar;
-      sidebar.nodeId = props.node.id;
-    };
-    const onContextMenuClick = async (action) => {
-      switch (action) {
+      return n.node.type.startsWith(J) && c.push({ value: "editSubgraph", label: "Edit Subgraph" }), c;
+    }), I = f(() => ({
+      "--selected": n.selected,
+      "--dragging": n.dragging,
+      "--two-column": !!n.node.twoColumn,
+      "--hidden": a.value.state?.hidden
+    })), Ie = f(() => ({
+      "--reverse-y": n.node.reverseY ?? d.value.settings.nodes.reverseY
+    })), Ne = f(() => ({
+      top: `${n.node.position?.y ?? 0}px`,
+      left: `${n.node.position?.x ?? 0}px`,
+      "--width": `${n.node.width ?? d.value.settings.nodes.defaultWidth}px`
+    })), Me = f(() => Object.values(n.node.inputs).filter((c) => !c.hidden)), Oe = f(() => Object.values(n.node.outputs).filter((c) => !c.hidden)), re = () => {
+      u("select");
+    }, $e = (c) => {
+      n.selected || re(), u("start-drag", c);
+    }, le = () => {
+      p.value = !0;
+    }, Ee = () => {
+      const c = d.value.displayedGraph.sidebar;
+      c.nodeId = "", c.visible = !1;
+    }, de = () => {
+      const c = d.value.displayedGraph.sidebar;
+      c.nodeId = n.node.id, c.visible = !0;
+    }, Te = () => {
+      const c = d.value.displayedGraph.sidebar;
+      c.nodeId = n.node.id;
+    }, Se = async (c) => {
+      switch (c) {
         case "edit":
-          openSidebar();
+          de();
           break;
         case "delete":
-          graph.value.removeNode(props.node);
+          h.value.removeNode(n.node);
           break;
         case "rename":
-          tempName.value = props.node.title;
-          renaming.value = true;
-          await nextTick();
-          renameInputEl.value?.focus();
+          B.value = n.node.title, k.value = !0, await it(), y.value?.focus();
           break;
         case "editSubgraph":
-          switchGraph(props.node.template);
+          O(n.node.template);
           break;
       }
+    }, ue = () => {
+      n.node.title = B.value, k.value = !1;
+    }, ce = () => {
+      x.value && d.value.hooks.renderNode.execute({ node: n.node, el: x.value });
+    }, ze = (c) => {
+      m.value = !0, g = n.node.width, b = c.clientX, c.preventDefault();
+    }, pe = (c) => {
+      if (!m.value) return;
+      const C = c.clientX - b, v = g + C / h.value.scaling, Be = d.value.settings.nodes.minWidth, Ve = d.value.settings.nodes.maxWidth;
+      n.node.width = Math.max(Be, Math.min(Ve, v));
+    }, he = () => {
+      m.value = !1;
     };
-    const doneRenaming = () => {
-      props.node.title = tempName.value;
-      renaming.value = false;
-    };
-    const onRender = () => {
-      if (el.value) {
-        viewModel.value.hooks.renderNode.execute({ node: props.node, el: el.value });
-      }
-    };
-    const startResize = (ev) => {
-      isResizing.value = true;
-      resizeStartWidth = props.node.width;
-      resizeStartMouseX = ev.clientX;
-      ev.preventDefault();
-    };
-    const doResize = (ev) => {
-      if (!isResizing.value) return;
-      const deltaX = ev.clientX - resizeStartMouseX;
-      const newWidth = resizeStartWidth + deltaX / graph.value.scaling;
-      const minWidth = viewModel.value.settings.nodes.minWidth;
-      const maxWidth = viewModel.value.settings.nodes.maxWidth;
-      props.node.width = Math.max(minWidth, Math.min(maxWidth, newWidth));
-    };
-    const stopResize = () => {
-      isResizing.value = false;
-    };
-    onMounted(() => {
-      onRender();
-      window.addEventListener("mousemove", doResize);
-      window.addEventListener("mouseup", stopResize);
-    });
-    onUpdated(onRender);
-    onBeforeUnmount(() => {
-      window.removeEventListener("mousemove", doResize);
-      window.removeEventListener("mouseup", stopResize);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        id: node.value.id,
-        ref_key: "el",
-        ref: el,
-        class: normalizeClass([classes.value, "baklava-node"]),
-        "data-node-type": node.value.type,
-        style: normalizeStyle(styles.value),
-        onPointerdown: select
+    return ee(() => {
+      ce(), window.addEventListener("mousemove", pe), window.addEventListener("mouseup", he);
+    }), _e(ce), ot(() => {
+      window.removeEventListener("mousemove", pe), window.removeEventListener("mouseup", he);
+    }), (c, C) => (i(), r("div", {
+      id: a.value.id,
+      ref_key: "el",
+      ref: x,
+      class: U([I.value, "baklava-node"]),
+      "data-node-type": a.value.type,
+      style: se(Ne.value),
+      onPointerdown: re
+    }, [
+      _(d).settings.nodes.resizable ? (i(), r("div", {
+        key: 0,
+        class: "__resize-handle",
+        onMousedown: ze
+      }, null, 32)) : N("", !0),
+      l("div", {
+        class: "__title",
+        onPointerdown: D($e, ["self", "stop"]),
+        onContextmenu: D(le, ["prevent"])
       }, [
-        unref(viewModel).settings.nodes.resizable ? (openBlock(), createElementBlock("div", {
+        a.value.inputs._node ? (i(), V(me, {
           key: 0,
-          class: "__resize-handle",
-          onMousedown: startResize
-        }, null, 32)) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: "__title",
-          onPointerdown: withModifiers(startDrag, ["self", "stop"]),
-          onContextmenu: withModifiers(openContextMenu, ["prevent"])
-        }, [
-          node.value.inputs._node ? (openBlock(), createBlock(_sfc_main$f, {
-            key: 0,
-            node: node.value,
-            intf: node.value.inputs._node,
-            class: "--input",
-            "data-interface-type": "node",
-            style: { "flex-grow": "0" }
-          }, null, 8, ["node", "intf"])) : createCommentVNode("", true),
-          !renaming.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            createElementVNode("div", _hoisted_2$4, [
-              node.value.idx > -1 ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(node.value.idx + 1) + " - ", 1)) : createCommentVNode("", true),
-              createTextVNode(toDisplayString(node.value.title) + " (" + toDisplayString(node.value.shortId) + ") ", 1)
-            ]),
-            createElementVNode("div", _hoisted_4$1, [
-              !node.value.subgraph ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                !unref(viewModel).displayedGraph.sidebar.visible && unref(viewModel).displayedGraph.sidebar.nodeId !== node.value.id ? (openBlock(), createBlock(unref(LayoutSidebarRightExpand), {
-                  key: 0,
-                  class: "--clickable mx-1",
-                  onClick: openSidebar
-                })) : unref(viewModel).displayedGraph.sidebar.visible && unref(viewModel).displayedGraph.sidebar.nodeId !== node.value.id ? (openBlock(), createBlock(unref(LayoutSidebarRight), {
-                  key: 1,
-                  class: "--clickable mx-1",
-                  onClick: updateSidebar
-                })) : (openBlock(), createBlock(unref(LayoutSidebarRightCollapse), {
-                  key: 2,
-                  class: "--clickable mx-1",
-                  onClick: closeSidebar
-                }))
-              ], 64)) : createCommentVNode("", true),
-              createVNode(unref(VerticalDots), {
-                class: "--clickable mx-1",
-                onClick: openContextMenu
-              }),
-              createVNode(unref(ContextMenu), {
-                modelValue: showContextMenu.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showContextMenu.value = $event),
-                x: 0,
-                y: 0,
-                items: contextMenuItems.value,
-                onClick: onContextMenuClick
-              }, null, 8, ["modelValue", "items"])
-            ])
-          ], 64)) : withDirectives((openBlock(), createElementBlock("input", {
-            key: 2,
-            ref_key: "renameInputEl",
-            ref: renameInputEl,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => tempName.value = $event),
-            class: "baklava-input",
-            placeholder: "Node Name",
-            style: { "flex-grow": "1" },
-            type: "text",
-            onBlur: doneRenaming,
-            onKeydown: withKeys(doneRenaming, ["enter"])
-          }, null, 544)), [
-            [vModelText, tempName.value]
-          ]),
-          node.value.outputs._node ? (openBlock(), createBlock(_sfc_main$f, {
-            key: 3,
-            node: node.value,
-            intf: node.value.outputs._node,
-            class: "--output",
-            "data-interface-type": "node"
-          }, null, 8, ["node", "intf"])) : createCommentVNode("", true)
-        ], 32),
-        createElementVNode("div", {
-          class: normalizeClass(["__content", classesContent.value]),
-          onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers(() => {
-          }, ["stop"]), ["delete"])),
-          onContextmenu: _cache[3] || (_cache[3] = withModifiers(() => {
-          }, ["prevent"]))
-        }, [
-          createElementVNode("div", _hoisted_5, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(displayedOutputs.value, (output) => {
-              return openBlock(), createElementBlock(Fragment, {
-                key: output.id
-              }, [
-                node.value.state?.hidden ? (openBlock(), createElementBlock("div", _hoisted_6, [
-                  output.port ? (openBlock(), createElementBlock("div", {
-                    key: 0,
-                    id: output.id,
-                    title: output.name,
-                    class: "baklava-node-interface --output --connected"
-                  }, [..._cache[4] || (_cache[4] = [
-                    createElementVNode("div", { class: "__port" }, null, -1)
-                  ])], 8, _hoisted_7)) : createCommentVNode("", true)
-                ])) : renderSlot(_ctx.$slots, "nodeInterface", {
-                  key: 1,
-                  type: "output",
-                  node: node.value,
-                  intf: output
-                }, () => [
-                  createVNode(unref(NodeInterface2), {
-                    node: node.value,
-                    intf: output
-                  }, null, 8, ["node", "intf"])
-                ])
-              ], 64);
-            }), 128))
+          node: a.value,
+          intf: a.value.inputs._node,
+          class: "--input",
+          "data-interface-type": "node",
+          style: { "flex-grow": "0" }
+        }, null, 8, ["node", "intf"])) : N("", !0),
+        k.value ? ne((i(), r("input", {
+          key: 2,
+          ref_key: "renameInputEl",
+          ref: y,
+          "onUpdate:modelValue": C[1] || (C[1] = (v) => B.value = v),
+          class: "baklava-input",
+          placeholder: "Node Name",
+          style: { "flex-grow": "1" },
+          type: "text",
+          onBlur: ue,
+          onKeydown: Q(ue, ["enter"])
+        }, null, 544)), [
+          [oe, B.value]
+        ]) : (i(), r(T, { key: 1 }, [
+          l("div", ps, [
+            a.value.idx > -1 ? (i(), r("span", hs, L(a.value.idx + 1) + " - ", 1)) : N("", !0),
+            at(L(a.value.title) + " (" + L(a.value.shortId) + ") ", 1)
           ]),
-          createElementVNode("div", _hoisted_8, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(displayedInputs.value, (input) => {
-              return openBlock(), createElementBlock(Fragment, {
-                key: input.id
-              }, [
-                node.value.state?.hidden ? (openBlock(), createElementBlock("div", _hoisted_9, [
-                  input.port ? (openBlock(), createElementBlock("div", {
-                    key: 0,
-                    id: input.id,
-                    title: input.name,
-                    class: "baklava-node-interface --input --connected"
-                  }, [..._cache[5] || (_cache[5] = [
-                    createElementVNode("div", { class: "__port" }, null, -1)
-                  ])], 8, _hoisted_10)) : createCommentVNode("", true)
-                ])) : renderSlot(_ctx.$slots, "nodeInterface", {
-                  key: 1,
-                  node: node.value,
-                  intf: input,
-                  type: "input"
-                }, () => [
-                  createVNode(unref(NodeInterface2), {
-                    node: node.value,
-                    intf: input,
-                    title: input.name
-                  }, null, 8, ["node", "intf", "title"])
-                ])
-              ], 64);
-            }), 128))
+          l("div", vs, [
+            a.value.subgraph ? N("", !0) : (i(), r(T, { key: 0 }, [
+              !_(d).displayedGraph.sidebar.visible && _(d).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), V(_(Yt), {
+                key: 0,
+                class: "--clickable mx-1",
+                onClick: de
+              })) : _(d).displayedGraph.sidebar.visible && _(d).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), V(_(Rt), {
+                key: 1,
+                class: "--clickable mx-1",
+                onClick: Te
+              })) : (i(), V(_(Ht), {
+                key: 2,
+                class: "--clickable mx-1",
+                onClick: Ee
+              }))
+            ], 64)),
+            S(_(us), {
+              class: "--clickable mx-1",
+              onClick: le
+            }),
+            S(_(t), {
+              modelValue: p.value,
+              "onUpdate:modelValue": C[0] || (C[0] = (v) => p.value = v),
+              x: 0,
+              y: 0,
+              items: w.value,
+              onClick: Se
+            }, null, 8, ["modelValue", "items"])
           ])
-        ], 34)
-      ], 46, _hoisted_1$4);
-    };
+        ], 64)),
+        a.value.outputs._node ? (i(), V(me, {
+          key: 3,
+          node: a.value,
+          intf: a.value.outputs._node,
+          class: "--output",
+          "data-interface-type": "node"
+        }, null, 8, ["node", "intf"])) : N("", !0)
+      ], 32),
+      l("div", {
+        class: U(["__content", Ie.value]),
+        onKeydown: C[2] || (C[2] = Q(D(() => {
+        }, ["stop"]), ["delete"])),
+        onContextmenu: C[3] || (C[3] = D(() => {
+        }, ["prevent"]))
+      }, [
+        l("div", ms, [
+          (i(!0), r(T, null, A(Oe.value, (v) => (i(), r(T, {
+            key: v.id
+          }, [
+            a.value.state?.hidden ? (i(), r("div", fs, [
+              v.port ? (i(), r("div", {
+                key: 0,
+                id: v.id,
+                title: v.name,
+                class: "baklava-node-interface --output --connected"
+              }, [...C[4] || (C[4] = [
+                l("div", { class: "__port" }, null, -1)
+              ])], 8, gs)) : N("", !0)
+            ])) : q(c.$slots, "nodeInterface", {
+              key: 1,
+              type: "output",
+              node: a.value,
+              intf: v
+            }, () => [
+              S(_(s), {
+                node: a.value,
+                intf: v
+              }, null, 8, ["node", "intf"])
+            ])
+          ], 64))), 128))
+        ]),
+        l("div", bs, [
+          (i(!0), r(T, null, A(Me.value, (v) => (i(), r(T, {
+            key: v.id
+          }, [
+            a.value.state?.hidden ? (i(), r("div", _s, [
+              v.port ? (i(), r("div", {
+                key: 0,
+                id: v.id,
+                title: v.name,
+                class: "baklava-node-interface --input --connected"
+              }, [...C[5] || (C[5] = [
+                l("div", { class: "__port" }, null, -1)
+              ])], 8, ys)) : N("", !0)
+            ])) : q(c.$slots, "nodeInterface", {
+              key: 1,
+              node: a.value,
+              intf: v,
+              type: "input"
+            }, () => [
+              S(_(s), {
+                node: a.value,
+                intf: v,
+                title: v.name
+              }, null, 8, ["node", "intf", "title"])
+            ])
+          ], 64))), 128))
+        ])
+      ], 34)
+    ], 46, cs));
   }
-});
-const _hoisted_1$3 = ["title"];
-const _hoisted_2$3 = {
+}), xs = ["title"], ks = {
   key: 0,
   class: "__label"
-};
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+}, Cs = /* @__PURE__ */ G({
   __name: "Checkbox",
   props: {
     modelValue: { type: Boolean },
@@ -1319,494 +1042,380 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     name: {}
   },
   emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["baklava-checkbox", { "--checked": _ctx.inversed ? !_ctx.modelValue : _ctx.modelValue }]),
-        title: _ctx.name,
-        onClick: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", !_ctx.modelValue))
-      }, [
-        _cache[1] || (_cache[1] = createElementVNode("div", { class: "__checkmark-container" }, [
-          createElementVNode("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "18",
-            height: "18",
-            viewBox: "0 0 18 18"
-          }, [
-            createElementVNode("path", {
-              class: "__checkmark",
-              d: "M 6 5 L 6 10 L 16 10",
-              transform: "rotate(-45 10 10)"
-            })
-          ])
-        ], -1)),
-        _ctx.name ? (openBlock(), createElementBlock("div", _hoisted_2$3, toDisplayString(_ctx.name), 1)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$3);
-    };
+  setup(o, { emit: e }) {
+    const t = e;
+    return (s, n) => (i(), r("div", {
+      class: U(["baklava-checkbox", { "--checked": s.inversed ? !s.modelValue : s.modelValue }]),
+      title: s.name,
+      onClick: n[0] || (n[0] = (a) => t("update:modelValue", !s.modelValue))
+    }, [
+      n[1] || (n[1] = l("div", { class: "__checkmark-container" }, [
+        l("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "18",
+          height: "18",
+          viewBox: "0 0 18 18"
+        }, [
+          l("path", {
+            class: "__checkmark",
+            d: "M 6 5 L 6 10 L 16 10",
+            transform: "rotate(-45 10 10)"
+          })
+        ])
+      ], -1)),
+      s.name ? (i(), r("div", ks, L(s.name), 1)) : N("", !0)
+    ], 10, xs));
   }
-});
-const _hoisted_1$2 = { class: "__header" };
-const _hoisted_2$2 = { class: "__node-name" };
-const _hoisted_3$1 = { style: { "display": "flex" } };
-const _hoisted_4 = {
+}), Is = { class: "__header" }, Ns = { class: "__node-name" }, Ms = { style: { display: "flex" } }, Os = {
   key: 1,
   class: "__interface"
-};
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+}, $s = /* @__PURE__ */ G({
   __name: "CodeGraphSidebar",
-  setup(__props) {
-    const { viewModel } = useViewModel();
-    const { graph } = useGraph();
-    const el = ref(null);
-    const width = toRef(viewModel.value.settings.sidebar, "width");
-    const resizable = computed(() => viewModel.value.settings.sidebar.resizable);
-    let resizeStartWidth = 0;
-    let resizeStartMouseX = 0;
-    const node = computed(() => {
-      const id = graph.value.sidebar.nodeId;
-      return graph.value.nodes.find((x) => x.id === id);
-    });
-    const codeNode = computed(() => node.value);
-    const styles = computed(() => ({
-      width: `${width.value}px`
-    }));
-    const displayedInterfaces = computed(() => {
-      if (!node.value) return [];
-      const allIntfs = [...Object.values(node.value.inputs), ...Object.values(node.value.outputs)];
-      return allIntfs.filter((intf) => intf.displayInSidebar && intf.component);
-    });
-    const close = () => {
-      graph.value.sidebar.visible = false;
-    };
-    const doneRenaming = () => {
-      node.value?.events.update.emit(null);
-    };
-    const startResize = (event) => {
-      resizeStartWidth = width.value;
-      resizeStartMouseX = event.clientX;
-      window.addEventListener("mousemove", onMouseMove);
-      window.addEventListener(
+  setup(o) {
+    const { viewModel: e } = F(), { graph: t } = K(), s = E(null), n = ye(e.value.settings.sidebar, "width"), a = f(() => e.value.settings.sidebar.resizable);
+    let u = 0, d = 0;
+    const h = f(() => {
+      const b = t.value.sidebar.nodeId;
+      return t.value.nodes.find((p) => p.id === b);
+    }), O = f(() => h.value), x = f(() => ({
+      width: `${n.value}px`
+    })), k = f(() => h.value ? [...Object.values(h.value.inputs), ...Object.values(h.value.outputs)].filter((p) => p.displayInSidebar && p.component) : []), B = () => {
+      t.value.sidebar.visible = !1;
+    }, y = () => {
+      h.value?.events.update.emit(null);
+    }, m = (b) => {
+      u = n.value, d = b.clientX, window.addEventListener("mousemove", g), window.addEventListener(
         "mouseup",
         () => {
-          window.removeEventListener("mousemove", onMouseMove);
+          window.removeEventListener("mousemove", g);
         },
-        { once: true }
+        { once: !0 }
       );
+    }, g = (b) => {
+      const p = s.value?.parentElement?.getBoundingClientRect().width ?? 500, w = b.clientX - d;
+      let I = u - w;
+      I < 300 ? I = 300 : I > 0.9 * p && (I = 0.9 * p), n.value = I;
     };
-    const onMouseMove = (event) => {
-      const maxwidth = el.value?.parentElement?.getBoundingClientRect().width ?? 500;
-      const deltaX = event.clientX - resizeStartMouseX;
-      let newWidth = resizeStartWidth - deltaX;
-      if (newWidth < 300) {
-        newWidth = 300;
-      } else if (newWidth > 0.9 * maxwidth) {
-        newWidth = 0.9 * maxwidth;
-      }
-      width.value = newWidth;
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "el",
-        ref: el,
-        class: normalizeClass(["baklava-sidebar", { "--open": unref(graph).sidebar.visible }]),
-        style: normalizeStyle(styles.value)
+    return (b, p) => (i(), r("div", {
+      ref_key: "el",
+      ref: s,
+      class: U(["baklava-sidebar", { "--open": _(t).sidebar.visible }]),
+      style: se(x.value)
+    }, [
+      a.value ? (i(), r("div", {
+        key: 0,
+        class: "__resizer",
+        onMousedown: m
+      }, null, 32)) : N("", !0),
+      l("div", Is, [
+        l("button", {
+          tabindex: "-1",
+          class: "__close",
+          onClick: B
+        }, "×"),
+        l("div", Ns, [
+          l("b", null, L(h.value ? h.value.title : ""), 1)
+        ])
+      ]),
+      (i(!0), r(T, null, A(k.value, (w) => (i(), r("div", {
+        key: w.id,
+        class: "__interface"
       }, [
-        resizable.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "__resizer",
-          onMousedown: startResize
-        }, null, 32)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_1$2, [
-          createElementVNode("button", {
-            tabindex: "-1",
-            class: "__close",
-            onClick: close
-          }, "×"),
-          createElementVNode("div", _hoisted_2$2, [
-            createElementVNode("b", null, toDisplayString(node.value ? node.value.title : ""), 1)
-          ])
-        ]),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(displayedInterfaces.value, (intf) => {
-          return openBlock(), createElementBlock("div", {
-            key: intf.id,
-            class: "__interface"
-          }, [
-            createElementVNode("div", _hoisted_3$1, [
-              createVNode(_sfc_main$4, {
-                modelValue: intf.hidden,
-                "onUpdate:modelValue": [
-                  ($event) => intf.hidden = $event,
-                  _cache[0] || (_cache[0] = () => node.value?.events.update.emit(null))
-                ],
-                inversed: "",
-                style: { "margin-right": "8px" }
-              }, null, 8, ["modelValue", "onUpdate:modelValue"]),
-              (openBlock(), createBlock(resolveDynamicComponent(intf.component), {
-                modelValue: intf.value,
-                "onUpdate:modelValue": ($event) => intf.value = $event,
-                node: node.value,
-                intf,
-                style: { "width": "100%" }
-              }, null, 8, ["modelValue", "onUpdate:modelValue", "node", "intf"]))
-            ])
-          ]);
-        }), 128)),
-        codeNode.value && codeNode.value.state ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          _cache[2] || (_cache[2] = createElementVNode("label", null, "Variable name", -1)),
-          withDirectives(createElementVNode("input", {
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => codeNode.value.state.variableName = $event),
-            type: "text",
-            class: "baklava-input",
-            title: "Variable name",
-            onBlur: doneRenaming,
-            onKeydown: withKeys(doneRenaming, ["enter"])
-          }, null, 544), [
-            [vModelText, codeNode.value.state.variableName]
-          ])
-        ])) : createCommentVNode("", true)
-      ], 6);
-    };
+        l("div", Ms, [
+          S(Cs, {
+            modelValue: w.hidden,
+            "onUpdate:modelValue": [
+              (I) => w.hidden = I,
+              p[0] || (p[0] = () => h.value?.events.update.emit(null))
+            ],
+            inversed: "",
+            style: { "margin-right": "8px" }
+          }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+          (i(), V(rt(w.component), {
+            modelValue: w.value,
+            "onUpdate:modelValue": (I) => w.value = I,
+            node: h.value,
+            intf: w,
+            style: { width: "100%" }
+          }, null, 8, ["modelValue", "onUpdate:modelValue", "node", "intf"]))
+        ])
+      ]))), 128)),
+      O.value && O.value.state ? (i(), r("div", Os, [
+        p[2] || (p[2] = l("label", null, "Variable name", -1)),
+        ne(l("input", {
+          "onUpdate:modelValue": p[1] || (p[1] = (w) => O.value.state.variableName = w),
+          type: "text",
+          class: "baklava-input",
+          title: "Variable name",
+          onBlur: y,
+          onKeydown: Q(y, ["enter"])
+        }, null, 544), [
+          [oe, O.value.state.variableName]
+        ])
+      ])) : N("", !0)
+    ], 6));
   }
-});
-const _sfc_main$2 = defineComponent({
+}), Es = G({
   props: {
     type: {
       type: String,
-      required: true
+      required: !0
     },
     title: {
       type: String,
-      required: true
+      required: !0
     }
   },
-  setup(props) {
-    const { viewModel } = useViewModel();
-    const { switchGraph } = useGraph();
-    const showContextMenu = ref(false);
-    const hasContextMenu = computed(() => props.type.startsWith(GRAPH_NODE_TYPE_PREFIX));
-    const contextMenuItems = [
+  setup(o) {
+    const { viewModel: e } = F(), { switchGraph: t } = K(), s = E(!1), n = f(() => o.type.startsWith(J));
+    return { showContextMenu: s, hasContextMenu: n, contextMenuItems: [
       { label: "Edit Subgraph", value: "editSubgraph" },
       { label: "Delete Subgraph", value: "deleteSubgraph" }
-    ];
-    const openContextMenu = () => {
-      showContextMenu.value = true;
-    };
-    const onContextMenuClick = (action) => {
-      const graphTemplateId = props.type.substring(GRAPH_NODE_TYPE_PREFIX.length);
-      const graphTemplate = viewModel.value.editor.graphTemplates.find((gt) => gt.id === graphTemplateId);
-      if (!graphTemplate) {
-        return;
-      }
-      switch (action) {
-        case "editSubgraph":
-          switchGraph(graphTemplate);
-          break;
-        case "deleteSubgraph":
-          viewModel.value.editor.removeGraphTemplate(graphTemplate);
-          break;
-      }
-    };
-    return { showContextMenu, hasContextMenu, contextMenuItems, openContextMenu, onContextMenuClick };
+    ], openContextMenu: () => {
+      s.value = !0;
+    }, onContextMenuClick: (h) => {
+      const O = o.type.substring(J.length), x = e.value.editor.graphTemplates.find((k) => k.id === O);
+      if (x)
+        switch (h) {
+          case "editSubgraph":
+            t(x);
+            break;
+          case "deleteSubgraph":
+            e.value.editor.removeGraphTemplate(x);
+            break;
+        }
+    } };
   }
-});
-const _hoisted_1$1 = ["data-node-type"];
-const _hoisted_2$1 = { class: "__title" };
-const _hoisted_3 = { class: "__title-label" };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
+}), Ts = ["data-node-type"], Ss = { class: "__title" }, zs = { class: "__title-label" };
+function Bs(o, e, t, s, n, a) {
+  return i(), r("div", {
     class: "baklava-node --palette",
-    "data-node-type": _ctx.type
+    "data-node-type": o.type
   }, [
-    createElementVNode("div", _hoisted_2$1, [
-      createElementVNode("div", _hoisted_3, toDisplayString(_ctx.title), 1)
+    l("div", Ss, [
+      l("div", zs, L(o.title), 1)
     ])
-  ], 8, _hoisted_1$1);
+  ], 8, Ts);
 }
-const PaletteEntry = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
-const _hoisted_1 = {
+const fe = /* @__PURE__ */ z(Es, [["render", Bs]]), Vs = {
   class: "baklava-node --palette",
   style: { "margin-top": "-20px", "margin-bottom": "30px" }
-};
-const _hoisted_2 = { key: 0 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+}, Ls = { key: 0 }, Gs = /* @__PURE__ */ G({
   __name: "CodeNodePalette",
-  setup(__props) {
-    const { viewModel } = useViewModel();
-    const { x: mouseX, y: mouseY } = usePointer();
-    const { transform } = useTransform();
-    const categories = useNodeCategories(viewModel);
-    const editorEl = inject("editorEl");
-    const searchQuery = ref("");
-    const draggedNode = ref(null);
-    const filterCategoryBySearch = (categories2) => {
-      if (searchQuery.value) {
-        return categories2.filter(
-          (c) => Object.values(c.nodeTypes).some(
-            (nodeType2) => nodeType2.title.toLowerCase().includes(searchQuery.value?.toLowerCase())
-          )
-        );
-      }
-      return categories2;
-    };
-    const filterNodesBySearch = (nodeTypes) => {
-      if (searchQuery.value) {
-        return Object.values(nodeTypes).filter(
-          (nt) => nt.title.toLowerCase().includes(searchQuery.value?.toLowerCase())
-        );
-      }
-      return Object.values(nodeTypes);
-    };
-    const draggedNodeStyles = computed(() => {
-      if (!draggedNode.value || !editorEl?.value) return {};
-      const { left, top } = editorEl.value.getBoundingClientRect();
+  setup(o) {
+    const { viewModel: e } = F(), { x: t, y: s } = ft(), { transform: n } = Qe(), a = Ze(e), u = lt("editorEl"), d = E(""), h = E(null), O = (y) => d.value ? y.filter(
+      (m) => Object.values(m.nodeTypes).some(
+        (g) => g.title.toLowerCase().includes(d.value?.toLowerCase())
+      )
+    ) : y, x = (y) => d.value ? Object.values(y).filter(
+      (m) => m.title.toLowerCase().includes(d.value?.toLowerCase())
+    ) : Object.values(y), k = f(() => {
+      if (!h.value || !u?.value) return {};
+      const { left: y, top: m } = u.value.getBoundingClientRect();
       return {
-        top: `${mouseY.value - top}px`,
-        left: `${mouseX.value - left}px`
+        top: `${s.value - m}px`,
+        left: `${t.value - y}px`
       };
-    });
-    const onDragStart = (type, nodeInformation) => {
-      draggedNode.value = {
-        type,
-        nodeInformation
+    }), B = (y, m) => {
+      h.value = {
+        type: y,
+        nodeInformation: m
       };
-      const onDragEnd = () => {
-        const instance = reactive(new nodeInformation.type());
-        viewModel.value.displayedGraph.addNode(instance);
-        const rect = editorEl.value.getBoundingClientRect();
-        const [x, y] = transform(mouseX.value - rect.left, mouseY.value - rect.top);
-        instance.position.x = x;
-        instance.position.y = y;
-        draggedNode.value = null;
-        document.removeEventListener("pointerup", onDragEnd);
+      const g = () => {
+        const b = R(new m.type());
+        e.value.displayedGraph.addNode(b);
+        const p = u.value.getBoundingClientRect(), [w, I] = n(t.value - p.left, s.value - p.top);
+        b.position.x = w, b.position.y = I, h.value = null, document.removeEventListener("pointerup", g);
       };
-      document.addEventListener("pointerup", onDragEnd);
+      document.addEventListener("pointerup", g);
     };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", {
-          class: normalizeClass(["baklava-node-palette", { "--open": unref(viewModel).settings.palette.enabled }]),
-          onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {
-          }, ["stop", "prevent"]))
+    return (y, m) => (i(), r(T, null, [
+      l("div", {
+        class: U(["baklava-node-palette", { "--open": _(e).settings.palette.enabled }]),
+        onContextmenu: m[1] || (m[1] = D(() => {
+        }, ["stop", "prevent"]))
+      }, [
+        l("div", Vs, [
+          ne(l("input", {
+            "onUpdate:modelValue": m[0] || (m[0] = (g) => d.value = g),
+            type: "text",
+            class: "baklava-input",
+            title: "Filter node types"
+          }, null, 512), [
+            [oe, d.value]
+          ])
+        ]),
+        (i(!0), r(T, null, A(O(_(a)), (g) => (i(), r("section", {
+          key: g.name
         }, [
-          createElementVNode("div", _hoisted_1, [
-            withDirectives(createElementVNode("input", {
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
-              type: "text",
-              class: "baklava-input",
-              title: "Filter node types"
-            }, null, 512), [
-              [vModelText, searchQuery.value]
-            ])
-          ]),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(filterCategoryBySearch(unref(categories)), (c) => {
-            return openBlock(), createElementBlock("section", {
-              key: c.name
-            }, [
-              c.name !== "default" ? (openBlock(), createElementBlock("h3", _hoisted_2, toDisplayString(c.name), 1)) : createCommentVNode("", true),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(filterNodesBySearch(c.nodeTypes), (ni, nt) => {
-                return openBlock(), createBlock(PaletteEntry, {
-                  key: nt,
-                  type: nt,
-                  title: ni.title,
-                  onPointerdown: ($event) => onDragStart(nt, ni)
-                }, null, 8, ["type", "title", "onPointerdown"]);
-              }), 128))
-            ]);
-          }), 128))
-        ], 34),
-        createVNode(Transition, { name: "fade" }, {
-          default: withCtx(() => [
-            draggedNode.value ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: "baklava-dragged-node",
-              style: normalizeStyle(draggedNodeStyles.value)
-            }, [
-              createVNode(PaletteEntry, {
-                type: draggedNode.value.type,
-                title: draggedNode.value.nodeInformation.title
-              }, null, 8, ["type", "title"])
-            ], 4)) : createCommentVNode("", true)
-          ]),
-          _: 1
-        })
-      ], 64);
-    };
+          g.name !== "default" ? (i(), r("h3", Ls, L(g.name), 1)) : N("", !0),
+          (i(!0), r(T, null, A(x(g.nodeTypes), (b, p) => (i(), V(fe, {
+            key: p,
+            type: p,
+            title: b.title,
+            onPointerdown: (w) => B(p, b)
+          }, null, 8, ["type", "title", "onPointerdown"]))), 128))
+        ]))), 128))
+      ], 34),
+      S(dt, { name: "fade" }, {
+        default: X(() => [
+          h.value ? (i(), r("div", {
+            key: 0,
+            class: "baklava-dragged-node",
+            style: se(k.value)
+          }, [
+            S(fe, {
+              type: h.value.type,
+              title: h.value.nodeInformation.title
+            }, null, 8, ["type", "title"])
+          ], 4)) : N("", !0)
+        ]),
+        _: 1
+      })
+    ], 64));
   }
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
+}), rn = /* @__PURE__ */ G({
   __name: "CodeGraphEditor",
   props: {
     viewModel: {}
   },
-  setup(__props) {
-    const props = __props;
-    const viewModel = toRef(props, "viewModel");
-    const onUpdate = (node) => node.events.update.emit(null);
-    onMounted(() => {
-      viewModel.value.subscribe();
-      viewModel.value.engine.start();
-    });
-    onUnmounted(() => {
-      viewModel.value.unsubscribe();
-      viewModel.value.engine.stop();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(BaklavaEditor), { "view-model": viewModel.value }, {
-        palette: withCtx(() => [
-          createVNode(_sfc_main$1)
-        ]),
-        node: withCtx((nodeProps) => [
-          createVNode(_sfc_main$5, mergeProps(nodeProps, {
-            onUpdate: ($event) => onUpdate(nodeProps.node)
-          }), null, 16, ["onUpdate"])
-        ]),
-        sidebar: withCtx((nodeProps) => [
-          createVNode(_sfc_main$3, normalizeProps(guardReactiveProps(nodeProps)), null, 16)
-        ]),
-        _: 1
-      }, 8, ["view-model"]);
-    };
-  }
-});
-const addToolbarCommands = (viewModel) => {
-  const TOGGLE_PALETTE_COMMAND = "TOGGLE_PALETTE";
-  viewModel.commandHandler.registerCommand(TOGGLE_PALETTE_COMMAND, {
-    execute: () => viewModel.settings.palette.enabled = !viewModel.settings.palette.enabled,
-    canExecute: () => true
+  setup(o) {
+    const t = ye(o, "viewModel"), s = (n) => n.events.update.emit(null);
+    return ee(() => {
+      t.value.subscribe(), t.value.engine.start();
+    }), ut(() => {
+      t.value.unsubscribe(), t.value.engine.stop();
+    }), (n, a) => (i(), V(_(Ke), { "view-model": t.value }, {
+      palette: X(() => [
+        S(Gs)
+      ]),
+      node: X((u) => [
+        S(ws, ht(u, {
+          onUpdate: (d) => s(u.node)
+        }), null, 16, ["onUpdate"])
+      ]),
+      sidebar: X((u) => [
+        S($s, ct(pt(u)), null, 16)
+      ]),
+      _: 1
+    }, 8, ["view-model"]));
+  }
+}), Us = (o) => {
+  const e = "TOGGLE_PALETTE";
+  o.commandHandler.registerCommand(e, {
+    execute: () => o.settings.palette.enabled = !o.settings.palette.enabled,
+    canExecute: () => !0
   });
-  const CLEAR_ALL_COMMAND = "CLEAR_ALL";
-  viewModel.commandHandler.registerCommand(CLEAR_ALL_COMMAND, {
-    execute: () => viewModel.displayedGraph.nodes.forEach((node) => viewModel.displayedGraph.removeNode(node)),
-    canExecute: () => viewModel.displayedGraph.nodes.length > 0
+  const t = "CLEAR_ALL";
+  o.commandHandler.registerCommand(t, {
+    execute: () => o.displayedGraph.nodes.forEach((n) => o.displayedGraph.removeNode(n)),
+    canExecute: () => o.displayedGraph.nodes.length > 0
   });
-  const TOGGLE_MINIMAP_COMMAND = "TOGGLE_MINIMAP";
-  viewModel.commandHandler.registerCommand(TOGGLE_MINIMAP_COMMAND, {
-    execute: () => viewModel.settings.enableMinimap = !viewModel.settings.enableMinimap,
-    canExecute: () => viewModel.displayedGraph.nodes.length > 1
-  });
-  viewModel.settings.toolbar.commands = [
+  const s = "TOGGLE_MINIMAP";
+  o.commandHandler.registerCommand(s, {
+    execute: () => o.settings.enableMinimap = !o.settings.enableMinimap,
+    canExecute: () => o.displayedGraph.nodes.length > 1
+  }), o.settings.toolbar.commands = [
     {
-      command: TOGGLE_PALETTE_COMMAND,
+      command: e,
       title: "Toggle palette",
       // Tooltip text
-      icon: computed(() => viewModel.settings.palette.enabled ? LayoutSidebarLeftCollapse : LayoutSidebarLeftExpand)
+      icon: f(() => o.settings.palette.enabled ? St : Lt)
     },
-    ...DEFAULT_TOOLBAR_COMMANDS,
+    ...et,
     {
-      command: CLEAR_ALL_COMMAND,
+      command: t,
       title: "Clear all",
       // Tooltip text
-      icon: TrashOff
+      icon: is
     },
     {
-      command: TOGGLE_MINIMAP_COMMAND,
+      command: s,
       title: "Toggle minimap",
       // Tooltip text
-      icon: computed(() => viewModel.settings.enableMinimap ? SchemaOff : Schema)
+      icon: f(() => o.settings.enableMinimap ? ss : Zt)
     }
   ];
-};
-const DEFAULT_SETTINGS = {
-  enableMinimap: false,
+}, W = {
+  enableMinimap: !1,
   toolbar: {
-    enabled: true
+    enabled: !0
   },
   palette: {
-    enabled: true
+    enabled: !0
   },
   sidebar: {
-    enabled: true,
-    resizable: true,
+    enabled: !0,
+    resizable: !0,
     width: 350
   },
-  displayValueOnHover: false
+  displayValueOnHover: !1
 };
-function useCodeGraph(props) {
-  const viewModel = useBaklava(props?.existingEditor);
-  viewModel.code = props?.code ? new props.code(viewModel) : new Code(viewModel);
-  addToolbarCommands(viewModel);
-  const settings = {};
-  Object.keys(DEFAULT_SETTINGS).forEach((K) => {
-    settings[K] = typeof DEFAULT_SETTINGS[K] === "object" ? { ...viewModel.settings[K], ...DEFAULT_SETTINGS[K] } : DEFAULT_SETTINGS[K];
-  });
-  viewModel.settings = reactive({ ...viewModel.settings, ...settings });
-  viewModel.settings.nodes.defaultWidth = 350;
-  viewModel.state = reactive({
+function ln(o) {
+  const e = tt(o?.existingEditor);
+  e.code = o?.code ? new o.code(e) : new It(e), Us(e);
+  const t = {};
+  return Object.keys(W).forEach((s) => {
+    t[s] = typeof W[s] == "object" ? { ...e.settings[s], ...W[s] } : W[s];
+  }), e.settings = R({ ...e.settings, ...t }), e.settings.nodes.defaultWidth = 350, e.state = R({
     modules: {},
     token: null
-  });
-  viewModel.engine = new DependencyEngine(viewModel.editor);
-  viewModel.subscribe = () => {
-    if (viewModel.state.token) viewModel.unsubscribe();
-    const token = Symbol();
-    viewModel.displayedGraph.events.addNode.subscribe(token, (node) => node.code = viewModel.code);
-    viewModel.engine.events.beforeRun.subscribe(token, () => {
-      viewModel.engine.pause();
-      if (viewModel.code) {
-        viewModel.code.onCodeUpdate();
-        viewModel.code.sortNodes();
-        viewModel.code.updateOutputVariableNames();
-      }
-      viewModel.engine.resume();
-    });
-    viewModel.engine.events.afterRun.subscribe(token, (result) => {
-      viewModel.engine.pause();
-      applyResult(result, viewModel.editor);
-      transferCodeScript(viewModel.displayedGraph);
-      if (viewModel.code) {
-        viewModel.code.renderNodeCodes();
-        viewModel.code.renderCode();
-      }
-      viewModel.engine.resume();
-    });
-    viewModel.state.token = token;
-  };
-  viewModel.unsubscribe = () => {
-    if (!viewModel.state.token) return;
-    const token = viewModel.state.token;
-    viewModel.displayedGraph.events.addNode.unsubscribe(token);
-    viewModel.engine.events.beforeRun.unsubscribe(token);
-    viewModel.engine.events.afterRun.unsubscribe(token);
-    viewModel.state.token = null;
-  };
-  return viewModel;
+  }), e.engine = new st(e.editor), e.subscribe = () => {
+    e.state.token && e.unsubscribe();
+    const s = Symbol();
+    e.displayedGraph.events.addNode.subscribe(s, (n) => n.code = e.code), e.engine.events.beforeRun.subscribe(s, () => {
+      e.engine.pause(), e.code && (e.code.onCodeUpdate(), e.code.sortNodes(), e.code.updateOutputVariableNames()), e.engine.resume();
+    }), e.engine.events.afterRun.subscribe(s, (n) => {
+      e.engine.pause(), nt(n, e.editor), Nt(e.displayedGraph), e.code && (e.code.renderNodeCodes(), e.code.renderCode()), e.engine.resume();
+    }), e.state.token = s;
+  }, e.unsubscribe = () => {
+    if (!e.state.token) return;
+    const s = e.state.token;
+    e.displayedGraph.events.addNode.unsubscribe(s), e.engine.events.beforeRun.unsubscribe(s), e.engine.events.afterRun.unsubscribe(s), e.state.token = null;
+  }, e;
 }
 export {
-  AbstractCodeNode,
-  ButtonInterface,
-  ButtonInterfaceComponent2 as ButtonInterfaceComponent,
-  CheckboxInterface,
-  CheckboxInterfaceComponent2 as CheckboxInterfaceComponent,
-  Code,
-  _sfc_main as CodeGraphEditor,
-  CodeInputInterface,
-  CodeNode,
-  CodeNodeInterface,
-  CodeOutputInterface,
-  DEFAULT_SETTINGS,
-  DynamicCodeNode,
-  IntegerInterface,
-  IntegerInterfaceComponent2 as IntegerInterfaceComponent,
-  NumberInterface,
-  NumberInterfaceComponent2 as NumberInterfaceComponent,
-  SelectInterface,
-  SelectInterfaceComponent2 as SelectInterfaceComponent,
-  SliderInterface,
-  SliderInterfaceComponent2 as SliderInterfaceComponent,
-  TextInputInterface,
-  TextInputInterfaceComponent2 as TextInputInterfaceComponent,
-  TextInterface,
-  TextareaInputInterface,
-  TextareaInputInterfaceComponent2 as TextareaInputInterfaceComponent,
-  addToolbarCommands,
-  defineCodeNode,
-  defineDynamicCodeNode,
-  getCodeNodes,
-  getPositionAtColumn,
-  getPositionBeforeNode,
-  loadNodeState,
-  saveNodeState,
-  transferCodeScript,
-  useCodeGraph
+  gt as AbstractCodeNode,
+  Ws as ButtonInterface,
+  cn as ButtonInterfaceComponent,
+  Xs as CheckboxInterface,
+  pn as CheckboxInterfaceComponent,
+  It as Code,
+  rn as CodeGraphEditor,
+  Js as CodeInputInterface,
+  we as CodeNode,
+  M as CodeNodeInterface,
+  kt as CodeOutputInterface,
+  W as DEFAULT_SETTINGS,
+  Ct as DynamicCodeNode,
+  Ys as IntegerInterface,
+  hn as IntegerInterfaceComponent,
+  qs as NumberInterface,
+  vn as NumberInterfaceComponent,
+  Qs as SelectInterface,
+  mn as SelectInterfaceComponent,
+  Zs as SliderInterface,
+  fn as SliderInterfaceComponent,
+  en as TextInputInterface,
+  gn as TextInputInterfaceComponent,
+  Ks as TextInterface,
+  tn as TextareaInputInterface,
+  bn as TextareaInputInterfaceComponent,
+  Fs as addDefaultTypes,
+  Us as addToolbarCommands,
+  _t as booleanType,
+  sn as defineCodeNode,
+  nn as defineDynamicCodeNode,
+  yt as dictType,
+  Z as getCodeNodes,
+  on as getPositionAtColumn,
+  an as getPositionBeforeNode,
+  wt as listType,
+  xe as loadNodeState,
+  H as nodeType,
+  ke as numberType,
+  bt as saveNodeState,
+  Ce as stringType,
+  Nt as transferCodeScript,
+  ln as useCodeGraph
 };