@babsey/code-graph 0.0.0

package/dist/code-graph.umd.cjs

@@ -0,0 +1,1820 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("baklavajs"), require("mustache"), require("vue"), require("toposort"), require("uuid"), require("@vueuse/core")) : typeof define === "function" && define.amd ? define(["exports", "baklavajs", "mustache", "vue", "toposort", "uuid", "@vueuse/core"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["code-graph"] = {}, global.baklavajs, global.mustache, global.Vue, global.toposort, global.uuid, global["@vueuse/core"]));
+})(this, (function(exports2, baklavajs, mustache, vue, toposort, uuid, core) {
+  "use strict";
+  class AbstractCodeNode extends baklavajs.AbstractNode {
+    state;
+    code;
+    isCodeNode = true;
+    inputs = {};
+    outputs = {};
+    constructor() {
+      super();
+      this.initializeIo();
+      this.width = 400;
+      this.twoColumn = true;
+      this.state = vue.reactive({
+        codeTemplate: "{{ &outputs.code }}",
+        hidden: false,
+        integrated: false,
+        modules: [],
+        script: "",
+        variableName: ""
+      });
+    }
+    get codeTemplate() {
+      return this.state.codeTemplate;
+    }
+    get idx() {
+      return this.code?.codeNodes.filter((node) => !node.state.integrated).indexOf(this) ?? -1;
+    }
+    get idxByVariableNames() {
+      return this.code?.getNodesBySameVariableNames(this.state.variableName).indexOf(this) ?? -1;
+    }
+    get script() {
+      return this.state.script;
+    }
+    get shortId() {
+      return this.id.slice(0, 6);
+    }
+    get variableName() {
+      return this.state.variableName ? this.state.variableName + (this.idxByVariableNames + 1) : "";
+    }
+    /**
+     * Get connected nodes to the node.
+     * @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);
+      }
+      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 (!nodeIds || nodeIds.length == 0) return [];
+      return nodeIds.map((nodeId) => this.graph?.findNodeById(nodeId));
+    }
+    registerCode(code) {
+      this.code = code;
+    }
+    /**
+     * 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 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;
+    }
+    updateOutputVariableName() {
+      if (this.outputs.code) this.outputs.code.name = this.variableName;
+    }
+  }
+  class CodeNode extends AbstractCodeNode {
+    /**
+     * The default implementation does nothing.
+     * Overwrite this method to do calculation.
+     * @param inputs Values of all input interfaces
+     * @param globalValues Set of values passed to every node by the engine plugin
+     * @return Values for output interfaces
+     */
+    calculate;
+    load(state) {
+      super.load(state);
+      loadNodeState(this.graph, state);
+    }
+    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 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;
+    });
+    Object.entries(nodeState.outputs).forEach(([outputKey, outputItem]) => {
+      if (outputKey === "_node") return;
+      if (codeNode.outputs[outputKey]) outputItem.hidden = codeNode.outputs[outputKey].hidden;
+    });
+  };
+  new baklavajs.NodeInterfaceType("boolean");
+  new baklavajs.NodeInterfaceType("dict");
+  new baklavajs.NodeInterfaceType("list");
+  const nodeType = new baklavajs.NodeInterfaceType("node");
+  const numberType = new baklavajs.NodeInterfaceType("number");
+  const stringType = new baklavajs.NodeInterfaceType("string");
+  const _hoisted_1$f = ["title"];
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+    __name: "CodeNodeInterface",
+    props: {
+      intf: {}
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          title: _ctx.intf.state?.script
+        }, vue.toDisplayString(_ctx.intf.name), 9, _hoisted_1$f);
+      };
+    }
+  });
+  class CodeNodeInterface extends baklavajs.NodeInterface {
+    optional = false;
+    code;
+    state;
+    constructor(name, value) {
+      super(name, value);
+      this.setComponent(vue.markRaw(_sfc_main$g));
+      this.state = vue.reactive({
+        script: ""
+      });
+    }
+    get shortId() {
+      return this.id.slice(0, 6);
+    }
+    // override get value(): T {
+    //   return super.value
+    // }
+    // override set value(value: T) {
+    //   super.value = value;
+    //   if (this.name !== '_node') this.setHidden(false);
+    // }
+  }
+  class ButtonInterface extends CodeNodeInterface {
+    component = vue.markRaw(baklavajs.ButtonInterfaceComponent);
+    callback;
+    constructor(name, callback) {
+      super(name, void 0);
+      this.callback = callback;
+      this.setPort(false);
+    }
+  }
+  class CheckboxInterface extends CodeNodeInterface {
+    component = vue.markRaw(baklavajs.CheckboxInterfaceComponent);
+  }
+  class BaseNumericInterface extends CodeNodeInterface {
+    min;
+    max;
+    constructor(name, value, min, max) {
+      super(name, value);
+      this.min = min;
+      this.max = max;
+    }
+    validate(v) {
+      return (this.min === void 0 || v >= this.min) && (this.max === void 0 || v <= this.max);
+    }
+  }
+  class IntegerInterface extends BaseNumericInterface {
+    component = vue.markRaw(baklavajs.IntegerInterfaceComponent);
+    validate(v) {
+      return Number.isInteger(v) && super.validate(v);
+    }
+  }
+  class CodeInputInterface extends CodeNodeInterface {
+    isCodeInput = true;
+    constructor(name = "", value) {
+      super(name, value);
+      this.setComponent(vue.markRaw(_sfc_main$g));
+    }
+  }
+  class CodeOutputInterface extends CodeNodeInterface {
+    isCodeOutput = true;
+    constructor(name = "", value = "") {
+      super(name, value);
+      this.setComponent(vue.markRaw(_sfc_main$g));
+    }
+    get script() {
+      return this.state.script;
+    }
+    get value() {
+      return super.value;
+    }
+    set value(value) {
+      super.value = value;
+      this.state.script = this.name.length > 0 ? this.name : this.value;
+    }
+  }
+  class NumberInterface extends BaseNumericInterface {
+    component = vue.markRaw(baklavajs.NumberInterfaceComponent);
+  }
+  class SelectInterface extends CodeNodeInterface {
+    component = vue.markRaw(baklavajs.SelectInterfaceComponent);
+    items;
+    constructor(name, value, items) {
+      super(name, value);
+      this.items = items;
+    }
+  }
+  class SliderInterface extends BaseNumericInterface {
+    component = vue.markRaw(baklavajs.SliderInterfaceComponent);
+    min;
+    max;
+    constructor(name, value, min, max) {
+      super(name, value, min, max);
+      this.min = min;
+      this.max = max;
+    }
+  }
+  class TextInterface extends CodeNodeInterface {
+    component = vue.markRaw(baklavajs.TextInputInterfaceComponent);
+    constructor(name, value) {
+      super(name, value);
+      this.setPort(false);
+    }
+  }
+  class TextInputInterface extends CodeNodeInterface {
+    isString = true;
+    component = vue.markRaw(baklavajs.TextInputInterfaceComponent);
+  }
+  class TextareaInputInterface extends CodeNodeInterface {
+    component = vue.markRaw(baklavajs.TextareaInputInterfaceComponent);
+  }
+  function defineCodeNode(definition) {
+    return class extends CodeNode {
+      type = definition.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(
+          "_node",
+          new CodeNodeInterface("", []).use(baklavajs.setType, nodeType).use(baklavajs.allowMultipleConnections).setHidden(true)
+        );
+        this.addOutput(
+          "_node",
+          new CodeNodeInterface("", []).use(baklavajs.setType, nodeType).use(baklavajs.allowMultipleConnections).setHidden(true)
+        );
+        this.executeFactory("input", definition.inputs);
+        this.executeFactory("output", definition.outputs);
+        definition.onCreate?.call(this);
+      }
+      calculate = definition.calculate ? (inputs, globalValues) => ({
+        ...definition.calculate.call(this, inputs, globalValues),
+        _node: null
+      }) : void 0;
+      onPlaced() {
+        definition.onPlaced?.call(this);
+      }
+      onDestroy() {
+        definition.onDestroy?.call(this);
+      }
+      onCodeUpdate() {
+        definition.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);
+          }
+        });
+      }
+    };
+  }
+  class DynamicCodeNode extends CodeNode {
+    /**
+     * The default implementation does nothing.
+     * Overwrite this method to do calculation.
+     * @param inputs Values of all input interfaces
+     * @param globalValues Set of values passed to every node by the engine plugin
+     * @return Values for output interfaces
+     */
+    calculate;
+  }
+  function defineDynamicCodeNode(definition) {
+    return class extends DynamicCodeNode {
+      type = definition.type;
+      inputs = {};
+      outputs = {};
+      calculate;
+      preventUpdate = false;
+      staticInputKeys = Object.keys(definition.inputs ?? {});
+      staticOutputKeys = Object.keys(definition.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(
+          "_node",
+          new CodeNodeInterface("", []).use(baklavajs.setType, nodeType).use(baklavajs.allowMultipleConnections).setHidden(true)
+        );
+        this.addOutput(
+          "_node",
+          new CodeNodeInterface("", []).use(baklavajs.setType, nodeType).use(baklavajs.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);
+      }
+      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);
+      }
+      onDestroy() {
+        definition.onDestroy?.call(this);
+      }
+      onCodeUpdate() {
+        definition.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 baklavajs.IntegerInterface(k, value).use(baklavajs.setType, numberType);
+            } else {
+              inputInterface = new baklavajs.TextInputInterface(k, JSON.stringify(value)).use(baklavajs.setType, stringType);
+            }
+            inputInterface.use(baklavajs.displayInSidebar, true);
+            this.addInput(k, inputInterface);
+          }
+          if (this.inputs[k]) {
+            this.inputs[k].load(state.inputs[k]);
+            this.inputs[k].nodeId = this.id;
+          }
+        }
+        for (const k of Object.keys(state.outputs)) {
+          if (this.staticOutputKeys.includes(k)) continue;
+          if (!this.outputs[k]) {
+            const outputInterface = new CodeOutputInterface(k);
+            this.addOutput(k, outputInterface);
+          }
+          if (this.outputs[k]) {
+            this.outputs[k].load(state.outputs[k]);
+            this.outputs[k].nodeId = this.id;
+          }
+        }
+        loadNodeState(this.graph, state);
+        this.preventUpdate = false;
+        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--;
+      }
+      getStaticValues(keys, interfaces) {
+        const values = {};
+        for (const k of keys) {
+          values[k] = interfaces[k].value;
+        }
+        return values;
+      }
+      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);
+          }
+        }
+      }
+      executeFactory(type, factory) {
+        Object.keys(factory || {}).forEach((k) => {
+          const intf = factory[k]();
+          if (type === "input") {
+            this.addInput(k, intf);
+          } else {
+            this.addOutput(k, intf);
+          }
+        });
+      }
+    };
+  }
+  class Code {
+    _id;
+    _viewModel;
+    _state;
+    constructor(viewModel) {
+      this._id = uuid.v4();
+      this._viewModel = viewModel;
+      this._state = vue.reactive({
+        autosort: false,
+        modules: {},
+        script: "",
+        token: null,
+        template: ""
+      });
+    }
+    get codeNodes() {
+      return getCodeNodes(this.graph);
+    }
+    get connections() {
+      return this.graph.connections;
+    }
+    get graph() {
+      return this.viewModel.displayedGraph;
+    }
+    get id() {
+      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])));
+    }
+    get nodeIds() {
+      return this.codeNodes.map((node) => node.id);
+    }
+    get nodes() {
+      return this.graph.nodes;
+    }
+    get scriptedCodeNodes() {
+      return getCodeNodes(this.graph).filter(
+        (codeNode) => codeNode.state?.script.length > 0
+      );
+    }
+    get shortId() {
+      return this.id.slice(0);
+    }
+    get state() {
+      return this._state;
+    }
+    get viewModel() {
+      return this._viewModel;
+    }
+    get visibleNodes() {
+      return this.codeNodes.filter((node) => !node.state?.hidden);
+    }
+    /**
+     * Add code node to graph.
+     * @param node code node
+     * @param props optional
+     */
+    addNode(node, props) {
+      if (props) node.state.props = props;
+      return this.graph.addNode(node);
+    }
+    /**
+     * Add code node at coordinates.
+     * @param node code node
+     * @param position position
+     * @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;
+    };
+    /**
+     * 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);
+    }
+    /**
+     * Clear code graph.
+     */
+    clear() {
+      this.graph._nodes = [];
+      this.graph._connections = [];
+    }
+    findNodeById(id) {
+      return this.graph.findNodeById(id);
+    }
+    findNodeByType(nodeType2) {
+      return this.codeNodes.find((codeNode) => codeNode.type === nodeType2);
+    }
+    getNodesBySameType(type) {
+      return this.codeNodes.filter((codeNode) => codeNode.type === type);
+    }
+    getNodesBySameVariableNames(variableName) {
+      return this.codeNodes.filter(
+        (codeNode) => codeNode.state.variableName === variableName
+      );
+    }
+    /**
+     * Check whether the graph has this connection.
+     * @param from node interface
+     * @param to node interface
+     * @returns boolean
+     */
+    hasConnection(from, to) {
+      return this.connections.some(
+        (connection) => connection.from.id === from.id && connection.to.id === to.id
+      );
+    }
+    /**
+     * Load template from the file.
+     */
+    loadTemplate(resolve) {
+      resolve.then((template) => {
+        this._state.template = template.default ?? "";
+      });
+    }
+    onCodeUpdate() {
+      this.codeNodes.forEach((codeNode) => codeNode.onCodeUpdate());
+    }
+    /**
+     * Remove connection from the graph
+     * @param connection connection between code nodes
+     */
+    removeConnection(connection) {
+      this.graph.removeConnection(connection);
+    }
+    /**
+     * Remove node from the graph.
+     * @param codeNode code node
+     */
+    removeNode(codeNode) {
+      this.graph.removeNode(codeNode);
+    }
+    /**
+     * Render node codes.
+     */
+    renderNodeCodes() {
+      if (this.codeNodes.length === 0) return;
+      this.codeNodes.forEach((node) => node.renderCode());
+    }
+    /**
+     * Render code.
+     */
+    renderCode() {
+      this.state.script = mustache.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));
+    }
+    /**
+     * 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 (node.inputs[inputKey]) nodeState.inputs[inputKey].hidden = node.inputs[inputKey].hidden;
+        });
+        Object.entries(nodeState.outputs).forEach(([outputKey]) => {
+          if (node.inputs[outputKey]) nodeState.outputs[outputKey].hidden = node.outputs[outputKey].hidden;
+        });
+      });
+    }
+    /**
+     * 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);
+        this.graph._nodes = nodeIds.map((nodeId) => this.findNodeById(nodeId));
+      } catch {
+        console.warn("Failed to sort nodes.");
+      }
+    }
+    updateOutputVariableNames() {
+      this.codeNodes.forEach((codeNode) => codeNode.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 } = baklavajs.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 _hoisted_1$e = ["id"];
+  const _hoisted_2$5 = { class: "align-middle" };
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+    __name: "CodeGraphNodeInterface",
+    props: {
+      node: {},
+      intf: {}
+    },
+    setup(__props) {
+      const props = __props;
+      const { viewModel } = baklavajs.useViewModel();
+      const { hoveredOver, temporaryConnection } = baklavajs.useTemporaryConnection();
+      const el = vue.ref(null);
+      const isConnected = vue.computed(() => props.intf.connectionCount > 0);
+      const classes = vue.computed(() => ({
+        "--connected": isConnected.value
+      }));
+      const startHover = () => {
+        hoveredOver(props.intf);
+      };
+      const endHover = () => {
+        hoveredOver(void 0);
+      };
+      const onRender = () => {
+        if (el.value) {
+          viewModel.value.hooks.renderInterface.execute({ intf: props.intf, el: el.value });
+        }
+      };
+      vue.onMounted(onRender);
+      vue.onUpdated(onRender);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          id: _ctx.intf.id,
+          ref_key: "el",
+          ref: el,
+          class: vue.normalizeClass(["baklava-node-interface", classes.value])
+        }, [
+          _ctx.intf.port ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(["__port", { "--selected": vue.unref(temporaryConnection)?.from === _ctx.intf }]),
+            onPointerover: startHover,
+            onPointerout: endHover
+          }, null, 34)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("span", _hoisted_2$5, [
+            vue.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 = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-collapse"
+  };
+  function _sfc_render$9(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$d, [..._cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+      }, null, -1),
+      vue.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)
+    ])]);
+  }
+  const LayoutSidebarLeftCollapse = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$9]]);
+  const _sfc_main$d = {};
+  const _hoisted_1$c = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-left-expand"
+  };
+  function _sfc_render$8(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$c, [..._cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+      }, null, -1),
+      vue.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)
+    ])]);
+  }
+  const LayoutSidebarLeftExpand = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$8]]);
+  const _sfc_main$c = {};
+  const _hoisted_1$b = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    class: "balkava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right"
+  };
+  function _sfc_render$7(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$b, [..._cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+      }, null, -1),
+      vue.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)
+    ])]);
+  }
+  const LayoutSidebarRight = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$7]]);
+  const _sfc_main$b = {};
+  const _hoisted_1$a = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-collapse"
+  };
+  function _sfc_render$6(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$a, [..._cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+      }, null, -1),
+      vue.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)
+    ])]);
+  }
+  const LayoutSidebarRightCollapse = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$6]]);
+  const _sfc_main$a = {};
+  const _hoisted_1$9 = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    class: "baklava-icon icon icon-tabler icons-tabler-filled icon-tabler-layout-sidebar-right-expand"
+  };
+  function _sfc_render$5(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$9, [..._cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+      }, null, -1),
+      vue.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)
+    ])]);
+  }
+  const LayoutSidebarRightExpand = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$5]]);
+  const _sfc_main$9 = {};
+  const _hoisted_1$8 = {
+    xmlns: "http://www.w3.org/2000/svg",
+    class: "baklava-icon",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  };
+  function _sfc_render$4(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$8, [..._cache[0] || (_cache[0] = [
+      vue.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)
+    ])]);
+  }
+  const Schema = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$4]]);
+  const _sfc_main$8 = {};
+  const _hoisted_1$7 = {
+    xmlns: "http://www.w3.org/2000/svg",
+    class: "baklava-icon",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  };
+  function _sfc_render$3(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$7, [..._cache[0] || (_cache[0] = [
+      vue.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)
+    ])]);
+  }
+  const SchemaOff = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$3]]);
+  const _sfc_main$7 = {};
+  const _hoisted_1$6 = {
+    xmlns: "http://www.w3.org/2000/svg",
+    class: "baklava-icon",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  };
+  function _sfc_render$2(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$6, [..._cache[0] || (_cache[0] = [
+      vue.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)
+    ])]);
+  }
+  const TrashOff = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$2]]);
+  const _sfc_main$6 = {};
+  const _hoisted_1$5 = {
+    xmlns: "http://www.w3.org/2000/svg",
+    class: "baklava-icon",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    "stroke-width": "2",
+    stroke: "currentColor",
+    fill: "none",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  };
+  function _sfc_render$1(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$5, [..._cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+      }, null, -1),
+      vue.createElementVNode("circle", {
+        cx: "12",
+        cy: "12",
+        r: "1"
+      }, null, -1),
+      vue.createElementVNode("circle", {
+        cx: "12",
+        cy: "19",
+        r: "1"
+      }, null, -1),
+      vue.createElementVNode("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 = {
+    class: "__title-label",
+    style: { "flex-grow": "1" }
+  };
+  const _hoisted_3$2 = { key: 0 };
+  const _hoisted_4$1 = {
+    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__ */ vue.defineComponent({
+    __name: "CodeGraphNode",
+    props: {
+      node: {},
+      selected: { type: Boolean, default: false },
+      dragging: { type: Boolean }
+    },
+    emits: ["select", "start-drag", "update"],
+    setup(__props, { emit: __emit }) {
+      const ContextMenu = baklavajs.Components.ContextMenu;
+      const NodeInterface = baklavajs.Components.NodeInterface;
+      const props = __props;
+      const node = vue.computed(() => props.node);
+      const emit = __emit;
+      const { viewModel } = baklavajs.useViewModel();
+      const { graph, switchGraph } = baklavajs.useGraph();
+      const el = vue.ref(null);
+      const renaming = vue.ref(false);
+      const tempName = vue.ref("");
+      const renameInputEl = vue.ref(null);
+      const isResizing = vue.ref(false);
+      let resizeStartWidth = 0;
+      let resizeStartMouseX = 0;
+      const showContextMenu = vue.ref(false);
+      const contextMenuItems = vue.computed(() => {
+        const items = [
+          { value: "edit", label: "Edit" },
+          { value: "rename", label: "Rename" },
+          { value: "delete", label: "Delete" }
+        ];
+        if (props.node.type.startsWith(baklavajs.GRAPH_NODE_TYPE_PREFIX)) {
+          items.push({ value: "editSubgraph", label: "Edit Subgraph" });
+        }
+        return items;
+      });
+      const classes = vue.computed(() => ({
+        "--selected": props.selected,
+        "--dragging": props.dragging,
+        "--two-column": !!props.node.twoColumn,
+        "--hidden": node.value.state?.hidden
+      }));
+      const classesContent = vue.computed(() => ({
+        "--reverse-y": props.node.reverseY ?? viewModel.value.settings.nodes.reverseY
+      }));
+      const styles = vue.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 = vue.computed(() => Object.values(props.node.inputs).filter((ni) => !ni.hidden));
+      const displayedOutputs = vue.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) {
+          case "edit":
+            openSidebar();
+            break;
+          case "delete":
+            graph.value.removeNode(props.node);
+            break;
+          case "rename":
+            tempName.value = props.node.title;
+            renaming.value = true;
+            await vue.nextTick();
+            renameInputEl.value?.focus();
+            break;
+          case "editSubgraph":
+            switchGraph(props.node.template);
+            break;
+        }
+      };
+      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;
+      };
+      vue.onMounted(() => {
+        onRender();
+        window.addEventListener("mousemove", doResize);
+        window.addEventListener("mouseup", stopResize);
+      });
+      vue.onUpdated(onRender);
+      vue.onBeforeUnmount(() => {
+        window.removeEventListener("mousemove", doResize);
+        window.removeEventListener("mouseup", stopResize);
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          id: node.value.id,
+          ref_key: "el",
+          ref: el,
+          class: vue.normalizeClass([classes.value, "baklava-node"]),
+          "data-node-type": node.value.type,
+          style: vue.normalizeStyle(styles.value),
+          onPointerdown: select
+        }, [
+          vue.unref(viewModel).settings.nodes.resizable ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "__resize-handle",
+            onMousedown: startResize
+          }, null, 32)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", {
+            class: "__title",
+            onPointerdown: vue.withModifiers(startDrag, ["self", "stop"]),
+            onContextmenu: vue.withModifiers(openContextMenu, ["prevent"])
+          }, [
+            node.value.inputs._node ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true),
+            !renaming.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              vue.createElementVNode("div", _hoisted_2$4, [
+                node.value.idx > -1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, vue.toDisplayString(node.value.idx + 1) + " - ", 1)) : vue.createCommentVNode("", true),
+                vue.createTextVNode(vue.toDisplayString(node.value.title) + " (" + vue.toDisplayString(node.value.shortId) + ") ", 1)
+              ]),
+              vue.createElementVNode("div", _hoisted_4$1, [
+                !node.value.subgraph ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                  !vue.unref(viewModel).displayedGraph.sidebar.visible && vue.unref(viewModel).displayedGraph.sidebar.nodeId !== node.value.id ? (vue.openBlock(), vue.createBlock(vue.unref(LayoutSidebarRightExpand), {
+                    key: 0,
+                    class: "--clickable mx-1",
+                    onClick: openSidebar
+                  })) : vue.unref(viewModel).displayedGraph.sidebar.visible && vue.unref(viewModel).displayedGraph.sidebar.nodeId !== node.value.id ? (vue.openBlock(), vue.createBlock(vue.unref(LayoutSidebarRight), {
+                    key: 1,
+                    class: "--clickable mx-1",
+                    onClick: updateSidebar
+                  })) : (vue.openBlock(), vue.createBlock(vue.unref(LayoutSidebarRightCollapse), {
+                    key: 2,
+                    class: "--clickable mx-1",
+                    onClick: closeSidebar
+                  }))
+                ], 64)) : vue.createCommentVNode("", true),
+                vue.createVNode(vue.unref(VerticalDots), {
+                  class: "--clickable mx-1",
+                  onClick: openContextMenu
+                }),
+                vue.createVNode(vue.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)) : vue.withDirectives((vue.openBlock(), vue.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: vue.withKeys(doneRenaming, ["enter"])
+            }, null, 544)), [
+              [vue.vModelText, tempName.value]
+            ]),
+            node.value.outputs._node ? (vue.openBlock(), vue.createBlock(_sfc_main$f, {
+              key: 3,
+              node: node.value,
+              intf: node.value.outputs._node,
+              class: "--output",
+              "data-interface-type": "node"
+            }, null, 8, ["node", "intf"])) : vue.createCommentVNode("", true)
+          ], 32),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["__content", classesContent.value]),
+            onKeydown: _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(() => {
+            }, ["stop"]), ["delete"])),
+            onContextmenu: _cache[3] || (_cache[3] = vue.withModifiers(() => {
+            }, ["prevent"]))
+          }, [
+            vue.createElementVNode("div", _hoisted_5, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayedOutputs.value, (output) => {
+                return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                  key: output.id
+                }, [
+                  node.value.state?.hidden ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+                    output.port ? (vue.openBlock(), vue.createElementBlock("div", {
+                      key: 0,
+                      id: output.id,
+                      title: output.name,
+                      class: "baklava-node-interface --output --connected"
+                    }, [..._cache[4] || (_cache[4] = [
+                      vue.createElementVNode("div", { class: "__port" }, null, -1)
+                    ])], 8, _hoisted_7)) : vue.createCommentVNode("", true)
+                  ])) : vue.renderSlot(_ctx.$slots, "nodeInterface", {
+                    key: 1,
+                    type: "output",
+                    node: node.value,
+                    intf: output
+                  }, () => [
+                    vue.createVNode(vue.unref(NodeInterface), {
+                      node: node.value,
+                      intf: output
+                    }, null, 8, ["node", "intf"])
+                  ])
+                ], 64);
+              }), 128))
+            ]),
+            vue.createElementVNode("div", _hoisted_8, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayedInputs.value, (input) => {
+                return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                  key: input.id
+                }, [
+                  node.value.state?.hidden ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
+                    input.port ? (vue.openBlock(), vue.createElementBlock("div", {
+                      key: 0,
+                      id: input.id,
+                      title: input.name,
+                      class: "baklava-node-interface --input --connected"
+                    }, [..._cache[5] || (_cache[5] = [
+                      vue.createElementVNode("div", { class: "__port" }, null, -1)
+                    ])], 8, _hoisted_10)) : vue.createCommentVNode("", true)
+                  ])) : vue.renderSlot(_ctx.$slots, "nodeInterface", {
+                    key: 1,
+                    node: node.value,
+                    intf: input,
+                    type: "input"
+                  }, () => [
+                    vue.createVNode(vue.unref(NodeInterface), {
+                      node: node.value,
+                      intf: input,
+                      title: input.name
+                    }, null, 8, ["node", "intf", "title"])
+                  ])
+                ], 64);
+              }), 128))
+            ])
+          ], 34)
+        ], 46, _hoisted_1$4);
+      };
+    }
+  });
+  const _hoisted_1$3 = ["title"];
+  const _hoisted_2$3 = {
+    key: 0,
+    class: "__label"
+  };
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+    __name: "Checkbox",
+    props: {
+      modelValue: { type: Boolean },
+      inversed: { type: Boolean },
+      name: {}
+    },
+    emits: ["update:modelValue"],
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.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] = vue.createElementVNode("div", { class: "__checkmark-container" }, [
+            vue.createElementVNode("svg", {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "18",
+              height: "18",
+              viewBox: "0 0 18 18"
+            }, [
+              vue.createElementVNode("path", {
+                class: "__checkmark",
+                d: "M 6 5 L 6 10 L 16 10",
+                transform: "rotate(-45 10 10)"
+              })
+            ])
+          ], -1)),
+          _ctx.name ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, vue.toDisplayString(_ctx.name), 1)) : vue.createCommentVNode("", true)
+        ], 10, _hoisted_1$3);
+      };
+    }
+  });
+  const _hoisted_1$2 = { class: "__header" };
+  const _hoisted_2$2 = { class: "__node-name" };
+  const _hoisted_3$1 = { style: { "display": "flex" } };
+  const _hoisted_4 = {
+    key: 1,
+    class: "__interface"
+  };
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+    __name: "CodeGraphSidebar",
+    setup(__props) {
+      const { viewModel } = baklavajs.useViewModel();
+      const { graph } = baklavajs.useGraph();
+      const el = vue.ref(null);
+      const width = vue.toRef(viewModel.value.settings.sidebar, "width");
+      const resizable = vue.computed(() => viewModel.value.settings.sidebar.resizable);
+      let resizeStartWidth = 0;
+      let resizeStartMouseX = 0;
+      const node = vue.computed(() => {
+        const id = graph.value.sidebar.nodeId;
+        return graph.value.nodes.find((x) => x.id === id);
+      });
+      const codeNode = vue.computed(() => node.value);
+      const styles = vue.computed(() => ({
+        width: `${width.value}px`
+      }));
+      const displayedInterfaces = vue.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(
+          "mouseup",
+          () => {
+            window.removeEventListener("mousemove", onMouseMove);
+          },
+          { once: true }
+        );
+      };
+      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 vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "el",
+          ref: el,
+          class: vue.normalizeClass(["baklava-sidebar", { "--open": vue.unref(graph).sidebar.visible }]),
+          style: vue.normalizeStyle(styles.value)
+        }, [
+          resizable.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "__resizer",
+            onMousedown: startResize
+          }, null, 32)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_1$2, [
+            vue.createElementVNode("button", {
+              tabindex: "-1",
+              class: "__close",
+              onClick: close
+            }, "×"),
+            vue.createElementVNode("div", _hoisted_2$2, [
+              vue.createElementVNode("b", null, vue.toDisplayString(node.value ? node.value.title : ""), 1)
+            ])
+          ]),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayedInterfaces.value, (intf) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: intf.id,
+              class: "__interface"
+            }, [
+              vue.createElementVNode("div", _hoisted_3$1, [
+                vue.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"]),
+                (vue.openBlock(), vue.createBlock(vue.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 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+            _cache[2] || (_cache[2] = vue.createElementVNode("label", null, "Variable name", -1)),
+            vue.withDirectives(vue.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: vue.withKeys(doneRenaming, ["enter"])
+            }, null, 544), [
+              [vue.vModelText, codeNode.value.state.variableName]
+            ])
+          ])) : vue.createCommentVNode("", true)
+        ], 6);
+      };
+    }
+  });
+  const _sfc_main$2 = vue.defineComponent({
+    props: {
+      type: {
+        type: String,
+        required: true
+      },
+      title: {
+        type: String,
+        required: true
+      }
+    },
+    setup(props) {
+      const { viewModel } = baklavajs.useViewModel();
+      const { switchGraph } = baklavajs.useGraph();
+      const showContextMenu = vue.ref(false);
+      const hasContextMenu = vue.computed(() => props.type.startsWith(baklavajs.GRAPH_NODE_TYPE_PREFIX));
+      const contextMenuItems = [
+        { label: "Edit Subgraph", value: "editSubgraph" },
+        { label: "Delete Subgraph", value: "deleteSubgraph" }
+      ];
+      const openContextMenu = () => {
+        showContextMenu.value = true;
+      };
+      const onContextMenuClick = (action) => {
+        const graphTemplateId = props.type.substring(baklavajs.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 };
+    }
+  });
+  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 vue.openBlock(), vue.createElementBlock("div", {
+      class: "baklava-node --palette",
+      "data-node-type": _ctx.type
+    }, [
+      vue.createElementVNode("div", _hoisted_2$1, [
+        vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(_ctx.title), 1)
+      ])
+    ], 8, _hoisted_1$1);
+  }
+  const PaletteEntry = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
+  const _hoisted_1 = {
+    class: "baklava-node --palette",
+    style: { "margin-top": "-20px", "margin-bottom": "30px" }
+  };
+  const _hoisted_2 = { key: 0 };
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+    __name: "CodeNodePalette",
+    setup(__props) {
+      const { viewModel } = baklavajs.useViewModel();
+      const { x: mouseX, y: mouseY } = core.usePointer();
+      const { transform } = baklavajs.useTransform();
+      const categories = baklavajs.useNodeCategories(viewModel);
+      const editorEl = vue.inject("editorEl");
+      const searchQuery = vue.ref("");
+      const draggedNode = vue.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 = vue.computed(() => {
+        if (!draggedNode.value || !editorEl?.value) return {};
+        const { left, top } = editorEl.value.getBoundingClientRect();
+        return {
+          top: `${mouseY.value - top}px`,
+          left: `${mouseX.value - left}px`
+        };
+      });
+      const onDragStart = (type, nodeInformation) => {
+        draggedNode.value = {
+          type,
+          nodeInformation
+        };
+        const onDragEnd = () => {
+          const instance = vue.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);
+        };
+        document.addEventListener("pointerup", onDragEnd);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["baklava-node-palette", { "--open": vue.unref(viewModel).settings.palette.enabled }]),
+            onContextmenu: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+            }, ["stop", "prevent"]))
+          }, [
+            vue.createElementVNode("div", _hoisted_1, [
+              vue.withDirectives(vue.createElementVNode("input", {
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+                type: "text",
+                class: "baklava-input",
+                title: "Filter node types"
+              }, null, 512), [
+                [vue.vModelText, searchQuery.value]
+              ])
+            ]),
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filterCategoryBySearch(vue.unref(categories)), (c) => {
+              return vue.openBlock(), vue.createElementBlock("section", {
+                key: c.name
+              }, [
+                c.name !== "default" ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_2, vue.toDisplayString(c.name), 1)) : vue.createCommentVNode("", true),
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filterNodesBySearch(c.nodeTypes), (ni, nt) => {
+                  return vue.openBlock(), vue.createBlock(PaletteEntry, {
+                    key: nt,
+                    type: nt,
+                    title: ni.title,
+                    onPointerdown: ($event) => onDragStart(nt, ni)
+                  }, null, 8, ["type", "title", "onPointerdown"]);
+                }), 128))
+              ]);
+            }), 128))
+          ], 34),
+          vue.createVNode(vue.Transition, { name: "fade" }, {
+            default: vue.withCtx(() => [
+              draggedNode.value ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: "baklava-dragged-node",
+                style: vue.normalizeStyle(draggedNodeStyles.value)
+              }, [
+                vue.createVNode(PaletteEntry, {
+                  type: draggedNode.value.type,
+                  title: draggedNode.value.nodeInformation.title
+                }, null, 8, ["type", "title"])
+              ], 4)) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ], 64);
+      };
+    }
+  });
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    __name: "CodeGraphEditor",
+    props: {
+      viewModel: {}
+    },
+    setup(__props) {
+      const props = __props;
+      const viewModel = vue.toRef(props, "viewModel");
+      const onUpdate = (node) => node.events.update.emit(null);
+      vue.onMounted(() => {
+        viewModel.value.subscribe();
+        viewModel.value.engine.start();
+      });
+      vue.onUnmounted(() => {
+        viewModel.value.unsubscribe();
+        viewModel.value.engine.stop();
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(baklavajs.BaklavaEditor), { "view-model": viewModel.value }, {
+          palette: vue.withCtx(() => [
+            vue.createVNode(_sfc_main$1)
+          ]),
+          node: vue.withCtx((nodeProps) => [
+            vue.createVNode(_sfc_main$5, vue.mergeProps(nodeProps, {
+              onUpdate: ($event) => onUpdate(nodeProps.node)
+            }), null, 16, ["onUpdate"])
+          ]),
+          sidebar: vue.withCtx((nodeProps) => [
+            vue.createVNode(_sfc_main$3, vue.normalizeProps(vue.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
+    });
+    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 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 = [
+      {
+        command: TOGGLE_PALETTE_COMMAND,
+        title: "Toggle palette",
+        // Tooltip text
+        icon: vue.computed(() => viewModel.settings.palette.enabled ? LayoutSidebarLeftCollapse : LayoutSidebarLeftExpand)
+      },
+      ...baklavajs.DEFAULT_TOOLBAR_COMMANDS,
+      {
+        command: CLEAR_ALL_COMMAND,
+        title: "Clear all",
+        // Tooltip text
+        icon: TrashOff
+      },
+      {
+        command: TOGGLE_MINIMAP_COMMAND,
+        title: "Toggle minimap",
+        // Tooltip text
+        icon: vue.computed(() => viewModel.settings.enableMinimap ? SchemaOff : Schema)
+      }
+    ];
+  };
+  const DEFAULT_SETTINGS = {
+    enableMinimap: false,
+    toolbar: {
+      enabled: true
+    },
+    palette: {
+      enabled: true
+    },
+    sidebar: {
+      enabled: true,
+      resizable: true,
+      width: 350
+    },
+    displayValueOnHover: false
+  };
+  function useCodeGraph(existingEditor) {
+    const viewModel = baklavajs.useBaklava(existingEditor);
+    addToolbarCommands(viewModel);
+    viewModel.code = new Code(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 = vue.reactive({ ...viewModel.settings, ...settings });
+    viewModel.settings.nodes.defaultWidth = 350;
+    viewModel.state = vue.reactive({
+      modules: {},
+      token: null
+    });
+    viewModel.engine = new baklavajs.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();
+        viewModel.code.onCodeUpdate();
+        viewModel.code.sortNodes();
+        viewModel.code.updateOutputVariableNames();
+        viewModel.engine.resume();
+      });
+      viewModel.engine.events.afterRun.subscribe(token, (result) => {
+        viewModel.engine.pause();
+        baklavajs.applyResult(result, viewModel.editor);
+        transferCodeScript(viewModel.displayedGraph);
+        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;
+  }
+  Object.defineProperty(exports2, "ButtonInterfaceComponent", {
+    enumerable: true,
+    get: () => baklavajs.ButtonInterfaceComponent
+  });
+  Object.defineProperty(exports2, "CheckboxInterfaceComponent", {
+    enumerable: true,
+    get: () => baklavajs.CheckboxInterfaceComponent
+  });
+  Object.defineProperty(exports2, "IntegerInterfaceComponent", {
+    enumerable: true,
+    get: () => baklavajs.IntegerInterfaceComponent
+  });
+  Object.defineProperty(exports2, "NumberInterfaceComponent", {
+    enumerable: true,
+    get: () => baklavajs.NumberInterfaceComponent
+  });
+  Object.defineProperty(exports2, "SelectInterfaceComponent", {
+    enumerable: true,
+    get: () => baklavajs.SelectInterfaceComponent
+  });
+  Object.defineProperty(exports2, "SliderInterfaceComponent", {
+    enumerable: true,
+    get: () => baklavajs.SliderInterfaceComponent
+  });
+  Object.defineProperty(exports2, "TextInputInterfaceComponent", {
+    enumerable: true,
+    get: () => baklavajs.TextInputInterfaceComponent
+  });
+  Object.defineProperty(exports2, "TextareaInputInterfaceComponent", {
+    enumerable: true,
+    get: () => baklavajs.TextareaInputInterfaceComponent
+  });
+  exports2.AbstractCodeNode = AbstractCodeNode;
+  exports2.ButtonInterface = ButtonInterface;
+  exports2.CheckboxInterface = CheckboxInterface;
+  exports2.Code = Code;
+  exports2.CodeGraphEditor = _sfc_main;
+  exports2.CodeInputInterface = CodeInputInterface;
+  exports2.CodeNode = CodeNode;
+  exports2.CodeNodeInterface = CodeNodeInterface;
+  exports2.CodeOutputInterface = CodeOutputInterface;
+  exports2.DEFAULT_SETTINGS = DEFAULT_SETTINGS;
+  exports2.DynamicCodeNode = DynamicCodeNode;
+  exports2.IntegerInterface = IntegerInterface;
+  exports2.NumberInterface = NumberInterface;
+  exports2.SelectInterface = SelectInterface;
+  exports2.SliderInterface = SliderInterface;
+  exports2.TextInputInterface = TextInputInterface;
+  exports2.TextInterface = TextInterface;
+  exports2.TextareaInputInterface = TextareaInputInterface;
+  exports2.addToolbarCommands = addToolbarCommands;
+  exports2.defineCodeNode = defineCodeNode;
+  exports2.defineDynamicCodeNode = defineDynamicCodeNode;
+  exports2.getCodeNodes = getCodeNodes;
+  exports2.getPositionAtColumn = getPositionAtColumn;
+  exports2.getPositionBeforeNode = getPositionBeforeNode;
+  exports2.loadNodeState = loadNodeState;
+  exports2.saveNodeState = saveNodeState;
+  exports2.transferCodeScript = transferCodeScript;
+  exports2.useCodeGraph = useCodeGraph;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+}));