npm - @babsey/code-graph - Versions diffs - 0.0.7 → 0.0.9 - Mend

@babsey/code-graph 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/code-graph.css +1 -37
package/dist/code-graph.js +869 -1265
package/dist/code-graph.umd.cjs +1 -1833
package/dist/lib/index.d.ts +0 -1
package/package.json +2 -3

package/dist/code-graph.js CHANGED Viewed

@@ -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 Be, NodeInterfaceType as P, NodeInterface as Ve, ButtonInterfaceComponent as Le, CheckboxInterfaceComponent as Ge, IntegerInterfaceComponent as Ue, NumberInterfaceComponent as je, SelectInterfaceComponent as Re, SliderInterfaceComponent as Pe, TextInputInterfaceComponent as ge, TextareaInputInterfaceComponent as De, setType as j, allowMultipleConnections as X, IntegerInterface as Ae, TextInputInterface as He, displayInSidebar as Fe, sortTopologically as We, useViewModel as H, useTemporaryConnection as Xe, Components as ve, useGraph as K, GRAPH_NODE_TYPE_PREFIX as J, useTransform as Ye, useNodeCategories as Je, BaklavaEditor as qe, DEFAULT_TOOLBAR_COMMANDS as Qe, useBaklava as Ze, DependencyEngine as Ke, applyResult as et } from "baklavajs";
+import { ButtonInterfaceComponent as an, CheckboxInterfaceComponent as rn, IntegerInterfaceComponent as ln, NumberInterfaceComponent as dn, SelectInterfaceComponent as un, SliderInterfaceComponent as cn, TextInputInterfaceComponent as pn, TextareaInputInterfaceComponent as hn } 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 tt, normalizeStyle as se, withModifiers as D, createBlock as V, withDirectives as ne, Fragment as T, createTextVNode as st, createVNode as S, withKeys as Q, vModelText as oe, renderList as A, nextTick as nt, toRef as ye, resolveDynamicComponent as ot, inject as at, Transition as it, withCtx as W, onUnmounted as rt, normalizeProps as lt, guardReactiveProps as dt, mergeProps as ut } from "vue";
+import ct from "toposort";
+import { v4 as pt } from "uuid";
+import { usePointer as ht } from "@vueuse/core";
+class vt extends Be {
   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 vt {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -98,89 +89,63 @@ 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 mt(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;
+}, mt = (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({
+new P("boolean");
+new P("dict");
+new P("list");
+const Y = new P("node"), ft = new P("number"), gt = new P("string"), bt = ["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, bt));
   }
 });
-class CodeNodeInterface extends NodeInterface {
-  optional = false;
+class M extends Ve {
+  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 +160,42 @@ class CodeNodeInterface extends NodeInterface {
   //   if (this.name !== '_node') this.setHidden(false);
   // }
 }
-class ButtonInterface extends CodeNodeInterface {
-  component = markRaw(ButtonInterfaceComponent);
+class Ps extends M {
+  component = $(Le);
   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 Ds extends M {
+  component = $(Ge);
 }
-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 As extends ie {
+  component = $(Ue);
+  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 Hs 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 _t extends M {
+  isCodeOutput = !0;
+  constructor(e = "", t = "") {
+    super(e, t), this.setComponent($(ae));
   }
   get script() {
     return this.state.script;
@@ -244,95 +203,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 Fs extends ie {
+  component = $(je);
 }
-class SelectInterface extends CodeNodeInterface {
-  component = markRaw(SelectInterfaceComponent);
+class Ws extends M {
+  component = $(Re);
   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 Xs extends ie {
+  component = $(Pe);
   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 Ys extends M {
+  component = $(ge);
+  constructor(e, t) {
+    super(e, t), this.setPort(!1);
   }
 }
-class TextInputInterface extends CodeNodeInterface {
-  isString = true;
-  component = markRaw(TextInputInterfaceComponent);
+class Js extends M {
+  isString = !0;
+  component = $(ge);
 }
-class TextareaInputInterface extends CodeNodeInterface {
-  component = markRaw(TextareaInputInterfaceComponent);
+class qs extends M {
+  component = $(De);
 }
-function defineCodeNode(definition) {
-  return class extends CodeNode {
-    type = definition.type;
+function Qs(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, Y).use(X).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, Y).use(X).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 yt extends we {
   /**
    * The default implementation does nothing.
    * Overwrite this method to do calculation.
@@ -342,169 +283,101 @@ class DynamicCodeNode extends CodeNode {
    */
   calculate;
 }
-function defineDynamicCodeNode(definition) {
-  return class extends DynamicCodeNode {
-    type = definition.type;
+function Zs(o) {
+  return class extends yt {
+    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, Y).use(X).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, Y).use(X).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 Ae(t, s).use(j, ft) : n = new He(t, JSON.stringify(s)).use(j, gt), n.use(Fe, !0), this.addInput(t, n);
           }
-          inputInterface.use(displayInSidebar, true);
-          this.addInput(k, inputInterface);
-        }
-        if (this.inputs[k]) {
-          this.inputs[k].load(state.inputs[k]);
-          this.inputs[k].nodeId = this.id;
+          this.inputs[t] && (this.inputs[t].load(e.inputs[t]), this.inputs[t].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 _t(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 wt {
   _id;
   _viewModel;
   _state;
-  constructor(viewModel) {
-    this._id = v4();
-    this._viewModel = viewModel;
-    this._state = reactive({
-      autosort: false,
+  constructor(e) {
+    this._id = pt(), this._viewModel = e, this._state = R({
+      autosort: !1,
       modules: {},
       script: "",
       token: null,
@@ -512,13 +385,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 +400,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 +429,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 +446,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 +481,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 +550,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 = ct.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;
+}, Ks = (o = 0, e = 100) => ({
+  x: o * 420,
+  y: e
+}), en = (o) => {
+  const e = { ...o.position };
+  return e.x -= 400, e.y += 50, e;
+}, xt = (o) => {
+  const { calculationOrder: e, connectionsFromNode: t } = We(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({
+}, kt = ["id"], Ct = { 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);
+  setup(o) {
+    const e = o, { viewModel: t } = H(), { hoveredOver: s, temporaryConnection: n } = Xe(), 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 endHover = () => {
-      hoveredOver(void 0);
-    };
-    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", Ct, [
+        q(k.$slots, "default")
+      ])
+    ], 10, kt));
+  }
+}), z = (o, e) => {
+  const t = o.__vccOpts || o;
+  for (const [s, n] of e)
+    t[s] = n;
+  return t;
+}, It = {}, Nt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -819,19 +636,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 Mt(o, e) {
+  return i(), r("svg", Nt, [...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 Ot = /* @__PURE__ */ z(It, [["render", Mt]]), $t = {}, Et = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -839,19 +654,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 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-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 St = /* @__PURE__ */ z($t, [["render", Tt]]), zt = {}, Bt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -859,19 +672,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 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: "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 Lt = /* @__PURE__ */ z(zt, [["render", Vt]]), Gt = {}, Ut = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -879,19 +690,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 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: "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 Rt = /* @__PURE__ */ z(Gt, [["render", jt]]), Pt = {}, Dt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -899,19 +708,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 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-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 Ht = /* @__PURE__ */ z(Pt, [["render", At]]), Ft = {}, Wt = {
   xmlns: "http://www.w3.org/2000/svg",
   class: "baklava-icon",
   width: "24",
@@ -923,14 +730,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 Xt(o, e) {
+  return i(), r("svg", Wt, [...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 Yt = /* @__PURE__ */ z(Ft, [["render", Xt]]), Jt = {}, qt = {
   xmlns: "http://www.w3.org/2000/svg",
   class: "baklava-icon",
   width: "24",
@@ -942,14 +747,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 Qt(o, e) {
+  return i(), r("svg", qt, [...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 Zt = /* @__PURE__ */ z(Jt, [["render", Qt]]), Kt = {}, es = {
   xmlns: "http://www.w3.org/2000/svg",
   class: "baklava-icon",
   width: "24",
@@ -961,14 +764,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 ts(o, e) {
+  return i(), r("svg", es, [...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 ss = /* @__PURE__ */ z(Kt, [["render", ts]]), ns = {}, os = {
   xmlns: "http://www.w3.org/2000/svg",
   class: "baklava-icon",
   width: "16",
@@ -980,338 +781,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 as(o, e) {
+  return i(), r("svg", os, [...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 is = /* @__PURE__ */ z(ns, [["render", as]]), rs = ["id", "data-node-type"], ls = {
   class: "__title-label",
   style: { "flex-grow": "1" }
-};
-const _hoisted_3$2 = { key: 0 };
-const _hoisted_4$1 = {
+}, ds = { key: 0 }, us = {
   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" }
+}, cs = { class: "__outputs" }, ps = { key: 0 }, hs = ["id", "title"], vs = { class: "__inputs" }, ms = { key: 0 }, fs = ["id", "title"], gs = /* @__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 } = H(), { 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
+    })), ke = f(() => ({
+      "--reverse-y": n.node.reverseY ?? d.value.settings.nodes.reverseY
+    })), Ce = 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`
+    })), Ie = f(() => Object.values(n.node.inputs).filter((c) => !c.hidden)), Ne = f(() => Object.values(n.node.outputs).filter((c) => !c.hidden)), re = () => {
+      u("select");
+    }, Me = (c) => {
+      n.selected || re(), u("start-drag", c);
+    }, le = () => {
+      p.value = !0;
+    }, Oe = () => {
+      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;
+    }, $e = () => {
+      const c = d.value.displayedGraph.sidebar;
+      c.nodeId = n.node.id;
+    }, Ee = 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 nt(), 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 });
+    }, Te = (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, Se = d.value.settings.nodes.minWidth, ze = d.value.settings.nodes.maxWidth;
+      n.node.width = Math.max(Se, Math.min(ze, 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), tt(() => {
+      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(Ce.value),
+      onPointerdown: re
+    }, [
+      _(d).settings.nodes.resizable ? (i(), r("div", {
+        key: 0,
+        class: "__resize-handle",
+        onMousedown: Te
+      }, null, 32)) : N("", !0),
+      l("div", {
+        class: "__title",
+        onPointerdown: D(Me, ["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", ls, [
+            a.value.idx > -1 ? (i(), r("span", ds, L(a.value.idx + 1) + " - ", 1)) : N("", !0),
+            st(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", us, [
+            a.value.subgraph ? N("", !0) : (i(), r(T, { key: 0 }, [
+              !_(d).displayedGraph.sidebar.visible && _(d).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), V(_(Ht), {
+                key: 0,
+                class: "--clickable mx-1",
+                onClick: de
+              })) : _(d).displayedGraph.sidebar.visible && _(d).displayedGraph.sidebar.nodeId !== a.value.id ? (i(), V(_(Lt), {
+                key: 1,
+                class: "--clickable mx-1",
+                onClick: $e
+              })) : (i(), V(_(Rt), {
+                key: 2,
+                class: "--clickable mx-1",
+                onClick: Oe
+              }))
+            ], 64)),
+            S(_(is), {
+              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: Ee
+            }, 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", ke.value]),
+        onKeydown: C[2] || (C[2] = Q(D(() => {
+        }, ["stop"]), ["delete"])),
+        onContextmenu: C[3] || (C[3] = D(() => {
+        }, ["prevent"]))
+      }, [
+        l("div", cs, [
+          (i(!0), r(T, null, A(Ne.value, (v) => (i(), r(T, {
+            key: v.id
+          }, [
+            a.value.state?.hidden ? (i(), r("div", ps, [
+              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, hs)) : 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", vs, [
+          (i(!0), r(T, null, A(Ie.value, (v) => (i(), r(T, {
+            key: v.id
+          }, [
+            a.value.state?.hidden ? (i(), r("div", ms, [
+              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, fs)) : 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, rs));
   }
-});
-const _hoisted_1$3 = ["title"];
-const _hoisted_2$3 = {
+}), bs = ["title"], _s = {
   key: 0,
   class: "__label"
-};
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+}, ys = /* @__PURE__ */ G({
   __name: "Checkbox",
   props: {
     modelValue: { type: Boolean },
@@ -1319,494 +1044,373 @@ 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", _s, L(s.name), 1)) : N("", !0)
+    ], 10, bs));
   }
-});
-const _hoisted_1$2 = { class: "__header" };
-const _hoisted_2$2 = { class: "__node-name" };
-const _hoisted_3$1 = { style: { "display": "flex" } };
-const _hoisted_4 = {
+}), ws = { class: "__header" }, xs = { class: "__node-name" }, ks = { style: { display: "flex" } }, Cs = {
   key: 1,
   class: "__interface"
-};
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+}, Is = /* @__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 } = H(), { 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", ws, [
+        l("button", {
+          tabindex: "-1",
+          class: "__close",
+          onClick: B
+        }, "×"),
+        l("div", xs, [
+          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", ks, [
+          S(ys, {
+            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(ot(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", Cs, [
+        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({
+}), Ns = 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 } = H(), { 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", {
+}), Ms = ["data-node-type"], Os = { class: "__title" }, $s = { class: "__title-label" };
+function Es(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", Os, [
+      l("div", $s, L(o.title), 1)
     ])
-  ], 8, _hoisted_1$1);
+  ], 8, Ms);
 }
-const PaletteEntry = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
-const _hoisted_1 = {
+const fe = /* @__PURE__ */ z(Ns, [["render", Es]]), Ts = {
   class: "baklava-node --palette",
   style: { "margin-top": "-20px", "margin-bottom": "30px" }
-};
-const _hoisted_2 = { key: 0 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+}, Ss = { key: 0 }, zs = /* @__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 } = H(), { x: t, y: s } = ht(), { transform: n } = Ye(), a = Je(e), u = at("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", Ts, [
+          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", Ss, 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(it, { name: "fade" }, {
+        default: W(() => [
+          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({
+}), tn = /* @__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();
+    }), rt(() => {
+      t.value.unsubscribe(), t.value.engine.stop();
+    }), (n, a) => (i(), V(_(qe), { "view-model": t.value }, {
+      palette: W(() => [
+        S(zs)
+      ]),
+      node: W((u) => [
+        S(gs, ut(u, {
+          onUpdate: (d) => s(u.node)
+        }), null, 16, ["onUpdate"])
+      ]),
+      sidebar: W((u) => [
+        S(Is, lt(dt(u)), null, 16)
+      ]),
+      _: 1
+    }, 8, ["view-model"]));
+  }
+}), Bs = (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 ? Ot : St)
     },
-    ...DEFAULT_TOOLBAR_COMMANDS,
+    ...Qe,
     {
-      command: CLEAR_ALL_COMMAND,
+      command: t,
       title: "Clear all",
       // Tooltip text
-      icon: TrashOff
+      icon: ss
     },
     {
-      command: TOGGLE_MINIMAP_COMMAND,
+      command: s,
       title: "Toggle minimap",
       // Tooltip text
-      icon: computed(() => viewModel.settings.enableMinimap ? SchemaOff : Schema)
+      icon: f(() => o.settings.enableMinimap ? Zt : Yt)
     }
   ];
-};
-const DEFAULT_SETTINGS = {
-  enableMinimap: false,
+}, F = {
+  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 sn(o) {
+  const e = Ze(o?.existingEditor);
+  e.code = o?.code ? new o.code(e) : new wt(e), Bs(e);
+  const t = {};
+  return Object.keys(F).forEach((s) => {
+    t[s] = typeof F[s] == "object" ? { ...e.settings[s], ...F[s] } : F[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 Ke(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(), et(n, e.editor), xt(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
+  vt as AbstractCodeNode,
+  Ps as ButtonInterface,
+  an as ButtonInterfaceComponent,
+  Ds as CheckboxInterface,
+  rn as CheckboxInterfaceComponent,
+  wt as Code,
+  tn as CodeGraphEditor,
+  Hs as CodeInputInterface,
+  we as CodeNode,
+  M as CodeNodeInterface,
+  _t as CodeOutputInterface,
+  F as DEFAULT_SETTINGS,
+  yt as DynamicCodeNode,
+  As as IntegerInterface,
+  ln as IntegerInterfaceComponent,
+  Fs as NumberInterface,
+  dn as NumberInterfaceComponent,
+  Ws as SelectInterface,
+  un as SelectInterfaceComponent,
+  Xs as SliderInterface,
+  cn as SliderInterfaceComponent,
+  Js as TextInputInterface,
+  pn as TextInputInterfaceComponent,
+  Ys as TextInterface,
+  qs as TextareaInputInterface,
+  hn as TextareaInputInterfaceComponent,
+  Bs as addToolbarCommands,
+  Qs as defineCodeNode,
+  Zs as defineDynamicCodeNode,
+  Z as getCodeNodes,
+  Ks as getPositionAtColumn,
+  en as getPositionBeforeNode,
+  xe as loadNodeState,
+  mt as saveNodeState,
+  xt as transferCodeScript,
+  sn as useCodeGraph
 };